/* AMMN Performance — site styles.
   Built from the AMMN Performance Style Guide: black, white and one line.
   Tokens below mirror tokens.json. Lime (--signal) is only for data above the dotted line and the logo dots. */

@font-face{font-family:"Inter";src:url("fonts/Inter-4.001.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --paper:#ffffff;--ink:#08090a;--ash:#62666d;--mist:#d0d6e0;--fog:#f1f2f4;--signal:#e4f222;
  --font-sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;--space-12:48px;--space-16:64px;--space-24:96px;--space-32:128px;
  --page:70rem;--measure:42rem;--control:48px;--hairline:1px;--rule:2px;
  --gutter:var(--space-12);--section:var(--space-24);--header:72px;
  /* Motion: see CLAUDE.md (site.js reads these). */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --t-press:120ms;--t-fast:160ms;--t-base:240ms;--t-reveal:700ms;--move:4px;
}
/* The black section uses a class, so a viewer's own dark mode (data-theme on <html>) never turns the page black. */
:root{color-scheme:light}
.is-dark{--paper:#08090a;--ink:#ffffff;--ash:#8a8f98;--mist:#23252a;--fog:#0f1011}

*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(var(--header) + var(--space-6));-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body,.is-dark{background:var(--paper);color:var(--ink)}
body{margin:0;font:400 18px/1.5 var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}
a,button,summary,label{touch-action:manipulation}
p{margin:0;text-wrap:pretty}
li,td,th,summary{text-wrap:pretty} /* no single word on the last line of a point, a table cell or a question */
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:var(--rule) solid var(--ink);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--space-4);top:-80px;z-index:100;background:var(--ink);color:var(--paper);padding:var(--space-3) var(--space-4);font-weight:600;text-decoration:none}
.skip:focus{top:var(--space-4)}

.wrap{width:100%;max-width:calc(var(--page) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- Type ---------- */
.display,.h1,.h2,.h3{margin:0;font-weight:600;text-wrap:balance}
/* 72 px from about 1166 px up; below that it follows the hero text column (1fr/.7fr up to 1080 px, 7/12 above). The headline
   takes two lines at every width (one from 608 px in German, 746 px in English, to 767 px).
   Phones: 44 px, 42 px under 375 px; English under 396 px sized to the column, see below.
   Tracking: −0.035 em at 72 px to −0.025 em at 44 px. */
.display{font-size:clamp(44px,calc(7.2vw - 12px),72px);line-height:1.02;letter-spacing:clamp(-2.52px,1.74px - .365vw,-1.1px);margin-left:-.04em}
.h1{font-size:56px;line-height:1.05;letter-spacing:-.035em}
.h2{font-size:36px;line-height:1.1;letter-spacing:-.02em}
.h3{font-size:24px;line-height:1.25;letter-spacing:-.01em}
.hero-number{font-size:128px;line-height:.9;font-weight:600;letter-spacing:-.055em}
.lead{font-size:24px;line-height:1.3;font-weight:500;letter-spacing:-.015em;max-width:var(--measure);text-wrap:balance}
.body{max-width:36rem}
.body+.body{margin-top:var(--space-4)}
.label{font-size:15px;line-height:1.4;font-weight:500;color:var(--ash)}
.small{font-size:15px;line-height:1.45;color:var(--ash)}
.source{font-size:13px;line-height:1.5;color:var(--ash)}
.source,.hint,.line-names small,.prose ol.sources{letter-spacing:.01em}
/* tnum on .num only: in Inter it widens hyphens. */
.num{font-variant-numeric:tabular-nums}

/* ---------- Controls ---------- */
.button{display:inline-flex;align-items:center;justify-content:center;min-height:var(--control);padding:0 var(--space-6);border:var(--hairline) solid var(--ink);border-radius:0;background:var(--ink);color:var(--paper);font:600 17px/1 var(--font-sans);letter-spacing:-.01em;text-decoration:none;cursor:pointer}
/* Instant on purpose (CLAUDE.md). */
@media (hover:hover) and (pointer:fine){.button:hover,.button:active{background:var(--paper);color:var(--ink)}}
.link{color:var(--ink);text-decoration:underline;text-decoration-thickness:var(--hairline);text-underline-offset:.22em;background:none;border:0;padding:0;cursor:pointer;font:inherit;font-weight:500}
@media (hover:hover) and (pointer:fine){.link:hover{text-decoration-thickness:var(--rule)}}

/* ---------- Header ---------- */
/* Opaque on purpose (CLAUDE.md). */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:var(--paper);border-bottom:var(--hairline) solid var(--mist)}
.site-header .wrap{height:var(--header);display:flex;align-items:center;gap:var(--space-8)}
.logo{display:block;flex:none;line-height:0}
.logo img{height:32px;width:auto}
.nav{display:flex;align-items:center;gap:var(--space-6);margin-left:auto}
/* +2 px on top balances the bar: one baseline with DE/EN. */
.nav a{font-size:15px;font-weight:500;text-decoration:none;padding:calc(var(--space-2) + var(--rule)) 0 var(--space-2);border-bottom:var(--rule) solid transparent}
@media (hover:hover) and (pointer:fine){.nav a:hover{border-bottom-color:var(--mist)}}
.nav a[aria-current]{border-bottom-color:var(--ink)}
.tools{display:flex;align-items:center;gap:var(--space-6)}
.contact-link{font-size:15px}
.contact-link[aria-current]{text-decoration-thickness:var(--rule)}
.lang{display:flex;align-items:center;gap:var(--space-2);font-size:15px}
/* DE/EN are links to the other language's page (/ and /en/). [data-lang-link] lifts them over the .nav a rules of the phone menu. */
.lang a[data-lang-link]{border:0;padding:var(--space-1) 2px;color:var(--ash);font-size:inherit;font-weight:500;text-decoration:none}
.lang a[data-lang-link][aria-current]{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-thickness:var(--hairline);text-underline-offset:.22em}
.lang a[data-lang-link]:first-child{padding-left:0}
.lang a[data-lang-link]:last-child{padding-right:0}
.lang span{color:var(--mist)}
.menu-btn{display:none;border:0;background:none;padding:var(--space-2) 0;cursor:pointer;font-weight:600;font-size:16px}
.menu-btn[aria-expanded="true"]{text-decoration:underline;text-decoration-thickness:var(--rule);text-underline-offset:.22em}
.nav-lang,.nav .nav-contact{display:none}

/* ---------- Sections ---------- */
.section{padding-block:var(--section)}
.section+.section{border-top:var(--hairline) solid var(--mist)}
.section{scroll-margin-top:calc(var(--space-12) - var(--space-6) - var(--section))}
.head{margin-bottom:var(--space-12)}
.head .body,.head .lead{margin-top:var(--space-6)}

/* ---------- Hero ---------- */
.hero{padding-top:var(--space-24);padding-bottom:var(--space-16)}
.hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--space-16);align-items:end}
.hero .lead{margin-top:var(--space-8)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4) var(--space-8);margin-top:var(--space-12)}
.photo{margin:0;background:var(--fog);overflow:hidden}
.photo img{width:100%;height:100%;object-fit:cover}
.hero .photo{aspect-ratio:4/5}
/* Short laptop windows: the text starts at the photo's top edge, so the Button stays above the fold (CLAUDE.md). */
@media (min-width:1024px) and (max-height:760px){.hero-grid{align-items:start}.hero .display{text-box:trim-start cap alphabetic}}

/* ---------- Tables ---------- */
.table{width:100%;border-collapse:collapse;border-top:var(--rule) solid var(--ink);border-bottom:var(--rule) solid var(--ink);font-size:17px;line-height:1.45}
.table th,.table td{padding:var(--space-4) var(--space-6) var(--space-4) 0;border-top:var(--hairline) solid var(--mist);text-align:left;vertical-align:baseline}
.table tr:first-child>*{border-top:0}
.table th{font-weight:600}
.table tr>:last-child{padding-right:0}
.table .quiet{color:var(--ash)}
.table .num{white-space:nowrap}
.table th[scope=row]{width:11rem}
.table.pbs td.num{text-align:right}
.table .unit{display:inline-block;min-width:1.75em;text-align:left}

/* ---------- Offers: three calm rows ---------- */
.offers{border-top:var(--rule) solid var(--ink);border-bottom:var(--rule) solid var(--ink)}
/* Same 5/7 key line as About and Contact: title, price and link left; text and points right.
   The price and link sit at the foot of the left column, level with the last point, so the quiet price is read after the offer, not straight after its name. */
.offer{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto 1fr;column-gap:var(--space-16);row-gap:var(--space-6);padding:var(--space-8) 0}
.offer+.offer{border-top:var(--hairline) solid var(--mist)}
.offer>.h3{grid-column:1;grid-row:1}
.offer-text{grid-column:2;grid-row:1/span 2}
.offer-text p{max-width:34rem}
.offer-points{list-style:none;margin:var(--space-6) 0 0;padding:0}
.offer-points li{padding:var(--space-1) 0;font-size:15px;text-wrap:balance} /* one to three lines: balance, so no long word sits alone */
.offer-points li+li{margin-top:var(--space-1)} /* 12 px between points, so wrapped points stay apart without hairlines */
/* The bottom padding matches the last point's (4 px), so the link's baseline sits level with the last point's. */
.offer-side{grid-column:1;grid-row:2;align-self:end;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-4);padding-bottom:var(--space-1)}

/* ---------- Photo between FAQ and Kontakt ---------- */
/* On the 5/7 key line: the photo fills the text column (full width up to 900 px), 4:3, no caption. FAQ's bottom padding
   is the space above it, the same space follows below it, then the one hairline that opens Kontakt. */
.photo-break{padding-bottom:var(--section)}
.photo-break .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--space-16)}
.photo-break .photo{grid-column:2;aspect-ratio:21/9}
.photo-break+.section{border-top:var(--hairline) solid var(--mist)}

/* ---------- LineChart: ink up to the dotted line, signal above ---------- */
.chart{margin:0}
.chart .label{margin-bottom:var(--space-8);max-width:30rem}
.line{--base:160px;--unit:8px;position:relative;display:flex;align-items:flex-end;gap:var(--space-6);border-bottom:var(--rule) solid var(--ink)}
.line::after{content:"";position:absolute;left:0;right:0;bottom:calc(var(--base) + 1px);border-top:var(--rule) dotted var(--ink)}
.line-bar{flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:flex-end}
.line-value{padding-bottom:var(--space-2);font:600 20px/1 var(--font-sans);letter-spacing:-.02em;white-space:nowrap;font-variant-numeric:tabular-nums}
.line-cap{height:calc(var(--above,0) * var(--unit));background:var(--signal)}
.line-base{height:calc(var(--base) - var(--below,0) * var(--unit));margin-top:var(--space-1);background:var(--ink)}
.line-names{display:flex;gap:var(--space-6);padding-top:var(--space-3)}
.line-names>*{flex:1 1 0;min-width:0;font:600 15px/1.35 var(--font-sans);font-variant-numeric:tabular-nums}
.line-names small{display:block;font:400 13px/1.45 var(--font-sans);color:var(--ash)}
.line-ref{display:flex;justify-content:flex-end;margin-bottom:var(--space-2)}
.chart .source{margin-top:var(--space-4);max-width:30rem}

/* ---------- TickRule (blog posts: close-rule) ---------- */
.ticks{position:relative;display:grid;grid-template-columns:repeat(4,1fr);border-bottom:var(--rule) solid var(--ink);margin-bottom:var(--space-8)}
.ticks i{height:var(--space-2);border-left:var(--hairline) solid var(--ink)}
.ticks::after{content:"";position:absolute;left:calc(var(--at,0) * 1% - 7px);bottom:-8px;width:14px;height:14px;border:var(--rule) solid var(--ink);border-radius:50%;background:var(--paper)}

/* ---------- About ---------- */
.about{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-16);align-items:start}
.about .photo{aspect-ratio:4/5}
@media (min-width:768px) and (min-height:720px){.about .photo{position:sticky;top:calc(var(--header) + var(--hairline) + var(--space-12))}}
@media (min-width:768px){.about>div>.label:first-child{text-box:trim-start cap alphabetic}}
.about .table{margin-top:var(--space-8)}
.pbs-label{margin-top:var(--space-8);margin-bottom:var(--space-3)}
.pbs-label+.table{margin-top:0}
.pb-link{margin-top:var(--space-4);font-size:15px}

/* ---------- Writing ---------- */
.posts{list-style:none;margin:0;padding:0;border-top:var(--rule) solid var(--ink);border-bottom:var(--rule) solid var(--ink)}
.post{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto 1fr;align-items:start;column-gap:var(--space-16);row-gap:var(--space-2);padding:var(--space-6) 0;border-top:var(--hairline) solid var(--mist)}
.post:first-child{border-top:0}
.post>.label{grid-column:1;grid-row:1}
.post>div:nth-child(2){grid-column:2;grid-row:1/span 2}
.post .h3 a{text-decoration:none}
@media (hover:hover) and (pointer:fine){.post .h3 a:hover{text-decoration:underline;text-decoration-thickness:var(--rule);text-underline-offset:.18em}}
.post p{margin-top:var(--space-2);color:var(--ash);font-size:17px;max-width:36rem}
.post-meta{grid-column:1;grid-row:2}
.post-lang{display:block} /* "In German" under the date, so the meta column on phones is no wider than the date */
.posts-empty{padding:var(--space-6) 0;color:var(--ash)}
/* The Texte section and the links to blog/ until the first post has a date (site.js); a display rule must never show them. */
[data-needs-posts][hidden]{display:none}

/* ---------- FAQ ---------- */
/* Heading left, list right on the 5/7 key line; below 901 px the list takes the full width. */
@media (min-width:901px){
  #faq .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-16);align-items:start}
  #faq .head{margin-bottom:0}
  #faq .head .h2{text-box:trim-start cap alphabetic}
}
.faq{border-top:var(--rule) solid var(--ink);border-bottom:var(--rule) solid var(--ink)}
.faq details+details{border-top:var(--hairline) solid var(--mist)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-6);padding:var(--space-4) 0;font-size:20px;line-height:1.35;font-weight:600;letter-spacing:-.01em;text-wrap:balance}
.faq summary::-webkit-details-marker{display:none}
/* Open / close is said in words (no triangle). The "/ ''" alt text keeps the word out of the accessible name; <details> already reports the state. */
.faq summary::after,.legal summary::after{content:"Öffnen";content:"Öffnen" / "";flex:none;font-size:15px;font-weight:500;letter-spacing:0;color:var(--ash)}
/* The label keeps the width of the longer word (Schliessen / Close), so opening a question never re-wraps it. */
.faq summary::after{min-width:2.75em;text-align:right}
html[lang="de"] .faq summary::after{min-width:5.25em}
html[lang="en"] .faq summary::after,html[lang="en"] .legal summary::after{content:"Open";content:"Open" / ""}
.faq details[open] summary::after,.legal details[open] summary::after{content:"Schliessen";content:"Schliessen" / ""}
html[lang="en"] .faq details[open] summary::after,html[lang="en"] .legal details[open] summary::after{content:"Close";content:"Close" / ""}
@media (hover:hover) and (pointer:fine){.faq summary:hover,.legal summary:hover{text-decoration:underline;text-decoration-thickness:var(--hairline);text-underline-offset:.22em}}
.faq details p{padding-bottom:var(--space-6);max-width:36rem}

/* ---------- Contact (white) ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-16);align-items:start}
.contact-grid .lead{margin-top:var(--space-6)}
.mail{display:inline-block;margin-top:var(--space-8);font-size:20px}
.form{display:grid;gap:var(--space-6)}
.form fieldset{border:0;margin:0;padding:0;min-width:0}
.form legend,.field>label{display:block;padding:0;margin-bottom:var(--space-2);font-size:15px;line-height:1.4;font-weight:500;color:var(--ink)}
.opt{color:var(--ash);font-weight:400}
.options{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.options input{position:absolute;opacity:0;pointer-events:none}
.options label{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--space-4);border:var(--hairline) solid var(--ink);font-size:15px;font-weight:500;cursor:pointer;user-select:none}
/* Selected: quiet fill and a 2 px ink edge (inset ring as on invalid fields). Same weight, so the chips never re-wrap. */
.options input:checked+label{background:var(--fog);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.options input:focus-visible+label{outline:var(--rule) solid var(--ink);outline-offset:3px}
.field{display:flex;flex-direction:column;min-width:0}
.field input,.field textarea{width:100%;min-height:var(--control);margin:0;padding:0 var(--space-4);border:var(--hairline) solid var(--ink);border-radius:0;background:var(--paper);color:var(--ink);font:400 17px/1.4 var(--font-sans);-webkit-appearance:none;appearance:none}
.field textarea{min-height:144px;padding:var(--space-3) var(--space-4);resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--ash);opacity:1}
.field input:focus-visible,.field textarea:focus-visible{outline:var(--rule) solid var(--ink);outline-offset:3px}
.field [aria-invalid="true"]{box-shadow:inset 0 0 0 1px var(--ink)}
.hint{margin-top:var(--space-2);font-size:13px;line-height:1.5;color:var(--ash)}
.error{margin-top:var(--space-2);font-size:15px;line-height:1.4;font-weight:600;color:var(--ink)}
.error:empty{display:none}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6)}
/* Label, input and hint share rows across both columns, so the inputs stay level when one label wraps (tablets, EN). */
@media (min-width:768px){.row2{grid-template-rows:repeat(3,auto);row-gap:0}.row2 .field{display:grid;grid-row:span 3;grid-template-rows:subgrid}}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4) var(--space-6)}
.form-foot .small{max-width:24rem}
/* Wide enough for «Wird gesendet …» (186 px), so the button does not grow while sending and the note beside it stays put. */
.form-foot .button{min-width:11.75rem}
.form[hidden]{display:none}
/* While the enquiry is being sent the button is disabled and says so; it keeps its colours (no tints). */
.button:disabled{cursor:progress}
@media (hover:hover) and (pointer:fine){.button:disabled:hover{background:var(--ink);color:var(--paper)}}
/* Sending failed: the address and the copy button, below a hairline under the button. */
.send-fail{border-top:var(--hairline) solid var(--mist);padding-top:var(--space-4);scroll-margin-bottom:var(--space-8)}
.send-fail[hidden]{display:none}
.send-fail p{margin-bottom:var(--space-3)}
.send-fail-actions{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-3) var(--space-8)}
.send-fail-actions .link{overflow-wrap:anywhere}
.send-fail .copy-note{margin:0;max-width:36rem;scroll-margin-bottom:var(--space-8)}
.send-fail .copy-note:not(:empty){margin-top:var(--space-3)}
/* Sent: the confirmation takes the form's place in the right-hand column. */
.send-ok{border-top:var(--hairline) solid var(--mist);padding-top:var(--space-4);scroll-margin-bottom:var(--space-8)}
.send-ok[hidden]{display:none}
.send-ok p{max-width:36rem}
.send-ok .lead{margin-top:0} /* set like the lead, without the lead's top margin in the contact grid */
/* From 901 px: level with the heading «Melde dich.», no rule. */
@media (min-width:901px){.send-ok{border-top:0;padding-top:0}}

/* ---------- Footer (the one black section) ---------- */
.site-footer{padding-block:var(--space-12)}
/* The links move below the logo as one line when they do not fit beside it (the blog pages list eight). */
.footer-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:var(--space-8)}
@media (min-width:768px){.footer-top{align-items:center}}
.footer-top img{height:28px;width:auto}
.footer-links{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-6);font-size:15px}
.footer-links a{text-decoration:none;font-weight:500}
@media (hover:hover) and (pointer:fine){.footer-links a:hover{text-decoration:underline;text-underline-offset:.22em}}
/* Home page on phones: four links in two columns (2 + 2); once Texte shows, five in three (3 + 2). Never a lone «Kontakt». The blog pages and 404 list more. */
@media (max-width:479px){[data-page="home"] .footer-links{display:grid;grid-template-columns:repeat(2,max-content)} [data-page="home"] .footer-links:has(>[data-needs-posts]:not([hidden])){grid-template-columns:repeat(3,max-content)}}
.legal{margin-top:var(--space-12);border-top:var(--hairline) solid var(--mist)}
.legal details{border-bottom:var(--hairline) solid var(--mist)}
.legal summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:var(--space-6);padding:var(--space-3) 0;font-size:15px;font-weight:500}
.legal summary::-webkit-details-marker{display:none}
.legal .legal-body{padding-bottom:var(--space-4);max-width:var(--measure);font-size:15px;line-height:1.5;color:var(--ash)}
.legal .legal-body p+p{margin-top:var(--space-3)}
.copyright{margin-top:var(--space-6)}

/* ---------- Article pages ---------- */
.article{padding-top:var(--space-16);padding-bottom:var(--space-24)}
.article-head{max-width:var(--measure)}
.article-head .label{margin-bottom:var(--space-4)}
.article-head .lead{margin-top:var(--space-6);text-wrap:pretty} /* not balance: the blog and post leads break at the sentence end */
.prose{max-width:var(--measure);margin-top:var(--space-12)}
.prose p{margin:0 0 var(--space-4)}
.prose>p:not(.note){max-width:36rem}
.prose h2{font-size:28px;line-height:1.15;font-weight:600;letter-spacing:-.015em;margin:var(--space-12) 0 var(--space-4)}
.prose figure{margin:var(--space-12) 0}
.prose .table th[scope=row]{width:auto}
.prose ol.sources{margin:var(--space-4) 0 0;padding-left:1.2em;font-size:13px;line-height:1.5;color:var(--ash)}
.prose .note{padding:var(--space-4) 0;border-top:var(--hairline) solid var(--mist);border-bottom:var(--hairline) solid var(--mist);margin:var(--space-8) 0;color:var(--ash);font-size:15px}
.back{margin-bottom:var(--space-4)}
.close-rule{margin-top:var(--space-16)}
.close-rule .ticks{grid-template-columns:repeat(8,1fr);margin-bottom:0}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,.7fr);gap:var(--space-12)}
  .about,.contact-grid,#faq .wrap{gap:var(--space-12)}
  .offer,.post,.photo-break .wrap{column-gap:var(--space-12)}
}
/* Header: the full nav fits down to 1024 px; below that the menu button takes over. */
@media (max-width:1023px){
  .menu-btn{display:block;margin-left:auto;min-height:44px}
  .tools{display:none}
  .nav{display:none;position:absolute;top:var(--header);left:0;right:0;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:var(--space-2) var(--gutter) var(--space-6);background:var(--paper);border-bottom:var(--rule) solid var(--ink);max-height:calc(100vh - var(--header));max-height:calc(100dvh - var(--header));overflow-y:auto;overscroll-behavior:contain}
  .nav.open{display:flex}
  .nav a{padding:var(--space-4) 0;border-bottom:var(--hairline) solid var(--mist);font-size:17px}
  .nav a[aria-current]{border-bottom-color:var(--mist);text-decoration:underline;text-decoration-thickness:var(--rule);text-underline-offset:.22em}
  .nav-lang{display:flex;padding-top:var(--space-4)}
  .nav-lang a[data-lang-link]{padding:var(--space-3) 2px}
  .nav .nav-contact{display:block}
}
/* Tablet portrait and phones: Offers, FAQ, Contact and the About facts stack, and the race photo takes the full width. */
@media (max-width:900px){
  .offer{grid-template-columns:minmax(0,1fr);grid-template-rows:none;gap:var(--space-4)}
  .offer>.h3,.offer-text,.offer-side{grid-column:auto;grid-row:auto}
  .offer-side{gap:var(--space-2);padding-bottom:0}
  .photo-break .wrap{grid-template-columns:minmax(0,1fr)}
  .photo-break .photo{grid-column:auto}
  .contact-grid{grid-template-columns:minmax(0,1fr)}
  /* About facts: label above value from 900 px down, where the text column is too narrow for the 11rem label column
     (values would split, e.g. "Trainer C"). The PB table keeps two columns. */
  #ueber-mich .table:not(.pbs),#ueber-mich .table:not(.pbs) tbody,#ueber-mich .table:not(.pbs) tr,#ueber-mich .table:not(.pbs) th,#ueber-mich .table:not(.pbs) td{display:block;width:auto}
  #ueber-mich .table:not(.pbs) tr{padding:var(--space-4) 0}
  #ueber-mich .table:not(.pbs) tr+tr{border-top:var(--hairline) solid var(--mist)}
  #ueber-mich .table:not(.pbs) th,#ueber-mich .table:not(.pbs) td{padding:0;border:0}
  #ueber-mich .table:not(.pbs) th{font-size:15px;line-height:1.4;font-weight:500;color:var(--ash);margin-bottom:var(--space-1)}
}
@media (max-width:767px){
  :root{--gutter:var(--space-6);--section:var(--space-16);--header:64px}
  body{font-size:17px}
  .display{font-size:44px;line-height:1.05;letter-spacing:-.025em}
  .h1{font-size:36px;line-height:1.1;letter-spacing:-.02em}
  .h2{font-size:28px;line-height:1.15;letter-spacing:-.015em}
  .h3{font-size:22px}
  .hero-number{font-size:72px}
  .lead{font-size:20px}
  .site-header .wrap{gap:var(--space-4)}
  .hero{padding-top:var(--space-12);padding-bottom:var(--space-12)}
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:var(--space-12)}
  .actions{margin-top:var(--space-8)}
  .head{margin-bottom:var(--space-8)}
  .about{grid-template-columns:minmax(0,1fr)}
  .mail{max-width:100%;overflow-wrap:anywhere} /* safety net on phones: the address may break rather than scroll sideways */
  .line{gap:var(--space-3)}
  .line-names{gap:var(--space-3)}
  .line-value{font-size:17px}
  .line-names>*{font-size:13px}
  .offer{padding:var(--space-6) 0}
  /* Topic left and status or date right on one line, then the title. */
  .post{grid-template-columns:minmax(min-content,1fr) auto;grid-template-rows:none;gap:var(--space-2) var(--space-4)} /* a long topic keeps its width; the date wraps instead */
  .post>div:nth-child(2){grid-column:1 / -1;grid-row:2}
  .post-meta{grid-column:2;grid-row:1;text-align:right}
  .faq summary{font-size:18px}
  .row2{grid-template-columns:1fr}
  .footer-top{flex-direction:column}
  .article{padding-top:var(--space-12)}
  .prose h2{font-size:24px;line-height:1.2;letter-spacing:-.01em}
}
@media (max-width:374px){:root{--gutter:var(--space-4)} .mail{font-size:18px} .display{font-size:42px}} /* the two-line headline fits at 320 px */
@media (max-width:395px){html[lang="en"] .display{font-size:calc((100vw - 2 * var(--gutter)) / 8.1)}} /* English: two lines on phones («Running coaching | and lactate testing») */
@media (max-width:359px){.logo img{height:28px}}
/* Without JavaScript the menu button would do nothing: hide it. DE/EN are plain links and stay (in the header from 1024 px), as do the footer links and the Kontakt link. */
@media (scripting:none){.menu-btn{display:none}}
/* Without JavaScript the phone menu (and its DE/EN links) is gone: below 1024 px the footer offers the other language instead. */
.footer-lang{display:none}
@media (scripting:none) and (max-width:1023px){.footer-lang{display:flex}}

/* ---------- Touch targets ---------- */
/* ~44 px hit areas on touch; neighbours never overlap. */
@media (pointer:coarse){
  .logo{padding-block:6px;margin-block:-6px}
  .actions .link,.offer-side .link,.pb-link .link,.mail,.send-fail-actions .link,.footer-links a{position:relative}
  .actions .link::after,.offer-side .link::after,.pb-link .link::after,.mail::after{content:"";position:absolute;inset:-10px -6px}
  .send-fail-actions .link::after{content:"";position:absolute;inset:-6px}
  .footer-links a::after{content:"";position:absolute;inset:-6px -12px}
}

/* ---------- Motion and interaction (CLAUDE.md) ---------- */

/* No :active on <summary>: iOS would flash it while scrolling. */
.button,.options label{transition:transform var(--t-press) var(--ease-out)}
.button:active,.options label:active{transform:scale(.97)}
a:not(.button,.skip),.link,.menu-btn{transition:color var(--t-fast) var(--ease-out)}
a:not(.button,.skip):active,.link:active,.menu-btn:active{color:var(--ash);transition-duration:0s}
.link:active{text-decoration-thickness:var(--rule)}
.post .h3 a:active{text-decoration:underline;text-decoration-thickness:var(--rule);text-underline-offset:.18em}
.footer-links a:active{text-decoration:underline;text-underline-offset:.22em}
.lang a[data-lang-link]:active{color:var(--ink)}
@media (min-width:1024px){.nav a:active{border-bottom-color:var(--ink)}}
@media (max-width:1023px){.nav a:not([data-lang-link]):active{text-decoration:underline;text-decoration-thickness:var(--rule);text-underline-offset:.22em}}

/* Phone menu; .instant (site.js) skips the transition. */
@media (max-width:1023px){
  .nav{clip-path:inset(0 0 100% 0);transition:clip-path var(--t-fast) var(--ease-out),display var(--t-fast) allow-discrete}
  .nav.open{clip-path:inset(0);transition-duration:var(--t-base)}
  @starting-style{.nav.open{clip-path:inset(0 0 100% 0)}}
  .nav.instant{transition:none}
}

/* FAQ and footer answers; .instant (site.js) skips it. */
@supports (interpolate-size:allow-keywords) and selector(::details-content){
  .faq details,.legal details{interpolate-size:allow-keywords}
  .faq details::details-content,.legal details::details-content{block-size:0;overflow:clip;opacity:0;
    transition:block-size var(--t-fast) var(--ease-out),opacity var(--t-press) var(--ease-out),content-visibility var(--t-fast) allow-discrete}
  .faq details[open]::details-content,.legal details[open]::details-content{block-size:auto;opacity:1;transition-duration:var(--t-base)}
  details.instant::details-content{transition:none}
}

.error{transition:opacity var(--t-fast) var(--ease-out),translate var(--t-fast) var(--ease-out)}
@starting-style{.error{opacity:0;translate:0 calc(-1 * var(--move))}}

/* animation-timeline must follow the shorthand. */
@supports (animation-timeline:scroll()){
  .site-header{border-bottom-color:transparent;animation:header-edge linear both;animation-timeline:scroll(root);animation-range:0 var(--space-6)}
  @keyframes header-edge{to{border-bottom-color:var(--mist)}}
}

/* Photo reveal (site.js arms it). */
.photo.reveal{clip-path:inset(0 0 100% 0)}
.photo.reveal.in{clip-path:inset(0);transition:clip-path var(--t-reveal) var(--ease-out)}

/* Smooth scrolling starts after load (site.js adds the class), so arriving at #kontakt or #impressum from another page jumps straight to the target. */
@media (prefers-reduced-motion:no-preference){html.smooth-scroll{scroll-behavior:smooth}}

/* ---------- Print ---------- */
@media print{.site-header,.legal{display:none}.is-dark{--paper:#fff;--ink:#08090a;--ash:#62666d;--mist:#d0d6e0}.photo.reveal{clip-path:none}}

/* ---------- Forced colours and contrast ---------- */
/* Windows contrast themes replace the fills: keep the selected topic visible. */
@media (forced-colors:active){.options input:checked+label{forced-color-adjust:none;background:Highlight;color:HighlightText;border-color:Highlight}}
@media (forced-colors:active){
  .line-cap,.line-base{forced-color-adjust:none}
  .line-base{background:CanvasText}
  .line-cap{background:Highlight}
  .field [aria-invalid="true"]{outline:var(--hairline) solid CanvasText;outline-offset:calc(-1 * var(--rule))}
}
@media (forced-colors:active) and (min-width:1024px){
  .nav a{border-bottom-color:Canvas}
  .nav a[aria-current]{border-bottom-color:LinkText}
}
@media (prefers-contrast:more){
  :root{--mist:var(--ash)}
  .is-dark{--mist:var(--ash)}
}

/* ---------- Reduced motion (last, so it wins at equal specificity) ---------- */
@media (prefers-reduced-motion:reduce){
  :root{--move:0px}
  @media (max-width:1023px){
    .nav{clip-path:none;opacity:0;transition:opacity var(--t-fast) var(--ease-out),display var(--t-fast) allow-discrete}
    .nav.open{opacity:1}
    @starting-style{.nav.open{opacity:0}}
  }
  .photo.reveal{clip-path:none}
}
/* Only where the accordion animates; :not(.instant) keeps toggles instant. */
@supports (interpolate-size:allow-keywords) and selector(::details-content){
  @media (prefers-reduced-motion:reduce){
    .faq details:not(.instant)::details-content,.legal details:not(.instant)::details-content{transition:opacity var(--t-fast) var(--ease-out),content-visibility var(--t-fast) allow-discrete}
  }
}