/* ─── RESET ──────────────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }

    /* ─── DESIGN TOKENS ──────────────────────────────────────────── */
    :root {
      --cream:       #F7F4EE;
      --white:       #FFFFFF;
      --ink:         #1C1A27;
      --ink-soft:    #3D3A4A;
      --accent:      #B84A0A;       /* gebranntes Sienna – warm, nicht grell */
      --accent-tint: #FBF0EB;
      --green:       #1B5E34;       /* Vertrauen, DSGVO */
      --green-tint:  #EBF5EE;
      --muted:       #7A7690;
      --rule:        #C8C3B8;
      --rule-strong: #1C1A27;
      --border:      #E0DBD2;

      --font-display: 'IBM Plex Sans', system-ui, sans-serif;
      --font-body:    'IBM Plex Sans', system-ui, sans-serif;
      --font-ui:      'IBM Plex Sans', system-ui, sans-serif;
      --font-mono:    'IBM Plex Mono', 'Courier New', monospace;
    }

    /* ─── BASE ───────────────────────────────────────────────────── */
    body {
      font-family: var(--font-body);
      font-size: 17px;
      line-height: 1.75;
      color: var(--ink);
      background: var(--cream);
      -webkit-font-smoothing: antialiased;
    }

    img { display: block; max-width: 100%; }
    a { color: var(--accent); }

    /* ─── NAVIGATION ─────────────────────────────────────────────── */
    .site-nav {
      position: sticky;
      top: 0;
      z-index: 200;
      background: rgba(247,244,238,0.94);
      backdrop-filter: blur(8px);
      border-bottom: 1px solid var(--border);
    }

    .nav-inner {
      max-width: 1160px;
      margin: 0 auto;
      padding: 0 2rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 60px;
    }

    .nav-logo {
      display: flex;
      align-items: center;
      text-decoration: none;
    }

    .nav-logo-img {
      height: 40px;
      width: auto;
      display: block;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 2rem;
      list-style: none;
    }

    .nav-links a {
      font-family: var(--font-ui);
      font-size: .85rem;
      font-weight: 500;
      color: var(--muted);
      text-decoration: none;
      transition: color .15s;
    }
    .nav-links a:hover { color: var(--ink); }

    .nav-cta {
      font-family: var(--font-ui);
      font-size: .85rem;
      font-weight: 600;
      color: var(--white) !important;
      background: var(--accent);
      padding: .45rem 1.15rem;
      border-radius: 4px;
      text-decoration: none;
      transition: background .15s;
    }
    .nav-cta:hover { background: #9E3E08 !important; }

    .nav-badge {
      font-family: var(--font-ui);
      font-size: .72rem;
      font-weight: 500;
      color: var(--green);
      border: 1px solid var(--green);
      padding: .18rem .55rem;
      border-radius: 3px;
      letter-spacing: .04em;
    }

    /* ─── HERO ───────────────────────────────────────────────────── */
    .hero {
      border-bottom: 2px solid var(--rule-strong);
      background: var(--white);
    }

    .hero-inner {
      max-width: 1160px;
      margin: 0 auto;
      padding: 0 2rem;
    }

    .hero-top {
      padding: 3.5rem 0 2.5rem;
      border-bottom: 1px solid var(--rule);
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 3rem;
    }

    .hero-announce {
      font-family: var(--font-ui);
      font-size: .73rem;
      font-weight: 600;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: .75rem;
      display: flex;
      align-items: center;
      gap: .5rem;
    }
    .hero-announce::before {
      content: '';
      display: inline-block;
      width: 24px;
      height: 1.5px;
      background: var(--accent);
    }

    .hero-headline {
      font-family: var(--font-display);
      font-size: clamp(2.6rem, 5.5vw, 5rem);
      font-weight: 700;
      line-height: 1.0;
      letter-spacing: -.025em;
      color: var(--ink);
      max-width: 640px;
    }

    .hero-headline em {
      font-style: italic;
      color: var(--accent);
    }

    .hero-aside {
      flex-shrink: 0;
      width: 280px;
      padding-top: 1.5rem;
    }

    .hero-aside-label {
      font-family: var(--font-ui);
      font-size: .7rem;
      font-weight: 600;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--muted);
      border-top: 2px solid var(--rule-strong);
      padding-top: .6rem;
      margin-bottom: .75rem;
    }

    .hero-aside-text {
      font-family: var(--font-body);
      font-size: .92rem;
      line-height: 1.7;
      color: var(--ink-soft);
    }

    .hero-bottom {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 0;
    }

    .hero-cell {
      padding: 2rem 0;
      padding-right: 2.5rem;
      border-right: 1px solid var(--rule);
      margin-right: 2.5rem;
    }
    .hero-cell:last-child {
      border-right: none;
      margin-right: 0;
      padding-right: 0;
    }
    .hero-cell:first-child { padding-left: 0; }

    .hero-cell-label {
      font-family: var(--font-ui);
      font-size: .68rem;
      font-weight: 600;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: .5rem;
    }

    .hero-cell p {
      font-size: .88rem;
      line-height: 1.6;
      color: var(--ink-soft);
    }

    .hero-actions {
      display: flex;
      gap: 1rem;
      align-items: center;
      flex-wrap: wrap;
      padding: 2rem 0;
      border-top: 1px solid var(--rule);
    }

    .btn {
      font-family: var(--font-ui);
      font-size: .88rem;
      font-weight: 600;
      text-decoration: none;
      padding: .7rem 1.6rem;
      border-radius: 4px;
      border: none;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      transition: all .15s;
    }

    .btn-accent {
      background: var(--accent);
      color: var(--white);
    }
    .btn-accent:hover { background: #9E3E08; color: var(--white); }

    .btn-outline {
      background: transparent;
      color: var(--ink);
      border: 1.5px solid var(--rule-strong);
    }
    .btn-outline:hover { border-color: var(--accent); color: var(--accent); }

    .hero-tagline {
      font-family: var(--font-body);
      font-size: .92rem;
      font-style: italic;
      color: var(--muted);
    }

    /* ─── SECTION ANATOMY ────────────────────────────────────────── */
    .section {
      max-width: 1160px;
      margin: 0 auto;
      padding: 5rem 2rem;
    }

    .section-divider {
      border: none;
      border-top: 2px solid var(--rule-strong);
      max-width: 1160px;
      margin: 0 auto;
    }

    .section-rule {
      border: none;
      border-top: 1px solid var(--rule);
      max-width: 1160px;
      margin: 0 auto;
    }

    .kicker {
      font-family: var(--font-ui);
      font-size: .7rem;
      font-weight: 600;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: .9rem;
      display: flex;
      align-items: center;
      gap: .6rem;
    }
    .kicker::before {
      content: '';
      display: inline-block;
      width: 20px;
      height: 1.5px;
      background: var(--accent);
    }

    .kicker.green { color: var(--green); }
    .kicker.green::before { background: var(--green); }

    h2.display {
      font-family: var(--font-display);
      font-size: clamp(2rem, 4vw, 3.4rem);
      font-weight: 700;
      line-height: 1.1;
      letter-spacing: -.03em;
      color: var(--ink);
      margin-bottom: 1rem;
    }

    h2.display em {
      font-style: italic;
      color: var(--accent);
    }

    .lead {
      font-size: 1.05rem;
      line-height: 1.75;
      color: var(--ink-soft);
      max-width: 580px;
    }

    /* ─── PULL QUOTE ─────────────────────────────────────────────── */
    .pull-quote {
      border-left: 3px solid var(--accent);
      padding: 1rem 1.5rem;
      margin: 2rem 0;
    }

    .pull-quote p {
      font-family: var(--font-body);
      font-style: italic;
      font-weight: 500;
      font-size: 1.1rem;
      line-height: 1.6;
      color: var(--ink);
    }

    /* ─── PROBLEM ────────────────────────────────────────────────── */
    .problem-bg { background: var(--white); }

    .problem-layout {
      display: grid;
      grid-template-columns: 3fr 2fr;
      gap: 4rem;
      align-items: start;
      margin-top: 3rem;
    }

    .problem-text p {
      margin-bottom: 1rem;
      color: var(--ink-soft);
    }

    .problem-points {
      list-style: none;
      margin-top: 1.5rem;
      border-top: 1px solid var(--rule);
    }

    .problem-point {
      padding: 1rem 0;
      border-bottom: 1px solid var(--rule);
      display: grid;
      grid-template-columns: 24px 1fr;
      gap: .75rem;
      align-items: start;
    }

    .pp-num {
      font-family: var(--font-ui);
      font-size: .72rem;
      font-weight: 600;
      color: var(--accent);
      padding-top: .2rem;
    }

    .pp-content strong {
      display: block;
      font-family: var(--font-ui);
      font-size: .9rem;
      font-weight: 600;
      color: var(--ink);
      margin-bottom: .15rem;
    }

    .pp-content span {
      font-size: .85rem;
      color: var(--muted);
      line-height: 1.6;
    }

    /* Chaos visual */
    .chaos-box {
      background: var(--cream);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 1.5rem;
      position: relative;
    }

    .chaos-box-title {
      font-family: var(--font-ui);
      font-size: .68rem;
      font-weight: 600;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 1rem;
    }

    .chaos-tags {
      display: flex;
      flex-wrap: wrap;
      gap: .4rem;
    }

    .chaos-tag {
      font-family: var(--font-ui);
      font-size: .76rem;
      padding: .25rem .6rem;
      border-radius: 3px;
      background: var(--white);
      border: 1px solid var(--border);
      color: var(--ink-soft);
      line-height: 1.4;
    }
    .chaos-tag.q {
      background: #FFF3EE;
      border-color: #F5C7B2;
      color: var(--accent);
    }

    .chaos-caption {
      margin-top: 1.25rem;
      padding-top: 1rem;
      border-top: 1px solid var(--rule);
      font-size: .82rem;
      color: var(--muted);
      font-style: italic;
    }

    /* ─── HOW IT WORKS ───────────────────────────────────────────── */
    .how-layout {
      display: grid;
      grid-template-columns: 1fr 2fr;
      gap: 4rem;
      margin-top: 3rem;
      align-items: start;
    }

    .how-intro p { color: var(--ink-soft); line-height: 1.75; font-size: .95rem; }

    .how-steps {
      counter-reset: step;
      list-style: none;
      border-top: 1px solid var(--rule);
    }

    .how-step {
      counter-increment: step;
      padding: 1.75rem 0;
      border-bottom: 1px solid var(--rule);
      display: grid;
      grid-template-columns: 48px 1fr;
      gap: 1.25rem;
      align-items: start;
    }

    .step-num {
      font-family: var(--font-mono);
      font-size: 2rem;
      font-weight: 500;
      color: var(--rule);
      line-height: 1;
      padding-top: .15rem;
    }

    .step-body h3 {
      font-family: var(--font-ui);
      font-size: 1rem;
      font-weight: 600;
      color: var(--ink);
      margin-bottom: .4rem;
    }

    .step-body p {
      font-size: .88rem;
      color: var(--muted);
      line-height: 1.65;
    }

    /* ─── LEISTUNGEN ─────────────────────────────────────────────── */
    .leist-bg { background: var(--white); }

    .leist-header {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: end;
      padding-bottom: 2.5rem;
      border-bottom: 1px solid var(--rule);
      margin-bottom: 3rem;
    }

    .leist-header .lead { max-width: none; }

    /* Featured card */
    .leist-featured {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
      border: 1.5px solid var(--ink);
      border-radius: 6px;
      overflow: hidden;
      margin-bottom: 1.5rem;
    }

    .leist-featured-main {
      padding: 2.25rem;
      background: var(--ink);
      color: var(--white);
    }

    .leist-featured-main .kicker {
      color: rgba(255,255,255,0.5);
    }
    .leist-featured-main .kicker::before { background: rgba(255,255,255,0.4); }

    .leist-featured-main h3 {
      font-family: var(--font-display);
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--white);
      letter-spacing: -.02em;
      margin-bottom: .75rem;
      line-height: 1.2;
    }

    .leist-featured-main p {
      font-size: .88rem;
      line-height: 1.7;
      color: rgba(255,255,255,0.65);
    }

    .leist-featured-side {
      padding: 2.25rem;
      background: var(--cream);
      border-left: 1px solid var(--rule);
    }

    .leist-featured-side .kicker {
      color: var(--muted);
    }

    .leist-pillar-list {
      list-style: none;
      margin-top: .5rem;
    }

    .leist-pillar {
      display: flex;
      gap: .75rem;
      align-items: flex-start;
      padding: .65rem 0;
      border-bottom: 1px solid var(--rule);
      font-size: .85rem;
      color: var(--ink-soft);
      line-height: 1.5;
    }
    .leist-pillar:last-child { border-bottom: none; }

    .pillar-arrow {
      color: var(--accent);
      font-weight: 700;
      flex-shrink: 0;
      margin-top: .05rem;
    }

    .leist-pillar strong { color: var(--ink); font-weight: 600; }

    /* Secondary cards */
    .leist-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.25rem;
    }

    .leist-card {
      padding: 1.75rem;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--cream);
      transition: border-color .2s, background .2s;
    }
    .leist-card:hover {
      border-color: var(--accent);
      background: var(--white);
    }

    .leist-card-num {
      font-family: var(--font-mono);
      font-size: 2.5rem;
      font-weight: 700;
      color: var(--rule);
      line-height: 1;
      margin-bottom: .75rem;
    }

    .leist-card h3 {
      font-family: var(--font-ui);
      font-size: .95rem;
      font-weight: 600;
      color: var(--ink);
      margin-bottom: .5rem;
    }

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

    /* Tags */
    .tag-row {
      display: flex;
      flex-wrap: wrap;
      gap: .35rem;
      margin-top: 1rem;
    }

    .tag {
      font-family: var(--font-ui);
      font-size: .68rem;
      font-weight: 500;
      padding: .18rem .55rem;
      border-radius: 3px;
      background: var(--accent-tint);
      color: var(--accent);
      border: 1px solid rgba(184,74,10,.2);
    }

    .tag.green {
      background: var(--green-tint);
      color: var(--green);
      border-color: rgba(27,94,52,.2);
    }

    /* ─── TRUST / DSGVO ──────────────────────────────────────────── */
    .trust-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
      margin-top: 3rem;
      border: 1px solid var(--border);
      border-radius: 6px;
      overflow: hidden;
    }

    .trust-cell {
      padding: 2rem;
      border-right: 1px solid var(--border);
      background: var(--white);
    }
    .trust-cell:last-child { border-right: none; }

    .trust-cell-icon {
      font-size: 1.5rem;
      margin-bottom: .75rem;
    }

    .trust-cell h4 {
      font-family: var(--font-ui);
      font-size: .92rem;
      font-weight: 600;
      color: var(--ink);
      margin-bottom: .35rem;
    }

    .trust-cell p {
      font-size: .82rem;
      color: var(--muted);
      line-height: 1.65;
    }

    /* ─── ABOUT ──────────────────────────────────────────────────── */
    .about-bg { background: var(--white); }

    .about-layout {
      display: grid;
      grid-template-columns: 300px 1fr 2fr;
      gap: 3.5rem;
      align-items: start;
      margin-top: 3rem;
    }

    .about-left {}

    .stat-block {
      margin-bottom: 1.5rem;
    }

    .stat-big {
      font-family: var(--font-mono);
      font-size: 3.5rem;
      font-weight: 700;
      color: var(--accent);
      line-height: 1;
      letter-spacing: -.04em;
    }

    .stat-label {
      font-family: var(--font-ui);
      font-size: .78rem;
      color: var(--muted);
      margin-top: .2rem;
    }

    .about-divider {
      width: 40px;
      height: 2px;
      background: var(--rule-strong);
      margin: 1.75rem 0;
    }

    .about-right p {
      color: var(--ink-soft);
      line-height: 1.8;
      margin-bottom: 1rem;
    }

    .about-right strong { color: var(--ink); font-weight: 600; }

    /* ─── CTA ────────────────────────────────────────────────────── */
    .cta-section {
      border-top: 2px solid var(--rule-strong);
      border-bottom: 2px solid var(--rule-strong);
      background: var(--accent);
    }

    .cta-inner {
      max-width: 1160px;
      margin: 0 auto;
      padding: 5rem 2rem;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5rem;
      align-items: center;
    }

    .cta-text .kicker {
      color: rgba(255,255,255,.65);
    }
    .cta-text .kicker::before { background: rgba(255,255,255,.5); }

    .cta-text h2 {
      font-family: var(--font-display);
      font-size: clamp(1.8rem, 3.5vw, 2.8rem);
      font-weight: 700;
      letter-spacing: -.03em;
      color: var(--white);
      line-height: 1.1;
      margin-bottom: .75rem;
    }

    .cta-text p {
      color: rgba(255,255,255,.75);
      font-size: .95rem;
      line-height: 1.7;
    }

    .cta-form {}

    .cta-form-note {
      font-family: var(--font-ui);
      font-size: .8rem;
      font-weight: 600;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: rgba(255,255,255,.55);
      margin-bottom: 1.25rem;
    }

    .email-row {
      display: flex;
      gap: .75rem;
      margin-bottom: 1rem;
    }

    .email-input {
      flex: 1;
      padding: .75rem 1rem;
      font-family: var(--font-body);
      font-size: .9rem;
      color: var(--ink);
      background: var(--white);
      border: 2px solid transparent;
      border-radius: 4px;
      outline: none;
      transition: border-color .15s;
    }
    .email-input::placeholder { color: #AAA; }
    .email-input:focus { border-color: var(--ink); }

    .btn-dark {
      font-family: var(--font-ui);
      font-size: .88rem;
      font-weight: 600;
      color: var(--white);
      background: var(--ink);
      padding: .75rem 1.4rem;
      border-radius: 4px;
      border: none;
      cursor: pointer;
      white-space: nowrap;
      transition: background .15s;
    }
    .btn-dark:hover { background: #2D2A40; }

    .cta-disclaimer {
      font-size: .78rem;
      color: rgba(255,255,255,.5);
      line-height: 1.6;
    }

    .cta-alt {
      margin-top: 1.25rem;
      font-size: .85rem;
      color: rgba(255,255,255,.65);
    }
    .cta-alt a {
      color: var(--white);
      font-weight: 600;
    }

    /* ─── FOOTER ─────────────────────────────────────────────────── */
    .site-footer {
      border-top: 1px solid var(--border);
      background: var(--white);
    }

    .footer-inner {
      max-width: 1160px;
      margin: 0 auto;
      padding: 2.5rem 2rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 1rem;
    }

    .footer-logo {
      display: flex;
      align-items: center;
      text-decoration: none;
    }

    .footer-logo img {
      height: 28px;
      width: auto;
      display: block;
    }

    .footer-links {
      display: flex;
      gap: 1.75rem;
      list-style: none;
    }
    .footer-links a {
      font-family: var(--font-ui);
      font-size: .8rem;
      color: var(--muted);
      text-decoration: none;
      transition: color .15s;
    }
    .footer-links a:hover { color: var(--ink); }

    .footer-copy {
      font-family: var(--font-ui);
      font-size: .78rem;
      color: var(--muted);
    }

    /* ─── SCROLL REVEAL ──────────────────────────────────────────── */
    .reveal {
      opacity: 0;
      transform: translateY(22px);
      transition: opacity .6s ease, transform .6s ease;
    }
    .reveal.in { opacity: 1; transform: none; }
    .reveal-d1 { transition-delay: .1s; }
    .reveal-d2 { transition-delay: .2s; }
    .reveal-d3 { transition-delay: .3s; }

    /* ─── MOBILE ─────────────────────────────────────────────────── */
    @media (max-width: 900px) {
      .hero-top { flex-direction: column; }
      .hero-aside { width: 100%; }
      .hero-bottom { grid-template-columns: 1fr; }
      .hero-cell { border-right: none; margin-right: 0; border-bottom: 1px solid var(--rule); padding: 1.25rem 0; }
      .hero-cell:last-child { border-bottom: none; }

      .problem-layout,
      .how-layout,
      .leist-header { grid-template-columns: 1fr; gap: 2.5rem; }
      .about-layout { grid-template-columns: 1fr; gap: 2rem; }
      .about-photo { max-width: 160px; }

      .leist-featured { grid-template-columns: 1fr; }
      .leist-featured-side { border-left: none; border-top: 1px solid var(--rule); }
      .leist-grid { grid-template-columns: 1fr; }
      .trust-row { grid-template-columns: 1fr; }
      .trust-cell { border-right: none; border-bottom: 1px solid var(--border); }
      .trust-cell:last-child { border-bottom: none; }
      .cta-inner { grid-template-columns: 1fr; gap: 2.5rem; }
      .email-row { flex-direction: column; }
      .footer-inner { flex-direction: column; align-items: flex-start; }
    }

    /* ─── ABOUT PHOTO (freigestellt, blendet in Hintergrund) ────── */
    .about-photo-wrap {
      position: relative;
      margin-bottom: 1.5rem;
    }

    .about-photo {
      width: 100%;
      max-width: 300px;
      height: auto;
      display: block;
      /* Weicher Übergang: oben scharf, unten auslaufend */
      -webkit-mask-image: linear-gradient(
        to bottom,
        black 0%,
        black 60%,
        rgba(0,0,0,0.4) 85%,
        transparent 100%
      );
      mask-image: linear-gradient(
        to bottom,
        black 0%,
        black 60%,
        rgba(0,0,0,0.4) 85%,
        transparent 100%
      );
    }
  
    /* ─── LANGDOCK PAGE ──────────────────────────────────────────── */
    .platform-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1.5rem;
      margin-top: 2.5rem;
    }
    .platform-card {
      padding: 2rem;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--white);
    }
    .platform-card-icon {
      font-size: 1.75rem;
      margin-bottom: 1rem;
    }
    .platform-card h3 {
      font-family: var(--font-ui);
      font-size: 1rem;
      font-weight: 600;
      color: var(--ink);
      margin-bottom: .5rem;
    }
    .platform-card p {
      font-size: .88rem;
      color: var(--muted);
      line-height: 1.65;
    }
    .compare-table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 2rem;
      font-size: .88rem;
    }
    .compare-table th {
      font-family: var(--font-ui);
      font-weight: 600;
      padding: .75rem 1rem;
      text-align: left;
      border-bottom: 2px solid var(--rule-strong);
      color: var(--ink);
    }
    .compare-table td {
      padding: .75rem 1rem;
      border-bottom: 1px solid var(--rule);
      color: var(--ink-soft);
      vertical-align: top;
    }
    .compare-table tr:last-child td { border-bottom: none; }
    .compare-table td:first-child { font-weight: 500; color: var(--ink); }
    .check { color: var(--green); font-weight: 700; }
    .cross { color: #B00; }
    .partial { color: var(--accent); }

    /* ─── FAQ PAGE ───────────────────────────────────────────────── */
    .faq-section-title {
      font-family: var(--font-ui);
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--muted);
      margin: 2.5rem 0 1rem;
      padding-top: 2rem;
      border-top: 1px solid var(--rule);
    }
    .faq-section-title:first-of-type { border-top: none; margin-top: 0; }
    .faq-item {
      border-bottom: 1px solid var(--rule);
    }
    .faq-question {
      font-family: var(--font-ui);
      font-size: 1rem;
      font-weight: 600;
      color: var(--ink);
      padding: 1.25rem 0 1.25rem 0;
      cursor: pointer;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 1rem;
      list-style: none;
      user-select: none;
    }
    .faq-question::-webkit-details-marker { display: none; }
    .faq-chevron {
      flex-shrink: 0;
      width: 20px;
      height: 20px;
      color: var(--accent);
      transition: transform .2s;
      margin-top: .1rem;
    }
    details[open] .faq-chevron { transform: rotate(180deg); }
    .faq-answer {
      padding: 0 0 1.5rem 0;
      font-size: .92rem;
      color: var(--ink-soft);
      line-height: 1.8;
    }
    .faq-answer p { margin-bottom: .75rem; }
    .faq-answer p:last-child { margin-bottom: 0; }
    .faq-answer strong { color: var(--ink); font-weight: 600; }

    /* ─── ÜBER MICH PAGE ──────────────────────────────────────────── */
    .bio-hero {
      display: grid;
      grid-template-columns: 1fr 2fr;
      gap: 4rem;
      align-items: start;
    }
    .bio-photo {
      width: 100%;
      max-width: 280px;
      height: auto;
      display: block;
      -webkit-mask-image: linear-gradient(to bottom, black 0%, black 70%, rgba(0,0,0,0.4) 88%, transparent 100%);
      mask-image: linear-gradient(to bottom, black 0%, black 70%, rgba(0,0,0,0.4) 88%, transparent 100%);
    }
    .bio-timeline {
      list-style: none;
      border-left: 2px solid var(--rule);
      padding-left: 1.5rem;
      margin-top: 1.5rem;
    }
    .bio-entry {
      position: relative;
      margin-bottom: 1.75rem;
    }
    .bio-entry::before {
      content: '';
      position: absolute;
      left: -1.65rem;
      top: .35rem;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--accent);
      border: 2px solid var(--white);
      box-shadow: 0 0 0 1px var(--accent);
    }
    .bio-year {
      font-family: var(--font-mono);
      font-size: .75rem;
      font-weight: 500;
      color: var(--muted);
      margin-bottom: .25rem;
    }
    .bio-entry h3 {
      font-family: var(--font-ui);
      font-size: .95rem;
      font-weight: 600;
      color: var(--ink);
      margin-bottom: .25rem;
    }
    .bio-entry p {
      font-size: .86rem;
      color: var(--muted);
      line-height: 1.65;
    }
    .conviction-block {
      background: var(--ink);
      color: var(--white);
      padding: 3.5rem;
      border-radius: 6px;
      margin: 3rem 0;
    }
    .conviction-block .kicker { color: rgba(255,255,255,.5); }
    .conviction-block .kicker::before { background: rgba(255,255,255,.4); }
    .conviction-block blockquote {
      font-family: var(--font-display);
      font-size: clamp(1.3rem, 2.5vw, 2rem);
      font-weight: 700;
      line-height: 1.3;
      letter-spacing: -.02em;
      color: var(--white);
      margin: 1rem 0 0;
    }
    .conviction-block blockquote em { color: #EA580C; font-style: normal; }

    /* ─── KONTAKT PAGE ────────────────────────────────────────────── */
    .contact-layout {
      display: grid;
      grid-template-columns: 1fr 1.6fr;
      gap: 5rem;
      align-items: start;
    }
    .contact-meta h3 {
      font-family: var(--font-ui);
      font-size: .92rem;
      font-weight: 600;
      color: var(--ink);
      margin-bottom: .35rem;
    }
    .contact-meta p, .contact-meta a {
      font-size: .88rem;
      color: var(--muted);
      line-height: 1.7;
    }
    .contact-meta a { color: var(--accent); text-decoration: none; }
    .contact-meta a:hover { text-decoration: underline; }
    .contact-divider { height: 1px; background: var(--rule); margin: 1.5rem 0; }
    .contact-form-group { margin-bottom: 1.25rem; }
    .contact-label {
      font-family: var(--font-ui);
      font-size: .78rem;
      font-weight: 600;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--muted);
      display: block;
      margin-bottom: .4rem;
    }
    .contact-input, .contact-textarea {
      width: 100%;
      padding: .75rem 1rem;
      font-family: var(--font-body);
      font-size: .9rem;
      color: var(--ink);
      background: var(--white);
      border: 1.5px solid var(--border);
      border-radius: 4px;
      outline: none;
      transition: border-color .15s;
    }
    .contact-input:focus, .contact-textarea:focus { border-color: var(--ink); }
    .contact-textarea { min-height: 140px; resize: vertical; }

    /* ─── BLOG PAGE ───────────────────────────────────────────────── */
    .blog-grid {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 4rem;
      margin-top: 3rem;
    }
    .blog-featured {
      border-top: 3px solid var(--ink);
      padding-top: 1.5rem;
    }
    .blog-featured-meta {
      font-family: var(--font-ui);
      font-size: .72rem;
      color: var(--muted);
      margin-bottom: 1rem;
      display: flex;
      gap: 1rem;
    }
    .blog-featured h2 {
      font-family: var(--font-display);
      font-size: clamp(1.5rem, 3vw, 2.4rem);
      font-weight: 700;
      line-height: 1.15;
      letter-spacing: -.02em;
      color: var(--ink);
      margin-bottom: .75rem;
    }
    .blog-featured h2 em { font-style: italic; color: var(--accent); }
    .blog-featured p { color: var(--ink-soft); line-height: 1.75; margin-bottom: 1rem; }
    .blog-read-more {
      font-family: var(--font-ui);
      font-size: .85rem;
      font-weight: 600;
      color: var(--accent);
      text-decoration: none;
    }
    .blog-read-more:hover { text-decoration: underline; }
    .blog-sidebar {}
    .blog-card {
      border-top: 1px solid var(--rule);
      padding: 1.25rem 0;
    }
    .blog-card:last-child { border-bottom: 1px solid var(--rule); }
    .blog-card-meta {
      font-family: var(--font-ui);
      font-size: .7rem;
      color: var(--muted);
      margin-bottom: .5rem;
    }
    .blog-card h3 {
      font-family: var(--font-ui);
      font-size: .92rem;
      font-weight: 600;
      color: var(--ink);
      margin-bottom: .35rem;
      line-height: 1.35;
    }
    .blog-card a { text-decoration: none; color: inherit; }
    .blog-card a:hover h3 { color: var(--accent); }
    .blog-card p { font-size: .82rem; color: var(--muted); line-height: 1.6; }

    /* ─── ARTICLE PAGE ────────────────────────────────────────────── */
    .article-header {
      max-width: 780px;
      margin: 0 auto;
      padding: 4rem 2rem 2.5rem;
      border-bottom: 1px solid var(--rule);
    }
    .article-meta {
      font-family: var(--font-ui);
      font-size: .75rem;
      color: var(--muted);
      margin-bottom: 1.25rem;
      display: flex;
      gap: 1.25rem;
      align-items: center;
    }
    .article-meta .cat {
      background: var(--accent-tint);
      color: var(--accent);
      border: 1px solid rgba(184,74,10,.2);
      padding: .15rem .55rem;
      border-radius: 3px;
      font-weight: 600;
      font-size: .68rem;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .article-header h1 {
      font-family: var(--font-display);
      font-size: clamp(2rem, 4.5vw, 3.5rem);
      font-weight: 700;
      line-height: 1.1;
      letter-spacing: -.03em;
      color: var(--ink);
      margin-bottom: 1rem;
    }
    .article-header h1 em { font-style: italic; color: var(--accent); }
    .article-header .lead { color: var(--ink-soft); }
    .article-body {
      max-width: 780px;
      margin: 0 auto;
      padding: 3rem 2rem 5rem;
    }
    .article-body h2 {
      font-family: var(--font-display);
      font-size: 1.5rem;
      font-weight: 700;
      letter-spacing: -.02em;
      color: var(--ink);
      margin: 2.5rem 0 .75rem;
      padding-top: 2rem;
      border-top: 1px solid var(--rule);
    }
    .article-body h2:first-child { border-top: none; padding-top: 0; margin-top: 0; }
    .article-body p { color: var(--ink-soft); line-height: 1.85; margin-bottom: 1.25rem; }
    .article-body p:last-child { margin-bottom: 0; }
    .article-body strong { color: var(--ink); font-weight: 600; }
    .article-body ul, .article-body ol {
      padding-left: 1.5rem;
      margin-bottom: 1.25rem;
    }
    .article-body li {
      color: var(--ink-soft);
      line-height: 1.8;
      margin-bottom: .35rem;
    }
    .article-body .pull-quote {
      margin: 2rem 0;
    }
    .article-author {
      margin-top: 3rem;
      padding-top: 2rem;
      border-top: 2px solid var(--rule-strong);
      display: flex;
      gap: 1.25rem;
      align-items: center;
    }
    .article-author img {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      object-fit: cover;
    }
    .article-author-name {
      font-family: var(--font-ui);
      font-size: .9rem;
      font-weight: 600;
      color: var(--ink);
    }
    .article-author-bio {
      font-size: .82rem;
      color: var(--muted);
      line-height: 1.55;
    }

    /* ─── MOBILE (zusätzlich) ─────────────────────────────────────── */
    @media (max-width: 900px) {
      .platform-grid { grid-template-columns: 1fr; }
      .bio-hero { grid-template-columns: 1fr; }
      .contact-layout { grid-template-columns: 1fr; gap: 2.5rem; }
      .blog-grid { grid-template-columns: 1fr; }
      .conviction-block { padding: 2rem; }
    }