/*
 * Das Design des oeffentlichen Shops www.kelziholz.de, uebernommen fuer den
 * Kundenbereich -- damit Shop und Kundenbereich nach demselben Laden aussehen
 * und der Uebergang aus der Etsy-/Shop-Welt in den Konfigurator keinen
 * Stilbruch macht.
 *
 * Vorlage ist workbench-web.css aus dem Schwesterprojekt workbench
 * (workbench.kelzi.org), wo dieselben Shop-Werte bereits aus den berechneten
 * Stilwerten der Seite abgenommen wurden -- nicht geschaetzt:
 *
 *   Schrift        Quicksand, durchgehend, auch in den Ueberschriften
 *   Grund          reines Weiss, Wechselband #F7F7F7
 *   Text           reines Schwarz, Sekundaertext #3C3C3C und #767676
 *   Akzent         Sand #DDD0C0 -- die einzige Farbe im ganzen Design
 *   Schaltflaechen schwarz auf weiss, Pillenform
 *   Ueberschriften gross und leicht (Schnitt 500), ohne Sperrung
 *   Flaechen       keine Schatten, kaum Rundung, Bilder ohne Rundung
 *
 * Das loest die fruehere warme Papier- und Holzwelt ab (Fraunces in den
 * Ueberschriften, weiche Karten mit Schatten). Fraunces wird dadurch nirgends
 * mehr gebraucht -- der Shop setzt auch Ueberschriften in Quicksand --, die
 * Dateien bleiben aber unter schrift/ liegen.
 *
 * Quicksand liegt in schrift/ auf diesem Server. Die Platzhalterseite hat sie
 * noch von fonts.googleapis.com geholt; auf einer oeffentlichen Kundenseite
 * uebertraegt das die IP jedes Besuchers an Google, und dafuer gibt es keine
 * Einwilligung. Als variable Schrift deckt EINE Datei je Zeichensatz alle
 * Schnitte von 300 bis 700 ab.
 */

@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/static/schrift/quicksand-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/static/schrift/quicksand-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Weiss, Schwarz, Sand -- sonst nichts. Dieselben Werte wie im Konfigurator
   (frontend/src/styles.css), damit Portal und Werkzeug nach demselben Laden
   aussehen und nicht nach zwei Baukaesten.

   Der Shop wechselt weisse und hellgraue Abschnittsbaender ab. Hier traegt
   das hellgraue Band den Grund und die Karten sind weiss -- andersherum
   waeren sie auf weissem Grund nur noch an ihrer Haarlinie zu erkennen. */
:root {
  --ink: #000000;
  --ink-2: #3c3c3c;
  --muted: #767676;
  --sand: #ddd0c0;
  --ground: #f7f7f7;
  --karte: #ffffff;
  --linie: #e9e9e9;
  --linie-stark: #cfcfcf;
  /* Der Shop kennt keine Schatten. Die Variable bleibt, damit die Stellen,
     die sie benutzen, nicht einzeln angefasst werden muessen. */
  --schatten: none;
  --r: 4px;
  --pille: 999px;
  /* Eine Schrift fuer alles, wie im Shop -- der Name bleibt --serif, damit
     die Ueberschriftenregeln unveraendert weiterlaufen. */
  --serif: 'Quicksand', 'Helvetica Neue', Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #ffffff;
    --ink-2: #bdbdbd;
    --muted: #9a9a9a;
    --sand: #6a5f51;
    --ground: #0e0e0e;
    --karte: #161616;
    --linie: #2a2a2a;
    --linie-stark: #3e3e3e;
    --schatten: none;
  }
}

* { box-sizing: border-box; }

html, body { min-height: 100%; margin: 0; }

/* Das hellgraue Wechselband des Shops als Grund, die Karten darauf weiss. */
body {
  background: var(--ground);
  font-family: 'Quicksand', 'Helvetica Neue', Arial, sans-serif;
  color: var(--ink);
  line-height: 1.5;
}

body.portal {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 6vw 5vw 2rem;
}

/* Auf allen Portal-artigen Seiten AUSSER dem Portal selbst sitzt die fixierte
   .modulnav oben drueber -- ohne diesen Zuschlag wuerde die zentrierte Karte
   teilweise darunter verschwinden. */
body.mit-nav { padding-top: calc(6vw + 3.2rem); }

/* Modul-Navigation: auf jeder Kundenseite ausser dem Portal selbst (nav.html
   blendet sich dort aus, weil das Portal dieselben Ziele schon als Kacheln
   zeigt). Fest oben, damit sie die Zentrierung von body.portal nicht stoert --
   ohne position:fixed waere sie ein Flex-Kind und wuerde mit hochzentriert. */
.modulnav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  padding: 0.9rem 1rem;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--linie);
}

@media (prefers-color-scheme: dark) {
  .modulnav { background: rgba(22, 22, 22, 0.92); }
}

.modulnav a, .modulnav .an {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 600;
  /* Ohne nowrap bricht "Konfiguriere deine Eierbecher" auf dem Handy in
     drei Zeilen um -- die Leiste waere dann dreimal so hoch wie der
     Platz, den body.mit-nav oben dafuer freihaelt, und laege ueber der
     Ueberschrift. Lieber eine Leiste, die man seitlich schiebt. */
  white-space: nowrap;
}

.modulnav .an { color: var(--ink); }

@media (max-width: 720px) {
  .modulnav {
    justify-content: flex-start;
    gap: 1.1rem;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .modulnav::-webkit-scrollbar { display: none; }
}

/* ------------------------------------------------------------- Portal */

.wrap { width: 100%; max-width: 820px; text-align: center; }

/* Nur noch im Adminbereich (Login, Passkey-Registrierung). Die oeffentlichen
   Kundenseiten tragen das Logo nicht mehr: die Modulnavigation steht ohnehin
   ueber jeder Seite, und das Logo schob den eigentlichen Inhalt auf dem
   Telefon unter die Falz. */
.badge { width: min(60vw, 240px); height: auto; display: block; margin: 0 auto 2rem; }
.badge.klein { width: min(40vw, 120px); margin-bottom: 1rem; }

/* Obergrenze statt 1fr: sonst zieht sich eine einzelne Kachel ueber die
   ganze Breite und sieht aus wie ein Banner, nicht wie eine Kachel. */
.kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 380px));
  justify-content: center;
  gap: 1.1rem;
}

/* Eine Haarlinie, sonst nichts -- der Shop kennt keine Schatten. */
.kachel {
  position: relative;
  display: block;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  padding: 0 0 1.4rem;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  text-align: left;
  /* Der Shop hebt nichts an und wirft keine Schatten -- die Kachel
     antwortet nur mit einer dunkleren Kante. */
  transition: border-color 0.15s ease;
}

.kachel:hover, .kachel:focus-visible {
  border-color: var(--ink);
}

/* Das Foto fuellt die Kachel oben randlos aus -- wie das Bild in einem
   Katalog, nicht wie ein Symbol neben einer Zeile. Festes 3:2, damit die
   Kacheln nebeneinander gleich hoch bleiben, egal welches Format Thomas
   hochlaedt; ohne Foto bleibt genau diese Flaeche leer stehen. */
.kachel-bild {
  display: block;
  aspect-ratio: 3 / 2;
  background: var(--sand);
  border-bottom: 1px solid var(--linie);
}

.kachel-bild img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.kachel-titel {
  display: block;
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 500;
  padding: 1.1rem 1.4rem 0;
}

.kachel-text {
  display: block;
  margin-top: 0.35rem;
  padding: 0 1.4rem;
  color: var(--muted);
  font-size: 0.94rem;
}

/* Blanko-Module: die Kachel existiert schon, die Funktion noch nicht -- das
   Label sagt es, bevor jemand klickt, statt ihn erst auf der Zielseite zu
   enttaeuschen. Etwas blasser, damit sie sich sichtbar von den fertigen
   Modulen absetzt. */
.kachel-badge {
  position: absolute;
  top: 0.7rem;
  right: 0.85rem;
  z-index: 1;
  font-family: var(--serif);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

.kachel.kommt-spaeter { opacity: 0.82; }

.hinweis { color: var(--muted); }

.knopf {
  display: inline-block;
  border: 0;
  border-radius: var(--pille);
  padding: 0.7rem 1.4rem;
  background: var(--ink);
  color: var(--karte);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.knopf.still {
  background: var(--karte);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--linie-stark);
}

.rechtliches {
  margin-top: 2.5rem;
  padding: 1rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
}

.rechtliches a { color: inherit; }

/* -------------------------------------------------------------- Admin */

body.admin { display: block; }

.admin-kopf {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  align-items: center;
  justify-content: space-between;
  padding: 1rem clamp(1rem, 4vw, 2.5rem);
  background: var(--karte);
  border-bottom: 1px solid var(--linie);
}

.admin-kopf .marke { font-weight: 700; text-decoration: none; color: inherit; }
.admin-kopf nav { display: flex; align-items: center; gap: 1rem; }
.admin-kopf nav a { color: var(--muted); text-decoration: none; }
.admin-kopf nav a.an { color: var(--ink); font-weight: 700; }
.admin-kopf nav form { margin: 0; }
.admin-kopf nav button {
  border: 0; background: none; font: inherit; color: var(--muted); cursor: pointer; padding: 0;
}

.admin-inhalt { max-width: 1000px; margin: 0 auto; padding: clamp(1rem, 4vw, 2.5rem); }

/* Der Shop setzt Ueberschriften in 30px, Schnitt 500, ohne Sperrung --
   gross und leicht statt klein und fett. */
h1 { font-family: var(--serif); font-weight: 500; font-size: 1.85rem; letter-spacing: 0; margin: 0 0 1rem; }
h2 { font-family: var(--serif); font-weight: 500; font-size: 1.3rem; margin: 2rem 0 0.75rem; }
h3 { font-family: var(--serif); font-weight: 500; font-size: 1.08rem; margin: 0 0 0.75rem; }

/* Quicksand laeuft leicht -- halbfette Stellen brauchen mehr Gewicht, um
   sich vom Fliesstext abzusetzen. */
strong, b { font-weight: 700; }

.karte {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

/* Der Kundenkommentar: die einzige Stelle im Adminbereich, an der ein Kunde
   in eigenen Worten spricht -- deshalb abgesetzt und im Umbruch so, wie er
   ihn getippt hat. */
.karte.kommentar { border-left: 4px solid var(--sand); }
.kommentartext { white-space: pre-wrap; margin: 0; }

label { display: block; margin-bottom: 0.9rem; font-size: 0.9rem; color: var(--muted); }
label.schalter { display: flex; align-items: center; gap: 0.5rem; }

input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="file"] {
  display: block;
  width: 100%;
  margin-top: 0.3rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--linie-stark);
  border-radius: var(--r);
  background: var(--karte);
  color: var(--ink);
  font: inherit;
}

label.schalter input { width: auto; margin: 0; }

.meldung, .fehler {
  border-radius: var(--r);
  padding: 0.8rem 1rem;
  margin: 0 0 1.25rem;
}
.meldung { background: rgba(60, 130, 80, 0.14); }
.fehler { background: rgba(170, 60, 40, 0.16); }

.suche { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; }
.suche label { flex: 1 1 240px; margin: 0; }
.suche input { text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }

.anmeldung { text-align: left; }
.anmeldung h1 { text-align: center; }
.anmeldung .knopf { width: 100%; }

/* Die Suchkarte steht als eigene Seite mittig -- wie das Portal, nur mit
   einem Feld darin. */
.suchkarte {
  max-width: 460px;
  margin: 0 auto;
  text-align: left;
}

.suchkarte h1 { text-align: center; }
/* Luft zwischen der Erklaerung und dem Feld -- ohne sie kleben Text und
   Beschriftung aneinander und man liest sie als einen Absatz. */
.suchkarte .hinweis + label { margin-top: 1.3rem; }
.suchkarte .knopf { width: 100%; }
.suchkarte .hinweis { font-size: 0.88rem; margin: 0.8rem 0 0; }
.suchkarte a { color: inherit; }

/* Der Code ist zum Abtippen da: gross, gesperrt, ohne Kleinschreibung. */
.codefeld {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  font-size: 1.1rem;
  text-align: center;
}

.zurueck { color: var(--muted); text-decoration: none; }

/* Bestellstatus */

/* Etwas breiter als die Suchkarte (460px): hier stehen mehrere Bloecke
   untereinander, kein einzelnes Feld. */
.bestellblatt {
  max-width: 560px;
  margin: 0 auto;
  text-align: left;
}

/* h2 traegt global 2rem Abstand nach oben -- als erstes Element einer Karte
   reisst das ein Loch zwischen Kartenrand und Ueberschrift. */
.bestellblatt .karte h2:first-child { margin-top: 0; }

.bestellkopf { text-align: center; }
.bestellkopf h1 { margin: 0.2rem 0 0.6rem; }
.bestellkopf-nummer {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.bestellkopf-text { margin: 0; color: var(--muted); }

/* Der Ablauf: eine Spalte aus Punkten, verbunden durch eine durchgehende
   Linie. Vertikal statt waagerecht, weil sechs Stufenbeschriftungen
   nebeneinander auf einem Telefon unlesbar klein wuerden. */
.ablauf {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ablauf li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding-bottom: 1.15rem;
}

.ablauf li:last-child { padding-bottom: 0; }

/* Die Verbindungslinie haengt am Punkt, nicht am Listenpunkt-Rand: so
   trifft sie auch dann die Mitte, wenn eine Beschriftung zweizeilig wird. */
.ablauf li::before {
  content: "";
  position: absolute;
  left: 0.5rem;
  top: 1.15rem;
  bottom: -0.1rem;
  width: 2px;
  background: var(--linie);
  transform: translateX(-50%);
}

.ablauf li:last-child::before { display: none; }

.ablauf-punkt {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin-top: 0.15rem;
  border-radius: 999px;
  background: var(--ground);
  box-shadow: inset 0 0 0 2px var(--linie);
  position: relative;
  z-index: 1;
}

.ablauf-name { font-size: 0.95rem; color: var(--muted); }
.ablauf-name em { font-style: normal; color: var(--muted); font-size: 0.85rem; }

.ablauf-erledigt .ablauf-punkt {
  background: var(--ink);
  box-shadow: inset 0 0 0 2px var(--ink);
}
.ablauf-erledigt .ablauf-name { color: var(--ink); }
.ablauf-erledigt::before { background: var(--ink); }

/* Die aktuelle Stufe traegt als einzige einen Ring -- Farbe allein wuerde
   sie von den erledigten kaum unterscheiden, erst recht nicht bei einer
   Rot-Gruen-Schwaeche. */
.ablauf-aktuell .ablauf-punkt {
  background: var(--ink);
  box-shadow: inset 0 0 0 2px var(--ink), 0 0 0 4px var(--sand);
}
.ablauf-aktuell .ablauf-name { color: var(--ink); font-weight: 700; }

/* Storniert: der Ablauf ist abgebrochen, keine Stufe ist "aktuell". */
.ablauf-abgebrochen .ablauf-name { opacity: 0.55; }

.datenpaare {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.4rem 1.2rem;
  font-size: 0.95rem;
}
.datenpaare dt { color: var(--muted); }
.datenpaare dd { margin: 0; }
.datenpaare dd.nummer { font-variant-numeric: tabular-nums; word-break: break-all; }

.bestellblatt-fuss { text-align: center; margin: 0 0 1.5rem; }

.bestellstatus-artikel {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.bestellstatus-artikel li {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--linie);
}

.bestellstatus-artikel li:last-child { border-bottom: none; padding-bottom: 0; }

.bestellstatus-artikel span { color: var(--muted); font-size: 0.9rem; }

/* Entwuerfe */

.entwurfsliste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}

.entwurfskarte {
  display: block;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  padding: 0.9rem;
  text-decoration: none;
  color: inherit;
}

.entwurfskarte img { width: 100%; height: auto; display: block; }
.entwurfskarte .ohne-bild {
  display: grid; place-items: center; height: 60px;
  color: var(--muted); font-size: 0.85rem; background: var(--ground);
}
.entwurfskarte .code { display: block; margin-top: 0.6rem; font-weight: 700; letter-spacing: 0.06em; }
.entwurfskarte .zeile { display: block; }
.entwurfskarte .meta { display: block; color: var(--muted); font-size: 0.85rem; }

.grossbild { margin: 0 0 1.5rem; }
.grossbild img {
  width: 100%; height: auto; display: block;
}
.grossbild figcaption { margin-top: 0.9rem; }

.daten { display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem 1.5rem; }
.daten dt { color: var(--muted); }
.daten dd { margin: 0; }

/* Motive */

.motivliste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}

.motivkarte {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  padding: 1rem;
}

.motivkarte.aus { opacity: 0.55; }

.motivbild {
  display: grid;
  place-items: center;
  height: 110px;
  margin-bottom: 0.8rem;
  color: var(--ink);
}
.motivbild svg { max-width: 100%; max-height: 110px; }
/* Dieselbe Flaeche zeigt auch hochgeladene Fotos (Produktbilder) -- ganz
   sichtbar, nicht beschnitten: hier soll Thomas pruefen, was er hochgeladen
   hat, den Ausschnitt zeigt die Kundenseite. */
.motivbild img { max-width: 100%; max-height: 110px; object-fit: contain; }
.motivbild.gross { height: 220px; }
.motivbild.gross svg { max-height: 220px; }

.schluessel { color: var(--muted); font-size: 0.8rem; margin: 0 0 0.7rem; }
.knopfreihe { display: flex; gap: 0.6rem; flex-wrap: wrap; }

.lineal-probe { margin: 1rem 0 1.5rem; color: var(--ink); }
.lineal-probe svg { width: min(100%, 420px); height: auto; }

/* ------------------------------------------------------------- Hilfe */

/* Die Anleitung (templates/hilfe.html) ist die einzige lange Leseseite des
   Kundenbereichs -- und sie war als Fliesstext auch die einzige, vor der
   jemand kapituliert haette. Sie ist deshalb ein Akkordeon: offen steht nur
   der Ablauf, alles andere ist ein Thema zum Antippen. Sichtbar bleiben soll
   die GLIEDERUNG, nicht der Inhalt -- wer eine Seite ueberfliegt, soll in
   sechs Zeilen sehen, was es hier zu wissen gibt.

   body.portal zentriert seinen Inhalt senkrecht -- richtig fuer eine Karte
   mit einem Feld darin, falsch fuer eine Seite, die man scrollt. Deshalb eine
   eigene Koerperklasse. */
body.hilfe {
  display: block;
  padding: 6vw 5vw 2rem;
}

body.hilfe.mit-nav { padding-top: calc(6vw + 3.2rem); }

/* Etwas breiter als das Bestellblatt (560px), aber schmal genug, dass eine
   Zeile am Rechner nicht ueber 80 Zeichen laeuft. */
.hilfeblatt {
  max-width: 680px;
  margin: 0 auto;
  text-align: left;
}

.hilfeblatt p { margin: 0 0 0.9rem; }
.hilfeblatt p:last-child { margin-bottom: 0; }
.hilfeblatt .hinweis { font-size: 0.92rem; }
/* Links im Fliesstext tragen die Textfarbe -- die Knoepfe nicht: .knopf
   bringt seine eigene mit, und ohne das :not() waere die Schrift auf dem
   schwarzen Knopf ebenfalls schwarz (zwei Klassen schlagen eine). */
.hilfeblatt a:not(.knopf) { color: inherit; }

/* Der Kopf steht mittig, der Inhalt darunter linksbuendig -- dasselbe Muster
   wie .bestellkopf auf dem Bestellblatt und die zentrierte h1 der Suchkarte.
   Zentriert wird nur, was kurz ist: eine Ueberschrift traegt die Mitte, ein
   Absatz aus fuenf Zeilen bekommt darin zwei ausgefranste Raender und liest
   sich schlechter. */
.hilfe-kopf {
  margin-bottom: 1.5rem;
  text-align: center;
}

.hilfe-oben {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hilfe-kopf h1 { margin: 0.35rem 0 0.7rem; }

/* Schmaler als die Spalte: zentrierter Text braucht kurze Zeilen, sonst
   wandern die Zeilenenden weit auseinander. */
.hilfe-kopf .hinweis {
  max-width: 30rem;
  margin: 0 auto;
  font-size: 1.02rem;
}

/* --- Sprungmarken --- */

/* Waagerecht, scrollbar, Pillen gross genug fuer einen Daumen. Sticky unter
   der Modulnavigation: aus einem aufgeklappten Thema heraus soll man ins
   naechste springen koennen, ohne vorher hochzuscrollen. */
.sprungmarken {
  position: sticky;
  top: 3.1rem;
  z-index: 5;
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  margin: 0 -5vw 1.5rem;
  padding: 0.55rem 5vw;
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--ground);
}

.sprungmarken::-webkit-scrollbar { display: none; }

/* Sobald die Marken nicht mehr nebeneinander passen, muss die Reihe von
   links anfangen: mit justify-content:center schoebe der Ueberhang die
   ersten Marken aus dem Sichtfeld, und zurueckscrollen laesst sich dorthin
   nicht. Dieselbe Stelle und dieselbe Grenze wie bei .modulnav. */
@media (max-width: 720px) {
  .sprungmarken { justify-content: flex-start; }
}

.sprungmarken a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 2.3rem;
  padding: 0 0.9rem;
  border: 1px solid var(--linie-stark);
  border-radius: var(--pille);
  background: var(--karte);
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.15s ease;
}

.sprungmarken a:hover, .sprungmarken a:focus-visible { border-color: var(--ink); }

/* Die Marke des offenen Themas -- gefuellt statt nur umrandet, damit sie sich
   auch dann abhebt, wenn Farben ausfallen (der Kontrast dreht sich um). */
.sprungmarken a.an {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--karte);
}

/* Ohne diesen Abstand verschwindet das angesprungene Thema unter der
   fixierten Modulnavigation und der klebenden Markenleiste. */
.hilfeblatt #ablauf, .hilfeblatt .thema { scroll-margin-top: 7rem; }

/* --- Der Ablauf: die einzige offene Karte --- */

.ablaufkarte { padding: 1.5rem 1.4rem; }
.ablaufkarte h2:first-child { margin-top: 0; }

/* Die drei Schritte: die einzige Stelle mit grossen Ziffern -- sie sind der
   Grund, warum jemand hier ist. */
.schritte {
  list-style: none;
  margin: 0 0 1.1rem;
  padding: 0;
  display: grid;
  gap: 0.95rem;
}

.schritte li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.schritt-nr {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 999px;
  background: var(--sand);
  color: #000;
  font-weight: 700;
  font-size: 0.95rem;
}

.schritt-text { display: block; }

/* --- Die Themen --- */

.themen-hinweis {
  margin: 1.6rem 0 0.7rem;
  color: var(--muted);
  font-size: 0.92rem;
}

/* Eine zusammenhaengende Liste statt einzeln schwebender Karten: geschlossen
   soll das Ganze wie ein Inhaltsverzeichnis aussehen, nicht wie sechs
   Kacheln. Deshalb teilen sich die Themen ihre Trennlinien. */
.themen {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  overflow: hidden;
}

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

.thema > summary {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 1rem 3rem 1rem 1.4rem;
  cursor: pointer;
  position: relative;
  list-style: none;
}

.thema > summary::-webkit-details-marker { display: none; }
.thema > summary:hover { background: var(--ground); }

.thema-titel {
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 500;
}

.thema-unter { color: var(--muted); font-size: 0.88rem; }

/* Ein Winkel, der sich beim Aufklappen dreht. Als CSS-Rahmen gezeichnet und
   nicht als Zeichen: das Dreieck der Browser sieht auf jedem anders aus. */
.thema > summary::after {
  content: "";
  position: absolute;
  right: 1.5rem;
  top: 1.5rem;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: translateY(-50%) rotate(45deg);
  transition: transform 0.15s ease;
}

.thema[open] > summary::after {
  transform: translateY(-20%) rotate(-135deg);
  border-color: var(--ink);
}

.thema[open] > summary { background: var(--ground); }

.thema-inhalt { padding: 1.1rem 1.4rem 1.4rem; }

/* --- Die zweite Ebene: Bloecke und Fragen --- */

/* Die Ziffer traegt nur, was im Konfigurator wirklich so nummeriert ist
   ("3 · Gravur") -- daran erkennt man beim Lesen den Block auf dem
   Bildschirm wieder. Alles andere (Fragen, Nebenthemen) bleibt ohne Marke;
   ein erfundenes Sinnbild an derselben Stelle sagt nichts und behauptet
   trotzdem, dazuzugehoeren. */
.unter { border-top: 1px solid var(--linie); }
.thema-inhalt > .unter:first-of-type { margin-top: 0.4rem; }

.unter > summary {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem 1.8rem 0.8rem 0;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.97rem;
  position: relative;
  list-style: none;
}

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

.unter > summary .nr {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  min-width: 1.6rem;
  height: 1.6rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: var(--ground);
  box-shadow: inset 0 0 0 1px var(--linie-stark);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.unter[open] > summary .nr {
  background: var(--sand);
  box-shadow: none;
  color: #000;
}

/* Das Pluszeichen wird beim Aufklappen zum Minus -- auf der zweiten Ebene
   anders als der Winkel oben, damit man die Ebenen auseinanderhaelt. */
.unter > summary::after {
  content: "+";
  position: absolute;
  right: 0.2rem;
  color: var(--muted);
  font-size: 1.25rem;
  line-height: 1;
}

.unter[open] > summary::after { content: "\2212"; }

.unter-inhalt {
  padding: 0 0 1rem;
  color: var(--ink-2);
  font-size: 0.95rem;
}

.auswahl { margin: 0 0 0.9rem; padding-left: 1.2rem; }
.auswahl li { margin-bottom: 0.4rem; }
.auswahl li:last-child { margin-bottom: 0; }

/* --- Kleinteile --- */

/* Der Code zum Wiedererkennen: dieselbe Optik wie im Konfigurator und im
   Suchfeld -- gesperrt, halbfett, Grossbuchstaben. */
.codebeispiel, .codeprobe {
  font-weight: 700;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

.codeprobe {
  margin: 0 0 0.9rem;
  padding: 0.7rem 1rem;
  background: var(--ground);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  text-align: center;
  font-size: 1.2rem;
}

/* Text 1 · Motiv · Text 2 -- die Gravurzeile des Eierbechers nachgestellt,
   damit man sie im Konfigurator sofort wiedererkennt. */
.gravurbeispiel {
  display: flex;
  gap: 0.4rem;
  margin: 0 0 0.9rem;
}

.gravurbeispiel span {
  flex: 1 1 0;
  padding: 0.55rem 0.4rem;
  border: 1px dashed var(--linie-stark);
  border-radius: var(--r);
  text-align: center;
  font-size: 0.86rem;
  color: var(--muted);
}

.gravurbeispiel .gb-motiv {
  flex: 0 0 auto;
  background: var(--sand);
  border-style: solid;
  border-color: var(--sand);
  color: #000;
}

.knopfzeile {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin: 1.3rem 0 0;
}

/* Am Telefon nebeneinander zu schmal -- da soll jeder Knopf die ganze Breite
   und damit eine bequeme Zielflaeche bekommen. */
@media (max-width: 480px) {
  .knopfzeile { flex-direction: column; }
  .knopfzeile .knopf { text-align: center; }
}

.abschluss { justify-content: center; margin: 1.6rem 0 1rem; }

/* Der Hinweis auf die Anleitung unter den Portalkacheln -- fuer alle, die von
   Etsy kommen und diese Seite zum ersten Mal sehen. */
.portal-hilfe {
  margin: 1.6rem 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.portal-hilfe a { color: var(--ink); font-weight: 600; }