/* =======================================================================
   ANGELIC WARRIOR QUEEN, das Stylesheet.
   Setzt die Komponenten aus Abschnitt 8.2 des Identity-Guides um.

   Reihenfolge: Grundlage, Typografie, Raster, Komponenten, Sektionen,
   Navigation, Fuss, Bewegung.
   ======================================================================= */

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

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

body {
  margin: 0;
  background: var(--awq-paper);
  color: var(--awq-ink);
  font-family: var(--awq-body);
  /* Nie unter 16px. Ihr Publikum liest auf dem Telefon, ein
     nennenswerter Teil ist ueber vierzig und liest draussen. */
  font-size: 17.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* -- Typografie ---------------------------------------------------------
   Satzform, keine Versalien: Grossbuchstaben lesen sich als Rufen und
   zerstoeren genau das Register der ruhigen Ueberzeugung, das bei ihr
   ohnehin schon funktioniert. Die einzige erlaubte Ausnahme ist das
   Augenbrauen-Label. */
h1, h2, h3, h4 {
  font-family: var(--awq-display);
  font-weight: 600;
  color: var(--awq-nightfall);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 var(--s3);
  font-variation-settings: 'SOFT' 30, 'WONK' 0;
}
h1 { font-size: clamp(38px, 6vw, 60px); line-height: 1.08; }
h2 { font-size: clamp(29px, 4vw, 40px); }
h3 { font-size: clamp(21px, 2.4vw, 26px); font-weight: 500; }
h4 { font-size: 19px; font-weight: 500; }

p { margin: 0 0 var(--s3); max-width: var(--awq-text); }
.lead { font-size: clamp(19px, 2.2vw, 22px); line-height: 1.6; color: var(--awq-ink); }

a { color: var(--awq-slate); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--awq-nightfall); }

strong, b { font-weight: 600; color: var(--awq-nightfall); }

/* Das Augenbrauen-Label. Die einzige Stelle mit Versalien. */
.eyebrow {
  font-size: 13px; font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--awq-slate);
  margin: 0 0 var(--s2);
}
.on-dark .eyebrow { color: var(--awq-moonstone); }

/* Poesie und Zitate stehen sichtbar abseits vom Fliesstext. Fraunces
   kursiv in grosszuegiger Groesse, nie eine gekaufte Schreibschrift. */
blockquote {
  margin: var(--s4) 0; padding: 0 0 0 var(--s3);
  border-left: 2px solid var(--awq-gold);
  font-family: var(--awq-display); font-style: italic;
  font-size: clamp(21px, 2.6vw, 27px); line-height: 1.4;
  color: var(--awq-nightfall); max-width: 32ch;
}
blockquote cite {
  display: block; margin-top: var(--s2);
  font-family: var(--awq-body); font-style: normal; font-size: 15px;
  color: var(--awq-slate); letter-spacing: 0.02em;
}

/* -- Raster ------------------------------------------------------------- */
.wrap  { width: 100%; max-width: var(--awq-wide); margin: 0 auto; padding: 0 var(--s3); }
.text  { max-width: var(--awq-text); }
.mitte { margin-left: auto; margin-right: auto; }
section { padding: calc(var(--awq-rhythmus) / 2) 0; }

/* Sektionsrhythmus: Paper und Dawn Mist wechseln sich ab. Hoechstens EINE
   Nightfall-Sektion je Seite, und zwar dort, wo das emotionale Gewicht
   liegt. Zwei dunkle Sektionen auf einer Seite heben sich gegenseitig auf. */
.on-paper { background: var(--awq-paper); }
.on-mist  { background: var(--awq-mist); }
.on-dark  { background: var(--awq-nightfall); color: var(--awq-moonstone); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: #F2F4F6; }
.on-dark strong { color: #F2F4F6; }
.on-dark a { color: #C9D6E0; }
.on-dark .lead { color: #DCE5E9; }

/* -- Trenner ------------------------------------------------------------
   Die Haarlinie ist der Normalfall. Die perforierte Linie kommt dort, wo
   ein Abschnitt sich anfuehlen soll, als koenne man ihn abreissen: das
   ist die Eintrittskarte, als Trennung gelesen. */
.rule { border: 0; border-top: 1px solid var(--awq-moonstone); margin: var(--s4) 0; }
.perf {
  border: 0; height: 2px; margin: var(--s5) 0;
  background-image: radial-gradient(circle, var(--awq-moonstone) 1px, transparent 1.2px);
  background-size: 10px 2px; background-repeat: repeat-x;
}
.on-dark .perf { background-image: radial-gradient(circle, #5A6B78 1px, transparent 1.2px); }

/* -- Knoepfe ------------------------------------------------------------
   Der Hauptknopf ist die Eintrittskarte: Goldflaeche, dunkle Schrift,
   4px Ecken. Einer je Bildschirmabschnitt. Er soll das koerperlichste
   Objekt der Seite sein, etwas, das man abreissen koennte. */
.ticket {
  display: inline-block; background: var(--awq-gold); color: var(--awq-nightfall);
  font-family: var(--awq-body); font-size: 16px; font-weight: 600;
  letter-spacing: 0.01em; text-decoration: none;
  padding: 15px var(--s4); border-radius: var(--awq-radius);
  border: 0; cursor: pointer; position: relative;
  transition: background 140ms ease, transform 140ms ease;
}
.ticket:hover { background: #D7A32C; color: var(--awq-nightfall); transform: translateY(-1px); }
.ticket:active { transform: translateY(0); }
.ticket:focus-visible { outline: 3px solid var(--awq-slate); outline-offset: 3px; }

/* Die perforierte Kante links, wie an einem abgerissenen Ticket. Rein
   dekorativ und deshalb aria-hidden im Markup nicht noetig: es ist ein
   Pseudo-Element und steht nicht im Baum. */
.ticket--stub { padding-left: calc(var(--s4) + 14px); }
.ticket--stub::before {
  content: ''; position: absolute; left: 14px; top: 8px; bottom: 8px; width: 2px;
  background-image: radial-gradient(circle, rgba(22,36,47,0.45) 1px, transparent 1.2px);
  background-size: 2px 7px;
}

.zweit {
  display: inline-block; background: transparent; color: var(--awq-slate);
  border: 1px solid var(--awq-slate); border-radius: var(--awq-radius);
  padding: 14px var(--s3); font-size: 16px; font-weight: 500; text-decoration: none;
  transition: background 140ms ease, color 140ms ease;
}
.zweit:hover { background: var(--awq-slate); color: var(--awq-paper); }
.on-dark .zweit { color: var(--awq-moonstone); border-color: var(--awq-moonstone); }
.on-dark .zweit:hover { background: var(--awq-moonstone); color: var(--awq-nightfall); }

.knopfzeile { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin-top: var(--s4); }
.knopf-notiz { font-size: 15px; color: var(--awq-slate); }
.on-dark .knopf-notiz { color: var(--awq-moonstone); }

/* -- Karten -------------------------------------------------------------
   Kein Schatten. Schatten gehoeren zu einer Oberflaeche mit Tiefe; diese
   Palette ist flaches Licht und gedrucktes Papier. */
.karten { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.karte {
  background: var(--awq-paper); border: 1px solid var(--awq-moonstone);
  border-radius: var(--awq-radius); padding: var(--s4) var(--s3) var(--s3);
  display: flex; flex-direction: column;
}
.on-paper .karte { background: #FBF8F2; }
.karte h3 { margin-bottom: var(--s1); }
.karte p { font-size: 16.5px; }
.karte .preis {
  font-family: var(--awq-display); font-size: 27px; color: var(--awq-nightfall);
  margin: 0 0 var(--s2);
}
.karte .preis small { font-family: var(--awq-body); font-size: 15px; color: var(--awq-slate); font-weight: 400; }
/* Der Fuss EINER KARTE, nicht der Fuss der SEITE. Der Name war vorher
   .fuss und kollidierte mit dem Seitenfuss: die Karte bekam dessen
   Nightfall-Grund und dessen Moonstone-Textfarbe, und die schlug bis in
   den Goldknopf durch, dessen Beschriftung damit unlesbar wurde.
   Zwei Dinge, die verschieden sind, duerfen nicht gleich heissen. */
.karte .karte-fuss { margin-top: auto; padding-top: var(--s3); }

/* Die eine hervorgehobene Karte traegt eine Goldkante, keinen Goldgrund:
   die Flaeche ist dem Knopf vorbehalten. */
.karte--markiert { border-color: var(--awq-gold); border-width: 2px; }

/* -- Der Stern ----------------------------------------------------------
   Bewusst leicht schief. Ein exakter Stern liest sich als Symbolschrift,
   ein schiefer als etwas, das jemand mit der Hand gemacht hat. Bis Jaynes
   eigene Zeichnung vorliegt, steht dieser hier. */
.stern { display: inline-block; width: 22px; height: 22px; vertical-align: -3px; }
.stern path { fill: var(--awq-gold); }

/* -- Listen -------------------------------------------------------------- */
ul.liste { list-style: none; padding: 0; margin: 0 0 var(--s3); max-width: var(--awq-text); }
ul.liste li {
  position: relative; padding-left: var(--s4); margin-bottom: var(--s2);
}
ul.liste li::before {
  content: ''; position: absolute; left: 6px; top: 11px;
  width: 7px; height: 7px; background: var(--awq-gold); border-radius: 1px;
  transform: rotate(45deg);
}
.on-dark ul.liste li::before { background: var(--awq-gold); }

/* -- Formulare ----------------------------------------------------------
   Beschriftung ueber dem Feld, nie nur im Feld. Eine reine
   Platzhalterbeschriftung verschwindet beim Tippen, und sie verschwindet
   genau fuer die Leserin, die ohnehin zoegert. */
.feld { margin-bottom: var(--s3); max-width: 460px; }
.feld label { display: block; font-size: 15px; font-weight: 500; color: var(--awq-nightfall); margin-bottom: 6px; }
.feld input {
  width: 100%; padding: 14px var(--s2); font: inherit; font-size: 17px;
  background: var(--awq-paper); color: var(--awq-ink);
  border: 1px solid var(--awq-moonstone); border-radius: var(--awq-radius);
}
.on-dark .feld label { color: #F2F4F6; }
.on-dark .feld input { background: #1E2E3A; border-color: #40586B; color: #F2F4F6; }
.feld input:focus { outline: 0; border-color: var(--awq-slate); box-shadow: 0 0 0 3px rgba(62,92,114,0.25); }
.feld-hinweis { font-size: 14.5px; color: var(--awq-slate); margin-top: var(--s2); }
.on-dark .feld-hinweis { color: var(--awq-moonstone); }
.meldung { font-size: 15.5px; min-height: 24px; margin-top: var(--s2); }
.meldung.fehler { color: #A3341F; }
.on-dark .meldung.fehler { color: #E8A08B; }

/* -- Hero, Vision-Register ----------------------------------------------
   Der Standardfall, und der einzige, der auf die Startseite darf.

   Papier dominiert, das Bild traegt Licht statt Dunkelheit, und Nightfall
   erscheint als SCHRIFT, nicht als Flaeche. Der Schleier ist deshalb hell
   und nicht dunkel: er hebt die Lesbarkeit an, ohne die Seite zuzumachen.

   Die erste Fassung dieser Seite hatte einen dunklen Hero und zwei
   weitere dunkle Sektionen. Das Ergebnis war duester, und duester ist
   bei einer Marke, deren ganzes Versprechen "es ist noch nicht zu spaet"
   lautet, kein Stilfehler, sondern ein inhaltlicher. */
.hero {
  position: relative; display: flex; align-items: flex-end;
  /* Gedeckelt statt reiner Viewport-Hoehe: auf einem sehr hohen Fenster
     entstuende sonst ein leeres Feld ueber der Ueberschrift, weil der Text
     unten sitzt. 760px ist die Grenze, ab der das auffaellt. */
  min-height: clamp(500px, 76vh, 760px); overflow: hidden;
  padding: calc(var(--awq-nav) + var(--s6)) 0 var(--s6);
  background: var(--awq-paper);
}
.hero-bild { position: absolute; inset: 0; z-index: 0; }
.hero-bild img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
/* Hell statt dunkel. Links dichter, damit die Schrift steht, nach rechts
   auslaufend, damit das Bild sichtbar bleibt.

   Die Werte sind gemessen, nicht geschaetzt. Als das Hero-Bild von einem
   diesigen Wintermorgen auf gruenes Laub wechselte, fiel die Ueberschrift
   von 11,0:1 auf 4,3:1, weil unten links jetzt eine dunkle Hecke steht
   statt heller Nebel. Ein Schleier, der zum alten Bild passte, passt zum
   neuen nicht: seine Deckung muss zum dunkelsten Punkt UNTER dem Text
   passen, nicht zum Durchschnitt des Bildes.

   Der erste Versuch ueberkorrigierte: der Text stand mit 10:1, aber das
   Gruen war weggewaschen, und genau darum ging es ja. Diese Werte sind
   der leichteste Schleier, der an jeder gemessenen Breite ueber 5,5:1
   bleibt. Wer sie weiter absenkt, faellt bei 821 Pixeln zuerst durch.
   Nachrechnen: werkzeug/hero-kontrast.js. */
.hero-schleier {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(100deg, rgba(245,241,232,0.97) 0%, rgba(245,241,232,0.93) 40%,
                    rgba(245,241,232,0.55) 66%, rgba(245,241,232,0.20) 100%),
    linear-gradient(to bottom, rgba(245,241,232,0) 45%, rgba(245,241,232,0.75) 100%);
}
.hero .wrap { position: relative; z-index: 2; }
.hero h1 { color: var(--awq-nightfall); max-width: 16ch; }
.hero .lead { color: var(--awq-ink); max-width: 44ch; }
/* Gold traegt hier gar keine Schrift, und zwar aus zwei Gruenden.
   Erstens steht im selben Hero der goldene Ticket-Knopf, und die eigene
   Regel sagt: konkurrieren zwei Goldelemente auf einem Bildschirm, ist
   eines davon falsch. Zweitens misst Gold-tief ueber diesem Foto je nach
   Fensterbreite 4,3 bis 4,6:1, also genau auf der Grenze; der Schleier
   wird nie ganz deckend, das ist ja sein Zweck. Slate misst 5,6:1 im
   schlechtesten Fall und bleibt leise genug fuer ein Label.
   Nightfall waere hier falsch: es laege bei 12:1 und machte die
   Augenbraue so laut wie die Ueberschrift. */
.hero .eyebrow { color: var(--awq-slate); }

@media (max-width: 820px) {
  .hero { min-height: 0; padding-top: calc(var(--awq-nav) + var(--s5)); }
  /* Auf dem Telefon liegt der Text ueber der ganzen Breite, es gibt also
     keine helle Seite, auf die man ihn stellen kann. Deshalb deckt der
     Schleier hier durchgehend. 0.86 in der Mitte liess den Lead auf
     2,4:1 fallen. */
  .hero-schleier {
    background:
      linear-gradient(to bottom, rgba(245,241,232,0.94) 0%, rgba(245,241,232,0.90) 45%,
                      rgba(245,241,232,0.95) 100%);
  }
}

/* -- Hero, Pain-Register -------------------------------------------------
   NUR auf Landingpages, und dort genau einmal: ein Nightfall-Block, der
   die Seite oeffnet und den Block beim Namen nennt. Danach loest die
   Seite sich nach oben in Papier auf, und das erste Gold erscheint genau
   dort, wo die Copy vom Problem zur Antwort dreht.
   Auf der Startseite hat dieser Block nichts verloren. */
.hero--pein {
  background: var(--awq-nightfall); min-height: 0;
  padding: calc(var(--awq-nav) + var(--s5)) 0 var(--s5);
  display: block;
}
.hero--pein h1 { color: #F2F4F6; max-width: 18ch; }
.hero--pein .lead { color: var(--awq-moonstone); }
.hero--pein .eyebrow { color: var(--awq-moonstone); }

/* -- Bildsektion --------------------------------------------------------- */
.figur { margin: 0; }
.figur img { border-radius: var(--awq-radius); width: 100%; }
.figur figcaption { font-size: 14.5px; color: var(--awq-slate); margin-top: var(--s2); }
/* Text und Portraet nebeneinander. Nur fuer die Vorstellung auf /about:
   ein Hochformat ueber die volle Textbreite waere ueber 1000 Pixel hoch
   und wuerde die Seite uebernehmen, statt sie zu eroeffnen. Unter 820px
   kommt das Bild UNTER den Text, damit auf dem Telefon der Satz zuerst
   gelesen wird und nicht das Gesicht zuerst gesehen. */
.vorstellung {
  display: grid;
  grid-template-columns: 1fr 0.72fr;
  gap: var(--s5);
  align-items: start;
  max-width: none;
}
/* Schmalere Variante fuer kurze Einleitungen. Auf /contact ist der Lead
   vier Zeilen lang; ein Hochformat in voller Spaltenbreite ueberragt ihn
   um mehr als 200 Pixel, und das liest sich als Fehler, nicht als Luft. */
.vorstellung--klein { grid-template-columns: 1fr 0.46fr; }

@media (max-width: 820px) {
  .vorstellung { grid-template-columns: 1fr; gap: var(--s4); }
  .vorstellung--klein { grid-template-columns: 1fr; }
  .vorstellung .figur { max-width: 420px; }
}

.zwei-spalten {
  display: grid; gap: var(--s5); align-items: center;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 820px) { .zwei-spalten { grid-template-columns: 1fr; gap: var(--s4); } }
.zwei-spalten p:last-child { margin-bottom: 0; }

/* -- Navigation ----------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 50; height: var(--awq-nav);
  display: flex; align-items: center;
  background: rgba(245,241,232,0.94); backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--awq-moonstone);
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.wortmarke {
  font-family: var(--awq-display); font-weight: 600; font-size: 17px;
  color: var(--awq-nightfall); text-decoration: none; letter-spacing: 0.01em;
  line-height: 1.1; white-space: nowrap;
}
.wortmarke span { display: block; font-family: var(--awq-body); font-size: 10.5px;
  font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--awq-slate); }
.nav-links { display: flex; align-items: center; gap: var(--s3); }
.nav-links a { font-size: 15.5px; color: var(--awq-ink); text-decoration: none; }
.nav-links a:hover { color: var(--awq-slate); text-decoration: underline; }
.nav-links .ticket { font-size: 14.5px; padding: 10px var(--s3); }
.nav-schalter { display: none; background: 0; border: 0; padding: var(--s1); cursor: pointer; }
.nav-schalter svg { width: 26px; height: 26px; stroke: var(--awq-nightfall); }

@media (max-width: 860px) {
  .nav-schalter { display: block; }
  .nav-links {
    position: absolute; top: var(--awq-nav); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--awq-paper); border-bottom: 1px solid var(--awq-moonstone);
    padding: var(--s2) var(--s3) var(--s4);
  }
  .nav-links[hidden] { display: none; }
  .nav-links a { padding: 14px 0; border-bottom: 1px solid var(--awq-mist); }
  .nav-links .ticket { margin-top: var(--s3); text-align: center; border-bottom: 0; }
}

/* -- Fuss ------------------------------------------------------------------ */
.fuss { background: var(--awq-nightfall); color: var(--awq-moonstone); padding: var(--s6) 0 var(--s4); }
.fuss h2, .fuss h3 { color: #F2F4F6; }
.fuss a { color: var(--awq-moonstone); }
.fuss a:hover { color: #F2F4F6; }
.fuss-raster { display: grid; gap: var(--s4); grid-template-columns: 1.4fr 1fr 1fr; }
@media (max-width: 760px) { .fuss-raster { grid-template-columns: 1fr; } }
.fuss-liste { list-style: none; padding: 0; margin: 0; }
.fuss-liste li { margin-bottom: var(--s1); }
.fuss-liste a { text-decoration: none; font-size: 15.5px; }
.fuss-liste a:hover { text-decoration: underline; }
.fuss-klein { font-size: 14px; color: #7E8E9C; margin: 0; }
.fuss-unten { margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid #2C3E4C;
  display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: space-between; }

/* -- Bewegung ---------------------------------------------------------------
   Eine einzige Geste: leicht von unten einblenden, wenn die Sektion in
   den Blick kommt. Mehr Bewegung wuerde der ruhigen Haltung der Marke
   widersprechen. */
.auf { opacity: 0; transform: translateY(14px); transition: opacity 620ms ease, transform 620ms ease; }
.auf.da { opacity: 1; transform: none; }

/* -- Noch zu liefern -------------------------------------------------------
   Angaben, die nur Jayne beisteuern kann: Rechtstraeger, Anschrift,
   Registernummern. Sichtbar markiert statt still gelassen, damit im Review
   sofort auffaellt, was noch fehlt, und damit niemand die Seite
   veroeffentlicht, solange hier noch etwas leuchtet. */
.tbd {
  background: rgba(227,178,60,0.28);
  border-bottom: 1px solid var(--awq-gold-deep);
  padding: 0 4px; border-radius: 2px;
  color: var(--awq-nightfall); font-style: normal;
}
.on-dark .tbd { color: #F2F4F6; background: rgba(227,178,60,0.22); }

/* Rechtsseiten lesen sich als Dokument, nicht als Verkaufsseite. */
.dokument h2 { font-size: clamp(23px,2.6vw,28px); margin-top: var(--s5); }
.dokument h3 { font-size: 19px; margin-top: var(--s4); margin-bottom: var(--s1); }
.dokument p, .dokument li { font-size: 16.5px; }
.dokument .stand { font-size: 14.5px; color: var(--awq-slate); }

/* Vier Karten gehoeren in zwei Reihen zu zwei, nicht in drei plus eine.
   Das automatische Raster ordnet nach Platz und erzeugt dabei die
   angebrochene Reihe, die eine Seite unfertig aussehen laesst. */
.karten--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .karten--vier { grid-template-columns: 1fr; } }


/* -- Die Soulmate-Ebene ---------------------------------------------------
   Ein eingezaeuntes Feld, kein Farbthema. Es markiert die Seiten, auf
   denen es um den Menschen geht, den jemand sucht: Shopping List,
   Mitgliedschaft, Zusammenkuenfte. Nightfall darauf misst 8,5:1. */
.rose-feld {
  background: var(--awq-rose); color: var(--awq-nightfall);
  border-radius: var(--awq-radius); padding: var(--s4) var(--s4) calc(var(--s4) - 8px);
}
.rose-feld h2, .rose-feld h3 { color: var(--awq-nightfall); }
.rose-feld p { color: #241A1C; }
/* Nightfall, nicht Rose Deep: Rose Deep auf Dusk Rose misst 3,46:1 und
   ist fuer ein 13px-Label zu schwach. Nightfall darauf misst 8,5:1 und
   steht so auch in der Tabelle des Guides. */
.rose-feld .eyebrow { color: var(--awq-nightfall); }
.rose-feld ul.liste li::before { background: var(--awq-nightfall); }
.rose-feld a { color: var(--awq-rose-deep); }

/* -- Die Synchronizitaets-Marke -------------------------------------------
   11:11 ist der einzige spirituelle Marker, den diese Seite fuehrt. Er ist
   typografisch statt illustrativ, damit er in die Papierwelt passt, er
   kostet nichts in der Herstellung, und er ist fuer dieses Publikum sofort
   lesbar und fuer alle anderen unsichtbar. Genau das macht ihn brauchbar:
   ein Zeichen, das nur die erkennen, die es angeht.
   Verwendet als Abschnittsmarke, nie als Schmuck an mehreren Stellen. */
.marke-1111 {
  font-family: var(--awq-display); font-size: 15px; letter-spacing: 0.06em;
  /* Ein Ton dunkler als --awq-gold-deep. Auf Papier reicht Gold Deep mit
     4,86:1, auf Dawn Mist kommt es nur auf 4,28:1 und faellt damit unter
     die Grenze fuer kleine Schrift. Ein Wert, der auf BEIDEN Gruenden
     traegt, ist einfacher als zwei Werte, die man auseinanderhalten muss. */
  color: #7D5810; display: inline-block; margin: 0 0 var(--s2);
}
.on-dark .marke-1111 { color: var(--awq-gold); }

/* Der Abschnittstrenner mit der Marke in der Mitte. */
.trenner-1111 {
  display: flex; align-items: center; gap: var(--s3);
  margin: var(--s5) 0; color: #7D5810;
}
.trenner-1111::before, .trenner-1111::after {
  content: ''; flex: 1; height: 1px; background: var(--awq-moonstone);
}
.trenner-1111 span { font-family: var(--awq-display); font-size: 15px; letter-spacing: 0.06em; }

/* =======================================================================
   QUIZ
   Vision-Register durchgehend. Papier, offen, hell. Keine dunkle Flaeche
   in diesem ganzen Ablauf.

   Gebaut fuer 380px zuerst: die ueberwaeltigende Mehrheit kommt aus einer
   Instagram-Nachricht auf dem Telefon.
   ======================================================================= */

.quiz-buehne { min-height: 62vh; }

/* Die Karte, in der Frage und Formular sitzen. Papier auf Papier,
   getrennt nur durch eine Haarlinie: ein Kasten mit Schatten waere in
   dieser Palette ein Fremdkoerper. */
.quiz-karte {
  max-width: var(--awq-text); margin: 0 auto;
  background: var(--awq-paper);
  border: 1px solid var(--awq-moonstone); border-radius: var(--awq-radius);
  padding: var(--s3) var(--s3) var(--s2);
}
@media (min-width: 640px) { .quiz-karte { padding: var(--s4); } }

/* Fortschritt ohne Prozentzahl. Eine Zahl macht aus einer Frage eine
   Aufgabe, und Aufgaben bricht man ab. */
.fortschritt {
  height: 3px; background: var(--awq-moonstone);
  border-radius: 2px; overflow: hidden; margin-bottom: var(--s2);
}
.fortschritt-fuellung {
  height: 100%; width: 14%; background: var(--awq-slate);
  transition: width 320ms ease;
}
.quiz-zaehler {
  font-size: 13px; font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--awq-slate); margin: 0 0 var(--s3);
}

#quiz-frage {
  font-size: clamp(26px, 5.4vw, 34px); line-height: 1.2;
  margin: 0 0 var(--s3);
}

.quiz-antworten { display: flex; flex-direction: column; gap: 10px; }

/* Volle Breite, grosszuegige Trefferflaeche, mindestens 56px hoch: das
   wird mit dem Daumen bedient, im Stehen, oft einhaendig. */
.quiz-antwort {
  display: block; width: 100%; min-height: 56px;
  text-align: left; font: inherit; font-size: 17px; line-height: 1.45;
  color: var(--awq-ink); background: var(--awq-mist);
  border: 1px solid var(--awq-moonstone); border-radius: var(--awq-radius);
  padding: 15px var(--s2); cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}
.quiz-antwort:hover { border-color: var(--awq-slate); }
.quiz-antwort:focus-visible { outline: 3px solid var(--awq-slate); outline-offset: 2px; }
.quiz-antwort.gewaehlt {
  background: var(--awq-paper); border: 2px solid var(--awq-slate);
  padding: 14px calc(var(--s2) - 1px);
}

.quiz-fuss {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: var(--s3); min-height: 32px;
}
.quiz-zurueck {
  background: 0; border: 0; padding: 6px 0; cursor: pointer;
  font: inherit; font-size: 15px; color: var(--awq-slate);
  text-decoration: underline; text-underline-offset: 3px;
}
.quiz-zurueck[hidden] { display: none; }
.quiz-fuss .marke-1111 { margin: 0; }

/* Zustimmung. Ein Kaestchen, ehrlich beschriftet, nicht vorausgewaehlt. */
.zustimmung {
  display: flex; gap: 12px; align-items: flex-start;
  margin: var(--s3) 0; font-size: 15.5px; line-height: 1.5;
  color: var(--awq-ink); max-width: var(--awq-text); cursor: pointer;
}
.zustimmung input { margin: 3px 0 0; width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--awq-slate); }

/* Ergebnis */
.typ-name {
  font-family: var(--awq-display); font-style: italic;
  font-size: clamp(21px, 3vw, 26px); color: var(--awq-slate);
  margin: 0 0 var(--s1);
}
#typ-ueberschrift { margin-bottom: var(--s3); }
.erste-zeile {
  font-family: var(--awq-display); font-size: clamp(20px, 3vw, 25px);
  line-height: 1.35; color: var(--awq-nightfall); margin: 0;
}

/* =======================================================================
   DIE SHOPPING LIST
   Sie soll wie etwas Gedrucktes wirken, das man behaelt, nicht wie ein
   PDF, das auf Zuruf erzeugt wurde.
   ======================================================================= */
.liste-blatt { max-width: var(--awq-text); margin: 0 auto; }
.liste-abschnitt { margin-top: var(--s5); }
.liste-abschnitt h2 {
  font-size: clamp(20px, 2.6vw, 24px); margin: 0 0 var(--s1);
  padding-bottom: 6px; border-bottom: 1px solid var(--awq-moonstone);
}
.liste-zeilen { list-style: none; margin: 0; padding: 0; counter-reset: zeile; }
.liste-zeile {
  display: flex; gap: 12px; align-items: flex-end;
  /* 14mm Schreibraum. Weniger, und niemand schreibt hinein. */
  min-height: 14mm; padding-bottom: 4px;
  border-bottom: 1px solid var(--awq-moonstone);
  margin-top: var(--s2);
}
.liste-zeile .nummer {
  font-family: var(--awq-display); font-size: 15px; color: var(--awq-slate);
  flex: 0 0 22px; padding-bottom: 3px;
}
.liste-zeile .inhalt { flex: 1; font-size: 17px; color: var(--awq-ink); padding-bottom: 3px; }
/* Die drei vorbelegten Zeilen. Sie sind erkennbar anders, damit sofort
   klar ist, was von einem selbst kommen muss. */
.liste-zeile--gefuellt .inhalt {
  font-family: var(--awq-display); color: var(--awq-nightfall);
}
/* Bei einer vorbelegten Zeile, die umbricht, gehoert die Nummer an die
   erste Textzeile. Leere Zeilen bleiben unten ausgerichtet, damit der
   Stift auf der Linie ansetzt. */
.liste-zeile--gefuellt { align-items: baseline; }
.liste-zeile--gefuellt { border-bottom-color: var(--awq-slate); }

/* Der Platz fuer ihre Handschrift. Bis die Scans vorliegen, steht hier
   ihr Name in Fraunces kursiv. Eintauschen heisst: eine Datei ablegen und
   das Bild statt des Textes einsetzen, ohne dass sich am Layout etwas
   aendert. */
.signatur { margin-top: var(--s5); }
.signatur img { max-height: 64px; width: auto; }
.signatur .ersatz {
  font-family: var(--awq-display); font-style: italic; font-size: 27px;
  color: var(--awq-nightfall);
}
.signatur .zusatz { font-size: 14px; color: var(--awq-slate); margin-top: 6px; }

/* -- Druck ---------------------------------------------------------------
   Muss in Schwarzweiss funktionieren. Nightfall, Ink und Moonstone
   trennen sich im Graustufendruck sauber, und nichts wird allein durch
   Farbe getragen. */
@media print {
  .nav, .fuss, .knopfzeile, .marke-1111, .trenner-1111,
  .drucken-weg { display: none !important; }
  body { background: #fff; font-size: 12pt; }
  section { padding: 0 !important; }
  .wrap { padding: 0; max-width: none; }
  .liste-blatt { max-width: none; }
  .liste-zeile { min-height: 14mm; break-inside: avoid; }
  .liste-abschnitt { break-inside: avoid; margin-top: 10mm; }
  .liste-zeile--gefuellt .inhalt { color: #000; }
  a { text-decoration: none; color: #000; }
  .auf { opacity: 1 !important; transform: none !important; }
}

/* =======================================================================
   JAYNES UEBERSICHT
   Dunkel wie der Mitgliederbereich. Wenig Elemente, viel Ruhe: eine
   Uebersicht, die alles zeigt, wird nicht gelesen.
   ======================================================================= */

/* Warnungen stehen ueber den Zahlen, nicht darunter. Gold als FLAECHE mit
   dunkler Schrift, wie der Knopf: es ist dieselbe Aussage, naemlich
   "hier ist etwas zu tun". */
.warnung {
  background: var(--awq-gold); color: var(--awq-nightfall);
  border-radius: var(--awq-radius); padding: 14px var(--s3);
  margin: 0 0 12px; max-width: none; font-size: 16px; font-weight: 500;
}

.zahlen {
  display: grid; gap: 12px; margin: var(--s4) 0 var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.zahl-kachel {
  border: 1px solid #2C3E4C; border-radius: var(--awq-radius);
  padding: var(--s3) var(--s2);
}
.zahl-wert {
  font-family: var(--awq-display); font-size: clamp(28px, 4vw, 38px);
  line-height: 1.1; color: #F2F4F6; margin: 0 0 6px;
}
.zahl-name {
  font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--awq-moonstone); margin: 0;
}
.zahl-zusatz { font-size: 14px; color: #7E8E9C; margin: 6px 0 0; }

.admin-raster {
  display: grid; gap: var(--s5); margin-top: var(--s5);
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 760px) { .admin-raster { grid-template-columns: 1fr; gap: var(--s4); } }
.admin-raster h2 { font-size: clamp(20px, 2.4vw, 25px); margin-bottom: 4px; }

.balken-reihe {
  display: grid; grid-template-columns: 8.5rem 1fr 3rem;
  gap: 12px; align-items: center; margin-bottom: 10px;
}
@media (max-width: 480px) { .balken-reihe { grid-template-columns: 6.5rem 1fr 2.5rem; gap: 8px; } }
.balken-name { font-size: 15px; color: var(--awq-moonstone); }
.balken-spur { height: 8px; background: #22323F; border-radius: 2px; overflow: hidden; }
.balken-fuellung { display: block; height: 100%; background: var(--awq-slate); }
.balken-wert {
  font-family: var(--awq-display); font-size: 17px; color: #F2F4F6; text-align: right;
}

.fehlerzeile {
  border-top: 1px solid #2C3E4C; padding: 12px 0;
}
.fehler-kopf { font-size: 15px; color: #F2F4F6; margin: 0 0 2px; }
.fehler-text { font-size: 14px; color: var(--awq-moonstone); margin: 0; max-width: none; }
/* Text aus dem Browser, ungeprueft (/api/event ist offen): sichtbar als Rohdaten. */
.fremdtext { font-family: ui-monospace, Menlo, Consolas, monospace; overflow-wrap: anywhere; }

/* -- Karten im Mitgliederbereich -------------------------------------------
   Auf dunklem Grund braucht die Karte einen dunklen Grund. Vorher erbte
   sie das helle Papier, waehrend die Ueberschrift aus `.on-dark h3` fast
   weiss kam: 1,02:1, also unsichtbar. Ein Fehler, den die nachgerechnete
   Palette nicht finden konnte, weil dieses Farbpaar in keiner Tabelle
   vorkam und die Kacheln erst nach der Anmeldung entstehen.

   Guide 8.3 verlangt fuer diesen Bereich ohnehin Nightfall mit
   Moonstone-Text. */
.on-dark .karte {
  background: #1E2E3A; border-color: #2C3E4C; color: var(--awq-moonstone);
}
.on-dark .karte h3 { color: #F2F4F6; }
.on-dark .karte p  { color: var(--awq-moonstone); }

/* Noch nicht freigeschaltet. Gestrichelter Rand statt geringerer
   Deckkraft: eine halbtransparente Karte ist schlechter lesbar, und
   "gesperrt" darf nicht "schwerer zu lesen" heissen. */
.on-dark .karte--zu { border-style: dashed; background: #1A2833; }
.on-dark .karte--zu .schloss,
.on-dark .karte--zu .knopf-notiz { color: var(--awq-moonstone); }

/* Der Weg zur Uebersicht. Nur sichtbar, wenn jemand den Tag traegt. */
.admin-hinweis {
  display: inline-block; margin-top: var(--s2);
  border: 1px solid var(--awq-gold); border-radius: var(--awq-radius);
  padding: 10px var(--s3); color: var(--awq-gold);
  text-decoration: none; font-size: 15px;
}
.admin-hinweis:hover { background: var(--awq-gold); color: var(--awq-nightfall); }