/* MDXF — gemeinsames Stylesheet für alle Seiten von mdxf.at.
   Herkunft: die frühere Produkt-Landing (2026-09-15), die das MDXF-Design gestellt hat.
   Die Produktseite selbst gibt es seit 2026-10-12 nicht mehr. */
*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }

  :root{
    --paper:#F6F5F2; --paper-2:#EFEDE8; --white:#FFFFFF;
    --ink:#1B1B18; --ink-2:#3A3936; --dim:#6B6A64; --line:#E6E3DC; --line-2:#D9D6CE;
    --amber:#F0B830; --amber-2:#F8CF58; --amber-dark:#8A6400; --amber-soft:#FFF6D6;
    --green:#1B7F4B; --green-soft:#E3F3EA; --red:#B3382E;
    --amber-line:#F3DFA0; --paper-3:#E4E1D8; --black:#000;
    --font:'DM Sans', -apple-system, BlinkMacSystemFont, "Helvetica Neue", system-ui, sans-serif;
    --mono:'DM Mono', "SF Mono", ui-monospace, "Courier New", monospace;
    --ease:cubic-bezier(.16,1,.3,1);
    --r:18px;
  }

  html{ background:var(--paper); scroll-behavior:smooth; }
  @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
  section[id], header[id]{ scroll-margin-top:72px; }
  body{
    background:var(--paper); color:var(--ink); font-family:var(--font); line-height:1.6;
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:clip;
  }
  ::selection{ background:var(--amber); color:var(--ink); }
  a{ color:inherit; }
  img,svg{ max-width:100%; display:block; }
  b,strong{ font-weight:700; }

  /* ── Fokus (Tastatur) ── */
  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible{
    outline:2px solid var(--amber-dark); outline-offset:2px; }

  /* ── Reveal ── */
  /* Nur verstecken, wenn JS läuft (html.js wird im <head> gesetzt) — ohne JS bleibt alles sichtbar. */
  .js .reveal{ opacity:0; transform:translateY(18px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
  .reveal.in{ opacity:1; transform:none; }
  @media (prefers-reduced-motion: reduce){ .js .reveal{ opacity:1; transform:none; transition:none; } }

  /* ── Nav ── */
  .nav{
    position:fixed; top:0; left:0; right:0; z-index:100;
    display:flex; align-items:center; justify-content:space-between; gap:20px;
    padding:14px clamp(18px,4vw,44px);
    background:rgba(246,245,242,.82); backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px);
    border-bottom:1px solid transparent; transition:border-color .4s;
  }
  .nav.scrolled{ border-bottom-color:var(--line); }
  .mark{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-weight:800; letter-spacing:.14em; font-size:15px; color:var(--ink); }
  .mark .sq{ width:28px; height:28px; border-radius:7px; flex:none; background:url(/logo.svg) center/contain no-repeat; box-shadow:0 1px 0 rgba(27,27,24,.08); }
  .mark b{ color:var(--amber-dark); font-weight:800; }
  .nav-links{ display:flex; align-items:center; gap:22px; }
  .nav-links a{ text-decoration:none; font-size:14px; color:var(--ink-2); opacity:.85; transition:opacity .3s; }
  .nav-links a:hover{ opacity:1; }
  /* Link in den anderen Bereich (Unternehmen ↔ Privat): zarte Pille, gleiche Farbe wie das Kennzeichen „PRIVAT“ */
  .nav-links a.nav-alt{ padding:8px 14px; border:1px solid var(--amber-line); border-radius:999px; background:var(--amber-soft);
    color:var(--ink); opacity:1; font-weight:600; transition:border-color .3s, background .3s; }
  .nav-links a.nav-alt:hover{ border-color:var(--amber); background:#FFF0BF; }
  /* Auf den Privat-Seiten ruhiger: nur Trennstrich, damit „Anfrage“ der einzige Knopf bleibt */
  .nav-links a.nav-alt.quiet{ position:relative; margin-left:4px; padding:0 0 0 24px; border:0; border-radius:0; background:none;
    color:var(--ink-2); opacity:.85; font-weight:inherit; }
  .nav-links a.nav-alt.quiet:hover{ background:none; opacity:1; }
  .nav-links a.nav-alt.quiet::before{ content:""; position:absolute; left:0; top:50%; width:1px; height:16px; transform:translateY(-50%); background:var(--line-2); }
  .nav-cta{ padding:9px 16px !important; border-radius:999px; background:var(--ink); color:var(--white) !important; opacity:1 !important; font-weight:600; }
  .nav-cta:hover{ background:var(--black); }
  /* Aktiver Menüpunkt: amber Strich unter dem Wort (Desktop). */
  .nav-links a[aria-current]:not(.nav-cta){ opacity:1; color:var(--ink); position:relative; }
  .nav-links a[aria-current]:not(.nav-cta)::after{ content:""; position:absolute; left:0; right:0; bottom:-7px; height:2px; border-radius:2px; background:var(--amber); }

  /* ── Mobil-Menü (2026-09-24) ─────────────────────────────────────────────
     Burger im Nav-Balken, Vollbild-Panel darunter (baut /nav.js). Unter
     900px ersetzt es die ausgeblendeten Links (seit 2026-10-10, Platz für „Referenzen“); die Erstgespräch-Pille bleibt
     im Balken sichtbar, bis das Menü offen ist. */
  .burger{ display:none; position:relative; flex:none; width:44px; height:44px; margin-right:-10px; padding:0; border:0; border-radius:12px;
    background:transparent; color:var(--ink); cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .3s; }
  @media (hover:hover){ .burger:hover{ background:rgba(27,27,24,.05); } }
  .burger-box{ position:absolute; left:50%; top:50%; width:22px; height:12px; transform:translate(-50%,-50%); }
  .burger-box i{ position:absolute; right:0; height:2px; border-radius:2px; background:currentColor;
    transition:top .45s var(--ease), transform .45s var(--ease), width .45s var(--ease); }
  .burger-box i:nth-child(1){ top:0; width:22px; }
  .burger-box i:nth-child(2){ top:10px; width:14px; }
  .nav-open .burger-box i{ top:5px; width:22px; }
  .nav-open .burger-box i:nth-child(1){ transform:rotate(45deg); }
  .nav-open .burger-box i:nth-child(2){ transform:rotate(-45deg); }

  .mnav{ display:none; }
  @media (max-width:900px){
    .nav{ gap:10px; }
    .nav-links{ margin-left:auto; }
    .nav-links a:not(.nav-cta){ display:none; }
    .burger{ display:block; }
    .nav-cta{ transition:opacity .3s, visibility 0s linear .3s, background .3s; }
    .nav-open .nav-cta{ opacity:0 !important; visibility:hidden; }
    .nav-open .nav{ border-bottom-color:var(--line); }
    html.nav-open, html.nav-open body{ overflow:hidden; }

    .mnav{ display:block; position:fixed; inset:0; z-index:99; overflow-y:auto; overscroll-behavior:contain;
      background:
        radial-gradient(120% 60% at 100% 0%, rgba(240,184,48,.16), rgba(240,184,48,0) 55%),
        var(--paper);
      visibility:hidden; opacity:0; transition:opacity .28s ease-out, visibility 0s linear .28s; }
    .nav-open .mnav{ visibility:visible; opacity:1; transition:opacity .28s ease-out, visibility 0s; }
    .mnav-in{ min-height:100%; max-width:560px; margin:0 auto; display:flex; flex-direction:column;
      padding:calc(92px + env(safe-area-inset-top, 0px)) clamp(18px,4vw,44px) calc(28px + env(safe-area-inset-bottom, 0px)); }
    .mnav-eyebrow{ font-family:var(--mono); font-size:11.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--amber-dark); }
    .mnav-list{ list-style:none; margin-top:14px; border-top:1px solid var(--line-2); }
    .mnav-list li{ border-bottom:1px solid var(--line); }
    .mnav-list li.alt{ margin-top:22px; border-top:1px solid var(--line); }
    .mnav-list li.alt .t{ font-size:clamp(24px,6.6vw,30px); }
    .mnav-list a{ display:grid; grid-template-columns:40px minmax(0,1fr) auto; align-items:baseline; column-gap:8px;
      padding:17px 0 16px; text-decoration:none; color:var(--ink); -webkit-tap-highlight-color:transparent; }
    .mnav-list .n{ font-family:var(--mono); font-size:12px; letter-spacing:.18em; color:var(--amber-dark); }
    .mnav-list .t{ font-size:clamp(30px,8.6vw,40px); font-weight:800; letter-spacing:-.035em; line-height:1.04; }
    .mnav-list .s{ grid-column:2; margin-top:5px; font-size:14px; color:var(--dim); }
    .mnav-list .a{ grid-column:3; grid-row:1; align-self:center; font-size:20px; color:var(--line-2); transition:transform .35s var(--ease), color .35s; }
    .mnav-list a:hover .a, .mnav-list a:active .a{ color:var(--ink); transform:translateX(3px); }
    .mnav-list a[aria-current] .t{ color:var(--amber-dark); }
    .mnav-list a[aria-current] .a{ color:var(--amber); }
    .mnav .mnav-cta{ margin-top:28px; width:100%; justify-content:center; padding:17px 22px; font-size:16px; }
    .mnav-contact{ margin-top:auto; padding-top:36px; }
    .mnav-contact .direct{ margin-top:10px; }
    .mnav-foot{ margin-top:16px; font-size:12.5px; color:var(--dim); }

    /* Gestaffeltes Einfahren nur beim Öffnen; beim Schließen blendet alles gemeinsam aus. */
    .mnav-list li, .mnav .mnav-cta, .mnav-contact{ opacity:0; transform:translateY(16px);
      transition:opacity .6s var(--ease), transform .6s var(--ease), background .3s; }
    .nav-open .mnav-list li, .nav-open .mnav .mnav-cta, .nav-open .mnav-contact{ opacity:1; transform:none;
      transition-delay:calc(var(--i, 0) * 55ms + 90ms); }
  }
  @media (prefers-reduced-motion: reduce){
    .burger-box i, .mnav, .mnav-list li, .mnav .mnav-cta, .mnav-contact, .mnav-list .a, .nav-cta{ transition:none !important; }
    .mnav-list li, .mnav .mnav-cta, .mnav-contact{ transform:none !important; }
  }

  /* ── Layout ── */
  .wrap{ max-width:1120px; margin:0 auto; padding:0 clamp(18px,4vw,44px); }
  .section{ padding:clamp(64px,9vw,120px) 0; border-top:1px solid var(--line); }
  .section.tight{ padding-top:clamp(48px,6vw,80px); }
  .eyebrow{ font-family:var(--mono); font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--amber-dark); }
  h2{ margin-top:14px; font-size:clamp(28px,4vw,44px); line-height:1.12; letter-spacing:-.02em; font-weight:800; max-width:22ch; }
  h3{ font-size:19px; font-weight:700; letter-spacing:-.01em; }
  /* h2 aus Gliederungsgründen, sieht aus wie h3 */
  .as-h3{ margin-top:0; font-size:19px; line-height:inherit; font-weight:700; letter-spacing:-.01em; max-width:none; }
  .lead{ margin-top:18px; font-size:clamp(16px,1.6vw,19px); color:var(--ink-2); max-width:62ch; }
  .accent{ color:var(--amber-dark); }
  .tlink{ color:var(--amber-dark); }
  .tlink.bare{ text-decoration:none; }
  .fine{ margin-top:18px; font-size:12.5px; color:var(--dim); }
  .grid{ display:grid; gap:18px; margin-top:38px; }
  .g2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  @media (max-width:600px){ .g2{ grid-template-columns:minmax(0,1fr); } }
  .card{ background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:26px; }
  .card p{ margin-top:8px; color:var(--dim); font-size:15px; }
  .ico{ width:40px; height:40px; border-radius:11px; background:var(--paper); border:1px solid var(--line); display:grid; place-items:center; margin-bottom:16px; }
  .ico svg{ width:20px; height:20px; fill:none; stroke:var(--ink); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
  .ico.gold{ background:var(--amber-soft); border-color:var(--amber-line); }
  .num{ font-family:var(--mono); font-size:12px; letter-spacing:.2em; color:var(--amber-dark); margin-bottom:12px; }

  /* ── Buttons ── */
  .btnrow{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
  .btnrow.mt{ margin-top:22px; }
  .btn{
    display:inline-flex; align-items:center; gap:10px; padding:14px 22px; border-radius:999px;
    background:var(--ink); color:var(--white); text-decoration:none; font-weight:600; font-size:15px;
    border:1px solid var(--ink); cursor:pointer; font-family:var(--font); transition:transform .3s var(--ease), background .3s;
  }
  .btn:hover{ background:var(--black); transform:translateY(-1px); }
  .btn.ghost{ background:transparent; color:var(--ink); border-color:var(--line-2); }
  .btn.ghost:hover{ background:var(--white); }
  .btn .arr{ transition:transform .35s var(--ease); }
  .btn:hover .arr{ transform:translateX(3px); }
  .btn[disabled]{ opacity:.55; cursor:default; transform:none; }

  /* ── Hero ── */
  .hero{ padding:150px 0 70px; }
  .hero .wrap{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(28px,5vw,64px); align-items:center; }
  @media (max-width:900px){ .hero{ padding-top:120px; } .hero .wrap{ grid-template-columns:minmax(0,1fr); } }
  .hero h1{ margin-top:18px; font-size:clamp(38px,4.4vw,56px); line-height:1.02; letter-spacing:-.03em; font-weight:800; }
  .hero h1 em{ font-style:normal; color:var(--amber-dark); }
  .hero .lead{ font-size:clamp(16px,1.7vw,20px); }
  .trust{ display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:26px; font-size:13.5px; color:var(--dim); }
  .trust span{ display:inline-flex; align-items:center; gap:8px; }
  .trust i{ width:6px; height:6px; border-radius:50%; background:var(--amber); }

  /* Hero-Demo: Dokument → Felder, läuft von selbst */
  .doc{ position:relative; background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:22px 22px 18px;
        box-shadow:0 30px 60px -40px rgba(27,27,24,.35); }
  .doc-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:14px; border-bottom:1px dashed var(--line-2); }
  .doc-file{ display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12.5px; color:var(--ink-2); min-width:0; }
  .doc-file svg{ width:18px; height:18px; fill:none; stroke:var(--ink); stroke-width:1.7; flex:none; }
  .doc-file span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .doc-status{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); white-space:nowrap; transition:color .4s; }
  .doc-status.ok{ color:var(--green); }
  .doc-rows{ margin-top:6px; min-height:250px; }
  .drow{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr) auto; gap:12px; align-items:center; padding:11px 0; border-bottom:1px solid var(--line);
         opacity:0; transform:translateY(6px); transition:opacity .5s var(--ease), transform .5s var(--ease); }
  .drow.in{ opacity:1; transform:none; }
  .drow .k{ font-size:13px; color:var(--dim); }
  .drow .v{ font-weight:600; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .drow .c{ font-family:var(--mono); font-size:11px; padding:3px 8px; border-radius:999px; background:var(--green-soft); color:var(--green); }
  .drow.warn .c{ background:var(--amber-soft); color:var(--amber-dark); }
  .drow.warn .v{ color:var(--amber-dark); }
  .drow.warn.fixed .c{ background:var(--green-soft); color:var(--green); }
  .drow.warn.fixed .v{ color:var(--ink); }
  .doc-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:14px; }
  .doc-bar{ flex:1; height:4px; border-radius:2px; background:var(--paper-2); overflow:hidden; }
  .doc-bar i{ display:block; height:100%; width:0; background:var(--amber); transition:width .4s linear; }
  .doc-export{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); opacity:.35; transition:opacity .4s, color .4s; }
  .doc-export.in{ opacity:1; color:var(--ink); }
  .doc-cap{ margin-top:12px; text-align:center; font-size:12.5px; color:var(--dim); }

  /* ── Zahlen-Zeile ── */
  .facts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:38px; }
  @media (max-width:700px){ .facts{ grid-template-columns:minmax(0,1fr); } }
  .fact{ padding:24px; border-left:2px solid var(--amber); }
  .fact b{ display:block; font-size:clamp(28px,3.6vw,40px); letter-spacing:-.03em; font-weight:800; line-height:1; }
  .fact span{ display:block; margin-top:8px; color:var(--dim); font-size:14.5px; }
  .facts.single{ grid-template-columns:minmax(0,1fr); margin-top:0; gap:0; }

  /* ── Steps ── */
  .steps{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:38px; }
  .steps.two{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  @media (max-width:800px){ .steps, .steps.two{ grid-template-columns:minmax(0,1fr); } }
  .step{ background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:28px; }
  .step ul{ margin:12px 0 0 18px; color:var(--dim); font-size:14.5px; }
  .step li+li{ margin-top:5px; }
  .step p{ margin-top:8px; color:var(--dim); font-size:14.5px; }

  /* ── Doku-Typen ── */
  .types{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:34px; }
  @media (max-width:900px){ .types{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
  @media (max-width:560px){ .types{ grid-template-columns:minmax(0,1fr); } }
  .type{ display:flex; gap:14px; align-items:flex-start; background:var(--white); border:1px solid var(--line); border-radius:14px; padding:18px; }
  .type .ico{ margin:0; flex:none; }
  .type b{ display:block; font-size:15px; }
  .type span{ display:block; margin-top:3px; color:var(--dim); font-size:13.5px; }
  .branchen{ margin-top:26px; display:flex; flex-wrap:wrap; gap:8px; }

  /* ── Rechner ── */
  .calc{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; margin-top:38px; }
  @media (max-width:800px){ .calc{ grid-template-columns:minmax(0,1fr); } }
  .calc-in{ background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:28px; }
  .field{ margin-top:22px; }
  .field:first-child{ margin-top:0; }
  .field label{ display:flex; justify-content:space-between; font-size:14px; color:var(--dim); }
  .field label output{ font-weight:700; color:var(--ink); font-size:15px; }
  input[type=range]{ width:100%; margin-top:12px; accent-color:var(--ink); }
  .calc-out{ background:var(--ink); color:var(--white); border-radius:var(--r); padding:28px; display:flex; flex-direction:column; justify-content:center; }
  .calc-out .eyebrow{ color:var(--amber); }
  .calc-out .big{ margin-top:12px; font-size:clamp(40px,5.5vw,64px); font-weight:800; letter-spacing:-.03em; line-height:1; }
  .calc-out .big small{ font-size:.42em; font-weight:500; letter-spacing:0; color:rgba(255,255,255,.7); margin-left:6px; }
  .calc-out p{ margin-top:14px; color:rgba(255,255,255,.72); font-size:14.5px; }
  .calc-out p b{ color:var(--white); }
  .calc-note{ margin-top:14px; font-size:12.5px; color:var(--dim); }

  /* ── Liefermodell ── */
  .deliver{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:18px; margin-top:38px; }
  @media (max-width:860px){ .deliver{ grid-template-columns:minmax(0,1fr); } }
  .checks{ list-style:none; margin-top:18px; }
  .checks li{ position:relative; padding:12px 0 12px 32px; border-top:1px solid var(--line); font-size:15px; color:var(--ink-2); }
  .checks li:first-child{ border-top:0; }
  .checks li::before{ content:""; position:absolute; left:0; top:17px; width:18px; height:18px; border-radius:50%; background:var(--green-soft);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B7F4B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
    background-size:11px; background-position:center; background-repeat:no-repeat; }
  .price{ background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:28px; }
  .price .row{ display:flex; justify-content:space-between; gap:14px; padding:14px 0; border-top:1px solid var(--line); font-size:15px; }
  .price .row:first-of-type{ border-top:0; }
  .price .row > span{ color:var(--dim); }
  .price .row b{ text-align:right; }
  .price .pilot{ margin-top:16px; padding:16px; border-radius:12px; background:var(--amber-soft); border:1px solid var(--amber-line); font-size:14px; color:var(--ink-2); }

  /* ── Datenschutz-Block ── */
  .trustgrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:38px; }
  @media (max-width:700px){ .trustgrid{ grid-template-columns:minmax(0,1fr); } }
  .honest{ margin-top:22px; padding:18px 22px; border-left:2px solid var(--amber); color:var(--ink-2); font-size:14.5px; background:var(--white); border-radius:0 14px 14px 0; }

  /* ── Person ── */
  .person{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:clamp(24px,4vw,56px); align-items:center; margin-top:38px; }
  @media (max-width:800px){ .person{ grid-template-columns:minmax(0,1fr); } }
  .portrait{ aspect-ratio:4/5; border-radius:var(--r); background:linear-gradient(160deg,var(--paper-2),var(--paper-3)); border:1px solid var(--line); display:grid; place-items:center; }
  .portrait{ overflow:hidden; }
  .portrait img{ width:100%; height:100%; object-fit:cover; }
  .portrait .initials{ font-family:var(--mono); font-size:13px; letter-spacing:.3em; color:var(--dim); text-align:center; line-height:2; }
  .quote{ font-size:clamp(18px,2vw,23px); line-height:1.45; letter-spacing:-.01em; font-weight:500; }
  .quote + p{ margin-top:18px; color:var(--dim); font-size:15px; }

  /* ── FAQ ── */
  .faq{ margin-top:34px; border-top:1px solid var(--line); }
  .faq details{ border-bottom:1px solid var(--line); }
  .faq summary{ list-style:none; cursor:pointer; padding:20px 0; display:flex; justify-content:space-between; align-items:center; gap:18px; font-weight:600; font-size:16.5px; }
  .faq summary::-webkit-details-marker{ display:none; }
  .faq summary::after{ content:"+"; font-family:var(--mono); font-size:20px; color:var(--dim); transition:transform .3s; flex:none; }
  .faq details[open] summary::after{ transform:rotate(45deg); }
  .faq .a{ padding:0 0 22px; color:var(--dim); font-size:15px; max-width:70ch; }

  /* ── Kontakt ── */
  .contact{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(24px,4vw,56px); margin-top:38px; align-items:start; }
  @media (max-width:860px){ .contact{ grid-template-columns:minmax(0,1fr); margin-top:0; } .contact .direct{ margin-top:0; } }
  .direct{ margin-top:22px; }
  .direct a{ display:flex; align-items:center; gap:12px; text-decoration:none; padding:14px 0; border-top:1px solid var(--line); font-weight:600; }
  .direct a:last-child{ border-bottom:1px solid var(--line); }
  .direct svg{ width:18px; height:18px; fill:none; stroke:var(--ink); stroke-width:1.7; flex:none; }
  form.anfrage{ background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:28px; }
  .frow{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
  @media (max-width:560px){ .frow{ grid-template-columns:minmax(0,1fr); } }
  .f{ display:flex; flex-direction:column; gap:6px; margin-top:14px; }
  .frow .f{ margin-top:0; }
  .frow + .frow, .frow + .f{ margin-top:14px; }
  .f label{ font-size:13px; color:var(--dim); }
  .f input, .f textarea{ font:inherit; font-size:15px; padding:12px 14px; border:1px solid var(--line-2); border-radius:10px; background:var(--paper); color:var(--ink); width:100%; }
  .f input:focus, .f textarea:focus{ border-color:var(--ink); background:var(--white); }
  .f input:focus:not(:focus-visible), .f textarea:focus:not(:focus-visible){ outline:none; }
  .f textarea{ min-height:96px; resize:vertical; }
  .f select{ font:inherit; font-size:15px; padding:12px 40px 12px 14px; border:1px solid var(--line-2); border-radius:10px; color:var(--ink); width:100%;
    -webkit-appearance:none; appearance:none; cursor:pointer;
    background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236B6A64' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center / 12px 8px; }
  .f select:focus{ border-color:var(--ink); background-color:var(--white); }
  .f select:focus:not(:focus-visible){ outline:none; }
  /* iPhone zoomt in Felder unter 16 px hinein. */
  @media (max-width:600px){ .f input, .f textarea, .f select{ font-size:16px; } }
  .consent{ display:flex; gap:12px; align-items:flex-start; margin-top:18px; font-size:13.5px; color:var(--ink-2); }
  .consent input{ margin-top:4px; width:16px; height:16px; accent-color:var(--ink); flex:none; }
  .hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
  .fmsg{ margin-top:14px; font-size:14px; min-height:20px; }
  .fmsg.err{ color:var(--red); }
  .fmsg.ok{ color:var(--green); font-weight:600; }
  .done{ display:none; padding:8px 0; }
  .done.in{ display:block; }
  .done h3{ font-size:22px; }
  .done p{ margin-top:10px; color:var(--dim); font-size:15px; }

  /* ── Footer ── */
  footer{ border-top:1px solid var(--line); padding:44px 0 60px; color:var(--dim); font-size:14px; }
  footer .wrap{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:18px 40px; align-items:flex-start; }
  footer .legal{ display:flex; flex-wrap:wrap; gap:10px 20px; }
  footer .legal a{ text-decoration:none; color:var(--ink-2); }
  footer .legal a:hover{ text-decoration:underline; }
  footer small{ display:block; margin-top:8px; font-size:13px; }
  /* Handy: Tap-Fläche mind. 40px, Layout bleibt gleich (Padding per negativem Margin ausgeglichen) */
  @media (max-width:820px){
    footer .legal a{ padding-block:9px; margin-block:-9px; }
    .crumbs a{ padding-block:11px; margin-block:-11px; }
  }

  /* ── Gestaffelte Einblendung (2026-09-17) ───────────────────────────────
     Kinder eines .stagger fahren nacheinander ein, sobald die umgebende
     .reveal-Sektion sichtbar wird. Ohne .reveal.in passiert nichts, damit
     nichts unsichtbar hängen bleibt, falls das Skript nicht läuft. */
  .js .stagger > *{ opacity:0; transform:translateY(16px);
    transition:opacity .75s var(--ease), transform .75s var(--ease); }
  .reveal.in .stagger > *{ opacity:1; transform:none; }
  .reveal.in .stagger > *:nth-child(2){ transition-delay:.10s; }
  .reveal.in .stagger > *:nth-child(3){ transition-delay:.20s; }
  .reveal.in .stagger > *:nth-child(4){ transition-delay:.30s; }
  .reveal.in .stagger > *:nth-child(5){ transition-delay:.40s; }
  @media (prefers-reduced-motion: reduce){
    .stagger > *{ opacity:1; transform:none; transition:none; }
  }


  /* ── Unterseiten (2026-09-18): kompakter Kopf + Textseiten ── */
  .page-hero{ padding:140px 0 44px; }
  @media (max-width:900px){ .page-hero{ padding-top:112px; } }
  .page-hero h1{ margin-top:18px; font-size:clamp(34px,4.2vw,52px); line-height:1.04; letter-spacing:-.03em; font-weight:800; max-width:20ch; }
  .page-hero h1 em{ font-style:normal; color:var(--amber-dark); }
  .page-hero .lead{ font-size:clamp(16px,1.7vw,20px); }
  /* Lange Wörter in der H1 (z. B. „Geschäftsbedingungen“) sollen auf 360 px nicht breiter als der Bildschirm werden */
  @media (max-width:400px){ .page-hero h1, .hero h1{ hyphens:auto; -webkit-hyphens:auto; overflow-wrap:anywhere; } }
  .prose{ margin-top:8px; }
  .prose article{ background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:28px; margin-top:18px; }
  .prose h2{ font-size:21px; line-height:1.25; margin-top:0; max-width:none; letter-spacing:-.01em; }
  .prose h2 + h2, .prose p + h2, .prose ul + h2{ margin-top:34px; }
  .prose h3{ margin-top:22px; font-size:16.5px; }
  .prose p{ margin-top:12px; color:var(--ink-2); font-size:15px; max-width:74ch; }
  .prose ul{ margin:12px 0 0 20px; color:var(--ink-2); font-size:15px; max-width:74ch; }
  .prose li + li{ margin-top:5px; }
  .prose a{ color:var(--amber-dark); }
  .prose strong{ color:var(--ink); }
  .direct a small{ font-weight:400; color:var(--dim); margin-left:auto; font-size:13px; }


  /* ── Branchen-Seiten (2026-09-24): Brotkrumen, Karten-Links, Chips als Links ── */
  .crumbs{ font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--dim); margin-bottom:18px; display:flex; flex-wrap:wrap; gap:4px 8px; }
  .crumbs a{ color:var(--ink-2); text-decoration:none; }
  .crumbs a:hover{ text-decoration:underline; }
  .crumbs .sep{ color:var(--line-2); }
  .crumbs [aria-current]{ color:var(--dim); }
  a.card.link{ display:flex; flex-direction:column; text-decoration:none; color:inherit; transition:border-color .3s, transform .3s var(--ease), box-shadow .3s; }
  a.card.link:hover{ border-color:var(--line-2); transform:translateY(-2px); box-shadow:0 24px 50px -40px rgba(27,27,24,.45); }
  a.card.link h3{ margin-top:0; }
  a.card.link .go{ margin-top:auto; padding-top:18px; font-weight:600; font-size:14.5px; color:var(--amber-dark); display:inline-flex; gap:8px; }
  a.card.link .go .arr{ transition:transform .35s var(--ease); }
  a.card.link:hover .go .arr{ transform:translateX(3px); }
  ul.plain{ list-style:none; margin-top:12px; }
  ul.plain li{ position:relative; padding:6px 0 6px 18px; color:var(--ink-2); font-size:14.5px; border-top:1px solid var(--line); }
  ul.plain li:first-child{ border-top:0; }
  ul.plain li::before{ content:""; position:absolute; left:0; top:15px; width:6px; height:6px; border-radius:50%; background:var(--amber); }
  .card h3 + p{ margin-top:10px; }
  .card p + p{ margin-top:10px; }
  .formel{ margin-top:18px; font-family:var(--mono); font-size:13.5px; color:var(--ink); background:var(--white); border:1px solid var(--line); border-radius:12px; padding:14px 16px; display:inline-block; max-width:100%; }
  .more{ margin-top:34px; font-size:14.5px; color:var(--dim); line-height:1.9; }
  .more span{ margin-right:6px; }
  .more a{ color:var(--ink-2); }
  .more a:hover{ color:var(--amber-dark); }
  .deliver + .types{ margin-top:22px; }
  .branchen a{ font-size:13.5px; padding:7px 13px; border:1px solid var(--line-2); border-radius:999px; color:var(--ink-2); background:var(--paper); text-decoration:none; transition:border-color .3s, background .3s; }
  .branchen a:hover{ border-color:var(--ink); background:var(--white); }


  /* ── Zitat-Zuordnung, Abstände (2026-09-24) ── */
  p.quote-by{ margin-top:14px; font-family:var(--mono); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--amber-dark); }
  p.quote-by + p{ margin-top:14px; }
  .price.mt{ margin-top:22px; }

  /* ── Sprungleiste auf der Produktseite (2026-09-24) ──────────────────────
     Dezente Anker-Chips unter dem Hero statt einer eigenen Produkt-Nav.
     Am Handy horizontal wischbar, ohne die Seite breiter zu machen. */
  .pagenav{ padding:0 0 34px; }
  .pagenav .wrap{ display:flex; align-items:center; gap:10px 18px; flex-wrap:wrap; }
  .pagenav-label{ font-family:var(--mono); font-size:11.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--dim); }
  .pagenav-chips{ display:flex; flex-wrap:wrap; gap:8px; }
  .pagenav-chips a{ font-size:13.5px; padding:7px 13px; border:1px solid var(--line-2); border-radius:999px; color:var(--ink-2); background:var(--paper);
    text-decoration:none; white-space:nowrap; transition:border-color .3s, background .3s; }
  .pagenav-chips a:hover{ border-color:var(--ink); background:var(--white); }
  .pagenav-chips a.go{ border-color:var(--amber-line); background:var(--amber-soft); color:var(--ink); font-weight:600; }
  .pagenav-chips a.go:hover{ border-color:var(--amber); }
  @media (max-width:700px){
    .pagenav .wrap{ display:block; }
    .pagenav-label{ display:block; margin-bottom:10px; }
    .pagenav-chips{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
      margin:0 calc(-1 * clamp(18px,4vw,44px)); padding:2px clamp(18px,4vw,44px); scroll-padding-inline:clamp(18px,4vw,44px); }
    .pagenav-chips::-webkit-scrollbar{ display:none; }
    .pagenav-chips a{ padding-block:10px; }
  }
  .prose p.fine{ margin-top:20px; font-size:12.5px; color:var(--dim); }
  /* AGB (2026-10-03): Kopf von Teil A/B hervorgehoben, Muster-Widerrufsformular als Formularkasten */
  .prose article.teil{ background:var(--amber-soft); border-color:var(--amber-line); }
  .prose article[id]{ scroll-margin-top:84px; }
  .prose .formular{ margin-top:16px; padding:18px 22px 20px; border:1px dashed var(--line-2); border-radius:14px; background:var(--paper); }
  .prose .formular p{ margin-top:10px; }
  .prose .formular p:first-child{ margin-top:0; }

  /* ── Film (Werbefilme & Animation) ── */
  .film{ margin:38px 0 0; }
  .film video{ display:block; width:100%; height:auto; border-radius:var(--r); background:#0B0B0C; border:1px solid var(--line); }
  .film .film-h{ display:none; max-width:400px; margin:0 auto; }
  @media (max-width:700px){ .film .film-q{ display:none; } .film .film-h{ display:block; } }
  .film figcaption{ margin-top:12px; text-align:center; font-size:12.5px; color:var(--dim); }

  /* ── Animation für Privat (/privat, 2026-10-03): Angebotskarten, Handy mit Live-Animation, Themen-Chips ── */
  .pkgs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:38px; }
  .pkgs.two{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  @media (max-width:900px){ .pkgs{ grid-template-columns:minmax(0,1fr); } }
  @media (max-width:760px){ .pkgs.two{ grid-template-columns:minmax(0,1fr); } }
  .pkg{ display:flex; flex-direction:column; background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:28px; }
  .pkg .for{ margin-top:8px; color:var(--dim); font-size:14.5px; }
  .pkg ul.plain{ margin:16px 0 22px; }
  .pkg .pick{ margin-top:auto; padding:16px 0 2px; border-top:1px solid var(--line); display:flex; gap:8px; font-weight:600; font-size:14.5px; color:var(--amber-dark); text-decoration:none; }
  .pkg .pick .arr{ transition:transform .35s var(--ease); }
  .pkg .pick:hover .arr{ transform:translateX(3px); }
  /* „Oder etwas ganz anderes?“ über die volle Breite, ruhig hervorgehoben */
  .pkg.idea{ grid-column:1 / -1; flex-direction:row; align-items:center; justify-content:space-between; gap:18px 40px; background:var(--amber-soft); border-color:var(--amber-line); }
  .pkg.idea p{ margin-top:8px; color:var(--ink-2); font-size:15px; max-width:68ch; }
  .pkg.idea .pick{ margin-top:0; padding:12px 0; border-top:0; flex:none; white-space:nowrap; }
  @media (max-width:760px){
    .pkg.idea{ flex-direction:column; align-items:stretch; }
    .pkg.idea .pick{ padding:16px 0 2px; border-top:1px solid var(--amber-line); }
  }

  /* Kennzeichen „Privat“ neben dem Logo (Navigation und Fußzeile der Privat-Seiten) */
  .mark-tag{ margin-left:-2px; padding:3px 8px 2px; border:1px solid var(--amber-line); border-radius:999px; background:var(--amber-soft);
    font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.18em; line-height:1.4; text-transform:uppercase; color:var(--amber-dark); }

  /* Hero mit Handy: Desktop Text links, Handy rechts; am Handy steht es zwischen Text und Knöpfen. */
  .reel-hero .wrap{ grid-template-areas:"top reel" "bottom reel"; row-gap:0; }
  .reel-hero .hero-top{ grid-area:top; align-self:end; }
  .reel-hero .hero-bottom{ grid-area:bottom; align-self:start; }
  .reel-hero .reel{ grid-area:reel; }
  @media (max-width:900px){
    .reel-hero .wrap{ grid-template-areas:"top" "reel" "bottom"; row-gap:34px; }
    .reel-hero .hero-bottom .btnrow{ margin-top:0; }
  }
  .reel{ position:relative; display:flex; flex-direction:column; align-items:center; }
  /* Lichtschein hinter dem Handy: bleibt in der Spaltenbreite (breiter → Seite am Handy breiter als der Bildschirm) */
  .reel::before{ content:""; position:absolute; left:0; right:0; top:42%; aspect-ratio:1; transform:translateY(-50%);
    z-index:-1; pointer-events:none; background:radial-gradient(closest-side, rgba(240,184,48,.22), rgba(240,184,48,0)); }
  .phone, .reel-ui{ width:min(288px, 72vw); }
  @media (min-width:901px){ .phone, .reel-ui{ width:clamp(260px, 25vw, 312px); } }
  .phone{ position:relative; padding:9px; border-radius:46px; background:#151514;
    box-shadow:inset 0 0 0 1.5px #3A3936, 0 50px 90px -50px rgba(27,27,24,.6), 0 26px 44px -32px rgba(27,27,24,.5); }
  .phone::before, .phone::after{ content:""; position:absolute; width:3px; border-radius:2px; background:#2B2A28; }
  .phone::before{ left:-2.5px; top:22%; height:13%; }
  .phone::after{ right:-2.5px; top:29%; height:10%; }
  .phone-screen{ position:relative; aspect-ratio:9 / 16; border-radius:37px; overflow:hidden; background:#F8F3E9; isolation:isolate; }
  .phone-screen canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
  .phone-screen--app{ background:#F3F6F5; }
  .phone-island{ position:absolute; top:9px; left:50%; width:28%; height:20px; transform:translateX(-50%); border-radius:999px; background:#0B0B0B; z-index:1; }
  .reel-ui{ margin-top:16px; }
  .reel-segs{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
  .reel-seg{ display:flex; align-items:center; height:40px; padding:0; border:0; background:none; cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .reel-seg i{ display:block; width:100%; height:4px; border-radius:2px; background:var(--line-2); overflow:hidden; transition:transform .25s var(--ease); }
  .reel-seg b{ display:block; height:100%; background:var(--ink); transform:scaleX(0); transform-origin:left center; }
  @media (hover:hover){ .reel-seg:hover i{ transform:scaleY(1.6); } }
  .reel-seg:focus-visible{ outline:2px solid var(--amber-dark); outline-offset:2px; border-radius:6px; }
  .reel-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:2px; }
  .reel-label{ min-width:0; font-size:14.5px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .reel-kat{ margin-right:3px; font-family:var(--mono); font-weight:500; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--amber-dark); }
  .reel-pause{ flex:none; display:grid; place-items:center; width:40px; height:40px; padding:0; border-radius:50%; border:1px solid var(--line-2);
    background:var(--white); color:var(--ink); cursor:pointer; -webkit-tap-highlight-color:transparent; transition:border-color .25s; }
  @media (hover:hover){ .reel-pause:hover{ border-color:var(--ink); } }
  .reel-pause svg{ width:14px; height:14px; fill:currentColor; }
  .reel-pause .i-play, .reel.paused .reel-pause .i-pause{ display:none; }
  .reel.paused .reel-pause .i-play{ display:block; }
  .reel .doc-cap{ margin-top:6px; }
  /* Ohne JavaScript tun die Knöpfe nichts, also ausblenden */
  html:not(.js) .reel-segs, html:not(.js) .reel-row{ display:none; }

  .themen{ border:0; padding:0; margin:0; min-width:0; }
  .themen legend{ padding:0; margin-bottom:8px; font-size:13px; color:var(--dim); }
  .themen + .frow{ margin-top:18px; }
  .chips{ display:flex; flex-wrap:wrap; gap:8px; }
  .chip{ position:relative; display:inline-flex; }
  .chip input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
  .chip span{ display:inline-flex; align-items:center; min-height:40px; padding:8px 14px; border:1px solid var(--line-2); border-radius:999px;
    background:var(--paper); color:var(--ink-2); font-size:14px; transition:border-color .25s, background .25s, color .25s; }
  @media (hover:hover){ .chip:hover span{ border-color:var(--ink); } }
  .chip input:checked + span{ background:var(--ink); border-color:var(--ink); color:var(--white); }
  .chip input:focus-visible + span{ outline:2px solid var(--amber-dark); outline-offset:2px; }
  .nw{ white-space:nowrap; }

  /* ── Hinweis auf den Privatbereich (Startseite, 2026-10-03) ── */
  .privat-band{ padding:0 0 clamp(56px,7vw,96px); }
  .privat-band-in{ display:flex; align-items:center; justify-content:space-between; gap:18px 32px; padding:26px 30px;
    border:1px solid var(--amber-line); border-radius:var(--r); background:var(--amber-soft); }
  .privat-band-in p{ margin-top:10px; color:var(--ink-2); font-size:15.5px; max-width:64ch; }
  .privat-band-in .btn{ flex:none; background:var(--white); }
  .privat-band-knoepfe{ display:flex; flex-wrap:wrap; gap:10px; flex:none; }
  @media (max-width:760px){ .privat-band-in{ flex-direction:column; align-items:flex-start; padding:22px; }
    .privat-band-knoepfe{ width:100%; } .privat-band-knoepfe .btn{ flex:1 1 auto; justify-content:center; } }

  /* ── Referenzen (/referenzen, 2026-10-10): Projektkarten mit Handy- oder Browser-Bild ── */
  .refs{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:38px; }
  @media (max-width:860px){ .refs{ grid-template-columns:minmax(0,1fr); } }
  .ref{ display:flex; flex-direction:column; background:var(--white); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
  .ref-media{ position:relative; display:grid; place-items:center; padding:28px 24px 0; background:linear-gradient(180deg,var(--paper-2),var(--paper)); border-bottom:1px solid var(--line); overflow:hidden; min-height:260px; }
  .ref-media.dark{ background:radial-gradient(120% 90% at 50% 100%, #2A2926, #151514); border-bottom-color:#2B2A28; }
  /* Handy-Rahmen wie auf /privat, nur kleiner und unten angeschnitten */
  .ref-media .phone{ width:min(230px,60vw); margin-bottom:-120px; padding:7px; border-radius:36px; box-shadow:inset 0 0 0 1.5px #3A3936, 0 30px 60px -36px rgba(27,27,24,.7); }
  .ref-media .phone-screen{ border-radius:29px; background:#111; }
  .ref-media .phone-screen img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; }
  .ref-media .phone-island{ top:7px; height:16px; }
  .ref-media .phone::before{ left:-2px; top:22%; height:12%; } .ref-media .phone::after{ right:-2px; top:28%; height:9%; }
  /* Zwei Handys nebeneinander, leicht versetzt */
  .ref-media.two{ grid-template-columns:repeat(2,auto); column-gap:14px; align-items:end; }
  .ref-media.two .phone{ width:min(190px,42vw); }
  .ref-media.two .phone:first-child{ margin-bottom:-150px; }
  /* Browser-Rahmen für Desktop-Anwendungen */
  .browser{ width:100%; margin-bottom:-18px; border-radius:12px 12px 0 0; background:#1B1B18; box-shadow:0 30px 60px -36px rgba(27,27,24,.7); overflow:hidden; }
  .browser-bar{ display:flex; gap:6px; padding:9px 12px; background:#2B2A28; }
  .browser-bar i{ width:9px; height:9px; border-radius:50%; background:#4A4945; }
  .browser img{ width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; object-position:top; }
  .ref-media .film-h, .ref-media .film-q{ display:block; max-width:none; }
  .ref-body{ display:flex; flex-direction:column; flex:1; padding:24px 26px 26px; }
  .ref-body .num{ margin-bottom:10px; }
  .ref-body h3{ font-size:20px; }
  .ref-body p{ margin-top:8px; color:var(--dim); font-size:15px; }
  .ref-body ul.plain{ margin-top:14px; }
  .ref-body ul.plain li{ font-size:14px; }
  .ref-body .go{ margin-top:auto; padding-top:18px; display:flex; flex-wrap:wrap; gap:8px 20px; font-weight:600; font-size:14.5px; }
  .ref-body .go a{ color:var(--amber-dark); text-decoration:none; display:inline-flex; gap:7px; }
  .ref-body .go a .arr{ transition:transform .35s var(--ease); }
  .ref-body .go a:hover .arr{ transform:translateX(3px); }
  .ref-body .go span.muted{ color:var(--dim); font-weight:500; }
  /* Filmkarten: Video statt Bild */
  .ref-media.video{ padding:0; min-height:0; display:block; background:#0B0B0C; }
  .ref-media.video video{ display:block; width:100%; height:auto; border:0; border-radius:0; background:#0B0B0C; }
  .ref-media.video.tall{ display:grid; place-items:center; background:radial-gradient(120% 90% at 50% 100%, #2A2926, #0B0B0C); padding:24px 0 0; }
  .ref-media.video.tall video{ width:min(230px,60vw); margin-bottom:-110px; border-radius:30px; box-shadow:0 30px 60px -36px rgba(0,0,0,.8); }
  /* Leistungs-Übersicht (/leistungen): drei große Karten-Links mit Nummer */
  .lcards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:38px; }
  .lcards.two{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  @media (max-width:860px){ .lcards, .lcards.two{ grid-template-columns:minmax(0,1fr); } }
  a.card.link .num{ margin-bottom:12px; }
  a.card.link ul.plain{ margin-top:14px; }
  a.card.link p{ margin-top:8px; }