/* Nils Lanners - site styles.
   Look taken from the 13.10.2026 sketch (sketch/index.html); contact form styles
   ported from the uebersetzungen-gauss.de form and re-skinned with these tokens.
   Every colour, font and radius below comes from the :root tokens.

   Themes (23.10.2026): light = the original look; dark = "night desk": the
   paper turns to a muted slate-navy, the brand navy fills (band, contact
   block) become a muted navy one gentle step off the page, and the hero
   sheets and the hinge stay paper objects with their own
   --paper-* tokens (white paper in light, toned warm paper in dark). The
   inline script in every page's <head> sets <html data-theme="light|dark">
   before the first paint (saved choice from the header toggle, else the
   device setting); the prefers-color-scheme block below only serves visitors
   without JavaScript.
   Softened 23.10.2026 evening (owner: "the jump from white to blue is too
   harsh"): light navy fills lifted to a slate-navy, off-white cards, closer
   section tones, a short fade where a navy block meets the page (--navy-fade);
   dark page lifted, off-white text, paper objects toned down. */
:root{
  --paper:#F3F5F8;--mist:#EAEEF4;--sheet:#FAFBFC;--sheet-alt:#F4F6F9;--field-bg:#F5F7FA;--input-bg:#FFFFFF;
  --ink:#1A2F52;
  --slate:#5A6B83;--gold:#A47F4A;--gold-ink:#7F6233;--gold-wash:rgba(169,132,78,.08);
  --stamp:#2F4E8F;--rule:#D7DEE8;--field:#CBD4E1;--drop:#AFC0D6;--drop-over:#EEF3FA;--focus-ring:rgba(47,78,143,.15);
  --btn-bg:#22406B;--btn-fg:#FFFFFF;--btn-hover:#2B4B7A;--spin-track:rgba(255,255,255,.45);
  --ok:#1E7A46;--ok-bg:rgba(30,122,70,.10);--err:#B42318;--err-bg:rgba(180,35,24,.07);
  --shadow-sheet:0 1px 2px rgba(20,40,75,.06),0 22px 44px -20px rgba(20,40,75,.30);
  --shadow-pop:0 10px 24px -12px rgba(20,40,75,.45);
  --shadow-menu:0 18px 30px -18px rgba(20,40,75,.35);
  --card-edge:transparent;--logo-filter:none;
  /* brand navy fills (band, contact block) and the text that sits on them */
  --navy:#213C63;--navy-deep:#1A3256;--navy-2:#27446D;--navy-3:#2D4C77;
  --on-ink-strong:#FFFFFF;--on-ink:#E8EDF5;--on-ink-muted:#BCC7D9;--on-ink-faint:#A5B4CA;--on-ink-band:#C9D3E3;--on-ink-rule:rgba(255,255,255,.16);
  /* soft edge where a navy fill meets the page: a short wash of the page tone inside its top and
     bottom edge, plus (light only) a faint halo on the page side, so there is no hard jump */
  --fade-h:28px;
  --navy-fade-top:linear-gradient(180deg,rgba(243,245,248,.08),rgba(243,245,248,0) var(--fade-h));--navy-fade-bot:linear-gradient(0deg,rgba(243,245,248,.08),rgba(243,245,248,0) var(--fade-h));
  --navy-fade:var(--navy-fade-top),var(--navy-fade-bot);
  --navy-halo:0 0 28px rgba(33,60,99,.14);
  /* paper objects (hero sheets, hinge): white paper here, toned paper in dark */
  --paper-sheet:#FFFFFF;--paper-edge:#E1E6EE;--paper-ink:#14284B;--paper-slate:#5D6E86;--paper-rule:#D7DEE8;--paper-stamp:#2F4E8F;--paper-wm:rgba(20,40,75,.055);
  --paper-guil-a:#E1E9F4;--paper-guil-b:#F5F8FC;--paper-guil-line:#DCE5F0;--paper-emb:#B9C6D8;--paper-faint:#6B7890;--paper-title:#3B4A63;--paper-dot:#AEB9CB;
  --serif:"Literata",Georgia,"Times New Roman",serif;
  --sans:"Golos Text",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --script:"Mrs Saint Delafield",cursive;
  --r-sm:6px;--r-md:8px;--r-lg:10px;--r-xl:12px;
  --wrap:1180px;--pad:40px;--head-h:84px;--tap:44px;
  color-scheme:light
}
/* Dark tokens. Two copies on purpose (keep them identical): the attribute one
   is what the head script sets; the media one is the no-JavaScript fallback. */
:root[data-theme="dark"]{
  --paper:#1A2332;--mist:#1F2939;--sheet:#253043;--sheet-alt:#2A364A;--field-bg:#1F2938;--input-bg:#1C2534;
  --ink:#D6DDE7;
  --slate:#9EABBE;--gold:#BF9F6D;--gold-ink:#D5BB90;--gold-wash:rgba(191,159,109,.12);
  --stamp:#9DB6E3;--rule:#344157;--field:#687A99;--drop:#62749A;--drop-over:#2A3A55;--focus-ring:rgba(157,182,227,.28);
  --btn-bg:#CCD5E1;--btn-fg:#1A2740;--btn-hover:#DAE1EA;--spin-track:rgba(26,39,64,.35);
  --ok:#6CC594;--ok-bg:rgba(108,197,148,.14);--err:#F4A398;--err-bg:rgba(244,163,152,.10);
  --shadow-sheet:0 1px 2px rgba(6,10,18,.30),0 22px 44px -20px rgba(6,10,18,.60);
  --shadow-pop:0 10px 24px -12px rgba(6,10,18,.60);
  --shadow-menu:0 18px 30px -18px rgba(6,10,18,.60);
  --card-edge:rgba(255,255,255,.07);--logo-filter:invert(1) hue-rotate(180deg) saturate(1.1) brightness(.9);
  --navy:#1F2C44;--navy-deep:#1A2638;--navy-2:#24334D;--navy-3:#2A3A57;
  --on-ink-strong:#E1E7EF;--on-ink:#D6DDE7;--on-ink-muted:#AEB9CA;--on-ink-faint:#9AA8BC;--on-ink-band:#B6C1D2;--on-ink-rule:rgba(255,255,255,.10);
  --navy-fade-top:linear-gradient(180deg,rgba(26,35,50,.35),rgba(26,35,50,0) var(--fade-h));--navy-fade-bot:linear-gradient(0deg,rgba(26,35,50,.35),rgba(26,35,50,0) var(--fade-h));--navy-halo:none;
  --paper-sheet:#DCD9D2;--paper-edge:#C6C2B9;--paper-ink:#1A2D4D;--paper-slate:#4D5C72;--paper-rule:#B9BDBF;--paper-stamp:#2F4E8F;--paper-wm:rgba(20,40,75,.06);
  --paper-guil-a:#C2C6C9;--paper-guil-b:#D3D3D0;--paper-guil-line:#BEC3C6;--paper-emb:#A0A8B2;--paper-faint:#5C6677;--paper-title:#333F52;--paper-dot:#969DA7;
  color-scheme:dark
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme]){
    --paper:#1A2332;--mist:#1F2939;--sheet:#253043;--sheet-alt:#2A364A;--field-bg:#1F2938;--input-bg:#1C2534;
    --ink:#D6DDE7;
    --slate:#9EABBE;--gold:#BF9F6D;--gold-ink:#D5BB90;--gold-wash:rgba(191,159,109,.12);
    --stamp:#9DB6E3;--rule:#344157;--field:#687A99;--drop:#62749A;--drop-over:#2A3A55;--focus-ring:rgba(157,182,227,.28);
    --btn-bg:#CCD5E1;--btn-fg:#1A2740;--btn-hover:#DAE1EA;--spin-track:rgba(26,39,64,.35);
    --ok:#6CC594;--ok-bg:rgba(108,197,148,.14);--err:#F4A398;--err-bg:rgba(244,163,152,.10);
    --shadow-sheet:0 1px 2px rgba(6,10,18,.30),0 22px 44px -20px rgba(6,10,18,.60);
    --shadow-pop:0 10px 24px -12px rgba(6,10,18,.60);
    --shadow-menu:0 18px 30px -18px rgba(6,10,18,.60);
    --card-edge:rgba(255,255,255,.07);--logo-filter:invert(1) hue-rotate(180deg) saturate(1.1) brightness(.9);
    --navy:#1F2C44;--navy-deep:#1A2638;--navy-2:#24334D;--navy-3:#2A3A57;
    --on-ink-strong:#E1E7EF;--on-ink:#D6DDE7;--on-ink-muted:#AEB9CA;--on-ink-faint:#9AA8BC;--on-ink-band:#B6C1D2;--on-ink-rule:rgba(255,255,255,.10);
    --navy-fade-top:linear-gradient(180deg,rgba(26,35,50,.35),rgba(26,35,50,0) var(--fade-h));--navy-fade-bot:linear-gradient(0deg,rgba(26,35,50,.35),rgba(26,35,50,0) var(--fade-h));--navy-halo:none;
    --paper-sheet:#DCD9D2;--paper-edge:#C6C2B9;--paper-ink:#1A2D4D;--paper-slate:#4D5C72;--paper-rule:#B9BDBF;--paper-stamp:#2F4E8F;--paper-wm:rgba(20,40,75,.06);
    --paper-guil-a:#C2C6C9;--paper-guil-b:#D3D3D0;--paper-guil-line:#BEC3C6;--paper-emb:#A0A8B2;--paper-faint:#5C6677;--paper-title:#333F52;--paper-dot:#969DA7;
    color-scheme:dark
  }
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font:400 18px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
[id]{scroll-margin-top:calc(var(--head-h) + 12px)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--navy);color:var(--on-ink-strong);padding:10px 16px;border-radius:var(--r-sm)}
.skip:focus{left:12px}
.note{background:var(--navy-deep);color:var(--on-ink-muted);font-size:13px;line-height:1.5;text-align:center;padding:8px 16px}
.todo{display:inline;border:1px dashed var(--gold);color:var(--gold-ink);background:var(--gold-wash);border-radius:4px;padding:1px 8px;font-size:.82em;line-height:1.9;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.nb{white-space:nowrap}

/* ---------- Header ---------- */
.top{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--rule)}
.top .wrap{display:flex;align-items:center;gap:20px;height:var(--head-h);position:relative}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto;min-width:0;min-height:var(--tap)}
.brand img{height:48px;width:auto;flex:none;filter:var(--logo-filter)}
.brand span{font:600 20px/1.15 var(--serif);white-space:nowrap}
.brand small{display:block;font:400 13px/1.3 var(--sans);color:var(--slate)}
.nav{display:flex;gap:18px;font-size:15px;font-weight:500}
.nav a{text-decoration:none;display:inline-flex;align-items:center;min-height:var(--tap)}
.nav a:hover{color:var(--stamp)}
.lang{display:flex;align-items:center;gap:2px}
.lang a{display:inline-grid;place-items:center;min-width:32px;min-height:var(--tap);text-decoration:none;color:var(--slate);font:500 14px/1 var(--sans);letter-spacing:.04em}
.lang a:hover{color:var(--ink)}
.lang a[aria-current="page"]{color:var(--ink);font-weight:600;text-decoration:underline 2px var(--gold);text-underline-offset:7px}
/* Theme toggle: moon in light (go dark), sun in dark (go light); aria-pressed = dark on.
   Hidden without JavaScript (no data-theme), where it could not work. */
.theme-toggle{display:inline-grid;place-items:center;width:var(--tap);height:var(--tap);flex:none;border:0;border-radius:50%;background:transparent;color:var(--slate);cursor:pointer}
.theme-toggle:hover{color:var(--ink);background:var(--mist)}
.theme-toggle svg{width:20px;height:20px}
.theme-toggle .i-sun,:root[data-theme="dark"] .theme-toggle .i-moon{display:none}
:root[data-theme="dark"] .theme-toggle .i-sun{display:block}
html:not([data-theme]) .theme-toggle{display:none}
/* Phones (<=600px) have no room in the bar: the same switch sits as the last row of the menu panel. */
.theme-row{display:none;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:52px;margin-top:12px;padding:0;border:0;border-top:1px solid var(--rule);background:transparent;color:var(--ink);font:500 16px/1.2 var(--sans);cursor:pointer;text-align:left}
.tt-switch{position:relative;flex:none;width:44px;height:26px;border-radius:13px;background:var(--field);transition:background-color .2s}
.tt-switch:after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--sheet);box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .2s}
.theme-row[aria-pressed="true"] .tt-switch{background:var(--gold)}
.theme-row[aria-pressed="true"] .tt-switch:after{transform:translateX(18px)}
html:not([data-theme]) .theme-row{display:none !important}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:0;border-radius:var(--r-sm);font:600 16px/1.2 var(--sans);text-decoration:none;padding:16px 26px;min-height:52px;border:1.5px solid var(--ink);cursor:pointer;text-align:center}
.btn-main{background:var(--btn-bg);border-color:var(--btn-bg);color:var(--btn-fg)}
.btn-main:hover{background:var(--btn-hover);border-color:var(--btn-hover)}
.btn-alt{background:transparent;color:var(--ink)}
.btn-alt:hover{background:var(--sheet)}
.btn-sm{padding:12px 18px;min-height:var(--tap);font-size:15px}
.menu{display:none;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);border:1.5px solid var(--ink);border-radius:var(--r-sm);background:none;color:var(--ink);cursor:pointer;flex:none}
.menu svg{width:20px;height:20px}
.menu .x{display:none}
.menu[aria-expanded="true"] .x{display:block}
.menu[aria-expanded="true"] .bars{display:none}
.mnav{position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--rule);box-shadow:var(--shadow-menu);padding:8px var(--pad) 24px}
.mnav[hidden]{display:none}
.mnav a.mlink{display:flex;align-items:center;min-height:52px;border-bottom:1px solid var(--rule);text-decoration:none;font:600 20px/1.2 var(--serif)}
.mnav .btn{width:100%;margin-top:20px}
.mnav .mtel{display:flex;align-items:center;justify-content:center;min-height:var(--tap);margin-top:8px;font-size:16px;color:var(--slate);text-decoration:none}

/* ---------- Hero ---------- */
.hero .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding-top:72px;padding-bottom:92px}
.hero h1{font:600 62px/1.07 var(--serif);letter-spacing:-.012em;hyphens:manual}
.lead{margin-top:26px;font-size:20px;line-height:1.55;color:var(--slate);max-width:30em}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.fine{margin-top:20px;font-size:15px;color:var(--slate)}
.fine+.fine{margin-top:8px}
.fine .todo{display:inline-block}
.art{position:relative;width:100%;max-width:560px;aspect-ratio:1/1.08;justify-self:end}
/* The sheets and the hinge are paper objects: same colours in both themes. */
.sheet,.hinge{--ink:var(--paper-ink);--slate:var(--paper-slate);--rule:var(--paper-rule);--stamp:var(--paper-stamp);--sheet:var(--paper-sheet);color:var(--ink)}
.sheet{position:absolute;background:var(--paper-sheet);aspect-ratio:210/297;container-type:inline-size;border:1px solid var(--paper-edge);box-shadow:var(--shadow-sheet)}
.in{position:relative;height:100%;overflow:hidden}
/* Three sheets since 23.10.2026 (owner: "one in Russian, one in German, one in French"): the original the
   translation names sits left next to the badge, the other original (.back) peeks out top right, furthest
   back and turned the other way, the German translation stays in front. The back sheet carries only its
   head (band, emblem, title): its field rows would only show as clipped slivers between the other two. */
.orig{width:58%;left:0;top:-3%;transform:rotate(-5deg);z-index:1}
.orig.back{width:50%;left:auto;right:2%;top:-6%;transform:rotate(5deg);z-index:0}
.orig .in{padding:0 8cqi}
.guil{height:9cqi;margin:0 -8cqi 7cqi;background:repeating-linear-gradient(115deg,var(--paper-guil-a) 0 1.2cqi,var(--paper-guil-b) 1.2cqi 2.4cqi);border-bottom:1px solid var(--paper-guil-line)}
.emb{width:13cqi;height:13cqi;margin:0 auto 4cqi;border:1.5px solid var(--paper-emb);border-radius:50%}
.o-kick{font:600 3.2cqi/1.3 var(--serif);text-align:center;letter-spacing:.12em;color:var(--paper-faint);margin:-1cqi 0 3cqi}
.o-title{font:600 5.3cqi/1.3 var(--serif);text-align:center;letter-spacing:.06em;color:var(--paper-title);margin-bottom:8cqi}
.o-row{display:flex;align-items:flex-end;gap:3cqi;margin-bottom:5.4cqi;font:400 3.9cqi/1 var(--serif);color:var(--paper-faint)}
.o-row i{flex:1;border-bottom:1px dotted var(--paper-dot)}
.trans{width:62%;right:0;top:23%;transform:rotate(2deg);z-index:2}
.trans .in{padding:8cqi 8cqi 0}
.t-kick{font:400 3.3cqi/1.3 var(--sans);color:var(--slate)}
.t-title{font:600 7.4cqi/1.1 var(--serif);margin:1.6cqi 0 6cqi}
.t-row{display:flex;align-items:flex-end;gap:3cqi;margin-bottom:4.4cqi;font:400 3.4cqi/1 var(--sans);color:var(--slate)}
.t-row i{flex:1;height:1px;background:var(--rule)}
.t-cert{margin-top:7cqi;font:italic 400 3.6cqi/1.5 var(--serif);max-width:90%}
.t-sign{margin-top:5cqi;display:flex;flex-direction:column;gap:1cqi}
.sig{font:400 11cqi/1 var(--script);color:var(--stamp);margin-left:2cqi}
.t-sign small{font:400 2.8cqi/1.45 var(--sans);color:var(--slate);border-top:1px solid var(--rule);padding-top:1.6cqi;max-width:60%}
/* .seal = a specimen of Nils's stamp (assets/img/stamp-muster.png): 248 px = 2x its largest display size (124 px),
   "MUSTER" burned in and flattened on white, which multiply makes vanish on either paper tone. The clean
   cut-out stays in private/ and is never deployed (owner, 23.10.2026: a public copy can be reused). */
.seal{position:absolute;right:5cqi;bottom:6cqi;width:36cqi;height:36cqi;opacity:.9;transform:rotate(-9deg);mix-blend-mode:multiply;animation:stamp .55s cubic-bezier(.2,.9,.3,1.2) .5s both}
@keyframes stamp{from{opacity:0;transform:rotate(-9deg) scale(1.35)}to{opacity:.9;transform:rotate(-9deg) scale(1)}}
.wm{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) rotate(-28deg);font:italic 400 20cqi/1 var(--serif);color:var(--paper-wm);white-space:nowrap}
.hinge{position:absolute;left:22%;top:66%;width:64px;height:64px;border-radius:50%;background:var(--sheet);border:1.5px solid var(--gold);display:grid;place-items:center;box-shadow:var(--shadow-pop);z-index:3;color:var(--slate)}
.hinge svg{width:34px;height:24px}

/* ---------- Band ---------- */
.band{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));color:var(--on-ink-strong);text-align:center;box-shadow:var(--navy-halo)}
.band>div{padding:42px 28px;background-image:var(--navy-fade)}
.band>div:nth-child(1){background-color:var(--navy)}
.band>div:nth-child(2){background-color:var(--navy-2)}
.band>div:nth-child(3){background-color:var(--navy-3)}
.pair{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 14px;font:600 28px/1.2 var(--serif)}
.pair svg{width:34px;height:24px;color:var(--on-ink-strong);flex:none}
.pair.plain{display:block}
.band p+p{margin-top:8px;font-size:15px;color:var(--on-ink-band)}

/* ---------- Sections ---------- */
.sec{padding:104px 0}
.sec h2{font:600 46px/1.12 var(--serif);letter-spacing:-.01em}
.sec-head{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:end}
.sec-head p{color:var(--slate);max-width:32em}
.alt{background:var(--mist)}
.draft{margin-top:22px}

/* About */
.about-grid{display:grid;grid-template-columns:340px 1fr;gap:80px;align-items:center}
.about-photo{position:relative;isolation:isolate}
.about-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%;border-radius:var(--r-md)}
.about-photo:after{content:"";position:absolute;inset:16px -16px -16px 16px;border:1.5px solid var(--gold);border-radius:var(--r-md);z-index:-1}
.about-lead{font:400 24px/1.5 var(--serif);margin:22px 0 22px;max-width:30em}
.about-text p{color:var(--slate);max-width:36em}
.about-text p+p{margin-top:14px}

/* Services */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.card{background:var(--sheet);border:1px solid var(--rule);border-radius:var(--r-lg);padding:30px 28px 32px}
.ico{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:1.5px solid var(--gold);color:var(--gold)}
.ico svg{width:26px;height:26px}
.card h3{font:600 22px/1.3 var(--serif);margin:20px 0 10px}
.card p{color:var(--slate);font-size:17px}

/* Documents */
.docs-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:72px;align-items:start}
.docs-grid .intro p{margin-top:20px;color:var(--slate);max-width:30em}
.docs-grid .intro .btn{margin-top:32px}
.gloss-wrap{background:var(--sheet);border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden}
.gloss{width:100%;border-collapse:collapse}
.gloss th{text-align:left;font:500 14px/1 var(--sans);color:var(--slate);padding:18px 28px;background:var(--sheet-alt);border-bottom:1px solid var(--rule)}
.gloss td{padding:16px 28px;border-bottom:1px solid var(--rule);font:600 19px/1.4 var(--serif);color:var(--ink)}
.gloss td:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--gold);margin:0 16px 3px 0;vertical-align:middle}
.gloss tr:last-child td{border-bottom:0}
.after{margin-top:22px;color:var(--slate);font-size:17px}

/* Steps */
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:52px;position:relative}
.steps:before{content:"";position:absolute;left:28px;right:28px;top:28px;height:1px;background:var(--gold);opacity:.55}
.steps li{position:relative}
.n{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--mist);border:1.5px solid var(--gold);font:600 24px/1 var(--serif);position:relative;z-index:1}
.steps h3{font:600 24px/1.25 var(--serif);margin:22px 0 8px}
.steps p{color:var(--slate);font-size:17px;max-width:20em}

/* FAQ */
.faq-grid{display:grid;grid-template-columns:1fr 2fr;gap:72px}
.qa details{border-bottom:1px solid var(--rule);padding:22px 0}
.qa details:first-child{border-top:1px solid var(--rule)}
.qa summary{list-style:none;cursor:pointer;font:600 21px/1.35 var(--serif);display:flex;justify-content:space-between;gap:24px;min-height:var(--tap);align-items:center}
.qa summary::-webkit-details-marker{display:none}
.qa summary:after{content:"+";font:400 28px/1 var(--sans);color:var(--gold);transition:transform .2s}
.qa details[open] summary:after{transform:rotate(45deg)}
.qa p{margin-top:12px;color:var(--slate);max-width:38em}

/* ---------- Contact ---------- */
.contact{background-color:var(--navy);background-image:var(--navy-fade);box-shadow:var(--navy-halo);color:var(--on-ink)}
.contact h2{color:var(--on-ink-strong)}
.contact-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:72px;align-items:start}
.c-lead{margin-top:16px;color:var(--on-ink-muted);font-size:19px}
.c-list{margin-top:36px;display:grid;gap:18px}
.c-list dt{font-size:14px;color:var(--on-ink-faint)}
.c-list dd{font:400 26px/1.3 var(--serif);overflow-wrap:anywhere}
.c-list dd.c-mail{font-size:clamp(16px,1.65vw,24px)}
.c-list dd.c-addr{font-size:21px;line-height:1.45;padding-top:4px}
.c-list a{text-decoration:none;color:var(--on-ink-strong);display:inline-block;min-height:var(--tap);padding-top:4px}
.c-list a:hover{text-decoration:underline 1px var(--gold);text-underline-offset:6px}
.me{display:flex;align-items:center;gap:16px;margin-top:40px;padding-top:28px;border-top:1px solid var(--on-ink-rule)}
.me img{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:50% 14%;border:2px solid var(--gold);flex:none}
.me b{display:block;font:600 18px/1.3 var(--serif);color:var(--on-ink-strong)}
.me p{font-size:15px;color:var(--on-ink-muted)}

/* Contact form (field names and states as on uebersetzungen-gauss.de) */
.form-slot{min-width:0}
.form-card{background:var(--sheet);color:var(--ink);border:1px solid var(--card-edge);border-radius:var(--r-xl);padding:34px;display:grid;gap:18px}
.form-row{display:grid;gap:16px}
.form-row--2{grid-template-columns:1fr 1fr}
.field{display:grid;gap:7px;min-width:0}
.field>label:not(.dropzone){font-size:14px;font-weight:500;color:var(--slate)}
.field__optional{font-weight:400}
.field input,.field textarea{font:400 16px/1.4 var(--sans);color:var(--ink);padding:12px 14px;min-height:48px;border:1px solid var(--field);border-radius:var(--r-sm);background:var(--input-bg);width:100%}
.field textarea::placeholder{color:var(--slate);opacity:1}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--stamp);outline:none;box-shadow:0 0 0 3px var(--focus-ring)}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--err);box-shadow:0 0 0 1px var(--err)}
.dropzone{display:grid;gap:6px;justify-items:center;text-align:center;border:1.5px dashed var(--drop);border-radius:var(--r-md);background:var(--field-bg);padding:22px 18px;cursor:pointer;transition:border-color .15s,background-color .15s}
.dropzone:hover,.dropzone.is-over{border-color:var(--stamp);background:var(--drop-over)}
.dropzone__title{font-weight:600;color:var(--ink);font-size:16px}
.dropzone__hint{font-size:14px;line-height:1.5;color:var(--slate)}
.files-list{list-style:none;display:grid;gap:8px}
.files-list:empty{display:none}
.file-row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:14px;background:var(--field-bg);border:1px solid var(--rule);border-radius:var(--r-sm);padding:6px 8px 6px 12px;min-height:var(--tap)}
.file-row__name{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.file-row__size{font-size:13px;color:var(--slate);white-space:nowrap}
.file-row__remove{background:transparent;border:1px solid transparent;color:var(--slate);cursor:pointer;font-size:17px;line-height:1;min-width:var(--tap);min-height:var(--tap);border-radius:var(--r-sm);display:inline-flex;align-items:center;justify-content:center}
.file-row__remove:hover{color:var(--err);border-color:var(--err)}
.file-row__error{grid-column:1/-1;font-size:13px;color:var(--err)}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--slate);cursor:pointer}
.consent input{width:20px;height:20px;margin-top:1px;accent-color:var(--ink);flex:none}
.consent input[aria-invalid="true"]{outline:2px solid var(--err);outline-offset:2px}
.consent a{color:var(--ink)}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;opacity:0}
.form-card .btn{width:100%;gap:10px}
.btn--loading{opacity:.85;cursor:progress}
.btn__spinner{display:none;width:16px;height:16px;border:2px solid var(--spin-track);border-top-color:var(--btn-fg);border-radius:50%;animation:btn-spin .7s linear infinite}
.btn--loading .btn__spinner{display:inline-block}
@keyframes btn-spin{to{transform:rotate(360deg)}}
.form-error{background:var(--err-bg);border:1px solid var(--err);color:var(--err);border-radius:var(--r-sm);padding:14px 18px}
.form-error[hidden]{display:none}
.form-error__title{font-weight:600;margin-bottom:4px}
.form-error__body{font-size:14px;line-height:1.5}
.form-error__body a{color:inherit}
.form-success{background:var(--sheet);color:var(--ink);border:1px solid var(--card-edge);border-radius:var(--r-xl);padding:44px 34px;text-align:center}
.form-success[hidden]{display:none}
.form-success__icon{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--ok-bg);color:var(--ok);margin:0 auto 20px}
.form-success__title{font:600 28px/1.2 var(--serif);margin-bottom:10px}
.form-success__body{color:var(--slate);max-width:30ch;margin:0 auto 28px}

/* ---------- Footer ---------- */
.foot{padding:56px 0}
.foot-grid{display:flex;align-items:center;justify-content:space-between;gap:32px}
.foot img{height:118px;width:auto;filter:var(--logo-filter)}
.foot-nav{display:flex;flex-wrap:wrap;gap:8px 24px;font-size:15px;align-items:center}
.foot-nav a{display:inline-flex;align-items:center;min-height:var(--tap)}
.foot p{font-size:14px;color:var(--slate)}
.foot .hint{font-size:13px}
.foot-meta{display:grid;justify-items:end}
.foot .credit a{display:inline-flex;align-items:center;min-height:var(--tap);color:var(--slate);text-underline-offset:3px}
.foot .credit a:hover{color:var(--ink)}

/* ---------- Legal pages ---------- */
.legal{padding:56px 0 96px}
.legal .wrap{max-width:860px}
.draft-flag{border:1.5px dashed var(--gold);background:var(--gold-wash);border-radius:var(--r-md);padding:16px 20px;margin-bottom:22px;color:var(--gold-ink);font-size:16px;line-height:1.5}
.draft-flag b{display:block;font:600 19px/1.3 var(--serif);color:var(--ink);margin-bottom:4px;letter-spacing:.01em}
.lang-note{font-size:14px;color:var(--slate);margin-bottom:36px;line-height:1.6}
.legal-meta{font-size:14px;color:var(--slate);letter-spacing:.02em}
.legal h1{font:600 clamp(28px,8vw,46px)/1.12 var(--serif);letter-spacing:-.01em;margin:8px 0 18px;hyphens:auto}
.legal h2{font:600 clamp(21px,6.2vw,25px)/1.3 var(--serif);margin:44px 0 12px;hyphens:auto;overflow-wrap:break-word}
.legal p,.legal li{color:var(--slate)}
.legal p+p,.legal ul+p,.legal ol+p{margin-top:12px}
.legal strong{color:var(--ink);font-weight:600}
.legal ul,.legal ol{padding-left:1.3em;display:grid;gap:8px}
.legal a{color:var(--stamp);overflow-wrap:anywhere}
.legal-card{background:var(--sheet);border:1px solid var(--rule);border-radius:var(--r-lg);padding:22px 26px}
.legal-card dl{display:grid;grid-template-columns:max-content 1fr;gap:10px 28px}
.legal-card dt{color:var(--slate);font-size:15px;padding-top:2px}
.legal-card dd{color:var(--ink);overflow-wrap:anywhere}
.toc{background:var(--sheet);border:1px solid var(--rule);border-radius:var(--r-lg);padding:20px 26px;margin-top:28px}
.toc h2{margin:0 0 10px;font-size:20px}
.toc ol{gap:4px}
.callout{border-left:3px solid var(--gold);background:var(--sheet);padding:18px 22px;border-radius:0 var(--r-md) var(--r-md) 0}
.legal .stand{margin-top:48px;font-size:14px}

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .nav,.top .btn-sm{display:none}
  .menu{display:inline-flex}
  .top .wrap{gap:14px}
}
@media (max-width:820px){
  :root{--pad:22px;--head-h:68px}
  .brand img{height:40px}
  .brand small{display:none}
  .hero .wrap{grid-template-columns:1fr;gap:44px;padding-top:40px;padding-bottom:64px}
  .hero h1{font-size:40px}
  .lead{font-size:18px}
  /* one column: the back sheet rises about 9% of the picture's width above it; keep that clear of the text */
  .art{justify-self:center;margin-top:5%}
  .hinge{width:52px;height:52px}
  .hinge svg{width:28px;height:20px}
  .band{grid-template-columns:minmax(0,1fr)}
  .band>div{padding:28px 22px;background-image:none}
  /* stacked tiles: only the outer edges of the band get the soft fade, no seams between tiles */
  .band>div:first-child{background-image:var(--navy-fade-top)}
  .band>div:last-child{background-image:var(--navy-fade-bot)}
  .pair{font-size:24px}
  .sec{padding:72px 0}
  .sec h2{font-size:34px}
  .sec-head,.about-grid,.faq-grid,.contact-grid,.docs-grid{grid-template-columns:1fr;gap:28px}
  .cards{grid-template-columns:1fr;gap:16px;margin-top:32px}
  .card{padding:24px 22px 26px}
  .card h3{margin-top:16px}
  .gloss th,.gloss td{padding-left:20px;padding-right:20px}
  .gloss td{font-size:18px}
  .steps{grid-template-columns:1fr;gap:30px}
  .steps:before{left:28px;right:auto;top:28px;bottom:28px;width:1px;height:auto}
  .steps li{display:grid;grid-template-columns:56px 1fr;column-gap:20px}
  .steps .n{grid-row:span 2}
  .steps h3{margin:12px 0 6px}
  .about-photo{max-width:300px}
  .about-lead{font-size:21px}
  .form-row--2{grid-template-columns:1fr}
  .form-card{padding:24px 20px}
  .c-list dd{font-size:22px}
  .c-list dd.c-mail{font-size:clamp(16px,4.9vw,22px)}
  .foot-grid{flex-direction:column;text-align:center}
  .foot-nav{justify-content:center}
  .foot-meta{justify-items:center}
  .c-list dd.c-addr{font-size:19px}
  .legal-card{padding:18px 20px}
  .legal-card dl{grid-template-columns:1fr;gap:2px}
  .legal-card dd+dt{margin-top:10px}
}
@media (max-width:600px){
  :root{--pad:18px}
  .top .wrap{gap:8px}
  .brand{gap:10px}
  .brand img{height:36px}
  .brand span{font-size:18px}
  .brand .ma{display:none}
  .lang{gap:0}
  .lang a{min-width:30px}
  .top .wrap>.theme-toggle{display:none}
  .theme-row{display:flex}
  .pair{font-size:22px}
  .hero h1{font-size:36px}
  .actions .btn{width:100%}
  .sec h2{font-size:31px}
}
@media (max-width:384px){
  .brand img{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .seal{animation:none}
  .btn__spinner{animation:none;border-top-color:var(--spin-track)}
  .qa summary:after,.dropzone,.tt-switch,.tt-switch:after{transition:none}
}