/* Gemeinsames Aussehen der Textseiten: Startseite, Übersicht, Anmelden,
   Konto anlegen, Bestätigung, Rechtstexte, Druckseite.

   Redesign „Deep Water" (2026-08-29): das helle Wash-Register ist abgelöst.
   Die ganze Nutzerreise läuft jetzt im dunklen Aquarium-Register — dieselbe
   Bildsprache wie die 3D-Szene (assets/ui.css), die Kamera und die Verwaltung.
   Damit gibt es nur noch EIN Register (Ende von „zwei Design-Welten",
   UX-Audit P2-3). Auslöser: Nutzer-Brainstorming mit vier Landing-Varianten,
   gewählt wurde „Deep Water" (siehe docs/superpowers/specs/
   2026-08-29-deep-water-redesign-design.md und mockups/a-landing.html).

   Token-Namen sind gegenüber dem Wash-Register unverändert — nur die Werte
   kippen. So bleibt bestehende Markup-/Klassen-Struktur unangetastet. */

[hidden] { display: none !important; }

:root {
  --wash: #040a10;
  --wash-deep: #071620;
  --stage: #05080d;
  --ink: #eaf2f2;
  --ink-soft: #8fa6ab;
  --surface: #0b1a24;
  --surface-soft: rgba(11, 26, 34, 0.7);
  --border: rgba(255, 255, 255, 0.10);

  --tide: #69e6d6;
  --tide-soft: #9df0e0;
  --marker: #ff8f5e;
  --marker-soft: #ffb083;
  --glow-halo: rgba(255, 143, 94, 0.28);

  --display: "Fraunces", ui-serif, Georgia, serif;
  --body-font: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;

  --space-1: 8px; --space-2: 16px; --space-3: 24px;
  --space-4: 32px; --space-5: 48px; --space-6: 64px; --space-7: 96px;

  --ok-ink: #5fe1c9;
  --bad-ink: #ff8a8a;
}

* { box-sizing: border-box; }
html { background: var(--wash); }
html, body { margin: 0; }

body {
  min-height: 100vh;
  background-color: var(--wash);
  background-image:
    radial-gradient(60% 40% at 78% 0, rgba(255,143,94,0.08), transparent 60%),
    radial-gradient(70% 50% at 10% 100%, rgba(105,230,214,0.06), transparent 60%);
  background-repeat: no-repeat;
  color: var(--ink);
  font: 15px/1.6 var(--body-font);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  /* Ein autoplayendes Video kümmert sich nicht um animation-duration. Ohne
     diese Regel bricht die Hero-Schleife genau die Zusage, die die Zeile
     darüber gibt — deshalb tritt hier das Poster-Standbild an ihre Stelle. */
  .hero-fish video { display: none !important; }
  .hero-fish {
    /* ?v= gleich mitziehen wie in index.html — sonst zeigt der
       Reduced-Motion-Fallback das Standbild einer älteren Fassung. */
    background: url('/assets/video/hero-loop.jpg?v=20260831') center / cover no-repeat;
    aspect-ratio: 1080 / 800;
  }
}

.wrap { max-width: 980px; margin: 0 auto; padding: var(--space-6) 20px var(--space-6); }
.narrow { max-width: 440px; }

.back { display: inline-block; margin-bottom: var(--space-3); color: var(--ink-soft); text-decoration: none; font-size: 13.5px; }
.back:hover { color: var(--tide); }

.head {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  margin-bottom: var(--space-5);
}
.brand { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; text-decoration: none; }
.brand-mark { width: 24px; height: 24px; flex: none; color: var(--marker); }
/* Wortmarke und Dreiklang stehen als eine Sperrung untereinander, die Bildmarke
   daneben mittig zu beiden Zeilen. Der Dreiklang ist standardmässig AUS: auf
   allen anderen Seiten trägt dieselbe Kopfzeile „Meine Aquarien" — ein
   Marken-Untertitel darunter wäre schlicht falsch. */
.brand-lockup { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.brand-tag { display: none; }
.head h1 {
  flex: none; margin: 0; font-family: var(--display); font-weight: 400;
  font-size: 1.4rem; letter-spacing: .2px; color: var(--ink); text-wrap: balance;
}
.head .who { color: var(--ink-soft); font-size: 13.5px; }

/* Startseite (ausgeloggt): Wortmarke gross, Dreiklang direkt darunter. Die
   Marke wächst mit, bleibt aber bewusst deutlich unter der Hero-Schlagzeile
   (2.4rem gegen deren 4.4rem) — zwei fast gleich grosse Fraunces-Blöcke
   untereinander läsen sich wie zwei Überschriften, und der Hero verlöre den
   ersten Blick. */
body.on-landing .head { margin-bottom: 0; position: relative; z-index: 3; }

/* Die Wortmarkengrösse steht als Variable da, weil die Schwimmbahn des Fischs
   sich unten daran bemisst: er soll im Verhältnis zur Marke wandern, nicht in
   absoluten Pixeln, sonst ist derselbe Weg auf dem Telefon eine Weltreise. */
body.on-landing {
  --brand-size: clamp(1.7rem, 3.4vw, 2.4rem);
  /* Länge der Schwimmbahn. Zwei Grenzen, es gilt die kleinere: 6em halten den
     Weg im Verhältnis zur Wortmarke (sonst wandert der Fisch auf grossen
     Schirmen sinnlos weit), 22vw halten ihn auf schmalen Schirmen von der
     Sprachwahl am rechten Rand weg. */
  --brand-swim: min(calc(var(--brand-size) * 6), 22vw);
}
body.on-landing .head h1 { font-size: var(--brand-size); letter-spacing: -.01em; }

/* Der Fisch der Bildmarke steht auf der Startseite RECHTS neben der Wortmarke
   und schwimmt von dort in die leere Kopfzeile hinaus. Zwei Entscheidungen
   stecken darin, und beide hatten eine verworfene Alternative:

   1. Seitenwechsel (order). Links im Fluss schob der Fisch die Wortmarke um
      seine Breite plus Abstand nach rechts: „Paperworld.io" begann rund 46 px
      weiter innen als die Hero-Schlagzeile darunter, die linke Seitenkante
      hatte also zwei Fluchten statt einer. Der erste Versuch nahm ihn dafür
      ganz aus dem Fluss (position: absolute) und liess ihn HINTER dem Lockup
      durchziehen — das Bündigkeitsproblem war gelöst, aber der Fisch steckte
      dann über die halbe Bahn hinter den Buchstaben und war schlicht nicht zu
      sehen. Mit order: 1 rückt er stattdessen ans andere Ende derselben
      Flexbox: das Lockup sitzt auf x=0 und flieht mit der Schlagzeile, der
      Fisch steht im Freien.
   2. Bewegung nur über transform. Er bleibt im Fluss und belegt seinen Platz;
      verschoben wird ausschliesslich die gemalte Fläche. Deshalb kann die
      Wanderung das Layout gar nicht mehr anfassen — die Sperrung bleibt
      bündig, egal wo der Fisch gerade ist. Das ist auch der Grund, warum der
      Ruhezustand (Animation aus) automatisch richtig aussieht.

   Der Zyklus beginnt und endet in Ruhe direkt neben der Wortmarke: die meiste
   Zeit liest sich die Kopfzeile als geschlossenes Logo, und nur dazwischen
   schwimmt der Fisch einmal weg. Umgekehrt herum — Dauerwanderung, kurze
   Pause — wäre die Bildmarke nie dort, wo man sie sucht. */
body.on-landing .brand { gap: 12px; }
body.on-landing .brand-mark {
  width: 34px; height: 34px;
  order: 1;
  pointer-events: none;
  filter: drop-shadow(0 0 9px var(--glow-halo));
  animation: brand-swim 22s ease-in-out infinite;
}

/* Höhe und Neigung schwingen mit — ein Fisch, der schnurgerade durchgezogen
   wird, sieht aus wie ein Aufkleber auf einem Schlitten. Am rechten Ende
   blendet er aus und taucht an der Ruheposition wieder auf, statt rückwärts
   zurückzugleiten: rückwärts hiesse Schwanz voran, und ein gespiegelter Fisch
   auf dem Rückweg wäre ein zweites Tier. */
@keyframes brand-swim {
  0%,
  22%  { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  40%  { transform: translate(calc(var(--brand-swim) * .28), -4px) rotate(4deg); }
  56%  { transform: translate(calc(var(--brand-swim) * .55), 3px) rotate(-3deg); }
  72%  { transform: translate(calc(var(--brand-swim) * .8), -3px) rotate(3deg); }
  84%  { transform: translate(var(--brand-swim), 0) rotate(-2deg); opacity: 1; }
  90%  { transform: translate(calc(var(--brand-swim) * 1.12), -2px) rotate(0deg); opacity: 0; }
  /* Sprung zurück auf die Ruheposition, unsichtbar: zwischen diesen beiden
     Marken steht opacity auf 0, sonst sähe man den Fisch quer zurückzucken. */
  91%  { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  98%,
  100% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  /* Die globale Regel ganz oben kürzt jede Dauer auf 0,001 ms und springt
     damit sofort auf den letzten Keyframe. Der ist hier bewusst die
     Ruheposition mit opacity 1 — die Bildmarke steht also einfach still neben
     der Wortmarke, statt (wie bei einem Zyklus, der ausgeblendet endet) ganz
     zu verschwinden. animation: none macht das unabhängig von dieser
     Reihenfolge und sagt es zugleich deutlich. */
  body.on-landing .brand-mark { animation: none; transform: none; opacity: 1; }
}
body.on-landing .brand-tag {
  display: block; font-family: var(--body-font); font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase; font-weight: 650;
  color: var(--tide);
}

h2 { margin: 0 0 10px; font-family: var(--display); font-weight: 400; font-size: 1.4rem; color: var(--ink); letter-spacing: -.01em; }
p.lead { margin: 0 0 var(--space-4); color: var(--ink-soft); font-size: 1rem; }
body.on-landing p.lead { font-size: 1.15rem; max-width: 32ch; color: #cfe0e0; }

/* ── Formulare ─────────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-4);
}

label { display: block; margin: 0 0 6px; font-size: 0.82rem; font-weight: 600; color: var(--ink); }
.field { margin: 0 0 var(--space-3); }

input[type="email"], input[type="password"], input[type="text"] {
  width: 100%; min-height: 46px;
  font: inherit; font-family: var(--body-font); color: var(--ink);
  background: rgba(4, 14, 22, 0.6);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 14px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
input::placeholder { color: var(--ink-soft); }
input:focus { outline: none; border-color: var(--tide); box-shadow: 0 0 0 3px rgba(105,230,214,0.18); }

.hint { margin: 6px 0 0; font-size: 12.5px; color: var(--ink-soft); }

button, .btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 11px 22px;
  font: inherit; font-family: var(--body-font); font-size: 0.94rem; cursor: pointer; text-decoration: none;
  border-radius: 999px; border: 1px solid var(--border);
  color: var(--ink); background: rgba(255, 255, 255, 0.04);
  transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease, box-shadow .3s ease;
}
button:hover, .btn:hover { border-color: var(--tide); color: #fff; }
button[disabled] { opacity: .55; cursor: default; }

.primary {
  background: var(--marker); border-color: transparent; color: #1c0d06;
  font-weight: 650;
  box-shadow: 0 0 0 0 var(--glow-halo);
}
.primary:hover { background: var(--marker-soft); border-color: transparent; color: #1c0d06; box-shadow: 0 0 40px 2px var(--glow-halo); }
.full { width: 100%; }

/* Hero-CTA der Startseite: identisch zum .primary — der Glow ist jetzt
   überall die Primärgeste, kein Landing-Sonderfall mehr. */
body.on-landing .cta .btn.primary { background: var(--marker); color: #1c0d06; }
body.on-landing .cta .btn.primary:hover { transform: translateY(-1px); box-shadow: 0 0 44px 2px var(--glow-halo); }

.msg { margin: var(--space-2) 0 0; font-size: 13.5px; }
.msg.bad { color: var(--bad-ink); }
.msg.good { color: var(--ok-ink); }
.msg[hidden] { display: none; }

/* ── Feld-Validierung (P2-1) ───────────────────────────────────────────── */
.field-err { margin: 6px 0 0; font-size: 12.5px; color: var(--bad-ink); }
.field-err[hidden] { display: none; }
input.err,
input.err:focus { border-color: var(--bad-ink); box-shadow: 0 0 0 3px rgba(255, 138, 138, 0.15); }

.primary.loading { pointer-events: none; }
.primary.loading::after {
  content: "";
  width: 1em; height: 1em; margin-left: 0.6em;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: ptspin 0.6s linear infinite;
}
@keyframes ptspin { to { transform: rotate(360deg); } }

.alt { margin: var(--space-3) 0 0; font-size: 13.5px; color: var(--ink-soft); text-align: center; }
.alt a { font-weight: 600; color: var(--tide); text-decoration: underline; text-decoration-color: rgba(105,230,214,0.4); }

/* ── Übersicht ─────────────────────────────────────────────────────────── */
.grid {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.tank {
  display: block; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .2s ease;
}
.tank:hover { transform: translateY(-2px); box-shadow: 0 0 34px -6px var(--glow-halo); border-color: rgba(255,143,94,0.4); }
/* Vorschau-Kachel: die tatsächliche (dunkle) 3D-Szene — passt jetzt nahtlos
   ins Register, keine Sonderrolle mehr. */
.shot {
  aspect-ratio: 16 / 10; position: relative;
  background: radial-gradient(ellipse 60% 60% at 30% 30%, rgba(105,230,214,0.16), transparent 60%),
              linear-gradient(160deg, #0d211d, #050d12 70%);
}
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tank .body { padding: 12px 14px 14px; }
.tank h3 { margin: 0 0 4px; font-family: var(--display); font-size: 1.05rem; font-weight: 500; color: var(--ink); }
.tank .meta { font-size: 12.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.tank .meta code { font-family: ui-monospace, Consolas, monospace; }
.tank .row { display: flex; gap: 10px; margin-top: 10px; }
.tank .row span {
  font-size: 12.5px; padding: 5px 10px; border-radius: 9px;
  border: 1px solid var(--border); color: var(--ink-soft);
}

.newtank {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; text-align: center;
  min-height: 190px; padding: 20px;
  border: 1px dashed var(--border); border-radius: var(--radius-md);
  color: var(--ink-soft); background: none; cursor: pointer; width: 100%;
}
.newtank .plus { font-family: var(--display); font-size: 30px; line-height: 1; color: var(--marker); }
.newtank:hover { border-color: var(--marker); color: var(--ink); }

.newfish {
  display: grid; place-content: center; gap: 8px; text-align: center;
  min-height: 190px; padding: 20px;
  border: 1px dashed rgba(105,230,214,0.4); border-radius: var(--radius-md);
  color: var(--ink-soft); background: none; cursor: pointer; width: 100%;
}
.newfish .fishplus { font-size: 28px; line-height: 1; }
.newfish:hover { border-color: var(--tide); color: var(--ink); }

/* Popup zum Anlegen eines Aquariums (Nachtrag 52). */
.newbox-back {
  position: fixed; inset: 0; z-index: 100;
  display: flex; overflow: auto; padding: 20px;
  background: rgba(2, 6, 10, 0.72);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  animation: newbox-fade .14s ease-out;
}
@keyframes newbox-fade { from { opacity: 0 } to { opacity: 1 } }
.newbox-back > .card {
  margin: auto; width: min(92vw, 420px);
  background: #0d1e29;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7);
  animation: newbox-pop .16s cubic-bezier(.2,.7,.2,1);
}
@keyframes newbox-pop { from { opacity: 0; transform: translateY(8px) scale(.97) } to { opacity: 1; transform: none } }

.empty { color: var(--ink-soft); margin: 0 0 var(--space-4); }
.quota { color: var(--ink-soft); font-size: 13.5px; margin: calc(var(--space-3) * -1) 0 var(--space-4); font-variant-numeric: tabular-nums; }

.dash-tips { margin: 0 0 var(--space-4); }
.dash-tips h2 { margin-bottom: 6px; }
.dash-tips p.lead { margin-bottom: var(--space-3); }

#dash .section-head { max-width: none; margin: var(--space-5) 0 var(--space-2); }
#dash .section-head:first-of-type { margin-top: var(--space-4); }
#dash .section-head h2 { font-size: 1.2rem; }

.newtank.locked { min-height: 190px; }
.newtank.locked .plus { font-size: 24px; }

/* Dashboard-Leerzustand (P1-3) — jetzt das leuchtende „Portal" aus dem
   Deep-Water-Mockup: ein noch dunkles Aquarium, das darauf wartet, dass
   etwas hineinschwimmt. Markup unverändert (h2, .lead, button.primary),
   die Optik kommt komplett aus dieser Regel. */
.first-tank {
  position: relative; text-align: center; margin-top: var(--space-4);
  padding: var(--space-6) var(--space-4) var(--space-5);
  border: 1px solid rgba(255, 143, 94, 0.28);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(90% 70% at 50% 0, rgba(255,143,94,0.14), transparent 65%),
    radial-gradient(120% 100% at 50% 120%, rgba(105,230,214,0.10), transparent 60%),
    rgba(9, 20, 28, 0.6);
  box-shadow: 0 0 60px -10px var(--glow-halo), inset 0 0 60px rgba(105,230,214,0.06);
}
.first-tank::before {
  content: ""; display: block; width: 132px; height: 92px; margin: 0 auto var(--space-3);
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='92' fill='none'%3E%3Cpath d='M16 50C30 18 78 12 104 32c8-8 16-10 20-8-4 8-4 18 0 26 4 6 0 16-8 20-18 16-52 24-84 20C22 106 8 90 8 90' stroke='%23ff8f5e' stroke-width='3' stroke-linejoin='round' stroke-dasharray='7 7' opacity='.75'/%3E%3Ccircle cx='34' cy='42' r='5' fill='%23ff8f5e' opacity='.75'/%3E%3Cpath d='M60 20c8 22 8 60-2 74' stroke='%2369e6d6' stroke-width='4' stroke-linecap='round' stroke-dasharray='6 7' opacity='.65'/%3E%3C/svg%3E");
}
.first-tank h2 { font-size: 1.7rem; margin: 0 0 10px; }
.first-tank p.lead { max-width: 34ch; margin: 0 auto var(--space-4); color: var(--ink-soft); font-size: 1rem; }
.first-tank p.lead b { color: var(--ink); font-weight: 600; }
.first-tank .primary { background: var(--marker); color: #1c0d06; border-color: transparent; font-weight: 650; box-shadow: 0 0 0 0 var(--glow-halo); }
.first-tank .primary:hover { transform: translateY(-1px); box-shadow: 0 0 44px 2px var(--glow-halo); }
#dashLater { margin: var(--space-4) 0 0; font-size: 13px; color: var(--ink-soft); }

/* Vorschau-Bild in Kacheln (Nachtrag 44). */
.tile-icon, .tile-shot { position: relative; width: 100%; }
.tile-icon { padding-top: 4px; }
.tile-icon .fish-icon { height: 56px; }
.tile-shot {
  aspect-ratio: 16 / 10; border-radius: calc(var(--radius-md) - 4px);
  overflow: hidden; background: var(--stage);
}
.tile-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile-icon.locked .fish-icon,
.tile-shot.locked img { filter: grayscale(90%); opacity: .4; }
.lock-badge { position: absolute; top: 2px; right: 2px; font-size: 13px; line-height: 1; }

/* Bündel-Hero (Nachtrag 45). */
.species-hero {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: var(--space-3); margin-bottom: var(--space-2);
}
.species-hero-dots { display: flex; flex: none; }
.species-hero-dot {
  width: 44px; height: 44px; border-radius: 50%; flex: none; margin-left: -14px;
  background: var(--stage); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.species-hero-dot:first-child { margin-left: 0; }
.species-hero-dot .fish-icon { width: 70%; height: 70%; }
.species-hero-copy { flex: 1 1 260px; min-width: 0; }
.species-hero-copy .kicker { margin-bottom: 2px; }
.species-hero-copy h3 {
  font-family: var(--display); font-weight: 500; font-size: 1.25rem; color: var(--ink);
  margin: 2px 0 4px;
}
.species-hero-copy p { font-size: 13px; color: var(--ink-soft); margin: 0; }
.species-hero-copy p del { opacity: .6; margin-right: 4px; }
.species-hero-cta { background: var(--marker); color: #1c0d06; border-color: transparent; font-weight: 650; flex: none; }
.species-hero-cta:hover { transform: translateY(-1px); box-shadow: 0 0 34px 1px var(--glow-halo); }
.species-subtag { font-size: 12.5px; color: var(--ink-soft); margin: 0 0 var(--space-2); }

/* Kurzhinweis unten mittig (Nachtrag 48). */
.pt-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 8px);
  background: #0d1e29; color: var(--ink); border: 1px solid var(--border);
  padding: 10px 18px; border-radius: 999px;
  font-size: 13.5px; opacity: 0; pointer-events: none; z-index: 50;
  max-width: calc(100vw - 32px); text-align: center;
  transition: opacity .2s ease, transform .2s ease;
}
.pt-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Fischarten-Kachel, freigeschaltet. */
.species-grid .tank.species { min-height: 190px; display: flex; flex-direction: column; justify-content: center; }
.species-grid .tank.species .tile-icon { padding: 10px 10px 0; }
.species-grid .tank.species .meta { font-variant-numeric: normal; }

.species-actions { display: flex; gap: 6px; margin-top: 8px; justify-content: center; flex-wrap: wrap; }
.species-actions button {
  font: inherit; font-size: 11.5px; font-weight: 600; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: rgba(255,255,255,0.04); color: var(--ink); cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.species-actions button:hover { border-color: var(--tide); color: var(--tide); }
.species-actions button.primary { background: var(--tide); border-color: var(--tide); color: #05201d; }
.species-actions button.primary:hover { background: var(--tide-soft); border-color: var(--tide-soft); color: #05201d; }

/* Gesperrte Kachel — Preis sichtbar per Default, Hover-Schein darüber. */
.species-grid .newtank.locked { position: relative; overflow: hidden; }
.species-grid .newtank.locked .tile-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(4,10,16,0); opacity: 0; pointer-events: none;
  transition: opacity .2s ease, background .2s ease;
}
.species-grid .newtank.locked .tile-overlay span {
  background: var(--marker); color: #1c0d06; font-weight: 700; font-size: 12px;
  padding: 7px 14px; border-radius: 999px; transform: translateY(4px);
  transition: transform .2s ease; box-shadow: 0 8px 20px -8px var(--glow-halo);
  white-space: nowrap;
}
.species-grid .newtank.locked:hover,
.species-grid .newtank.locked:focus-visible {
  border-color: var(--marker); box-shadow: 0 0 24px -8px var(--glow-halo);
}
.species-grid .newtank.locked:hover .tile-overlay,
.species-grid .newtank.locked:focus-visible .tile-overlay {
  opacity: 1; background: rgba(4,10,16,.82);
}
.species-grid .newtank.locked:hover .tile-overlay span,
.species-grid .newtank.locked:focus-visible .tile-overlay span { transform: translateY(0); }
.species-grid .newtank.locked:hover .tile-icon,
.species-grid .newtank.locked:focus-visible .tile-icon { opacity: .18; }
.species-grid .newtank.locked:hover > span,
.species-grid .newtank.locked:focus-visible > span { opacity: .35; }

@media (hover: none) {
  .species-grid .newtank.locked .tile-overlay { display: none; }
  .species-grid .newtank.locked > span:last-of-type {
    display: inline-block; margin-top: 4px;
    background: var(--marker); color: #1c0d06; font-weight: 700; font-size: 11.5px;
    padding: 4px 11px; border-radius: 999px;
  }
}

/* ── Startseite: Deep-Water-Hero ───────────────────────────────────────── */
/* Vollflächiger abgedunkelter Unterwasser-Hintergrund hinter der Hero-Zone.
   Als fixe body-Ebenen (nicht #landing-relativ) — so sitzt er auch hinter
   dem Kopf (.head), bleibt beim Scrollen stehen und wird vom Verlauf nach
   ~600px sauber ausgeblendet. thumbs/reef.jpg statt des 2,4-MB-Originals:
   bei brightness(.3) sieht man den Unterschied nicht. */
body.on-landing::before {
  content: ""; position: fixed; top: 0; left: 0; right: 0; height: 620px; z-index: 0;
  background: no-repeat center top / cover url(/assets/backgrounds/thumbs/reef.jpg);
  filter: saturate(.7) brightness(.3) contrast(1.05);
  pointer-events: none;
}
body.on-landing::after {
  content: ""; position: fixed; top: 0; left: 0; right: 0; height: 620px; z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(50% 44% at 72% 42%, rgba(255,143,94,0.16), transparent 70%),
    linear-gradient(180deg, rgba(4,10,16,0.55) 0%, transparent 24%, var(--wash) 95%);
}
body.on-landing .wrap { position: relative; z-index: 1; }
#landing { position: relative; }

.hero-lede { padding: var(--space-6) 0 var(--space-5); display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--space-4); align-items: center; }
.hero-copy h1 {
  margin: var(--space-2) 0 0; font-family: var(--display); font-weight: 300;
  font-size: clamp(2.4rem, 5.4vw, 4.4rem); line-height: 1.04; letter-spacing: -.015em;
  color: var(--ink);
}
.hero-copy h1 .lit { color: var(--marker); font-style: italic; }
.hero-copy .lead { margin: var(--space-3) 0 var(--space-4); }
.hero-copy .cta { margin-top: var(--space-3); }
/* Der Hero zeigt jetzt die Erklär-Schleife statt des statischen Fischs.
   Drift und Glow sind mit ins Video gewandert: der frühere drop-shadow() hätte
   hier einen RECHTECKIGEN Schein erzeugt, weil das Video eine undurchsichtige
   Fläche ist und keine freigestellte Silhouette. Deshalb box-shadow, der dem
   Eckenradius folgt — derselbe Halo-Ton wie am Portal (--glow-halo). */
.hero-fish {
  border-radius: var(--radius-lg);
  box-shadow: 0 0 80px var(--glow-halo);
}
.hero-fish video {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius-lg);
}

.cta { display: flex; gap: var(--space-3); flex-wrap: wrap; }

.foot { margin: var(--space-6) 0 0; font-size: 12.5px; color: var(--ink-soft); }
.foot a { color: var(--ink-soft); text-decoration: underline; text-decoration-color: var(--border); }

/* Sprachumschalter. */
.langpick { display: flex; gap: 6px; }
.langpick button {
  min-height: 32px; padding: 4px 10px; font-size: 12px;
  border-radius: 9px; color: var(--ink-soft); border-color: var(--border); background: transparent;
}
.langpick button[aria-pressed="true"] { color: var(--ink); border-color: var(--marker); background: rgba(255,143,94,0.1); }

/* „So funktioniert's", Vitrinen, FAQ: dunkle Bänder mit feinem Glow-Saum
   an der Oberkante (statt weisser Karten). Markup unverändert. */
#landing .paper-section {
  position: relative;
  isolation: isolate;
  background: linear-gradient(180deg, var(--wash-deep), var(--wash));
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-top: var(--space-5);
}
#landing .paper-section::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 96px; z-index: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: radial-gradient(ellipse 60% 100% at 50% 0%, rgba(255,143,94,0.12), transparent 70%);
  pointer-events: none;
}
#landing .paper-section > * { position: relative; z-index: 1; }
.paper-section.tight { padding: var(--space-5) var(--space-4); }

.section-head { max-width: 60ch; margin-bottom: var(--space-5); }
.kicker { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); font-weight: 650; }
.kicker::before {
  content: ""; display: inline-block; width: 14px; height: 2px;
  background: var(--marker); border-radius: 2px; margin-right: 8px; vertical-align: middle;
}
.section-head h2 {
  font-family: var(--display); font-weight: 400; color: var(--ink);
  font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin: 10px 0 0; letter-spacing: -.01em;
}
.section-head p { margin-top: var(--space-2); color: var(--ink-soft); font-size: 1rem; max-width: 52ch; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.step { border-top: 1px solid var(--border); padding-top: var(--space-3); }
.step .n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; margin-bottom: var(--space-2);
  font-family: var(--display); font-size: 0.9rem; font-weight: 500; color: var(--marker);
  background: radial-gradient(circle, rgba(255,143,94,0.18), transparent 72%);
  border: 1px solid rgba(255,143,94,0.35);
}
.step h3 { margin: var(--space-2) 0 0; font-family: var(--display); font-weight: 400; font-size: 1.15rem; color: var(--ink); }
.step p { margin-top: 6px; color: var(--ink-soft); font-size: 0.9rem; }

.trust-strip {
  margin-top: var(--space-4); display: flex; gap: var(--space-4); flex-wrap: wrap;
  padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.03);
}
.trust-item { flex: 1 1 0; min-width: 200px; }
.trust-item .label { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tide); font-weight: 650; }
.trust-item .value {
  font-family: var(--display); font-weight: 400; font-size: 1.2rem; margin-top: 6px;
  color: var(--ink); font-variant-numeric: tabular-nums; min-height: 1.3em;
}
.trust-item .sub { font-size: 0.82rem; color: var(--ink-soft); margin-top: 4px; }

/* ── Fisch-Vitrine ────────────────────────────────────────────────────── */
.fish-grid {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.fish-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: var(--space-2) var(--space-1);
  border-radius: var(--radius-md);
  transition: background .2s ease;
}
.fish-card:hover { background: rgba(255, 255, 255, 0.04); }
.fish-icon { width: 100%; height: 82px; }
/* Umriss glüht leicht — er ist die Zeichnung, die gleich lebendig wird. */
.fish-icon .body {
  fill: var(--marker); fill-opacity: .1;
  stroke: var(--marker); stroke-width: 3; stroke-linejoin: round;
  transition: stroke .2s ease, fill-opacity .2s ease;
}
.fish-card .fish-icon { filter: drop-shadow(0 0 12px rgba(255,143,94,0.3)); }
.fish-icon .crease { fill: none; stroke: rgba(255,176,131,0.5); stroke-width: 1.2; stroke-dasharray: 3 2.4; stroke-linecap: round; }
.fish-card:hover .fish-icon .body { stroke: var(--tide); fill-opacity: .18; }
.fish-card .fish-name { font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); text-align: center; }

/* Hai: zeigt standardmässig nach rechts, alle anderen Arten nach links —
   spiegeln, damit alle in die gleiche Richtung schwimmen. */
svg[viewBox="38.7 50.9 219.5 100.0"] { transform: scaleX(-1); }

/* ── Welten-Vitrine — horizontale Filmstrip-Optik ─────────────────────── */
.bg-grid {
  display: flex; gap: var(--space-2); overflow-x: auto; padding-bottom: 6px;
  scrollbar-width: none;
}
.bg-grid::-webkit-scrollbar { display: none; }
.bg-card {
  position: relative; flex: 0 0 clamp(240px, 32%, 320px);
  border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border);
}
.bg-card .shot { aspect-ratio: 16 / 10; background: var(--stage); }
.bg-card .shot img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(.82); }
.bg-card .shot::after {
  content: ""; position: absolute; inset: 0;
  box-shadow: inset 0 -46px 34px -20px rgba(4,10,16,0.85), inset 0 0 52px rgba(105,230,214,0.1);
}
.bg-card .bg-name {
  position: absolute; left: 12px; bottom: 10px; z-index: 2;
  font-size: 0.85rem; font-weight: 600; color: #fff; text-shadow: 0 2px 12px #000;
}

.more-note {
  margin-top: var(--space-4); color: var(--ink-soft); font-size: 13.5px;
  display: flex; align-items: center; gap: 8px;
}
.more-note::before {
  content: ""; display: inline-block; width: 14px; height: 2px;
  background: var(--border); border-radius: 2px;
}

/* FAQ — native <details>/<summary>. */
.faq { display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary {
  cursor: pointer; list-style: none; padding: var(--space-3) 0;
  font-family: var(--display); font-weight: 400; font-size: 1.1rem; color: var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; font-family: var(--body-font); font-size: 1.3rem; color: var(--marker);
  flex: none; transition: transform .2s ease;
}
.faq-item[open] summary::after { content: "\2013"; }
.faq-item p { margin: 0; padding: 0 0 var(--space-3); color: var(--ink-soft); font-size: 0.92rem; min-height: 1.3em; }

@media (max-width: 860px) {
  .hero-lede { grid-template-columns: 1fr; }
  .hero-fish { max-width: 340px; margin: 0 auto; }
}
@media (max-width: 760px) {
  .steps { grid-template-columns: 1fr; }
  .trust-strip { flex-direction: column; gap: var(--space-3); }
}
@media (max-width: 560px) {
  .wrap { padding: var(--space-4) 16px var(--space-5); }
  .head h1 { font-size: 1.2rem; }
  .paper-section.tight { padding: var(--space-4) var(--space-3); }
  /* Auf dem Telefon stehen die beiden Knöpfe mittig unter dem Text: im
     Hochformat liegt der Daumen/Blick in der Mitte, und die kurze Reihe wirkt
     linksbündig gegen den Rand verrutscht. Nur hier zentriert — auf dem
     Desktop bleibt die Reihe an der Kante von Schlagzeile und Lauftext
     ausgerichtet, sonst kippt die ganze linke Spalte optisch. */
  .hero-copy .cta { justify-content: center; }
  /* Der Dreiklang muss einzeilig bleiben — umgebrochen liest sich die
     Sperrung wie zwei Zeilen Fliesstext statt wie eine Marke. Bei 320 px
     (iPhone SE) passt er nur mit kleinerer Laufweite. */
  body.on-landing .brand-tag { font-size: 0.63rem; letter-spacing: 0.1em; }
}

/* ── Druckseite: der Rahmen darf nicht dunkel drucken ─────────────────── */
@media print {
  body { background: #fff !important; color: #111 !important; }
  .card, .paper-section, .step, .trust-strip { background: #fff !important; border-color: #ccc !important; }
  h1, h2, h3, .section-head h2, .tank h3 { color: #111 !important; }
  p, .lead, .hint, .step p, .section-head p { color: #333 !important; }
  #landing::before, #landing::after { display: none !important; }
}