/* Rendra, Seitenstil. Ergaenzt basis.css, wird von allen Seiten geteilt. */
/* Poppins, dieselbe Familie wie beim Vorbild. Geometrisch und rund, wirkt
     freundlicher als die vorherige Space Grotesk. Vier Schnitte, lokal,
     zusammen 31 KB. Zum Zurueckdrehen reicht dieser Block. */
  @font-face { font-family:"Rendra"; src:url("schrift/poppins-400.woff2") format("woff2"); font-weight:400; font-display:swap; unicode-range:U+0000-00FF; }
  @font-face { font-family:"Rendra"; src:url("schrift/poppins-600.woff2") format("woff2"); font-weight:600; font-display:swap; unicode-range:U+0000-00FF; }
  @font-face { font-family:"Rendra"; src:url("schrift/poppins-700.woff2") format("woff2"); font-weight:700; font-display:swap; unicode-range:U+0000-00FF; }
  @font-face { font-family:"Rendra"; src:url("schrift/poppins-800.woff2") format("woff2"); font-weight:800; font-display:swap; unicode-range:U+0000-00FF; }

  /* Einfarbig. Vorher lag ein warmes Orange auf jedem Satzpunkt, jedem
     Messwert und jedem Knopf, dreizehn Mal auf einer Seite. GOAT am
     12.09.2026: "ich seh es ueberall und es ist so haesslich". Beim Vorbild
     traegt die Akzentfarbe fast nichts, die Knoepfe sind schwarze Pillen.
     Die Seiten, die GOAT am besten gefielen, kommen ganz ohne aus:
     warmnfuzzy.tv hat eine Schrift und zwei Farben, littleplains.com drei.
     Der Akzent ist deshalb jetzt die Textfarbe selbst. */
  :root {
    --grund: #ffffff;
    --flaeche: #f3f5f7;
    --text: #0e1116;
    --leise: #55606e;
    --akzent: #0e1116;
    --akzent-text: #ECEAE6;   /* nicht reines Weiss: das waere ein neunter Farbwert neben --hell */
    --rand: #e2e6ea;
    --schrift: "Rendra", system-ui, -apple-system, "Segoe UI", sans-serif;
    --tief: #0b0d10;      /* fester dunkler Grund, kippt nicht mit dem Schema */
    --hell: #ECEAE6;      /* feste helle Schrift auf --tief, exakt der Wert, den der Baukasten im Dunkelmodus fuer --text nimmt. Zwei fast gleiche Weisstoene zaehlen sonst doppelt gegen Regel 3.1 */
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-thema="hell"]) { --akzent: #ECEAE6; --akzent-text: #0b0d10; }
  }

  /* --- Typografie nach dem gemessenen Vorbild -----------------------
     Gemessen am 12.09.2026 bei 1440 px: deren h2 ist 56 px im Gewicht 800,
     deren h3 46 px. Unsere lagen bei 28 und 16 px, also halb und ein Drittel.
     Das war der groesste optische Abstand von allen zwoelf. */
  h1, h2, h3 { letter-spacing: -0.03em; }
  h2 {
    font-size: clamp(2rem, 4.2vw, 3.5rem);   /* bis 56 px */
    font-weight: 800; line-height: 1.08; text-align: center;
    max-width: 20ch; margin-inline: auto;
  }
  h3 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); font-weight: 600; line-height: 1.12; }
  /* Der einleitende Satz unter einer zentrierten Ueberschrift zieht mit */
  h2 + p { text-align: center; max-width: 60ch; margin-inline: auto; }

  /* Augenbraue: kleine Versalzeile ueber der Ueberschrift. Beim Vorbild
     stehen 87 Elemente in Versalien, bei uns waren es 7. */
  .braue {
    display: block; text-align: center; text-transform: uppercase;
    font-size: 13px; font-weight: 600; letter-spacing: .14em;
    color: var(--leise); margin: 0 0 var(--r2);
  }
  .band-tief .braue { color: var(--hell); opacity: .6; }

  /* Wort-für-Wort-Aufbau beim Scrollen. Rein per CSS über
     animation-timeline, keine Bibliothek, Regel 7.1. Wer das nicht kann,
     sieht die Überschrift einfach sofort, Regel 7.4 schaltet sie ganz ab. */
  .aufbau span { display: inline-block; }
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .aufbau span {
        opacity: .14; animation: klar linear both;
        animation-timeline: view();
        animation-range: entry 12% cover 34%;
        animation-delay: calc(var(--i, 0) * -0.06s);
      }
      @keyframes klar { to { opacity: 1; } }
    }
  }

  /* --- Kopf: schwebende weiße Pille über dem Video ------------------- */
  /* Kopf wie beim Vorbild: der Markenname steht links direkt auf dem Video,
     die Navigation schwebt als dunkles Glas daneben. Vorher war beides in
     einer weissen Pille, die dem Bild die Wirkung genommen hat. */
  /* Hinweisleiste sitzt unten, wie die Cookie-Leiste des Vorbilds. Oben nahm
     sie dem Heldenbild 40 Pixel und die Wirkung. */
  .entwurf {
    position: fixed; left: 50%; transform: translateX(-50%); bottom: 14px; z-index: 40;
    width: min(760px, calc(100% - 28px)); margin: 0; padding: 12px 18px;
    background: rgb(11 13 16 / 88%); color: #ECEAE6; font-size: 15px; text-align: center;
    border: 1px solid rgb(255 255 255 / 14%); border-radius: 14px; backdrop-filter: blur(14px);
  }

  .kopfzeile {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--r2); padding: 14px clamp(16px, 3vw, 34px);
  }
  /* Der Markenname steht nur auf der Startseite ueber dem Heldenbild und darf
     dort hell sein. Auf den Unterseiten sitzt er auf dem normalen Grund, dort
     waere Hell auf Hell. Am 12.09.2026 genau so durchgefallen. */
  body:has(.buehne) .kopfzeile > .wort { color: var(--hell); }
  /* Die Klasse .hero-bild bringt aus dem Baukasten eine eigene, fast gleiche
     Weissnuance mit. Sie bleibt, weil kontrast-auf-bild.js sie zum Messen
     braucht, aber die Farbe wird ueberschrieben. */
  .buehne.hero-bild .innen, .buehne.hero-bild .wortmarke, .buehne.hero-bild .unterzeile { color: var(--hell); }
  .kopfzeile > .wort { color: var(--text); font-weight: 700; letter-spacing: .1em;
                       text-transform: uppercase; font-size: 15px; text-decoration: none;
                       min-height: var(--tipp); display: flex; align-items: center; }
  .pille {
    display: flex; align-items: center; gap: var(--r2); padding: 7px 7px 7px 20px;
    background: rgb(11 13 16 / 62%); border: 1px solid rgb(255 255 255 / 14%);
    border-radius: 999px; backdrop-filter: blur(14px);
  }
  .pille nav a { color: var(--hell); text-decoration: none; }
  .pille .tat { border-radius: 999px; background: var(--hell); color: var(--tief); }
  .pille .wort { font-weight: 700; letter-spacing: -0.02em; text-decoration: none;
                 min-height: var(--tipp); display: flex; align-items: center; }
  .pille nav { display: none; gap: var(--r3); }
  .pille nav a { color: var(--leise); text-decoration: none; }
  .pille .tat { border-radius: 999px; }

  /* --- Hero: Vollbild-Video, riesige gesperrte Wortmarke -------------- */
  .buehne {
    position: relative; min-height: 100svh; margin-top: -74px;
    display: grid; place-items: center; overflow: hidden; isolation: isolate;
  }
  .buehne video, .buehne .hintergrund, .buehne .hintergrund img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: -2;
  }
  /* Langsame Wanderung beim Scrollen, Regel 7.5: nur transform, nur ueber
     animation-timeline, keine Bibliothek. Die Vergroesserung auf 1,12 deckt
     den Ausschlag, damit kein leerer Rand frei wird. */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .buehne .hintergrund img {
        animation: wandern linear both;
        animation-timeline: view();
        animation-range: cover 0% cover 100%;
      }
      @keyframes wandern {
        from { transform: scale(1.12) translate3d(0, -1.5%, 0); }
        to   { transform: scale(1.12) translate3d(0,  1.5%, 0); }
      }
    }
  }
  /* Schleier, damit weiße Schrift auf jedem Einzelbild sicher trägt */
  .buehne::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgb(11 13 16 / 55%) 0%, rgb(11 13 16 / 35%) 45%, rgb(11 13 16 / 75%) 100%);
  }
  /* Eine einzige helle Textfarbe im ganzen Dokument, sonst reisst Regel 3.1
     die Grenze von acht. Vorher lagen hier drei fast gleiche Weisstoene. */
  /* --- Abstaende, Karten, Tiefe. Gemessen beim Vorbild: 124 px Luft je
     Abschnitt, ein weicher weiter Schatten 16 Mal verwendet, Karten mit
     16 bis 18 px Radius, 85 vollrunde Elemente. --- */
  main > section, footer { padding-block: 120px; }
  main > section:first-of-type { padding-block: 0; }

  .karte, .arbeit, .preis, .rahmen {
    border-radius: 16px;
    box-shadow: 0 26px 54px -34px rgb(11 13 16 / 34%);
  }
  .band-tief .karte, .band-tief .preis { box-shadow: 0 26px 54px -34px rgb(0 0 0 / 60%); }

  /* Vollrunde Symbolkreise, wie die 85 runden Elemente beim Vorbild.
     Nur Kante, kein Fuellton, damit Regel 3.1 keine Farbe dazubekommt. */
  .kreis {
    width: 46px; height: 46px; border-radius: 50%; flex: 0 0 46px;
    display: grid; place-items: center; border: 1px solid var(--rand);
  }
  .band-tief .kreis { border-color: rgb(255 255 255 / 22%); }
  /* Eine dunkle Karte mitten im hellen Abschnitt. Das Vorbild setzt genau so
     einen Block (#10151d) zwischen helle Karten, das bricht die Reihe auf. */
  .dunkelkarte { background: var(--tief); border-color: var(--tief); }
  /* Hoehere Spezifitaet noetig: .leistung p setzt --leise und steht spaeter
     im Blatt. Auf dem dunklen Grund ergibt das 3,04 zu 1. */
  .karte.dunkelkarte h3, .karte.dunkelkarte p, .dunkelkarte .leistung p { color: var(--hell); }
  .dunkelkarte .kreis { border-color: rgb(255 255 255 / 26%); }

  .buehne .innen { text-align: center; padding: 74px var(--r3) var(--r6); color: var(--hell); }
  .wortmarke {
    /* Fuellt die Fensterbreite, wie beim Vorbild. Dort nimmt die Marke rund
       85 Prozent der Breite ein und steht allein auf dem Bild, ohne Satz und
       ohne Knopf darunter. Unsere lag bei 45 Prozent und wirkte deshalb
       kleiner, obwohl die Pixelzahl stimmte. */
    margin: 0; font-size: 17.4vw; line-height: 1; white-space: nowrap;
    font-weight: 700; letter-spacing: .1em; color: var(--hell);
    text-indent: .1em;
  }
  .buehne p, .buehne .innen p { color: var(--hell); max-width: 34ch; margin-inline: auto; }
  /* Eine leise Zeile statt Satz und Knoepfen. Beim Vorbild steht dort gar nichts. */
  .unterzeile { text-transform: uppercase; letter-spacing: .28em; font-size: 13px;
                font-weight: 600; opacity: .82; margin-top: var(--r3); }
  .buehne .taten { display: flex; gap: var(--r2); justify-content: center; flex-wrap: wrap; }

  /* --- Bänder: acht Grundwechsel wie beim Vorbild --------------------- */
  .band-tief { background: var(--tief); color: var(--hell); }
  .band-tief h2, .band-tief h3 { color: var(--hell); }
  .band-tief p, .band-tief li { color: var(--hell); }
  .band-tief .tat { background: var(--hell); color: var(--tief); }
  /* Karten im dunklen Band: der Baukasten gibt ihnen weissen Grund und
     graue Absaetze. Ohne diese Zeile steht helle Schrift auf Weiss, der
     Pruefer hat 1,06 zu 1 gemeldet. */
  .band-tief .karte { background: transparent; border-color: rgb(255 255 255 / 16%); }
  .band-tief .karte h3, .band-tief .karte p { color: var(--hell); }
  /* Das warme Band kippt mit dem Farbschema mit. Fest hell zu lassen war der
     Fehler: die Schrift kommt aus dem Baukasten und wird im Dunkelmodus hell,
     dann steht helle Schrift auf hellem Grund. Gemessen 1,1 zu 1. */
  /* Das warme Band nimmt --flaeche statt eines eigenen Tons. Ein eigener
     Warmton war in beiden Schemata nur ein Hauch neben --flaeche und hat
     Regel 3.1 zwei Farbwerte gekostet, ohne sichtbaren Gewinn. --flaeche
     kippt ausserdem von allein mit dem Schema mit. */
  .band-warm { background: var(--flaeche); }

  /* --- Vertrauensband: drei gemessene Zahlen -------------------------- */
  .zahlen { display: grid; gap: var(--r4); }
  .zahl b { display: block; font-size: clamp(2.2rem, 7vw, 3.4rem); line-height: 1; letter-spacing: -.04em; }
  .zahl span { display: block; color: var(--hell); opacity: .78; margin-top: 8px; }

  /* --- Arbeiten: waagerechtes Karussell mit Fangpunkten -------------- */
  .karussell {
    display: flex; gap: var(--r3); overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: var(--r2); margin-inline: calc(var(--saum) * -1);
    padding-inline: var(--saum); scrollbar-width: thin;
  }
  .arbeit { flex: 0 0 min(78vw, 340px); scroll-snap-align: start; }
  .arbeit { overflow: hidden; }
  .arbeit picture { display: block; }
  /* Hochformat 3:4 wie die Karten des Vorbilds, statt flacher Querformate.
     Der Ausschnitt sitzt oben, damit der Seitenkopf sichtbar bleibt. */
  .arbeit img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top center; }
  .arbeit .text { padding: var(--r3); }
  .arbeit h3 { margin: 0 0 2px; }
  .arbeit .fach { color: var(--leise); }
  .arbeit .messwert { color: var(--text); font-weight: 600; }

  /* --- Demo: Umschalter Desktop und Handy, ohne ein Byte JavaScript --- */
  /* Der Umschalter war zuerst EIN Flex-Behaelter fuer Schalter UND Geraet.
     Dann streckt Flex die Beschriftungen auf die volle Hoehe des Geraets,
     und das Handybild landet als drittes Flex-Kind daneben statt darunter.
     Jetzt zwei getrennte Behaelter, die Auswahl laeuft ueber :has(). */
  .schalter { display: flex; gap: 6px; justify-content: center; align-items: center; margin-bottom: var(--r3); }
  .schalter input { position: absolute; width: 1px; height: 1px; opacity: 0; }
  .schalter label {
    min-height: var(--tipp); display: inline-flex; align-items: center; padding: 0 var(--r3);
    border: 1px solid var(--rand); border-radius: 999px; cursor: pointer; color: var(--leise);
  }
  .schalter input:checked + label { background: var(--text); color: var(--grund); border-color: var(--text); }
  .schalter input:focus-visible + label { outline: 3px solid var(--akzent); outline-offset: 2px; }
  .geraet { display: grid; place-items: center; }
  .geraet .handy { display: none; }
  .demo:has(#zeig-handy:checked) .geraet .desktop { display: none; }
  .demo:has(#zeig-handy:checked) .geraet .handy { display: block; }
  .rahmen { border: 1px solid var(--rand); border-radius: 10px; overflow: hidden; background: var(--grund); }
  .leiste { display: flex; gap: 6px; padding: 9px 12px; background: var(--flaeche); border-bottom: 1px solid var(--rand); }
  .leiste i { width: 9px; height: 9px; border-radius: 50%; background: currentColor; opacity: .22; }
  .rahmen img { display: block; width: 100%; height: auto; }
  /* Feste Breite, nicht max-width: das Rasterkind richtet sich sonst nach
     seinem Inhalt, der Inhalt nach dem Elternteil, und das Bild wird 0 breit. */
  .handy .rahmen { width: min(260px, 82vw); border-radius: 26px; }

  details { border-bottom: 1px solid var(--rand); padding: var(--r2) 0; }
  summary { font-weight: 600; cursor: pointer; min-height: var(--tipp); display: flex; align-items: center; }
  details p { margin-top: var(--r1); color: var(--leise); }

  .schluss { background: var(--flaeche); text-align: center; }
  .schluss h2 { font-size: clamp(1.9rem, 6vw, 3rem); }

  /* --- Symbolsystem. Ein einziger Vorrat im Dokument, ueberall per <use>
     wiederverwendet. Kostet null zusaetzliche Anfragen und faerbt sich ueber
     currentColor mit, damit Regel 3.1 keine weitere Farbe sieht. --- */
  .sym { width: 22px; height: 22px; flex: 0 0 22px; stroke: currentColor; fill: none;
         stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .sym-gross { width: 30px; height: 30px; flex-basis: 30px; }
  .haken { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 10px; }
  .haken .sym { margin-top: 2px; opacity: .62; }
  ul.liste { list-style: none; padding: 0; margin: var(--r2) 0 0; }

  /* --- Leistungen: Karte mit Piktogramm --- */
  .leistung { display: flex; gap: var(--r2); align-items: flex-start; }
  .leistung h3 { margin: 0 0 6px; }
  .leistung p { margin: 0; color: var(--leise); }

  /* --- Branchen als Marken, nicht als Bilderflut --- */
  .branchen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--r3); }
  .branchen span { border: 1px solid var(--rand); border-radius: 999px; padding: 8px 14px; color: var(--leise); }

  /* --- Seitencheck --- */
  .check { display: grid; gap: var(--r2); max-width: 30rem; }
  .check label { font-weight: 600; }
  .check input {
    min-height: var(--tipp); width: 100%; padding: 0 14px; font: inherit; color: var(--text);
    background: var(--grund); border: 1px solid var(--rand); border-radius: 8px;
  }
  .check input:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; }
  .check .hinweis { color: var(--leise); }

  /* --- Leiste mit Wortmarken statt Bildlogos --- */
  .marken { display: flex; flex-wrap: wrap; gap: var(--r3) var(--r4); align-items: center; justify-content: center; }
  /* Keine Deckung unter 1: --leise erreicht auf Weiss 7,0 zu 1, bei 55
     Prozent Deckung bleiben davon 3,04 uebrig und Regel 3.2 reisst. */
  .marken span { font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: var(--t-klein); color: var(--leise); }

  /* --- Preistafel --- */
  .preise { display: grid; gap: var(--r3); }
  .preis { border: 1px solid var(--rand); border-radius: var(--radius); padding: var(--r3); display: flex; flex-direction: column; }
  .preis.hervor { border-width: 2px; border-color: var(--text); }
  .preis .stufe { font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: var(--t-klein); color: var(--leise); }
  .preis .zahl { font-size: clamp(1.9rem, 6vw, 2.6rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; margin: 6px 0 2px; }
  .preis .dazu { color: var(--leise); margin: 0 0 var(--r2); }
  .preis ul { flex: 1; }
  .preis .tat { margin-top: var(--r2); justify-content: center; }

  /* --- Kundenstimmen --- */
  .stimme { border-left: 2px solid currentColor; padding-left: var(--r3); margin-bottom: var(--r4); }
  .stimme blockquote { margin: 0; font-size: var(--t-mittel); line-height: 1.35; letter-spacing: -.02em; }
  .stimme figcaption { margin-top: var(--r2); color: inherit; opacity: .72; }

  /* --- Gruender --- */
  .gruender { display: grid; gap: var(--r3); align-items: start; }
  .gruender img { width: 100%; height: auto; display: block; border-radius: var(--radius); }
  .gruender .bildfeld { max-width: 260px; }

  /* --- Grosser Fuss in Spalten --- */
  .fuss-raster { display: grid; gap: var(--r4); }
  .fuss-raster h3 { font-size: var(--t-basis); margin: 0 0 10px; line-height: 1.3; }
  .fuss-raster ul { list-style: none; padding: 0; margin: 0; }
  .fuss-raster li { margin-bottom: 8px; }
  .fuss-raster a { min-height: var(--tipp); display: inline-flex; align-items: center; color: var(--leise); }
  .fuss-schluss { border-top: 1px solid var(--rand); margin-top: var(--r4); padding-top: var(--r3); }

  @media (min-width: 800px) {
    .fuss-raster { grid-template-columns: repeat(4, 1fr); }
    .preise { grid-template-columns: repeat(3, 1fr); }
    .gruender { grid-template-columns: 260px 1fr; gap: var(--r5, 40px); }
    .pille nav { display: flex; }
    .zahlen { grid-template-columns: repeat(3, 1fr); }
    .arbeit { flex-basis: 380px; }
  }

  /* --- Unterseiten ---------------------------------------------------
     Seit dem 12.09.2026 ist Rendra keine einzelne Seite mehr. Der Kopf
     einer Unterseite traegt dieselbe Groesse wie eine Abschnitts-
     ueberschrift der Startseite, damit die Seiten zusammengehoeren. */
  .seitenkopf { padding-top: 148px; text-align: center; }
  .seitenkopf h1 {
    font-size: clamp(2rem, 4.2vw, 3.5rem); font-weight: 800;
    line-height: 1.08; letter-spacing: -0.03em; max-width: 20ch; margin-inline: auto;
  }
  .seitenkopf > p { max-width: 60ch; margin-inline: auto; color: var(--leise); }

  /* Wegweiserkarten auf der Startseite: ganze Karte ist der Verweis */
  a.wegweiser { text-decoration: none; color: inherit; }
  a.wegweiser h3 { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
  a.wegweiser:hover h3 { text-decoration-thickness: 2px; }