/* =========================================================================
   KRONENWERK — the public site
   =========================================================================

   This file is the marketing surface and nothing else. It deliberately does
   NOT extend kronenwerk.css: the authenticated product is a dense working
   interface at 15px with a navigation rail, and a website that inherits its
   density reads as a screenshot of an admin panel. They share a palette and a
   monogram; they share no layout.

   THE IDEA: a broadsheet, not a landing page.

   A left rail carries section numbers and labels in mono; the text sits in a
   wide asymmetric measure beside it; hairlines rule the page horizontally the
   way a printed sheet is ruled. There is no row of three feature cards
   anywhere, because a wall of cards says every claim is worth the same amount
   and none of them is worth reading.

   THE ONE RISK, stated so nobody sands it off later: the two places where
   money is discussed — the pricing band on the home page and the whole pricing
   page — are printed on warm paper. Black serif on off-white, brass rules, in
   the middle of an otherwise near-black site. It is the only light surface on
   the site and it is not decorative: it is where the reader is being asked to
   think about what this costs, and the change of ground makes them stop.
   Everything around it is kept quiet so that it can be loud.

   COLOUR: near-black, warm off-white, one restrained brass. No green and no
   red appear on this site at all — the product reserves those for money that
   is genuinely positive or genuinely a problem, and a marketing page has no
   such money on it.
   ========================================================================= */

/* ------------------------------------------------------------------ tokens */

/*
   THE GROUND IS WHITE.

   It was near-black until ty asked for white, and the flip is done here at the
   token level rather than by editing three hundred rules — which is the whole
   reason the tokens exist. Every name keeps its MEANING: --grund is the page,
   --tinte is what you read on it, --messing is the accent. Only the values
   moved. Nothing below this block needed to change to follow.

   What did need thinking about is the device the dark site was built around.
   Money used to be discussed on a warm paper band set into a black page, and
   the change of ground is what made a reader stop at the price. On a white
   page that contrast is gone, so the band inverts: the pricing surfaces are
   now the near-black ones, and they are the only dark bands on the site. The
   device survives, pointing the other way.

   COLOUR: white, one warm off-white for the quiet bands, near-black ink, one
   restrained brass. Still no green and no red anywhere on this site — the
   product reserves those for money that is genuinely positive or genuinely a
   problem, and a marketing page has no such money on it.
*/

:root {
  color-scheme: light;

  /* The page. Not #FFF flat everywhere: --grund-2 is a barely-there warm step
     that separates a band from the one above it without drawing a box, and
     --grund-3 is for the rare inset. */
  --grund:    #FFFFFF;
  --grund-2:  #FAF8F5;
  --grund-3:  #F3F0EA;

  /* The dark bands — where money is discussed. */
  --nacht:    #0A0B0D;
  --nacht-2:  #101216;
  --nacht-3:  #171A1F;

  /* Ink on white. --tinte-2 and -3 are the quiet steps; -4 is for hairline
     labels only and is not used for anything a reader has to read. */
  --tinte:    #15171B;
  --tinte-2:  #4A505A;
  /* Gehoben von #6B7280 auf #5C636F.
     Auf weissem Grund kam #6B7280 auf 4.83:1 und ging durch; auf dem
     Papierbogen (--grund-3, #F3F0EA) -- dem Grund der Preisseite, der
     Kanzleiseite und zweier Abschnitte der Startseite -- auf 4.25:1 und damit
     nicht mehr. Getragen hat die Farbe unter anderem den Jahrespreis, die
     Waehrungs- und Landwahl und den Satz "Jede Firma hat ihr eigenes
     Abonnement". #5C636F kommt auf 5.32:1 dort und 6.05:1 auf Weiss. */
  --tinte-3:  #5C636F;
  --tinte-4:  #9AA1AB;

  /* Ink on the dark bands. */
  --hell:     #F2EFE8;
  --hell-2:   #A8AEB7;
  --hell-3:   #7E848E;

  /* Kept under their old names so the dark bands' existing rules still read
     correctly: on those bands, "paper" is the light thing. */
  --papier:   #FFFFFF;
  --papier-2: #FAF8F5;
  --schwarz:   #15171B;
  --schwarz-2: #4A505A;
  --schwarz-3: #6B7280;

  /* Brass. --messing-text is the step that reads as small text on WHITE, which
     needs to be considerably darker than the step that read on black; the old
     light gold is kept as --messing-hell for use on the dark bands only. */
  --messing:      #8A6A17;
  --messing-text: #74560F;
  --messing-hell: #EBD49A;
  --messing-tief: #F6EFDD;
  --messing-papier: #74560F;

  --linie:        #E6E2DA;
  --linie-stark:  #D4CFC4;
  --linie-papier: #E6E2DA;
  --linie-nacht:  #2C3138;   /* hairlines inside a dark band */

  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino,
           Georgia, "Times New Roman", serif;
  --sans:  "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
           "Helvetica Neue", Arial, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* The rail. It is the page's spine: every section number, every eyebrow and
     every hanging numeral lands on it, which is what makes the layout read as
     one grid rather than as a stack of unrelated bands. */
  --schiene: 208px;
  --luft: clamp(64px, 8vw, 132px);   /* vertical rhythm between sections */
}

@media (max-width: 1180px) { :root { --schiene: 150px; } }

/* ------------------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* No page ever scrolls sideways. Wide things scroll inside themselves. */
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

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

.rahmen {
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4.6vw, 76px);
}

/* Reachable by keyboard, invisible until it is. */
.sprung {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 100;
  background: var(--messing);
  /* Helle Schrift auf dem Messing: #14110A kam auf 3.73:1. Das ist das erste,
     was ein Mensch mit der Tastatur auf jeder oeffentlichen Seite sieht. */
  color: #FFF9EC;
  font: 500 13px/1 var(--sans);
  padding: 12px 16px;
  border-radius: 3px;
  transition: top .15s ease;
}
.sprung:focus { top: 12px; }

/* ------------------------------------------------------------- typography */

.anzeige {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(40px, 6.6vw, 88px);
  line-height: 1.0;
  letter-spacing: -.026em;
  margin: 0;
  color: var(--tinte);
  text-wrap: balance;
}
/* The three clauses of the opening line each take their own line, and the full
   stop that ends each one is brass. It is a small thing and it is the reason
   the headline reads as written rather than as set. */
.anzeige .satz { display: block; }
.anzeige .punkt { color: var(--messing); }

.titel {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(27px, 3.4vw, 44px);
  line-height: 1.1;
  letter-spacing: -.018em;
  margin: 0;
  /* Not `balance`. A 44px serif in a 28ch column is exactly the case Chromium's
     balancer handles worst: it equalises the lines and produces a stack of two
     words. `pretty` still fixes the widow and leaves the rag alone. */
  text-wrap: pretty;
}

.titel-klein {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(20px, 2vw, 25px);
  line-height: 1.22;
  letter-spacing: -.012em;
  margin: 0 0 8px;
}

.marke {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--messing-text);
  margin: 0;
}

.fliess { font-size: 17.5px; line-height: 1.68; color: var(--tinte-2); max-width: 62ch; }
.fliess-gross {
  font-size: clamp(18px, 1.55vw, 21px);
  line-height: 1.62;
  color: var(--tinte-2);
  max-width: 56ch;
}
.leise { color: var(--tinte-3); font-size: 14.5px; line-height: 1.6; }

/* ----------------------------------------------------------------- header */

.kopfleiste {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--grund) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--linie);
}
.kopfleiste-innen {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 44px);
  height: 68px;
}

.logo { display: flex; align-items: center; gap: 12px; flex: none; }
.logo .mark { width: 30px; height: auto; color: var(--messing); flex: none; }
.logo .wortmarke {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .2em;
  color: var(--tinte);
  white-space: nowrap;
}

.hauptnav { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); margin-right: auto; }
.hauptnav a {
  font-size: 14.5px;
  color: var(--tinte-2);
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color .14s ease, border-color .14s ease;
}
.hauptnav a:hover { color: var(--tinte); }
.hauptnav a[aria-current="page"] { color: var(--tinte); border-bottom-color: var(--messing); }

.kopf-rechts { display: flex; align-items: center; gap: clamp(10px, 1.4vw, 20px);
  flex: 0 1 auto; min-width: 0; flex-wrap: wrap; justify-content: flex-end; }
.kopf-anmelden { font-size: 14.5px; color: var(--tinte-2); white-space: nowrap; }
.kopf-anmelden:hover { color: var(--tinte); }

/* ---------------------------------------------------------------- buttons */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: .01em;
  padding: 11px 20px;
  border-radius: 3px;
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
/* The only filled control anywhere on the site. Scarcity is what makes it an
   instruction rather than a decoration. */
.knopf-voll { background: var(--messing); color: #FFF9EC; }
.knopf-voll:hover { background: var(--messing-text); }
.knopf-leer { border-color: var(--linie-stark); color: var(--tinte); }
.knopf-leer:hover { border-color: var(--messing); color: var(--messing-text); }
.knopf-gross { font-size: 15.5px; padding: 14px 26px; }

/* A link that behaves like a rule: the arrow is part of the type, and the
   underline is a real border so it can be brass without touching the text. */
.pfeil-link {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  font-size: 15px;
  color: var(--messing-text);
  border-bottom: 1px solid var(--messing-tief);
  padding-bottom: 3px;
  transition: border-color .14s ease, color .14s ease;
}
.pfeil-link:hover { border-bottom-color: var(--messing); color: var(--tinte); }
.pfeil-link .spitze { font-family: var(--mono); font-size: 13px; }

/* ------------------------------------------------------ language selector */

.sprachwahl { position: relative; flex: none; }
.sprachwahl > details > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  color: var(--tinte-2);
  padding: 6px 9px;
  border: 1px solid var(--linie);
  border-radius: 3px;
  white-space: nowrap;
}
.sprachwahl > details > summary::-webkit-details-marker { display: none; }
.sprachwahl > details > summary:hover { color: var(--tinte); border-color: var(--linie-stark); }
.sprachwahl .pfeil { font-size: 9px; color: var(--tinte-3); }
.sprachwahl ul {
  position: absolute;
  right: 0;
  top: calc(100% + 7px);
  min-width: 170px;
  background: var(--grund);
  border: 1px solid var(--linie-stark);
  border-radius: 4px;
  padding: 5px;
  box-shadow: 0 18px 44px -20px rgba(21,23,27,.28);
  z-index: 60;
}
.sprachwahl ul a {
  display: block;
  padding: 8px 11px;
  font-size: 14px;
  color: var(--tinte-2);
  border-radius: 3px;
}
.sprachwahl ul a:hover { background: var(--grund-3); color: var(--tinte); }
.sprachwahl ul a.gewaehlt { color: var(--messing-text); }

/* --------------------------------------------------------- mobile disclosure */

.mobilnav { display: none; }
.mobilnav > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--tinte-2);
  border: 1px solid var(--linie);
  border-radius: 3px;
  padding: 7px 11px;
}
.mobilnav > summary::-webkit-details-marker { display: none; }
.mobilnav-blatt {
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  background: var(--grund);
  border-bottom: 1px solid var(--linie-stark);
  padding: 10px clamp(20px, 4.6vw, 76px) 22px;
}
.mobilnav-blatt a {
  display: block;
  padding: 13px 0;
  font-size: 17px;
  color: var(--tinte);
  border-bottom: 1px solid var(--linie);
}
.mobilnav-blatt .knopf { margin-top: 18px; width: 100%; }
/* The sheet colours its links; the filled control has to win that, or the one
   call to action on a phone is off-white on brass. */
.mobilnav-blatt .knopf-voll { color: #16120A; }

/* --------------------------------------------------------- section shells */

.abschnitt { padding-block: var(--luft); }
.abschnitt-eng { padding-block: calc(var(--luft) * .62); }

/* Every section opens the same way: a hairline across the full measure, the
   mono label sitting on the rail, the serif title beside it. Repetition is the
   point — it is what turns eight bands into one document. */
.kopfzeile {
  display: grid;
  grid-template-columns: var(--schiene) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 48px);
  border-top: 1px solid var(--linie-stark);
  padding-top: 20px;
  margin-bottom: clamp(34px, 4.4vw, 60px);
}
.kopfzeile .marke { padding-top: 9px; }
/* Narrower than the measure below it on purpose: a section title that runs the
   full width of the page competes with the opening statement. Wide enough,
   though, that a German compound noun does not get a line to itself. */
.kopfzeile-text { max-width: 34rem; }
.kopfzeile-weit .kopfzeile-text { max-width: none; }
.kopfzeile .nachsatz { margin-top: 16px; }

/* The page-opening block that Product, Pricing, Security and Countries share:
   the section label on the rail, a smaller cut of the display face beside it,
   and one paragraph. Home does not use it — its opening is its own thing. */
.seitenkopf {
  display: grid;
  grid-template-columns: var(--schiene) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 48px);
  padding-top: clamp(46px, 6vw, 86px);
}
.seitenkopf .marke { padding-top: 12px; }
.seitenkopf .anzeige { font-size: clamp(32px, 4.6vw, 62px); max-width: 20ch; }
.seitenkopf .fliess-gross { margin-top: clamp(20px, 2.4vw, 30px); }

/* Body copy that starts where the rail ends, without an empty grid cell to
   hold the place. Below the tablet breakpoint the rail is zero and so is this. */
.eingerueckt { margin-left: calc(var(--schiene) + clamp(20px, 3vw, 48px)); }

/* Small, repeated vertical steps, named rather than written inline forty times. */
.nachtrag { margin-top: clamp(20px, 2.4vw, 28px); }
.ohne-abstand { margin-bottom: 0; }
/* A section that follows straight on from the one above it — the page opening
   and the list it introduces are one thing, not two. */
.anschluss { padding-top: 0; }
/* The last band on a page, which needs floor under it. */
.abschluss { padding-bottom: clamp(60px, 7vw, 108px); }
/* A plate set between two lists rather than beside them. */
.zwischenbild { padding-block: clamp(10px, 2vw, 26px); }
.merkmale-frei { margin-top: 0; border-top: 0; }
.platte-abstand { margin-bottom: clamp(30px, 3.4vw, 46px); }

/* ------------------------------------------------------- the opening panel */

.eroeffnung { border-bottom: 1px solid var(--linie); }
.eroeffnung-gitter {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(320px, .94fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: center;
  padding-top: clamp(48px, 7vw, 104px);
  padding-bottom: clamp(40px, 5vw, 72px);
}
.eroeffnung-text { display: flex; flex-direction: column; justify-content: center; }
.eroeffnung .fliess-gross { margin-top: clamp(26px, 3vw, 40px); }
.eroeffnung-aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: clamp(30px, 3.4vw, 44px);
}

/* The photograph is a plate, not a background. It has a hairline, it has a
   caption, and it is never behind text — a headline set over a photograph is
   how a page loses both. */
/* A figure, so the browser's own margin has to go — and it goes here rather
   than inline, because an inline `margin:0` would also kill the half-step
   offset the paired plates depend on. */
.platte { position: relative; margin: 0; }
.platte img {
  width: 100%;
  border: 1px solid var(--linie-stark);
  filter: saturate(.9) contrast(1.02);
}
.platte-hoch img { aspect-ratio: 2 / 3; object-fit: cover; }
.platte-quer img { aspect-ratio: 3 / 2; object-fit: cover; }
.platte-breit img { aspect-ratio: 3 / 2; object-fit: cover; }
/* The wide strip. Capped at the source width rather than run edge to edge:
   these photographs are 960px originals, and a band stretched to 1400 on a
   large display is a soft band. The air it leaves on the right is the same
   asymmetry the rest of the page is built on. */
.platte-band { max-width: 960px; }
.platte-band img { aspect-ratio: 32 / 9; object-fit: cover; object-position: center 46%; }
.bildunterschrift {
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.62;
  letter-spacing: .02em;
  color: var(--tinte-3);
  margin: 12px 0 0;
  max-width: 40ch;
}

/* The strip of facts under the opening. Mono, wide-set, hairline-separated —
   the only place on the site where anything is stated telegraphically. */
.tatsachen {
  display: flex;
  flex-wrap: wrap;
  gap: 0 clamp(20px, 3vw, 44px);
  border-top: 1px solid var(--linie);
  padding-block: 18px 22px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinte-3);
}
.tatsachen li { display: flex; align-items: center; gap: clamp(20px, 3vw, 44px); }
.tatsachen li + li::before { content: ""; width: 1px; height: 11px; background: var(--linie-stark); }

/* ------------------------------------------------------------ the index list */

/* The alternative to a wall of cards. Rows on a rule, a hanging numeral in the
   rail, the claim in serif and the argument in sans beside it. It scales from
   three entries to nine without turning into a grid of boxes. */
.verzeichnis { border-top: 1px solid var(--linie); }
.verzeichnis > li {
  display: grid;
  grid-template-columns: var(--schiene) minmax(0, 30ch) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 48px);
  padding-block: clamp(26px, 3vw, 40px);
  border-bottom: 1px solid var(--linie);
  transition: background .18s ease;
}
.verzeichnis > li:hover { background: var(--grund-2); }
.ziffer {
  font-family: var(--serif);
  font-size: clamp(30px, 3.2vw, 46px);
  font-weight: 300;
  line-height: .9;
  color: var(--messing);
  font-variant-numeric: tabular-nums lining-nums;
}
.verzeichnis .titel-klein { margin-bottom: 0; }
.verzeichnis p { color: var(--tinte-2); font-size: 16px; line-height: 1.62; margin: 0; max-width: 64ch; }

/* ------------------------------------------------------------ the two plates */

.tafeln {
  display: grid;
  grid-template-columns: var(--schiene) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 48px);
  align-items: start;
}
/* The plates take the two content columns; the rail stays empty beside them,
   which is what keeps them on the same grid as every section title above. */
.tafeln > .platte:nth-of-type(1) { grid-column: 2; }
.tafeln > .platte:nth-of-type(2) { grid-column: 3; }
/* The second plate drops half a step. An offset pair reads as a spread; a
   level pair reads as two thumbnails. */
.tafeln .platte:nth-of-type(2) { margin-top: clamp(28px, 5vw, 76px); }
.tafeln-worte { grid-column: 2 / -1; }
.merkmale { margin-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--linie); }
.merkmale li {
  padding: 15px 0 15px 26px;
  border-bottom: 1px solid var(--linie);
  font-size: 16.5px;
  color: var(--tinte-2);
  position: relative;
}
.merkmale li::before {
  content: "";
  position: absolute;
  left: 2px; top: 26px;
  width: 12px; height: 1px;
  background: var(--messing);
}

/* --------------------------------------------------------------- the paper */

/* The one light surface on the site, and the risk this design takes. Warm
   paper, black serif, brass rules — a printed sheet laid onto the page exactly
   where the reader is asked to think about money. The hairline top and bottom
   are the sheet's edges. */
.papierbogen {
  background: var(--grund-3);
  color: var(--tinte);
  border-block: 1px solid var(--linie-stark);
  /* A faint tooth so it reads as a heavier stock than the page around it,
     rather than as a grey box. On the near-black site this band was the only
     light surface and that was the whole device; on a white page the device
     has to be carried by warmth and by the rules instead of by inversion. */
  background-image:
    radial-gradient(120% 80% at 82% -10%, rgba(138,106,23,.07) 0%, transparent 55%);
}
.papierbogen .marke { color: var(--messing-text); }
.papierbogen .titel, .papierbogen .anzeige, .papierbogen .titel-klein { color: var(--tinte); }
.papierbogen .fliess, .papierbogen .fliess-gross, .papierbogen p,
.papierbogen .merkmale li, .papierbogen .eingestanden li { color: var(--tinte-2); }
.papierbogen .leise { color: var(--tinte-3); }
.papierbogen .kopfzeile,
.papierbogen .verzeichnis,
.papierbogen .verzeichnis > li,
.papierbogen .merkmale,
.papierbogen .merkmale li,
.papierbogen .tatsachen { border-color: var(--linie-stark); }
.papierbogen .verzeichnis > li:hover { background: rgba(138,106,23,.05); }
.papierbogen .ziffer { color: var(--messing-text); }
.papierbogen .merkmale li::before { background: var(--messing-text); }
.papierbogen .pfeil-link { color: var(--messing-text); border-bottom-color: var(--linie-stark); }
.papierbogen .pfeil-link:hover { border-bottom-color: var(--messing-text); color: var(--tinte); }
.papierbogen .knopf-voll { background: var(--tinte); color: var(--grund); }
.papierbogen .knopf-voll:hover { background: var(--messing-text); color: #FFF9EC; }
.papierbogen .knopf-leer { border-color: var(--linie-stark); color: var(--tinte); }
.papierbogen .knopf-leer:hover { border-color: var(--messing-text); color: var(--messing-text); }
.papierbogen :focus-visible { outline-color: var(--messing-text); }

/* The paper band on the home page: statement left, consequence right. */
.papier-band {
  display: grid;
  grid-template-columns: var(--schiene) minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(22px, 3.4vw, 56px);
  align-items: start;
}
.papier-band .marke { padding-top: 10px; }
.papier-band-rechts { border-left: 1px solid var(--linie-papier); padding-left: clamp(22px, 3vw, 44px); }

/* ------------------------------------------------------- countries + trust */

.laenderzeile {
  display: grid;
  grid-template-columns: var(--schiene) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 48px);
}
.kuerzel {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(14px, 2.4vw, 34px);
  font-family: var(--serif);
  font-size: clamp(34px, 5vw, 68px);
  font-weight: 300;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--tinte);
  margin: 0 0 clamp(24px, 3vw, 36px);
}
.kuerzel li { color: var(--tinte-2); transition: color .2s ease; }
.kuerzel li:hover { color: var(--messing-text); }

.sprachzeile {
  display: flex;
  flex-wrap: wrap;
  gap: 0 18px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .1em;
  color: var(--tinte-3);
  margin-bottom: clamp(26px, 3vw, 38px);
}
.sprachzeile li + li::before { content: "·"; margin-right: 18px; color: var(--tinte-4); }

/* ------------------------------------------------------------- the closing */

.schluss {
  border-top: 1px solid var(--linie-stark);
  background:
    radial-gradient(90% 120% at 88% 0%, rgba(138,106,23,.07) 0%, transparent 58%),
    var(--grund-2);
}
.schluss-gitter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .78fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.schluss-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; margin-top: 30px; }
.schluss-aktionen .leise a {
  color: var(--tinte);
  border-bottom: 1px solid var(--linie-stark);
  padding-bottom: 2px;
  transition: border-color .14s ease;
}
.schluss-aktionen .leise a:hover { border-bottom-color: var(--messing); }
.papierbogen .schluss-aktionen .leise a { color: var(--tinte); border-bottom-color: var(--linie-stark); }

/* ------------------------------------------------------------------ footer */

.fussleiste {
  border-top: 1px solid var(--linie-stark);
  background: var(--grund-2);
  padding-block: clamp(46px, 5vw, 72px) 34px;
}
.fuss-gitter {
  display: grid;
  /* Fuenf Gruppen seit den Rechtstexten: Produkt, Nachlesen, Konto, Rechtliches,
     Sprache. Die Marke behaelt ihr breiteres Feld. */
  grid-template-columns: minmax(0, 1.5fr) repeat(5, minmax(0, 1fr));
  gap: clamp(26px, 3.4vw, 56px);
  padding-bottom: clamp(34px, 4vw, 52px);
  border-bottom: 1px solid var(--linie);
}
.fuss-marke .mark { width: 34px; height: auto; color: var(--messing); margin-bottom: 16px; }
.fuss-gruppe h2 {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--tinte-3);
  margin: 0 0 14px;
}
.fuss-gruppe li { margin-bottom: 9px; }
.fuss-gruppe a { font-size: 14.5px; color: var(--tinte-2); }
.fuss-gruppe a:hover { color: var(--messing-text); }
.fuss-unten {
  display: flex;
  flex-wrap: wrap;
  gap: 18px clamp(24px, 4vw, 56px);
  padding-top: 26px;
}
.fuss-unten p { font-size: 12.5px; line-height: 1.65; color: var(--tinte-3); margin: 0; max-width: 62ch; }

/* ----------------------------------------------------------- country table */

/* A real table, because this is real tabular information: a country, its
   currency and what is actually modelled for it. It scrolls inside itself on a
   phone rather than pushing the page sideways. */
.tabellenkasten { overflow-x: auto; border-top: 1px solid var(--linie-stark); }
.laendertabelle { width: 100%; min-width: 620px; border-collapse: collapse; text-align: left; }
.laendertabelle th, .laendertabelle td {
  padding: 20px 20px 20px 0;
  border-bottom: 1px solid var(--linie);
  vertical-align: top;
}
.laendertabelle thead th {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinte-3);
  padding-block: 16px;
}
.laendertabelle .code {
  font-family: var(--mono);
  font-size: 15px;
  color: var(--messing-text);
  letter-spacing: .08em;
  width: 74px;
}
.laendertabelle .name { width: 22%; }
.laendertabelle tbody .name { font-family: var(--serif); font-size: 21px; font-weight: 500; }
.laendertabelle .waehrung { font-family: var(--mono); font-size: 13px; color: var(--tinte-2); width: 96px; }
.laendertabelle td p { color: var(--tinte-2); font-size: 15.5px; line-height: 1.6; margin: 0; }

/* --------------------------------------------------------- two-column prose */

.spalten {
  display: grid;
  grid-template-columns: var(--schiene) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 48px);
  align-items: start;
}
.spalten-block h3 {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--messing-text);
  margin: 0 0 16px;
}
.papierbogen .spalten-block h3 { color: var(--messing-papier); }

/* --------------------------------------------------------- the honesty list */

/* Where the site says what it does not have. Set flush and quiet on purpose:
   this is the part that is supposed to read as a note to a reader rather than
   as a feature. */
.eingestanden { border-top: 1px solid var(--linie-stark); }
.eingestanden li {
  display: grid;
  grid-template-columns: var(--schiene) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 48px);
  padding-block: 22px;
  border-bottom: 1px solid var(--linie);
  color: var(--tinte-2);
  font-size: 16px;
  line-height: 1.62;
}
.eingestanden .kein {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--tinte-3);
  padding-top: 5px;
}

/* --------------------------------------------------------------------- fragen */

/* The visible question-and-answer block.

   It is a real list of real questions on the page, and that is not a
   presentational detail: Strukturdaten emits FAQPage only where a block like
   this exists, so the markup a search engine reads and the words a person
   reads are the same words. Styled as an index rather than as an accordion —
   an accordion hides the answers, and the answers are the entire point of the
   page for a reader who arrived from a question. Nothing here needs script.

   The question is set in the serif at reading size and the answer directly
   under it in the same measure as body prose, so the pair reads as one entry
   and a reader scanning for their own question can skip by heading alone. */
.fragen { border-top: 1px solid var(--linie); margin-top: clamp(28px, 3vw, 40px); }
.fragen > li {
  display: grid;
  grid-template-columns: var(--schiene) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 48px);
  padding-block: clamp(22px, 2.4vw, 30px);
  border-bottom: 1px solid var(--linie);
}
.fragen .frage {
  grid-column: 2;
  font-family: var(--serif);
  font-size: clamp(19px, 1.5vw, 23px);
  font-weight: 500;
  line-height: 1.32;
  color: var(--tinte);
  margin: 0 0 10px;
  max-width: 46ch;
}
.fragen .antwort {
  grid-column: 2;
  color: var(--tinte-2);
  font-size: 16.5px;
  line-height: 1.66;
  margin: 0;
  max-width: 66ch;
}

/* On a narrow screen the rail collapses and the pair sits flush, exactly as
   the numbered index above it does. */
@media (max-width: 760px) {
  .fragen > li { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .fragen .frage, .fragen .antwort { grid-column: 1; }
}

/* --------------------------------------------------------------- breakpoints */

/* Laptop: the rail narrows before it disappears, and the index gives its
   middle column back to the prose. */
@media (max-width: 1080px) {
  .verzeichnis > li { grid-template-columns: var(--schiene) minmax(0, 26ch) minmax(0, 1fr); }
  .papier-band { grid-template-columns: var(--schiene) minmax(0, 1fr); }
  .papier-band-rechts { grid-column: 2; border-left: 0; padding-left: 0; padding-top: 26px; border-top: 1px solid var(--linie-papier); }
}

/* Between the phone menu and a full laptop the header runs out of room. The
   filled control is what goes: it is the one thing that is repeated in the body
   of every page, twice on most of them, so losing it from the bar costs a
   visitor nothing while losing the navigation or the language control would
   cost them the page.

   The threshold was 900px and had to move. The bar carried four links and now
   carries five, so between 900 and about a thousand the right-hand group ran
   past the edge of the window — invisibly, because the body hides sideways
   overflow, which meant the "create an account" control was simply cut off
   rather than obviously broken. Measured across every page in three languages;
   1080 is where the longest of them (Dutch: "Ontwikkelaars" beside "Aanmelden"
   and "Account aanmaken") stops colliding. */
@media (max-width: 1080px) {
  .kopfleiste-innen { gap: 16px; }
  .hauptnav { gap: 16px; }
  .kopf-rechts > .knopf { display: none; }
  .kopf-anmelden { font-weight: 500; color: var(--tinte); }
}

/* Tablet and narrow laptop: the rail folds. Labels move above their content
   and the index becomes two columns rather than three — a real change of
   structure, not the same grid squeezed. */
@media (max-width: 900px) {
  :root { --schiene: 0px; }

  .kopfzeile,
  .laenderzeile,
  .spalten,
  .tafeln { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .kopfzeile { padding-top: 18px; }
  .kopfzeile .marke { padding-top: 0; }
  .seitenkopf { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .seitenkopf .marke { padding-top: 0; }
  .seitenkopf .anzeige { max-width: none; }
  .eingerueckt { margin-left: 0; }
  .kopfzeile-text { max-width: none; }

  .spalten { gap: clamp(28px, 4vw, 40px); }
  .spalten-block:first-of-type { margin-top: 4px; }

  .tafeln { gap: clamp(22px, 4vw, 34px); }
  .tafeln > .platte:nth-of-type(1),
  .tafeln > .platte:nth-of-type(2) { grid-column: 1; }
  .tafeln .platte:nth-of-type(2) { margin-top: 0; }
  .tafeln-worte { grid-column: 1; }

  /* The index keeps its hanging numeral and gives up its third column: the
     title and the argument stack under one another beside the number instead
     of sitting side by side. Placed explicitly rather than by source order,
     because the numeral is a <p> too and auto-placement puts it in the wrong
     cell the moment the columns change. */
  .verzeichnis > li { grid-template-columns: 62px minmax(0, 1fr); gap: 8px 22px; }
  .verzeichnis > li > .ziffer { grid-column: 1; grid-row: 1 / span 2; }
  .verzeichnis > li > .titel-klein { grid-column: 2; grid-row: 1; margin-bottom: 4px; }
  .verzeichnis > li > p:not(.ziffer) { grid-column: 2; grid-row: 2; }

  .eingestanden li { grid-template-columns: minmax(0, 1fr); gap: 6px; }

  .papier-band { grid-template-columns: minmax(0, 1fr); }
  .papier-band-rechts { grid-column: 1; }

  .eroeffnung-gitter { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  /* On a narrow screen the plate flattens further: a 3:2 photograph across
     the full width would push the words off the first screen. */
  .eroeffnung .platte-hoch img,
  .eroeffnung .platte-quer img { aspect-ratio: 16 / 10; }

  .schluss-gitter { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .platte-band img { aspect-ratio: 21 / 9; }

  .fuss-gitter { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fuss-marke { grid-column: 1 / -1; }
}

/* Phone, and the narrow tablet the header cannot serve any other way: below
   this the four links, the language control and two calls to action stop
   fitting on one line, so they become a disclosure instead of being shrunk
   until nobody can hit them. */
/* THE BAR FOLDS AT 860, NOT AT 760.
 *
 * At 768 -- an iPad in portrait, one of the two most common tablet widths there is -- the
 * five navigation links, the sign-in link and the language control still counted as the
 * desktop bar, and the language control finished thirteen pixels past the right edge of the
 * window. The body hides sideways overflow, so it was not obviously broken: it was simply
 * cut off, on every page of the public site, and no test had a window in which to see it.
 * The desktop bar first fits comfortably around 820; 860 leaves room for the languages
 * whose words are longer than English. Measured by geometrie/pruefen.mjs at thirteen widths.
 */
@media (max-width: 860px) {
  body { font-size: 15.5px; }
  .hauptnav, .kopf-anmelden { display: none; }
  .mobilnav { display: block; }
  .kopfleiste { position: relative; }
  .kopfleiste-innen { height: 60px; gap: 12px; justify-content: space-between; }
  .logo { margin-right: auto; }
  .logo .wortmarke { letter-spacing: .16em; font-size: 13px; }
  .kopf-rechts { gap: 8px; }
  .kopf-rechts > .knopf { display: none; }

  .fliess, .fliess-gross { font-size: 16.5px; }
  .verzeichnis > li { grid-template-columns: 44px minmax(0, 1fr); padding-block: 24px; }
  .verzeichnis > li > .ziffer { grid-row: 1; }
  .verzeichnis > li > .titel-klein { grid-row: 2; grid-column: 1 / -1; margin-top: 4px; }
  .verzeichnis > li > p:not(.ziffer) { grid-row: 3; grid-column: 1 / -1; }
  .ziffer { font-size: 26px; }
  .tatsachen { flex-direction: column; gap: 6px; }
  .tatsachen li + li::before { display: none; }
  .fuss-gitter { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .platte-band img { aspect-ratio: 4 / 3; }
  .laendertabelle .name { font-size: 18px; }
}

/* ------------------------------------------------------------------ motion */

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

/* Printing a marketing page is rare and looking stupid when somebody does is
   free to avoid. */
@media print {
  .kopfleiste, .sprachwahl, .mobilnav, .knopf { display: none !important; }
  body { background: #fff; color: #000; }
}

/* The credit line's label, so the sentence beside it reads as a caption rather
   than as another piece of small print. */
.fuss-etikett {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinte-3);
  margin-right: 8px;
}

/* Under about 300 CSS pixels -- a 390px phone at 200% browser zoom, which is a
   setting a great many people never turn off -- a button label that may not wrap
   is a button label that leaves the screen. Below this width the labels wrap and
   the language control keeps its globe and drops its word. */
@media (max-width: 340px) {
  .knopf { white-space: normal; max-width: 100%; }
  .kopfleiste-innen { gap: 6px; }
  .sprachwahl > details > summary > span:not(.pfeil) { display: none; }
  .rahmen { padding-inline: 12px; }
}

/* A 360px Android. The monogram survives, the wordmark does not: the mark is
   the identity and the eleven letters beside it are what push the language
   control off the screen. */
@media (max-width: 430px) {
  .logo .wortmarke { display: none; }
  .kopfleiste-innen { gap: 10px; }
  .sprachwahl > details > summary { padding: 6px 7px; }
  .rahmen { padding-inline: 18px; }
  .mobilnav-blatt { padding-inline: 18px; }
}

/* ------------------------------------------------------------ the pricing page

   Four plans across, and the recommended one told apart by weight, a rule and a
   word — not by a coloured card floating above its neighbours. The badge-on-a-
   raised-box is the shape every SaaS pricing page has, and copying it is how a
   page that is trying to look considered ends up looking generated.

   The plans sit on the page rather than in boxes, separated by hairlines, the
   way the rest of the site separates things. */

.waehlerzeile {
  display: flex;
  align-items: baseline;
  gap: clamp(16px, 3vw, 40px);
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--linie-stark);
}
/* Schrumpfen und umbrechen darf sie sehr wohl.
 *
 * flex:none heisst flex-basis:auto und damit max-content: die Zeile "What KRONENWERK does
 * in your country" stand auf einem 320px-Telefon als EINE Zeile von 327 Pixeln und schob
 * die ganze Preisseite 25 Pixel aus dem Fenster. Gemeint war "nicht wachsen", nicht "nicht
 * schrumpfen". */
.waehlerzeile .marke { flex: 0 1 auto; min-width: 0; }

.waehrungswahl {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}
.waehrungswahl a {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--tinte-3);
  transition: color .14s ease, background .14s ease;
}
.waehrungswahl a:hover { color: var(--tinte); background: var(--grund-2); }
.waehrungswahl a.gewaehlt {
  color: var(--tinte);
  background: var(--grund);
  box-shadow: inset 0 0 0 1px var(--linie-stark);
}
.waehrungswahl .waehrungszeichen { color: var(--messing-text); }
.waehlernachsatz { margin-top: 12px; max-width: 62ch; }

.plaene {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--linie-stark);
}
.plan {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: clamp(24px, 2.4vw, 36px) clamp(16px, 1.8vw, 28px) clamp(28px, 3vw, 40px);
  border-right: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie-stark);
}
.plan:last-child { border-right: none; }

/* The recommended one. A warmer ground and a brass rule along the top — enough
   to find at a glance, not enough to shout. */
.plan-empfohlen {
  background: var(--grund-2);
  box-shadow: inset 0 2px 0 var(--messing);
}

/* Present on every plan, carrying a word on one of them. The empty ones hold
   the line open so all four names sit on the same baseline. */
.plan-marke {
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.62;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--messing-text);
  margin: 0 0 10px;
  min-height: 1.62em;
}

.plan-name {
  font-family: var(--serif);
  font-size: clamp(21px, 1.9vw, 26px);
  font-weight: 400;
  letter-spacing: -.01em;
  margin: 0 0 8px;
  color: var(--tinte);
}
.plan-fuer {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--tinte-2);
  margin: 0 0 22px;
  min-height: 4.3em;   /* four names of different lengths, one row of prices */
}

.plan-preis { display: flex; flex-direction: column; gap: 3px; margin: 0 0 6px; }
.plan-betrag {
  font-family: var(--serif);
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.05;
  color: var(--tinte);
  font-variant-numeric: tabular-nums;
}
.plan-takt {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--tinte-3);
}
.plan-jahr {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--tinte-3);
  margin: 0 0 22px;
  font-variant-numeric: tabular-nums;
}

.plan-knopf { align-self: stretch; justify-content: center; margin-bottom: 22px; }

/*
  Steht anstelle der Kaufschaltflaeche, wenn ein Plan nicht mehr neu verkauft
  wird. Bewusst ruhig und ohne Warnfarbe: es ist keine Stoerung, sondern eine
  Auskunft -- die Karte bleibt sonst genau so, wie sie war, weil das Produkt
  auch genau so geblieben ist.
*/
.plan-hinweis {
  align-self: stretch;
  margin: 0 0 22px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--tinte-3);
}

.plan-merkmale { display: flex; flex-direction: column; gap: 9px; }
.plan-merkmale li {
  position: relative;
  padding-left: 15px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--tinte-2);
}
.plan-merkmale li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 7px; height: 1px;
  background: var(--messing-text);
}
.plan-alles { font-size: 13px; line-height: 1.5; }

/* Two by two before one by one: four plans in a 380px column is four slivers,
   and a single column of four is a lot of scrolling to compare anything.

   The step is at 1180 and not at 1080: at 1080 the four columns were 270px wide
   before their own padding came off, which left about 235px of text -- prices on
   two lines and long capability words broken mid-word. A card has a width below
   which it stops being readable, and that width is what decides the step. */
@media (max-width: 1180px) {
  .plaene { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan:nth-child(2n) { border-right: none; }
  .plan-fuer { min-height: 0; }
}
@media (max-width: 620px) {
  .plaene { grid-template-columns: minmax(0, 1fr); }
  .plan { border-right: none; }
  .plan:not(.plan-empfohlen) .plan-name { margin-top: 0; }
}

/* The heading, the currency row and the plans are one movement. A full band of
   air between each of them made the page read as three unrelated things and put
   the prices below the fold on a laptop. */
.preisband { padding-block: 0 0; }
.preisband + .preisband { padding-top: clamp(22px, 2.4vw, 34px); }
.preisband:first-of-type { padding-top: 0; }
.preisband:last-of-type { padding-bottom: clamp(40px, 4vw, 64px); }

/* The limits, which are the real difference between the plans, set apart from
   the capability list because they are a different kind of fact. */
.plan-grenzen {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--linie);
}
.plan-grenzen li {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .02em;
  color: var(--tinte-2);
}
.plan-baut { font-size: 12.5px; margin: 0 0 12px; }
.plan-offen { font-size: 11.5px; line-height: 1.5; margin-top: 16px; }

/* ============================================================================
   THE SECOND PASS — the subject pages, and the product in its own picture
   ============================================================================

   Everything below arrived with /produkt/rechnungen, /produkt/angebote,
   /produkt/zahlungen, /produkt/buchhaltung and /entwickler. It adds four
   things and no new idea: a frame for a screenshot, a signpost list for the
   hub, a two-column boundary table, and a row of onward links.

   Nothing here introduces a card. The site's argument against cards did not
   stop being true because there are now nine pages instead of five.
   ========================================================================= */

/* --------------------------------------------------------- the screenshot */

/* A screenshot is not a photograph and must not be framed like one. A
   photograph is an image with edges of its own; a screenshot is a rectangle of
   the same white the page is made of, and without a boundary it dissolves into
   the page and reads as part of the layout rather than as a picture of
   something else.

   So: a hairline, a shadow shallow enough to be a lift rather than a card, and
   a warm ground behind it so that the application's own near-white sits ON
   something. The radius is the product's, not a marketing radius. */
.schirm {
  margin: 0;
  max-width: 1000px;
}
.schirm img {
  width: 100%;
  border: 1px solid var(--linie);
  border-radius: 6px;
  background: var(--grund-2);
  box-shadow: 0 1px 2px rgba(21, 23, 27, .04),
              0 12px 34px -18px rgba(21, 23, 27, .28);
}
/* The caption under a screenshot runs wider than the caption under a
   photograph. 40ch is right beside a plate in a column; under a screenshot band
   that is a thousand pixels wide it produces a narrow grey stack at the far
   left that reads as a mistake rather than as a caption. */
.schirm .bildunterschrift { margin-top: 14px; max-width: 78ch; }
.schirm-schmal .bildunterschrift,
.schirm-beleg .bildunterschrift { max-width: 40ch; }

/* The wide ones. Bounded rather than full-bleed: a screenshot stretched to a
   1600px viewport is a screenshot nobody can read. */
.schirm-band, .zwischenbild .schirm { max-width: 1060px; }

/* The evidence strip on the invoicing page. It is 1000 × 133 and would look
   like a mistake at the width of the others. */
.schirm-streifen { max-width: 820px; }

/* The customer's estimate page: a tall portrait plate, so it is held narrow.
   470px beside a column of prose on the home page, where it is an impression of
   a document; 640px and centred on the estimates page, where it is the subject
   and a reader should be able to read the total. */
.schirm-schmal { max-width: 470px; }
.schirm-beleg { max-width: 640px; margin-inline: auto; }

/* In the opening panel the screenshot takes the place the photograph had, and
   the caption sits under it in the same voice. */
/* Capped at the file's own width. Without the cap the opening column on a wide
   display stretches a 1200px screenshot past its native size, and an upscaled
   screenshot of a crisp interface is the one thing worse than no screenshot. */
.schirm-eroeffnung { max-width: 1200px; }
.schirm-eroeffnung img { border-radius: 8px; }

/* --------------------------------------------------------- half and half */

/* A picture beside its argument. Used once on the home page, for the estimate
   a customer receives — the one screenshot on the site that is worth reading
   rather than glancing at, so it gets a column instead of a band. */
.halbe {
  display: grid;
  grid-template-columns: var(--schiene) minmax(0, 470px) minmax(0, 1fr);
  gap: clamp(22px, 4vw, 64px);
  align-items: start;
}
.halbe > .schirm { grid-column: 2; }
.halbe-worte { grid-column: 3; padding-top: 6px; }

@media (max-width: 900px) {
  .halbe { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .halbe > .schirm, .halbe-worte { grid-column: 1; }
  .schirm-schmal, .schirm-beleg { max-width: 100%; }
}

/* ------------------------------------------------------------- the signposts */

/* The product hub. Structurally the index list with a link under each entry:
   same grid, same hanging numeral, same hairlines. A different shape here
   would say the four subjects are a different kind of thing from the seven
   sections on the page they lead to, and they are not — they are the same
   thing at a different scale. */
.wegweiser { border-top: 1px solid var(--linie); }
.wegweiser > li {
  display: grid;
  grid-template-columns: var(--schiene) minmax(0, 30ch) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 48px);
  padding-block: clamp(28px, 3.4vw, 46px);
  border-bottom: 1px solid var(--linie);
  transition: background .18s ease;
}
.wegweiser > li:hover { background: var(--grund-2); }
.wegweiser .titel-klein { margin-bottom: 0; }
.wegweiser .titel-klein a { color: inherit; text-decoration: none; }
.wegweiser .titel-klein a:hover { color: var(--messing-text); }
.wegweiser > li > p {
  color: var(--tinte-2);
  font-size: 16px;
  line-height: 1.62;
  margin: 0;
  max-width: 62ch;
}
/* The link goes under the paragraph, in the third column, so the eye finds it
   at the end of the sentence rather than beside the title. */
.wegweiser > li > .pfeil-link { grid-column: 3; margin-top: 4px; }

/* ------------------------------------------------------------ onward links */

/* The row at the foot of a subject page. Three links to the neighbouring
   subjects, on a rule — the alternative was "related pages" as a set of cards,
   which is three boxes saying nothing the three words do not. */
.weiterzeile {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 4vw, 56px);
  padding-top: clamp(20px, 3vw, 32px);
  border-top: 1px solid var(--linie);
}

/* ------------------------------------------------------ the boundary table */

/* Two columns, and the pairing IS the argument: what an agent may prepare, and
   what it may not set in motion. Prose would let a reader skim the half that
   matters. The right column is set in the quieter ink and carries a rule down
   its left edge, so the eye reads across a pair rather than down a list. */
.grenztabelle {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  text-align: left;
}
.grenztabelle th, .grenztabelle td {
  padding: 18px 24px 18px 0;
  border-bottom: 1px solid var(--linie);
  vertical-align: top;
  width: 50%;
}
.grenztabelle thead th {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinte-3);
  padding-block: 16px;
}
.grenztabelle tbody td {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.4;
}
.grenztabelle .nicht {
  padding-left: 24px;
  border-left: 1px solid var(--linie);
  color: var(--tinte-3);
}
.grenztabelle tbody .nicht { text-decoration: line-through;
                             text-decoration-color: var(--linie-stark); }

/* ------------------------------------------------- the phone menu, nested */

/* The four subject pages hang under Product in the phone menu, because the
   phone menu is the only navigation on a phone and a reader who cannot reach
   them from it cannot reach them at all. */
.mobilnav-tief {
  padding-left: 22px !important;
  font-size: 14px;
  color: var(--tinte-2) !important;
}

/* The signposts fold exactly as the index list does, and for the same reason:
   the rail is what the third column hangs off, and below the rail's own
   breakpoint there is no rail to hang off.

   Placed explicitly rather than left to auto-flow. The first version let the
   browser place the four children and, between 900 and 1080, the numeral took
   the narrow column and pushed the title onto a row of its own at the far left
   — a layout nobody wrote and nobody would have seen without looking at a
   tablet. */
@media (max-width: 1080px) {
  .wegweiser > li { grid-template-columns: var(--schiene) minmax(0, 26ch) minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .wegweiser > li { grid-template-columns: 44px minmax(0, 1fr); gap: 6px 18px; }
  .wegweiser > li > .ziffer       { grid-column: 1; grid-row: 1; }
  .wegweiser > li > .titel-klein  { grid-column: 2; grid-row: 1; }
  .wegweiser > li > p             { grid-column: 2; grid-row: 2; }
  .wegweiser > li > .pfeil-link   { grid-column: 2; grid-row: 3; margin-top: 12px; }
}
@media (max-width: 680px) {
  .grenztabelle tbody td { font-size: 17px; }
}

/* ==========================================================================
   DIE VERGLEICHSTAFEL

   Eine lange Tabelle, die gelesen und nicht ueberflogen wird. Drei
   Entscheidungen tragen sie:

   1. DER KOPF BLEIBT STEHEN. Wer bei Zeile vierzig ist, weiss sonst nicht mehr,
      welche Spalte welcher Plan ist, und raet -- position: sticky am th, mit
      einem eigenen Grund darunter, weil ein durchsichtiger klebender Kopf die
      Zeilen darunter durchscheinen laesst.
   2. DER HAKEN IST KEIN KREUZ. Abwesenheit ist ein Strich. Ein Kreuz liest sich
      wie ein Fehler; gesagt wird aber "das gehoert zu einem groesseren Plan",
      und wer zwischen vier Spalten waehlt, soll sich nicht von dreien geruegt
      fuehlen.
   3. AUF DEM TELEFON EINE SPALTE. Vier winzige Spalten sind schlechter als eine.
      Ein Radio-Feld waehlt den Plan, und :has() blendet die anderen aus -- ohne
      Skript, damit die Tafel auch dann lesbar ist, wenn nichts laeuft.
      ========================================================================== */

/* Nur fuer Vorleseprogramme.

   Diese Klasse gab es im Produkt-Stylesheet und nicht in diesem. Der Haken in der
   Tafel traegt daneben das Wort "enthalten", damit ein Vorleseprogramm nicht
   vierzig Zeilen lang schweigt -- und ohne diese Regel stand das Wort SICHTBAR
   neben jedem Haken. Eine fehlende Regel dieser Art faellt in keinem Test auf und
   in jedem Screenshot. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.vergleich { border-top: 1px solid var(--linie); }

.vergleich-rollen { overflow-x: auto; margin-top: 28px; }

.vergleich-tafel {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.vergleich-tafel thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--grund);
  border-bottom: 1px solid var(--linie-stark);
  padding: 12px 10px;
  text-align: center;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--tinte);
}
.vergleich-tafel thead th:first-child { text-align: left; }

.vergleich-tafel tbody th[scope="row"] {
  text-align: left;
  font-weight: 400;
  color: var(--tinte-2);
  padding: 9px 14px 9px 0;
  border-bottom: 1px solid var(--linie);
}

.vergleich-tafel tbody td {
  text-align: center;
  padding: 9px 10px;
  border-bottom: 1px solid var(--linie);
  width: 15%;
}

.vergleich-gruppe th {
  padding: 26px 0 8px;
  text-align: left;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--messing-text);
  border-bottom: 1px solid var(--linie-stark);
}
.vergleich-gruppe th .leise {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tinte-3);
}

.vgl-ja   { color: var(--messing-text); font-size: 15px; }
/* Der Strich fuer "nicht enthalten" stand auf 2.29:1.
   Fuer den Bildschirmleser steht daneben ein sr-only-Wort; fuer jemanden, der
   die Tabelle mit den Augen liest, war das der einzige Hinweis, dass ein Plan
   etwas NICHT kann -- in einer Farbe, die auf dem Papierbogen kaum vom Grund
   zu unterscheiden war. */
.vgl-nein { color: var(--tinte-3); }
.vgl-zahl { color: var(--tinte); font-weight: 600; }

.vergleich-fuss {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--linie);
}
.vergleich-fuss .knopf { display: inline-flex; gap: 8px; align-items: baseline; }

/* Die Planauswahl gibt es nur auf schmalen Schirmen. */
.vergleich-wahl { display: none; }

@media (max-width: 720px) {
  .vergleich-wahl {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 24px 0 0;
    padding: 0;
    border: 0;
  }
  .vergleich-radio { position: absolute; opacity: 0; pointer-events: none; }
  .vergleich-wahl label {
    display: inline-block;
    padding: 7px 12px;
    border: 1px solid var(--linie-stark);
    border-radius: 999px;
    font-family: var(--sans);
    font-size: 13px;
    color: var(--tinte-2);
    cursor: pointer;
  }
  .vergleich-radio:checked + label {
    border-color: var(--messing-text);
    color: var(--messing-text);
    font-weight: 600;
  }
  .vergleich-radio:focus-visible + label { outline: 2px solid var(--messing-text); }

  /* Eine Spalte. Der gewaehlte Plan bleibt, die anderen verschwinden. */
  .vergleich-tafel .sp-STARTER,
  .vergleich-tafel .sp-BUSINESS,
  .vergleich-tafel .sp-SCALE,
  .vergleich-tafel .sp-ENTERPRISE { display: none; }

  .vergleich:has(#vgl-STARTER:checked)    .vergleich-tafel .sp-STARTER,
  .vergleich:has(#vgl-BUSINESS:checked)   .vergleich-tafel .sp-BUSINESS,
  .vergleich:has(#vgl-SCALE:checked)      .vergleich-tafel .sp-SCALE,
  .vergleich:has(#vgl-ENTERPRISE:checked) .vergleich-tafel .sp-ENTERPRISE {
    display: table-cell;
  }

  .vergleich-tafel { font-size: 14px; }
  .vergleich-tafel tbody td { width: 34%; }
  .vergleich-fuss .knopf { flex: 1 1 100%; justify-content: center; }
}

/* Wo :has() fehlt, bleibt die Tafel vierspaltig und scrollt seitwaerts -- das
   ist der Zustand von vorher und nicht schlimmer als eine leere Tabelle. */
@supports not selector(:has(*)) {
  @media (max-width: 720px) {
    .vergleich-wahl { display: none; }
    .vergleich-tafel .sp-STARTER,
    .vergleich-tafel .sp-BUSINESS,
    .vergleich-tafel .sp-SCALE,
    .vergleich-tafel .sp-ENTERPRISE { display: table-cell; }
  }
}

/* ============================================================================
   EIN PLAN ALLEIN  ·  /kanzleien
   ============================================================================

   Dieselbe Karte wie auf der Geschaeftsleiter, aber ohne Nachbarn. Das Raster
   der Leiter ist vierspaltig und wuerde eine einzelne Karte auf ein Viertel der
   Breite pressen, mit drei leeren Vierteln daneben -- was wie eine Tabelle
   aussieht, aus der drei Spalten herausgefallen sind.

   Also eine Spalte, aber nicht die volle Breite: eine Preiskarte, die sich ueber
   einen ganzen Bildschirm zieht, hat ihre Zeilen so weit auseinandergezogen, dass
   der Preis und das, wofuer er gilt, nicht mehr in einem Blick liegen. */
.plaene-einzeln {
  grid-template-columns: minmax(0, 1fr);
  max-width: 30rem;
}
.plaene-einzeln .plan { border-right: none; }

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

/* Der Umfang auf der Kanzleiseite: Ueberschriften und Listen statt einer Tabelle
   mit einer Spalte. Eine einspaltige Vergleichstabelle voller Haken ist eine
   Liste, die vorgibt, ein Vergleich zu sein. */
.kanzlei-umfang { margin-top: 26px; }
.kanzlei-umfang-titel {
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinte-2);
  margin: 0 0 10px;
}

/* Was die Firmenzahl NICHT bedeutet, unter der Zahl in jeder Karte. Leiser als
   die Zahl darueber, weil sie eine Fussnote zu ihr ist und keine zweite Grenze. */
.plan-grenze-nachsatz {
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1.5;
  text-transform: none;
  letter-spacing: 0;
  color: var(--tinte-3);
}

/* Der Verweis von der Karte auf die Tafel. Eine Karte kann acht Zeilen tragen;
   wer die neunte sucht, soll nicht raten muessen, wo sie steht. */
.plan-mehr {
  display: inline-block;
  margin-top: 14px;
  font-size: 13px;
  color: var(--messing-text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.plan-mehr:hover { border-bottom-color: var(--messing-text); }

/* ------------------------------------------------------------------ Preise, zweiter Anlauf

   Die Karten verkaufen und die Tafel beweist -- und beides scheiterte an derselben
   Sache: alles war gleich gewichtet. Vier Karten mit je acht gleich aussehenden Zeilen,
   und darunter fuenfzig Reihen, von denen die meisten vier gleiche Haken trugen. Wer so
   etwas sieht, liest nicht weiter, er ueberfliegt -- und was er dabei mitnimmt, ist:
   die Plaene sind dasselbe.

   Hier wird deshalb nichts hinzugefuegt, sondern nur unterschieden. Die Losung ueber dem
   Namen ist klein und ruhig; die Zeile darunter ist der eine Satz, der gelesen werden
   soll, und traegt entsprechend Gewicht; der Heldensatz steht leise darunter. In der
   Tafel steht der Unterschied oben und offen, das Gemeinsame darunter und zugeklappt.  */

.plan-losung {
  margin: 0 0 .35rem;
  font-size: .72rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tinte-3);
}

.plan-zeile {
  margin: .3rem 0 .2rem;
  font-size: 1.02rem;
  line-height: 1.4;
  font-weight: 500;
  color: var(--tinte);
  text-wrap: balance;
}

.plan-held {
  margin: 0 0 1.1rem;
  font-size: .88rem;
  line-height: 1.45;
}

/* DIE VIER PREISE STEHEN AUF EINER LINIE.
 *
 * Der Text ueber dem Preis ist je Tarif verschieden lang -- Scale braucht drei Zeilen, wo
 * Starter zwei braucht -- und der Preis rutschte damit je Karte um eine halbe Zeilenhoehe
 * nach unten. Ein Preisvergleich, bei dem die Preise nicht auf einer Hoehe stehen, ist
 * keiner: das Auge liest den tiefer stehenden Betrag als etwas anderes als seine Nachbarn,
 * und genau darum geht es auf dieser Seite.
 *
 * Reserviert wird der Platz nur dort, wo mehrere Karten NEBENEINANDER stehen. Untereinander
 * gibt es keine Linie zu halten, und die Reserve waere dann bloss ein Loch.
 */
@media (min-width: 1181px) {
  .plan-zeile { min-height: 4.2em; }
  .plan-held { min-height: 3.9em; }
}
@media (min-width: 621px) and (max-width: 1180px) {
  .plan-zeile { min-height: 2.8em; }
  .plan-held { min-height: 2.6em; }
}

/* Das Land: erst der Wert, dann -- klein -- die Einschraenkung. */

.landeswert {
  margin-top: 1.4rem;
}

.landeswert .marke {
  margin-bottom: .5rem;
}

.landeshinweis {
  margin-top: 1.1rem;
  padding: .7rem .9rem;
  border-left: 2px solid var(--linie-stark);
  background: var(--grund-2);
  font-size: .9rem;
}

.landeshinweis > summary {
  cursor: pointer;
  font-weight: 500;
  list-style: none;
}

.landeshinweis > summary::-webkit-details-marker { display: none; }

.landeshinweis > summary::before {
  content: "+";
  display: inline-block;
  width: 1em;
  color: var(--tinte-3);
}

.landeshinweis[open] > summary::before { content: "\2212"; }

.landeshinweis > p { margin-top: .55rem; }

/* Der gemeinsame Teil der Tafel: vollstaendig, aber nicht zuerst. */

.vergleich-kern {
  margin-top: 1.6rem;
  border-top: 1px solid var(--linie);
  padding-top: 1rem;
}

.vergleich-kern > summary {
  cursor: pointer;
  list-style: none;
  font-size: .92rem;
  color: var(--tinte-3);
}

.vergleich-kern > summary::-webkit-details-marker { display: none; }

.vergleich-kern > summary:hover { color: var(--tinte); }

.vergleich-kern .kern-zu { display: none; }
.vergleich-kern[open] .kern-auf { display: none; }
.vergleich-kern[open] .kern-zu { display: inline; }

.kern-inhalt { margin-top: 1.2rem; }

.kern-inhalt .fliess { margin-bottom: 1.1rem; }

.vergleich-land {
  margin-top: 2rem;
  border-top: 1px solid var(--linie);
  padding-top: 1.4rem;
}

.vergleich-land .fliess { margin-bottom: .9rem; }

/* Die zweite Ueberschrift im Landeskasten: was dieses Land EIGENS verlangt, unter dem,
   was ueberall gilt. Etwas Luft darueber, damit die beiden Listen nicht als eine gelesen
   werden -- das war der ganze Punkt der Trennung. */
.landeswert .marke-zweit { margin-top: 1.15rem; }

/*
  Der Landeskasten auf der Preisseite -- Regeln, die es hier nie gab.

  .landesliste, .landeswert und .landessperre standen nur in kronenwerk.css,
  dem Stilblatt der angemeldeten Anwendung, das die oeffentliche Seite nicht
  laedt. Der Kasten "Was KRONENWERK in Ihrem Land tut" rendert damit fuenf bis
  dreizehn Zeilen ohne Abstand, ohne Aufzaehlungszeichen und ohne Einzug --
  auf einem Telefon laeuft eine Zeile in die naechste. Sichtbar war das nur
  auf der Seite selbst; kein Test prueft Aussehen.

  Portiert statt verlinkt: kronenwerk.css ist 180 KB und traegt die ganze
  Anwendung. Eine oeffentliche Seite laedt sie nicht fuer vier Regeln.
*/
.landeswert {
  margin-top: 26px;
  padding: 20px 22px;
  background: var(--grund-2);
  border: 1px solid var(--linie);
  border-radius: 4px;
}
.landeswert .marke { margin: 0 0 10px; }
.landesliste {
  margin: 0;
  padding-left: 18px;
  list-style: disc;
  color: var(--tinte-2);
  font-size: 15px;
  line-height: 1.65;
}
.landesliste li { margin-bottom: 4px; overflow-wrap: anywhere; }
.landessperre { margin-top: 14px; font-size: 14px; color: var(--tinte-3); }

/*
  Und die lange, ungebrochene Zeichenkette.

  body { overflow-x: hidden } weiter oben verhindert, dass die Seite seitwaerts
  scrollt -- aber es verhindert es, indem es abschneidet. Ein deutsches oder
  niederlaendisches Wortungetuem in einem Plannamen, eine Adresse in einer
  Tabellenzelle, ein Schluessel in der Entwicklerdoku: alles davon lief bei
  320 Pixeln aus dem Fenster und war dann weg, ohne Balken und ohne Hinweis.
  Das Stilblatt der Anwendung sagt genau das an seiner eigenen Stelle. Hier
  fehlte die Entsprechung.
*/
.rahmen, .plan, .kopfzeile-text { min-width: 0; }
.laendertabelle td, .grenztabelle td, .vergleich-tafel th[scope="row"],
.plan-name, .fuss-gruppe a { overflow-wrap: anywhere; }

/*
  Zwei Bedienelemente, die auf einem Telefon keine waren.

  .vergleich-kern > summary hatte sein Dreieck entfernt bekommen und war danach
  nur noch grauer Text, dessen einziger Zustandswechsel :hover war -- den es
  auf einem Telefon nicht gibt. Dahinter liegt die zweite Vergleichstabelle.
  .plan-mehr trug seinen Unterstrich ebenfalls nur bei :hover und ist der
  einzige Weg von einer Plankarte zum Vergleich.

  Beide waren ausserdem unter 24 Pixel hoch (23.6 und 20.8) und damit unter der
  Mindestgroesse, die WCAG 2.2 an eine Flaeche stellt, die jemand mit dem
  Daumen trifft.
*/
.vergleich-kern > summary { padding: 6px 0; }
.vergleich-kern > summary::before {
  content: "+";
  display: inline-block;
  width: 1em;
  color: var(--tinte-3);
}
.vergleich-kern[open] > summary::before { content: "\2212"; }
.plan-mehr { padding: 4px 0; border-bottom-color: currentColor; }
.fuss-gruppe a { display: inline-block; padding: 2px 0; }

/*
  Der Tabellenkopf blieb nie stehen.

  overflow-x:auto macht .vergleich-rollen zum Scrollbehaelter des klebrigen
  Kopfes, und dieser Behaelter scrollt senkrecht nie -- top:0 loeste also gegen
  eine Box auf, die sich nicht bewegt. Unterhalb von 720px ist die Tabelle
  ohnehin auf eine Planspalte reduziert und passt; dort wird der Behaelter
  nicht gebraucht, und der Kopf klebt wieder am Fenster.
*/
@media (max-width: 720px) {
  .vergleich-rollen { overflow-x: visible; }
}


/* ------------------------------------------------------------- Rechtstexte */

/*
  Ein Rechtstext wird GELESEN, von oben nach unten, oft auf dem Telefon, oft
  unter Zeitdruck. Deshalb eine Lesespalte von rund 68 Zeichen, grosszuegige
  Zeilenhoehe, klare Ueberschriften -- und sonst nichts. Keine Kacheln, keine
  Ziffern, kein Schmuck: nichts an einer Datenschutzerklaerung ist eine
  Sequenz, die Nummern braucht, ausser dort, wo der Text selbst nummeriert.
*/
.rechtstext-stand { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.rechtstext-stand .mono { font-family: var(--schrift-mono, ui-monospace, monospace); }

.rechtstext-hinweis {
  max-width: 68ch;
  margin: 0;
  padding: 14px 18px;
  border-left: 3px solid var(--gold);
  background: var(--flaeche-tief);
  color: var(--tinte-2);
  font-size: 14.5px;
  line-height: 1.6;
}

.rechtstext-betreiber { max-width: 68ch; }
.rechtstext-betreiber p { margin: 0 0 8px; line-height: 1.6; }
.rechtstext-betreiber .rechtstext-zeile { display: block; }

.rechtstext { max-width: 68ch; }
.rechtstext h2 {
  font-size: 20px;
  line-height: 1.3;
  margin: 44px 0 12px;
  text-wrap: balance;
}
.rechtstext h3 { font-size: 16px; margin: 28px 0 8px; }
.rechtstext p, .rechtstext li { line-height: 1.7; font-size: 15.5px; color: var(--tinte-2); }
.rechtstext p { margin: 0 0 14px; }
.rechtstext ul, .rechtstext ol { padding-left: 1.3em; margin: 0 0 14px; }
.rechtstext li { margin-bottom: 6px; }
.rechtstext table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 14.5px; }
.rechtstext th, .rechtstext td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--linie); }
.rechtstext th { color: var(--tinte-3); font-weight: 500; font-size: 12.5px; letter-spacing: 0.04em; text-transform: uppercase; }
.rechtstext .tabelle-rollt { overflow-x: auto; }
.rechtstext strong { color: var(--tinte); }
.rechtstext .offen {
  border-left: 3px solid var(--tinte-4);
  padding: 10px 14px;
  margin: 0 0 14px;
  color: var(--tinte-3);
  font-size: 14px;
}

/* Der berechnete Landesstand -- eine Tafel, dann zwei Listen. Ruhig: es ist eine
   Auskunft, keine Werbung. */
.landesstand-tafel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px 28px;
  margin: 0 0 28px;
  padding: 0;
}
.landesstand-tafel div { border-top: 1px solid var(--linie); padding-top: 12px; }
.landesstand-tafel dt {
  font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--tinte-3); margin: 0 0 6px;
}
.landesstand-tafel dd { margin: 0; font-size: 1rem; line-height: 1.45; }
.landesstand-listen { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; }
.landesstand-zeile { margin: 8px 0 0; font-size: 0.9rem; color: var(--tinte-2); }

/* ======================================================================
   WISSEN — die Ratgeber-, Entwickler- und Werkzeugseiten.
   Dieselbe Sprache wie der Rechtstext (68ch, ruhige Tabellen), dazu ein
   Inhaltsverzeichnis am Rand, Hinweiskaesten, Statusmarken, Code und die
   Verweislisten. Kein Skript; alles, was hier steht, ist HTML und CSS.
   ====================================================================== */
.wissen-krumen > * + *::before { content: "\203A"; margin: 0 8px; color: var(--tinte-3); }
.wissen-krumen { font-size: 13px; color: var(--tinte-3); margin: 0 0 18px; display: flex; gap: 8px; flex-wrap: wrap; }
.wissen-krumen a { color: var(--tinte-3); text-decoration: none; }
.wissen-krumen a:hover { color: var(--tinte); text-decoration: underline; }
.wissen-stand { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.wissen-status {
  font-family: var(--schrift-mono, ui-monospace, monospace); font-size: 11.5px; letter-spacing: .06em;
  text-transform: uppercase; padding: 3px 8px; border: 1px solid var(--linie-stark); border-radius: 3px;
  color: var(--tinte-2);
}
.wissen-status-supported { border-color: #2E7D5B; color: #2E7D5B; }
.wissen-status-supported-with-limitations { border-color: #B26A00; color: #B26A00; }
.wissen-status-not-yet-ready { border-color: #9AA1AB; color: var(--tinte-3); }
.wissen-status-requires-professional-confirmation { border-color: var(--messing, #A07A2B); color: var(--messing, #A07A2B); }

.wissen-gitter { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
@media (min-width: 960px) {
  .wissen-gitter { grid-template-columns: 220px minmax(0, 1fr); align-items: start; }
  .wissen-seite { position: sticky; top: 84px; }
}
.wissen-verzeichnis { list-style: none; padding: 0; margin: 8px 0 0; border-left: 1px solid var(--linie); }
.wissen-verzeichnis li { margin: 0; }
.wissen-verzeichnis a {
  display: block; padding: 5px 12px; font-size: 13.5px; color: var(--tinte-2); text-decoration: none;
  border-left: 2px solid transparent; margin-left: -1px; line-height: 1.4;
}
.wissen-verzeichnis a:hover { color: var(--tinte); border-left-color: var(--messing, #A07A2B); }

.wissen-text { max-width: 72ch; }
.wissen-text h2 { scroll-margin-top: 90px; }
.wissen-text h3 { scroll-margin-top: 90px; }
.wissen-text p.lead { font-size: 18px; line-height: 1.6; color: var(--tinte); margin: 0 0 22px; }
.wissen-text aside { border-left: 3px solid var(--linie-stark); padding: 10px 14px; margin: 0 0 18px; color: var(--tinte-2); background: var(--grund-2); }
.wissen-text aside p:last-child { margin-bottom: 0; }
.wissen-text aside.hinweis { border-left-color: var(--messing, #A07A2B); }
.wissen-text aside.warnung { border-left-color: #B26A00; }
.wissen-text aside.antwort { border-left-color: #2E7D5B; }
.wissen-text aside.stand { border-left-color: var(--tinte-4); font-size: 14px; }
.wissen-text pre {
  background: #15171B; color: #E9E6DF; padding: 14px 16px; border-radius: 4px; overflow-x: auto;
  font-family: var(--schrift-mono, ui-monospace, monospace); font-size: 13px; line-height: 1.55; margin: 0 0 18px;
}
.wissen-text code { font-family: var(--schrift-mono, ui-monospace, monospace); font-size: .92em; }
.wissen-text p code, .wissen-text li code, .wissen-text td code { background: var(--grund-3); padding: 1px 5px; border-radius: 3px; }
.wissen-text pre code { background: none; padding: 0; font-size: inherit; }
.wissen-text dl { margin: 0 0 18px; }
.wissen-text dt { font-weight: 500; color: var(--tinte); margin-top: 10px; }
.wissen-text dd { margin: 4px 0 0; color: var(--tinte-2); line-height: 1.6; }
.wissen-text .status { font-family: var(--schrift-mono, ui-monospace, monospace); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 2px 6px; border: 1px solid var(--linie-stark); border-radius: 3px; white-space: normal; display: inline-block; max-width: 100%; line-height: 1.5; }
.wissen-text .status-supported { color: #2E7D5B; border-color: #2E7D5B; }
.wissen-text .status-limited { color: #B26A00; border-color: #B26A00; }
.wissen-text .status-not-yet { color: var(--tinte-3); }
.wissen-text .status-confirm { color: var(--messing, #A07A2B); border-color: var(--messing, #A07A2B); }
.wissen-text .fragen h3 { font-size: 16px; margin: 22px 0 6px; }
.wissen-text .fragen h2 { margin-top: 40px; }
.wissen-text table th:first-child, .wissen-text table td:first-child { padding-left: 0; }

.wissen-speichen, .wissen-quellen { margin-top: 44px; border-top: 1px solid var(--linie); padding-top: 22px; }
.wissen-quellen ol { padding-left: 1.3em; font-size: 14px; }
.wissen-quellen li { margin-bottom: 6px; color: var(--tinte-2); }
.wissen-liste { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 14px; }
.wissen-liste li { display: grid; gap: 3px; }
.wissen-liste a { color: var(--tinte); font-weight: 500; text-decoration: none; }
.wissen-liste a:hover { text-decoration: underline; }
.wissen-liste span { color: var(--tinte-3); font-size: 14px; line-height: 1.5; }
@media (min-width: 720px) { .wissen-verwandt { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.wissen-aufruf .platte-quer { padding: 24px 0; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.wissen-aufruf .knopf { margin-right: 10px; }

/* Das Werkzeugformular: ein Formular, eine Antwort, kein Skript. */
.wissen-werkzeug .platte { padding: 24px; }
.werkzeug-formular { display: grid; gap: 14px; grid-template-columns: 1fr; align-items: end; margin: 14px 0 10px; }
@media (min-width: 720px) { .werkzeug-formular { grid-template-columns: minmax(0, 1fr) auto; } .werkzeug-formular label:first-child:nth-last-child(3) { grid-column: 1 / -1; } }
.werkzeug-formular label { display: block; font-size: 13px; color: var(--tinte-3); }
.werkzeug-formular label span { display: block; margin-bottom: 6px; }
.werkzeug-formular input[type=text], .werkzeug-formular select { width: 100%; padding: 10px 12px; border: 1px solid var(--linie-stark); border-radius: 3px; font: inherit; font-variant-numeric: tabular-nums; background: var(--grund); color: var(--tinte); }
.werkzeug-formular input[type=file] { display: block; width: 100%; font: inherit; font-size: 14px; }
.werkzeug-formular button { justify-self: start; }
.wissen-befund { margin: 18px 0 0; padding-top: 18px; border-top: 1px solid var(--linie); }
.wissen-befund .warnung { color: var(--tinte); border-left: 3px solid var(--warn, #b7791f); padding: 8px 12px; background: var(--grund-2); }
.wissen-befund .befund-kopf { margin: 0 0 12px; }
.wissen-befund .befund-kopf .status { font-size: 14px; padding: 5px 10px; }
.befund-daten { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0 0 16px; font-size: 15px; }
.befund-daten dt { color: var(--tinte-3); }
.befund-daten dd { margin: 0; overflow-wrap: anywhere; }
.befund-tabelle { font-size: 14px; }
.befund-tabelle td:first-child, .befund-tabelle td:nth-child(2) { white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.befund-tabelle td:nth-child(2) code { font-size: 12px; }
.wissen-befund h3 { font-size: 16px; margin: 18px 0 8px; }

/* Hinweise ins Wissen, vor der Fussleiste */
.wissen-hinweise { border-top: 1px solid var(--linie); padding: 34px 0 30px; background: var(--grund-2); }
.wissen-hinweise-liste { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 14px 28px; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.wissen-hinweise-liste a { display: block; font-weight: 600; text-decoration: none; color: var(--tinte); }
.wissen-hinweise-liste a:hover { text-decoration: underline; }
.wissen-hinweise-liste span { display: block; font-size: 14px; color: var(--tinte-3); margin-top: 3px; }
.doku-leitfaeden-kopf { margin-top: 26px; }
.wissen-quellen a, .wissen-text p code, .wissen-text li code, .befund-daten dd code { overflow-wrap: anywhere; }
.wissen-text { min-width: 0; overflow-wrap: break-word; }
.wissen-text table { min-width: 520px; }

/* ------------------------------------------------------- Startseite, dritter Anlauf
   ---------------------------------------------------------------------------

   Ty, September 2026: "more professional, more put together, more welcoming".
   The broadsheet stays — the rail, the hairlines, the serif — but the home
   page gains three things it refused to have before: a grid of cards, a
   conversation drawn as one, and a numbered row of steps. Each is the honest
   form for its content (see the comments in start.html), and each sits on a
   warm band so the page reads as a sequence of rooms rather than one long
   sheet. Corners soften across the site at the same time: the filled control,
   the plates and the screenshots take a small radius, because a page whose
   every edge is square is a page that reads as a form.
   ------------------------------------------------------------------------- */

/* Softer edges, site-wide. Done here rather than in the rules above so the
   change is one block that can be read, or reverted, as a whole. */
.knopf { border-radius: 8px; }
.knopf-gross { padding: 15px 28px; }
.sprachwahl > details > summary,
.mobilnav > summary { border-radius: 8px; }
.sprachwahl ul { border-radius: 10px; }
.platte img { border-radius: 10px; }
.schirm img { border-radius: 10px; }
.pfeil-link { font-weight: 500; }

/* The opening gains a wash: brass at seven percent, top right, fading before
   it reaches the words. It is the same wash the closing band already has,
   which is what ties the first screen to the last. */
.eroeffnung {
  background:
    radial-gradient(70% 90% at 92% 0%, rgba(138,106,23,.09) 0%, transparent 60%),
    var(--grund);
}
.eroeffnung-aktionen .pfeil-link { font-size: 15.5px; }

/* A warm band: the off-white step under a section, with hairlines top and
   bottom so it has edges rather than a fade. The section header inside it
   keeps its own rule, which now reads as a rule on paper. */
.abschnitt-warm {
  background: var(--grund-2);
  border-block: 1px solid var(--linie);
}
.abschnitt-warm + .abschnitt-warm { border-top: 0; }
.abschnitt-warm .kopfzeile { border-top-color: var(--linie-stark); }

/* ---- the cards */

.karten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.karte {
  background: var(--grund);
  border: 1px solid var(--linie);
  border-radius: 14px;
  padding: clamp(22px, 2.4vw, 30px);
  box-shadow: 0 1px 2px rgba(21,23,27,.04), 0 14px 34px -26px rgba(21,23,27,.28);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.karte:hover {
  transform: translateY(-2px);
  border-color: var(--messing-hell);
  box-shadow: 0 1px 2px rgba(21,23,27,.05), 0 22px 44px -26px rgba(21,23,27,.34);
}
.karte-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--messing-tief);
  color: var(--messing-text);
  margin-bottom: 18px;
}
.karte-symbol svg { display: block; }
.karte .titel-klein { font-size: clamp(19px, 1.7vw, 22px); margin-bottom: 8px; }
.karte p { margin: 0; color: var(--tinte-2); font-size: 15.5px; line-height: 1.62; }

/* ---- the conversation */

.ki-gitter {
  display: grid;
  grid-template-columns: var(--schiene) minmax(0, .9fr) minmax(320px, 1.1fr);
  gap: clamp(20px, 3vw, 48px);
  align-items: start;
}
.ki-worte { grid-column: 2; padding-top: 4px; }
.plaudern {
  grid-column: 3;
  margin: 0;
}
.plaudern-verlauf {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--grund-2);
  border: 1px solid var(--linie);
  border-radius: 18px;
  padding: clamp(18px, 2vw, 26px);
  box-shadow: 0 1px 2px rgba(21,23,27,.04), 0 18px 40px -28px rgba(21,23,27,.3);
}
.blase {
  max-width: 86%;
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 15px;
  line-height: 1.55;
  position: relative;
}
/* The person's turns sit right, in brass-tinted paper; the assistant's sit
   left, on white with a hairline. The assistant's second answer ends on
   "waiting for your confirmation", which is the whole argument of the section
   drawn as a chat. */
.blase-mensch {
  align-self: flex-end;
  background: var(--messing-tief);
  color: var(--tinte);
  border-bottom-right-radius: 5px;
}
.blase-assistent {
  align-self: flex-start;
  background: var(--grund);
  color: var(--tinte-2);
  border: 1px solid var(--linie);
  border-bottom-left-radius: 5px;
}
.blase-assistent::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--messing);
  margin-right: 9px;
  vertical-align: 1px;
}
.plaudern .bildunterschrift { max-width: none; }

/* ---- the steps */

.schritte {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: schritt;
}
.schritt {
  position: relative;
  background: var(--grund);
  border: 1px solid var(--linie);
  border-radius: 14px;
  padding: clamp(22px, 2.4vw, 30px);
  box-shadow: 0 1px 2px rgba(21,23,27,.04), 0 14px 34px -26px rgba(21,23,27,.28);
}
.schritt-zahl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--tinte);
  color: var(--grund);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 18px;
}
.schritt .titel-klein { margin-bottom: 8px; }
.schritt p { margin: 0; color: var(--tinte-2); font-size: 15.5px; line-height: 1.62; }
/* A thin brass line joins the steps on a wide screen — order, drawn. */
@media (min-width: 901px) {
  .schritt + .schritt::before {
    content: "";
    position: absolute;
    left: calc(-1 * clamp(16px, 2vw, 24px));
    width: clamp(16px, 2vw, 24px);
    top: calc(clamp(22px, 2.4vw, 30px) + 17px);
    height: 1px;
    background: var(--messing);
  }
}

@media (max-width: 1080px) {
  .ki-gitter { grid-template-columns: var(--schiene) minmax(0, 1fr); }
  .ki-worte { grid-column: 2; }
  .plaudern { grid-column: 2; }
}
@media (max-width: 900px) {
  .karten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .schritte { grid-template-columns: minmax(0, 1fr); }
  .ki-gitter { grid-template-columns: minmax(0, 1fr); }
  .ki-worte, .plaudern { grid-column: 1; }
}
@media (max-width: 620px) {
  .karten { grid-template-columns: minmax(0, 1fr); }
  .blase { max-width: 94%; }
}

/* ------------------------------------------------------- Der vierte Anlauf: die Innenseiten
   ---------------------------------------------------------------------------

   Same day, same brief ("more put together"), the rest of the site. Nothing
   below changes a word or a route: the openings get the brass wash the home
   page has, the signpost lists become cards like the home page's, the four
   plans become four cards with the recommended one in a brass frame, the
   free tools get a form that looks like one, the questions get their mark,
   and the footer closes the page instead of trailing off.
   ------------------------------------------------------------------------- */

/* The filled control gains a shadow and lifts a pixel on hover. */
.knopf-voll {
  box-shadow: 0 1px 2px rgba(21,23,27,.08), 0 8px 20px -12px rgba(138,106,23,.55);
  transition: background .14s ease, border-color .14s ease, color .14s ease,
              transform .14s ease, box-shadow .14s ease;
}
.knopf-voll:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(21,23,27,.08), 0 12px 24px -12px rgba(138,106,23,.6); }
.knopf-leer { border-radius: 8px; background: var(--grund); }

/* Every page opening gets the wash the home page opening has. Painted as an
   image only, so the pricing page's paper keeps its own ground underneath. */
main > section:has(> .rahmen > .seitenkopf) {
  background-image: radial-gradient(70% 90% at 92% 0%, rgba(138,106,23,.09) 0%, transparent 60%);
}
.seitenkopf { padding-bottom: clamp(10px, 1.6vw, 22px); }

/* ---- the signposts, as cards (product hub, countries, FAQ, e-invoicing hub) */

.wegweiser {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  border-top: 0;
}
.wegweiser > li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: clamp(22px, 2.4vw, 30px);
  background: var(--grund);
  border: 1px solid var(--linie);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(21,23,27,.04), 0 14px 34px -26px rgba(21,23,27,.28);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.wegweiser > li:hover {
  background: var(--grund);
  transform: translateY(-2px);
  border-color: var(--messing-hell);
  box-shadow: 0 1px 2px rgba(21,23,27,.05), 0 22px 44px -26px rgba(21,23,27,.34);
}
.wegweiser > li > .ziffer {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--messing-text);
  line-height: 1;
  margin: 0 0 4px;
}
.wegweiser > li > p { max-width: none; font-size: 15.5px; }
.wegweiser > li > .pfeil-link { margin-top: auto; padding-top: 6px; }
.papierbogen .wegweiser > li { background: var(--grund); }
@media (max-width: 900px) {
  .wegweiser > li { display: flex; gap: 8px; }
  .wegweiser > li > .pfeil-link { margin-top: 8px; }
}
@media (max-width: 680px) {
  .wegweiser { grid-template-columns: minmax(0, 1fr); }
}

/* ---- the four plans, as cards */

.plaene {
  gap: clamp(14px, 1.6vw, 22px);
  border-top: 0;
  align-items: stretch;
}
.plan {
  background: var(--grund);
  border: 1px solid var(--linie-stark);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(21,23,27,.04), 0 16px 36px -28px rgba(21,23,27,.3);
}
.plan:last-child, .plan:nth-child(2n), .plaene-einzeln .plan { border-right: 1px solid var(--linie-stark); }
.plan-empfohlen {
  background: var(--grund);
  border-color: var(--messing);
  box-shadow: 0 0 0 1px var(--messing), 0 22px 44px -26px rgba(138,106,23,.45);
}
/* The same box on every card — padding included — so the four names keep one
   baseline; only the recommended one paints it. */
.plan-marke { padding: 3px 0; align-self: flex-start; min-height: calc(1.62em + 6px); }
.plan-empfohlen .plan-marke {
  background: var(--messing-tief);
  color: var(--messing-text);
  border-radius: 999px;
  padding-inline: 10px;
}
.plan-knopf { border-radius: 10px; }
.plan-empfohlen .plan-knopf { background: var(--messing); color: #FFF9EC; }
.plan-empfohlen .plan-knopf:hover { background: var(--messing-text); }
@media (max-width: 620px) {
  .plan { border-right: 1px solid var(--linie-stark); }
}

/* ---- the free tools: a form that looks like one */

.wissen-werkzeug .platte {
  padding: clamp(20px, 2.4vw, 30px);
  background: var(--grund-2);
  border: 1px solid var(--linie);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(21,23,27,.04), 0 16px 36px -28px rgba(21,23,27,.3);
}
.werkzeug-formular label { font-size: 13.5px; color: var(--tinte-2); }
.werkzeug-formular label span { font-weight: 500; }
.werkzeug-formular input[type=text],
.werkzeug-formular select {
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--grund);
  box-shadow: inset 0 1px 2px rgba(21,23,27,.04);
}
.werkzeug-formular input[type=text]:focus,
.werkzeug-formular select:focus { border-color: var(--messing); outline: none; box-shadow: 0 0 0 3px var(--messing-tief); }
.werkzeug-formular input[type=file] {
  padding: 10px 12px;
  border: 1px dashed var(--linie-stark);
  border-radius: 10px;
  background: var(--grund);
  color: var(--tinte-2);
}
.werkzeug-formular input[type=file]::file-selector-button {
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  padding: 7px 12px;
  margin-right: 12px;
  border: 1px solid var(--linie-stark);
  border-radius: 8px;
  background: var(--grund);
  color: var(--tinte);
  cursor: pointer;
}
.werkzeug-formular input[type=file]::file-selector-button:hover { border-color: var(--messing); color: var(--messing-text); }
.werkzeug-formular button { border-radius: 10px; }

/* ---- the questions: a mark in the rail, a tint on hover */

.fragen > li { transition: background .18s ease; border-radius: 10px; }
.fragen > li:hover { background: var(--grund-2); }
.fragen > li::before {
  content: "?";
  grid-column: 1;
  grid-row: 1 / span 2;
  justify-self: end;
  font-family: var(--serif);
  font-size: clamp(30px, 3vw, 40px);
  font-weight: 300;
  line-height: 1;
  color: var(--messing);
}
@media (max-width: 900px) { .fragen > li::before { display: none; } }

/* ---- related pages on the knowledge pages: cards */

.wissen-verwandt li {
  padding: 20px 22px;
  background: var(--grund);
  border: 1px solid var(--linie);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(21,23,27,.04), 0 14px 34px -26px rgba(21,23,27,.28);
  transition: transform .18s ease, border-color .18s ease;
}
.wissen-verwandt li:hover { transform: translateY(-2px); border-color: var(--messing-hell); }
.wissen-hinweise-liste li {
  padding: 16px 18px;
  background: var(--grund);
  border: 1px solid var(--linie);
  border-radius: 12px;
}

/* ---- the footer closes the page */

.fussleiste {
  background:
    radial-gradient(60% 80% at 0% 100%, rgba(138,106,23,.08) 0%, transparent 60%),
    var(--grund-2);
}
.fuss-marke .mark { width: 40px; }
.fuss-marke .leise { font-family: var(--serif); font-size: 17px; color: var(--tinte-2); max-width: 22ch; }
.fuss-gruppe a { transition: color .14s ease; }
/* Seven groups since the language column joined: the brand and six lists on one
   row, so the languages no longer drop to a row of their own. */
.fuss-gitter { grid-template-columns: minmax(0, 1.4fr) repeat(6, minmax(0, 1fr)); gap: clamp(22px, 2.6vw, 40px); }
@media (max-width: 1080px) {
  .fuss-gitter { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fuss-marke { grid-column: 1 / -1; }
}
@media (max-width: 900px) { .fuss-gitter { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .fuss-gitter { grid-template-columns: minmax(0, 1fr); } }

/* ---- the consent bar for the advertising tag (fragments/werbung.html)
   Present only while the browser has not answered, and only when a tag is
   configured at all. Fixed to the bottom, in paper on a hairline, so it neither
   covers the page nor pretends to be part of it. */

.einwilligung {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background: var(--grund);
  border-top: 1px solid var(--linie-stark);
  box-shadow: 0 -12px 32px -20px rgba(21,23,27,.25);
}
.einwilligung-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.einwilligung-text {
  margin: 0;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--tinte-2);
  max-width: 72ch;
}
.einwilligung-text a { color: var(--messing-text); text-decoration: underline; text-underline-offset: 3px; }
.einwilligung-knoepfe { display: flex; gap: 10px; flex-shrink: 0; }
@media (max-width: 720px) {
  .einwilligung-zeile { flex-direction: column; align-items: stretch; gap: 12px; }
  .einwilligung-knoepfe { justify-content: flex-end; }
}