/* ===========================================================================
   Adapto — "Datenblatt" (Data Sheet) design system
   ---------------------------------------------------------------------------
   Second attempt, recorded on 2026-08-10 in
   docs/superpowers/specs/2026-08-10-auftritt-2-datenblatt.md. The predecessor,
   "Klartext" (Plain Text), had chosen paper, hairlines and load-bearing
   typography correctly and failed on something else entirely: it had a tone
   where it needed values. Guiding principle now: every section names a
   number or shows a thing. Where neither a number nor a thing is present,
   the section is dropped.

   Color and material come from the device, not from taste: the appliance is
   matte black, its labeling orange, the antenna sockets brass-colored. Navy
   stays ink and large surfaces, but leans toward anthracite so it reads as
   the same family next to the device's black. All color pairs are checked
   with a contrast calculator, not chosen by eye.

   Typeface: Geist for everything set as running text, Geist Mono for
   numbers, identifiers and label lines. Instrument Serif italic appears
   exactly once on the whole home page -- see the note on `.kursiv`. All font
   files are local; no call to Google goes out while the page builds. */

/* --- Fonts ----------------------------------------------------------------- */

@font-face {
  font-family: 'Geist';
  src: url('/static/fonts/Geist-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('/static/fonts/Geist-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('/static/fonts/Geist-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('/static/fonts/Geist-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('/static/fonts/GeistMono-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('/static/fonts/GeistMono-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('/static/fonts/InstrumentSerif-Italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}

/* --- Color values ----------------------------------------------------------- */

:root {
  color-scheme: light dark;

  --papier: #F8F7F4;
  --papier-tief: #EFEDE7;
  --papier-karte: #FFFFFF;
  --tinte: #0B0E13;
  --tinte-weich: #48505C;
  --tinte-leise: #636B79;
  --navy: #13263C;
  --navy-hell: #21507F;
  --navy-flaeche: #0C1725;
  --auf-navy: #F5F8FC;
  /* Two shades of orange, because one shade can't do both: --signal is used
     for text and therefore has to hold 4.5:1 against paper and tinted paper;
     --signal-hell is only ever used as a fill (status cells, the flag over
     the tariff, the brand mark) and can therefore be the lighter shade of the
     device's labeling, at 3:1 against the same surfaces. All values checked
     with a calculator, not chosen by eye. */
  --signal: #B63D0C;
  --signal-hell: #E05A0D;
  --signal-flaeche: #FAEAE0;
  --gut: #0F7B52;
  --gut-flaeche: #E7F5EE;
  --warn: #8A5100;
  --warn-flaeche: #FDF3E2;
  --linie: #E0DCD3;
  --linie-stark: #B8B1A4;
  --fokus: #21507F;
  --knopf-flaeche: #0C1725;
  /* The consistently dark surface stays dark in both color schemes --
     hence its own values instead of --navy-flaeche/--auf-navy, which swap
     roles in dark mode. The value is the device's black: the dark sections
     and the appliance photo inside them sit on the same surface, so the
     photo doesn't read as a separate tile. */
  --dunkel-flaeche: #0A0D12;
  --auf-dunkel: #EDEFF2;
  --schatten: 11 14 19;

  --schrift: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --schrift-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --schrift-serif: 'Instrument Serif', Georgia, serif;

  --rand: clamp(1.25rem, 5vw, 4.5rem);
  --bahn: 1420px;
  --radius: 4px;
  --radius-gross: 8px;

  --takt: 200ms;
  --kurve: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* The dark version isn't a darkened copy of the light one, but its own set
   of values: navy becomes the light-colored text, the surfaces turn nearly
   black-blue, and the button surface inverts. */
@media (prefers-color-scheme: dark) {
  :root:not([data-thema='light']) {
    --papier: #080B10;
    --papier-tief: #0E1219;
    --papier-karte: #12171F;
    --tinte: #EDF0F4;
    --tinte-weich: #A2ABB8;
    --tinte-leise: #79828F;
    --navy: #7FB0EE;
    --navy-hell: #9EC5F7;
    --navy-flaeche: #0E1926;
    --auf-navy: #060C14;
    --signal: #FF8A4C;
    --signal-hell: #FF9A5E;
    --signal-flaeche: #2A1308;
    --gut: #4ADE9E;
    --gut-flaeche: #0B2019;
    --warn: #E8B057;
    --warn-flaeche: #241B08;
    --linie: #1D232C;
    --linie-stark: #363F4A;
    --fokus: #7FB0EE;
    --knopf-flaeche: #7FB0EE;
    --dunkel-flaeche: #0A0D12;
    --auf-dunkel: #EDEFF2;
    --schatten: 0 0 0;
  }
}

:root[data-thema='dark'] {
  --papier: #080B10;
  --papier-tief: #0E1219;
  --papier-karte: #12171F;
  --tinte: #EDF0F4;
  --tinte-weich: #A2ABB8;
  --tinte-leise: #79828F;
  --navy: #7FB0EE;
  --navy-hell: #9EC5F7;
  --navy-flaeche: #0E1926;
  --auf-navy: #060C14;
  --signal: #FF8A4C;
  --signal-hell: #FF9A5E;
  --signal-flaeche: #2A1308;
  --gut: #4ADE9E;
  --gut-flaeche: #0B2019;
  --warn: #E8B057;
  --warn-flaeche: #241B08;
  --linie: #1D232C;
  --linie-stark: #363F4A;
  --fokus: #7FB0EE;
  --knopf-flaeche: #7FB0EE;
  --dunkel-flaeche: #0A0D12;
  --auf-dunkel: #EDEFF2;
  --schatten: 0 0 0;
}

/* --- Basics ---------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.06;
  text-wrap: balance;
}

/* The maximum used to sit at 4.9rem, until 2026-08-10. That's the right
   size for a three-word English headline and the wrong one for
   "Business-Internet, das schon eingerichtet ankommt." (Business internet
   that arrives already set up): the heading ran to four lines and pushed
   everything else out of the first screen. German headlines are long, so
   the maximum is smaller. */
h1 { font-size: clamp(2.2rem, 4vw, 3.5rem); letter-spacing: -0.038em; }
h2 { font-size: clamp(1.85rem, 3.4vw, 2.9rem); }
h3 { font-size: clamp(1.1rem, 1.6vw, 1.35rem); letter-spacing: -0.022em; }

p { margin: 0; text-wrap: pretty; }
a { color: inherit; }

/* The italic serif word is the brand's typographic signature.
   **Exactly once per page**, in the first heading -- not "at most one word
   per heading", as it said here until 2026-08-10. That wording was an
   invitation to the mistake: it allows six italic words on a page with six
   headings, and that's exactly what ended up there. A signature that
   appears in every heading is no longer a signature, but a template being
   worked through -- and templates worked through are exactly what makes a
   page look "generated".

   Sanity check before shipping: `rg -c kursiv portal/templates/index.html`
   must return 1. */
.kursiv {
  font-family: var(--schrift-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.005em;
}

.zahl { font-variant-numeric: tabular-nums; }

:focus-visible {
  outline: 2px solid var(--fokus);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--navy); color: var(--auf-navy); }

.nur-fuer-screenreader {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.sprung {
  position: absolute; left: var(--rand); top: -100px; z-index: 100;
  background: var(--navy-flaeche); color: var(--auf-navy);
  padding: 0.75rem 1.25rem; border-radius: var(--radius);
  font-weight: 500; text-decoration: none;
  transition: top var(--takt) var(--kurve);
}
.sprung:focus { top: 1rem; }

/* --- Grid -------------------------------------------------------------------- */

.bahn {
  width: 100%;
  max-width: var(--bahn);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.bahn--eng { max-width: 62rem; }

.raster {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.spalte-4 { grid-column: span 4; }
.spalte-3 { grid-column: span 3; }

/* Below this width, a twelve-column grid no longer makes sense: a column
   of about 30 pixels can't carry text, and the content pushes the page
   sideways. So we stack instead. */
@media (max-width: 900px) {
  .raster > * { grid-column: 1 / -1; min-width: 0; }
}

/* --- Micro-label ------------------------------------------------------------- */

.marke {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--schrift-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinte-leise);
}

.marke__nr { color: var(--signal); }

.marke::after {
  content: '';
  flex: 1;
  height: 1px;
  min-width: 2rem;
  background: var(--linie);
}

.marke--kurz { display: inline-flex; }
.marke--kurz::after { display: none; }

/* Icons inside a label line need an explicit size -- without one, the SVG
   scales to the full line width. */
.marke svg { width: 15px; height: 15px; flex: none; }

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

.kopf {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--papier) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--takt) var(--kurve), background var(--takt) var(--kurve);
}

.kopf[data-gescrollt='ja'] {
  border-bottom-color: var(--linie);
  background: color-mix(in srgb, var(--papier) 96%, transparent);
}

.kopf__innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.5rem;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--tinte);
}

.logo__wort { font-size: 1.3rem; font-weight: 600; letter-spacing: -0.045em; }

/* The brand mark: five cells, drawn in `_icons.html`. It's square and gets
   its size set here -- without one the SVG scales to the full line width.
   The height follows the cap height of the wordmark next to it, so the mark
   and the word sit on the same line. */
.zeichen { width: 1.02em; height: 1.02em; flex: none; }

/* The brand mark in the header and footer. Two very different things land
   in this slot: the built-in SVG, which is square, and whatever the company
   publishes, which is not -- the mark published on 2026-08-14 is 320x86.
   A fixed square with the default `object-fit: fill` squashed that into an
   18x18 smudge (finding B-11). So the height is fixed, the width follows
   the image, and `object-fit: contain` keeps the proportions whatever
   arrives. The max-width stops a very wide mark from pushing the wordmark
   off a narrow header. */
.logo .zeichen { width: 1.15rem; height: 1.15rem; }
/* A published mark is sized on its own terms, not on the wordmark's. It
   stands alone in the header (the word beside it is hidden when one
   exists, see base.html), so it has to carry the company name legibly --
   at the cap height of a word that is no longer there it rendered as a
   smudge. `width: auto` plus `object-fit: contain` keep a wide mark from
   being stretched, and `max-width` keeps it from pushing the navigation
   off the line. */
.logo img.zeichen {
  width: auto;
  height: 2.4rem;
  max-width: 12rem;
  object-fit: contain;
}

.logo__zusatz {
  font-family: var(--schrift-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  margin-left: 0.55rem;
  padding-left: 0.8rem;
  border-left: 1px solid var(--linie);
}

.kopf__weg { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }

.kopf__weg a {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--tinte-weich);
  text-decoration: none;
  /* Five items now, and three of them are two words. Without this, "So
     läuft es ab" breaks across two lines inside its own slot at 1024
     pixels and the row reads as a paragraph. The row may run out of
     space; a single label may not fall apart. */
  white-space: nowrap;
  transition: color var(--takt) var(--kurve);
}
.kopf__weg a:hover { color: var(--tinte); }

.kopf__aktion { display: flex; align-items: center; gap: 0.6rem; }

/* The internal area, from `/intern` down: a back office, and it says so
   by its layout. An operator moves between areas instead of reading one
   page and leaving, and all four tools this links to (ERPNext, n8n,
   Paperclip, Helpdesk) put their navigation on the left -- so from 900
   pixels up the way between the pages is a rail beside the content.

   Below 900 pixels it falls back to the wrapping bar above the content it
   was before. Not a drawer: a drawer needs a script to open, and a
   navigation that only appears after a script has run is the kind of
   mechanism this project has been bitten by twice. */
.verwaltung {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  align-items: start;
}

/* The login form and the locked page have no rail -- there is nothing to
   navigate to yet, and naming the internal consoles there would hand out
   the map to whoever asks for the URL. */
.verwaltung--allein { grid-template-columns: minmax(0, 1fr); }

/* `align-self: start`, not `stretch`: a sticky element as tall as the
   thing it sits beside has nowhere to stick to and simply scrolls away.
   The screen-height minimum is what keeps the hairline running down the
   page rather than ending under the last link. */
.intern-weg {
  position: sticky;
  top: 4.5rem;
  align-self: start;
  border-right: 1px solid var(--linie);
  padding: 1.75rem 0 2rem;
  min-height: calc(100vh - 4.5rem);
  max-height: calc(100vh - 4.5rem);
  overflow-y: auto;
}

.intern-weg__gruppe {
  margin: 0 0 0.6rem;
  padding-inline: 1.5rem;
  font-family: var(--schrift-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinte-leise);
}

.intern-weg__liste {
  margin: 0 0 1.75rem;
  padding: 0;
  list-style: none;
}

.intern-weg__liste:last-child { margin-bottom: 0; }

/* Styled like a link, because that is what it is to whoever uses it. It
   stays a form and a button: signing out changes something on the server
   and so must not be reachable by a link a browser may prefetch. */
.intern-weg__raus { margin-top: 0.5rem; }

.intern-weg__raus button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding-inline: 1.5rem;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--tinte-leise);
  cursor: pointer;
  text-align: left;
  transition: color var(--takt) var(--kurve), background var(--takt) var(--kurve);
}

.intern-weg__raus button:hover { color: var(--tinte); background: var(--papier-tief); }

.intern-weg a {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding-inline: 1.5rem;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--tinte-weich);
  text-decoration: none;
  transition: color var(--takt) var(--kurve), background var(--takt) var(--kurve);
}

.intern-weg a:hover { color: var(--tinte); background: var(--papier-tief); }

/* The same mark the documentation page puts beside its current section: a
   line in the signal color, drawn from `aria-current` so the eye and a
   screen reader read the same state. */
.intern-weg a[aria-current='page'] {
  color: var(--tinte);
  background: var(--papier-tief);
  box-shadow: inset 3px 0 0 var(--signal-hell);
}

/* The arrow only on the links that leave the portal: those four open in
   their own tab, and that is worth knowing before the click. */
.intern-weg svg { width: 13px; height: 13px; flex: none; color: var(--tinte-leise); }

@media (max-width: 900px) {
  .verwaltung { grid-template-columns: minmax(0, 1fr); }

  .intern-weg {
    position: static;
    min-height: 0;
    max-height: none;
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid var(--linie);
    padding: 0;
  }

  .intern-weg__innen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: clamp(1rem, 2.2vw, 1.75rem);
    max-width: var(--bahn);
    margin-inline: auto;
    padding-inline: var(--rand);
  }

  /* The group labels are the rail's headings. In one wrapping line they
     would be two more things to read past, and what they separate is
     obvious from the arrows. Kept for screen readers, which still get the
     two lists by their `aria-labelledby`. */
  .intern-weg__gruppe {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .intern-weg__liste {
    display: flex;
    flex-wrap: wrap;
    column-gap: clamp(1rem, 2.2vw, 1.75rem);
    margin: 0;
  }

  .intern-weg a {
    padding-inline: 0;
    border-bottom: 2px solid transparent;
  }

  .intern-weg a:hover { background: transparent; }

  .intern-weg__raus { margin-top: 0; margin-left: auto; }
  .intern-weg__raus button { width: auto; padding-inline: 0; }
  .intern-weg__raus button:hover { background: transparent; }

  .intern-weg a[aria-current='page'] {
    background: transparent;
    box-shadow: none;
    border-bottom-color: var(--tinte);
  }
}

/* The wordmark's second line is decoration, and between 900 and 1100
   pixels the navigation needs those 90 pixels more than the page needs to
   say "Business-Internet" twice: the word is in the heading below it. */
@media (max-width: 1100px) {
  .logo__zusatz { display: none; }
}

@media (max-width: 900px) {
  .kopf__weg { display: none; }
}

/* Below 560 pixels, the wordmark, theme switcher, language switcher and
   "Check availability" no longer fit on one line: the header ran 62 pixels
   past the right edge and pushed the whole page sideways. Found by a check
   across four widths, not in the source -- in the source, this kind of
   thing isn't visible, because the German labeling is the cause, not the
   layout.

   It's the button that steps aside, not the language switcher: on the home
   page, "Check address" sits directly below in the first screen, so the
   button up here would be a duplicate. The other pages leave
   `header_action` empty anyway. */
@media (max-width: 560px) {
  .kopf__aktion > .knopf { display: none; }
}

.thema-schalter {
  display: inline-grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: transparent;
  color: var(--tinte-weich);
  cursor: pointer;
  transition: border-color var(--takt) var(--kurve), color var(--takt) var(--kurve);
}
.thema-schalter:hover { border-color: var(--linie-stark); color: var(--tinte); }
.thema-schalter svg { width: 18px; height: 18px; }

/* The visible icon is always the one for where the click leads. */
.thema-schalter .symbol-mond { display: block; }
.thema-schalter .symbol-sonne { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-thema='light']) .thema-schalter .symbol-mond { display: none; }
  :root:not([data-thema='light']) .thema-schalter .symbol-sonne { display: block; }
}
:root[data-thema='dark'] .thema-schalter .symbol-mond { display: none; }
:root[data-thema='dark'] .thema-schalter .symbol-sonne { display: block; }
:root[data-thema='light'] .thema-schalter .symbol-mond { display: block; }
:root[data-thema='light'] .thema-schalter .symbol-sonne { display: none; }

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

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3rem;
  padding: 0 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--takt) var(--kurve), border-color var(--takt) var(--kurve),
              color var(--takt) var(--kurve), transform var(--takt) var(--kurve);
}

.knopf svg { width: 17px; height: 17px; flex: none; }

.knopf--haupt { background: var(--knopf-flaeche); color: var(--auf-navy); }
.knopf--haupt:hover { background: var(--navy); transform: translateY(-1px); }
.knopf--haupt:active { transform: translateY(0); }

.knopf--rand { background: transparent; border-color: var(--linie-stark); color: var(--tinte); }
.knopf--rand:hover { border-color: var(--tinte); }

.knopf--leise { background: transparent; color: var(--tinte-weich); padding-inline: 0.75rem; }
.knopf--leise:hover { color: var(--tinte); }

.knopf--gross { min-height: 3.5rem; padding-inline: 2rem; font-size: 1.02rem; }
.knopf--breit { width: 100%; }

.knopf[disabled], .knopf[aria-disabled='true'] { opacity: 0.45; cursor: not-allowed; transform: none; }

.knopf-reihe { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

/* --- Hero (home page) ---------------------------------------------------------- */

.held {
  position: relative;
  padding-block: clamp(3rem, 7vw, 6rem) clamp(3rem, 6vw, 5.5rem);
  overflow: hidden;
}

/* Fine grid in the background: technical rather than decorative. It quotes
   graph paper and runs across the full width of the first screen -- until
   2026-08-10 it was masked to the top-left corner and read as an oversight
   rather than a decision (operator feedback: "why only top left?"). The
   mask now only fades it out toward the bottom, so it doesn't run into the
   fact strip's text. */
.held::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--linie) 1px, transparent 1px),
    linear-gradient(90deg, var(--linie) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.55;
  mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 96%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 96%);
  pointer-events: none;
}

/* Two columns, but not fifty-fifty: the text gets a bit more than half, the
   device a bit less, and runs off to the right past the content track in
   exchange. An object that projects past the edge reads as a thing in
   space; the same object with air all around it reads as a tile. */
.held__innen {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 4vw, 4rem);
}

.held h1 { margin-block: 1.4rem 0; }

.held__satz {
  margin-top: 1.6rem;
  max-width: 48ch;
  font-size: clamp(1.02rem, 1.35vw, 1.18rem);
  line-height: 1.55;
  color: var(--tinte-weich);
}

.held__aktionen { margin-top: 2.25rem; }

/* On the right of the hero sits the conversation with Ada (third round,
   spec 2026-08-10-auftritt-3): the card is the centerpiece of the page and
   therefore gets more weight than any other card -- a larger shadow, a navy
   border (see .gespraech). */
.held__seite { display: grid; gap: 0.9rem; align-content: center; }

/* The path to the form, one step behind the conversation: a link, not a
   second form. The full form lives in the Availability section -- two
   equally-weighted inputs on one screen were the mistake that the
   "Klartext" version had already fixed once before. */
.lieber-formular-verweis {
  justify-self: center;
  font-size: 0.88rem;
  color: var(--tinte-weich);
  text-decoration: underline;
  text-decoration-color: var(--linie-stark);
  text-underline-offset: 3px;
  transition: color var(--takt) var(--kurve);
}
.lieber-formular-verweis:hover { color: var(--navy); text-decoration-color: currentColor; }

@media (max-width: 1000px) {
  .held__innen { grid-template-columns: minmax(0, 1fr); }
  .held__seite { max-width: 32rem; }
}

/* --- Fact strip -------------------------------------------------------------
   A row of five values that closes off the bottom of the first screen.
   Scrollable horizontally instead of breaking into five lines on narrow
   screens: the row is meant to be a row -- you should see that there are
   five figures, even if you have to scroll to the last one. */
.faktenband {
  position: relative;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  background: color-mix(in srgb, var(--papier-tief) 55%, transparent);
}

.faktenband__innen {
  display: flex;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-block: 1.4rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.faktenband__innen::-webkit-scrollbar { display: none; }

.fakt {
  display: grid;
  gap: 0.15rem;
  flex: none;
  min-width: max-content;
}

.fakt b {
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  font-weight: 600;
  letter-spacing: -0.03em;
}

.fakt span {
  font-family: var(--schrift-mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--tinte-leise);
}

/* --- Language switcher --------------------------------------------------
   Two letters next to the theme switcher. Deliberately unobtrusive: whoever
   needs it looks for it there, and whoever doesn't shouldn't stumble over
   it. Still 44px tall, so it can be hit on a phone. */

.sprach-schalter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  font-family: var(--schrift-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--tinte-leise);
  text-decoration: none;
  transition: border-color var(--takt) var(--kurve), color var(--takt) var(--kurve);
}
.sprach-schalter:hover { border-color: var(--navy); color: var(--navy); }

/* --- Internal view: conversation history --------------------------------
   No panel like with Ada, but a block in the page: whoever works here
   already has the page open anyway. */

.ops__verlauf {
  display: grid;
  gap: 0.6rem;
  align-content: start;
  min-height: 12rem;
  max-height: 30rem;
  overflow-y: auto;
  padding-bottom: 0.5rem;
}

/* --- Conversation with Ada (signature element in the first screen) ------
   Deliberately inherits the card shape of the availability check: same
   hairline, same radius, same shadow. It shouldn't stand next to it like a
   second element, but read as the same element with different content. The
   only difference is in the border -- navy instead of a sand-colored line
   -- because the conversation is now the primary path. */

.gespraech {
  border: 1px solid var(--navy);
  border-radius: var(--radius-gross);
  background: var(--papier-karte);
  padding: 1.4rem;
  box-shadow: 0 24px 60px -34px rgb(var(--schatten) / 0.45);
}

.gespraech__kopf {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--linie);
  margin-bottom: 1.1rem;
}

.gespraech__wer { display: flex; flex-direction: column; margin-right: auto; }

.gespraech__blase {
  margin: 0 0 1.1rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-gross);
  border-end-start-radius: var(--radius);
  background: var(--papier-tief);
  color: var(--tinte);
  font-size: 0.95rem;
  line-height: 1.55;
  max-width: 34ch;
}

.gespraech__eingabe {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius-gross);
  background: var(--papier);
  padding: 0.3rem 0.3rem 0.3rem 0.85rem;
  transition: border-color var(--takt) var(--kurve), box-shadow var(--takt) var(--kurve);
}

/* The focus ring sits on the border, not on the bare field inside it --
   otherwise you'd see two borders nested inside each other. */
.gespraech__eingabe:focus-within {
  border-color: var(--fokus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fokus) 22%, transparent);
}

.gespraech__eingabe input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  padding: 0.6rem 0;
  font: inherit;
  font-size: 0.95rem;
  color: var(--tinte);
}
.gespraech__eingabe input:focus { outline: none; }
.gespraech__eingabe input::placeholder { color: var(--tinte-leise); }

.gespraech__senden {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44px: minimum size for touch, not smaller. */
  width: 44px; height: 44px;
  border: 0;
  border-radius: var(--radius);
  background: var(--knopf-flaeche);
  color: var(--auf-navy);
  cursor: pointer;
  transition: background var(--takt) var(--kurve);
}
.gespraech__senden:hover { background: var(--navy-hell); }
.gespraech__senden svg { width: 18px; height: 18px; }

.gespraech__vorschlaege {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.9rem;
}

/* --- The form, one step behind ------------------------------------------ */

.lieber-formular { margin-top: 1rem; }

.lieber-formular > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  padding: 0.5rem 0.1rem;
  font-size: 0.85rem;
  color: var(--tinte-leise);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--linie-stark);
}
.lieber-formular > summary:hover { color: var(--navy); text-decoration-color: currentColor; }
.lieber-formular > summary:focus-visible {
  outline: 2px solid var(--fokus);
  outline-offset: 3px;
  border-radius: var(--radius);
}
.lieber-formular[open] > summary { margin-bottom: 0.9rem; }

/* --- Availability check --------------------------------------------------- */

.pruefer {
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius-gross);
  background: var(--papier-karte);
  padding: 1.4rem;
  box-shadow: 0 24px 60px -34px rgb(var(--schatten) / 0.4);
}

.pruefer__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--linie);
  margin-bottom: 1.2rem;
}

.pruefer__titel { font-size: 0.95rem; font-weight: 600; letter-spacing: -0.02em; }

.puls {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--schrift-mono);
  font-size: 0.63rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinte-leise);
}

.puls__punkt {
  position: relative;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gut);
  animation: puls 2.4s var(--kurve) infinite;
}

@keyframes puls {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gut) 55%, transparent); }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.pruefer__zeilen { display: grid; gap: 0.85rem; }

.pruefer__fuss {
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--linie);
  font-size: 0.8rem;
  color: var(--tinte-leise);
  line-height: 1.5;
}

/* --- Form fields ----------------------------------------------------------- */

.feld { display: grid; gap: 0.4rem; position: relative; }

.feld > label { font-size: 0.82rem; font-weight: 500; color: var(--tinte-weich); }

.feld input[type='text'],
.feld input[type='email'],
.feld input[type='tel'],
.feld select,
.feld textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius);
  background: var(--papier);
  color: var(--tinte);
  font-family: inherit;
  font-size: 1rem;
  transition: border-color var(--takt) var(--kurve), box-shadow var(--takt) var(--kurve);
}

.feld input::placeholder { color: var(--tinte-leise); }

.feld input:focus, .feld select:focus, .feld textarea:focus {
  outline: none;
  border-color: var(--fokus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fokus) 18%, transparent);
}

.feld__hinweis { font-size: 0.8rem; color: var(--tinte-leise); line-height: 1.45; }
.feld__hinweis--gut { color: var(--gut); }
.feld__hinweis--warn { color: var(--warn); }

.feld--fehler input, .feld--fehler select { border-color: var(--signal); }

.feld__fehler {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--signal);
}
.feld__fehler svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }

.feld-paar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 0.85rem; }
.feld-paar--umgekehrt { grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr); }

@media (max-width: 560px) {
  .feld-paar, .feld-paar--umgekehrt { grid-template-columns: minmax(0, 1fr); }
}

/* --- Suggestion list -------------------------------------------------------- */

.vorschlaege {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0; right: 0;
  margin: 0; padding: 0.3rem;
  list-style: none;
  max-height: 17rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--papier-karte);
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius);
  box-shadow: 0 16px 44px -20px rgb(var(--schatten) / 0.45);
}

.vorschlaege[hidden] { display: none; }

.vorschlaege li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.94rem;
  line-height: 1.35;
}

.vorschlaege li[aria-selected='true'], .vorschlaege li:hover { background: var(--papier-tief); }

.vorschlaege li mark { background: none; color: var(--navy); font-weight: 600; }

.vorschlag__haupt { min-width: 0; }

.vorschlag__zusatz {
  margin-left: auto;
  font-family: var(--schrift-mono);
  font-size: 0.72rem;
  color: var(--tinte-leise);
  white-space: nowrap;
}

.vorschlag__zeile2 { display: block; font-size: 0.8rem; color: var(--tinte-leise); }

.vorschlaege__leer { padding: 0.7rem; font-size: 0.86rem; color: var(--tinte-leise); }

/* Loading dot in the field while suggestions are being fetched. */
.feld__laden {
  position: absolute;
  right: 0.85rem;
  bottom: 0.95rem;
  width: 14px; height: 14px;
  border: 2px solid var(--linie-stark);
  border-top-color: var(--navy);
  border-radius: 50%;
  animation: dreh 0.7s linear infinite;
}
.feld__laden[hidden] { display: none; }

@keyframes dreh { to { transform: rotate(360deg); } }

/* --- Sections ---------------------------------------------------------------- */

.abschnitt { padding-block: clamp(3.5rem, 7vw, 6.5rem); }

.abschnitt--getoent { background: var(--papier-tief); border-block: 1px solid var(--linie); }

.abschnitt--dunkel { background: var(--dunkel-flaeche); color: var(--auf-dunkel); }
.abschnitt--dunkel .marke, .abschnitt--dunkel .beleg__wort { color: color-mix(in srgb, var(--auf-dunkel) 68%, transparent); }
.abschnitt--dunkel .marke::after { background: color-mix(in srgb, var(--auf-dunkel) 22%, transparent); }
/* Has to override the paragraph color of section headers -- otherwise
   dark-gray text sits on dark navy there, and that's unreadable. Hence the
   deliberately higher specificity instead of a simple selector. */
.abschnitt--dunkel p,
.abschnitt--dunkel .abschnitt__kopf p,
.abschnitt--dunkel .feld__hinweis { color: color-mix(in srgb, var(--auf-dunkel) 84%, transparent); }
.abschnitt--dunkel h2, .abschnitt--dunkel h3 { color: var(--auf-dunkel); }
.abschnitt--dunkel .knopf--rand { border-color: color-mix(in srgb, var(--auf-dunkel) 40%, transparent); color: var(--auf-dunkel); }
.abschnitt--dunkel .knopf--rand:hover { border-color: var(--auf-dunkel); }
.abschnitt--dunkel .knopf--haupt { background: var(--auf-dunkel); color: var(--dunkel-flaeche); }

.abschnitt__kopf { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.abschnitt__kopf h2 { margin-top: 1.25rem; max-width: 24ch; }
.abschnitt__kopf p { margin-top: 1.1rem; max-width: 54ch; font-size: 1.03rem; color: var(--tinte-weich); }

/* The two-column section header (`.abschnitt__kopf--breit`) was dropped on
   2026-08-10. It appeared, in the same shape, above five sections in a row
   -- heading on the left, paragraph on the right -- and that steady beat
   was the real giveaway of a generated page. Now every section decides its
   own shape. */
.abschnitt__satz { margin-top: 1.1rem; max-width: 54ch; font-size: 1.03rem; color: var(--tinte-weich); }
.abschnitt__satz--breit { max-width: 68ch; }

/* --- Process as a horizontal bar of five cells ---------------------------
   Five cells, each a step, horizontal instead of stacked: a process has a
   direction, and five rows of equal height show none. (Up through the third
   round this was also the shape of the brand mark; that's now the speech
   bubble, and the bar stands on its own merits.)

   Below each step sits the proof it produces. That's this company's core
   sales argument and therefore belongs in the label, not in a paragraph
   above it. */
.leiste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
}

.leiste__schritt { display: grid; gap: 0.55rem; align-content: start; }

/* The cell above each step. The third one lights up orange -- the same
   "currently in progress" state as on the order page, the same thing in two
   shapes. */
.leiste__zelle {
  height: 6px;
  border-radius: 2px;
  background: var(--linie-stark);
  transition: background var(--takt) var(--kurve);
}

.leiste__schritt:nth-child(-n + 2) .leiste__zelle { background: var(--tinte); }
.leiste__schritt:nth-child(3) .leiste__zelle { background: var(--signal-hell); }

.leiste__nr { font-size: 0.72rem; color: var(--tinte-leise); letter-spacing: 0.08em; }

.leiste__titel {
  font-size: clamp(1rem, 1.25vw, 1.14rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.25;
}

.leiste__text { font-size: 0.92rem; line-height: 1.55; color: var(--tinte-weich); }

/* Five columns need width. Below that, two, and finally one -- but always
   with the cell on top, so the order stays visible. */
@media (max-width: 1100px) {
  .leiste { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.25rem; }
}
@media (max-width: 560px) {
  .leiste { grid-template-columns: minmax(0, 1fr); }
}

/* --- Availability check as its own section -------------------------------
   On the left is what comes back, on the right the form. The order is
   deliberate: "what happens when I type here" is the question that
   precedes every input, and it deserves an answer before it's even asked. */
.verfuegbar { align-items: center; }
.verfuegbar__text { grid-column: 1 / span 6; }
.verfuegbar__form { grid-column: 8 / span 5; }

@media (max-width: 1000px) {
  .verfuegbar__text, .verfuegbar__form { grid-column: 1 / -1; }
  .verfuegbar__form { margin-top: 2rem; max-width: 32rem; }
}

/* Four rows, each a term and its explanation. As a description list and not
   a bullet list, because that's exactly what it is: terms with their
   meaning. */
.rueckgabe {
  margin: 2rem 0 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--linie);
}

.rueckgabe > div {
  display: grid;
  grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr);
  gap: clamp(0.75rem, 2vw, 1.75rem);
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--linie);
}

.rueckgabe dt {
  font-family: var(--schrift-mono);
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  padding-top: 0.25rem;
}

.rueckgabe dd { margin: 0; font-size: 0.95rem; line-height: 1.5; color: var(--tinte-weich); }

@media (max-width: 520px) {
  .rueckgabe > div { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
  .rueckgabe dt { padding-top: 0; }
}

/* --- Price table -----------------------------------------------------------
   A table instead of three cards. Three pricing cards with one of them
   highlighted are the pattern found on every generated page; a table also
   allows row-by-row comparison, and that's exactly how a buyer reads
   prices. */
.preise th[scope='row'] { white-space: nowrap; }
.preise .tempo { font-size: 1.35rem; font-weight: 600; letter-spacing: -0.04em; }
.preise small { font-size: 0.78rem; font-weight: 400; color: var(--tinte-leise); }
.preise .rechts { text-align: right; white-space: nowrap; }
.preise thead .rechts { text-align: right; }

/* The highlighted row gets a bar on the left edge instead of a background
   color: in a table, a tinted row reads as a state ("selected", "locked"),
   a bar as a recommendation. */
.preise tbody tr.empfohlen > *:first-child { box-shadow: inset 3px 0 0 var(--signal-hell); }

.fahne {
  display: inline-block;
  margin-left: 0.6rem;
  padding: 0.1rem 0.45rem;
  border-radius: 3px;
  background: var(--signal-flaeche);
  color: var(--signal);
  font-family: var(--schrift-mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  vertical-align: 0.2em;
  white-space: nowrap;
}

.preis-fuss {
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  gap: 1.5rem 2.5rem;
}

.enthalten {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
  font-size: 0.92rem;
  color: var(--tinte-weich);
  max-width: 46ch;
}

.enthalten li { display: flex; gap: 0.6rem; align-items: flex-start; }
.enthalten svg { width: 15px; height: 15px; flex: none; margin-top: 4px; color: var(--gut); }

/* --- Operations: proof on the left, text on the right --------------------- */

.betrieb { align-items: center; }
.betrieb__probe { grid-column: 1 / span 6; }
.betrieb__text { grid-column: 8 / span 5; }

.betrieb__pointe {
  margin-top: 1.5rem;
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--tinte);
}

@media (max-width: 1000px) {
  .betrieb__probe, .betrieb__text { grid-column: 1 / -1; }
  .betrieb__probe { order: 2; margin-top: 2.5rem; }
  .betrieb__text { order: 1; }
}

/* --- Closing section --------------------------------------------------------- */

.schluss__innen {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 4rem);
  align-items: end;
}

.schluss__innen h2 { max-width: 22ch; }
.schluss__knoepfe { justify-content: flex-end; }

@media (max-width: 900px) {
  .schluss__innen { grid-template-columns: minmax(0, 1fr); }
  .schluss__knoepfe { justify-content: flex-start; }
}

/* --- Text pages (Imprint, Privacy Policy) --------------------------------- */

.textseite h1 { font-size: clamp(2.1rem, 4vw, 3.1rem); margin-top: 1.25rem; }

.textseite__vorbemerkung {
  margin-top: 1.75rem;
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--tinte-weich);
}

.angaben { margin: 2.75rem 0 0; display: grid; border-top: 1px solid var(--linie); }

.angaben > div {
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  gap: clamp(0.75rem, 2vw, 2rem);
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--linie);
}

.angaben dt {
  font-family: var(--schrift-mono);
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  padding-top: 0.3rem;
}

.angaben dd { margin: 0; line-height: 1.6; }

@media (max-width: 640px) {
  .angaben > div { grid-template-columns: minmax(0, 1fr); gap: 0.35rem; }
  .angaben dt { padding-top: 0; }
}

/* --- Tariffs (order flow) --------------------------------------------------
   This block's cards now only carry the bandwidth selection under
   /bestellen. The home page has used a table since 2026-08-10. */

.tarif {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  background: var(--papier-karte);
  transition: background var(--takt) var(--kurve);
}

.tarif:hover { background: var(--papier); }

.tarif__stufe {
  font-family: var(--schrift-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinte-leise);
}
.tarif__tempo {
  font-size: clamp(1.9rem, 2.8vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tarif__tempo small { font-size: 0.38em; font-weight: 500; letter-spacing: 0; color: var(--tinte-leise); }

.tarif__preis {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--linie);
  font-variant-numeric: tabular-nums;
}
.tarif__preis b { font-size: 1.45rem; font-weight: 600; letter-spacing: -0.03em; }
.tarif__preis span { font-size: 0.84rem; color: var(--tinte-leise); }

.tarif__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; font-size: 0.91rem; color: var(--tinte-weich); }
.tarif__liste li { display: flex; gap: 0.55rem; align-items: flex-start; }
.tarif__liste svg { width: 15px; height: 15px; flex: none; margin-top: 4px; color: var(--gut); }

/* Tariff selection in the order flow: same look, but as a radio field. */
.tarif-wahl { display: grid; gap: 0.85rem; }

.tarif-wahl input[type='radio'] { position: absolute; opacity: 0; pointer-events: none; }

.tarif-wahl label.tarif {
  cursor: pointer;
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius-gross);
  padding-right: 3.25rem;
}
.tarif-wahl label.tarif:hover { border-color: var(--tinte-leise); }

.tarif-wahl input:checked + label.tarif {
  border-color: var(--navy);
  box-shadow: inset 0 0 0 1px var(--navy);
}

.tarif-wahl input:focus-visible + label.tarif { outline: 2px solid var(--fokus); outline-offset: 2px; }

.tarif__haken {
  position: absolute;
  top: 1.15rem; right: 1.15rem;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border: 1px solid var(--linie-stark);
  border-radius: 50%;
  color: transparent;
  transition: background var(--takt) var(--kurve), border-color var(--takt) var(--kurve), color var(--takt) var(--kurve);
}
.tarif-wahl input:checked + label.tarif .tarif__haken {
  background: var(--navy); border-color: var(--navy); color: var(--auf-navy);
}
.tarif__haken svg { width: 13px; height: 13px; }

@media (min-width: 820px) {
  .tarif-wahl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- Order flow: two-column grid ------------------------------------------ */

.bestellung { align-items: start; }
.bestellung__haupt { grid-column: 1 / span 7; }
.bestellung__seite { grid-column: 9 / span 4; position: sticky; top: 6rem; }
.bestellung__voll { grid-column: 1 / -1; }

@media (max-width: 1000px) {
  .bestellung__haupt, .bestellung__seite { grid-column: 1 / -1; }
  .bestellung__seite { position: static; margin-top: 2rem; }
}

.bestellung h1 { font-size: clamp(2rem, 4vw, 3.2rem); margin-top: 1rem; }
.bestellung__satz { margin-top: 1.2rem; max-width: 46ch; color: var(--tinte-weich); font-size: 1.05rem; }
.formular { margin-top: 2rem; display: grid; gap: 1.25rem; }
.abstand-oben { margin-top: 1.75rem; }
.abstand-oben-klein { margin-top: 0.5rem; }

/* --- Tables ------------------------------------------------------------------ */

.tabelle-huelle { overflow-x: auto; border: 1px solid var(--linie); border-radius: var(--radius-gross); }

table.liste { width: 100%; border-collapse: collapse; font-size: 0.93rem; min-width: 34rem; }

table.liste th, table.liste td { text-align: left; padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--linie); }

table.liste thead th {
  font-family: var(--schrift-mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  font-weight: 500;
  background: var(--papier-tief);
}

table.liste tbody tr:last-child td { border-bottom: none; }
table.liste tbody tr:hover { background: var(--papier-tief); }

.kennung { font-family: var(--schrift-mono); font-size: 0.85rem; }

/* --- Card, notice, feature -------------------------------------------------- */

.karte {
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  background: var(--papier-karte);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}

.hinweis {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius);
  border: 1px solid;
  font-size: 0.92rem;
  line-height: 1.5;
}
.hinweis svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
/* The text beside the icon is a flex child and so refuses to get narrower
   than its longest word. One of these notices names an environment
   variable (`PAPERCLIP_TOKEN_PORTAL`), and in a narrow column that one
   word pushed the sentence out past the card's edge, where it was cut
   off mid-word. */
.hinweis > span { min-width: 0; overflow-wrap: anywhere; }
.hinweis--gut { background: var(--gut-flaeche); border-color: color-mix(in srgb, var(--gut) 38%, transparent); color: var(--gut); }
.hinweis--warn { background: var(--warn-flaeche); border-color: color-mix(in srgb, var(--warn) 38%, transparent); color: var(--warn); }
.hinweis--fehler { background: var(--signal-flaeche); border-color: color-mix(in srgb, var(--signal) 38%, transparent); color: var(--signal); }
.hinweis strong { display: block; }

.merkmale {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1px;
  background: var(--linie);
  border-block: 1px solid var(--linie);
}

.merkmal {
  background: var(--papier);
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 2.5vw, 1.75rem);
  display: grid;
  gap: 0.7rem;
  align-content: start;
}

.merkmal__symbol {
  width: 2.1rem; height: 2.1rem;
  display: grid; place-items: center;
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius);
  color: var(--navy);
}
.merkmal__symbol svg { width: 18px; height: 18px; }

.merkmal h3 { font-size: 1.03rem; }
.merkmal p { font-size: 0.92rem; color: var(--tinte-weich); }

/* --- Description lists ------------------------------------------------------- */

.daten {
  display: grid;
  grid-template-columns: minmax(8rem, auto) minmax(0, 1fr);
  margin: 0;
  border-top: 1px solid var(--linie);
}

.daten dt, .daten dd { margin: 0; padding: 0.85rem 0; border-bottom: 1px solid var(--linie); }

.daten dt {
  font-family: var(--schrift-mono);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  padding-right: 1.5rem;
  padding-top: 1.05rem;
}

.daten dd { font-size: 0.98rem; }
.daten dd b { font-weight: 600; font-variant-numeric: tabular-nums; }
.daten__summe dd, .daten__summe dt { border-bottom: none; }
.daten__summe dd b { font-size: 1.2rem; }

/* --- Step indicator ---------------------------------------------------------- */

.weg {
  display: flex;
  align-items: center;
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  padding: 0 0 1.25rem;
  border-bottom: 1px solid var(--linie);
  list-style: none;
  overflow-x: auto;
}

.weg__punkt {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-right: 1.1rem;
  font-size: 0.87rem;
  color: var(--tinte-leise);
  white-space: nowrap;
}

.weg__punkt::after {
  content: '';
  width: clamp(1rem, 3vw, 2.5rem);
  height: 1px;
  background: var(--linie-stark);
  margin-left: 0.5rem;
}
.weg__punkt:last-child { padding-right: 0; }
.weg__punkt:last-child::after { display: none; }

.weg__nr {
  display: grid; place-items: center;
  width: 1.6rem; height: 1.6rem;
  border: 1px solid var(--linie-stark);
  border-radius: 50%;
  font-family: var(--schrift-mono);
  font-size: 0.7rem;
  flex: none;
}

.weg__punkt--erledigt { color: var(--tinte-weich); }
.weg__punkt--erledigt .weg__nr { background: var(--gut); border-color: var(--gut); color: var(--papier); }
.weg__punkt--erledigt .weg__nr svg { width: 12px; height: 12px; }

.weg__punkt--jetzt { color: var(--tinte); font-weight: 500; }
.weg__punkt--jetzt .weg__nr { background: var(--navy); border-color: var(--navy); color: var(--auf-navy); }

/* --- Timeline ---------------------------------------------------------------- */

.strahl { list-style: none; margin: 0; padding: 0; }

.strahl__punkt {
  position: relative;
  display: grid;
  grid-template-columns: 1.65rem minmax(0, 1fr);
  gap: 1rem;
  padding-bottom: 1.75rem;
}

.strahl__punkt:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 0.8rem;
  top: 1.9rem;
  bottom: 0;
  width: 1px;
  background: var(--linie-stark);
}

.strahl__punkt--erledigt:not(:last-child)::before { background: var(--gut); }

.strahl__zeichen {
  position: relative;
  width: 1.65rem; height: 1.65rem;
  display: grid; place-items: center;
  border: 1px solid var(--linie-stark);
  border-radius: 50%;
  background: var(--papier);
  color: var(--tinte-leise);
  z-index: 1;
}
.strahl__zeichen svg { width: 13px; height: 13px; }

.strahl__punkt--erledigt .strahl__zeichen { background: var(--gut); border-color: var(--gut); color: var(--papier); }
.strahl__punkt--jetzt .strahl__zeichen { border-color: var(--navy); color: var(--navy); }
.strahl__punkt--jetzt .strahl__zeichen::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid var(--navy);
  animation: welle 2s var(--kurve) infinite;
}

@keyframes welle {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.9); opacity: 0; }
}

.strahl__wort { font-weight: 500; letter-spacing: -0.015em; }
.strahl__punkt--offen .strahl__wort { color: var(--tinte-leise); font-weight: 400; }
.strahl__detail { display: block; font-size: 0.88rem; color: var(--tinte-leise); }

/* --- The three human gates (/intern) --------------------------------------
   Three equally-weighted columns, because the three gates are equally
   important: the least conspicuous one (the review chain) mustn't be set
   smaller than the most conspicuous one, or it's back to being what it was
   before -- overlooked. They stack below 46rem, because a three-column list
   doesn't help anyone on a phone. */

.karte--tore { padding-block: clamp(1.25rem, 2.5vw, 1.75rem); }

.tore__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.tore__titel { font-size: 1.15rem; letter-spacing: -0.02em; margin: 0; }
.tore__summe {
  font-family: var(--schrift-mono);
  font-size: 0.82rem;
  color: var(--signal);
  white-space: nowrap;
}

/* Wraps by the width it actually has, not by the width of the window.
   The two used to be the same thing; since the internal area carries a
   15rem navigation rail they are not, and a media query at 46rem kept
   three columns side by side in a content column 528 pixels wide -- the
   page then scrolled sideways at 768 and 1024. `auto-fit` asks the
   container, and `min(16rem, 100%)` keeps the single column narrower than
   a phone instead of demanding its 16rem there too. */
.tore {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}

/* Three bordered tiles rather than three cells divided by a one pixel
   gap over a tinted ground. The old technique drew the dividing lines by
   letting the container's background show through the gaps, which works
   while the row is full: once the gates wrap to two columns the empty
   third cell showed up as a grey block. A border belongs to the tile and
   wraps with it. */
.tor {
  background: var(--papier-karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 1.1rem 1.1rem 1.25rem;
}
.tor__kopf {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.4rem;
}
.tor__kopf svg { width: 18px; height: 18px; flex: none; color: var(--tinte-leise); }
.tor__name { font-weight: 500; letter-spacing: -0.01em; }
.tor__zahl {
  margin-left: auto;
  font-family: var(--schrift-mono);
  font-size: 0.9rem;
  min-width: 1.6rem;
  text-align: center;
  padding: 0.1rem 0.35rem;
  border-radius: var(--radius);
  background: var(--papier-tief);
  color: var(--tinte-leise);
}
/* Color only once something is actually waiting. An overview where
   something is always lit up stops being read after two days. */
.tor__zahl--wartet { background: var(--signal-flaeche); color: var(--signal); font-weight: 600; }
.tor__zahl--unbekannt { background: var(--warn-flaeche); color: var(--warn); font-weight: 600; }

.tor__posten { list-style: none; margin: 0.85rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.tor__posten li { display: grid; gap: 0.15rem; font-size: 0.9rem; }
.tor__lage { color: var(--tinte-weich); }
.tor__seit { display: flex; align-items: center; gap: 0.3rem; font-size: 0.82rem; color: var(--tinte-leise); }
.tor__seit svg { width: 13px; height: 13px; flex: none; }
.tor__weg { margin: 0.9rem 0 0; font-size: 0.86rem; }
.tor__weg a { display: inline-flex; align-items: center; gap: 0.3rem; }
.tor__weg svg { width: 13px; height: 13px; flex: none; }

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

.fuss {
  border-top: 1px solid var(--linie);
  padding-block: clamp(2.5rem, 5vw, 4rem) 2rem;
  margin-top: clamp(3rem, 6vw, 5rem);
  background: var(--papier-tief);
}

.fuss__raster {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--linie);
}

/* A minimum column width of 9rem doesn't fit four times on a phone -- in
   total, the footer area pushed the whole page sideways. On narrow devices,
   therefore, two columns for the link lists and one for the brand block. */
@media (max-width: 720px) {
  .fuss__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; }
  .fuss__raster > :first-child { grid-column: 1 / -1; }
}

.fuss h4 {
  font-family: var(--schrift-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  margin-bottom: 0.9rem;
}

.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.fuss a { color: var(--tinte-weich); text-decoration: none; font-size: 0.91rem; }
.fuss a:hover { color: var(--tinte); text-decoration: underline; text-underline-offset: 3px; }

.fuss__satz { font-size: 0.92rem; color: var(--tinte-weich); max-width: 38ch; margin-top: 1rem; }

.fuss__unten {
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--tinte-leise);
}

.fuss__warnung {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--schrift-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--warn);
  border: 1px solid color-mix(in srgb, var(--warn) 38%, transparent);
  background: var(--warn-flaeche);
  padding: 0.28rem 0.6rem;
  border-radius: 3px;
}

/* --- Motion ------------------------------------------------------------------ */

.zeigt { opacity: 0; transform: translateY(14px); }

.zeigt.ist-da {
  opacity: 1;
  transform: none;
  transition: opacity 520ms var(--kurve), transform 520ms var(--kurve);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .zeigt { opacity: 1; transform: none; }
}

/* --- Ada ----------------------------------------------------------------------- */

.ada-knopf {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 3rem;
  padding: 0 1.15rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--knopf-flaeche);
  color: var(--auf-navy);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 14px 34px -14px rgb(var(--schatten) / 0.55);
  transition: transform var(--takt) var(--kurve), background var(--takt) var(--kurve);
}
.ada-knopf:hover { transform: translateY(-2px); background: var(--navy); }
.ada-knopf svg { width: 19px; height: 19px; }
.ada-knopf[hidden] { display: none; }

.ada {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 51;
  /* Ada is the centerpiece of the page, not a sidecar -- the panel is
     allowed to take up room. Until 2026-08-10 this said 24rem/34rem: on a
     large screen that squeezed her replies into a narrow column with a long
     scroll (operator feedback, with a screenshot to prove it). Width now
     grows with the window up to 44rem, height up to 85% of the viewport
     height; on a phone it fills nearly everything, as before. */
  width: min(44rem, calc(100vw - 2rem));
  height: min(85dvh, calc(100dvh - 2rem));
  display: flex;
  flex-direction: column;
  background: var(--papier-karte);
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius-gross);
  box-shadow: 0 28px 70px -26px rgb(var(--schatten) / 0.5);
  overflow: hidden;
}

.ada[hidden] { display: none; }

.ada__kopf {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--linie);
  background: var(--papier-tief);
}

.ada__zeichen {
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--knopf-flaeche);
  color: var(--auf-navy);
  font-weight: 600;
  font-size: 0.82rem;
  flex: none;
}

.ada__name { font-weight: 600; font-size: 0.94rem; letter-spacing: -0.02em; line-height: 1.2; }
.ada__rolle { font-size: 0.77rem; color: var(--tinte-leise); }

.ada__zu {
  margin-left: auto;
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--tinte-weich);
  cursor: pointer;
}
.ada__zu:hover { border-color: var(--linie); color: var(--tinte); }
.ada__zu svg { width: 16px; height: 16px; }

.ada__verlauf {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.ada__blase {
  /* 86% AND 62ch: in the wide panel, the character count limits it
     (readability); in the narrow one, the percentage does. With only a
     percentage, lines in the enlarged panel ran past 100 characters. */
  max-width: min(86%, 62ch);
  padding: 0.7rem 0.95rem;
  border-radius: 10px;
  font-size: 0.95rem;
  line-height: 1.55;
  white-space: pre-wrap;
}

.ada__blase--ada {
  align-self: flex-start;
  background: var(--papier-tief);
  border: 1px solid var(--linie);
  border-bottom-left-radius: 3px;
}

.ada__blase--kunde {
  align-self: flex-end;
  background: var(--knopf-flaeche);
  color: var(--auf-navy);
  border-bottom-right-radius: 3px;
}

.ada__tippt { display: inline-flex; gap: 4px; align-items: center; padding-block: 0.25rem; }
.ada__tippt span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--tinte-leise);
  animation: tippen 1.2s var(--kurve) infinite;
}
.ada__tippt span:nth-child(2) { animation-delay: 0.15s; }
.ada__tippt span:nth-child(3) { animation-delay: 0.3s; }

@keyframes tippen {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

.ada__vorschlaege { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0 1rem 0.75rem; }

.ada__vorschlag {
  min-height: 2.25rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--linie-stark);
  border-radius: 999px;
  background: transparent;
  color: var(--tinte-weich);
  font-family: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  transition: border-color var(--takt) var(--kurve), color var(--takt) var(--kurve);
}
.ada__vorschlag:hover { border-color: var(--navy); color: var(--navy); }

.ada__eingabe {
  display: flex;
  gap: 0.5rem;
  padding: 0.7rem;
  border-top: 1px solid var(--linie);
  background: var(--papier-karte);
}

.ada__eingabe input {
  flex: 1;
  min-width: 0;
  min-height: 2.75rem;
  padding: 0 0.85rem;
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius);
  background: var(--papier);
  color: var(--tinte);
  font-family: inherit;
  font-size: 0.93rem;
}
.ada__eingabe input:focus {
  outline: none;
  border-color: var(--fokus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fokus) 18%, transparent);
}

.ada__senden {
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  border: none;
  border-radius: var(--radius);
  background: var(--knopf-flaeche);
  color: var(--auf-navy);
  cursor: pointer;
  flex: none;
}
.ada__senden:hover { background: var(--navy); }
.ada__senden svg { width: 17px; height: 17px; }
.ada__senden[disabled] { opacity: 0.45; cursor: not-allowed; }

/* The internal access visibly carries a different color, so nobody mistakes
   an internal answer for a customer-facing one. */
.ada--intern .ada__kopf { background: var(--warn-flaeche); border-bottom-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.ada--intern .ada__zeichen { background: var(--warn); color: var(--papier); }

/* --- Print --------------------------------------------------------------------- */

@media print {
  .kopf, .fuss, .ada, .ada-knopf, .sprung { display: none !important; }
  body { background: #fff; color: #000; }
  .karte { border-color: #ccc; }
}

/* Lists and rules inside a chat bubble.
   ---------------------------------------------------------------------------
   Both panels render a model's Markdown since 2026-09-16 (antwort-teile.js,
   antwort-rendern.js). The bubble is `white-space: pre-wrap`, which is what
   makes a line break the model wrote show up -- but inside a list item it
   would also keep the indentation of the source line and print it in front
   of the marker. So the block elements reset it. */
.ada__blase .ada__absatz { margin: 0; }
.ada__blase .ada__absatz + .ada__absatz { margin-top: 0.6rem; }

.ada__blase .ada__liste {
  white-space: normal;
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
}

.ada__blase .ada__liste li + li { margin-top: 0.25rem; }

/* A rule between two thoughts, not a section break in a document: the same
   hairline the cards use, and no more room than a blank line would take. */
.ada__blase hr {
  border: 0;
  border-top: 1px solid var(--linie);
  margin: 0.7rem 0;
}