/* ===========================================================================
   Taxinio — Stylesheet
   Eine Datei, keine Abhängigkeiten, mobile first.
   Schriften werden in assets/fonts.css lokal eingebunden.

   Aufbau
     01  Farben und Maße
     02  Grundlagen
     03  Typografie
     04  Kopf und Navigation
     05  Abschnitte und Raster
     06  Schaltflächen
     07  Hero und Vertrauensleiste
     08  Ledger
     09  Karten, Listen, Auszeichnungen
     10  Positionsliste
     11  Reifegradstufen
     12  Ablaufschritte
     13  FAQ
     14  Beitragskarten
     15  Formular und HubSpot
     16  Fließtext für Rechtstexte
     17  Footer
     18  Einwilligungsbanner
     19  Einblenden beim Scrollen
   ======================================================================== */

/* 01  Farben und Maße ---------------------------------------------------- */

:root {
  --papier:        #F8F5F0;
  --papier-2:      #F0EBE2;
  --tinte:         #1C1220;
  --violett:       #4A1A6E;
  --violett-hell:  #6E32A0;
  --gold:          #C9A227;
  --gold-hell:     #E4BE49;

  /* Metallischer Verlauf, abgenommen vom Schwung im Logo: tiefes Messing an
     den Rändern, ein Glanzlicht knapp links der Mitte. Alle fünf Stützstellen
     tragen die Schriftfarbe --tinte mit mindestens 5:1 Kontrast. */
  --gold-tief:     #B0811B;
  --gold-mitte:    #D6B04A;
  --gold-glanz:    #F4E094;
  --gold-kante:    #A87C1A;
  --verlauf-gold: linear-gradient(
    100deg,
    var(--gold-tief)  0%,
    var(--gold-mitte) 24%,
    var(--gold-glanz) 46%,
    #D3AC44           70%,
    #B08420          100%
  );

  --text:          #241A2B;
  --text-schwach:  #5F5468;
  --linie:         rgba(28, 18, 32, .13);
  --linie-stark:   rgba(28, 18, 32, .28);

  --sans:  'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --mono:  'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --wrap:       1220px;
  --wrap-innen: clamp(1.15rem, 4vw, 2.5rem);
  --radius:     4px;
  /* Innenabstand der Karten. Als Variable, weil das Personenbild ihn wieder
     herausrechnen muss, um bündig am Kartenrand zu sitzen. */
  --card-innen: clamp(1.4rem, 2.6vw, 2.1rem);
  --band-y:  clamp(3.25rem, 7vw, 6rem);
}

/* 02  Grundlagen --------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--papier);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; display: block; }

hr.divider {
  border: 0;
  height: 1px;
  background: var(--linie);
  margin: 1.8rem 0;
}

::selection { background: var(--gold); color: var(--tinte); }

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--tinte);
  color: var(--papier);
  padding: .8rem 1.2rem;
  text-decoration: none;
}
.skip:focus { left: 0; }

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

/* 03  Typografie --------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--sans);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.022em;
  margin: 0 0 .6em;
  text-wrap: balance;
  /* Deutsche Komposita wie "Wirtschaftsprüferkanzleien" sind in Schaugröße
     breiter als ihre Spalte. Ohne Silbentrennung bricht der Browser mitten im
     Wort um. Die Seite ist mit lang="de" ausgezeichnet, also trennt er an den
     richtigen Stellen und setzt einen Trennstrich.

     hyphenate-limit-chars hält kurze Wörter davon frei: Getrennt wird erst ab
     14 Zeichen und nie näher als fünf Zeichen an einem Wortende. Sonst würde
     in der Überschrift der Startseite "Steu-er- und" stehen. Ältere Browser
     kennen die Angabe nicht und trennen wie bisher — unschön, aber nicht
     kaputt. */
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 14 5 5;
}

h1 { font-size: clamp(2.1rem, 5.1vw, 3.65rem); letter-spacing: -.032em; }
h2 { font-size: clamp(1.6rem, 3.3vw, 2.5rem); letter-spacing: -.026em; }
h3 { font-size: clamp(1.16rem, 1.9vw, 1.45rem); }
h4 { font-size: .95rem; }

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

a { color: var(--violett); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--violett-hell); }

strong, b { font-weight: 700; }

.eyebrow {
  font-family: var(--mono);
  font-size: .705rem;
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--violett);
  margin: 0 0 1rem;
}

.lede {
  font-family: var(--serif);
  font-size: clamp(1.06rem, 1.55vw, 1.25rem);
  line-height: 1.6;
  color: var(--text-schwach);
}

/* Überschriften trennen immer (siehe oben). Im Fließtext lohnt es erst auf
   schmalen Spalten, wo sonst große Löcher zwischen den Wörtern entstehen. */
@media (max-width: 30rem) {
  p, li {
    hyphens: auto;
    -webkit-hyphens: auto;
    hyphenate-limit-chars: 12 4 4;
  }
}

.head      { max-width: 30ch; }
.head--wide{ max-width: 46ch; }

.small {
  font-size: .84rem;
  line-height: 1.55;
  color: var(--text-schwach);
}

.note {
  font-size: .855rem;
  line-height: 1.6;
  color: var(--text-schwach);
  border-left: 2px solid var(--gold);
  padding: .1rem 0 .1rem 1rem;
}

.quote {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.7vw, 2rem);
  line-height: 1.32;
  letter-spacing: -.015em;
  margin: 0;
}
.quote em { font-style: italic; color: var(--gold-hell); }

.hl {
  color: var(--violett);
  background: linear-gradient(transparent 62%, rgba(201, 162, 39, .32) 62%);
}

.tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .04em;
  padding: .3rem .6rem;
  margin: 0 .3rem .45rem 0;
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius);
  color: var(--text-schwach);
}

.stat {
  font-family: var(--mono);
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.1;
  color: var(--violett);
  margin: 0 0 .3rem;
}

/* Wortmarke. Zwei Dateien: die violette Fassung für helle Flächen, eine auf
   Papierweiß umgefärbte fürs dunkle Fußfeld. Beide teilen das Seitenverhältnis
   480:143, deshalb genügt jeweils eine Breitenangabe. */
.brand img {
  width: 152px;
  height: auto;
}

.foot__logo {
  width: 168px;
  height: auto;
  margin-bottom: 1.1rem;
}

/* Inhaltsbilder. width/height stehen im Markup, damit beim Laden nichts
   springt; hier wird nur auf die Spaltenbreite skaliert. */
.bild {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  margin-bottom: 1.2rem;
}

/* 04  Kopf und Navigation ------------------------------------------------ */

.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(248, 245, 240, .92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--linie);
}

.topbar__in {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 74px;
}

.brand {
  color: var(--tinte);
  text-decoration: none;
  flex: none;
}

.navtoggle {
  margin-left: auto;
  font-family: var(--mono);
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: none;
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius);
  color: var(--tinte);
  padding: .55rem .9rem;
  cursor: pointer;
}
.navtoggle[aria-expanded="true"] {
  background: var(--tinte);
  color: var(--papier);
  border-color: var(--tinte);
}

.nav {
  display: none;
  flex-direction: column;
  gap: .2rem;
  padding: .8rem 0 1.3rem;
}
/* position: absolute nimmt das geöffnete Menü aus dem Flexfluss der Kopfzeile
   heraus. Bliebe es ein Flex-Kind, würde es sich neben Wortmarke und
   Menüknopf in die verbleibende Breite quetschen und rechts abgeschnitten;
   so hängt es stattdessen als eigene Fläche unter der Kopfzeile, ohne deren
   Höhe oder die vertikale Zentrierung von Wortmarke und Knopf zu verändern.
   left/right beziehen sich dabei auf die Padding-Kante von .topbar__in, also
   auf den Rand VOR ihrem Innenabstand — deshalb hier padding-inline erneut
   mit demselben Maß wie .wrap, sonst säße das Menü ohne Seitenabstand. */
.nav[data-offen] {
  display: flex;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding-inline: var(--wrap-innen);
  background: var(--papier);
  border-bottom: 1px solid var(--linie);
}

.nav a {
  font-size: .93rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  padding: .6rem 0;
  border-bottom: 1px solid var(--linie);
}
.nav a:hover { color: var(--violett); }
.nav a[aria-current="page"] { color: var(--violett); font-weight: 700; }
/* Die Regel .nav a setzt padding: 0, deshalb bekommt die Schaltfläche ihre
   Innenabstände hier ausdrücklich zurück. */
.nav a.btn {
  border-bottom: 0;
  margin-top: .7rem;
  padding: .72rem 1.2rem;
  text-align: center;
}

/* Sehr schmale Geräte, etwa das Außendisplay faltbarer Telefone. Ohne diese
   Anpassung passen Wortmarke und Menüknopf nicht nebeneinander. */
@media (max-width: 22rem) {
  .topbar__in { gap: .7rem; }
  .brand img { width: 124px; }
  .navtoggle { padding: .5rem .6rem; }
}

@media (min-width: 62rem) {
  .navtoggle { display: none; }
  /* .nav[data-offen] wiederholt, damit die Regel unabhängig vom Menüzustand
     greift: Bleibt das Attribut von einer schmalen Ansicht übrig, sticht es
     sonst dank höherer Selektor-Gewichtung die einfache .nav-Regel aus. */
  .nav,
  .nav[data-offen] {
    display: flex;
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 1.7rem;
    margin-left: auto;
    padding: 0;
    background: none;
    border-bottom: 0;
  }
  .nav a { border-bottom: 0; padding: 0; }
  .nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--gold); }
  .nav a.btn { margin-top: 0; padding: .62rem 1.1rem; box-shadow: none; }
}

/* 05  Abschnitte und Raster ---------------------------------------------- */

.band {
  padding-block: var(--band-y);
  border-top: 1px solid var(--linie);
}
.band:first-of-type { border-top: 0; }

.band--tint { background: var(--papier-2); }

.band--ink {
  background:
    radial-gradient(120% 140% at 88% 0%, rgba(110, 50, 160, .48) 0%, transparent 58%),
    var(--tinte);
  color: var(--papier);
  border-top: 0;
}
.band--ink .eyebrow  { color: var(--gold-hell); }
.band--ink .lede,
.band--ink .small,
.band--ink .note     { color: rgba(248, 245, 240, .74); }
.band--ink .note     { border-left-color: var(--gold-hell); }
/* :not(.btn), sonst würde die Textfarbe die der Schaltflächen überschreiben
   und eine goldene Fläche bekäme goldene Schrift. */
.band--ink a:not(.btn) { color: var(--gold-hell); }
.band--ink .hl       { color: var(--gold-hell); background: none; }
.band--ink .stat     { color: var(--gold-hell); }
.band--ink hr.divider{ background: rgba(248, 245, 240, .18); }

/* Erster Abschnitt einer Unterseite, direkt unter der Kopfzeile. */
.band--first { padding-top: clamp(2.4rem, 5vw, 4.2rem); }

.grid2, .grid3 { display: grid; gap: 2rem; }

/* Ohne min-width: 0 wird eine Rasterspalte mindestens so breit wie ihr
   längstes Wort. Bei Komposita wie "Wirtschaftsprüferkanzleien" schiebt das
   auf schmalen Geräten die ganze Seite zur Seite. */
.grid2 > *, .grid3 > * { min-width: 0; }

@media (min-width: 52rem) {
  .grid2      { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4.5vw, 4rem); }
  .grid2--wide{ grid-template-columns: 1.45fr .85fr; }
  .grid3      { grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
}

/* 06  Schaltflächen ------------------------------------------------------ */

.btnrow {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.7rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--sans);
  font-size: .89rem;
  font-weight: 600;
  letter-spacing: .005em;
  line-height: 1.2;
  padding: .82rem 1.35rem;
  border: 1px solid var(--tinte);
  border-radius: var(--radius);
  background: var(--tinte);
  color: var(--papier);
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, background-color .16s ease, color .16s ease,
              filter .18s ease;
}
.btn:hover  { background: var(--violett); border-color: var(--violett); color: var(--papier); }
.btn:active { transform: translateY(1px); }

.btn--gold {
  /* background-color bleibt als Rückfall stehen, falls der Verlauf nicht
     gezeichnet wird. */
  background-color: var(--gold);
  background-image: var(--verlauf-gold);
  border-color: var(--gold-kante);
  color: var(--tinte);
}
/* Verläufe lassen sich nicht weich überblenden. Der Helligkeitsfilter schon,
   deshalb hebt er beim Überfahren dasselbe Metall an, statt es zu tauschen. */
.btn--gold:hover {
  background-color: var(--gold);
  background-image: var(--verlauf-gold);
  border-color: var(--gold-kante);
  color: var(--tinte);
  filter: brightness(1.08) saturate(1.04);
}

.btn--ghost {
  background: none;
  color: var(--tinte);
  border-color: var(--linie-stark);
}
.btn--ghost:hover {
  background: none;
  color: var(--violett);
  border-color: var(--violett);
}

.band--ink .btn--ghost {
  color: var(--papier);
  border-color: rgba(248, 245, 240, .34);
}
.band--ink .btn--ghost:hover {
  color: var(--tinte);
  background: var(--papier);
  border-color: var(--papier);
}

/* 07  Hero und Vertrauensleiste ------------------------------------------ */

.hero {
  padding-block: clamp(3rem, 7vw, 5.5rem);
  background:
    radial-gradient(115% 130% at 82% -10%, rgba(110, 50, 160, .55) 0%, transparent 60%),
    var(--tinte);
  color: var(--papier);
}
.hero .eyebrow { color: var(--gold-hell); }
.hero .lede    { color: rgba(248, 245, 240, .76); }
.hero .hl      { color: var(--gold-hell); background: none; }
.hero .btn--ghost {
  color: var(--papier);
  border-color: rgba(248, 245, 240, .34);
}
.hero .btn--ghost:hover {
  color: var(--tinte);
  background: var(--papier);
  border-color: var(--papier);
}

.hero__grid { display: grid; gap: 2.6rem; }

/* Raster-Spalten sind von Haus aus mindestens so breit wie ihr Inhalt. Die
   Ledger-Tabelle würde die Spalte damit über die Bildschirmbreite hinaus
   aufziehen, deshalb wird die Mindestbreite hier aufgehoben. */
.hero__grid > * { min-width: 0; }

@media (min-width: 60rem) {
  .hero__grid {
    grid-template-columns: 1.08fr .92fr;
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: center;
  }
}

.trust {
  display: grid;
  gap: 1.4rem;
  margin-top: clamp(2.6rem, 5vw, 4rem);
  padding-top: 2rem;
  border-top: 1px solid rgba(248, 245, 240, .16);
}

@media (min-width: 46rem) {
  .trust { grid-template-columns: repeat(4, 1fr); gap: 1.8rem; }
}

.trust__item {
  font-family: var(--mono);
  font-size: .705rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(248, 245, 240, .5);
}
.trust__item b {
  display: block;
  font-family: var(--sans);
  font-size: .93rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--papier);
  margin-bottom: .3rem;
}

/* 08  Ledger ------------------------------------------------------------- */

.ledger {
  border: 1px solid rgba(248, 245, 240, .2);
  border-radius: var(--radius);
  background: rgba(248, 245, 240, .045);
  overflow: hidden;
}

.ledger__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .35rem 1rem;
  padding: .95rem 1.15rem;
  border-bottom: 1px solid rgba(248, 245, 240, .2);
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(248, 245, 240, .62);
}

.ledger table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}

.ledger td {
  padding: .68rem 1.15rem;
  border-bottom: 1px solid rgba(248, 245, 240, .11);
  vertical-align: top;
}
.ledger tr:last-child td { border-bottom: 0; }

.ledger td.pos {
  width: 1%;
  padding-right: .8rem;
  font-family: var(--mono);
  font-size: .74rem;
  color: rgba(248, 245, 240, .42);
  white-space: nowrap;
}

.ledger td.val {
  width: 1%;
  text-align: right;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ledger tr.sum td {
  border-top: 1px solid rgba(248, 245, 240, .3);
  padding-top: .85rem;
  padding-bottom: .85rem;
  font-weight: 700;
  background: rgba(248, 245, 240, .05);
}
.ledger tr.sum td.val { color: var(--gold-hell); font-size: 1.06rem; }

.ledger__foot {
  margin: 0;
  padding: .95rem 1.15rem;
  border-top: 1px solid rgba(248, 245, 240, .2);
  font-size: .755rem;
  line-height: 1.55;
  color: rgba(248, 245, 240, .55);
}

/* Auf schmalen Bildschirmen zählt jeder Pixel, sonst passt die dritte Spalte
   der Tabelle nicht mehr neben den Text. */
@media (max-width: 26rem) {
  .ledger table { font-size: .82rem; }
  .ledger td,
  .ledger__head,
  .ledger__foot { padding-inline: .75rem; }
}

/* Helle Variante für Abschnitte auf Papiergrund. */
.ledger--paper {
  border-color: var(--linie-stark);
  background: var(--papier);
}
.ledger--paper .ledger__head {
  border-bottom-color: var(--linie-stark);
  color: var(--text-schwach);
  background: var(--papier-2);
}
.ledger--paper td { border-bottom-color: var(--linie); }
.ledger--paper td.pos { color: var(--text-schwach); }
.ledger--paper tr.sum td {
  border-top-color: var(--linie-stark);
  background: var(--papier-2);
}
.ledger--paper tr.sum td.val { color: var(--violett); }
.ledger--paper .ledger__foot {
  border-top-color: var(--linie-stark);
  color: var(--text-schwach);
}

/* 09  Karten, Listen, Auszeichnungen ------------------------------------- */

.card {
  background: var(--papier);
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius);
  padding: var(--card-innen);
}

/* Personenkarte: Das Porträt sitzt bündig an drei Kartenrändern, statt als
   gerahmtes Bildchen in der Polsterung zu schwimmen. */
.card--person { overflow: hidden; }

.card__bild {
  display: block;
  width: calc(100% + 2 * var(--card-innen));
  /* Die globale Regel img { max-width: 100% } würde die Breite oben wieder
     auf die Polsterung zurückstutzen. */
  max-width: none;
  margin: calc(-1 * var(--card-innen)) calc(-1 * var(--card-innen)) 1.25rem;
  /* Hält das Raster auch dann in Form, wenn später ein Foto mit anderem
     Seitenverhältnis eingesetzt wird. */
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.card--person h3 { margin-bottom: .15rem; }
.person__rolle { margin: 0 0 .85rem; }
.band--tint .card { background: var(--papier); }

.card__k {
  font-family: var(--mono);
  font-size: .69rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--violett);
  margin: 0 0 .85rem;
}

.card--ink {
  background:
    radial-gradient(120% 130% at 90% 0%, rgba(110, 50, 160, .5) 0%, transparent 60%),
    var(--tinte);
  border-color: transparent;
  color: var(--papier);
}
.card--ink .card__k { color: var(--gold-hell); }
.card--ink .stat    { color: var(--gold-hell); }
.card--ink .small   { color: rgba(248, 245, 240, .68); }
.card--ink a:not(.btn) { color: var(--gold-hell); }

.ticks {
  list-style: none;
  margin: 1.1rem 0;
  padding: 0;
  font-size: .93rem;
}
.ticks li {
  position: relative;
  padding-left: 1.55rem;
  margin-bottom: .58rem;
  line-height: 1.5;
}
.ticks li::before {
  content: "";
  position: absolute;
  left: .06rem;
  top: .48em;
  width: .52rem;
  height: .27rem;
  border-left: 1.8px solid var(--gold);
  border-bottom: 1.8px solid var(--gold);
  transform: rotate(-45deg);
}

/* 10  Positionsliste ----------------------------------------------------- */

.pos__row {
  display: grid;
  gap: .7rem 2rem;
  padding: 1.9rem 0;
  border-top: 1px solid var(--linie);
}
.pos__row:last-child { border-bottom: 1px solid var(--linie); }

.pos__num {
  font-family: var(--mono);
  font-size: .705rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--violett);
  padding-top: .3rem;
}

.pos__t h3 { margin-bottom: .5rem; }
.pos__t h3 a { color: inherit; }
.pos__t h3 a:hover { color: var(--violett); }
.pos__t p { color: var(--text-schwach); margin-bottom: 0; }

.pos__row .ticks { margin: 0; }

@media (min-width: 58rem) {
  .pos__row { grid-template-columns: 6.5rem minmax(0, 1.15fr) minmax(0, 1fr); }
}

.band--ink .pos__row     { border-color: rgba(248, 245, 240, .16); }
.band--ink .pos__num     { color: var(--gold-hell); }
.band--ink .pos__t p     { color: rgba(248, 245, 240, .72); }

/* 11  Reifegradstufen ---------------------------------------------------- */

.stufen {
  display: grid;
  gap: .55rem;
}

@media (min-width: 54rem) {
  .stufen { grid-template-columns: repeat(5, 1fr); }
}

.stufe {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--sans);
  background: rgba(248, 245, 240, .05);
  border: 1px solid rgba(248, 245, 240, .2);
  border-radius: var(--radius);
  color: rgba(248, 245, 240, .74);
  padding: .85rem 1rem;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.stufe:hover { background: rgba(248, 245, 240, .11); color: var(--papier); }

.stufe span {
  display: block;
  font-family: var(--mono);
  font-size: .655rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  opacity: .68;
  margin-bottom: .3rem;
}
.stufe b {
  display: block;
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.28;
}

/* Dasselbe Metall wie die Schaltflächen, damit die gewählte Stufe und der
   Aufruf darunter nicht wie zwei verschiedene Goldtöne wirken. */
.stufe[aria-selected="true"] {
  background-color: var(--gold);
  background-image: var(--verlauf-gold);
  border-color: var(--gold-kante);
  color: var(--tinte);
}
.stufe[aria-selected="true"] span { opacity: .72; }

.panel {
  margin-top: 1.8rem;
  padding-top: 1.8rem;
  border-top: 1px solid rgba(248, 245, 240, .2);
  max-width: 74ch;
}
.panel h3 { margin-bottom: .7rem; }
.panel p  { color: rgba(248, 245, 240, .76); }
.panel p strong { color: var(--papier); }

/* Falls die Stufen einmal auf hellem Grund stehen. */
.band:not(.band--ink) .stufe {
  background: var(--papier);
  border-color: var(--linie-stark);
  color: var(--text-schwach);
}
.band:not(.band--ink) .stufe:hover { background: var(--papier-2); color: var(--text); }
.band:not(.band--ink) .stufe[aria-selected="true"] {
  background: var(--tinte);
  border-color: var(--tinte);
  color: var(--papier);
}
.band:not(.band--ink) .panel { border-top-color: var(--linie); }
.band:not(.band--ink) .panel p { color: var(--text-schwach); }
.band:not(.band--ink) .panel p strong { color: var(--text); }

/* 12  Ablaufschritte ----------------------------------------------------- */

.steps { display: grid; gap: 0; }

.steps__i {
  display: grid;
  gap: .45rem 1.8rem;
  padding: 1.6rem 0;
  border-top: 1px solid var(--linie);
}
.steps__i:last-child { border-bottom: 1px solid var(--linie); }

.steps__i .k {
  font-family: var(--mono);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--gold);
  line-height: 1;
  padding-top: .18rem;
}

.steps__i .t { font-size: .945rem; color: var(--text-schwach); }
.steps__i .t b {
  display: block;
  font-size: 1.06rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .3rem;
  letter-spacing: -.012em;
}

.steps__i .z {
  font-family: var(--mono);
  font-size: .735rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--violett);
  white-space: nowrap;
}

@media (min-width: 58rem) {
  .steps__i { grid-template-columns: 3.4rem minmax(0, 1fr) 9rem; align-items: start; }
  .steps__i .z { text-align: right; padding-top: .45rem; }
}

/* 13  FAQ ---------------------------------------------------------------- */

.faq details {
  border-top: 1px solid var(--linie);
}
.faq details:last-child { border-bottom: 1px solid var(--linie); }

.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.15rem 2.2rem 1.15rem 0;
  position: relative;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.4;
}
.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "";
  position: absolute;
  right: .35rem;
  top: 1.55rem;
  width: .58rem;
  height: .58rem;
  border-right: 1.8px solid var(--violett);
  border-bottom: 1.8px solid var(--violett);
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); top: 1.75rem; }

.faq summary:hover { color: var(--violett); }

.faq .a {
  padding: 0 2.2rem 1.35rem 0;
  font-size: .93rem;
  line-height: 1.62;
  color: var(--text-schwach);
}

/* 14  Beitragskarten ----------------------------------------------------- */

.artcard {
  display: block;
  padding: 1.5rem;
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius);
  background: var(--papier);
  color: inherit;
  text-decoration: none;
  transition: border-color .16s ease, transform .16s ease;
}
.artcard:hover {
  border-color: var(--violett);
  transform: translateY(-2px);
  color: inherit;
}

.artcard .m {
  display: block;
  font-family: var(--mono);
  font-size: .69rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--violett);
  margin-bottom: .8rem;
}

.artcard h3 { font-size: 1.1rem; margin-bottom: .55rem; }
.artcard p  { font-size: .89rem; color: var(--text-schwach); margin: 0; }

/* 15  Formular und HubSpot ----------------------------------------------- */

.form { display: grid; gap: 1.05rem; }

.field { display: grid; gap: .35rem; }

.field label {
  font-family: var(--mono);
  font-size: .69rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-schwach);
}

.field--row { display: grid; gap: 1.05rem; }
@media (min-width: 34rem) {
  .field--row { grid-template-columns: 1fr 1fr; }
}

.field input,
.field select,
.field textarea {
  font-family: var(--sans);
  font-size: .94rem;
  color: var(--text);
  background: var(--papier);
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius);
  padding: .68rem .8rem;
  width: 100%;
}
.field textarea { resize: vertical; min-height: 6rem; }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--violett); }

.check {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  font-size: .84rem;
  line-height: 1.5;
  color: var(--text-schwach);
}
.check input { margin-top: .22rem; flex: none; }

.field label .pflicht {
  float: right;
  font-size: .92em;
  letter-spacing: .1em;
  color: var(--violett);
  opacity: .75;
}

.field [aria-invalid="true"] { border-color: #A3251F; }

.feldfehler {
  margin: .35rem 0 0;
  font-size: .82rem;
  line-height: 1.45;
  color: #A3251F;
}

.meldung {
  margin: 0 0 1.2rem;
  padding: .8rem 1rem;
  border-left: 2px solid;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .875rem;
  line-height: 1.55;
}
.meldung--fehler {
  border-color: #A3251F;
  background: rgba(163, 37, 31, .07);
  color: #7E1C17;
}

/* Honigtopf gegen automatisierte Einsendungen. Nicht display:none, weil
   manche Automaten genau darauf achten und das Feld dann auslassen. */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Friendly Captcha bringt eigene Gestaltung mit; hier nur der Abstand und
   eine Breitenbegrenzung, damit das Widget den Dialog nicht sprengt. */
.frc-captcha {
  max-width: 100%;
  margin-top: .2rem;
}

/* --- Dialog mit dem Frageformular ---------------------------------------- */

.modal {
  width: min(34rem, calc(100vw - 2rem));
  max-height: min(46rem, calc(100vh - 2rem));
  padding: clamp(1.3rem, 3vw, 1.9rem);
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius);
  background: var(--papier);
  color: var(--text);
  overflow: auto;
}
.modal::backdrop { background: rgba(28, 18, 32, .62); }

/* Ohne JavaScript öffnet der Anker #fragemodal den Dialog über :target.
   Er liegt dann im Textfluss statt als überlagertes Fenster, ist aber
   vollständig bedienbar.

   Die Regel gilt ausdrücklich nur ohne JavaScript. Ungeschützt griff sie
   auch im Normalbetrieb, sobald #fragemodal in der Adresse stand — und das
   steht dort nach jedem Absenden des Formulars. Zwei Folgen: Der Dialog
   saß mit margin: 2rem auto oben im Textfluss statt mittig überlagert, und
   das Schließkreuz wirkte nicht mehr. showModal() beendet zwar den offenen
   Zustand, gegen ein display: block aus :target kommt es aber nicht an. */
html:not(.js) .modal:target {
  display: block;
  margin: 2rem auto;
}

.modal__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.2rem;
}
.modal__kopf h2 {
  font-size: 1.3rem;
  margin: 0;
}

.modal__zu {
  flex: none;
  font-size: 1.5rem;
  line-height: 1;
  text-decoration: none;
  color: var(--text-schwach);
  padding: .1rem .4rem;
  border-radius: var(--radius);
}
.modal__zu:hover { color: var(--text); background: var(--papier-2); }

/* Im Dialog sitzen die Felder enger als auf einer vollen Seite. */
.modal .form { gap: .85rem; }
.modal .field--row { gap: .85rem; }

.meldung--ok {
  border-color: var(--gold);
  background: rgba(201, 162, 39, .1);
  color: var(--text);
}

/* Das HubSpot-Formular (Embed V4) rendert in einem iframe auf
   js-eu1.hsforms.net. Von hier aus lässt sich sein Inneres nicht gestalten,
   Stylesheets reichen nicht über eine fremde Herkunft hinweg. Schrift, Farben
   und Beschriftungen stellst du im Formular-Editor in HubSpot ein.
   Von außen steuerbar ist nur der Platz, den das iframe einnimmt. */
.hs-form-frame {
  /* HubSpot setzt die Höhe erst per Skript, anfangs steht sie auf 0. Ohne
     Mindesthöhe klappt die Karte beim Laden kurz zusammen und springt dann
     auf. */
  min-height: 420px;
}

/* Terminplaner auf danke.php. Gilt dasselbe: Das Innere kommt aus einem
   iframe von HubSpot und wird dort eingestellt, hier steht nur der Rahmen. */
.meetings-iframe-container {
  min-height: 680px;
  /* HubSpot setzt dem iframe eine feste min-width von 312 px. Auf sehr
     schmalen Geräten schöbe das sonst die ganze Seite zur Seite; so bleibt
     das Verschieben auf den Terminplaner beschränkt. */
  overflow-x: auto;
}
.meetings-iframe-container iframe {
  width: 100%;
  border: 0;
}

/* Platzhalter, solange in config.php keine HubSpot-IDs hinterlegt sind. */
.hs-platzhalter {
  border: 1px dashed var(--linie-stark);
  border-radius: var(--radius);
  padding: 1.6rem;
  font-size: .89rem;
  line-height: 1.6;
  color: var(--text-schwach);
}
.hs-platzhalter code {
  font-family: var(--mono);
  font-size: .82em;
  background: var(--papier-2);
  padding: .1em .35em;
  border-radius: 2px;
}

/* Sperre vor einer Einbindung, die eine Einwilligung braucht.
   ----------------------------------------------------------------------
   Sichtbar ist immer genau eines von beidem: die Sperre oder die
   Einbindung dahinter. Welches, entscheidet das Attribut data-einwilligung
   am html-Element. Den Anfangswert setzt PHP aus dem Cookie, danach pflegt
   ihn cookieconsent-start.js.

   Der Selektor mit ~= trifft ein Wort in der Liste, deshalb steht dort
   "notwendig analyse extern" und nicht ein einzelner Wert. */

.einwilligung-sperre {
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius);
  padding: 1.7rem;
  background: var(--papier-2);
}
.einwilligung-sperre p { font-size: .92rem; line-height: 1.65; }
.einwilligung-sperre .btnrow { margin-top: 1.2rem; }

/* Auf der Kontaktseite steht die Sperre bereits in einer Karte. Dort würde
   der eigene Rahmen einen Kasten im Kasten ergeben, also fällt er weg.
   Auf /danke steht sie frei im Band und behält ihn. */
.card > .einwilligung-sperre {
  border: 0;
  padding: 0;
  background: none;
}

/* Frei stehend nicht über die volle Bandbreite laufen lassen, sonst zieht
   sich der kurze Text über die gesamte Seite. */
.wrap > .einwilligung-sperre { max-width: 44rem; }

html[data-einwilligung~="extern"] .einwilligung-sperre[data-benoetigt="extern"] { display: none; }
html:not([data-einwilligung~="extern"]) .hs-form-frame,
html:not([data-einwilligung~="extern"]) .meetings-iframe-container { display: none; }

/* Ohne JavaScript lässt sich nichts freigeben. Dann verschwindet der Knopf,
   und es bleibt der Hinweis mit Mailadresse und Rufnummer stehen. */
html:not(.js) .einwilligung-sperre .btnrow { display: none; }

/* Technologietabellen im Einwilligungsfenster.
   ----------------------------------------------------------------------
   Die Bibliothek setzt auf die Tabelle overflow: hidden. Passt sie nicht in
   die Breite, wird rechts abgeschnitten statt gescrollt — dann fehlen genau
   die Angaben am Zeilenende, die rechtlich verlangt sind. Unterhalb von
   640 Pixeln baut die Bibliothek von sich aus eine Kartendarstellung, die
   bleibt unangetastet. Darüber machen wir die Tabelle scrollbar. */

@media screen and (min-width: 641px) {
  #cc-main .pm__section-table {
    display: block;
    overflow-x: auto;
  }
}

/* Dasselbe Prinzip im Frageformular: Die Sicherheitsprüfung rechnet im
   Browser, ohne JavaScript gibt es keine Lösung und damit kein Absenden.
   Statt eines Knopfes, der ins Leere führt, steht dort ein Hinweis. */
.ohne-js { display: none; }
html:not(.js) .ohne-js {
  display: block;
  font-size: .89rem;
  line-height: 1.6;
  color: var(--text-schwach);
}
html:not(.js) .mit-js { display: none; }

/* 16  Fließtext für Rechtstexte ------------------------------------------ */

.prose { max-width: 68ch; }

/* Rechtstexte laufen über die volle Spaltenbreite, damit sie bündig mit
   Kopf- und Fußbereich stehen. Lange Zeilen brauchen mehr Durchschuss,
   sonst findet das Auge beim Umbruch die nächste Zeile schlechter.

   Nicht max-width: none — dieselbe Klasse sitzt zusammen mit .wrap auf einem
   Element, und da beide gleich stark sind, würde die spätere Regel auch die
   Begrenzung von .wrap aufheben. Die Seite liefe dann über die ganze
   Fensterbreite statt bündig mit Kopf und Fuß. */
.prose--voll {
  max-width: var(--wrap);
  line-height: 1.72;
}
.prose--voll ul { padding-left: 1.4rem; }
.prose h2 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); margin-top: 2.4rem; }
.prose h3 { font-size: 1.08rem; margin-top: 1.8rem; }
.prose h2:first-child,
.prose h3:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--text-schwach); }
.prose ul, .prose ol { padding-left: 1.2rem; margin: 0 0 1.05em; }
.prose li { margin-bottom: .4rem; }

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

.foot {
  background: var(--tinte);
  color: rgba(248, 245, 240, .72);
  padding-block: clamp(2.8rem, 5vw, 4.2rem) 2rem;
  font-size: .89rem;
}

.foot .small  { color: rgba(248, 245, 240, .55); max-width: 34ch; }

.foot__grid {
  display: grid;
  gap: 2.2rem;
  padding-bottom: 2.4rem;
}

@media (min-width: 52rem) {
  .foot__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 2.6rem; }
}

.foot h4 {
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-hell);
  margin-bottom: .9rem;
}

.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: .5rem; line-height: 1.5; }
.foot a  { color: rgba(248, 245, 240, .72); text-decoration: none; }
.foot a:hover { color: var(--papier); text-decoration: underline; }

.foot__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1.2rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(248, 245, 240, .16);
  font-size: .8rem;
  color: rgba(248, 245, 240, .5);
}

/* Rechtliche Verweise stehen am rechten Rand, das Copyright links. Auf
   schmalen Geräten bricht die Zeile um und die Verweise rücken wieder nach
   links, weil margin-left dann ins Leere greift. */
.foot__recht {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.2rem;
  margin-left: auto;
}

/* 18  Einwilligungsbanner -------------------------------------------------
   Vanilla CookieConsent bringt eine eigene Gestaltung mit, die sich über
   Variablen steuern lässt. Hier werden nur die Farben und Rundungen an die
   Seite angeglichen, das Verhalten bleibt unangetastet. */

#cc-main {
  --cc-font-family: var(--sans);
  --cc-bg: var(--papier);
  --cc-primary-color: var(--text);
  --cc-secondary-color: var(--text-schwach);

  --cc-btn-primary-bg: var(--gold);
  --cc-btn-primary-color: var(--tinte);
  --cc-btn-primary-border-color: var(--gold-kante);
  --cc-btn-primary-hover-bg: var(--gold-hell);
  --cc-btn-primary-hover-color: var(--tinte);
  --cc-btn-primary-hover-border-color: var(--gold-kante);

  --cc-btn-secondary-bg: transparent;
  --cc-btn-secondary-color: var(--tinte);
  --cc-btn-secondary-border-color: var(--linie-stark);
  --cc-btn-secondary-hover-bg: var(--papier-2);
  --cc-btn-secondary-hover-color: var(--violett);
  --cc-btn-secondary-hover-border-color: var(--violett);

  --cc-separator-border-color: var(--linie);
  --cc-toggle-on-bg: var(--violett);
  --cc-toggle-off-bg: #9A8FA3;
  --cc-toggle-readonly-bg: var(--linie-stark);
  --cc-link-color: var(--violett);
  --cc-link-hover-color: var(--violett-hell);

  --cc-modal-border-radius: var(--radius);
  --cc-btn-border-radius: var(--radius);
  --cc-overlay-bg: rgba(28, 18, 32, .62);
}

/* Zustimmen und Ablehnen sehen absichtlich gleich aus. Ein hervorgehobener
   Zustimmen-Knopf neben einem blassen Ablehnen-Knopf gilt als unzulässige
   Beeinflussung. Beide bekommen deshalb dasselbe Metall wie die übrigen
   Aufrufe der Seite. */
#cc-main .cm__btn[data-role="all"],
#cc-main .cm__btn[data-role="necessary"],
#cc-main .pm__btn[data-role="all"],
#cc-main .pm__btn[data-role="necessary"] {
  background-color: var(--gold);
  background-image: var(--verlauf-gold);
  border-color: var(--gold-kante);
  color: var(--tinte);
  transition: filter .18s ease;
}
#cc-main .cm__btn[data-role="all"]:hover,
#cc-main .cm__btn[data-role="necessary"]:hover,
#cc-main .pm__btn[data-role="all"]:hover,
#cc-main .pm__btn[data-role="necessary"]:hover {
  filter: brightness(1.08) saturate(1.04);
}

#cc-main .cm__title,
#cc-main .pm__title {
  font-weight: 700;
  letter-spacing: -.022em;
}

/* Ohne JavaScript kann nichts Zustimmungspflichtiges laden, dann wäre der
   Verweis auf die Einstellungen wirkungslos. */
.nur-mit-js { display: none; }
.js .nur-mit-js { display: inline; }

/* 19  Einblenden beim Scrollen ------------------------------------------- */

/* Nur wenn JavaScript läuft, wird überhaupt etwas ausgeblendet. Die Klasse
   setzt ein Einzeiler im <head>, damit ohne JS alles sofort sichtbar ist. */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s ease, transform .55s ease;
}
.js .reveal[data-sichtbar] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media print {
  .topbar, .navtoggle, .skip { display: none; }
  body { background: #fff; color: #000; }
  .band--ink, .hero, .card--ink, .foot { background: #fff !important; color: #000 !important; }
  /* Die helle Wortmarke wäre auf weißem Papier unsichtbar. */
  .foot__logo { display: none; }
  .reveal { opacity: 1; transform: none; }
}