/** Shopify CDN: Minification failed

Line 586:20 Expected identifier but found whitespace
Line 586:21 Unexpected "var("
Line 892:14 Expected identifier but found whitespace
Line 892:15 Unexpected "var("
Line 902:73 Unterminated string token

**/
/* ============================================================================
   camados.css — der Teil der Gestaltung, den ein Farbschema nicht kann.

   ── WAS HIER STEHT UND WAS NICHT ────────────────────────────────────────────
   Alle FLACHEN Farben stehen im Theme-Editor unter „Farbschemata" (Camados
   dunkel / Flaeche / tief / hell). Dort kann Lars sie selbst aendern, ohne
   jemanden zu fragen. Diese Datei aendert daran nichts.

   Hier steht nur, was Shopify als Einstellung nicht anbietet: der METALLGLANZ.
   Ein Farbfeld kann nur einen Ton, kein Verlauf mit Lichtkante — und ein
   flaches Braun sieht aus wie ein Fehldruck, nicht wie Bronze.

   ── DIE LICHTKANTE ─────────────────────────────────────────────────────────
   Sie sitzt bei 44 %, also bewusst ausserhalb der Mitte. Mittig sieht es aus
   wie ein gewoehnlicher Farbverlauf; leicht daneben wie Licht, das auf eine
   gedrehte Metallflaeche faellt. Das ist der ganze Trick, und er ist der
   Unterschied zwischen „braun" und „Bronze".

   ⚠️ Hoechstens ZWEI Glanzstellen pro Bildschirm. Danach wird aus Akzent Dekor
   und der Effekt verliert genau die Wirkung, fuer die er da ist. Deshalb traegt
   ihn nur die wichtigste Schaltflaeche und die Wortmarke — nicht jeder Knopf.
   ========================================================================== */

:root {
  --camados-bronze-glanz: linear-gradient(
    103deg,
    #7a4e22 0%, #a86c33 14%, #c8894a 26%,
    #f0d0a6 44%, #dda067 54%,
    #c8894a 68%, #96602e 84%, #e3bc8c 100%
  );
}

/* ---- Die eine wichtige Schaltflaeche ------------------------------------
   ⚠️ HIER STAND EIN METALLVERLAUF MIT LEUCHTSCHATTEN UND WANDERNDEM GLANZ.
   Lars, 11.09.: „soll nicht wirken wie auf einer billigen Vertriebsseite,
   sondern edel wie bei Apple". Er hat recht — und ich hatte die Regel dagegen
   selbst weiter oben in diese Datei geschrieben: hoechstens zwei Glanzstellen
   pro Bildschirm. Dann habe ich den Verlauf auf JEDEN Hauptknopf gelegt.

   Was einen Knopf teuer wirken laesst, ist nicht Glanz, sondern ZURUECKHALTUNG:
   eine Farbe, saubere Kanten, ein spuerbarer aber leiser Zustandswechsel. Ein
   Verlauf mit Lichtkante sagt „schau mich an"; eine ruhige Flaeche sagt „druecke
   mich". Das zweite ist, was Apple macht.

   Der Metallglanz bleibt, wo er etwas bedeutet: an der Wortmarke und an den
   Kennzahlen. Das sind die zwei erlaubten Stellen.

   Der Zustandswechsel laeuft ueber HELLIGKEIT, nicht ueber einen zweiten Ton:
   `filter: brightness()` haelt den Farbton exakt und braucht keine zweite
   Farbdefinition, die spaeter auseinanderlaufen kann. */
.button:not(.button-secondary, .button-unstyled, .menu-drawer__back-button,
            .close-button, [class*='carousel'], [class*='slideshow']),
button.shopify-payment-button__button--unbranded {
  background-image: none;
  /* Eine einzige, feine Innenkante oben — die Fase, mehr nicht. Kein Schein
     nach aussen: Der frisst auf dunklem Grund den Kontrast zur Umgebung. */
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 14%);
  transition: filter 0.18s ease, transform 0.12s ease;
}
.button:not(.button-secondary, .button-unstyled, .menu-drawer__back-button,
            .close-button, [class*='carousel'], [class*='slideshow']):hover,
button.shopify-payment-button__button--unbranded:hover:not([disabled]) {
  filter: brightness(1.1);
}
/* Beim Druecken minimal nachgeben. Das ist der Teil, den man nicht sieht,
   sondern spuert — und er kostet nichts an Ruhe. */
.button:not(.button-secondary, .button-unstyled, .menu-drawer__back-button,
            .close-button, [class*='carousel'], [class*='slideshow']):active,
button.shopify-payment-button__button--unbranded:active:not([disabled]) {
  transform: translateY(1px);
  filter: brightness(0.96);
}

/* Der zweite Knopf traegt nur eine Linie. Zwei gleich laute Knoepfe
   nebeneinander sind keine Wahl, sondern eine Verlegenheit. */
.button-secondary {
  transition: border-color 0.18s ease, color 0.18s ease;
}

/* ---- Wortmarke: CAMADOS. mit bronzenem C und Punkt ----------------------
   Zwei Akzente in einem Wort sind das Maximum. Mehr, und es wird Dekor.
   Der Punkt ist nicht Zierde: Es ist derselbe, der an der Box die
   Betriebsanzeige ist. */
.camados-marke__c,
.camados-marke__punkt {
  color: var(--color-primary);
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .camados-marke__c,
  .camados-marke__punkt {
    background: var(--camados-bronze-glanz);
    background-size: 220% 100%;
    background-position: 18% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    transition: background-position 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }
  a:hover .camados-marke__c,
  a:hover .camados-marke__punkt { background-position: 92% 50%; }
}

/* ---- Kennzahlen ---------------------------------------------------------
   Die zweite erlaubte Glanzstelle. Hier gehoert sie hin, weil die Zahlen das
   einzige echte Versprechen sind — sie duerfen als einziges wie gefraestes
   Metall aussehen.

   Der Lichtwechsel laeuft ueber 9 Sekunden: Eine schnelle Animation wirkt wie
   ein Werbebanner, eine langsame wie Material. */
.camados-zahl {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--color-primary);
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .camados-zahl {
    background: var(--camados-bronze-glanz);
    background-size: 250% 100%;
    background-position: 22% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  @media (prefers-reduced-motion: no-preference) {
    .camados-zahl { animation: camados-schimmer 9s ease-in-out infinite alternate; }
  }
}
@keyframes camados-schimmer {
  from { background-position: 16% 50%; }
  to   { background-position: 46% 50%; }
}

/* ---- Karten: die gefraeste Oberkante ------------------------------------
   Eine helle Linie an der Oberkante ist der Werkstatt-Hinweis: Genau dort
   faengt eine gefraeste Metallkante das Licht. Sehr subtil, aber es ist der
   Unterschied zwischen „Flaeche" und „Bauteil". */
.card,
.product-card,
.group-block-container[class*='card'] {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* ---- Preisliste ---------------------------------------------------------
   Warum eine Tabelle und kein Kartenraster: Preise vergleicht man vertikal.
   Sobald die Betraege nicht mehr untereinander stehen, muss man rechnen statt
   zu sehen.

   tabular-nums ist hier keine Feinheit, sondern der ganze Punkt: In der
   Grundschrift sind Ziffern unterschiedlich breit, dadurch tanzen die
   Kommastellen von Zeile zu Zeile und die Spalte franst aus. */
.camados-liste {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.camados-liste th,
.camados-liste td {
  padding: 16px 0;
  border-block-end: 1px solid rgba(128, 128, 128, 0.22);
  border-block-end-color: rgb(from var(--color-foreground) r g b / 12%);
  vertical-align: baseline;
  font-weight: 400;
}
.camados-liste th {
  color: var(--color-foreground-heading);
  font-weight: 600;
  padding-inline-end: 32px;
}
.camados-liste td {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--color-foreground-heading);
  font-weight: 600;
}
/* Die Begruendung steht unter dem Namen, nicht in einer dritten Spalte:
   Drei Spalten zwingen den Text in eine Schlucht, sobald das Fenster schmaler
   wird. */
.camados-liste th span {
  display: block;
  margin-block-start: 6px;
  max-width: 52ch;
  font-weight: 400;
  font-size: 0.92em;
  line-height: 1.5;
  color: var(--color-foreground);
}
.camados-liste th em {
  display: inline-block;
  margin-inline-start: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(200, 137, 74, 0.16);
  background: rgb(from var(--color-primary) r g b / 14%);
  color: var(--color-primary);
  font-style: normal;
  font-size: 0.75em;
  font-weight: 500;
  letter-spacing: 0.02em;
  vertical-align: 2px;
}

/* ---- Fussbereich --------------------------------------------------------
   Apple setzt den Fussbereich auf 12 px. Das wirkt beim Hinsehen zu klein und
   ist trotzdem richtig: Der Fussbereich wird nicht gelesen, sondern abgesucht.
   Kleine Schrift bringt mehr Verweise ins Blickfeld, und wer sucht, findet
   schneller.

   Groesse, Farbe und Abstaende stehen in den Baustein-Einstellungen (siehe
   werkzeug/footer-bauen.py) — dort kann Lars sie im Theme-Editor aendern.
   Hier steht nur, was eine Einstellung nicht kann: das VERHALTEN der Verweise. */
footer a {
  text-decoration: none;
  transition: color 0.18s ease;
}
/* Unterstreichen erst beim Ueberfahren: Ein Block aus lauter unterstrichenen
   Zeilen flimmert und macht die Spalte unlesbar. */
footer a:hover {
  color: var(--color-foreground-heading);
  text-decoration: underline;
  text-underline-offset: 3px;
}
footer a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---- Breite des Liquid-Bausteins ---------------------------------------
   Der `custom-liquid`-Baustein hat als einziger KEINE Breiteneinstellung —
   sein Schema kennt nur `custom_liquid`. In einer Spalte mit
   `align-items: flex-start` schrumpft er deshalb auf seinen Inhalt, und die
   Preistabelle stand nur auf der halben Seite.

   Zwei Wege, damit es auch dort stimmt, wo `:has()` fehlt:
     1. Eine Mindestbreite ab Tablet — sie dehnt schon das schrumpfende
        Elternelement, ganz ohne `:has()`.
     2. Volle Breite per `:has()`, wo der Browser es kann. */
@media (min-width: 750px) {
  .camados-liste { min-width: 42rem; }
}
.layout-panel-flex--column > div:has(> .camados-liste) {
  width: 100%;
  align-self: stretch;
}

/* ---- Zustandsabzeichen --------------------------------------------------
   Drei Zustaende, drei Toene. Der Ton traegt die Bedeutung MIT, aber nicht
   ALLEIN: Die Beschriftung steht immer daneben, sonst waere die Seite fuer
   farbfehlsichtige Leser stumm. */
.camados-stand {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  border: 1px solid currentColor;
}
.camados-stand--da      { color: #7fbf8a; }
.camados-stand--arbeit  { color: #c8894a; }
/* Gedaempft, nicht grau: Grau liest sich wie „abgeschaltet", geplant ist es
   aber nicht — es ist nur noch nicht dran. */
.camados-stand--geplant { color: #9a9182; }

/* ---- Downloadseite ------------------------------------------------------
   Die Pruefsumme ist der Grund, warum diese Seite eigene Regeln braucht: 64
   Zeichen ohne Leerzeichen sprengen jede Spalte, wenn man sie nicht
   ausdruecklich umbrechen laesst. Gekuerzt darstellen waere die schlechtere
   Loesung — eine gekuerzte Pruefsumme kann man nicht vergleichen. */
.camados-dateien {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 22px;
  margin-block-start: 22px;
}
.camados-datei {
  padding: 26px;
  border-radius: 18px;
  background: var(--color-background-secondary, rgba(255, 255, 255, 0.05));
  background: rgb(from var(--color-foreground) r g b / 7%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.camados-datei h3 { margin: 0 0 8px; font-size: 1.2rem; color: var(--color-foreground-heading); }
.camados-datei__was { margin: 0 0 18px; font-size: 0.95rem; }

.camados-datei__werte {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 16px;
  margin: 0 0 20px;
  font-size: 0.85rem;
}
.camados-datei__werte dt { color: var(--color-foreground-muted); }
.camados-datei__werte dd { margin: 0; }
.camados-datei__werte code {
  font-size: 0.82em;
  word-break: break-all;      /* 64 Zeichen ohne Leerzeichen */
  line-height: 1.45;
}
.camados-datei__summe { color: var(--color-foreground-muted); }

.camados-datei__schritte {
  margin: 20px 0 0;
  padding-inline-start: 1.2em;
  font-size: 0.9rem;
  line-height: 1.6;
}
.camados-datei__schritte li { margin-block-end: 8px; }

/* Die Schranke. Offen und zu sehen bewusst unterschiedlich aus: Der offene
   Zustand ist eine beilaeufige Zeile, der geschlossene ein Kasten, weil dort
   eine Handlung verlangt wird. */
.camados-schranke--offen {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-foreground-muted);
}
.camados-schranke--zu {
  max-width: 46rem;
  padding: 30px;
  border-radius: 18px;
  border: 1px solid rgb(from var(--color-primary) r g b / 35%);
  background: rgb(from var(--color-primary) r g b / 7%);
}
.camados-schranke--zu h3 { margin: 0 0 10px; color: var(--color-foreground-heading); }
.camados-schranke__warum {
  margin-block-end: 0;
  font-size: 0.85rem;
  color: var(--color-foreground-muted);
}

.camados-befehl {
  margin: 0;
  padding: 18px 20px;
  border-radius: 12px;
  overflow-x: auto;                 /* nie die Seite quer schieben */
  background: rgb(from var(--color-foreground) r g b / 8%);
  font-size: 0.82rem;
  line-height: 1.6;
}

/* ---- Mega-Menue: Milchglas ---------------------------------------------
   Wie auf der Hydrogen-Fassung. Der Trick ist nicht die Durchsichtigkeit
   allein, sondern die Kombination aus drei Dingen:

     1. Grund NICHT ganz deckend (88 %), sonst ist es nur eine Flaeche
     2. `blur` — ohne ihn wird der Text darunter lesbar und beide Ebenen
        kaempfen um Aufmerksamkeit
     3. `saturate(180%)` — die Farben darunter werden beim Weichzeichnen
        blass; das Hochdrehen gibt ihnen zurueck, was der Weichzeichner nimmt.
        Genau das unterscheidet „Milchglas" von „Nebel".

   Der Grund kommt aus dem Farbschema, nicht als fester Wert: So bleibt das
   Menue stimmig, wenn ein Abschnitt einmal ein anderes Schema traegt. */
/* ⚠️⚠️ DER EIGENTLICHE FEHLER — gefunden durch Lars' Beobachtung, nicht durch
   meine Messungen: „beim Schliessen ist es kurz transparent, es sind zwei
   Ebenen."

   Horizon legt JEDES Untermenue dauerhaft an, alle an derselben Stelle
   (y=108), nur per `visibility` ein- und ausgeblendet. Bei drei Menuepunkten
   mit Unterpunkten liegen also DREI Scheiben uebereinander.

   Meine Regel gab den Grund und den Weichzeichner ALLEN dreien — unabhaengig
   davon, ob sie offen sind. Waehrend eines Wechsels oder beim Schliessen sind
   zwei davon gleichzeitig gemalt, und dann passiert zweierlei:

     * 0,55 auf 0,55 ergibt zusammen rund 0,80 — deutlich deckender
     * `saturate(1.8)` wird ZWEIMAL angewendet, effektiv 3,24

   Zweifach aufgesaettigtes Fast-Schwarz plus zwei helle Auflagen ergibt genau
   das helle Graublau aus Lars' Fotos. Deshalb sah es „erst durchsichtig, dann
   nicht mehr" aus: Beim ersten Oeffnen nach dem Neuladen war nur EINE Scheibe
   je gemalt worden.

   ⚠️ MERKSATZ: Ein Effekt, der sich mit sich selbst ueberlagert, gehoert an
   den ZUSTAND gebunden, nicht an das Element. Sonst multipliziert er sich
   genau dann, wenn niemand hinschaut — im Uebergang.

   Spezifitaet: Horizons Grund kommt von
   `.menu-list__list-item:where(...) > .menu-list__submenu` = (0,2,0).
   `:not([slot='overflow'])` und `:hover` zaehlen jeweils mit, damit gewinne ich. */

/* Geschlossen: KEINE Flaeche, KEIN Weichzeichner. */
.menu-list__list-item:not([slot='overflow']) > .menu-list__submenu,
.overflow-menu::part(overflow) {
  background-color: transparent;
  background-image: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

/* Die Scheibe traegt jetzt `.overflow-menu::after` in
   blocks/_header-menu.liquid — Horizons eigene Menue-Flaeche. Hier steht
   bewusst NICHTS mehr: Zwei Flaechen uebereinander ergaben 0,55 auf 0,55 und
   `saturate(1.8)` doppelt, also das helle Graublau aus Lars' Fotos. */

/* Trennlinien zwischen den Spalten — als Einstellung bietet Horizon sie nur
   fuer das Handy-Menue an. Sehr zurueckhaltend: Die Spalten trennt der
   Weissraum, die Linie bestaetigt ihn nur. */
.mega-menu__list > .mega-menu__column + .mega-menu__column {
  border-inline-start: 1px solid rgb(from var(--color-foreground) r g b / 10%);
  padding-inline-start: 28px;
}
/* Die Ueberschrift einer Spalte: kleiner, ruhiger, nicht anklickbar wirkend.
   Sie entsteht dadurch, dass ein Punkt der zweiten Ebene selbst Kinder hat. */
/* ⚠️ Spezifitaet, zum zweiten Mal an derselben Stelle: Horizon daempft ALLE
   Menuelinks auf 70 % Deckkraft. Meine Regel war ein blosses
   `.mega-menu__link--parent` — gleiche Staerke wie die des Themes, also
   entscheidet die Ladereihenfolge, und die Ueberschrift stand blasser da als
   die Links darunter. Das ist genau verkehrt herum: Eine Ueberschrift, die
   schwaecher ist als ihr Inhalt, ordnet nichts.
   Mit dem vorangestellten Listen-Selektor komme ich auf (0,2,0). */
.mega-menu__list .mega-menu__link--parent {
  color: var(--color-foreground-heading);
  font-weight: 600;
  letter-spacing: 0.01em;
  opacity: 1;
}

/* ---- Preisrechner -------------------------------------------------------
   Die Anzahl-Wahl als Knopfreihe, nicht als Auswahlfeld: Ein Auswahlfeld
   verbirgt, dass es ueberhaupt eine Wahl gibt, und braucht zwei Klicks fuer
   etwas, das die meisten genau einmal einstellen. */
.camados-wahl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  margin-block-end: 26px;
}
.camados-wahl__frage { font-size: 0.95rem; color: var(--color-foreground-heading); }
.camados-wahl__knoepfe { display: flex; flex-wrap: wrap; gap: 6px; }
.camados-wahl__knopf {
  min-width: 42px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid rgb(from var(--color-foreground) r g b / 20%);
  background: transparent;
  color: var(--color-foreground);
  font: inherit;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.camados-wahl__knopf:hover { border-color: var(--color-primary); }
.camados-wahl__knopf.ist-an {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #241606;          /* 5,98:1 auf #c8894a — im hellen Schema kippt es mit */
  font-weight: 600;
}
:root:not([data-theme='dark']) .camados-wahl__knopf.ist-an { color: #fff6ea; }
.camados-wahl__haken {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  cursor: pointer;
}

/* Eine entfallende Zeile wird NICHT ausgeblendet, sondern gedaempft gezeigt.
   Verschwindet sie, fragt sich der Leser, ob er etwas vergessen hat; steht sie
   durchgestrichen da, lernt er die Regel. */
.camados-rechner__tabelle tr.ist-aus th,
.camados-rechner__tabelle tr.ist-aus td { opacity: 0.45; }
.camados-rechner__tabelle tr.ist-aus td { text-decoration: line-through; }
.camados-rechner__menge {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  padding-inline-end: 28px;
  color: var(--color-foreground) !important;
  font-weight: 400 !important;
}
.camados-rechner__summe {
  margin-block-start: 22px;
  font-size: 1.1rem;
  color: var(--color-foreground-heading);
}
.camados-rechner__summe span {
  display: block;
  margin-block-start: 4px;
  font-size: 0.9rem;
  color: var(--color-foreground);
}

/* ---- Mega-Menue: das Hereingleiten --------------------------------------
   Der Teil, den ich beim Nachbauen uebersehen hatte. Hydrogen liess das Menue
   um 8 px von oben hereingleiten. Das klingt nach nichts und ist doch der
   groesste Anteil am Eindruck „Scheibe": Eine Flaeche, die einfach da ist,
   liest sich als Teil der Seite — eine, die sich bewegt, als Gegenstand
   darueber. */
/* (Das Hereingleiten steht jetzt oben auf .menu-list__submenu-inner.) */

/* ---- Aufstellungs-Wahl --------------------------------------------------
   Zwei Zeilen je Knopf: oben der Name der Aufstellung, darunter, was sie
   bedeutet. „Stereo" versteht jeder sofort, „zwei Boxen" beantwortet die
   Rueckfrage, bevor sie entsteht. */
.camados-wahl__knopf {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  padding: 12px 18px;
  text-align: left;
  line-height: 1.25;
}
.camados-wahl__knopf strong { font-size: 0.98rem; font-weight: 600; }
.camados-wahl__knopf span {
  font-size: 0.78rem;
  opacity: 0.72;
  white-space: nowrap;
}
.camados-wahl__knopf.ist-an span { opacity: 0.8; }
.camados-wahl__knoepfe { gap: 8px; }

/* ---- ⚠️ DIE WURZEL: clip-path toetet backdrop-filter --------------------
   Horizon klappt das Untermenue ueber `clip-path: rect(0 100% <hoehe> 0)` auf
   und animiert diesen Wert. Das sieht gut aus und hat eine Nebenwirkung, die
   nirgends dabeisteht:

     Ein Element mit `clip-path` oeffnet eine eigene BACKDROP-WURZEL.
     `backdrop-filter` auf demselben Element hat danach nichts mehr hinter
     sich, das es weichzeichnen koennte.

   Der berechnete Stil zeigt trotzdem brav `saturate(1.8) blur(22px)` — die
   Regel gewinnt ja. Sie wirkt nur nicht. Ich habe deshalb dreimal „ist doch
   da" gemessen, waehrend Lars dreimal „ist nicht durchsichtig" gesehen hat.
   Er hatte recht: Uebrig blieb allein die flache Toenung.

   Hydrogen hatte kein clip-path, sondern `opacity` + `translateY(-8px)` —
   genau darum war es dort echt durchsichtig. Ich stelle dieselbe Einblendung
   her und nehme das clip-path heraus.

   ⚠️ `!important` steht hier bewusst: Der Wert kommt aus einem
   `{% stylesheet %}`-Block des Bausteins und traegt eine eigene Hoehen-
   Variable. Ohne ihn gewaenne je nach Ladereihenfolge wieder das clip-path,
   und der Fehler kaeme unbemerkt zurueck. */
/* ⚠️⚠️ DIE REGEL, DIE ICH ZWEIMAL GEBROCHEN HABE:
   NIEMALS `opacity`, `transform`, `filter` oder `clip-path` auf DASSELBE
   Element wie `backdrop-filter`. Jedes davon macht das Element zu einer
   eigenen Backdrop-Wurzel — der Weichzeichner hat dann nichts mehr hinter
   sich, und der halbdurchsichtige Grund liegt auf nichts.

   Der Weg dahin, als Warnung fuer das naechste Mal:
     1. Horizon klappt mit `clip-path` auf  -> Weichzeichner tot.
     2. Ich nehme clip-path raus und setze `opacity` als Einblendung
        -> WIEDER tot, nur unauffaelliger. Lars' Beobachtung war der
        Schluessel: nach dem Neuladen kurz durchsichtig, beim zweiten
        Oeffnen nicht mehr. Genau so verhaelt sich ein Element, das nach
        der ersten Animation auf einer eigenen Zeichenebene liegenbleibt.
     3. Jetzt traegt das KIND die Blende. Die Scheibe selbst hat nur noch
        `visibility` — das erzeugt keine Backdrop-Wurzel.

   Ich habe zweimal denselben Fehler gemacht, weil ich die Ursache behoben
   und die REGEL nicht mitgenommen habe. Deshalb steht sie jetzt hier. */
.menu-list__list-item:not([slot='overflow']) > .menu-list__submenu,
.overflow-menu::part(overflow) {
  clip-path: none !important;
  transition: visibility 0.22s;
}
.menu-list__list-item:has([aria-expanded='true']) > .menu-list__submenu,
.menu-list__list-item:hover > .menu-list__submenu,
.menu-list__list-item:focus-within > .menu-list__submenu {
  visibility: visible;
}

/* ⚠️ HIER STAND MEINE EIGENE BLENDE AUF `.menu-list__submenu-inner` — und
   sie war falsch, weil Horizon dasselbe Element BEREITS animiert:

       .menu-list__submenu-inner {
         opacity: var(--submenu-content-opacity);   ( 0 zu, 1 offen */
         transition: var(--submenu-content-animation);
       }

   Meine Regel hatte dieselbe Staerke (0,1,0). Bei Gleichstand entscheidet die
   Ladereihenfolge — also mal meine, mal seine, je nachdem welche Datei zuletzt
   kommt. Zwei Regeln, die dieselbe Deckkraft steuern, ergeben keinen Mittelwert,
   sondern einen Zufall.

   Die Einblendung macht jetzt wieder das Theme allein. Ich fasse nur noch an,
   was es NICHT kann: das Hereingleiten von oben.

   ⚠️ `transform` ist hier unbedenklich, weil es auf dem KIND sitzt. Auf der
   Scheibe selbst waere es der dritte Backdrop-Killer nach clip-path und
   opacity. */
@media (prefers-reduced-motion: no-preference) {
  .menu-list__submenu-inner {
    transform: translateY(-8px);
    transition: transform 0.24s var(--ease-out-cubic, cubic-bezier(0.22, 1, 0.36, 1));
  }
  .menu-list__list-item:has([aria-expanded='true']) > .menu-list__submenu > .menu-list__submenu-inner,
  .menu-list__list-item:hover > .menu-list__submenu > .menu-list__submenu-inner,
  .menu-list__list-item:focus-within > .menu-list__submenu > .menu-list__submenu-inner {
    transform: none;
  }
}

/* ---- Aufstellungs-Wahl --------------------------------------------------
   Zwei Zeilen je Knopf: oben der Name der Aufstellung, darunter, was sie
   bedeutet. „Stereo" versteht jeder sofort, „zwei Boxen" beantwortet die
   Rueckfrage, bevor sie entsteht. */
.camados-wahl__knopf {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  padding: 12px 18px;
  text-align: left;
  line-height: 1.25;
}
.camados-wahl__knopf strong { font-size: 0.98rem; font-weight: 600; }
.camados-wahl__knopf span {
  font-size: 0.78rem;
  opacity: 0.72;
  white-space: nowrap;
}
.camados-wahl__knopf.ist-an span { opacity: 0.8; }
.camados-wahl__knoepfe { gap: 8px; }

/* ---- ⚠️ DIE WURZEL: clip-path toetet backdrop-filter --------------------
   Horizon klappt das Untermenue ueber `clip-path: rect(0 100% <hoehe> 0)` auf
   und animiert diesen Wert. Das sieht gut aus und hat eine Nebenwirkung, die
   nirgends dabeisteht:

     Ein Element mit `clip-path` oeffnet eine eigene BACKDROP-WURZEL.
     `backdrop-filter` auf demselben Element hat danach nichts mehr hinter
     sich, das es weichzeichnen koennte.

   Der berechnete Stil zeigt trotzdem brav `saturate(1.8) blur(22px)` — die
   Regel gewinnt ja. Sie wirkt nur nicht. Ich habe deshalb dreimal „ist doch
   da" gemessen, waehrend Lars dreimal „ist nicht durchsichtig" gesehen hat.
   Er hatte recht: Uebrig blieb allein die flache Toenung.

   Hydrogen hatte kein clip-path, sondern `opacity` + `translateY(-8px)` —
   genau darum war es dort echt durchsichtig. Ich stelle dieselbe Einblendung
   her und nehme das clip-path heraus.

   ⚠️ `!important` steht hier bewusst: Der Wert kommt aus einem
   `{% stylesheet %}`-Block des Bausteins und traegt eine eigene Hoehen-
   Variable. Ohne ihn gewaenne je nach Ladereihenfolge wieder das clip-path,
   und der Fehler kaeme unbemerkt zurueck. */
/* ⚠️⚠️ DIE REGEL, DIE ICH ZWEIMAL GEBROCHEN HABE:
   NIEMALS `opacity`, `transform`, `filter` oder `clip-path` auf DASSELBE
   Element wie `backdrop-filter`. Jedes davon macht das Element zu einer
   eigenen Backdrop-Wurzel — der Weichzeichner hat dann nichts mehr hinter
   sich, und der halbdurchsichtige Grund liegt auf nichts.

   Der Weg dahin, als Warnung fuer das naechste Mal:
     1. Horizon klappt mit `clip-path` auf  -> Weichzeichner tot.
     2. Ich nehme clip-path raus und setze `opacity` als Einblendung
        -> WIEDER tot, nur unauffaelliger. Lars' Beobachtung war der
        Schluessel: nach dem Neuladen kurz durchsichtig, beim zweiten
        Oeffnen nicht mehr. Genau so verhaelt sich ein Element, das nach
        der ersten Animation auf einer eigenen Zeichenebene liegenbleibt.
     3. Jetzt traegt das KIND die Blende. Die Scheibe selbst hat nur noch
        `visibility` — das erzeugt keine Backdrop-Wurzel.

   Ich habe zweimal denselben Fehler gemacht, weil ich die Ursache behoben
   und die REGEL nicht mitgenommen habe. Deshalb steht sie jetzt hier. */
.menu-list__list-item:not([slot='overflow']) > .menu-list__submenu,
.overflow-menu::part(overflow) {
  clip-path: none !important;
  transition: visibility 0.22s;
}
.menu-list__list-item:has([aria-expanded='true']) > .menu-list__submenu,
.menu-list__list-item:hover > .menu-list__submenu,
.menu-list__list-item:focus-within > .menu-list__submenu {
  visibility: visible;
}

/* Die Blende sitzt auf dem Inhalt, nicht auf der Scheibe. */
.menu-list__submenu-inner {
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity 0.24s var(--ease-out-cubic, cubic-bezier(0.22, 1, 0.36, 1)),
    transform 0.24s var(--ease-out-cubic, cubic-bezier(0.22, 1, 0.36, 1));
}
.menu-list__list-item:has([aria-expanded='true']) > .menu-list__submenu > .menu-list__submenu-inner,
.menu-list__list-item:hover > .menu-list__submenu > .menu-list__submenu-inner,
.menu-list__list-item:focus-within > .menu-list__submenu > .menu-list__submenu-inner {
  opacity: 1;
  transform: none;
}

/* ---- Handy-Menue: dieselbe Scheibe wie am Rechner ----------------------
   ⚠️ Der Grund, warum Lars viermal „nicht durchsichtig" gesagt hat, waehrend
   ich viermal „doch, 40 %" gemessen habe: Horizon hat auf dem Handy GAR KEIN
   Mega-Menue. Dort laeuft ein eigenes Bauteil, `menu-drawer`, mit
   `background: var(--color-background)` — voll deckend. Keine meiner Regeln
   hat es je beruehrt.

   Ich habe die ganze Zeit am Rechner gemessen und er auf dem Telefon
   geschaut. Beide Beobachtungen waren richtig; sie galten nur verschiedenen
   Bauteilen. */
.menu-drawer[class*='color-scheme'] {
  background-color: rgba(20, 18, 16, 0.92);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .menu-drawer[class*='color-scheme'] {
    background-color: rgba(20, 18, 16, 0.55);
    background-image: linear-gradient(
      rgb(from var(--color-foreground) r g b / 7%),
      rgb(from var(--color-foreground) r g b / 7%)
    );
    -webkit-backdrop-filter: saturate(180%) blur(22px);
    backdrop-filter: saturate(180%) blur(22px);
  }
}
/* Die Ueberschriften im Handy-Menue („Software", „Bauen", „Laden") sind
   dieselben zweiten Ebenen wie die Spaltenkoepfe am Rechner — sie sollen
   auch gleich aussehen. */
.menu-drawer__menu > .menu-drawer__list-item > a { font-weight: 600; }

/* ---- Einblenden beim Scrollen ------------------------------------------
   ⚠️ Die Elemente starten NICHT hier unsichtbar. Die Klasse `camados-kommt`
   setzt erst camados.js. Ohne Javascript gibt es damit keinen Zustand, in dem
   Inhalt hinter einem Skript verschwindet, das nicht laeuft — genau der
   Fehler, den man mit `opacity: 0` im Stylesheet baut und erst bemerkt, wenn
   jemand anruft.

   16 px Versatz, 600 ms, gestaffelt um 60 ms. Mehr wirkt wie ein Werbebanner;
   der Reiz liegt darin, dass man es kaum bemerkt. */
@media (prefers-reduced-motion: no-preference) {
  .camados-kommt {
    opacity: 0;
    transform: translateY(16px);
    transition:
      opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1) var(--camados-verzug, 0ms),
      transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) var(--camados-verzug, 0ms);
    will-change: opacity, transform;
  }
  .camados-kommt.camados-da {
    opacity: 1;
    transform: none;
    will-change: auto;
  }
}

/* ---- Wortmarke: CAMADOS. --------------------------------------------------
   Horizon rendert den Shop-Namen als schlichten Text. Statt das Markup zu
   veraendern (was bei jedem Theme-Update zurueckkaeme), greife ich mit
   `::first-letter` auf das C und haenge den Punkt als `::after` an.

   Der Punkt ist nicht Zierde: Es ist derselbe, der an der Box die
   Betriebsanzeige ist.

   ⚠️ `::first-letter` wirkt nur auf Elementen mit Block-Darstellung — deshalb
   das `inline-block`. Ohne das passiert gar nichts, und zwar lautlos. */
.header-logo__image-container {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.header-logo__image-container::first-letter {
  color: var(--color-primary);
}
.header-logo__image-container::after {
  content: '.';
  color: var(--color-primary);
  /* ⚠️ Die Laufweite wirkt auch HINTER dem letzten Buchstaben. Ohne diesen
     Ausgleich steht dort „CAMADOS ." mit Luecke — der Punkt sieht dann aus wie
     ein Satzzeichen statt wie Teil der Wortmarke. */
  margin-inline-start: -0.06em;
}

/* ---- Sync-Wellen ---------------------------------------------------------
   Hydrogen hatte hier eine STATISCHE Grafik: zwei uebereinanderliegende
   Wellen mit der Beschriftung. Das zeigt das Ergebnis, aber nicht die Sache.

   Hier laufen die beiden Wellen erst auseinander und rasten dann ein. Das ist
   genau das, was die Software tut — und es erklaert in zwei Sekunden, wofuer
   sonst ein Absatz noetig waere.

   ⚠️ Die Bewegung laeuft NUR mit `prefers-reduced-motion: no-preference`.
   Ohne sie liegen die Wellen deckungsgleich — also im richtigen Endzustand,
   nicht in einem kaputten. */
.camados-wellen {
  display: block;
  width: 100%;
  max-width: 34rem;
  height: auto;
}
.camados-wellen__r { transform: translateX(0); }
@media (prefers-reduced-motion: no-preference) {
  .camados-wellen__r {
    animation: camados-einrasten 6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  }
}
@keyframes camados-einrasten {
  0%   { transform: translateX(13px); opacity: 0.55; }
  8%   { transform: translateX(13px); opacity: 0.55; }
  38%  { transform: translateX(0);    opacity: 1; }
  86%  { transform: translateX(0);    opacity: 1; }
  100% { transform: translateX(13px); opacity: 0.55; }
}

/* ---- Platzhalter fuer fehlende Bilder ------------------------------------
   ⚠️ BEWUSST ALS PLATZHALTER ERKENNBAR, nicht als Gestaltungselement.
   Ein huebsch gemachter Platzhalter bleibt jahrelang stehen, weil er nicht
   stoert. Dieser sagt, WAS dort hingehoert — dann ist er eine Aufgabe und
   keine Flaeche. */
.camados-platzhalter {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 220px;
  padding: 28px;
  border-radius: 18px;
  border: 1px dashed rgb(from var(--color-primary) r g b / 45%);
  background: repeating-linear-gradient(
    -45deg,
    rgb(from var(--color-foreground) r g b / 3%) 0 10px,
    transparent 10px 20px
  );
  text-align: center;
}
.camados-platzhalter__was {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-primary);
}
.camados-platzhalter__wie {
  max-width: 42ch;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--color-foreground);
}

/* ---- Vergleichstabelle kostenlos/Premium --------------------------------
   ⚠️ Die Haken tragen zusaetzlich ein Wort fuer Vorleseprogramme. Eine
   Vergleichstabelle, die nur ueber Farbe und Zeichen funktioniert, ist fuer
   farbfehlsichtige Leser leer — und gerade hier steht die Kaufentscheidung. */
.camados-vergleich {
  width: 100%;
  border-collapse: collapse;
  margin-block: 8px 4px;
}
.camados-vergleich th[scope='col'] {
  padding: 0 0 14px;
  font-size: 0.9rem;
  color: var(--color-foreground-heading);
  text-align: center;
  width: 8rem;
}
.camados-vergleich th[scope='row'] {
  padding: 13px 24px 13px 0;
  font-weight: 400;
  text-align: left;
  border-block-end: 1px solid rgba(128, 128, 128, 0.2);
  border-block-end-color: rgb(from var(--color-foreground) r g b / 12%);
}
.camados-vergleich td {
  padding: 13px 0;
  text-align: center;
  font-size: 1.15rem;
  border-block-end: 1px solid rgba(128, 128, 128, 0.2);
  border-block-end-color: rgb(from var(--color-foreground) r g b / 12%);
}
.camados-vergleich .ist-ja { color: #7fbf8a; }
.camados-vergleich .ist-nein { color: var(--color-foreground); opacity: 0.4; }
.nur-vorlesen {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ═══ DIE EIGENTLICHE URSACHE — gefunden von Lars ═════════════════════════
   Horizon malt den Grund des Mega-Menues NICHT auf das Untermenue, sondern auf
   ein eigenes Pseudo-Element:

       .overflow-menu::after        ( the submenu background element to animate */
       height: var(--submenu-height);
       background-color: var(--color-background);   ← DECKEND
       opacity: var(--submenu-opacity, 1);
       z-index: calc(var(--layer-header-menu) - 1); ← eine Ebene unter der Scheibe

   Beide Variablen setzt `assets/header-menu.js` erst beim Ueberfahren:

       this.style.setProperty('--submenu-height', submenuHeight + 'px');
       this.style.setProperty('--submenu-opacity', '1');

   Genau deshalb Lars' Befund: Setzt man `aria-expanded` von Hand, bleibt
   `--submenu-height` leer, die Platte hat Hoehe 0 — und alles ist durchsichtig.
   Faehrt man mit der Maus drueber, schiebt sich die deckende Platte dahinter.

   ⚠️ WARUM ICH SIE NIE GEFUNDEN HABE: Ich habe Pseudo-Elemente geprueft — aber
   nur am Untermenue und an dessen KINDERN. Dieses hier haengt an einem
   Geschwister weiter oben. Meine Suche war gruendlich innerhalb einer
   Annahme, die falsch war: dass der Grund am Element haengt, das man sieht.

   Die Scheibe traegt jetzt mein Untermenue. Die Platte darunter braucht
   deshalb keinen eigenen Grund mehr — Hoehe und Ein-/Ausblenden bleiben, damit
   die Animation des Themes weiter funktioniert. */
.overflow-menu::after {
  background-color: transparent !important;
  box-shadow: none !important;
}

/* ═══ WARUM DER WEICHZEICHNER BEIM SCROLLEN VERSCHWAND ════════════════════
   sections/header.liquid setzt im Sticky-Zustand:

       .header[data-sticky-state='active'] { view-transition-name: sticky-header; }

   `view-transition-name` hebt das Element in eine eigene
   View-Transition-Ebene. Die ist eine BACKDROP-WURZEL — `backdrop-filter`
   darin hat nichts mehr hinter sich. Die reine Deckkraft bleibt davon
   unberuehrt, weil sie nur Kompositing ist.

   Deshalb Lars' Beobachtung, die den Fall geloest hat: „die Transparenz
   bleibt gleich, aber der Weichzeichner ist weg" — und zwar ab dem ersten
   gescrollten Pixel, also genau ab dem Moment, in dem der Sticky-Zustand
   greift.

   ⚠️ NICHT pauschal abschalten: Der Name traegt den Uebergang des
   Kopfbereichs beim Seitenwechsel, und den will Lars behalten. Er faellt
   deshalb nur weg, SOLANGE ein Mega-Menue offen ist — also genau dann, wenn
   der Weichzeichner gebraucht wird, und nie waehrend eines Seitenwechsels.
   Ein Menue ist bei einem Seitenwechsel nie offen. */
.header[data-sticky-state='active']:has(.mega-menu__list:hover),
.header[data-sticky-state='active']:has(.menu-list__link[aria-haspopup]:hover),
.header[data-sticky-state='active']:has(.menu-list__link[aria-haspopup][aria-expanded='true']),
.header[data-sticky-state='active']:has(.menu-list__link[aria-haspopup][data-animating]) {
  view-transition-name: none;
}

/* ---- Abgeschnittene Texte vermeiden -------------------------------------
   Zwei Stellen tragen `white-space: nowrap`, weil dort Zahlen und Beschriftungen
   nicht umbrechen sollen. Auf schmalen Bildschirmen wird daraus abgeschnittener
   Text — also genau der Fehler, den `nowrap` verhindern sollte, nur anders. */
@media (max-width: 560px) {
  .camados-wahl__knopf { flex: 1 1 46%; }
  .camados-wahl__knopf span { white-space: normal; }
  .camados-liste th { padding-inline-end: 14px; }
  /* Die Preisspalte darf schrumpfen, aber nie umbrechen — ein Preis, der
     zwischen Euro und Cent bricht, ist unlesbar. Deshalb kleiner statt Umbruch. */
  .camados-liste td { font-size: 0.9rem; }
  .camados-vergleich th[scope='col'] { width: 5rem; font-size: 0.8rem; }
}

/* Lange Wortketten in Karten („Klassen, Modelle & Name") duerfen trennen,
   statt aus der Karte zu laufen. */
.mega-menu__link-title,
.camados-datei h3,
.camados-platzhalter__was {
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* Sprungpunkte: der Kopfbereich ist klebend, also muss ein Anker weit genug
   oberhalb liegen — sonst schiebt sich die Ueberschrift darunter. */
.camados-anker {
  display: block;
  height: 0;
  scroll-margin-top: 110px;
}