/* =========================================================================
   Sorevly · sorevly.css

   Eine Schrift, zwei Breiten: Mona Sans schmal (wdth 82 bis 88) trägt die
   Überschriften, dieselbe Schrift in normaler Breite den Lesetext. Große
   Grade laufen mit Gewicht 430, fett wird nichts.

   Farbe kommt aus genau einem Akzent. Besucher können ihn auf der
   Startseite umstellen; der Wert steht dann als data-farbe auf <html>.
   Alle sieben Akzente sind gegen #FBFBF8 und #F5F5F2 auf mindestens
   4,5 : 1 gerechnet (Werte in README.md).

   Ebenen: token → basis → layout → teile → seiten → hilfen
   ========================================================================= */

@layer token, basis, layout, teile, seiten, hilfen;

/* ----- Schriften (lokal, keine Verbindung zu Drittanbietern) ------------ */

@font-face {
  font-family: "Mona Sans";
  src: url("../fonts/mona-sans.woff2") format("woff2");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}

/* Ersatzschrift mit den Zeilenmaßen von Mona Sans, damit beim Tausch
   nichts springt. */
@font-face {
  font-family: "Mona Sans Ersatz";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  ascent-override: 109%;
  descent-override: 32%;
  line-gap-override: 0%;
}

/* Nur Ziffern und Punkt: für die Kugel und die Schrittnummern. */
@font-face {
  font-family: "Martian Mono";
  src: url("../fonts/martian-mono-ziffern.woff2") format("woff2");
  font-weight: 100 800;
  font-stretch: 75% 112.5%;
  font-display: swap;
}

/* =========================================================================
   token
   ========================================================================= */
@layer token {
  :root {
    color-scheme: light;   /* bewusst nur hell, auch bei dunklem System */

    --grund: #F5F5F2;
    --flaeche: #FBFBF8;
    --flaeche-tief: #EEEEE9;
    --karte: #FFFFFF;

    --tinte: #171717;
    --text-2: rgb(38 35 35 / .74);   /* 5,9 : 1 auf --grund */
    --text-3: rgb(38 35 35 / .68);   /* 4,9 : 1, auch auf den Tints */
    --linie: rgb(32 32 32 / .11);
    --linie-zart: rgb(32 32 32 / .06);
    --feldrand: rgb(38 35 35 / .5); /* 3 : 1 für Formularfelder */
    --fehler: #B42318;

    --mint: #DFF0D5;
    --pfirsich: #F0DDD5;
    --sand: #EFE6D6;
    --himmel: #D5E7F7;

    /* Blau ist Sorevly. Die anderen Farben setzt [data-farbe]. */
    --akzent: #1A6FD1;
    --akzent-tief: #025DBA;
    --akzent-hell: #3C8DF1;
    --akzent-zart-licht: #DBE5EE;
    --akzent-zart-dunkel: #15283D;

    --akzent-text: var(--akzent);
    --akzent-zart: var(--akzent-zart-licht);
    --auf-akzent: #FBFBF8;
    /* Auf dem Akzent gibt es keine Luft für Transparenz: #1A6FD1 schafft mit
       #FBFBF8 genau 4,78 : 1. Sekundärtext bleibt deshalb deckend. */
    --auf-akzent-2: #FBFBF8;
    --auf-akzent-linie: rgb(251 251 248 / .34);   /* nur Trennlinien */
    --auf-akzent-rand: rgb(251 251 248 / .72);    /* Knopfränder, 3 : 1 */

    /* Drei Lagen: weißer Innenrand, fast unsichtbarer Ring, weicher Wurf */
    --schatten-karte:
      inset 0 0 0 .83px rgb(255 255 255 / .9),
      0 0 0 .83px rgb(33 30 26 / .08),
      0 4px 12px rgb(33 30 26 / .06);
    --schatten-hoch:
      inset 0 0 0 .67px rgb(255 255 255 / .9),
      0 0 0 .67px rgb(33 30 26 / .09),
      0 2px 5.4px rgb(33 30 26 / .04),
      0 14px 28px rgb(33 30 26 / .06);
    --schatten-knopf:
      inset 0 1px 1px rgb(255 255 255 / .24),
      inset 0 -1px 2px rgb(0 0 0 / .1),
      0 0 0 1px rgb(40 40 40 / .12),
      0 3px 4px rgb(20 20 20 / .14);

    /* Form: Knöpfe und Felder 6 px, Karten und Bilder 10 px,
       große Flächen 18 px. Rund nur Farbpunkte und Schalter. */
    --r-klein: 6px;
    --r-mittel: 10px;
    --r-gross: 18px;

    --rand: clamp(1rem, 4vw, 2.5rem);
    --takt: clamp(5.5rem, 3.6rem + 4vw, 7rem);
    --lueke: clamp(2rem, 1.2rem + 2.4vw, 3rem);
    --breite: 76rem;
    --kopf-h: 4.5rem;

    --kurve: cubic-bezier(.23, 1, .32, 1);
    --kurve-std: cubic-bezier(.4, 0, .2, 1);
    --t-sofort: 60ms;
    --t-schnell: 140ms;
    --t-basis: 200ms;
    --t-ausdruck: 300ms;

    --sans: "Mona Sans", "Mona Sans Ersatz", system-ui, sans-serif;
    --mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, monospace;
  }

  :root[data-farbe="violett"] {
    --akzent: #7B53DD; --akzent-tief: #6B40C9; --akzent-hell: #9874FF;
    --akzent-zart-licht: #E6E2EF; --akzent-zart-dunkel: #2B223F;
  }
  :root[data-farbe="pink"] {
    --akzent: #C4347B; --akzent-tief: #B01C6A; --akzent-hell: #EA589B;
    --akzent-zart-licht: #EFDEE4; --akzent-zart-dunkel: #3B1B2A;
  }
  :root[data-farbe="gruen"] {
    --akzent: #037E52; --akzent-tief: #046B45; --akzent-hell: #399F70;
    --akzent-zart-licht: #D8E7DF; --akzent-zart-dunkel: #102B21;
  }
  :root[data-farbe="orange"] {
    --akzent: #B65103; --akzent-tief: #9C4402; --akzent-hell: #D87032;
    --akzent-zart-licht: #EDE1D5; --akzent-zart-dunkel: #38210F;
  }
  :root[data-farbe="weinrot"] {
    --akzent: #A3213F; --akzent-tief: #920732; --akzent-hell: #E56174;
    --akzent-zart-licht: #EBDCDD; --akzent-zart-dunkel: #33171D;
  }
  :root[data-farbe="anthrazit"] {
    --akzent: #334155; --akzent-tief: #263447; --akzent-hell: #7E8EA5;
    --akzent-zart-licht: #DEDFDF; --akzent-zart-dunkel: #1B1E22;
  }


}

/* =========================================================================
   basis
   ========================================================================= */
@layer basis {
  *, *::before, *::after { box-sizing: border-box; }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: calc(var(--kopf-h) + 1rem);
    hanging-punctuation: first last;
  }

  body {
    margin: 0;
    min-height: 100dvh;
    background: var(--grund);
    color: var(--tinte);
    font-family: var(--sans);
    font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
    line-height: 1.55;
    font-weight: 440;
    font-stretch: 100%;
    letter-spacing: .003em;
    font-size-adjust: from-font;
    font-kerning: normal;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  :lang(de) { hyphens: auto; hyphenate-limit-chars: 10 5 4; }
  .lead, .held-unter, .beleg-zeile, figcaption, input, textarea, select { hyphens: manual; }

  h1, h2, h3, h4 {
    margin: 0;
    font-weight: 430;
    text-wrap: balance;
    hyphens: manual;
  }

  p, ul, ol, dl, figure, blockquote { margin: 0; }
  p, li, dd, figcaption, summary { text-wrap: pretty; }

  a { color: inherit; text-decoration-thickness: .07em; text-underline-offset: .2em; }

  img, video, canvas, svg { display: block; max-width: 100%; }
  img { height: auto; }

  button, input, select, textarea {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
  }

  strong { font-weight: 600; }

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

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

  .icon { width: 1.25em; height: 1.25em; flex: none; fill: currentColor; }
}

/* =========================================================================
   layout
   ========================================================================= */
@layer layout {
  .breite {
    width: min(100% - 2 * var(--rand), var(--breite));
    margin-inline: auto;
  }

  .abschnitt { padding-block: var(--takt); }
  .auf-flaeche { background: var(--flaeche); }

  .kopfzeile { max-width: 42rem; margin-bottom: var(--lueke); }
  .kopfzeile > p { margin-top: 1.25rem; color: var(--text-2); max-width: 36em; }

  /* Typografie-Skala: schmal und leicht für die Stimme, normal zum Lesen */
  .anzeige {
    font-size: clamp(2.75rem, 1.15rem + 5.6vw, 5.75rem);
    line-height: .96;
    letter-spacing: -.022em;
    font-stretch: 80%;
    font-weight: 430;
  }
  h2, .titel-2 {
    font-size: clamp(2.125rem, 1.25rem + 3vw, 3.625rem);
    line-height: 1;
    letter-spacing: -.016em;
    font-stretch: 84%;
  }
  h3, .titel-3 {
    font-size: clamp(1.1875rem, 1.1rem + .4vw, 1.4375rem);
    line-height: 1.2;
    letter-spacing: -.004em;
    font-stretch: 96%;
    font-weight: 560;
  }
  .lead {
    font-size: clamp(1.125rem, 1.03rem + .45vw, 1.375rem);
    line-height: 1.45;
    font-weight: 430;
    color: var(--text-2);
    max-width: 32em;
  }
  .klein { font-size: .875rem; line-height: 1.5; }
  .zahl { font-variant-numeric: tabular-nums lining-nums; }
}

/* =========================================================================
   teile
   ========================================================================= */
@layer teile {

  /* ----- Sprunglink ------------------------------------------------------ */
  .sprunglink {
    position: absolute;
    left: .75rem;
    top: -5rem;
    z-index: 100;
    padding: .75rem 1rem;
    border-radius: var(--r-klein);
    background: var(--tinte);
    color: var(--grund);
    font-weight: 560;
    text-decoration: none;
  }
  .sprunglink:focus { top: .75rem; }

  /* ----- Kopf ------------------------------------------------------------ */
  .kopf-halter {
    position: sticky;
    top: 0;
    z-index: 50;
    container-type: scroll-state;
    container-name: kopf;
  }
  .kopf {
    background: var(--grund);
    transition: box-shadow var(--t-basis) var(--kurve-std), background-color var(--t-basis) var(--kurve-std);
  }
  @container kopf scroll-state(stuck: top) {
    .kopf {
      background: color-mix(in srgb, var(--grund) 90%, transparent);
      box-shadow: 0 1px 0 var(--linie);
      backdrop-filter: saturate(1.4) blur(14px);
      -webkit-backdrop-filter: saturate(1.4) blur(14px);
    }
  }
  .kopf.is-stuck {
    background: color-mix(in srgb, var(--grund) 90%, transparent);
    box-shadow: 0 1px 0 var(--linie);
    backdrop-filter: saturate(1.4) blur(14px);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
  }

  .kopf-innen {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    min-height: var(--kopf-h);
  }
  .marke {
    display: inline-flex;
    align-items: center;
    margin-inline-end: auto;
    border-radius: var(--r-klein);
  }
  .marke-logo { width: auto; height: 3.25rem; }

  .nav ul { display: flex; gap: .125rem; list-style: none; margin: 0; padding: 0; }
  .nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding-inline: .8rem;
    border-radius: var(--r-klein);
    color: var(--text-2);
    font-size: .9375rem;
    font-weight: 520;
    text-decoration: none;
    transition: color var(--t-schnell) var(--kurve-std), background-color var(--t-schnell) var(--kurve-std);
  }
  .nav a:hover { color: var(--tinte); background: var(--linie-zart); }
  .nav a[aria-current="page"] { color: var(--tinte); }
  .nav a[aria-current="page"]::after {
    content: "";
    position: absolute;
    inset-inline: .8rem;
    bottom: .45rem;
    height: 2px;
    border-radius: 2px;
    background: var(--akzent);
  }

  .menue-knopf {
    display: none;
    align-items: center;
    gap: .5rem;
    min-height: 2.75rem;
    padding-inline: .9rem;
    border: 1px solid var(--linie);
    border-radius: var(--r-klein);
    background: var(--karte);
    font-weight: 540;
    cursor: pointer;
  }

  @media (max-width: 59.99rem) {
    .kopf-innen .nav, .kopf-innen .kopf-cta { display: none; }
    /* Ohne JavaScript öffnet der Menüknopf nichts: dann die Links zeigen */
    .no-js .kopf-innen .nav { display: block; overflow-x: auto; }
    .no-js .nav a { padding-inline: .5rem; font-size: .875rem; }
    .no-js .menue-knopf { display: none; }
    .menue-knopf { display: inline-flex; }
    .marke-logo { height: 2.875rem; }
  }

  /* ----- Menü (Vollfläche auf dem Handy) --------------------------------- */
  .menue {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: flex;
    flex-direction: column;
    padding: 0 var(--rand) max(1.5rem, env(safe-area-inset-bottom));
    background: var(--grund);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .menue[hidden] { display: none; }
  .menue-kopf {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: var(--kopf-h);
  }
  .menue-liste { list-style: none; margin: 1.5rem 0 0; padding: 0; }
  .menue-liste a {
    display: block;
    padding-block: .4rem;
    font-size: clamp(2.25rem, 9vw, 3.25rem);
    font-stretch: 82%;
    font-weight: 430;
    line-height: 1.1;
    letter-spacing: -.015em;
    text-decoration: none;
  }
  .menue-liste a[aria-current="page"] { color: var(--akzent-text); }
  .menue-fuss { margin-top: auto; padding-top: 2rem; display: grid; gap: 1rem; }
  .menue-fuss .knopf { width: 100%; }
  .menue-fuss p { color: var(--text-2); }

  /* ----- Knöpfe ---------------------------------------------------------- */
  .knopf {
    --k-grund: var(--akzent);
    --k-grund-hover: var(--akzent-tief);
    --k-text: var(--auf-akzent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 3rem;
    padding: .75rem 1.25rem;
    border: 0;
    border-radius: var(--r-klein);
    background: var(--k-grund);
    color: var(--k-text);
    box-shadow: var(--schatten-knopf);
    font-size: 1rem;
    font-weight: 580;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition:
      background-color var(--t-schnell) var(--kurve-std),
      color var(--t-schnell) var(--kurve-std),
      transform var(--t-sofort) var(--kurve-std);
  }
  .knopf:hover { background: var(--k-grund-hover); }
  .knopf:active { transform: translateY(1px) scale(.99); }

  /* auf Akzentgrund: helle Fläche, dunkle Schrift (17 : 1) */
  .knopf-hell {
    --k-grund: var(--auf-akzent);
    --k-grund-hover: #FFFFFF;
    --k-text: #171717;
  }
  .knopf-rand {
    --k-grund: transparent;
    --k-grund-hover: var(--linie-zart);
    --k-text: var(--tinte);
    box-shadow: inset 0 0 0 1px var(--linie);
  }
  .knopf-rand-hell {
    --k-grund: var(--akzent);   /* deckt die Kugel ab, sieht aber wie ein Randknopf aus */
    --k-grund-hover: var(--akzent-tief);
    transition: background-color .8s var(--kurve-std), transform var(--t-sofort) var(--kurve-std);
    --k-text: var(--auf-akzent);
    box-shadow: inset 0 0 0 1px var(--auf-akzent-rand);
  }
  .knopfreihe { display: flex; flex-wrap: wrap; gap: .75rem; }

  @media (max-width: 26rem) {
    .knopf { white-space: normal; text-align: center; }
    .knopfreihe .knopf { flex: 1 1 100%; }
  }

  .textlink {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 2.75rem;
    color: var(--akzent-text);
    font-weight: 580;
    text-decoration: underline;
    text-decoration-thickness: .08em;
    text-underline-offset: .22em;
  }
  .textlink:hover { text-decoration-thickness: .14em; }

  /* ----- Leiste unten (Handy) -------------------------------------------- */
  .cta-leiste {
    position: fixed;
    inset-inline: .75rem;
    bottom: max(.75rem, env(safe-area-inset-bottom));
    z-index: 40;
    display: none;
    transition: transform var(--t-ausdruck) var(--kurve), opacity var(--t-basis) var(--kurve-std);
  }
  .cta-leiste .knopf {
    width: 100%;
    min-height: 3.25rem;
    box-shadow: var(--schatten-knopf), 0 12px 32px rgb(0 0 0 / .22);
  }
  .cta-leiste[data-versteckt] { transform: translateY(160%); opacity: 0; pointer-events: none; }
  .cta-leiste[data-versteckt] .knopf { visibility: hidden; transition: visibility 0s var(--t-ausdruck); }
  @media (max-width: 59.99rem) {
    .cta-leiste { display: block; }
    .fuss { padding-bottom: 6.5rem; }
  }

  /* Safari ab iOS 26 färbt seine untere Leiste nach dem fest stehenden
     Element, das 4 px über dem unteren Rand liegt, und liest dessen
     Hintergrundfarbe. Fehlt so ein Element, nimmt es Pixel von irgendeiner
     Ebene und behält sie: So blieb die Leiste pink, egal welche Farbe
     gewählt war. Unter 11 px Höhe liest Safari die Farbe nicht. */
  .leisten-farbe { display: none; }
  @supports (-webkit-touch-callout: none) {
    @media (max-width: 47.99rem) {
      .leisten-farbe {
        display: block;
        position: fixed;
        inset-inline: 0;
        bottom: -6px;
        z-index: 50;
        height: 12px;
        background-color: var(--akzent);
        pointer-events: none;
      }
    }
  }

  /* ----- Hero ------------------------------------------------------------ */
  .held {
    position: relative;
    isolation: isolate;
    overflow: clip;
    background: var(--akzent);
    color: var(--auf-akzent);
    transition: background-color .8s var(--kurve-std);
  }
  /* Die Kugel liegt als Ebene hinter der Überschrift, seitlich versetzt.
     Mitte und Größe liest kugel.js aus diesen drei Variablen. */
  .held-kugel { position: absolute; inset: 0; z-index: 0; }
  .kugel {
    --kugel-x: .7;
    --kugel-y: .5;
    --kugel-r: .47;
    width: 100%;
    height: 100%;
    color: var(--auf-akzent);
    touch-action: pan-y;
    cursor: grab;
    -webkit-tap-highlight-color: transparent;
  }
  .kugel:active { cursor: grabbing; }
  .held-innen {
    position: relative;
    z-index: 1;
    display: grid;
    align-content: center;
    min-height: min(calc(100svh - var(--kopf-h)), 56rem);
    padding-block: clamp(3.5rem, 2rem + 5vw, 6rem) clamp(3rem, 2rem + 4vw, 5rem);
    pointer-events: none;   /* die Kugel bleibt greifbar, wo kein Text liegt */
  }
  .held-innen > * { pointer-events: auto; }
  .held-text { max-width: 46rem; }
  .held .anzeige {
    font-size: clamp(3.1rem, 1.3rem + 6.6vw, 7.25rem);
    max-width: 6.2em;   /* immer zwei Zeilen: „Geschäft verdient." ist 5,72 em breit */
    /* Ein Hof in der Akzentfarbe hält die Ziffern hinter den Buchstaben zurück */
    text-shadow: 0 0 .28em var(--akzent), 0 0 .1em var(--akzent);
    transition: text-shadow .8s var(--kurve-std);
  }
  .held-unter {
    margin-top: 1.5rem;
    max-width: 27em;
    color: var(--auf-akzent-2);
    font-size: clamp(1.125rem, 1.04rem + .45vw, 1.375rem);
    line-height: 1.45;
    font-weight: 440;
    text-shadow: 0 0 1em var(--akzent), 0 0 .35em var(--akzent);
    transition: text-shadow .8s var(--kurve-std);
  }
  .held .knopfreihe { margin-top: 2.25rem; }

  @media (max-width: 59.99rem) {
    .kugel { --kugel-x: .76; --kugel-y: .27; --kugel-r: .58; opacity: .8; }
    .held-innen { align-content: start; }
    .held-unter { text-shadow: 0 0 .8em var(--akzent), 0 0 .4em var(--akzent), 0 0 .15em var(--akzent); }
  }

  /* ----- Malpalette ------------------------------------------------------ */
  .farbpalette {
    --pal: 9.75rem;
    position: relative;
    width: var(--pal);
    aspect-ratio: 1;
    min-inline-size: 0;
    margin: 2.5rem 0 0;
    padding: 0;
    border: 0;
    rotate: -8deg;
    filter: drop-shadow(0 14px 22px rgb(0 0 0 / .22));
  }
  .palette-form { position: absolute; inset: 0; width: 100%; height: 100%; fill: #FBFBF8; }
  .palette-loch { fill: none; stroke: rgb(0 0 0 / .26); stroke-width: 3; }
  .palette-loch-kante { fill: none; stroke: rgb(255 255 255 / .9); stroke-width: 1.6; }
  .klecks-wahl {
    position: absolute;
    left: var(--x);
    top: var(--y);
    translate: -50% -50%;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    cursor: pointer;
  }
  .klecks-wahl input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
  .farbklecks {
    position: relative;
    width: calc(var(--pal) * .148);
    height: calc(var(--pal) * .133);
    background: var(--f);
    border-radius: 58% 42% 55% 45% / 48% 58% 42% 52%;
    box-shadow: inset -3px -4px 0 rgb(0 0 0 / .14), 0 2px 3px rgb(0 0 0 / .2);
    transition: transform var(--t-basis) var(--kurve), box-shadow var(--t-basis) var(--kurve);
  }
  /* nasser Glanz */
  .farbklecks::after {
    content: "";
    position: absolute;
    left: 20%;
    top: 16%;
    width: 36%;
    height: 26%;
    border-radius: 50%;
    background: rgb(255 255 255 / .55);
    rotate: -22deg;
  }
  .klecks-wahl:nth-of-type(2n) .farbklecks { width: calc(var(--pal) * .137); border-radius: 45% 55% 40% 60% / 55% 45% 60% 40%; }
  .klecks-wahl:nth-of-type(3n) .farbklecks { height: calc(var(--pal) * .144); border-radius: 52% 48% 62% 38% / 42% 60% 40% 58%; }
  .klecks-wahl:hover .farbklecks { transform: scale(1.12); }
  .klecks-wahl input:checked + .farbklecks {
    transform: scale(1.24);
    box-shadow: inset -3px -4px 0 rgb(0 0 0 / .14), 0 0 0 3px #FBFBF8, 0 0 0 5px #171717;
  }
  .klecks-wahl input:focus-visible + .farbklecks { outline: 2px solid #171717; outline-offset: 7px; }
  .palette-mitte {
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    display: grid;
    justify-items: center;
    gap: .1rem;
    margin: 0;
    color: #171717;
    text-align: center;
    line-height: 1.15;
    pointer-events: none;
  }
  .palette-mitte span { color: rgb(38 35 35 / .74); font-size: .75rem; font-weight: 520; }
  .farbwahl-name { font-size: .875rem; font-weight: 600; font-stretch: 92%; }
  @media (min-width: 60rem) {
    .farbpalette {
      position: absolute;
      right: 0;
      bottom: clamp(1.75rem, 5vh, 3.25rem);
      --pal: clamp(9rem, 10.5vw, 10.5rem);
      margin: 0;
    }
  }
  .no-js .held-kugel, .no-js .farbpalette { display: none; }

  /* ----- Farbkleckse beim Farbwechsel ------------------------------------ */
  .klecks-schicht { position: fixed; inset: 0; z-index: 45; overflow: hidden; pointer-events: none; }
  .klecks-flug {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--g);
    height: var(--g);
    margin: calc(var(--g) / -2) 0 0 calc(var(--g) / -2);
    filter: drop-shadow(0 10px 18px rgb(0 0 0 / .3));
    will-change: transform, opacity;
  }
  .klecks-flug svg { display: block; width: 100%; height: 100%; }

  /* ----- Belegzeile ------------------------------------------------------ */
  .beleg { border-bottom: 1px solid var(--linie-zart); }
  .beleg-zeile {
    padding-block: 1.6rem;
    color: var(--text-2);
    font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  }
  .beleg-zeile strong { color: var(--tinte); font-weight: 560; }

  /* ----- Film (Papierentwurf) -------------------------------------------- */
  .film { display: grid; gap: .9rem; }
  .film-rahmen {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--r-gross);
    background: #E7E6E1;
    box-shadow: var(--schatten-hoch);
  }
  .film-rahmen video, .film-rahmen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .35s var(--kurve-std);
  }
  .film-rahmen video.blinzeln { opacity: 0; }
  .film figcaption { color: var(--text-2); font-size: .9375rem; max-width: 40em; }

  /* ----- Bild mit Rahmen ------------------------------------------------- */
  .foto { overflow: hidden; border-radius: var(--r-mittel); background: var(--flaeche-tief); }
  .foto img { width: 100%; height: 100%; object-fit: cover; }
  /* ----- Kacheln (Leistungen) -------------------------------------------- */
  .kacheln { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
  .kachel {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    min-height: 11rem;
    padding: 1.5rem;
    border-radius: var(--r-mittel);
    overflow: hidden;
  }
  .kachel p { color: var(--text-2); max-width: 32em; }
  .kachel-karte { background: var(--karte); box-shadow: var(--schatten-karte); }
  .t-mint { background: var(--mint); }
  .t-pfirsich { background: var(--pfirsich); }
  .t-sand { background: var(--sand); }
  .t-himmel { background: var(--himmel); }
  .kachel .preis-hinweis-klein { margin-top: auto; padding-top: .5rem; color: var(--tinte); font-weight: 560; }

  .kachel-bild { padding: 0; gap: 0; }
  .kachel-bild .kachel-text { padding: 1.5rem 1.5rem 1.25rem; display: grid; gap: .6rem; }
  .kachel-bild .foto { border-radius: 0; flex: 1; min-height: 14rem; }

  @media (min-width: 40rem) {
    .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .k-gross { grid-column: span 2; }
  }
  @media (min-width: 40rem) and (max-width: 63.99rem) {
    .k-gross { display: grid; grid-template-columns: 1fr 1fr; }
    .k-gross .foto { min-height: 100%; }
  }
  @media (min-width: 64rem) {
    .kacheln { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .k-gross { grid-column: 1 / 3; grid-row: 1 / 3; display: grid; grid-template-columns: 1fr 1fr; }
    .k-gross .kachel-text { align-content: start; padding: 1.75rem; }
    .k-gross .foto { min-height: 100%; }
    .k-hoch { grid-column: 3; grid-row: 1 / 3; }
    .k-a { grid-column: 4; grid-row: 1; }
    .k-b { grid-column: 4; grid-row: 2; }
    .k-breit-1 { grid-column: 1 / 3; }
    .k-breit-2 { grid-column: 3 / 5; }
  }

  /* ----- Geräte (Arbeit aus der Praxis) ---------------------------------- */
  .geraete { position: relative; padding: 0 0 12% 0; }
  .geraet-browser {
    overflow: hidden;
    border-radius: var(--r-mittel);
    background: var(--karte);
    box-shadow: var(--schatten-hoch);
  }
  .geraet-browser img { width: 100%; }
  .geraet-telefon {
    position: absolute;
    right: 5%;
    bottom: 0;
    width: 24%;
    min-width: 7.5rem;
    overflow: hidden;
    border: 5px solid #161616;
    border-radius: 1.6rem;
    background: #161616;
    box-shadow: 0 18px 40px rgb(0 0 0 / .22);
  }
  .geraet-telefon img { width: 100%; border-radius: 1.2rem; }

  /* ----- Ablauf ---------------------------------------------------------- */
  .schritte {
    display: grid;
    gap: 2rem 1.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .schritte > li { padding-top: 1.25rem; border-top: 1px solid var(--linie); }
  .schritte h3 { margin-bottom: .5rem; }
  .schritte p { color: var(--text-2); }
  .ziffer {
    display: block;
    margin-bottom: 1.1rem;
    color: var(--akzent-text);
    font-family: var(--mono);
    font-size: .9375rem;
    font-stretch: 87%;
    font-weight: 480;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
  }
  .schiene { display: none; }
  @media (min-width: 40rem) {
    .schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (min-width: 64rem) {
    .schritte { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .schritte > li { border-top: 0; padding-top: 1.5rem; }
    .schiene {
      display: block;
      position: relative;
      height: 2px;
      background: var(--linie);
    }
    .schiene-marke {
      top: 0;
      width: 25%;
      height: 2px;
      background: var(--akzent);
    }
  }

  /* ----- Versprechen (zweite Farbfläche) --------------------------------- */
  .versprechen {
    position: relative;
    isolation: isolate;
    overflow: clip;
    background: var(--akzent);
    color: var(--auf-akzent);
    transition: background-color .6s var(--kurve-std);
  }
  .versprechen-innen { position: relative; padding-block: var(--takt) 2.5rem; }
  @media (min-width: 60rem) { .versprechen-innen { padding-block: var(--takt); } }
  .versprechen-text { max-width: 36rem; }
  .versprechen h2 {
    font-size: clamp(2.75rem, 1.3rem + 4.8vw, 5.25rem);
    font-stretch: 80%;
    line-height: .96;
    letter-spacing: -.022em;
    max-width: 5.2em;
  }
  .versprechen .lead { margin-top: 1.5rem; color: var(--auf-akzent-2); }
  .versprechen-liste {
    display: grid;
    gap: 1.75rem;
    margin: 3rem 0 0;
    padding: 0;
    list-style: none;
  }
  .versprechen-liste li { padding-top: 1.1rem; border-top: 1px solid var(--auf-akzent-linie); }
  .versprechen-liste h3 { margin-bottom: .4rem; }
  .versprechen-liste p { color: var(--auf-akzent-2); }

  /* Tinte: weiß auf schwarz, per screen auf den Akzent gelegt. Damit färbt
     sie sich mit jeder Farbwahl von selbst um. */
  .tinte {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: 68% 50%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 2s linear;
  }
  .tinte.sichtbar { opacity: .95; }
  .tinte-zwei { position: absolute; inset: 0; }
  /* Die Mischung sitzt auf dem Rahmen: Er ist der Teil, der gegen den
     Akzentgrund der Sektion gerechnet wird. */
  /* Die Wolke läuft an keiner Seite gegen eine Kante: Die Maske blendet sie
     aus, bevor der Film oder die Sektion aufhört. */
  .versprechen-bild {
    position: relative;
    margin-top: -2.5rem;
    mix-blend-mode: screen;
    -webkit-mask-image:
      linear-gradient(to bottom, transparent 0%, #000 30%, #000 60%, transparent 95%),
      linear-gradient(to right, transparent 0%, #000 18%, #000 82%, transparent 100%);
    mask-image:
      linear-gradient(to bottom, transparent 0%, #000 30%, #000 60%, transparent 95%),
      linear-gradient(to right, transparent 0%, #000 18%, #000 82%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }
  @media (max-width: 47.99rem) {
    .versprechen-bild .tinte { aspect-ratio: 4 / 3; }
  }
  @media (min-width: 60rem) {
    .versprechen-bild {
      position: absolute;
      z-index: -1;
      inset: 0 0 0 40%;
      margin: 0;
      /* Die Wolke wird groß: links blendet sie aus, bevor sie den Text erreicht */
      -webkit-mask-image:
        linear-gradient(to right, transparent 0%, transparent 12%, #000 42%),
        linear-gradient(to bottom, transparent 0%, #000 16%, #000 80%, transparent 97%);
      mask-image:
        linear-gradient(to right, transparent 0%, transparent 12%, #000 42%),
        linear-gradient(to bottom, transparent 0%, #000 16%, #000 80%, transparent 97%);
    }
    .tinte { height: 100%; aspect-ratio: auto; object-position: 62% 50%; }
  }

  /* ----- Preise ---------------------------------------------------------- */
  .preis-raster { display: grid; gap: 1rem; }
  @media (min-width: 48rem) {
    .preis-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  .preis-foto { display: none; }
  @media (min-width: 72rem) {
    .preis-raster { grid-template-columns: minmax(0, .82fr) minmax(0, 1fr) minmax(0, 1fr); }
    .preis-foto { display: block; }
  }
  .preis-karte {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding: 1.75rem;
    border-radius: var(--r-mittel);
    background: var(--karte);
    box-shadow: var(--schatten-karte);
  }
  .preis-karte.hervor { box-shadow: var(--schatten-hoch), 0 0 0 1.5px var(--akzent); }
  .preis-name { font-size: 1.125rem; font-weight: 560; font-stretch: 96%; }
  .preis {
    font-size: clamp(2.75rem, 2.1rem + 2.4vw, 3.75rem);
    font-stretch: 82%;
    font-weight: 430;
    line-height: 1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums lining-nums;
  }
  .preis-ab { font-size: .5em; font-stretch: 90%; letter-spacing: 0; margin-right: .1em; }
  .preis-fuss { color: var(--text-2); font-size: .9375rem; }
  .preis-liste { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
  .preis-liste li { display: flex; gap: .6rem; align-items: flex-start; }
  .preis-liste .icon { margin-top: .15em; color: var(--akzent-text); width: 1.15em; height: 1.15em; }
  .preis-karte .knopf { margin-top: auto; }
  .preis-foto .foto { height: 100%; }
  .preis-hinweise {
    display: grid;
    gap: .75rem;
    margin-top: 1.25rem;
    padding: 1.5rem;
    border-radius: var(--r-mittel);
    background: var(--flaeche);
    box-shadow: inset 0 0 0 1px var(--linie-zart);
    color: var(--text-2);
  }
  .preis-hinweise strong { color: var(--tinte); }

  /* ----- Fragen ---------------------------------------------------------- */
  .faq-raster { display: grid; gap: var(--lueke); }
  @media (min-width: 60rem) {
    .faq-raster { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
    .faq-raster .kopfzeile { position: sticky; top: calc(var(--kopf-h) + 2rem); align-self: start; margin: 0; }
  }
  .fragen { border-top: 1px solid var(--linie); }
  .frage { border-bottom: 1px solid var(--linie); }
  .frage summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    min-height: 3.75rem;
    padding-block: 1rem;
    list-style: none;
    font-size: 1.0625rem;
    font-weight: 560;
    cursor: pointer;
  }
  .frage summary::-webkit-details-marker { display: none; }
  .frage summary .icon { color: var(--text-3); transition: transform var(--t-ausdruck) var(--kurve); }
  .frage[open] summary .icon { transform: rotate(180deg); }
  .frage-antwort { padding-bottom: 1.4rem; max-width: 38em; color: var(--text-2); }
  .frage-antwort p + p { margin-top: .75rem; }

  /* ----- Kontakt --------------------------------------------------------- */
  .kontakt-raster { display: grid; gap: var(--lueke); }
  @media (min-width: 60rem) {
    .kontakt-raster { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: end; }
  }
  .kontakt h2 {
    font-size: clamp(2.5rem, 1.3rem + 4vw, 4.5rem);
    font-stretch: 80%;
    line-height: .98;
    letter-spacing: -.02em;
    max-width: 7em;
  }
  .kontakt .lead { margin-top: 1.5rem; }
  .kontakt .knopfreihe { margin-top: 2rem; }
  .kontaktdaten { display: grid; gap: .25rem; margin: 0; padding: 0; list-style: none; }
  .kontaktdaten li { display: flex; align-items: center; gap: .75rem; min-height: 2.75rem; color: var(--text-2); }
  .kontaktdaten .icon { color: var(--akzent-text); }
  .kontaktdaten a { color: var(--tinte); font-weight: 540; text-decoration: none; }
  .kontaktdaten a:hover { text-decoration: underline; }

  /* ----- Fuß ------------------------------------------------------------- */
  .fuss {
    padding-block: 3.5rem 2.5rem;
    background: var(--flaeche);
    border-top: 1px solid var(--linie-zart);
  }
  .fuss-raster { display: grid; gap: 2rem; }
  @media (min-width: 48rem) {
    .fuss-raster { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); }
  }
  .fuss-marke img { width: auto; height: 3.75rem; }
  .fuss-marke p { margin-top: 1rem; color: var(--text-2); max-width: 24em; }
  .fuss h2 {
    font-size: .9375rem;
    font-stretch: 100%;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.4;
    margin-bottom: .5rem;
  }
  .fuss ul { display: grid; margin: 0; padding: 0; list-style: none; }
  .fuss li a {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    color: var(--text-2);
    text-decoration: none;
  }
  .fuss li a:hover { color: var(--tinte); text-decoration: underline; }
  .fuss-unten {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem 1.5rem;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--linie-zart);
    color: var(--text-3);
    font-size: .875rem;
  }

  /* ----- Seitenkopf (Unterseiten) ---------------------------------------- */
  .seitenkopf {
    padding-block: clamp(3rem, 2rem + 4vw, 6rem) clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
    border-bottom: 1px solid var(--linie-zart);
  }
  .seitenkopf-raster { display: grid; gap: var(--lueke); align-items: end; }
  @media (min-width: 60rem) {
    .seitenkopf-raster.mit-bild { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  }
  .seitenkopf h1 {
    font-size: clamp(2.75rem, 1.3rem + 5vw, 5.25rem);
    font-stretch: 80%;
    line-height: .96;
    letter-spacing: -.022em;
    max-width: 8em;
  }
  .seitenkopf .lead { margin-top: 1.5rem; }
  .seitenkopf .foto { aspect-ratio: 4 / 3; }
  .seitenkopf .foto.hoch { aspect-ratio: 4 / 5; max-height: 34rem; }

  /* ----- Fließtext (Rechtliches) ----------------------------------------- */
  .prosa { max-width: 44rem; }
  .prosa h2 {
    margin: 3rem 0 .85rem;
    font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
    font-stretch: 90%;
    line-height: 1.1;
  }
  .prosa h2:first-child { margin-top: 0; }
  .prosa h3 {
    margin: 1.75rem 0 .5rem;
    font-size: 1.125rem;
    font-stretch: 100%;
    font-weight: 600;
  }
  .prosa p, .prosa ul, .prosa address { margin: 0 0 1rem; color: var(--text-2); }
  .prosa ul { padding-left: 1.25rem; }
  .prosa li + li { margin-top: .35rem; }
  .prosa address { font-style: normal; }
  .prosa address a { display: inline-block; padding-block: .12em; }
  .prosa a { color: var(--akzent-text); }
  .prosa strong { color: var(--tinte); }
  .stand { margin-top: 3rem; color: var(--text-3); font-size: .875rem; }

  /* ----- Formular -------------------------------------------------------- */
  .formular-raster { display: grid; gap: var(--lueke); align-items: start; }
  @media (min-width: 64rem) {
    .formular-raster { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
    .formular-seite { position: sticky; top: calc(var(--kopf-h) + 1.5rem); }
  }
  .formular {
    display: grid;
    gap: 2.25rem;
    padding: clamp(1.25rem, .8rem + 2.2vw, 2.5rem);
    border-radius: var(--r-gross);
    background: var(--karte);
    box-shadow: var(--schatten-hoch);
  }
  .gruppe { display: grid; gap: 1.25rem; min-inline-size: 0; margin: 0; padding: 0; border: 0; }
  .gruppe legend {
    margin-bottom: .35rem;
    padding: 0;
    font-size: 1.3125rem;
    font-stretch: 90%;
    font-weight: 520;
    line-height: 1.2;
  }
  .feldpaar { display: grid; gap: 1.25rem; }
  @media (min-width: 40rem) { .feldpaar { grid-template-columns: 1fr 1fr; } }
  .feld { display: grid; gap: .4rem; align-content: start; }
  .feld > label, .feld-titel { font-size: .9375rem; font-weight: 560; }
  .feld .pflicht { color: var(--akzent-text); }
  .hilfe { color: var(--text-3); font-size: .875rem; }
  .feld input:not([type="checkbox"]),
  .feld select,
  .feld textarea {
    width: 100%;
    min-height: 3rem;
    padding: .7rem .85rem;
    border: 1px solid var(--feldrand);
    border-radius: var(--r-klein);
    background: var(--karte);
    color: var(--tinte);
    font-size: 1rem;
    line-height: 1.4;
    transition: border-color var(--t-schnell) var(--kurve-std), box-shadow var(--t-schnell) var(--kurve-std);
  }
  .feld textarea { min-height: 8.5rem; resize: vertical; }
  .feld select {
    appearance: none;
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23767472' d='M213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80a8 8 0 0 1 11.32-11.32L128 164.69l74.34-74.35a8 8 0 0 1 11.32 11.32Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .8rem center;
    background-size: 1.1rem;
  }
  .feld input::placeholder, .feld textarea::placeholder { color: var(--text-3); opacity: 1; }
  .feld input:not([type="checkbox"]):focus-visible,
  .feld select:focus-visible,
  .feld textarea:focus-visible {
    outline: 2px solid var(--akzent-text);
    outline-offset: 1px;
    border-color: var(--akzent-text);
  }
  .feld input[type="file"] { padding: .55rem; cursor: pointer; }
  .feld input[type="file"]::file-selector-button {
    margin-right: .85rem;
    padding: .5rem .9rem;
    border: 0;
    border-radius: var(--r-klein);
    background: var(--akzent-zart);
    color: var(--tinte);
    font: inherit;
    font-weight: 560;
    cursor: pointer;
  }
  .fehlertext { display: none; color: var(--fehler); font-size: .875rem; font-weight: 540; }
  .feld :user-invalid, .feld .ungueltig { border-color: var(--fehler); }
  .feld :user-invalid ~ .fehlertext,
  .feld .ungueltig ~ .fehlertext,
  .fehlertext.sichtbar { display: block; }

  .zustimmung {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .8rem;
    align-items: start;
    color: var(--text-2);
    font-size: .9375rem;
  }
  .zustimmung input {
    width: 1.5rem;
    height: 1.5rem;
    margin: .12rem 0 0;
    accent-color: var(--akzent);
    cursor: pointer;
  }
  .zustimmung a { color: var(--akzent-text); }
  .formular-senden { display: grid; gap: .9rem; justify-items: start; }
  .formular-senden p { color: var(--text-3); font-size: .875rem; max-width: 36em; }
  .versteckt-feld { display: none; }
  .formular-meldung {
    justify-self: stretch;
    padding: 1rem 1.15rem;
    border-radius: var(--r-klein);
    background: #FBEFEA;
    box-shadow: inset 0 0 0 1px rgb(180 35 24 / .25);
    color: var(--tinte);
    font-size: .9375rem;
    line-height: 1.5;
  }
  .formular-meldung[hidden] { display: none; }
  .formular-meldung a { color: var(--fehler); font-weight: 560; }

  .seitenkasten {
    display: grid;
    gap: 1.25rem;
    padding: 1.5rem;
    border-radius: var(--r-mittel);
    background: var(--flaeche);
    box-shadow: inset 0 0 0 1px var(--linie-zart);
  }
  .seitenkasten h2 { font-size: 1.3125rem; font-stretch: 92%; line-height: 1.2; letter-spacing: 0; }
  .liste-schritte { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
  .liste-schritte li { display: grid; grid-template-columns: 2.25rem 1fr; gap: .25rem; color: var(--text-2); }
  .liste-schritte .ziffer { margin: .15rem 0 0; }
  .liste-schritte strong { display: block; color: var(--tinte); }

  /* ----- Zweispalter Startseite ------------------------------------------ */
  .idee-raster, .arbeiten-raster { display: grid; gap: var(--lueke); align-items: center; }
  .idee-text .lead { margin-top: 1.25rem; }
  .idee-text .absatz { margin-top: 1rem; color: var(--text-2); max-width: 32em; }
  .idee-text .textlink { margin-top: 1rem; }
  .arbeiten-text .lead { margin-top: 1.25rem; }
  @media (min-width: 60rem) {
    .idee-raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 5vw, 5rem); }
    .arbeiten-raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2.5rem, 5vw, 5rem); }
  }

  /* Menü nur auf dem Handy */
  @media (min-width: 60rem) { .menue { display: none !important; } }

  /* Fehler an der Einwilligung */
  .zustimmung:has(input:user-invalid) + .fehlertext,
  .zustimmung:has(input.ungueltig) + .fehlertext { display: block; }
  .zustimmung:has(input:user-invalid) input { outline: 2px solid var(--fehler); outline-offset: 2px; }

  .seitenkopf .foto.breit { aspect-ratio: 16 / 9; }

  /* ----- Schmale Seiten (Danke, 404) ------------------------------------- */
  .schmal-seite { min-height: calc(100dvh - var(--kopf-h)); display: grid; align-items: center; }
  .schmal-raster { display: grid; gap: var(--lueke); align-items: center; padding-block: var(--takt); }
  @media (min-width: 60rem) {
    .schmal-raster { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  }
}

/* =========================================================================
   seiten: Leistungen, Ablauf
   ========================================================================= */
@layer seiten {
  .dienste { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--linie); }
  .dienst {
    display: grid;
    gap: .6rem 2rem;
    padding-block: 1.75rem;
    border-bottom: 1px solid var(--linie);
  }
  .dienst p { color: var(--text-2); max-width: 38em; }
  .dienst p + p { margin-top: .6rem; }
  @media (min-width: 52rem) {
    .dienst { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
  }

  .immer {
    display: grid;
    gap: 1rem 2.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  @media (min-width: 48rem) { .immer { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .immer li { display: flex; gap: .75rem; align-items: flex-start; }
  .immer .icon { margin-top: .2em; color: var(--akzent-text); }

  .extras { display: grid; margin: 1.25rem 0 0; }
  .extras div {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .25rem 1.5rem;
    padding-block: .9rem;
    border-bottom: 1px solid var(--linie);
  }
  .extras dt { font-weight: 560; }
  .extras dd { margin: 0; color: var(--text-2); font-variant-numeric: tabular-nums; }

  .schritt-lang {
    display: grid;
    gap: 1.5rem var(--lueke);
    padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem);
    border-top: 1px solid var(--linie);
    align-items: center;
  }
  .schritt-lang .foto { aspect-ratio: 4 / 3; }
  .schritt-lang p { color: var(--text-2); max-width: 36em; }
  .schritt-lang p + p { margin-top: .75rem; }
  .schritt-lang h2 { font-size: clamp(1.875rem, 1.3rem + 2vw, 2.75rem); }
  @media (min-width: 56rem) {
    .schritt-lang { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
    .schritt-lang:nth-of-type(even) .foto { order: -1; }
  }

  .zweispalt { display: grid; gap: var(--lueke); }
  @media (min-width: 56rem) { .zweispalt { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .zweispalt p + p { margin-top: .75rem; }
  .zweispalt p { color: var(--text-2); }
  .zweispalt h2 { margin-bottom: 1rem; font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); }
}

/* =========================================================================
   hilfen
   ========================================================================= */
@layer hilfen {
  .unsichtbar {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  .oben-2 { margin-top: 2rem; }
}

/* =========================================================================
   Übergänge zwischen Seiten, Dauerbewegung
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 240ms;
    animation-timing-function: cubic-bezier(.4, 0, .2, 1);
  }


  /* Fotos atmen langsam, damit auf jeder Höhe der Seite etwas lebt */
  .foto img {
    animation: atmen 18s ease-in-out infinite alternate;
    transform-origin: 55% 60%;
  }
  .kachel-bild + .kachel-bild .foto img,
  .schritt-lang:nth-of-type(even) .foto img,
  .preis-foto .foto img {
    animation-duration: 21s;
    animation-delay: -7s;
    transform-origin: 40% 45%;
  }
  @keyframes atmen {
    from { transform: scale(1.01) translate3d(0, 0, 0); }
    to { transform: scale(1.09) translate3d(-1.2%, -1.4%, 0); }
  }

  /* Tinte: der Film selbst bewegt sich, dazu driftet die ganze Wolke */
  .versprechen-bild .tinte { animation: tinte-drift 26s ease-in-out infinite alternate; }
  @keyframes tinte-drift {
    0% { transform: scale(1.04) translate3d(0, 0, 0) rotate(0deg); }
    50% { transform: scale(1.12) translate3d(2%, -4%, 0) rotate(-2deg); }
    100% { transform: scale(1.07) translate3d(3.5%, -1.5%, 0) rotate(1.5deg); }
  }

  html { scroll-behavior: smooth; }

  /* Aufklappen der Fragen, wo der Browser es kann */
  :root { interpolate-size: allow-keywords; }
  .frage::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size var(--t-ausdruck) var(--kurve), content-visibility var(--t-ausdruck) allow-discrete;
  }
  .frage[open]::details-content { block-size: auto; }
}

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

@media print {
  .kopf-halter, .cta-leiste, .held-kugel, .farbpalette, .versprechen-bild, .klecks-schicht, .leisten-farbe, .sprunglink { display: none !important; }
  body { background: #fff; color: #000; }
  .held, .versprechen { background: #fff !important; color: #000 !important; }
}