/* ===========================================================
   Hundehoroskop – Gestaltung
   Werte aus dem abgenommenen Mockup „Start A – Warme Karte“.
   Entworfen für 390 px Handybreite, auf dem Desktop mittig
   auf 480 px begrenzt.
   =========================================================== */

:root {
  --nacht: #0c1a26;
  --gold: #f0b85a;
  --gold-dunkel: #c98f2e;
  --creme: #fbf3e4;
  --tinte: #2b1f17;
  --gedaempft: #6b5a4b;
  --feldrand: #e6d7c0;
  --platzhalter: #9a8a78;
  --fehler: #b4472e;

  --spalte: 480px;
  --schrift-kopf: Fredoka, "Trebuchet MS", sans-serif;
  --schrift-text: Nunito, "Trebuchet MS", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--nacht);
}

body {
  font-family: var(--schrift-text);
  color: var(--tinte);
  -webkit-font-smoothing: antialiased;
  /* Verhindert, dass iOS beim Tippen in Felder hineinzoomt */
  -webkit-text-size-adjust: 100%;
}

button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
input { font: inherit; }

/* --- Grundgerüst ---------------------------------------- */

.app {
  position: relative;
  width: 100%;
  max-width: var(--spalte);
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.hintergrund {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--spalte);
  overflow: hidden;
  z-index: 0;
  background: var(--nacht);
}

.hintergrund__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 32%;
}

.hintergrund__sterne {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hintergrund__ton { position: absolute; inset: 0; background: rgba(8, 18, 28, 0.12); }

.hintergrund__verlauf {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 160px;
  background: linear-gradient(to bottom, rgba(12, 26, 38, 0), var(--nacht));
}

.ansicht {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.ansicht[hidden] { display: none; }

.abstand { flex: 1 1 auto; min-height: 20px; }

@keyframes funkeln { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.tw  { animation: funkeln 3.2s ease-in-out infinite; }
.tw2 { animation: funkeln 4.4s ease-in-out infinite .9s; }

@media (prefers-reduced-motion: reduce) {
  .tw, .tw2 { animation: none; }
}

/* --- Kopfzeile ------------------------------------------ */

.kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px 0;
}

.marke {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  min-width: 0;          /* darf auf schmalen Geräten schrumpfen */
  flex: 0 1 auto;
  overflow: hidden;
  /* Keine Polsterung links: Das Logo soll denselben Abstand zum
     Bildschirmrand haben wie die Flagge auf der anderen Seite. Die
     8 px stammten vom gestrichelten Platzhalterrahmen, den es seit
     dem 09.10.2026 nicht mehr gibt. */
  padding: 0 4px 0 0;
  border-radius: 22px;
  /* Bis zum 09.10.2026 stand hier ein gestrichelter Rahmen - der
     Platzhalter aus den Mockups, solange es kein Logo gab. Jetzt gibt es
     eins, und ein Rahmen um ein Logo waere einer zu viel. */
  color: var(--creme);
  font-family: var(--schrift-kopf);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: .3px;
  white-space: nowrap;
}

.marke > span { overflow: hidden; text-overflow: ellipsis; }

/* Das Logo im Kopf. Fest 40 px, damit die Kopfzeile nicht springt,
   waehrend das Bild laedt. Die Datei ist 128 px gross - also mehr als
   dreifach, fuer scharfe Darstellung auf guten Bildschirmen.

   40 px ist KEIN freier Wert: Logo, Knopf und Flagge sind seit dem
   13.10.2026 alle drei genau 40 px hoch und stehen damit auf einer
   Linie. Wer eine Zahl aendert, muss alle drei aendern. */
.marke__zeichen {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: block;
}

.kopf__rechts { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

.sprachknopf {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  padding: 0;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(12, 26, 38, .55);
  box-shadow: inset 0 0 0 1.5px rgba(251, 243, 228, .3);
}

.sprachknopf .flagge { width: 40px; height: 40px; border-radius: 50%; }

.sprachknopf:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1.5px rgba(251, 243, 228, .3), 0 0 0 3px rgba(240, 184, 90, .5);
}

.flagge { display: block; }

.anmelden {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 16px 0 12px;
  border-radius: 20px;
  background: rgba(12, 26, 38, .55);
  color: var(--creme);
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
}

/* --- Karte ---------------------------------------------- */

/* Zuerst die Ausnahme, dann die Regel: .karte traegt display: flex,
   und das ueberstimmt das hidden-Attribut. Ohne diese Zeile stehen die
   vier Bildschirme des Kontos alle gleichzeitig untereinander da.

   Genau dieselbe Falle hat am 21.09.2026 schon einmal eine Runde
   gekostet (.halterblock). Sie hat es am 09.10.2026 ein zweites Mal
   getan - diesmal hat pruefen12.py sie gefunden, bevor es jemand
   anderes tat. Wer einem Element per Klasse ein display gibt, muss
   .klasse[hidden] { display: none; } daneben schreiben. */
.karte[hidden] { display: none; }

.karte {
  margin: 0 16px;
  padding: 22px 20px 20px;
  border-radius: 24px;
  background: var(--creme);
  box-shadow: 0 24px 50px rgba(0, 0, 0, .45);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.karte__titel {
  margin: 0;
  font-family: var(--schrift-kopf);
  font-weight: 700;
  font-size: 25px;
  line-height: 1.15;
  color: var(--tinte);
}

.karte__untertitel {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--gedaempft);
}

.feldgruppe { display: block; }

.beschriftung {
  display: block;
  font-family: var(--schrift-kopf);
  font-weight: 600;
  font-size: 17px;
  color: var(--tinte);
  margin-bottom: 8px;
}

/* Beschriftung links, kleiner Ausweg rechts daneben. */
.beschriftungsreihe {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
/* Die Beschriftung gibt nach, der Ausweg bleibt in einer Zeile stehen. */
.beschriftungsreihe .beschriftung { flex: 1 1 auto; min-width: 0; margin-bottom: 8px; }

.feldlink {
  flex: 0 0 auto;
  margin-bottom: 8px;
  padding: 2px 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  text-align: right;
  color: var(--gedaempft);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.feldlink:active { color: var(--tinte); }
.feldlink:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

.feldhinweis {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--gedaempft);
}

.feld {
  display: flex;
  align-items: center;
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border-radius: 14px;
  background: #fff;
  border: 2px solid var(--feldrand);
  color: var(--tinte);
  font-size: 17px;
  font-weight: 600;
}

.feld::placeholder { color: var(--platzhalter); font-weight: 600; }

.feld:focus,
.feld:focus-visible {
  outline: none;
  border-color: var(--gold-dunkel);
  box-shadow: 0 0 0 3px rgba(240, 184, 90, .3);
}

.feld--fehlerhaft { border-color: var(--fehler); }

/* Rüde / Hündin */

.wahlreihe { display: flex; gap: 10px; }

.wahl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  flex: 1 1 0;
  border-radius: 14px;
  background: #fff;
  border: 2px solid var(--feldrand);
  color: var(--gedaempft);
  font-size: 17px;
  font-weight: 700;
}

.wahl__haken { display: none; }

.wahl[aria-pressed="true"] {
  background: rgba(240, 184, 90, .18);
  border-color: var(--gold-dunkel);
  color: var(--tinte);
}

.wahl[aria-pressed="true"] .wahl__haken { display: block; }

.wahl:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(240, 184, 90, .45);
}

/* Geburtsdatum */

.datumsreihe { display: flex; align-items: center; gap: 8px; }
.datumsreihe[hidden] { display: none; }   /* sonst gewinnt das flex oben */

.datumsreihe .feld { justify-content: center; text-align: center; padding: 0 8px; flex: 1 1 0; }
.datumsreihe .feld--jahr { flex: 1.6 1 0; }

.punkt { font-weight: 800; color: var(--platzhalter); }

/* Rassenauswahl */

.rassenknopf {
  justify-content: space-between;
  text-align: left;
  color: var(--platzhalter);
  gap: 10px;
}

.rassenknopf--gewaehlt { color: var(--tinte); }

.rassenknopf__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- hidden wirkt bei <svg> NICHT von allein ------------

   Am 11.10.2026 standen auf dem Knopf "Aenderungen
   speichern" ein Stern UND ein Haken nebeneinander, obwohl
   einer von beiden versteckt sein sollte. Nachgemessen, statt
   geraten:

     das Attribut hidden war gesetzt            -> ja
     eine eigene CSS-Regel setzte das display   -> keine
     das Symbol war trotzdem sichtbar           -> ja

   Die Grundregel des Browsers, [hidden] { display: none },
   gilt nur fuer HTML-Elemente. Ein <svg> steht in einem
   anderen Namensraum und ist davon nicht betroffen. Und weil
   SVGElement die Eigenschaft "hidden" gar nicht kennt, legt
   auch "el.hidden = true" im Javascript bloss stillschweigend
   eine Eigenschaft an, ohne irgendetwas zu veraendern.

   Verwandt mit der Falle "display:flex ueberstimmt hidden"
   (21.09., zweimal 09.10., 10.10., 11.10.) - aber eine Stufe
   tiefer: Dort gewann eine Regel gegen hidden, hier gibt es
   gar keine, die es umsetzt. Diese eine Zeile holt das nach,
   fuer die ganze Seite. */
svg[hidden] { display: none; }

/* Hauptknopf */

.hauptknopf {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 58px;
  border-radius: 18px;
  background: var(--gold);
  color: var(--tinte);
  font-family: var(--schrift-kopf);
  font-weight: 700;
  font-size: 20px;
  box-shadow: 0 8px 20px rgba(240, 184, 90, .28);
}

.hauptknopf:active { transform: translateY(1px); }

.hauptknopf:focus-visible {
  outline: none;
  box-shadow: 0 8px 20px rgba(240, 184, 90, .28), 0 0 0 3px rgba(240, 184, 90, .5);
}

.kleinhinweis {
  margin: -6px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--gedaempft);
}

/* Fehlermeldungen */

.fehlertext {
  display: none;
  margin: 8px 0 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--fehler);
}

.fehlertext--sichtbar { display: block; }

/* --- Seitenfuß ------------------------------------------ */

.fuss {
  padding: 18px 16px 26px;
  text-align: center;
  font-size: 12px;
  line-height: 1.6;
  color: rgba(251, 243, 228, .5);
}

.fuss a { color: rgba(251, 243, 228, .62); text-decoration: underline; }
.fuss__trenner { padding: 0 6px; }

/* --- Rassen-Auswahlblatt -------------------------------- */

.blatt-hintergrund {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(8, 18, 28, .62);
}

.blatt {
  position: fixed;
  z-index: 50;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 100%;
  max-width: var(--spalte);
  height: 88dvh;
  background: var(--creme);
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -18px 50px rgba(0, 0, 0, .5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.blatt[hidden], .blatt-hintergrund[hidden] { display: none; }

.blatt__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 12px;
}

.blatt__titel {
  margin: 0;
  font-family: var(--schrift-kopf);
  font-weight: 700;
  font-size: 21px;
  color: var(--tinte);
}

.blatt__schliessen {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 22px;
  background: rgba(43, 31, 23, .07);
}

.blatt__suche { padding: 0 16px 12px; }

.blatt__liste {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 8px calc(16px + env(safe-area-inset-bottom));
}

.rassenzeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 12px 12px;
  border-radius: 14px;
  text-align: left;
  font-size: 17px;
  font-weight: 600;
  color: var(--tinte);
}

.rassenzeile + .rassenzeile { border-top: 1px solid rgba(43, 31, 23, .08); }
.rassenzeile:active { background: rgba(240, 184, 90, .16); }
.rassenzeile:focus-visible { outline: none; background: rgba(240, 184, 90, .2); }
.rassenzeile__haken { display: none; flex: 0 0 auto; }
.rassenzeile[aria-selected="true"] { color: var(--tinte); }
.rassenzeile[aria-selected="true"] .rassenzeile__haken { display: block; }

/* Zweizeilige Zeile: Titel oben, leiser Hinweis darunter. */
.rassenzeile__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rassenzeile__hinweis {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--gedaempft);
}

/* Trennt den kleinen Block oben von den echten Rassen. */
.rassenliste__trenner {
  height: 1px;
  margin: 8px 12px;
  background: rgba(43, 31, 23, .14);
}
.rassenliste__trenner + .rassenzeile { border-top: none; }

/* --- Zweite Ebene: mehrere Rassen für einen Mischling ---- */

/* Liegt über der ersten Ebene und füllt dasselbe Blatt. */
.blatt__ebene {
  position: absolute;
  inset: 0;
  background: var(--creme);
  border-radius: 24px 24px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.blatt__ebene[hidden] { display: none; }

.blatt__zurueck {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 22px;
  background: rgba(43, 31, 23, .07);
}

.blatt__ebene .blatt__titel { flex: 1 1 auto; font-size: 19px; line-height: 1.2; }

.blatt__untertitel {
  margin: 0;
  padding: 0 16px 12px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--gedaempft);
}

/* Die bereits gewählten Rassen als abnehmbare Plaketten */
.chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px; }
.chips:empty { display: none; }

.chip {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 8px 0 14px;
  border-radius: 18px;
  background: rgba(240, 184, 90, .22);
  border: 1.5px solid rgba(201, 143, 46, .45);
  color: var(--tinte);
  font-size: 15px;
  font-weight: 700;
}

.chip__weg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border-radius: 12px;
}

.chip__weg:active { background: rgba(43, 31, 23, .12); }

.chips + .blatt__suche { padding-top: 12px; }

/* Häkchenfeld links in der Zeile */
.rassenzeile__kasten {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 8px;
  border: 2px solid var(--feldrand);
  background: #fff;
}

.rassenzeile__kasten svg { display: none; }

.rassenzeile[aria-selected="true"] .rassenzeile__kasten {
  background: rgba(240, 184, 90, .22);
  border-color: var(--gold-dunkel);
}

.rassenzeile[aria-selected="true"] .rassenzeile__kasten svg { display: block; }
.rassenzeile[aria-disabled="true"] { opacity: .45; }

.blatt__fuss {
  flex: 0 0 auto;
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(43, 31, 23, .08);
  background: var(--creme);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.blatt__genug {
  margin: 0 0 2px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--gold-dunkel);
}

.blatt__genug[hidden] { display: none; }

.hauptknopf:disabled {
  background: rgba(240, 184, 90, .35);
  color: rgba(43, 31, 23, .45);
  box-shadow: none;
  cursor: default;
}

.textknopf {
  min-height: 44px;
  font-size: 15px;
  font-weight: 700;
  color: var(--gedaempft);
  text-decoration: underline;
}

.textknopf:active { color: var(--tinte); }

/* Sprachauswahl: dasselbe Blatt, nur niedriger */
.blatt--kurz { height: auto; max-height: 88dvh; padding-bottom: env(safe-area-inset-bottom); }

.sprachzeile {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 60px;
  padding: 12px;
  border-radius: 14px;
  text-align: left;
  font-size: 17px;
  font-weight: 700;
  color: var(--tinte);
}

.sprachzeile + .sprachzeile { border-top: 1px solid rgba(43, 31, 23, .08); }
.sprachzeile:active { background: rgba(240, 184, 90, .16); }
.sprachzeile:focus-visible { outline: none; background: rgba(240, 184, 90, .2); }

.sprachzeile .flagge {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px rgba(43, 31, 23, .15);
}

.sprachzeile__name { flex: 1 1 auto; }
.sprachzeile__haken { display: none; flex: 0 0 auto; }
.sprachzeile[aria-selected="true"] .sprachzeile__haken { display: block; }

.blatt__leer {
  padding: 24px 16px;
  text-align: center;
  font-size: 15px;
  line-height: 1.5;
  color: var(--gedaempft);
}

/* Solange das Auswahlblatt offen ist, steht die Seite dahinter still */
body.blatt-offen { overflow: hidden; }

/* --- Szene: Lichtung mit Hund und Sternbild -------------- */
/* Werte aus dem Mockup „Laden A“, in Prozent umgerechnet,
   damit die Szene auf jeder Handybreite gleich aussieht.   */

body.mit-szene .hintergrund { display: none; }

.szene {
  position: relative;
  width: 100%;
  aspect-ratio: 390 / 462;
  overflow: hidden;
  background: var(--nacht);
}

.szene__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 32%;
}

.szene__sterne { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.szene__ton { position: absolute; inset: 0; background: rgba(8, 18, 28, .08); }

/* Sternbild und Name des Zeichens bilden eine Einheit. Ihr Mittelpunkt liegt
   waagerecht über dem Hundekopf und senkrecht auf halber Höhe zwischen Kopf
   und oberem Rand. Jedes der zwölf Zeichen wird in das Feld eingepasst und
   darin mittig ausgerichtet – unabhängig von seiner Form. */
.sternbildfeld {
  position: absolute;
  left: 52%;
  top: 21%;
  transform: translate(-50%, -50%);
  width: 70%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.szene__sternbild {
  width: 100%;
  aspect-ratio: 273 / 150;
  opacity: .95;
  overflow: visible;
}

.szene__zeichenname {
  font-family: var(--schrift-kopf);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  text-shadow: 0 2px 10px rgba(8, 18, 28, .7);
  opacity: 0;
  transition: opacity .6s ease;
}

.szene__zeichenname--sichtbar { opacity: .95; }

@media (prefers-reduced-motion: reduce) {
  .szene__zeichenname { transition: none; }
}

.szene__schein {
  position: absolute;
  left: 27.4%;
  bottom: 16.9%;
  width: 48.2%;
  height: 56.3%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(233, 242, 247, .32), rgba(233, 242, 247, 0));
  pointer-events: none;
}

.szene__hund {
  position: absolute;
  left: 37.7%;
  bottom: 14.7%;
  width: 27.7%;
  height: auto;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .35));
}

/* Der Schatten am Boden. Der Rahmen deckt sich genau mit dem Hundebild,
   damit die Ellipse darin in Prozent gesetzt werden kann. Wie breit sie
   wird, sagt app.js – gemessen an den Pfoten der jeweiligen Rasse. */
.szene__schatten {
  position: absolute;
  left: 37.7%;
  bottom: 14.7%;
  width: 27.7%;
  aspect-ratio: 347 / 640;
  pointer-events: none;
}

/* --fuss-boden hebt die Ellipsen von der Bildunterkante auf die Linie, auf der
   der Hund wirklich steht. Ohne das liegen sie unter der Rutenspitze, werden
   vom Hund verdeckt, und er scheint zu schweben.

   Zwei Lagen, weil eine allein nicht genügt:
   ::before der weite, weiche Schatten – gibt dem Hund Gewicht
   ::after  der schmale, dunkle Kontaktsaum direkt an den Pfoten – der
            allein setzt ihn wirklich auf den Boden

   Der Kontaktsaum muss über der weichen Ellipse liegen, deshalb ist er das
   ::after: Es wird nach dem ::before gezeichnet. Ein z-index waere hier falsch
   – er hoebe den Schatten auch ueber den Hund, und er laege dann auf Rute und
   Pfoten statt darunter. Beide Lagen bleiben ohne z-index, damit der Hund –
   im HTML nach dem Schatten – sie sicher verdeckt. */
.szene__schatten::before,
.szene__schatten::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

/* Beide Ellipsen sind breiter als die Standfläche, weil der Hund ihre Mitte
   verdeckt. Zu sehen ist nur, was seitlich und nach vorn heraustritt – genau
   dort entsteht der Eindruck, dass er aufsteht. */
.szene__schatten::before {
  left: calc(var(--fuss-links, 8%) - var(--fuss-breite, 84%) * .23);
  width: calc(var(--fuss-breite, 84%) * 1.46);
  bottom: calc(var(--fuss-boden, 7%) - 7.6%);
  height: 17%;
  background: radial-gradient(closest-side,
              rgba(2, 8, 14, .7), rgba(2, 8, 14, .38) 55%, rgba(2, 8, 14, 0) 86%);
  filter: blur(7px);
}

.szene__schatten::after {
  left: calc(var(--fuss-links, 8%) - var(--fuss-breite, 84%) * .07);
  width: calc(var(--fuss-breite, 84%) * 1.14);
  bottom: calc(var(--fuss-boden, 7%) - 3.4%);
  height: 5.4%;
  background: radial-gradient(closest-side,
              rgba(1, 5, 9, .92), rgba(1, 5, 9, .62) 58%, rgba(1, 5, 9, 0) 88%);
  filter: blur(3px);
}

.szene__verlauf {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 26%;
  background: linear-gradient(to bottom, rgba(12, 26, 38, 0), var(--nacht));
  pointer-events: none;
}

/* sitzt knapp über der Ladekarte, damit nichts verdeckt wird */
.szene__hinweis {
  position: absolute;
  right: 18px;
  bottom: 17%;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .4px;
  color: rgba(251, 243, 228, .5);
  text-shadow: 0 1px 6px rgba(8, 18, 28, .8);
}
.szene__hinweis[hidden] { display: none; }

.kopf--ueber {
  position: absolute;
  left: 0; right: 0; top: 0;
  z-index: 3;
}

/* Sternbild zeichnet sich */

@keyframes zeichnen { to { stroke-dashoffset: 0; } }

.sternlinie {
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  animation: zeichnen 3.2s ease-out forwards;
}

@media (prefers-reduced-motion: reduce) {
  .sternlinie { animation: none; stroke-dashoffset: 0; }
}

/* --- Inhalt unter der Szene ------------------------------ */

/* Zieht die Karte in den unteren Rand der Szene hinein, genau wie im Mockup.
   Prozentwerte bei margin beziehen sich auf die Breite – 62 px bei 390 px. */
.laden-inhalt {
  position: relative;
  z-index: 2;
  margin-top: -15.9%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1 1 auto;
}

.glaskarte {
  margin: 0 16px;
  padding: 16px 20px;
  border-radius: 22px;
  background: rgba(12, 26, 38, .78);
  border: 1px solid rgba(251, 243, 228, .16);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  text-align: center;
}

.glaskarte[hidden] { display: none; }

.glaskarte__titel {
  margin: 0;
  font-family: var(--schrift-kopf);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.25;
  color: var(--creme);
}

.glaskarte--stoerung { gap: 16px; padding: 22px 20px; }
.glaskarte--stoerung .hauptknopf { max-width: 280px; }

@keyframes pulsieren {
  0%, 100% { transform: scale(.7); opacity: .4; }
  50% { transform: scale(1); opacity: 1; }
}

.punkte { display: flex; gap: 8px; align-items: center; height: 16px; }

.punkte__punkt {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold);
  animation: pulsieren 1.4s ease-in-out infinite;
}

.punkte__punkt--2 { animation-delay: .25s; }
.punkte__punkt--3 { animation-delay: .5s; }

@media (prefers-reduced-motion: reduce) {
  .punkte__punkt { animation: none; opacity: .8; }
}

.gefunden {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(251, 243, 228, .85);
  font-size: 14px;
  font-weight: 600;
}

.gefunden[hidden] { display: none; }

/* --- Zustand 3: Horoskop -------------------------------- */
/* Szene ist hier höher und der Hund größer als beim Laden.
   Werte aus dem Mockup „Horoskop A“ (390 × 560).            */

.szene--horoskop { aspect-ratio: 390 / 560; }
.szene--horoskop .szene__ton { background: rgba(8, 18, 28, .06); }
/* Gleiche Anordnung, nur an die höhere Szene angepasst. */
.szene--horoskop .sternbildfeld { top: 19.3%; }
.szene--horoskop .szene__schein { left: 21.8%; bottom: 27.1%; width: 59.5%; height: 46.4%; }
.szene--horoskop .szene__hund { left: 32.05%; bottom: 11.07%; width: 38.97%; }
.szene--horoskop .szene__schatten { left: 32.05%; bottom: 11.07%; width: 38.97%; }

/* Der Hund ist im Horoskop groesser als beim Laden (39 % statt 27,7 % der
   Breite). Damit das nicht springt, startet er beim Erscheinen in der alten
   Groesse und waechst von seiner Standflaeche aus heran – als komme er naeher.
   27.7 / 38.97 = 0.711 */
.szene--horoskop .szene__hund,
.szene--horoskop .szene__schatten {
  transform-origin: 50% 100%;
  transition: transform .6s cubic-bezier(.22, .72, .26, 1);
}

.szene--horoskop.szene--naht .szene__hund,
.szene--horoskop.szene--naht .szene__schatten {
  transform: scale(.711);
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .szene--horoskop .szene__hund,
  .szene--horoskop .szene__schatten { transition: none; }
}
.szene--horoskop .szene__verlauf { height: 21.4%; }
.szene--horoskop .szene__hinweis { bottom: 13%; }

.pille {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 16px 0 12px;
  border-radius: 20px;
  background: rgba(12, 26, 38, .55);
  color: var(--creme);
  text-decoration: none;
  font-family: var(--schrift-text);
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
}

#neuer-hund { padding: 0 14px 0 8px; }

/* Zieht den Titel in den unteren Rand der Szene: 50 px bei 390 px Breite */
.horoskop-inhalt {
  position: relative;
  z-index: 2;
  margin-top: -12.8%;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.horoskop-kopf { padding: 0 20px; display: flex; flex-direction: column; gap: 6px; }

.horoskop-titel {
  margin: 0;
  font-family: var(--schrift-kopf);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.1;
  color: var(--creme);
  text-shadow: 0 4px 20px rgba(0, 0, 0, .6);
}

.horoskop-datum { margin: 0; font-size: 15px; font-weight: 600; color: rgba(251, 243, 228, .8); }
.horoskop-zeile { margin: 0; font-size: 15px; font-weight: 600; color: var(--gold); }
.horoskop-nachsatz {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(251, 243, 228, .62);
}

/* Auf einen Blick */

.ueberblick {
  margin: 22px 16px 0;
  padding: 18px 18px 8px;
  border-radius: 22px;
  background: var(--creme);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
  display: flex;
  flex-direction: column;
}

.ueberblick__marke {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--gold-dunkel);
  margin-bottom: 6px;
}

.ueberblick__zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
}

.ueberblick__zeile + .ueberblick__zeile { border-top: 1px solid rgba(43, 31, 23, .08); }

.ueberblick__name {
  font-family: var(--schrift-kopf);
  font-weight: 600;
  font-size: 17px;
  color: var(--tinte);
}

.ueberblick__symbole { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }

/* Die drei Textkarten */

.kategorien { margin: 14px 16px 0; display: flex; flex-direction: column; gap: 12px; }

.kategorie {
  padding: 18px 18px 20px;
  border-radius: 22px;
  background: var(--creme);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kategorie__kopf { display: flex; align-items: center; gap: 10px; }

.kategorie__kreis {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(240, 184, 90, .18);
}

.kategorie__titel {
  margin: 0;
  font-family: var(--schrift-kopf);
  font-weight: 600;
  font-size: 19px;
  color: var(--tinte);
}

.kategorie__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: #3d3027;
  text-wrap: pretty;
}

/* Teilen */

.teilen {
  margin: 22px 16px 0;
  padding: 18px 16px 16px;
  border-radius: 22px;
  background: var(--creme);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.teilen__titel {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--schrift-kopf);
  font-weight: 600;
  font-size: 18px;
  color: var(--tinte);
}

.teilen__reihe { display: flex; gap: 8px; }

.teilknopf {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1 1 0;
  min-width: 0;
  color: var(--tinte);
}

.teilknopf__kreis {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(240, 184, 90, .16);
  border: 1.5px solid rgba(201, 143, 46, .35);
}

.teilknopf:active .teilknopf__kreis { background: rgba(240, 184, 90, .34); }
.teilknopf:focus-visible { outline: none; }
.teilknopf:focus-visible .teilknopf__kreis { box-shadow: 0 0 0 3px rgba(240, 184, 90, .5); }

.teilknopf__text { font-size: 12px; font-weight: 700; text-align: center; line-height: 1.2; }

.teilen__rueckmeldung {
  display: none;
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--gold-dunkel);
}

.teilen__rueckmeldung--sichtbar { display: block; }

/* Speichern */

.speichern { margin: 14px 16px 0; display: flex; flex-direction: column; gap: 12px; }

.speichern__hinweis {
  margin: 0;
  text-align: center;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(251, 243, 228, .65);
}

/* --- Die Einladung zum Konto ---------------------------------------
   Steht direkt unter den drei Kategorien, wo der Gedanke "und wir
   beide?" von selbst entsteht. Etwas heller als der Rest der Seite,
   damit sie auffaellt, ohne zu schreien. */

/* Wieder display: flex, also wieder die Zeile daneben - sonst bleibt
   der Block sichtbar, obwohl er versteckt werden soll. Dritte Stelle
   im Projekt (.halterblock 21.09., .karte 09.10.; die vierte war der
   Werbeplatz, den es seit dem 12.10. nicht mehr gibt). */
.konto[hidden] { display: none; }

.konto {
  margin: 22px 16px 0;
  padding: 20px 18px 18px;
  border-radius: 22px;
  background: var(--creme);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.konto__titel {
  margin: 0;
  font-family: var(--schrift-kopf);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.25;
  color: var(--tinte);
}

.konto__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--tinte);
}

.konto__liste {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.konto__punkt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--gedaempft);
}

.konto__punkt svg { flex: 0 0 auto; margin-top: 2px; }

.konto__rueckmeldung {
  margin: 0;
  min-height: 18px;
  text-align: center;
  font-size: 14px;
  line-height: 1.4;
  color: var(--gold-dunkel);
}

.konto__rueckmeldung:empty { min-height: 0; }

/* --- Das Konto: die vier Bildschirme ---------------------

   Gebaut am 09.10.2026 (Stufe 2, Punkt 5). Die Bildschirme
   benutzen absichtlich dieselben Bausteine wie das Formular
   auf der Startseite - .karte, .feld, .wahl, .hauptknopf.
   Neu sind nur das Kaestchen fuer die taegliche Mail und die
   Angabenliste unter "Mein Konto". */

/* Das Kaestchen. Das echte Feld bleibt da - es ist das, was
   Tastatur und Vorlesesoftware bedienen -, liegt aber
   unsichtbar unter dem gezeichneten Kasten. */
.kaestchenzeile {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  position: relative;
  font-size: 15px;
  line-height: 1.45;
  color: var(--tinte);
  cursor: pointer;
}

/* display: flex schlaegt das eingebaute [hidden] der Browser.
   Dieselbe Falle wie bei .hundereihe und .pille. */
.kaestchenzeile[hidden] { display: none; }

.kaestchen {
  position: absolute;
  width: 26px;
  height: 26px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.kaestchen__haken {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #fff;
  border: 2px solid var(--feldrand);
}

.kaestchen__haken svg { display: none; }

.kaestchen:checked + .kaestchen__haken {
  background: var(--gold);
  border-color: var(--gold-dunkel);
}

.kaestchen:checked + .kaestchen__haken svg { display: block; }

.kaestchen:focus-visible + .kaestchen__haken {
  box-shadow: 0 0 0 3px rgba(240, 184, 90, .5);
}

/* Drei Knoepfe statt zwei: bei 390 px Breite bleiben je rund
   115 px, darum etwas kleiner gesetzt und ohne Haken-Luecke. */
.wahlreihe--drei { gap: 8px; }
.wahlreihe--drei .wahl { font-size: 15px; gap: 6px; padding: 0 4px; }

.fehlertext--mitte { text-align: center; }
.kleinhinweis--links { text-align: left; margin-top: 0; }

/* Mein Konto: die Angaben als Liste */
.meins__angaben {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 16px;
  font-size: 15px;
  line-height: 1.45;
}

.meins__angaben dt { color: var(--gedaempft); }
.meins__angaben dd { margin: 0; color: var(--tinte); font-weight: 700; }

.meins__fuss {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--feldrand);
}

/* "Konto loeschen" steht bewusst leiser als die anderen beiden -
   sichtbar, auffindbar, aber nicht als Angebot gesetzt. */
.textknopf--leise { color: var(--platzhalter); font-weight: 400; }

/* Der zweitrangige Knopf: sichtbar, aber nicht so laut wie der
   Hauptknopf daneben. Gebraucht unter "Mein Konto", wo der Weg zum
   Horoskop der Hauptweg ist und das Sichern der Einstellung nicht. */
.zweitknopf {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 18px;
  border-radius: 16px;
  background: transparent;
  border: 2px solid var(--gold-dunkel);
  color: var(--tinte);
  font-size: 16px;
  font-weight: 700;
}

.zweitknopf:active { background: rgba(240, 184, 90, .18); }

.zweitknopf:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(240, 184, 90, .5);
}

/* Die Rueckfrage vor dem Loeschen. Sie traegt display: flex - also
   steht die Zeile daneben, bevor jemand sie sucht. Vierte Stelle im
   Projekt; die Gewohnheit sitzt inzwischen. */
.loeschfrage[hidden] { display: none; }

.loeschfrage {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
  padding: 16px;
  border-radius: 18px;
  border: 2px solid rgba(180, 71, 46, .35);
  background: rgba(180, 71, 46, .06);
}

.loeschfrage__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--tinte);
}

/* Rot, aber nicht knallrot: Der Knopf soll ernst aussehen, nicht
   drohen. Die Schrift bleibt hell genug fuer den Kontrast. */
.gefahrknopf {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 18px;
  border-radius: 16px;
  background: var(--fehler);
  color: #fbf3e4;
  font-size: 16px;
  font-weight: 700;
}

.gefahrknopf:active { background: #9c3d28; }

.gefahrknopf:disabled { opacity: .6; }

.gefahrknopf:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(180, 71, 46, .45);
}

/* --- Mehrere Hunde (10.10.2026, Stufe 2, Punkt 6) --------

   Die Hunde-Reihe ueber dem Formular. Sie steht auf dem
   dunklen Wald, nicht auf der Karte - deshalb helle Schrift
   und dieselbe Bauweise wie .pille im Kopf.

   ZUERST die Regel fuers Verstecken, DANN das display.
   .hundereihe bekommt display:flex; ohne die Zeile darueber
   bliebe sie trotz hidden stehen. Dieselbe Falle hat am
   21.09.2026 (.halterblock) und zweimal am 09.10.2026
   (.karte, .konto) je eine Runde gekostet. */
.hundereihe[hidden] { display: none; }

.hundereihe {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 16px 14px;
}

.hundereihe__label {
  font-size: 14px;
  font-weight: 700;
  color: rgba(251, 243, 228, .78);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
}

/* Umbrechen statt seitlich scrollen: Fuenf Namen passen in
   zwei Zeilen, und eine zweite Zeile sieht man - eine Liste,
   die seitlich weiterlaeuft, nicht. */
.hundereihe__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hundchip {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border-radius: 20px;
  background: rgba(12, 26, 38, .55);
  border: 2px solid rgba(251, 243, 228, .22);
  color: var(--creme);
  font-family: var(--schrift-text);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

/* Der Hund, der gerade im Formular steht. Gold wie ueberall
   sonst, wo etwas ausgewaehlt ist. */
.hundchip[aria-pressed="true"] {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--tinte);
}

.hundchip--neu {
  background: transparent;
  border-style: dashed;
  color: rgba(251, 243, 228, .85);
  font-weight: 600;
}

.hundchip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(240, 184, 90, .5);
}

/* Der Hinweis im Horoskop, wenn das Konto voll ist. Kein
   Fehler - das Horoskop ist ja da -, aber auch nichts, was
   man uebersieht. */
.hinweiszeile[hidden] { display: none; }

.hinweiszeile {
  margin: 0 16px 14px;
  padding: 12px 16px;
  border-radius: 16px;
  background: rgba(240, 184, 90, .14);
  border: 1px solid rgba(240, 184, 90, .4);
  color: var(--creme);
  font-size: 14px;
  line-height: 1.5;
}

/* Die Hundeliste unter "Mein Konto". */
.meins__hunde {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--feldrand);
}

.meins__titel {
  margin: 0;
  font-family: var(--schrift-kopf);
  font-size: 18px;
  font-weight: 600;
  color: var(--tinte);
}

.hundzeile {
  display: flex;
  flex-direction: column;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--feldrand);
  background: rgba(255, 255, 255, .55);
}

.hundzeile__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.hundzeile__name {
  font-size: 16px;
  font-weight: 800;
  color: var(--tinte);
}

.hundzeile__angaben {
  margin: 2px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--gedaempft);
}

.hundzeile__weg {
  flex: 0 0 auto;
  font-size: 14px;
}

.hundzeile__frage[hidden] { display: none; }

.hundzeile__frage {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
  padding: 14px;
  border-radius: 14px;
  border: 2px solid rgba(180, 71, 46, .35);
  background: rgba(180, 71, 46, .06);
}

.hundzeile__frage p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--tinte);
}

.hundereihe__voll {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(251, 243, 228, .7);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
}

/* --- Mein Konto neu geordnet (11.10.2026) ----------------

   ZUERST die Regeln fuers Verstecken.

   .speichern und .zweitknopf tragen beide display:flex und
   werden seit dem 11.10. versteckt - der Merken-Knopf bei
   Angemeldeten, "Noch ein Hund?" bei vollem Konto. Ohne diese
   zwei Zeilen blieben beide trotz hidden stehen. Dieselbe
   Falle wie .halterblock (21.09.), .karte und .konto (09.10.)
   und .hundereihe (10.10.). */
.speichern[hidden] { display: none; }
.zweitknopf[hidden] { display: none; }

.meins__abschnitt {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--feldrand);
}

.meins__abschnitt[hidden] { display: none; }

/* Ueberschrift links, der Stift rechts auf derselben Linie. */
.meins__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Der Stift. 44 Pixel im Quadrat, auch wenn das Symbol kleiner
   ist - alles darunter trifft man auf dem Handy nicht. */
.symbolknopf {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin: -10px -8px -10px 0;
  border-radius: 14px;
  background: transparent;
}

.symbolknopf:active { background: rgba(201, 143, 46, .12); }

.symbolknopf:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(240, 184, 90, .5);
}

/* Die Zeile auf der Horoskop-Seite, die bei Angemeldeten an die
   Stelle des Merken-Knopfes tritt. Leise: Sie bestaetigt nur,
   sie fordert zu nichts auf. */
.imkonto[hidden] { display: none; }

.imkonto {
  margin: 14px 16px 0;
  text-align: center;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(251, 243, 228, .65);
}

/* --- Direkt ins Horoskop (11.10.2026) --------------------

   Die zweite Hunde-Reihe, ueber dem Horoskop. Sie steht auf
   dem dunklen Grund unterhalb der Szene, nicht ueber dem
   Waldbild - deshalb etwas mehr Luft nach oben. */
.hundereihe--horoskop {
  margin: 18px 16px 4px;
}

/* Stift und "Entfernen" nebeneinander, rechts in der
   Kopfzeile eines Hundes. */
.hundzeile__knoepfe {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
}

.hundzeile__stift {
  width: 38px;
  height: 38px;
  margin: -8px 0;
  border-radius: 12px;
}

/* --- Die Hunde-Reihe wandert in den Kopf (11.10.2026) ----

   Markus: "Das Bild und das Horoskop sind fuer mich eine
   Einheit, weil es um diesen Hund geht." Die Liste ist die
   Ebene darueber - sie gehoert nicht zwischen beide,
   sondern davor. */
.kopfzone {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Eine Zeile unter Logo und Sprachwahl, ueber dem Bild. Die
   Ueberschrift der Reihe entfaellt hier - dafuer ist kein
   Platz, und zu sehen ist ohnehin, worum es geht. Fuer
   Vorlesesoftware bleibt sie stehen. */
.hundereihe--kopf {
  margin: 0 16px;
  gap: 0;
}

.hundereihe--kopf .hundereihe__chips { gap: 6px; }

.hundereihe--kopf .hundchip {
  height: 34px;
  padding: 0 13px;
  font-size: 14px;
}

/* Da, aber unsichtbar: Was Vorlesesoftware braucht und das
   Auge nicht. Nicht display:none - das nimmt sie auch der
   Vorlesesoftware weg. */
.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Der Papierkorb in der Hundeliste. Leiser als der Stift -
   er ist das Unwiderrufliche, aber kein Angebot. */
.symbolknopf--leise:active { background: rgba(154, 138, 120, .12); }

/* Die Reihe im Kopf laeuft seitlich, statt umzubrechen: Eine
   zweite Zeile laege auf dem Sternbild. Der angeschnittene
   letzte Chip zeigt, dass es weitergeht; app.js holt den
   gewaehlten Hund ins Bild. */
.hundereihe--kopf .hundereihe__chips {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.hundereihe--kopf .hundereihe__chips::-webkit-scrollbar { display: none; }
.hundereihe--kopf .hundchip { flex: 0 0 auto; }

/* Und das Sternbild macht Platz, wenn die Reihe da ist. */
/* Nur ein kleines Stueck - 26,5 % waren zu viel, dann lag
   der Name des Sternzeichens hinter dem Hund. Den Rest
   erledigt der blickdichte Grund der Chips darueber. */
.mit-hundereihe .szene--horoskop .sternbildfeld { top: 21%; }

/* "Noch ein Hund?" war durchsichtig - die Sternlinien
   schienen hindurch und die Reihe las sich nicht mehr als
   eigene Schicht ueber dem Himmel. Im Kopf bekommt er
   denselben dunklen Grund wie die anderen. */
.hundereihe--kopf .hundchip--neu { background: rgba(12, 26, 38, .55); }

/* Der kurze "+"-Knopf im Kopf. Rund und schmal, damit auch
   fuenf Namen daneben in eine Zeile passen - dann muss nie
   jemand begreifen, dass die Liste seitlich weitergeht. */
.hundchip--plus {
  width: 38px;
  padding: 0;
  justify-content: center;
  /* Nicht gestrichelt wie ueber dem Formular: Auf dem
     Sternenhimmel loest sich ein gestrichelter Rand auf, und
     der Knopf war am Bildschirmfoto kaum zu finden. */
  border-style: solid;
  border-color: rgba(251, 243, 228, .45);
  color: var(--creme);
}

/* .pille und .marke tragen beide display:flex und werden auf
   der Horoskop-Seite seit dem 11.10. gegeneinander
   ausgetauscht. Ohne diese zwei Zeilen stuenden sie
   nebeneinander. Zum sechsten Mal dieselbe Falle - diesmal
   wieder beim Schreiben gesehen. */
.pille[hidden] { display: none; }
.marke[hidden] { display: none; }

/* Das Pluszeichen ist Flex-Kind des Knopfes und wurde ohne
   diese Zeile auf die halbe Groesse gestaucht. */
.hundchip--plus svg { flex: 0 0 auto; }