/* ==========================================================================
   Malloriffa GmbH — Stylesheet
   Clean, hell, ruhig. Weiß + #1D7874.
   ========================================================================== */

:root {
    /* Markenfarben. --accent ist die Hauptfarbe (Kontrast auf Weiß 5,26:1,
       genug für Fließtext), --accent-light ist rein dekorativ (2,46:1) und
       darf nie Schrift tragen. --accent-mid ist der Verlaufspartner für
       große Schrift (3,36:1). */
    --accent:        #1D7874;
    --accent-light:  #5FB3AB;
    --accent-mid:    #3E9A92;
    --accent-deep:   #155956;
    --accent-soft:   #E8F2F1;
    --accent-border: #D2E4E3;

    --ink:       #1d1d1f;
    --ink-soft:  #424245;
    --muted:     #6e6e73;
    --dim:       #86868b;

    --bg:        #ffffff;
    --bg-soft:   #f5f5f7;
    --bg-dark:   #101014;

    --border:    rgba(0, 0, 0, 0.08);
    --border-soft: rgba(0, 0, 0, 0.05);

    --radius-s:  12px;
    --radius:    20px;
    --radius-l:  28px;
    --radius-full: 999px;

    --shadow-s:  0 1px 2px rgba(16, 16, 20, 0.04), 0 4px 16px rgba(16, 16, 20, 0.05);
    --shadow-m:  0 2px 6px rgba(16, 16, 20, 0.05), 0 16px 40px rgba(16, 16, 20, 0.09);
    --shadow-accent: 0 8px 24px rgba(29, 120, 116, 0.28);

    --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
            "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --nav-h: 60px;
}

/* ---------- Basis ---------- */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-h) + 24px);
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font);
    font-size: 17px;
    line-height: 1.6;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: none; }

::selection { background: var(--accent); color: #fff; }

.container {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 24px;
}

.container--narrow { max-width: 780px; }

/* ---------- Typografie ---------- */

h1, h2, h3, h4 {
    font-weight: 650;
    letter-spacing: -0.022em;
    line-height: 1.12;
    color: var(--ink);
}

.display {
    font-size: clamp(2.6rem, 6.5vw, 4.4rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
}

.headline {
    font-size: clamp(1.9rem, 4vw, 2.9rem);
    font-weight: 700;
    letter-spacing: -0.026em;
    line-height: 1.08;
}

.subhead {
    font-size: clamp(1.2rem, 2vw, 1.45rem);
    font-weight: 600;
    letter-spacing: -0.015em;
}

.lead {
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    line-height: 1.55;
    color: var(--muted);
    font-weight: 400;
}

.eyebrow {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 650;
    letter-spacing: 0.02em;
    color: var(--accent);
    margin-bottom: 14px;
}

/* Farbverlauf für einzelne Wörter in Überschriften.
   Zwei Dinge sind hier wichtig:
   1. Der Verlauf liegt auf einem <span>, nicht auf der Überschrift. Ein
      Block-Element ist so breit wie der Container — der Verlauf würde sich
      über die ganze Zeile ziehen und beim zentrierten Wort nur ein schmaler
      Ausschnitt aus der Mitte sichtbar sein. Der span umschließt das Wort.
   2. Das helle Ende ist #4AA099, nicht die helle Markenfarbe #5FB3AB. Die
      käme auf Weiß nur auf 2,46:1 und wäre am Wortende kaum noch lesbar;
      #4AA099 schafft 3,10:1 und damit den Wert, den große Schrift braucht. */
.text-verlauf {
    background: linear-gradient(105deg, var(--accent) 0%, #4AA099 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Kopf ohne Fließtext braucht weniger Abstand nach unten. */
.section-header--knapp { margin-bottom: 48px; }

.text-accent {
    background: linear-gradient(96deg, var(--accent) 0%, var(--accent-mid) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ---------- Navigation ---------- */

.nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    height: var(--nav-h);
    background: rgba(255, 255, 255, 0.78);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease, background 0.3s ease;
}

.nav.is-scrolled {
    border-bottom-color: var(--border-soft);
    background: rgba(255, 255, 255, 0.86);
}

.nav-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 24px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.nav-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
}

/* Das Logo bringt seine gerundete Form selbst mit — hier wird nur die Größe
   festgelegt. Kein zusätzlicher Hintergrund, kein zweiter Radius. */
.logo-mark {
    width: 32px;
    height: 32px;
    display: block;
    flex: none;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 30px;
}

.nav-links a {
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--ink-soft);
    transition: color 0.2s ease;
}

.nav-links a:hover { color: var(--ink); }
.nav-links a.is-active { color: var(--ink); font-weight: 600; }

.nav-cta {
    padding: 8px 18px;
    border-radius: var(--radius-full);
    background: var(--ink);
    color: #fff !important;
    font-weight: 600 !important;
    transition: background 0.2s ease, transform 0.2s var(--ease);
}

.nav-cta:hover { background: var(--accent); }

.nav-toggle {
    display: none;
    width: 40px; height: 40px;
    border: none;
    background: none;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.nav-toggle span {
    display: block;
    width: 20px; height: 1.8px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform 0.3s var(--ease), opacity 0.2s ease;
}

/* ---------- Buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 26px;
    border-radius: var(--radius-full);
    font-family: var(--font);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    cursor: pointer;
    border: none;
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
                background 0.2s ease, color 0.2s ease;
}

.btn-primary {
    background: var(--accent);
    color: #fff;
    box-shadow: var(--shadow-accent);
}

.btn-primary:hover {
    background: var(--accent-deep);
    transform: translateY(-1px);
}

.btn-secondary {
    background: transparent;
    color: var(--ink);
    border: 1px solid rgba(0, 0, 0, 0.16);
}

.btn-secondary:hover {
    border-color: var(--ink);
    transform: translateY(-1px);
}

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
}

/* ---------- Sektionen ---------- */

section { padding: 104px 0; }

.section-soft { background: var(--bg-soft); }

.section-header {
    max-width: 700px;
    margin: 0 auto 64px;
    text-align: center;
}

.section-header .lead { margin-top: 18px; }

/* ---------- Grid & Cards ---------- */

.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
    background: var(--bg);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 34px 30px;
    box-shadow: var(--shadow-s);
    transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-m);
}

.section-soft .card { border-color: transparent; }

.card h3 {
    font-size: 1.2rem;
    margin: 18px 0 10px;
}

.card p {
    font-size: 0.96rem;
    color: var(--muted);
    line-height: 1.6;
}

.card-icon {
    width: 46px; height: 46px;
    border-radius: 13px;
    background: var(--accent-soft);
    color: var(--accent);
    display: grid;
    place-items: center;
}

.card-link {
    display: inline-block;
    margin-top: 18px;
    font-size: 0.94rem;
    font-weight: 600;
    color: var(--accent);
}

.card-link:hover { color: var(--accent-deep); }

/* ---------- Feature-Block (Text + Visual) ---------- */

.feature-block {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(40px, 6vw, 88px);
    align-items: center;
}

.feature-block.reverse .feature-content { order: 2; }
.feature-block.reverse .feature-visual  { order: 1; }

.feature-content .lead { margin-top: 18px; }

.feature-list {
    list-style: none;
    margin-top: 26px;
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 1rem;
    color: var(--ink-soft);
    line-height: 1.5;
}

.feature-list li::before {
    content: "";
    flex: none;
    width: 20px; height: 20px;
    margin-top: 2px;
    border-radius: 50%;
    background: var(--accent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
    background-color: var(--accent);
}

.feature-visual {
    border-radius: var(--radius-l);
    background: linear-gradient(150deg, #F8FBFB 0%, #E4EFEE 55%, #D6E7E6 100%);
    border: 1px solid var(--accent-border);
    min-height: 380px;
    display: grid;
    place-items: center;
    overflow: hidden;
    position: relative;
}

/* ---------- Abstrakte Visuals ---------- */

.visual-swatches {
    width: 74%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.visual-swatches > div {
    aspect-ratio: 1.35;
    border-radius: 16px;
    box-shadow: var(--shadow-s);
    display: grid;
    place-items: center;
    font-weight: 750;
    letter-spacing: -0.01em;
}

/* ---------- Prozess ---------- */

.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    counter-reset: step;
}

.process-step {
    position: relative;
    padding: 30px 26px;
    border-radius: var(--radius);
    background: var(--bg);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-s);
}

.process-num {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.06em;
}

.process-step h3 {
    font-size: 1.12rem;
    margin: 12px 0 8px;
}

.process-step p {
    font-size: 0.94rem;
    color: var(--muted);
}

/* ---------- Showcase (Referenzen) ---------- */

.showcase {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: clamp(40px, 6vw, 80px);
    align-items: center;
    padding: clamp(36px, 5vw, 64px);
    border-radius: var(--radius-l);
    background: var(--bg);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-s);
}

.showcase h2, .showcase h3 { margin: 14px 0 14px; }

.showcase .lead { font-size: 1.08rem; }

.showcase-visual {
    display: grid;
    place-items: center;
    min-height: 260px;
    border-radius: var(--radius);
    background: linear-gradient(150deg, #F8FBFB, #DDEBEA);
    border: 1px solid var(--accent-border);
    padding: 40px;
}

.showcase-visual img {
    width: min(180px, 55%);
    border-radius: 22%;
    box-shadow: var(--shadow-m);
}

.tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
}

.tag {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid var(--accent-border);
    padding: 5px 13px;
    border-radius: var(--radius-full);
}

/* ---------- Trennlinie zwischen zwei hellen Abschnitten ----------
   Stoßen zwei Abschnitte mit gleichem Hintergrund aneinander, verschwimmen sie
   ineinander. Eine haarfeine Linie in Containerbreite trennt sie, ohne sich
   als Gestaltungselement in den Vordergrund zu drängen. */

.section-line { position: relative; }

.section-line::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(100% - 48px, 1120px);
    height: 1px;
    background: var(--border-soft);
}

/* ---------- Pricing ---------- */

/* ---------- Spalten mit Haarlinien ----------
   Für Aufzählungen, die keine Karten sein sollen: drei oder zwei Spalten,
   getrennt durch je eine Linie. Am Handy werden daraus Zeilen. */

.spalten {
    display: grid;
    border-top: 1px solid var(--border-soft);
}

.spalten > div { padding: 32px 30px 34px; }
.spalten > div:first-child { padding-left: 0; }
.spalten > div:last-child { padding-right: 0; }
.spalten > div + div { border-left: 1px solid var(--border-soft); }

.spalten-3 { grid-template-columns: repeat(3, 1fr); }

.spalten-2 {
    grid-template-columns: repeat(2, 1fr);
    max-width: 880px;
    margin: 0 auto;
}

.spalten-num {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--accent);
    margin-bottom: 13px;
}

.spalten h3 {
    font-size: 1.15rem;
    letter-spacing: -0.018em;
    margin-bottom: 9px;
}

.spalten p {
    font-size: 0.96rem;
    color: var(--muted);
    line-height: 1.62;
}

.spalten-titel {
    text-align: center;
    font-size: clamp(1.25rem, 2.2vw, 1.6rem);
    font-weight: 650;
    letter-spacing: -0.02em;
    margin: clamp(54px, 7vw, 84px) 0 6px;
}

@media (max-width: 860px) {
    .spalten-3, .spalten-2 { grid-template-columns: 1fr; }
    .spalten > div { padding: 26px 0 28px; }
    .spalten > div + div {
        border-left: none;
        border-top: 1px solid var(--border-soft);
    }
}

/* ---------- FAQ ---------- */

.faq {
    max-width: 760px;
    margin: 0 auto;
    border-top: 1px solid var(--border-soft);
}

.faq-item { border-bottom: 1px solid var(--border-soft); }

.faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 4px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--font);
    font-size: 1.08rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--ink);
}

.faq-q .icon {
    flex: none;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--bg-soft);
    color: var(--ink-soft);
    display: grid;
    place-items: center;
    font-size: 1.05rem;
    font-weight: 500;
    transition: transform 0.3s var(--ease), background 0.2s ease, color 0.2s ease;
}

.faq-item.is-open .icon {
    transform: rotate(45deg);
    background: var(--accent);
    color: #fff;
}

.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s var(--ease);
}

.faq-a-inner {
    padding: 0 4px 26px;
    color: var(--muted);
    line-height: 1.65;
    max-width: 660px;
}

/* ---------- Team ---------- */

.team-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 860px;
    margin: 0 auto;
}

.team-card {
    padding: 40px 34px;
    border-radius: var(--radius-l);
    background: var(--bg);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-s);
    text-align: center;
}

.team-avatar {
    width: 84px; height: 84px;
    margin: 0 auto 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5FB3AB, var(--accent));
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.team-card h3 { font-size: 1.22rem; }

.team-card .role {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--accent);
    margin: 6px 0 16px;
}

.team-card p {
    font-size: 0.95rem;
    color: var(--muted);
    line-height: 1.65;
}

/* ---------- Dunkle CTA-Sektion ---------- */

.cta-dark {
    position: relative;
    background: var(--bg-dark);
    border-radius: var(--radius-l);
    padding: clamp(56px, 8vw, 96px) clamp(28px, 6vw, 80px);
    text-align: center;
    overflow: hidden;
}

.cta-dark::before {
    content: "";
    position: absolute;
    bottom: -300px; left: 50%;
    transform: translateX(-50%);
    width: 900px; height: 560px;
    background: radial-gradient(closest-side, rgba(29, 120, 116, 0.34), transparent 70%);
    pointer-events: none;
}

.cta-dark > * { position: relative; }

.cta-dark .eyebrow { color: #8FD3CB; }

.cta-dark .headline { color: #fff; }

.cta-dark .lead {
    color: rgba(255, 255, 255, 0.65);
    max-width: 560px;
    margin: 18px auto 0;
}

.cta-dark .btn-row { justify-content: center; }

.cta-dark .btn-secondary {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
}

.cta-dark .btn-secondary:hover { border-color: #fff; }

/* ---------- Unterseiten-Header ---------- */

.page-header {
    position: relative;
    padding: calc(var(--nav-h) + 80px) 0 72px;
    text-align: center;
    overflow: hidden;
}

.page-header::before {
    content: "";
    position: absolute;
    top: -340px; left: 50%;
    transform: translateX(-50%);
    width: 1000px; height: 640px;
    background: radial-gradient(closest-side, rgba(29, 120, 116, 0.09), transparent 72%);
    pointer-events: none;
}

.page-header .lead {
    max-width: 620px;
    margin: 22px auto 0;
}

/* ---------- Schlussblock ohne Kasten ----------
   Kein Rahmen, keine Fläche: Was den Abschnitt abgrenzt, ist eine Haarlinie
   und viel Raum darüber und darunter. Der Text steht dadurch nicht *in*
   etwas, sondern für sich — und die Schrift darf größer sein, weil sie die
   letzte Aussage der Seite ist. */

.abschluss {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: clamp(100px, 13vw, 168px) 0;
    border-top: 1px solid var(--border-soft);
}

.abschluss > .container { position: relative; z-index: 2; }

.abschluss .headline {
    font-size: clamp(2.3rem, 5.4vw, 3.6rem);
    letter-spacing: -0.03em;
}

.abschluss .lead {
    max-width: 52ch;
    margin: 24px auto 0;
}

.abschluss .btn-row { justify-content: center; }

/* ---------- Kontakt ---------- */

.contact-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(32px, 5vw, 64px);
    align-items: start;
}

.contact-info h3 {
    font-size: 1.3rem;
    margin-bottom: 26px;
}

.contact-item {
    display: flex;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--border-soft);
}

.contact-item:last-child { border-bottom: none; }

.contact-item .ic {
    flex: none;
    width: 40px; height: 40px;
    border-radius: 12px;
    background: var(--accent-soft);
    color: var(--accent);
    display: grid;
    place-items: center;
}

.contact-item .label {
    font-size: 0.8rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--dim);
    margin-bottom: 3px;
}

.contact-item .value {
    font-size: 0.98rem;
    color: var(--ink-soft);
    line-height: 1.55;
}

.contact-form {
    background: var(--bg);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-s);
    padding: clamp(28px, 4vw, 44px);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.form-field { margin-bottom: 18px; }

.form-field label {
    display: block;
    font-size: 0.86rem;
    font-weight: 600;
    margin-bottom: 7px;
    color: var(--ink-soft);
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    font-family: var(--font);
    font-size: 0.98rem;
    color: var(--ink);
    background: var(--bg-soft);
    border: 1.5px solid transparent;
    border-radius: var(--radius-s);
    padding: 13px 16px;
    outline: none;
    transition: border-color 0.2s ease, background 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}

.form-field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    padding-right: 42px;
}

.form-field textarea {
    min-height: 130px;
    resize: vertical;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    background: #fff;
    border-color: var(--accent);
}

.form-check {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    font-size: 0.86rem;
    color: var(--muted);
    line-height: 1.5;
    margin: 6px 0 22px;
    cursor: pointer;
}

.form-check input {
    flex: none;
    width: 17px; height: 17px;
    margin-top: 2px;
    accent-color: var(--accent);
}

.form-success {
    display: none;
    background: var(--accent-soft);
    border: 1px solid var(--accent-border);
    color: var(--accent-deep);
    border-radius: var(--radius-s);
    padding: 14px 18px;
    font-size: 0.94rem;
    font-weight: 550;
    margin-bottom: 20px;
}

.form-success.is-visible { display: block; }

/* ---------- Rechtstexte ---------- */

.legal-content {
    max-width: 760px;
    margin: 0 auto;
}

.legal-content h2 {
    font-size: 1.45rem;
    margin: 52px 0 16px;
}

.legal-content h3 {
    font-size: 1.1rem;
    margin: 34px 0 10px;
}

.legal-content p {
    color: var(--ink-soft);
    line-height: 1.7;
    margin-bottom: 14px;
}

.legal-content ul {
    margin: 0 0 16px 22px;
    color: var(--ink-soft);
    line-height: 1.7;
}

.legal-card {
    background: var(--bg-soft);
    border-radius: var(--radius);
    padding: 30px 32px;
    margin: 24px 0;
}

.legal-card dl {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 14px 24px;
}

.legal-card dt {
    font-size: 0.86rem;
    font-weight: 650;
    color: var(--dim);
    padding-top: 2px;
}

.legal-card dd {
    color: var(--ink);
    line-height: 1.6;
}

/* ---------- Footer ---------- */

.footer {
    background: var(--bg-soft);
    border-top: 1px solid var(--border-soft);
    padding: 64px 0 36px;
    font-size: 0.9rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 52px;
}

.footer-brand p {
    color: var(--muted);
    margin-top: 16px;
    max-width: 300px;
    line-height: 1.6;
}

.footer h4 {
    font-size: 0.82rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--dim);
    margin-bottom: 16px;
}

.footer ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer ul a {
    color: var(--ink-soft);
    transition: color 0.2s ease;
}

.footer ul a:hover { color: var(--accent); }

.footer-bottom {
    border-top: 1px solid var(--border-soft);
    padding-top: 26px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    color: var(--dim);
    font-size: 0.85rem;
}

.footer-bottom a {
    color: var(--dim);
    margin-left: 18px;
}

.footer-bottom a:hover { color: var(--accent); }

/* ---------- Cookie-Hinweis ---------- */

.cookie-banner {
    position: fixed;
    left: 20px; right: 20px; bottom: 20px;
    z-index: 200;
    max-width: 520px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    box-shadow: var(--shadow-m);
    padding: 20px 22px;
    display: none;
    align-items: center;
    gap: 18px;
}

.cookie-banner.is-visible { display: flex; }

.cookie-banner p {
    font-size: 0.86rem;
    color: var(--muted);
    line-height: 1.5;
}

.cookie-banner .btn {
    padding: 9px 20px;
    font-size: 0.9rem;
    flex: none;
}

/* ---------- Scroll-Reveal ---------- */

.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; transition: none; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Responsive ---------- */

@media (max-width: 1000px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .process-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
    section { padding: 76px 0; }

    .nav-toggle { display: flex; }

    .nav-links {
        position: fixed;
        top: var(--nav-h); left: 0; right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: rgba(255, 255, 255, 0.97);
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        border-bottom: 1px solid var(--border-soft);
        padding: 12px 24px 22px;
        transform: translateY(-12px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease, transform 0.3s var(--ease);
    }

    .nav-links.is-open {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }

    .nav-links a {
        padding: 13px 0;
        font-size: 1.05rem;
        border-bottom: 1px solid var(--border-soft);
    }

    .nav-links a:last-child { border-bottom: none; }

    .nav-cta {
        margin-top: 14px;
        text-align: center;
        border-bottom: none !important;
    }

    body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6.8px) rotate(45deg); }
    body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
    body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6.8px) rotate(-45deg); }

    .grid-2, .grid-3 { grid-template-columns: 1fr; }

    .feature-block {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .feature-block.reverse .feature-content { order: 1; }
    .feature-block.reverse .feature-visual  { order: 2; }

    .feature-visual { min-height: 300px; }

    .showcase { grid-template-columns: 1fr; }


    .team-grid { grid-template-columns: 1fr; max-width: 460px; }

    .contact-grid { grid-template-columns: 1fr; }

    .form-row { grid-template-columns: 1fr; gap: 0; }

    .legal-card dl { grid-template-columns: 1fr; gap: 4px 0; }
    .legal-card dt { margin-top: 14px; }
    .legal-card dt:first-child { margin-top: 0; }
}

@media (max-width: 560px) {
    .grid-4 { grid-template-columns: 1fr; }
    .process-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    .btn { width: 100%; }
    .btn-row { flex-direction: column; }
}

/* ==========================================================================
   KINO-EBENE
   Filmische Startseite ohne Bibliothek und ohne Build-Kette: reines CSS + ein
   kleiner Scroll-Motor in cinema.js. Der Motor schreibt in jeden animierten
   Abschnitt eine Zahl `--p` von 0 bis 1 — wie weit er durchgescrollt ist.
   Alles Weitere rechnet das Stylesheet daraus aus.

   Grundsatz: Bewegung nur dort, wo sie etwas erzählt. Dazwischen bleibt es
   ruhig, weiß und lesbar — sonst wird aus Kino Kirmes.
   ========================================================================== */

@property --p {
    syntax: "<number>";
    initial-value: 0;
    inherits: true;
}

:root {
    --scrolled: 0;              /* Gesamtfortschritt der Seite, 0 bis 1 */
    --film-bg: #0a0a0f;
}

/* ---------- Aurora: das Licht hinter allem ----------
   Bewusst als weiche Radial-Verläufe gebaut statt mit filter: blur(). Ein
   großflächiger Blur zwingt den Browser bei jedem Bild zum Neuzeichnen und
   kostet auf dem Handy spürbar Bildrate — die Verläufe sind von Haus aus
   weich und laufen auf der Grafikkarte. */

.aurora {
    position: absolute;
    inset: -25%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.aurora i {
    position: absolute;
    display: block;
    border-radius: 50%;
    will-change: transform;
}

.aurora i:nth-child(1) {
    top: 2%; left: 8%;
    width: 62vw; height: 62vw;
    background: radial-gradient(closest-side, rgba(29, 120, 116, 0.30), transparent 70%);
    animation: drift-a 26s var(--ease) infinite alternate;
}

.aurora i:nth-child(2) {
    top: 18%; right: 2%;
    width: 52vw; height: 52vw;
    background: radial-gradient(closest-side, rgba(95, 179, 171, 0.26), transparent 70%);
    animation: drift-b 32s var(--ease) infinite alternate;
}

.aurora i:nth-child(3) {
    bottom: 0; left: 32%;
    width: 46vw; height: 46vw;
    background: radial-gradient(closest-side, rgba(21, 92, 89, 0.20), transparent 70%);
    animation: drift-c 38s var(--ease) infinite alternate;
}

@keyframes drift-a { to { transform: translate3d(9vw, 5vh, 0) scale(1.16); } }
@keyframes drift-b { to { transform: translate3d(-11vw, 8vh, 0) scale(0.86); } }
@keyframes drift-c { to { transform: translate3d(6vw, -7vh, 0) scale(1.22); } }

/* Hellere Fassung für weiße Abschnitte */
.aurora--light i:nth-child(1) { background: radial-gradient(closest-side, rgba(29, 120, 116, 0.13), transparent 70%); }
.aurora--light i:nth-child(2) { background: radial-gradient(closest-side, rgba(95, 179, 171, 0.11), transparent 70%); }
.aurora--light i:nth-child(3) { background: radial-gradient(closest-side, rgba(21, 92, 89, 0.09), transparent 70%); }

/* ---------- Korn ----------
   Nur in den dunklen Bildflächen. Auf Weiß würde es nur schmutzig wirken. */

.grain::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    opacity: 0.32;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* ---------- Fortschrittslinie in der Navigation ---------- */

.nav-progress {
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    transform: scaleX(var(--scrolled));
    transform-origin: 0 50%;
    background: linear-gradient(90deg, var(--accent), #3E9A92);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.nav.is-scrolled .nav-progress { opacity: 1; }

@media (min-width: 861px) {
    .nav.is-inverted {
        background: rgba(10, 10, 15, 0.55);
        border-bottom-color: rgba(255, 255, 255, 0.10);
    }

    .nav.is-inverted .nav-logo,
    .nav.is-inverted .nav-links a { color: #fff; }
    .nav.is-inverted .nav-links a:hover { color: #fff; }

    .nav.is-inverted .nav-cta {
        background: #fff;
        color: #101014 !important;
    }

    .nav.is-inverted .nav-cta:hover { background: var(--accent); color: #fff !important; }

    .nav-logo, .nav-links a { transition: color 0.35s ease; }
    .nav-cta { transition: background 0.35s ease, color 0.35s ease, transform 0.2s var(--ease); }
}

/* ==========================================================================
   1 — HERO
   ========================================================================== */

.hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding: calc(var(--nav-h) + 88px) 0 120px;
    text-align: center;
    overflow: hidden;
    background: var(--bg) url("../img/hero-foto.jpg") center / cover no-repeat;
}

/* Schleier über der Textur: oben licht genug, dass das Foto durchkommt, unten
   in reines Weiß auslaufend. Das hält die Schrift ruhig lesbar und lässt den
   Bereich weich in den nächsten Abschnitt übergehen, statt mit einer harten
   Kante abzubrechen. */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.90) 0%,
        rgba(255, 255, 255, 0.74) 15%,
        rgba(255, 255, 255, 0.80) 52%,
        rgba(255, 255, 255, 0.95) 84%,
        #ffffff 100%);
}

/* Das Licht liegt über dem Schleier — sonst wäre vom Violett nichts mehr da. */
.hero .aurora { z-index: 2; }

/* Der Inhalt zieht sich beim Wegscrollen leicht zurück und wird durchsichtig —
   die Kamera fährt weg, statt dass der Text hart aus dem Bild rutscht. */
.hero-inner {
    position: relative;
    z-index: 3;
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
    transform: translate3d(0, calc(var(--p) * -60px), 0) scale(calc(1 - var(--p) * 0.05));
    opacity: calc(1 - var(--p) * 1.15);
    will-change: transform, opacity;
}

/* Firmenzeile über der Überschrift.
   Bewusst in normaler Schreibweise: in Versalien würde aus „GmbH" ein
   „GMBH" — der Rechtsformzusatz verliert dabei genau die Form, an der man
   ihn erkennt, und damit den Zweck, warum er dort steht. Die Wirkung
   entsteht stattdessen über Größe, Gewicht und Laufweite. Kein Kästchen,
   kein Punkt, keine Linie — die Zeile soll die Überschrift ankündigen,
   nicht mit ihr konkurrieren. */
.hero-firma {
    font-size: clamp(0.86rem, 1.15vw, 0.95rem);
    font-weight: 650;
    letter-spacing: 0.075em;
    color: var(--accent);
    margin-bottom: clamp(16px, 2.2vw, 26px);
    animation: rise 0.9s var(--ease) both;
}

.hero-title {
    font-size: clamp(2.7rem, 7.4vw, 5.2rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.02;
}

.hero .lead {
    max-width: 610px;
    margin: 30px auto 0;
    animation: rise 1s var(--ease) 0.55s both;
}

.hero .btn-row {
    justify-content: center;
    animation: rise 1s var(--ease) 0.7s both;
}

@keyframes rise {
    from { opacity: 0; transform: translate3d(0, 16px, 0); }
    to   { opacity: 1; transform: none; }
}

.hero-scroll {
    position: absolute;
    left: 50%;
    bottom: 26px;
    z-index: 3;
    width: 44px; height: 44px;
    display: grid;
    place-items: center;
    color: var(--dim);
    opacity: calc(1 - var(--p) * 2.2);
    animation: heroNudge 2.8s var(--ease) infinite;
}

.hero-scroll:hover { color: var(--ink); }

/* Die Mitten-Ausrichtung muss in jedem Schritt mitlaufen — sonst springt der
   Pfeil beim Start der Bewegung an den linken Rand. */
@keyframes heroNudge {
    0%, 100% { transform: translate(-50%, 0); }
    50%      { transform: translate(-50%, 7px); }
}

/* ---------- Wort-für-Wort-Aufbau ----------
   cinema.js zerlegt die Überschrift in Wörter und nummeriert sie über --i.
   Jedes Wort steigt aus seiner eigenen Zeile hoch, leicht zeitversetzt. */

/* Die Hülle selbst bleibt, was sie war — eine Überschrift ist ein Block.
   Nur die Wörter darin sind inline-block. */
.words .w {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    padding-bottom: 0.08em;
    margin-bottom: -0.08em;
}

.words .w > span {
    display: inline-block;
    transform: translate3d(0, 105%, 0);
    animation: wordUp 1s var(--ease) forwards;
    animation-delay: calc(var(--i) * 0.055s + 0.18s);
}

@keyframes wordUp { to { transform: none; } }

.words .text-accent {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: inherit;
}

.words .w.accent > span {
    background: linear-gradient(96deg, var(--accent) 0%, var(--accent-mid) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.reel, .pin { padding: 0; }

/* ==========================================================================
   2 — REEL: der Rahmen, der beim Scrollen zur Leinwand wird
   Hier landet später das Higgsfield-Material. Ohne Film läuft die
   CSS-Attrappe darunter — gleiche Fläche, gleiche Wirkung.
   ========================================================================== */

.reel {
    position: relative;
    height: 200svh;
    background: var(--bg);
}

.reel-stage {
    position: sticky;
    top: 0;
    height: 100svh;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.reel-frame {
    position: relative;
    overflow: hidden;
    background: var(--film-bg);
    /* Von der gerahmten Vorschau zur randlosen Leinwand */
    --w0: min(92vw, 1060px);
    --h0: 58svh;
    width: calc(var(--w0) + (100vw - var(--w0)) * var(--p));
    height: calc(var(--h0) + (100svh - var(--h0)) * var(--p));
    border-radius: calc(28px * (1 - var(--p)));
    box-shadow: 0 40px 90px rgba(16, 16, 20, calc(0.22 * (1 - var(--p))));
    will-change: width, height;
}

/* Die Attrappe: driftendes Licht auf tiefem Grund. Sieht aus wie ein
   ruhiger Filmhintergrund und verrät nicht, dass noch kein Video da ist. */
.reel-fallback {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60% 70% at 22% 28%, rgba(29, 120, 116, 0.55), transparent 68%),
        radial-gradient(55% 65% at 78% 66%, rgba(95, 179, 171, 0.42), transparent 70%),
        radial-gradient(80% 90% at 50% 110%, rgba(21, 92, 89, 0.5), transparent 70%),
        var(--film-bg);
    animation: filmDrift 24s var(--ease) infinite alternate;
    transform: scale(1.12);
}

@keyframes filmDrift {
    to { transform: scale(1.24) translate3d(-3%, -2%, 0); }
}

/* Das echte Video legt sich später darüber und blendet sich ein. */
.reel-video {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.9s ease;
    z-index: 1;
}

.reel-video.is-ready { opacity: 1; }

.reel-veil {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(180deg, rgba(10, 10, 15, 0.15) 0%, rgba(10, 10, 15, 0.62) 100%);
}

.reel-overlay {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 0 24px;
    color: #fff;
    /* Erst wenn der Rahmen fast offen ist, kommt die Schrift — sonst
       konkurrieren zwei Bewegungen um dieselbe Aufmerksamkeit. */
    opacity: clamp(0, calc((var(--p) - 0.42) * 3.6), 1);
    transform: translate3d(0, calc((1 - var(--p)) * 26px), 0);
}

.reel-overlay h2 {
    color: #fff;
    font-size: clamp(2rem, 5.6vw, 4rem);
    font-weight: 700;
    letter-spacing: -0.032em;
    line-height: 1.06;
    max-width: 15ch;
}

.reel-overlay p {
    margin: 20px auto 0;
    max-width: 44ch;
    color: rgba(255, 255, 255, 0.72);
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    line-height: 1.55;
}

.reel-tag {
    position: absolute;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    z-index: 4;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    opacity: clamp(0, calc((var(--p) - 0.7) * 4), 1);
}

/* ==========================================================================
   3 — LAUFBAND
   ========================================================================== */

.ticker {
    position: relative;
    overflow: hidden;
    padding: 30px 0;
    border-top: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
    background: var(--bg);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.ticker-track {
    display: flex;
    width: max-content;
    gap: 0;
    animation: tickerRun 34s linear infinite;
}

.ticker-track span {
    display: inline-flex;
    align-items: center;
    gap: 30px;
    padding-right: 30px;
    font-size: clamp(1.05rem, 2vw, 1.45rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink-soft);
    white-space: nowrap;
}

.ticker-track span::after {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0.55;
}

@keyframes tickerRun { to { transform: translate3d(-50%, 0, 0); } }

/* ==========================================================================
   4 — GEPINNTE SEQUENZ: vier Disziplinen, eine Bühne
   ========================================================================== */

.pin {
    position: relative;
    --steps: 4;
    height: calc(100svh + (var(--steps) - 1) * 78svh);
    background: var(--bg-soft);
}

.pin-stage {
    position: sticky;
    top: 0;
    height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.pin-head {
    position: absolute;
    top: calc(var(--nav-h) + 34px);
    left: 0; right: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 24px;
}

.pin-head .eyebrow { margin: 0; }

.pin-dots { display: flex; gap: 8px; }

.pin-dots i {
    width: 26px; height: 3px;
    border-radius: 2px;
    background: var(--border);
    transition: background 0.4s var(--ease);
}

.pin-body {
    position: relative;
    height: min(66svh, 540px);
    margin-top: 40px;
}

.pin-item {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(40px, 6vw, 80px);
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 24px;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 26px, 0);
    transition: opacity 0.6s var(--ease), transform 0.7s var(--ease), visibility 0.6s;
}

.pin-item.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.pin-num {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--accent);
}

.pin-item h3 {
    font-size: clamp(1.9rem, 4vw, 2.9rem);
    font-weight: 700;
    letter-spacing: -0.028em;
    margin: 14px 0 18px;
}

.pin-item .lead { max-width: 42ch; }

.pin-list {
    list-style: none;
    margin-top: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pin-list li {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--ink-soft);
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--border-soft);
    padding: 6px 14px;
    border-radius: var(--radius-full);
}

/* Die Bildseite bekommt beim Wechsel einen Hauch Tiefe mit. */
.pin-item .feature-visual {
    min-height: min(58svh, 440px);
    transform: scale(0.965);
    transition: transform 0.8s var(--ease);
}

.pin-item.is-active .feature-visual { transform: none; }

/* Aktiver Punkt im Kopf */
.pin[data-active="0"] .pin-dots i:nth-child(1),
.pin[data-active="1"] .pin-dots i:nth-child(2),
.pin[data-active="2"] .pin-dots i:nth-child(3),
.pin[data-active="3"] .pin-dots i:nth-child(4) { background: var(--accent); }

/* ==========================================================================
   5 — AUSSAGE: Text, der sich beim Scrollen selbst aufhellt
   ========================================================================== */

.statement {
    position: relative;
    padding: 26svh 0;
}

.statement-text {
    max-width: 17ch;
    margin: 0 auto;
    font-size: clamp(2rem, 5.4vw, 3.9rem);
    font-weight: 700;
    letter-spacing: -0.032em;
    line-height: 1.14;
    text-align: center;
    color: var(--ink);
}

/* Jedes Wort kennt seine Nummer (--i) und die Gesamtzahl (--n). Sobald der
   Fortschritt --p an ihm vorbeikommt, wird es hell. Reine Rechnung, kein
   JavaScript pro Wort. */
.statement-text .w {
    opacity: clamp(0.14, calc((var(--p) * (var(--n) + 6) - var(--i)) * 0.6), 1);
    transition: opacity 0.12s linear;
}


.statement-note {
    margin: 44px auto 0;
    max-width: 52ch;
    text-align: center;
    color: var(--muted);
    opacity: clamp(0, calc((var(--p) - 0.72) * 4), 1);
}

/* ==========================================================================
   6 — SCHAUSTÜCK mit Tiefe
   ========================================================================== */

.showcase-visual img {
    transform: translate3d(0, calc((0.5 - var(--p)) * 44px), 0)
               rotateX(calc(var(--ry, 0) * 1deg))
               rotateY(calc(var(--rx, 0) * 1deg));
    transition: transform 0.5s var(--ease);
    will-change: transform;
}

.tilt { perspective: 900px; }

/* ==========================================================================
   7 — GESTAPELTE SCHRITTE
   ========================================================================== */

.stack {
    max-width: 940px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.stack-card {
    position: sticky;
    top: calc(var(--nav-h) + 40px + var(--i) * 16px);
    display: grid;
    grid-template-columns: 84px 1fr;
    gap: clamp(20px, 4vw, 44px);
    align-items: start;
    padding: clamp(30px, 4vw, 46px);
    border-radius: var(--radius-l);
    background: rgba(255, 255, 255, 0.86);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-m);
}

.stack-card:last-child { margin-bottom: 12vh; }

.stack-card .n {
    font-size: 2.5rem;
    font-weight: 750;
    letter-spacing: -0.04em;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.4px var(--accent);
    opacity: 0.85;
}

.stack-card h3 {
    font-size: clamp(1.25rem, 2.4vw, 1.7rem);
    margin-bottom: 10px;
}

.stack-card p { color: var(--muted); }

/* ==========================================================================
   8 — FAKTEN-BAND
   ========================================================================== */

.facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--border-soft);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-l);
    overflow: hidden;
}

.facts > div {
    background: var(--bg);
    padding: 40px 32px;
}

.facts .k {
    font-size: clamp(1.3rem, 2.6vw, 1.75rem);
    font-weight: 700;
    letter-spacing: -0.028em;
    line-height: 1.2;
    margin-bottom: 10px;
}

.facts .v {
    font-size: 0.95rem;
    color: var(--muted);
    line-height: 1.6;
}

/* ==========================================================================
   9 — ABSCHLUSS
   ========================================================================== */

.cta-dark { isolation: isolate; }
.cta-dark .aurora { opacity: 0.9; }

/* Magnetischer Knopf: cinema.js schreibt die Mausposition hinein. */
.btn-magnet {
    transform: translate3d(calc(var(--mx, 0) * 1px), calc(var(--my, 0) * 1px), 0);
}

/* ---------- Seitenkopf der Unterseiten ---------- */

.page-header { overflow: hidden; }
.page-header > .container { position: relative; z-index: 2; }

.page-header .display,
.page-header .headline {
    transform: translate3d(0, calc(var(--p) * -30px), 0);
    opacity: calc(1 - var(--p) * 0.9);
}

/* ==========================================================================
   Rücksicht: weniger Bewegung, kleinere Bildschirme
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .aurora i,
    .reel-fallback,
    .ticker-track,
    .hero-scroll { animation: none !important; }

    .words .w > span { transform: none; animation: none; }

    .hero-inner { transform: none; opacity: 1; }

    .reel { height: auto; }
    .reel-stage { position: static; height: auto; padding: 60px 0; }
    .reel-frame { width: min(92vw, 1060px); height: 62svh; border-radius: 28px; }
    .reel-overlay { opacity: 1; transform: none; }
    .reel-tag { opacity: 1; }

    .pin { height: auto; padding: 96px 0; }
    .pin-stage { position: static; height: auto; display: block; }
    .pin-head { position: static; margin-bottom: 40px; }
    .pin-body { height: auto; }
    .pin-item { position: relative; inset: auto; opacity: 1; visibility: visible; transform: none; margin-bottom: 72px; }

    .statement { padding: 96px 0; }
    .statement-text .w { opacity: 1; }
    .statement-note { opacity: 1; }

    .stack-card { position: static; }
    .showcase-visual img { transform: none; }
}

@media (max-width: 860px) {
    /* Gepinnte Abschnitte werden am Handy zu normalen Abschnitten: auf kleinen
       Bildschirmen bleibt für eine Bühne mit zwei Spalten kein Platz, und
       jedes zusätzlich gehaltene Bild kostet Bildrate. */
    .pin { height: auto; padding: 76px 0; background: var(--bg-soft); }
    .pin-stage { position: static; height: auto; display: block; overflow: visible; }
    .pin-head { position: static; margin: 0 auto 34px; }
    .pin-dots { display: none; }

    .pin-item {
        position: relative;
        inset: auto;
        grid-template-columns: 1fr;
        gap: 26px;
        opacity: 1;
        visibility: visible;
        transform: none;
        padding: 34px 24px 0;
        border-top: 1px solid var(--border);
        margin-top: 34px;
    }

    .pin-body { height: auto; margin-top: 0; }
    .pin-item:first-of-type { border-top: none; margin-top: 0; padding-top: 0; }
    .pin-item .stage-art { order: -1; }
    .pin-item .feature-visual { min-height: 260px; transform: none; order: -1; }

    .reel { height: 150svh; }
    .reel-frame { --h0: 46svh; }

    .statement { padding: 18svh 0; }

    .stack-card {
        grid-template-columns: 1fr;
        gap: 14px;
        top: calc(var(--nav-h) + 20px + var(--i) * 10px);
    }

    .facts { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .hero { padding-bottom: 92px; }
    .ticker { padding: 22px 0; }
}

/* ==========================================================================
   WERKSTÜCKE
   Bausteine für echte Projektbilder. Jeder Rahmen funktioniert in zwei
   Zuständen: mit Bild (dann zeigt er das Bild) und ohne Bild (dann zeigt er
   ein abstraktes Gerüst). So sieht die Seite auch dann fertig aus, wenn ein
   Screenshot noch fehlt — und das Einsetzen ist später eine einzige Zeile.
   ========================================================================== */

/* ---------- Telefon ---------- */

/* Kerbe oben — macht aus dem Rechteck erst ein Telefon. */
/* Gerüst, solange kein Bild da ist */
/* ---------- Browser ---------- */

/* ---------- Hochformat-Videos (Social) ---------- */

.reels {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
    padding: 10px;
}

.reel-tile {
    position: relative;
    width: 30%;
    max-width: 130px;
    aspect-ratio: 9 / 16;
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(160deg, #0E3C3A, #1D7874 55%, #3E9A92);
    box-shadow: var(--shadow-m);
    flex: none;
}

.reel-tile img { width: 100%; height: 100%; object-fit: cover; }

/* Die äußeren beiden treten optisch zurück — so entsteht Tiefe statt Reihe. */
.reel-tile:nth-child(1) { transform: rotate(-5deg) scale(0.88); opacity: 0.85; }
.reel-tile:nth-child(3) { transform: rotate(5deg) scale(0.88); opacity: 0.85; }

.reel-tile::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 0; height: 0;
    border-left: 15px solid rgba(255, 255, 255, 0.92);
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
}

/* ---------- Ergebniszahlen ---------- */

.kpi-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.kpi {
    padding: 12px 18px;
    border-radius: var(--radius-s);
    background: var(--accent-soft);
    border: 1px solid var(--accent-border);
}

.kpi b {
    display: block;
    font-size: 1.25rem;
    font-weight: 750;
    letter-spacing: -0.028em;
    color: var(--accent-deep);
    line-height: 1.1;
}

.kpi span {
    font-size: 0.82rem;
    color: var(--muted);
}

/* ---------- Projektraster auf der Startseite ---------- */

/* ---------- Fallstudie auf der Referenzseite ---------- */

.case {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(36px, 5vw, 72px);
    align-items: center;
    padding: clamp(32px, 4vw, 56px);
    border-radius: var(--radius-l);
    background: var(--bg);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-s);
    margin-bottom: 24px;
}

.case.reverse .case-body { order: 2; }
.case.reverse .case-visual { order: 1; }

/* Auch hier trägt das Bildstück seine Tiefe selbst — keine getönte Fläche
   mehr dahinter. */
.case-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 300px;
    padding: 20px 10px;
}

.case-body h2 {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    margin: 12px 0 14px;
}

.case-body .lead { font-size: 1.05rem; }

.case-list {
    list-style: none;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.case-list li {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    font-size: 0.95rem;
    color: var(--ink-soft);
    line-height: 1.5;
}

.case-list li::before {
    content: "";
    flex: none;
    width: 18px; height: 18px;
    margin-top: 2px;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
    background-color: var(--accent);
}

@media (max-width: 860px) {

    .case { grid-template-columns: 1fr; gap: 30px; }
    .case.reverse .case-body { order: 1; }
    .case.reverse .case-visual { order: 2; }
    .case-visual { min-height: 240px; padding: 10px 0 20px; order: -1; }

    .reel-tile { max-width: 92px; }
}

/* ---------- Markenzeichen in der Bildfläche ----------
   Das echte App-Icon neben dem Gerät: verankert das Projekt sofort, auch
   solange im Rahmen daneben noch ein Gerüst steht. */

/* App-Icon neben dem Namen — so, wie eine App im Store steht. Nur die
   eigenen Produkte tragen eines; die Kundenprojekte nicht. Der Unterschied
   ist damit auf einen Blick sichtbar, ohne dass er dasteht. */
.title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 9px;
}

.title-row h2,
.title-row h3 { margin: 0; }

.app-icon {
    width: 40px;
    height: 40px;
    border-radius: 23%;
    box-shadow: 0 1px 2px rgba(16, 16, 20, 0.10), 0 4px 10px rgba(16, 16, 20, 0.10);
    flex: none;
}

.case-body .app-icon { width: 46px; height: 46px; }

/* ==========================================================================
   ECHTES MATERIAL
   Videos und Screenshots aus den Projekten. Die Platzhalter-Zustände von
   oben bleiben erhalten — sie greifen überall dort weiter, wo noch nichts
   vorliegt.
   ========================================================================== */

/* Eine gefüllte Kachel braucht kein Abspielsymbol mehr: das Video läuft ja
   bereits. Das Dreieck bleibt den leeren Kacheln vorbehalten. */
.reel-tile--film::after { display: none; }

.reel-tile video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: var(--film-bg);
}

/* Größere Fassung für die Fallstudie: das Video mit der höchsten Reichweite
   steht in der Mitte und bleibt dort in voller Größe. */
.pin-item .reels { gap: 18px; }
.pin-item .reel-tile { max-width: 168px; }

.reels--gross { gap: 18px; }

.reels--gross .reel-tile { max-width: 118px; }

.reels--gross .reel-tile:nth-child(2) {
    max-width: 178px;
    width: 44%;
    transform: none;
    opacity: 1;
    box-shadow: 0 24px 50px rgba(16, 16, 20, 0.22);
}

/* ---------- Website und App nebeneinander ----------
   Für DocumentDiary: die Web-Plattform als Rahmen, die App als Gerät davor.
   Zeigt in einem Bild, was der Text behauptet — beides aus einer Hand. */

.shot-combo {
    position: relative;
    width: 100%;
    padding-bottom: 34px;
}

.shot-combo .browser { width: 86%; }

.shot-combo .phone {
    position: absolute;
    right: 0;
    bottom: 0;
}

@media (max-width: 860px) {
    .reels--gross .reel-tile { max-width: 84px; }
    .reels--gross .reel-tile:nth-child(2) { max-width: 128px; }
    .shot-combo .phone { --pw: 88px; }
}

/* ==========================================================================
   GERÄTE UND FENSTER — Neubau
   Ersetzt .device und .frame. Zwei Gedanken dahinter:

   1. Die Bildstücke stehen frei. Keine getönte Fläche mehr dahinter — was
      Tiefe erzeugt, ist der Schatten, nicht ein farbiger Kasten.
   2. Maße skalieren mit der Breite (--pw). Ein Telefon mit 120 px braucht
      dünnere Kanten und kleinere Radien als eines mit 240 px; feste Werte
      sehen in einer der beiden Größen immer falsch aus.
   ========================================================================== */

/* ---------- iPhone ---------- */

.phone {
    --pw: 200px;
    position: relative;
    width: var(--pw);
    aspect-ratio: 9 / 19.5;
    flex: none;
    padding: calc(var(--pw) * 0.026);
    border-radius: calc(var(--pw) * 0.158);
    /* Titan-Rahmen: die Lichtkante oben links, die dunkle Seite unten rechts */
    background:
        linear-gradient(150deg, #55555e 0%, #1c1c21 26%, #101014 52%, #34343b 78%, #121216 100%);
    box-shadow:
        0 0 0 0.5px rgba(0, 0, 0, 0.35),
        0 2px 4px rgba(16, 16, 20, 0.10),
        0 12px 24px rgba(16, 16, 20, 0.14),
        0 32px 60px rgba(16, 16, 20, 0.18);
}

.phone-screen {
    position: relative;
    height: 100%;
    overflow: hidden;
    border-radius: calc(var(--pw) * 0.134);
    background: #fff;
}

.phone-screen img,
.phone-screen video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

/* Spiegelung: ein flacher Lichtstreifen quer über das Glas. Sehr schwach —
   er soll das Bild darunter nicht aufhellen, nur die Fläche als Glas lesbar
   machen. */
.phone-screen::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(118deg,
        rgba(255, 255, 255, 0.16) 0%,
        rgba(255, 255, 255, 0.05) 16%,
        rgba(255, 255, 255, 0) 34%);
}

/* Dynamic Island — bei den neueren iPhones eine freistehende Pille, kein
   Ausschnitt an der Oberkante. Sie liegt genau dort, wo die Statusleiste der
   Screenshots frei ist. */
.phone::after {
    content: "";
    position: absolute;
    top: calc(var(--pw) * 0.055);
    left: 50%;
    transform: translateX(-50%);
    width: calc(var(--pw) * 0.29);
    height: calc(var(--pw) * 0.082);
    border-radius: 999px;
    background: #08080a;
    z-index: 4;
}

/* Einschalttaste rechts */
.phone::before {
    content: "";
    position: absolute;
    right: calc(var(--pw) * -0.011);
    top: 26%;
    width: calc(var(--pw) * 0.013);
    height: 11%;
    border-radius: 0 2px 2px 0;
    background: linear-gradient(180deg, #55555e, #2a2a30);
}

/* Lautstärke links — zwei Tasten, die obere über die zweite Regel */
.phone-side,
.phone-side::after {
    position: absolute;
    left: calc(var(--pw) * -0.011);
    width: calc(var(--pw) * 0.013);
    border-radius: 2px 0 0 2px;
    background: linear-gradient(180deg, #55555e, #2a2a30);
}

.phone-side { top: 23%; height: 7%; }
.phone-side::after { content: ""; left: 0; top: 128%; height: 100%; }

/* ---------- Browserfenster ---------- */

.browser {
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow:
        0 0 0 1px rgba(16, 16, 20, 0.06),
        0 2px 4px rgba(16, 16, 20, 0.04),
        0 14px 28px rgba(16, 16, 20, 0.10),
        0 36px 64px rgba(16, 16, 20, 0.10);
}

.browser-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 14px;
    height: 38px;
    background: linear-gradient(180deg, #fdfdfe, #f6f6f8);
    border-bottom: 1px solid rgba(16, 16, 20, 0.06);
}

.browser-dots {
    display: flex;
    gap: 6px;
    flex: none;
}

.browser-dots i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #dcdce2;
}

/* Die Adresszeile bleibt mittig, die Punkte links — wie im echten Fenster.
   Das Schlosssymbol macht in einem Zeichen klar, was das Kästchen ist. */
.browser-url {
    flex: 1;
    max-width: 80%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 22px;
    padding: 0 14px;
    border-radius: 999px;
    background: #eeeef2;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.005em;
    color: var(--dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.browser-url svg { flex: none; opacity: 0.55; }

.browser img { width: 100%; display: block; }

/* ---------- Freie Bühne statt getönter Fläche ---------- */

.stage-art {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    min-height: min(56svh, 430px);
}

/* Auch die alten Flächen auf den Unterseiten verlieren ihre Tönung — die
   Bildstücke tragen ihre Tiefe jetzt selbst. */
.feature-visual {
    background: none;
    border: none;
    min-height: 0;
    padding: 10px 0;
}

/* ==========================================================================
   BENTO — das Projektraster
   Vier gleich große Kästchen behandeln vier ungleiche Projekte gleich. Hier
   bekommt jedes die Form, die zu ihm passt: das Produkt mit der App steht
   hochkant und trägt ein Gerät, die beiden Web-Projekte liegen quer, der
   Social-Media-Fall bekommt die volle Breite für drei Videos.
   ========================================================================== */

.bento {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.bento-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 26px;
    background: var(--bg);
    box-shadow:
        0 0 0 1px rgba(16, 16, 20, 0.05),
        0 2px 6px rgba(16, 16, 20, 0.04),
        0 16px 36px rgba(16, 16, 20, 0.07);
    transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}

.bento-card:hover {
    transform: translateY(-5px);
    box-shadow:
        0 0 0 1px rgba(16, 16, 20, 0.05),
        0 4px 10px rgba(16, 16, 20, 0.05),
        0 28px 56px rgba(16, 16, 20, 0.11);
}

/* Die Bildfläche ist nur eine Spur heller abgesetzt — gerade genug, dass das
   Bildstück darauf steht statt darin zu schwimmen. */
.bento-art {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 34px 30px 10px;
}

.bento-body { padding: 26px 30px 30px; }

.bento-body .eyebrow { margin-bottom: 7px; }

.bento-body h3 {
    font-size: 1.3rem;
    letter-spacing: -0.022em;
    margin-bottom: 9px;
}

.bento-body p {
    font-size: 0.96rem;
    color: var(--muted);
    line-height: 1.6;
}

.bento-body .tag-row { margin-top: 18px; }

/* ---------- Hochkant: das Gerät läuft unten aus dem Bild ----------
   Ein angeschnittenes Gerät wirkt, als ragte es in die Karte hinein. Ein
   vollständig sichtbares wirkt wie ein Produktfoto auf weißem Grund. */

.bento-hero {
    grid-row: span 2;
    flex-direction: column-reverse;
}

.bento-hero .bento-art {
    flex: 1;
    align-items: center;
    padding: 24px;
}

.bento-hero .bento-body { padding: 30px 30px 4px; }

/* ---------- Quer über beide Spalten ---------- */

.bento-wide {
    grid-column: span 2;
    flex-direction: row;
    align-items: stretch;
}

.bento-wide .bento-art {
    flex: 0 0 50%;
    padding: 34px 30px;
}

.bento-wide .bento-body {
    flex: 1;
    align-self: center;
    padding: 34px 36px;
}

.bento-wide .reel-tile { max-width: 116px; }

.bento-wide .kpi-row { margin-top: 20px; }

@media (max-width: 1100px) {
    .bento { grid-template-columns: repeat(2, 1fr); }
    .bento-hero {
    grid-row: span 2;
    flex-direction: column-reverse;
}
    .bento-wide { grid-column: span 2; }
}

@media (max-width: 860px) {
    .bento { grid-template-columns: 1fr; gap: 18px; }
    .bento-hero { grid-row: auto; }
    .bento-wide { grid-column: auto; flex-direction: column; }

    .bento-wide .bento-art { flex: none; }

    .bento-wide .bento-body { align-self: stretch; padding: 26px 30px 30px; }
    .bento-art { padding: 26px 22px; }
    .bento-body { padding: 24px 26px 28px; }
}

/* ---------- Gerätegrößen nach Ort ----------
   Die Breite eines Telefons hängt davon ab, wo es steht — nicht davon, was
   im Markup zufällig eingetragen wurde. Deshalb hier gebündelt, damit die
   Handy-Fassung sie auch überschreiben kann. */

.stage-art .phone      { --pw: 210px; }
.bento-hero .phone     { --pw: 266px; }
.shot-combo .phone     { --pw: 124px; }
.feature-visual .phone { --pw: 210px; }

@media (max-width: 860px) {
    .stage-art .phone      { --pw: 180px; }
    .bento-hero .phone     { --pw: 186px; }
    .feature-visual .phone { --pw: 176px; }
    .shot-combo .phone     { --pw: 92px; }

    /* Die Bühne braucht am Handy keine Mindesthöhe mehr — dort stehen die
       Abschnitte ohnehin untereinander. */
    .stage-art { min-height: 0; padding: 4px 0 8px; }
}