/*! TYPOWP — AGPL-3.0-or-later — (C) 2026 NOLTE.PRO. See LICENSE.
 *  Section-Library — Basis-Styles + Hero-Designs.
 *  Alle Designs sind in Graustufen aufgebaut. Der SectionRenderer injiziert
 *  weiterhin die stabile var(--palette-*)-ABI; Verbraucher verwenden nach
 *  Moeglichkeit die kontrastgeprueften semantischen var(--token-*)-Rollen.
 */

/* === Wrapper-Klassen (Section-Container) ================================ */
.ty-section {
    /* Default-Werte als Fallback fuer Standalone-Vorschau */
    --palette-primary:    #1f2328;
    --palette-secondary:  #57606a;
    --palette-accent:     #0969da;
    --palette-background: #ffffff;
    --palette-surface:    #f6f8fa;
    --palette-text:       #1f2328;

    background: var(--token-canvas);
    color: var(--token-text);
    box-sizing: border-box;
}
.ty-section *, .ty-section *::before, .ty-section *::after { box-sizing: border-box; }

/* Padding-Varianten via Settings */
.ty-section--pad-compact  { padding: 1.5rem 1rem; }
.ty-section--pad-normal   { padding: 3rem 1.5rem; }
.ty-section--pad-spacious { padding: 5rem 1.5rem; }

/* Full-Width: Section spannt sich ueber gesamte Viewport-Breite,
   waehrend der Inhalt selbst zentriert bleibt. */
.ty-section--full-width {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* Schrift-Skala via Settings (.font-sm/md/lg) */
.ty-section--font-sm { font-size: 0.92rem; }
.ty-section--font-md { font-size: 1rem; }
.ty-section--font-lg { font-size: 1.15rem; }

/* Error-Variante (Renderer-Fallback bei fehlendem Template) */
.ty-section--error {
    border: 2px dashed var(--token-danger);
    background: var(--token-danger);
    color: var(--token-on-danger);
    border-radius: 4px;
    margin: 0.5rem 0;
}

/* === Editierbare Slots (Inline-Edit-Markierung im Editor) =============== */
.ty-editable { transition: outline 0.12s; outline: 2px solid transparent; outline-offset: 2px; border-radius: 2px; }
.ty-section[data-editing] .ty-editable:hover { outline-color: var(--token-focus-ring); cursor: text; }
.ty-section[data-editing] .ty-editable:focus { outline-color: var(--token-focus-ring); }
.ty-section--hero[data-editing] .ty-editable:hover,
.ty-section--hero[data-editing] .ty-editable:focus,
.ty-section--cta[data-editing] .ty-editable:hover,
.ty-section--cta[data-editing] .ty-editable:focus,
.ty-section--footer[data-editing] .ty-editable:hover,
.ty-section--footer[data-editing] .ty-editable:focus {
    outline-color: var(--token-focus-ring-on-brand);
}
.ty-section--hero :focus-visible,
.ty-section--cta :focus-visible,
.ty-section--footer :focus-visible,
.ty-pricing__card--highlight :focus-visible {
    outline-color: var(--token-focus-ring-on-brand);
}
.ty-section:not([data-editing]) .ty-editable { outline: none; }

/* === Buttons innerhalb von Sections =======================================
   Buttons ziehen ihre Werte aus den Component-Style-Variablen (--btn-*-*).
   Wenn keine Variable gesetzt ist, faellt das Design auf die Palette zurueck —
   so funktioniert die Section auch ohne konfigurierte Component-Styles. */
.ty-section .ty-btn {
    display: inline-block;
    text-decoration: none;
    line-height: 1.3;
    border-style: solid;
    transition-property: background-color, color, border-color, transform, box-shadow;
    transition-timing-function: ease-out;
    cursor: pointer;
}
.ty-section .ty-btn--primary {
    background: var(--btn-primary-bg, var(--token-accent));
    color: var(--btn-primary-color, var(--token-on-accent));
    border-color: var(--btn-primary-border-color, transparent);
    border-style: var(--btn-primary-border-style, solid);
    border-width: var(--btn-primary-border-width, 0);
    border-radius: var(--btn-primary-radius, 6px);
    padding: var(--btn-primary-padding-y, 10px) var(--btn-primary-padding-x, 22px);
    font-weight: var(--btn-primary-font-weight, 600);
    font-size: var(--btn-primary-font-size, 15px);
    transition-duration: var(--btn-primary-transition, 150ms);
}
.ty-section .ty-btn--primary:hover {
    background: var(--btn-primary-hover-bg, var(--token-accent));
    color: var(--btn-primary-hover-color, var(--token-on-accent));
}
.ty-section .ty-btn--secondary {
    background: var(--btn-secondary-bg, transparent);
    color: var(--btn-secondary-color, var(--token-link));
    border-color: var(--btn-secondary-border-color, var(--token-border));
    border-style: var(--btn-secondary-border-style, solid);
    border-width: var(--btn-secondary-border-width, 1px);
    border-radius: var(--btn-secondary-radius, 6px);
    padding: var(--btn-secondary-padding-y, 10px) var(--btn-secondary-padding-x, 22px);
    font-weight: var(--btn-secondary-font-weight, 500);
    font-size: var(--btn-secondary-font-size, 15px);
    transition-duration: var(--btn-secondary-transition, 150ms);
}
.ty-section .ty-btn--secondary:hover {
    background: var(--btn-secondary-hover-bg, var(--token-brand));
    color: var(--btn-secondary-hover-color, var(--token-on-brand));
}
.ty-section--hero .ty-btn--secondary {
    color: var(--btn-secondary-color, var(--token-on-brand));
    border-color: var(--btn-secondary-border-color, var(--token-border-on-brand));
}
.ty-section--hero .ty-btn--secondary:hover {
    background: var(--btn-secondary-hover-bg, var(--token-canvas));
    color: var(--btn-secondary-hover-color, var(--token-text));
}
/* Hover-Effekt-Hooks ueber data-hover (vom Section-Renderer gesetzt) */
.ty-section .ty-btn[data-hover="lift"]:hover  { transform: translateY(-1px); box-shadow: 0 4px 10px color-mix(in srgb, var(--token-shadow) 18%, transparent); }
.ty-section .ty-btn[data-hover="scale"]:hover { transform: scale(1.03); }
.ty-section .ty-btn[data-hover="glow"]:hover  { box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 30%, transparent); }
.ty-section .ty-btn + .ty-btn { margin-left: 0.5rem; }

/* === Bild-Platzhalter ==================================================== */
.ty-image-placeholder {
    background: var(--token-surface);
    border: 1px dashed var(--token-text-muted);
    border-radius: 6px;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--token-text-muted);
    font-size: 0.9rem;
    text-align: center;
    padding: 1rem;
}

/* ========================================================================
   Hero-Designs
   ======================================================================== */

/* --- Centered Hero --- */
.ty-section--hero {
    background: var(--token-brand);
    color: var(--token-on-brand);
}
.ty-hero { max-width: 1100px; margin: 0 auto; }
.ty-hero__headline {
    font-size: 2.4em;
    line-height: 1.15;
    margin: 0 0 0.6rem;
    font-weight: 800;
    color: inherit;
    overflow-wrap: anywhere;
}
.ty-hero__headline--xl {
    font-size: 3.6em;
    letter-spacing: -0.01em;
}
.ty-hero__subline {
    font-size: 1.15em;
    line-height: 1.5;
    margin: 0 0 1.4rem;
    color: var(--token-on-brand-muted);
}
.ty-hero__buttons {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.ty-hero--centered {
    text-align: center;
}
.ty-hero--centered .ty-hero__buttons { justify-content: center; }

/* --- Split Hero (Text + Bild zweispaltig) --- */
.ty-hero--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}
.ty-hero--split.ty-hero--reversed {
    grid-template-columns: 1fr 1fr;
}
.ty-hero--split.ty-hero--reversed .ty-hero__split-text { order: 2; }
.ty-hero--split.ty-hero--reversed .ty-hero__split-image { order: 1; }

.ty-hero__split-image img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    display: block;
}

@media (max-width: 720px) {
    .ty-hero--split,
    .ty-hero--split.ty-hero--reversed {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .ty-hero--split.ty-hero--reversed .ty-hero__split-text,
    .ty-hero--split.ty-hero--reversed .ty-hero__split-image { order: initial; }
}

/* --- Minimal Hero --- */
.ty-hero--minimal {
    text-align: left;
    max-width: 900px;
    margin: 0 auto;
}
.ty-hero--minimal .ty-hero__headline {
    font-size: 4em;
    line-height: 1.1;
    margin: 0 0 1.6rem;
}
@media (max-width: 720px) {
    .ty-hero--minimal .ty-hero__headline { font-size: 2.6em; }
}

/* === Reduced motion ===================================================== */
@media (prefers-reduced-motion: reduce) {
    .ty-section .ty-btn,
    .ty-section .ty-btn:hover { transition: none; transform: none; }
}

/* ========================================================================
   Layout-Sections (Editor V3) — Zellen-Container fuer Bausteine
   ======================================================================== */
.ty-layout {
    display: grid;
    gap: 1.5rem;
    padding: 1.5rem;
    box-sizing: border-box;
    background: var(--token-canvas);
}
.ty-layout--flex-equal-1 { grid-template-columns: 1fr; }
.ty-layout--flex-equal-2 { grid-template-columns: 1fr 1fr; }
.ty-layout--flex-equal-3 { grid-template-columns: 1fr 1fr 1fr; }
.ty-layout--flex-equal-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
.ty-layout--flex-equal-5 { grid-template-columns: repeat(5, 1fr); }

.ty-layout--flex-offset-1-2 { grid-template-columns: 1fr 2fr; }
.ty-layout--flex-offset-2-1 { grid-template-columns: 2fr 1fr; }
.ty-layout--flex-offset-1-3 { grid-template-columns: 1fr 3fr; }
.ty-layout--flex-offset-3-1 { grid-template-columns: 3fr 1fr; }

.ty-layout--flex-multirow-h2cf {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "h h" "l r" "f f";
}
.ty-layout--flex-multirow-h2cf > :nth-child(1) { grid-area: h; }
.ty-layout--flex-multirow-h2cf > :nth-child(2) { grid-area: l; }
.ty-layout--flex-multirow-h2cf > :nth-child(3) { grid-area: r; }
.ty-layout--flex-multirow-h2cf > :nth-child(4) { grid-area: f; }

.ty-layout--flex-multirow-h3c {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: "h h h" "a b c";
}
.ty-layout--flex-multirow-h3c > :nth-child(1) { grid-area: h; }
.ty-layout--flex-multirow-h3c > :nth-child(2) { grid-area: a; }
.ty-layout--flex-multirow-h3c > :nth-child(3) { grid-area: b; }
.ty-layout--flex-multirow-h3c > :nth-child(4) { grid-area: c; }

.ty-layout--flex-multirow-stack3 { grid-template-columns: 1fr; }

.ty-layout--flex-multirow-hero2c {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "h h" "l r";
}
.ty-layout--flex-multirow-hero2c > :nth-child(1) { grid-area: h; }
.ty-layout--flex-multirow-hero2c > :nth-child(2) { grid-area: l; }
.ty-layout--flex-multirow-hero2c > :nth-child(3) { grid-area: r; }

.ty-layout--flex-multicol-1-2stack {
    grid-template-columns: 1.6fr 1fr;
    grid-template-areas: "a b" "a c";
}
.ty-layout--flex-multicol-1-2stack > :nth-child(1) { grid-area: a; }
.ty-layout--flex-multicol-1-2stack > :nth-child(2) { grid-area: b; }
.ty-layout--flex-multicol-1-2stack > :nth-child(3) { grid-area: c; }

.ty-layout--flex-multicol-2stack-1 {
    grid-template-columns: 1fr 1.6fr;
    grid-template-areas: "a c" "b c";
}
.ty-layout--flex-multicol-2stack-1 > :nth-child(1) { grid-area: a; }
.ty-layout--flex-multicol-2stack-1 > :nth-child(2) { grid-area: b; }
.ty-layout--flex-multicol-2stack-1 > :nth-child(3) { grid-area: c; }

.ty-layout--flex-multicol-1-2-1 {
    grid-template-columns: 1fr 1.6fr 1fr;
    grid-template-areas: "a b d" "a c d";
}
.ty-layout--flex-multicol-1-2-1 > :nth-child(1) { grid-area: a; }
.ty-layout--flex-multicol-1-2-1 > :nth-child(2) { grid-area: b; }
.ty-layout--flex-multicol-1-2-1 > :nth-child(3) { grid-area: c; }
.ty-layout--flex-multicol-1-2-1 > :nth-child(4) { grid-area: d; }

.ty-layout--grid-2x2 { grid-template-columns: 1fr 1fr; }
.ty-layout--grid-3x2 { grid-template-columns: 1fr 1fr 1fr; }
.ty-layout--grid-3x3 { grid-template-columns: 1fr 1fr 1fr; }
.ty-layout--grid-4x1 { grid-template-columns: 1fr 1fr 1fr 1fr; }

.ty-layout--grid-masonry-3 {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: "a b c" "a d c";
}
.ty-layout--grid-masonry-3 > :nth-child(1) { grid-area: a; }
.ty-layout--grid-masonry-3 > :nth-child(2) { grid-area: b; }
.ty-layout--grid-masonry-3 > :nth-child(3) { grid-area: c; }
.ty-layout--grid-masonry-3 > :nth-child(4) { grid-area: d; }

.ty-layout--grid-masonry-mixed {
    grid-template-columns: 1.4fr 1fr;
    grid-template-areas: "a b" "a c";
}
.ty-layout--grid-masonry-mixed > :nth-child(1) { grid-area: a; }
.ty-layout--grid-masonry-mixed > :nth-child(2) { grid-area: b; }
.ty-layout--grid-masonry-mixed > :nth-child(3) { grid-area: c; }

.ty-layout--grid-sidebar-right { grid-template-columns: 3fr 1fr; }
.ty-layout--grid-sidebar-left  { grid-template-columns: 1fr 3fr; }
.ty-layout--grid-sidebar-right-stacked {
    grid-template-columns: 3fr 1fr;
    grid-template-areas: "a b" "a c" "a d";
}
.ty-layout--grid-sidebar-right-stacked > :nth-child(1) { grid-area: a; }
.ty-layout--grid-sidebar-right-stacked > :nth-child(2) { grid-area: b; }
.ty-layout--grid-sidebar-right-stacked > :nth-child(3) { grid-area: c; }
.ty-layout--grid-sidebar-right-stacked > :nth-child(4) { grid-area: d; }

@media (max-width: 720px) {
    .ty-layout { grid-template-columns: 1fr !important; grid-template-areas: none !important; }
    .ty-layout > * { grid-area: auto !important; }
}

/* Zelle: Container fuer einen Inhalts-Block (Text/Headline/Code/Bild) */
.ty-cell {
    min-height: 80px;
    background: var(--token-surface);
    color: var(--token-text);
    border-radius: 6px;
    padding: 1.2rem;
    box-sizing: border-box;
}
.ty-cell > *:first-child { margin-top: 0; }
.ty-cell > *:last-child  { margin-bottom: 0; }
.ty-cell h2 { font-size: 1.6em; margin: 0 0 0.6rem; color: var(--token-text); }
.ty-cell h3 { font-size: 1.25em; margin: 0 0 0.5rem; color: var(--token-text); }
.ty-cell p  { margin: 0 0 0.7rem; line-height: 1.5; }
.ty-cell pre {
    margin: 0; overflow-x: auto;
    background: var(--token-brand);
    color: var(--token-on-brand);
    padding: 0.8rem; border-radius: 4px;
    font-family: ui-monospace, "Cascadia Mono", monospace;
    font-size: 0.85em;
}
.ty-cell img { max-width: 100%; height: auto; border-radius: 4px; }

/* ========================================================================
   Feature-Sections — Karten-Raster
   ======================================================================== */
.ty-section--feature { padding: 4rem 1.5rem; }
.ty-feature { max-width: 1200px; margin: 0 auto; }
.ty-feature__head { text-align: center; margin: 0 0 2.5rem; }
.ty-feature__headline {
    font-size: 2em; margin: 0 0 0.6rem;
    color: var(--token-text);
}
.ty-feature__subline {
    font-size: 1.1em; line-height: 1.5; margin: 0;
    color: var(--token-text-muted);
    max-width: 640px; margin-left: auto; margin-right: auto;
}
.ty-feature__grid {
    display: grid; gap: 1.5rem;
}
.ty-feature__grid--3 { grid-template-columns: repeat(3, 1fr); }
.ty-feature__grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
    .ty-feature__grid--3, .ty-feature__grid--4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .ty-feature__grid--3, .ty-feature__grid--4 { grid-template-columns: 1fr; }
}
.ty-feature__card {
    background: var(--token-surface);
    padding: 2rem 1.5rem;
    border-radius: 8px;
    border: 1px solid var(--token-border);
}
.ty-feature__icon {
    font-size: 2.2em; line-height: 1;
    margin: 0 0 0.8rem;
}
.ty-feature__title {
    font-size: 1.25em; margin: 0 0 0.5rem;
    color: var(--token-text);
}
.ty-feature__text {
    font-size: 0.95em; line-height: 1.55; margin: 0;
    color: var(--token-text);
}

/* ========================================================================
   CTA-Sections — Banner + Split
   ======================================================================== */
.ty-section--cta { padding: 4rem 1.5rem; background: var(--token-brand); color: var(--token-on-brand); }
.ty-cta {
    max-width: 980px; margin: 0 auto;
    text-align: center;
}
.ty-cta--split {
    display: flex; align-items: center; justify-content: space-between;
    gap: 2rem; text-align: left;
}
@media (max-width: 720px) {
    .ty-cta--split { flex-direction: column; text-align: center; }
}
.ty-cta__text { flex: 1; }
.ty-cta__headline {
    font-size: 2.2em; margin: 0 0 0.6rem; color: inherit;
    overflow-wrap: anywhere;
}
.ty-cta--split .ty-cta__headline { font-size: 1.6em; }
.ty-cta__subline {
    font-size: 1.1em; margin: 0 0 1.4rem; color: var(--token-on-brand-muted);
}
.ty-cta__btn { display: inline-block; }
.ty-cta--banner .ty-cta__btn { font-size: 1.1em; padding: 0.85rem 2rem; }

/* ========================================================================
   FAQ-Sections — Akkordeon
   ======================================================================== */
.ty-section--faq { padding: 4rem 1.5rem; }
.ty-faq { max-width: 820px; margin: 0 auto; }
.ty-faq__head { text-align: center; margin: 0 0 2rem; }
.ty-faq__headline {
    font-size: 2em; margin: 0;
    color: var(--token-text);
}
.ty-faq__list { display: flex; flex-direction: column; gap: 0.6rem; }
.ty-faq__item {
    background: var(--token-surface);
    border: 1px solid var(--token-border);
    border-radius: 8px;
    padding: 0;
    overflow: hidden;
}
.ty-faq__question {
    cursor: pointer;
    padding: 1rem 1.3rem;
    font-weight: 600;
    color: var(--token-text);
    list-style: none;
    position: relative;
    padding-right: 2.5rem;
}
.ty-faq__question::-webkit-details-marker { display: none; }
.ty-faq__question::after {
    content: '+';
    position: absolute; right: 1.2rem; top: 50%;
    transform: translateY(-50%);
    font-size: 1.4em; font-weight: 300;
    color: var(--token-text-muted);
    transition: transform 0.18s;
}
.ty-faq__item[open] .ty-faq__question::after { content: '−'; }
.ty-faq__answer {
    padding: 0 1.3rem 1rem;
    margin: 0;
    color: var(--token-text);
    line-height: 1.6;
}

/* ========================================================================
   Testimonial-Sections — Zitate
   ======================================================================== */
.ty-section--testimonial { padding: 4rem 1.5rem; background: var(--token-surface); }
.ty-testimonial { max-width: 1200px; margin: 0 auto; }
.ty-testimonial__head { text-align: center; margin: 0 0 2.5rem; }
.ty-testimonial__headline {
    font-size: 2em; margin: 0;
    color: var(--token-text);
}
.ty-testimonial__grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
}
@media (max-width: 900px) {
    .ty-testimonial__grid { grid-template-columns: 1fr; }
}
.ty-testimonial__card {
    background: var(--token-canvas);
    padding: 1.8rem;
    border-radius: 8px;
    margin: 0;
    border-left: 4px solid var(--token-accent);
    display: flex; flex-direction: column;
}
.ty-testimonial__quote {
    font-size: 1.02em; line-height: 1.6;
    font-style: italic;
    margin: 0 0 1.2rem;
    color: var(--token-text);
    flex: 1;
}
.ty-testimonial__author {
    display: flex; flex-direction: column;
    color: var(--token-text);
    font-size: 0.92em;
}
.ty-testimonial__author strong { font-weight: 700; }
.ty-testimonial__role {
    color: var(--token-text-muted);
    font-weight: 400;
    font-size: 0.88em;
    margin-top: 0.1rem;
}

/* ========================================================================
   Pricing-Sections — Tier-Karten
   ======================================================================== */
.ty-section--pricing { padding: 4rem 1.5rem; }
.ty-pricing { max-width: 1200px; margin: 0 auto; }
.ty-pricing__head { text-align: center; margin: 0 0 2.5rem; }
.ty-pricing__headline {
    font-size: 2em; margin: 0;
    color: var(--token-text);
}
.ty-pricing__grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
    align-items: stretch;
}
@media (max-width: 900px) {
    .ty-pricing__grid { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }
}
.ty-pricing__card {
    background: var(--token-surface);
    padding: 2rem 1.5rem;
    border-radius: 10px;
    border: 1px solid var(--token-border);
    display: flex; flex-direction: column;
    text-align: center;
}
.ty-pricing__card--highlight {
    background: var(--token-brand);
    color: var(--token-on-brand);
    border-color: var(--token-border-on-brand);
    transform: translateY(-8px);
    box-shadow: 0 12px 32px color-mix(in srgb, var(--token-shadow) 12%, transparent);
}
.ty-pricing__card--highlight .ty-pricing__tier-name,
.ty-pricing__card--highlight .ty-pricing__price,
.ty-pricing__card--highlight .ty-pricing__period,
.ty-pricing__card--highlight .ty-pricing__text {
    color: var(--token-on-brand);
}
.ty-pricing__tier-name {
    font-size: 1.2em; font-weight: 600;
    margin: 0 0 0.8rem;
    color: var(--token-text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ty-pricing__price-block {
    margin: 0 0 1rem;
    display: flex; flex-direction: column;
}
.ty-pricing__price {
    font-size: 2.4em; font-weight: 700;
    color: var(--token-text);
    line-height: 1;
}
.ty-pricing__period {
    font-size: 0.85em; color: var(--token-text-muted);
    margin-top: 0.3rem;
}
.ty-pricing__text {
    font-size: 0.95em; line-height: 1.55;
    margin: 0 0 1.5rem;
    color: var(--token-text);
    flex: 1;
}
.ty-pricing__btn { display: inline-block; align-self: center; }

/* ========================================================================
   Team-Sections
   ======================================================================== */
.ty-section--team { padding: 4rem 1.5rem; }
.ty-team { max-width: 1200px; margin: 0 auto; }
.ty-team__head { text-align: center; margin: 0 0 2.5rem; }
.ty-team__headline { font-size: 2em; margin: 0 0 0.6rem; color: var(--token-text); }
.ty-team__subline { font-size: 1.1em; margin: 0; color: var(--token-text-muted); max-width: 640px; margin-left: auto; margin-right: auto; }
.ty-team__grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
}
@media (max-width: 900px) { .ty-team__grid { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; } }
.ty-team__card {
    background: var(--token-surface);
    padding: 2rem 1.5rem; border-radius: 8px; text-align: center;
    border: 1px solid var(--token-border);
}
.ty-team__avatar {
    font-size: 3em; line-height: 1; margin: 0 0 0.7rem;
    width: 84px; height: 84px;
    border-radius: 50%;
    background: var(--token-canvas);
    border: 2px solid var(--token-accent);
    display: flex; align-items: center; justify-content: center;
    margin-left: auto; margin-right: auto;
}
.ty-team__name { font-size: 1.15em; margin: 0 0 0.2rem; color: var(--token-text); }
.ty-team__role { font-size: 0.9em; margin: 0 0 0.7rem; color: var(--token-text-muted); font-weight: 600; }
.ty-team__bio { font-size: 0.92em; line-height: 1.5; margin: 0; color: var(--token-text); }

/* ========================================================================
   Contact-Sections
   ======================================================================== */
.ty-section--contact { padding: 4rem 1.5rem; }
.ty-contact { max-width: 1100px; margin: 0 auto; }
.ty-contact--split {
    display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center;
}
@media (max-width: 760px) { .ty-contact--split { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; } }
.ty-contact__text { min-width: 0; }
.ty-contact__headline { font-size: 1.9em; margin: 0 0 0.6rem; color: var(--token-text); }
.ty-contact__subline { font-size: 1.05em; line-height: 1.5; margin: 0; color: var(--token-text-muted); }
.ty-contact__info {
    background: var(--token-surface);
    border-left: 4px solid var(--token-accent);
    padding: 1.5rem 1.8rem;
    border-radius: 6px;
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    gap: 0.7rem 1.2rem;
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}
.ty-contact__info dt {
    font-weight: 700; color: var(--token-text-muted);
    font-size: 0.88em; text-transform: uppercase; letter-spacing: 0.04em;
}
.ty-contact__info dd { margin: 0; color: var(--token-text); }
.ty-contact__info a { color: var(--token-link); font-weight: 600; text-decoration: underline; }
.ty-contact__multiline { white-space: pre-line; }

/* ========================================================================
   Portfolio-Sections
   ======================================================================== */
.ty-section--portfolio { padding: 4rem 1.5rem; background: var(--token-surface); }
.ty-portfolio { max-width: 1200px; margin: 0 auto; }
.ty-portfolio__head { text-align: center; margin: 0 0 2.5rem; }
.ty-portfolio__headline { font-size: 2em; margin: 0 0 0.6rem; color: var(--token-text); }
.ty-portfolio__subline { font-size: 1.05em; margin: 0; color: var(--token-text-muted); }
.ty-portfolio__grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
}
@media (max-width: 900px) { .ty-portfolio__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ty-portfolio__grid { grid-template-columns: 1fr; } }
.ty-portfolio__card {
    background: var(--token-canvas);
    border-radius: 8px; overflow: hidden;
    border: 1px solid var(--token-border);
}
.ty-portfolio__thumb {
    aspect-ratio: 4/3;
    background: var(--token-brand);
    display: flex; align-items: center; justify-content: center;
    color: var(--token-on-brand);
    font-size: 3em;
}
.ty-portfolio__title { font-size: 1.1em; margin: 1rem 1.2rem 0.2rem; color: var(--token-text); }
.ty-portfolio__sub { font-size: 0.88em; margin: 0 1.2rem 1.2rem; color: var(--token-text-muted); }

/* ========================================================================
   Footer-Sections
   ======================================================================== */
.ty-section--footer { padding: 3.5rem 1.5rem 1.5rem; background: var(--token-brand); color: var(--token-on-brand); }
.ty-footer { max-width: 1200px; margin: 0 auto; }
.ty-footer__grid {
    display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem;
    margin: 0 0 2rem;
}
@media (max-width: 900px) { .ty-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ty-footer__grid { grid-template-columns: 1fr; } }
.ty-footer__brand { font-size: 1.4em; font-weight: 700; display: block; margin: 0 0 0.5rem; }
.ty-footer__brand-text { font-size: 0.92em; line-height: 1.5; color: var(--token-on-brand-muted); margin: 0; }
.ty-footer__col-title {
    font-size: 0.85em; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    margin: 0 0 0.8rem; color: var(--token-on-brand-muted);
}
.ty-footer__list { list-style: none; padding: 0; margin: 0; font-size: 0.92em; }
.ty-footer__list li { padding: 0.2rem 0; color: var(--token-on-brand-muted); }
.ty-footer__multiline { white-space: pre-line; font-size: 0.92em; color: var(--token-on-brand-muted); margin: 0; }
.ty-footer__copy {
    border-top: 1px solid var(--token-border-on-brand);
    padding-top: 1.2rem; margin: 0;
    font-size: 0.82em; color: var(--token-on-brand-muted); text-align: center;
}

/* ========================================================================
   Navbar-Sections
   ======================================================================== */
.ty-section--navbar { padding: 1rem 1.5rem; background: var(--token-canvas); border-bottom: 1px solid var(--token-border); }
.ty-navbar {
    max-width: 1200px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 0.75rem 1.5rem;
}
.ty-navbar__brand {
    font-size: 1.25em; font-weight: 700;
    color: var(--token-link); text-decoration: underline;
}
.ty-navbar__links {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-wrap: wrap; gap: 0.75rem 1.8rem;
}
.ty-navbar__links a {
    color: var(--token-link); text-decoration: underline;
    font-weight: 500; font-size: 0.95em;
    padding: 0.25rem 0;
    border-bottom: 2px solid transparent;
}
.ty-navbar__links a:hover { color: var(--token-link); border-bottom-color: var(--token-border); }
@media (max-width: 560px) {
    .ty-navbar,
    .ty-navbar__links { align-items: flex-start; }
    .ty-navbar__links { gap: 0.65rem 1rem; font-size: 0.85em; width: 100%; }
}

@media (forced-colors: active) {
    .ty-section .ty-btn {
        border-color: ButtonText;
        border-width: 1px;
    }
    .ty-section .ty-btn:focus-visible,
    .ty-faq__question:focus-visible,
    .ty-navbar a:focus-visible {
        outline: 2px solid Highlight;
        outline-offset: 2px;
    }
    .ty-faq__item,
    .ty-section--navbar {
        border-color: CanvasText;
    }
}

/* ========================================================================
   Logos-Sections
   ======================================================================== */
.ty-section--logos { padding: 3rem 1.5rem; background: var(--token-surface); }
.ty-logos { max-width: 1100px; margin: 0 auto; text-align: center; }
.ty-logos__headline {
    font-size: 0.95em; margin: 0 0 1.6rem;
    color: var(--token-text-muted);
    text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;
}
.ty-logos__row {
    display: flex; justify-content: space-around; align-items: center;
    flex-wrap: wrap; gap: 1.5rem 2.5rem;
}
.ty-logos__item {
    font-size: 1.15em; font-weight: 700;
    color: var(--token-text-muted);
    font-family: ui-serif, Georgia, serif;
    letter-spacing: 0.02em;
}
.ty-logos__item:hover { color: var(--token-text); }