/* ============================================================
   rauhnächte.eu · Design v3 „Nordlicht"
   Nach dem Original-Buchcover: Polarlicht-Nachthimmel, Sterne,
   Tannen-Silhouetten, ultrafette weiße Condensed-Typografie.
   Schriften lokal gehostet (DSGVO).
   ============================================================ */

@import url("../fonts/fonts.css");

:root {
  /* Nachthimmel */
  --nacht-950: #050d14;
  --nacht-900: #081420;
  --nacht-800: #0b1f2b;
  --nacht-700: #0e2f33;
  --tanne: #04100e;

  /* Polarlicht */
  --polar-700: #14544a;
  --polar-600: #1a7a5e;
  --polar-500: #2fbf8f;
  --polar-300: #5fe0a8;
  --polar-200: #9ff0c8;
  --gelb-200: #eaf7b0;

  /* Text */
  --eis: #eef8f4;
  --eis-80: rgba(238, 248, 244, 0.8);
  --eis-60: rgba(238, 248, 244, 0.6);
  --eis-40: rgba(238, 248, 244, 0.4);

  --linie: rgba(95, 224, 168, 0.22);
  --linie-stark: rgba(159, 240, 200, 0.5);

  --fehler: #f0a08c;
  --erfolg: #a9e6b8;

  /* Typografie */
  --display: "Anton", "Arial Narrow", sans-serif;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Jost", "Segoe UI", system-ui, sans-serif;

  --rand: clamp(1.1rem, 4vw, 2rem);
  --sektion: clamp(4.5rem, 9vw, 7.5rem);

  --schatten: 0 22px 55px rgba(2, 8, 12, 0.55);
  --schatten-tief: 0 36px 90px rgba(2, 8, 12, 0.7);

  --tabbar-hoehe: 62px;
}

/* ---------- Basis ---------- */

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

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

body {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1rem;
  color: var(--eis);
  background: var(--nacht-950);
  line-height: 1.75;
  letter-spacing: 0.014em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--polar-300); color: var(--nacht-950); }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--nacht-950); }
::-webkit-scrollbar-thumb { background: var(--nacht-700); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--polar-700); }

:focus-visible { outline: 2px solid var(--polar-300); outline-offset: 3px; }

img, svg, canvas { max-width: 100%; }

.icon {
  width: 1.3rem;
  height: 1.3rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
  display: inline-block;
  vertical-align: middle;
}

.versteckt { display: none !important; }

/* ============================================================
   HIMMEL: Aurora + Sterne + Tannen
   ============================================================ */

.himmel {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -3;
  background:
    radial-gradient(130% 80% at 50% 110%, rgba(20, 84, 74, 0.55), rgba(20, 84, 74, 0) 55%),
    linear-gradient(180deg, #050d14 0%, #081420 34%, #0b2430 62%, #0e3a38 86%, #12483e 100%);
  overflow: hidden;
}

.aurora {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  overflow: hidden;
  filter: blur(46px);
  -webkit-filter: blur(46px);
  opacity: 0.85;
}

.aurora i {
  content: "";
  position: absolute;
  display: block;
  border-radius: 50%;
  mix-blend-mode: screen;
  will-change: transform;
}

.aurora i:nth-child(1) {
  width: 90vw; height: 46vh;
  left: -12vw; top: 6vh;
  background: linear-gradient(100deg, rgba(31, 143, 111, 0) 10%, rgba(47, 191, 143, 0.42) 45%, rgba(31, 143, 143, 0) 85%);
  transform: rotate(-14deg);
  animation: auroraTanz1 17s ease-in-out infinite alternate;
}
.aurora i:nth-child(2) {
  width: 80vw; height: 40vh;
  right: -18vw; top: 16vh;
  background: linear-gradient(80deg, rgba(95, 224, 168, 0) 12%, rgba(95, 224, 168, 0.3) 50%, rgba(234, 247, 176, 0) 88%);
  transform: rotate(10deg);
  animation: auroraTanz2 23s ease-in-out infinite alternate;
}
.aurora i:nth-child(3) {
  width: 70vw; height: 34vh;
  left: 8vw; top: 34vh;
  background: linear-gradient(120deg, rgba(234, 247, 176, 0) 15%, rgba(214, 240, 170, 0.2) 50%, rgba(63, 194, 176, 0) 85%);
  transform: rotate(-6deg);
  animation: auroraTanz3 29s ease-in-out infinite alternate;
}

@keyframes auroraTanz1 {
  from { transform: rotate(-14deg) translateX(-4vw) scaleY(1); }
  to   { transform: rotate(-9deg) translateX(5vw) scaleY(1.25); }
}
@keyframes auroraTanz2 {
  from { transform: rotate(10deg) translateY(0) scaleX(1); }
  to   { transform: rotate(4deg) translateY(-5vh) scaleX(1.18); }
}
@keyframes auroraTanz3 {
  from { transform: rotate(-6deg) translateX(0); opacity: 0.6; }
  to   { transform: rotate(-12deg) translateX(6vw); opacity: 1; }
}

#sterne {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  pointer-events: none;
}

/* Tannen-Silhouetten (wie am Buchcover) */

.tannen {
  position: relative;
  height: clamp(90px, 16vw, 190px);
  margin-top: -1px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 190' preserveAspectRatio='none'%3E%3Cpath fill='%2304100e' d='M0 190 L0 150 L28 150 L28 122 L18 128 L40 88 L30 94 L52 56 L74 94 L64 88 L86 128 L76 122 L76 150 L118 150 L118 108 L104 116 L134 62 L122 70 L152 14 L182 70 L170 62 L200 116 L186 108 L186 150 L232 150 L232 128 L222 133 L242 98 L234 103 L254 68 L274 103 L266 98 L286 133 L276 128 L276 150 L324 150 L324 96 L308 105 L342 44 L330 52 L364 -8 L398 52 L386 44 L420 105 L404 96 L404 150 L448 150 L448 126 L438 131 L458 96 L450 101 L470 66 L490 101 L482 96 L502 131 L492 126 L492 150 L540 150 L540 104 L525 112 L556 56 L545 63 L576 8 L607 63 L596 56 L627 112 L612 104 L612 150 L658 150 L658 130 L649 135 L667 102 L660 106 L678 73 L696 106 L689 102 L707 135 L698 130 L698 150 L742 150 L742 100 L727 108 L758 52 L747 59 L778 4 L809 59 L798 52 L829 108 L814 100 L814 150 L862 150 L862 126 L852 131 L872 96 L864 101 L884 66 L904 101 L896 96 L916 131 L906 126 L906 150 L952 150 L952 110 L938 118 L968 64 L956 72 L986 16 L1016 72 L1004 64 L1034 118 L1020 110 L1020 150 L1066 150 L1066 130 L1057 135 L1075 102 L1068 106 L1086 73 L1104 106 L1097 102 L1115 135 L1106 130 L1106 150 L1146 150 L1146 122 L1136 128 L1158 88 L1148 94 L1170 56 L1192 94 L1182 88 L1200 122 L1200 190 Z'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}

.tannen.gespiegelt { transform: scaleX(-1); }

/* ============================================================
   Typo-Bausteine
   ============================================================ */

.display {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.035em;
  line-height: 1.02;
  color: #ffffff;
}

.script { font-family: var(--script, var(--serif)); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--polar-300);
}
.eyebrow::before { content: ""; width: 34px; height: 1px; background: linear-gradient(90deg, rgba(95,224,168,0), var(--polar-300)); }
.eyebrow.mittig::after { content: ""; width: 34px; height: 1px; background: linear-gradient(90deg, var(--polar-300), rgba(95,224,168,0)); }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.08; color: #fff; }

h3 { letter-spacing: 0.05em; }

.sektions-kopf { text-align: center; max-width: 740px; margin: 0 auto clamp(2.6rem, 6vw, 4.2rem); }
.sektions-kopf .eyebrow { justify-content: center; margin-bottom: 1.2rem; }
.sektions-kopf h2 { font-size: clamp(1.9rem, 4.8vw, 3.1rem); }
.sektions-kopf h2 em { font-style: normal; color: var(--polar-300); text-shadow: 0 0 26px rgba(95, 224, 168, 0.45); }
.sektions-kopf .intro { margin-top: 1.25rem; color: var(--eis-80); font-size: 1.04rem; }

.zier { display: flex; align-items: center; justify-content: center; gap: 0.9rem; margin-top: 1.5rem; color: var(--polar-300); }
.zier::before, .zier::after { content: ""; width: 64px; height: 1px; }
.zier::before { background: linear-gradient(90deg, rgba(95,224,168,0), var(--polar-300)); }
.zier::after { background: linear-gradient(90deg, var(--polar-300), rgba(95,224,168,0)); }
.zier .icon { width: 0.9rem; height: 0.9rem; }

/* ---------- Layout ---------- */

.container { width: min(1180px, calc(100% - 2 * var(--rand))); margin-left: auto; margin-right: auto; }

section { padding-top: var(--sektion); padding-bottom: var(--sektion); position: relative; }

.band { background: linear-gradient(180deg, rgba(8, 20, 32, 0) 0%, rgba(6, 16, 26, 0.55) 15%, rgba(6, 16, 26, 0.55) 85%, rgba(8, 20, 32, 0) 100%); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 0.95rem 2.1rem;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid var(--linie-stark);
  background: transparent;
  color: var(--eis);
  border-radius: 3px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.btn .icon { width: 1rem; height: 1rem; }

.btn-polar {
  background: linear-gradient(130deg, var(--polar-200), var(--polar-500) 60%, var(--polar-600));
  color: #03231a;
  border-color: transparent;
  box-shadow: 0 10px 30px rgba(47, 191, 143, 0.3);
}
.btn-polar:hover { transform: translateY(-2px); box-shadow: 0 16px 42px rgba(47, 191, 143, 0.45); }

.btn-ghost:hover { background: rgba(95, 224, 168, 0.12); transform: translateY(-2px); }

.btn-still { border-color: transparent; color: var(--eis-60); letter-spacing: 0.2em; padding: 0.6rem 1rem; }
.btn-still:hover { color: var(--polar-200); }

.btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none !important; }

/* ---------- Navigation (oben) ---------- */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding-top: calc(1rem + env(safe-area-inset-top, 0px));
  padding-bottom: 1rem;
  transition: background 0.4s ease, padding 0.4s ease;
  border-bottom: 1px solid transparent;
}

.nav::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: -1;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.nav.fest { background: rgba(5, 13, 20, 0.88); padding-bottom: 0.7rem; border-bottom-color: var(--linie); }
.nav.fest { padding-top: calc(0.7rem + env(safe-area-inset-top, 0px)); }
.nav.fest::before { opacity: 1; }

.nav-innen { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.marke { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.marke .marke-wort {
  font-family: var(--display);
  font-size: 1.15rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1;
}
.marke .marke-stern { color: var(--polar-300); display: inline-flex; }
.marke .marke-stern .icon { width: 1.05rem; height: 1.05rem; }

.nav-links { display: flex; align-items: center; gap: 1.9rem; list-style: none; }

.nav-links a {
  position: relative;
  color: var(--eis-80);
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
  transition: color 0.3s;
}
.nav-links a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--polar-300);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s ease;
}
.nav-links a:not(.btn):hover { color: var(--polar-200); }
.nav-links a:not(.btn):hover::after { transform: scaleX(1); transform-origin: left; }

.nav-links .btn { padding: 0.55rem 1.4rem; font-size: 0.72rem; }

.burger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 38px; height: 30px;
  position: relative;
  z-index: 130;
  padding: 4px;
}
.burger span { display: block; height: 2px; background: #fff; margin-top: 6px; margin-bottom: 6px; transition: transform 0.35s ease, opacity 0.3s ease; border-radius: 2px; }
.burger.offen span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger.offen span:nth-child(2) { opacity: 0; }
.burger.offen span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ============================================================
   HERO mit 3D-Flipbook
   ============================================================ */

.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: clamp(6.5rem, 13vh, 9rem);
  padding-bottom: clamp(2rem, 6vh, 4rem);
  overflow: hidden;
  position: relative;
}

.hero-gitter {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.hero .eyebrow { margin-bottom: 1.5rem; }

.hero-ober {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(0.8rem, 1.8vw, 1rem);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--eis);
  margin-bottom: 0.4rem;
}

.hero h1 {
  font-family: var(--display);
  font-size: clamp(3.4rem, 11vw, 7.2rem);
  line-height: 0.98;
  letter-spacing: 0.02em;
  color: #ffffff;
  text-shadow: 0 0 44px rgba(95, 224, 168, 0.3), 0 4px 30px rgba(0, 0, 0, 0.5);
}

.hero h1 .zeile2 { display: block; }

.hero-text { margin-top: 1.7rem; max-width: 540px; color: var(--eis-80); font-size: 1.06rem; }

.hero-fakten { margin-top: 2.4rem; display: flex; flex-wrap: wrap; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.fakt { flex: 1 1 150px; padding: 1rem 1.4rem 1rem 0; margin-right: 1.4rem; border-right: 1px solid var(--linie); }
.fakt:last-child { border-right: none; margin-right: 0; }
.fakt strong { display: block; font-family: var(--display); font-size: 1.5rem; letter-spacing: 0.05em; color: var(--polar-200); line-height: 1.25; font-weight: 400; }
.fakt span { font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--eis-60); }

.hero-aktionen { margin-top: 2.5rem; display: flex; gap: 1rem; flex-wrap: wrap; }

/* ---------- Flipbook ---------- */

.flipbook-buehne {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  perspective: 1800px;
  -webkit-perspective: 1800px;
}

.flipbook {
  position: relative;
  width: min(300px, 66vw);
  aspect-ratio: 5 / 7.3;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform: rotateX(4deg) rotateY(-14deg);
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  cursor: pointer;
  animation: buchSchweben 8s ease-in-out infinite;
}
.flipbook.offen { transform: rotateX(2deg) rotateY(0deg) translateX(25%); }

@keyframes buchSchweben {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -12px; }
}

.flipbook .blatt {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform-origin: left center;
  transition: transform 1s cubic-bezier(0.4, 0.05, 0.3, 1), z-index 0s 0.4s;
  will-change: transform;
}

.flipbook .blatt.umgeblaettert { transform: rotateY(-178deg); }

.blatt-seite {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  border-radius: 2px 6px 6px 2px;
  box-shadow: 0 18px 50px rgba(2, 8, 12, 0.55);
}
.blatt-seite.hinten { transform: rotateY(180deg); border-radius: 6px 2px 2px 6px; }

/* Cover-Design = Buchcover-Nachbau */
.cover-design {
  position: relative;
  width: 100%; height: 100%;
  background:
    radial-gradient(120% 60% at 50% 108%, rgba(29, 122, 94, 0.75), rgba(29, 122, 94, 0) 60%),
    linear-gradient(180deg, #081420 0%, #0c2b33 42%, #14544a 78%, #1d7a5e 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.6rem 1.1rem;
  border: 1px solid rgba(159, 240, 200, 0.25);
}

.cover-design .sternchen { position: absolute; border-radius: 50%; background: #fff; opacity: 0.9; }

.cover-design .c-ober {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.58rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: #fff;
  margin-top: 0.9rem;
}
.cover-design .c-titel {
  font-family: var(--display);
  font-size: 2.6rem;
  line-height: 0.95;
  letter-spacing: 0.04em;
  color: #fff;
  text-transform: uppercase;
  margin-top: 0.4rem;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}
.cover-design .c-autorin {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #fff;
  margin-top: 0.7rem;
}

.cover-design .c-tannen {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 38%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 120' preserveAspectRatio='none'%3E%3Cpath fill='%2304100e' d='M0 120 L0 84 L14 84 L14 62 L7 66 L20 40 L14 44 L28 20 L42 44 L36 40 L49 66 L42 62 L42 84 L70 84 L70 50 L60 56 L80 18 L72 23 L92 -12 L112 23 L104 18 L124 56 L114 50 L114 84 L142 84 L142 66 L136 69 L148 46 L143 49 L155 27 L167 49 L162 46 L174 69 L168 66 L168 84 L196 84 L196 56 L187 61 L205 28 L198 32 L216 0 L234 32 L227 28 L245 61 L236 56 L236 84 L262 84 L262 70 L257 73 L267 54 L263 56 L273 38 L283 56 L279 54 L289 73 L284 70 L284 84 L300 84 L300 120 Z'/%3E%3C/svg%3E");
  background-size: 100% 100%;
}

/* Innenseiten */
.innenseite {
  width: 100%; height: 100%;
  background: linear-gradient(160deg, #f2ecdc 0%, #e6ddc6 100%);
  color: #232a26;
  padding: 1.5rem 1.3rem;
  display: flex;
  flex-direction: column;
  font-family: var(--serif);
}
.innenseite .i-ueber {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.56rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #6b7a6e;
  margin-bottom: 0.7rem;
}
.innenseite h4 {
  font-family: var(--display);
  font-size: 1.06rem;
  letter-spacing: 0.05em;
  color: #1c332b;
  margin-bottom: 0.6rem;
  line-height: 1.15;
}
.innenseite p { font-size: 0.86rem; line-height: 1.55; font-style: italic; color: #3d4a42; }
.innenseite ul { list-style: none; margin-top: 0.5rem; }
.innenseite li { font-size: 0.8rem; line-height: 1.5; font-style: italic; color: #3d4a42; padding-left: 1rem; position: relative; margin-bottom: 0.25rem; }
.innenseite li::before { content: "✦"; position: absolute; left: 0; color: #1a7a5e; font-style: normal; font-size: 0.65rem; top: 0.2em; }
.innenseite .i-fuss { margin-top: auto; text-align: center; font-family: var(--sans); font-size: 0.56rem; letter-spacing: 0.24em; text-transform: uppercase; color: #8a9389; }

.blatt-seite.rueckdeckel {
  background: linear-gradient(200deg, #0c2b33 0%, #081420 100%);
  border: 1px solid rgba(159, 240, 200, 0.2);
}

.flipbook-hinweis {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--eis-60);
  animation: pulsieren 2.6s ease-in-out infinite;
}
.flipbook-hinweis .icon { width: 1rem; height: 1rem; color: var(--polar-300); }

@keyframes pulsieren {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

/* ---------- Zitat ---------- */

.zitat { text-align: center; padding-top: clamp(3rem, 7vw, 5rem); padding-bottom: clamp(3rem, 7vw, 5rem); }
.zitat blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.45rem, 3.1vw, 2.15rem);
  color: var(--eis);
  max-width: 800px;
  margin-left: auto; margin-right: auto;
  line-height: 1.4;
}
.zitat blockquote::before {
  content: "\201E";
  display: block;
  font-size: 4.4rem;
  line-height: 0.4;
  font-style: normal;
  color: var(--polar-300);
  margin-bottom: 1.5rem;
}
.zitat cite { display: block; margin-top: 1.5rem; font-family: var(--sans); font-style: normal; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; color: var(--polar-300); }

/* ---------- Karten ---------- */

.karte {
  position: relative;
  background: linear-gradient(165deg, rgba(14, 47, 51, 0.55), rgba(6, 15, 22, 0.85));
  border: 1px solid var(--linie);
  border-radius: 6px;
  padding: 2rem 1.8rem;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.45s ease, box-shadow 0.45s ease;
}

.karte::after {
  content: "";
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg, rgba(95,224,168,0), var(--polar-300), rgba(95,224,168,0));
  opacity: 0;
  transition: opacity 0.45s ease;
}

.karte:hover, .karte:focus-within {
  transform: translateY(-7px);
  border-color: var(--linie-stark);
  box-shadow: var(--schatten), 0 0 40px rgba(47, 191, 143, 0.12);
}
.karte:hover::after { opacity: 1; }

.icon-kreis {
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid var(--polar-600);
  border-radius: 50%;
  color: var(--polar-200);
  background: rgba(47, 191, 143, 0.08);
  margin-bottom: 1.15rem;
}
.icon-kreis .icon { width: 1.4rem; height: 1.4rem; }

.drei-spalten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.drei-spalten h3 { font-size: 1.05rem; color: var(--polar-200); margin-bottom: 0.6rem; }
.drei-spalten p { color: var(--eis-80); font-size: 0.97rem; }

/* ---------- Die 12 Nächte ---------- */

.naechte-gitter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.3rem; }

.nacht-karte { display: block; text-decoration: none; color: inherit; cursor: pointer; }

.nacht-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.95rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--linie);
}
.nacht-nr { font-family: var(--display); font-size: 2.3rem; color: var(--polar-300); line-height: 0.95; text-shadow: 0 0 18px rgba(95, 224, 168, 0.35); }
.nacht-datum { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--eis-60); }

.nacht-monat { display: block; font-size: 0.64rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--polar-300); margin-bottom: 0.35rem; }
.nacht-karte h3 { font-size: 1rem; letter-spacing: 0.06em; color: #fff; }
.nacht-karte .kurz { margin-top: 0.65rem; font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--eis-60); line-height: 1.5; }

.nacht-mehr {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--polar-300);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.nacht-mehr .icon { width: 0.9rem; height: 0.9rem; }
.nacht-karte:hover .nacht-mehr { opacity: 1; transform: translateY(0); }

/* ---------- Wissen ---------- */

.wissen-gitter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }

.wissen-karte h3 { font-size: 1rem; letter-spacing: 0.06em; color: #fff; margin-bottom: 0.45rem; }
.wissen-karte .kurz { font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--eis-60); }
.wissen-karte .lang {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.6s ease, opacity 0.5s ease, margin 0.5s ease;
  color: var(--eis-80);
  font-size: 0.96rem;
}
.wissen-karte.offen .lang { max-height: 560px; opacity: 1; margin-top: 1rem; }

.wissen-karte .umschalter {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--polar-300);
}
.wissen-karte .umschalter .icon { width: 0.85rem; height: 0.85rem; transition: transform 0.4s ease; }
.wissen-karte.offen .umschalter .icon { transform: rotate(180deg); }

/* ---------- Autorin ---------- */

.autorin-gitter {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.autorin-rahmen {
  position: relative;
  padding-top: 125%;
  border: 1px solid var(--linie-stark);
  border-radius: 6px;
  background:
    radial-gradient(80% 55% at 50% 25%, rgba(29, 122, 94, 0.6), rgba(29, 122, 94, 0) 70%),
    linear-gradient(160deg, #0c2b33, #081420);
  overflow: hidden;
}
.autorin-rahmen .mitte {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.autorin-rahmen .display { font-size: clamp(2rem, 5vw, 3rem); letter-spacing: 0.1em; }
.autorin-rahmen figcaption { position: absolute; bottom: 1.4rem; left: 0; right: 0; text-align: center; font-size: 0.64rem; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; color: var(--eis-60); }

.autorin-inhalt h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); margin-top: 1.1rem; margin-bottom: 1.3rem; }
.autorin-inhalt p { color: var(--eis-80); margin-bottom: 1.1rem; max-width: 560px; }
.autorin-inhalt .widmung {
  margin-top: 1.5rem;
  padding-left: 1.4rem;
  border-left: 2px solid var(--polar-600);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.08rem;
  color: var(--eis-60);
}

/* ---------- CTA-Schluss ---------- */

.cta-schluss { text-align: center; }
.cta-schluss h2 { font-size: clamp(2rem, 6vw, 3.6rem); margin-bottom: 1.1rem; }
.cta-schluss h2 em { font-style: normal; color: var(--polar-300); text-shadow: 0 0 26px rgba(95, 224, 168, 0.45); }
.cta-schluss p { max-width: 520px; margin: 0 auto 2.3rem; color: var(--eis-80); }
.cta-schluss .aktionen { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ---------- Footer ---------- */

.fuss {
  position: relative;
  border-top: 1px solid var(--linie);
  padding: clamp(2.4rem, 6vw, 3.6rem) 0 1.5rem;
  background: rgba(4, 10, 14, 0.75);
}

.fuss-gitter { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.4rem; padding-bottom: 2rem; }

.fuss .marke { margin-bottom: 0.9rem; }
.fuss-claim { max-width: 320px; color: var(--eis-60); font-size: 0.92rem; }

.fuss h4 { font-family: var(--sans); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; color: var(--polar-300); margin-bottom: 1rem; }

.fuss ul { list-style: none; display: grid; gap: 0.5rem; }
.fuss ul a { color: var(--eis-80); text-decoration: none; font-size: 0.93rem; transition: color 0.3s; }
.fuss ul a:hover { color: var(--polar-200); }

.fuss-unten {
  border-top: 1px solid var(--linie);
  padding-top: 1.4rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: var(--eis-40);
}

/* ============================================================
   TAB-BAR (App-Taskleiste unten)
   ============================================================ */

.tab-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 110;
  display: none;
  background: rgba(4, 10, 14, 0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid var(--linie);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.tab-bar-innen {
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  height: var(--tabbar-hoehe);
  max-width: 560px;
  margin-left: auto; margin-right: auto;
  width: 100%;
}

.tab-bar a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-decoration: none;
  color: var(--eis-60);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}
.tab-bar a .icon { width: 1.35rem; height: 1.35rem; }
.tab-bar a.aktiv { color: var(--polar-300); }
.tab-bar a.aktiv .icon { filter: drop-shadow(0 0 8px rgba(95, 224, 168, 0.6)); }
.tab-bar a:active { color: var(--polar-200); }

@media (max-width: 860px) {
  .tab-bar { display: block; }
  body.hat-tabbar { padding-bottom: calc(var(--tabbar-hoehe) + env(safe-area-inset-bottom, 0px)); }
  body.hat-tabbar .fuss { padding-bottom: 2rem; }
}

/* Im installierten App-Modus (Homescreen) immer anzeigen */
@media (display-mode: standalone) {
  .tab-bar { display: block; }
  body.hat-tabbar { padding-bottom: calc(var(--tabbar-hoehe) + env(safe-area-inset-bottom, 0px)); }
}

/* ============================================================
   BEGLEITER (App)
   ============================================================ */

.app-haupt { padding-top: clamp(6rem, 12vh, 7.5rem); min-height: 100vh; }

.app-kopf { text-align: center; max-width: 680px; margin: 0 auto 2.4rem; }
.app-kopf .eyebrow { justify-content: center; margin-bottom: 1.1rem; }
.app-kopf h1 { font-size: clamp(2rem, 6.4vw, 3.2rem); }
.app-kopf h1 em { font-style: normal; color: var(--polar-300); text-shadow: 0 0 26px rgba(95, 224, 168, 0.45); }
.app-kopf p { margin-top: 1rem; color: var(--eis-80); }

/* --- Zugang --- */

.zugang { max-width: 440px; margin: 0 auto 4rem; }

.zugang-karte {
  position: relative;
  background: linear-gradient(168deg, rgba(14, 47, 51, 0.6), rgba(4, 10, 16, 0.92));
  border: 1px solid var(--linie-stark);
  border-radius: 10px;
  padding: 2.4rem clamp(1.4rem, 5vw, 2.4rem);
  box-shadow: var(--schatten-tief);
}

.tab-leiste {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--linie);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 1.9rem;
}
.tab-leiste button {
  padding: 0.8rem;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--eis-60);
  transition: background 0.3s, color 0.3s;
}
.tab-leiste button.aktiv {
  background: linear-gradient(130deg, var(--polar-200), var(--polar-500) 65%);
  color: #03231a;
}

.feld { margin-bottom: 1.25rem; }
.feld label { display: block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--polar-300); margin-bottom: 0.45rem; }
.feld input {
  width: 100%;
  padding: 0.85rem 1rem;
  background: rgba(4, 10, 16, 0.7);
  border: 1px solid var(--linie);
  border-radius: 5px;
  color: var(--eis);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1rem;
  transition: border-color 0.3s, box-shadow 0.3s;
  -webkit-appearance: none;
  appearance: none;
}
.feld input:focus { outline: none; border-color: var(--polar-300); box-shadow: 0 0 0 3px rgba(95, 224, 168, 0.16); }
.feld .hinweis { margin-top: 0.4rem; font-size: 0.78rem; color: var(--eis-40); }

.formular-meldung { min-height: 1.4rem; margin-bottom: 0.9rem; font-size: 0.88rem; text-align: center; }
.formular-meldung.fehler { color: var(--fehler); }
.formular-meldung.erfolg { color: var(--erfolg); }

.zugang .btn { width: 100%; }

.zugang-trenner { display: flex; align-items: center; gap: 1rem; margin: 1.7rem 0; color: var(--eis-40); font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; }
.zugang-trenner::before, .zugang-trenner::after { content: ""; flex: 1; height: 1px; background: var(--linie); }

.datenschutz-notiz { margin-top: 1.5rem; font-size: 0.78rem; color: var(--eis-40); text-align: center; line-height: 1.6; }
.datenschutz-notiz a { color: var(--polar-300); }

/* --- Demo-Band --- */

.demo-band {
  position: sticky;
  top: calc(58px + env(safe-area-inset-top, 0px));
  z-index: 90;
  background: linear-gradient(130deg, var(--polar-200), var(--polar-500) 70%);
  color: #03231a;
  padding: 0.6rem 1rem;
  text-align: center;
  font-size: 0.84rem;
  font-weight: 500;
  box-shadow: 0 10px 30px rgba(2, 8, 12, 0.4);
}
.demo-band a { color: inherit; font-weight: 700; text-decoration: underline; }

/* --- Benutzer-Leiste --- */

.benutzer-leiste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  border: 1px solid var(--linie);
  border-radius: 8px;
  background: rgba(14, 47, 51, 0.4);
  padding: 0.8rem 1.2rem;
  margin-bottom: 2.4rem;
}
.benutzer-leiste .wer { display: flex; align-items: center; gap: 0.7rem; font-size: 0.92rem; color: var(--eis-80); flex-wrap: wrap; }
.benutzer-leiste .wer .icon { color: var(--polar-300); }
.benutzer-leiste .wer strong { color: var(--polar-200); font-weight: 500; }
.benutzer-leiste .aktionen { display: flex; gap: 0.3rem; flex-wrap: wrap; }

.sync-status { font-size: 0.78rem; color: var(--eis-40); transition: color 0.3s; }
.sync-status.aktiv { color: var(--erfolg); }

/* --- Countdown --- */

.countdown { display: flex; justify-content: center; gap: 0.9rem; margin-bottom: 2.4rem; flex-wrap: wrap; }

.count-zelle {
  min-width: 92px;
  padding: 1.1rem 0.6rem 0.9rem;
  text-align: center;
  border: 1px solid var(--linie);
  border-radius: 8px;
  background: linear-gradient(170deg, rgba(14, 47, 51, 0.45), rgba(4, 10, 16, 0.75));
}
.count-zelle strong {
  display: block;
  font-family: var(--display);
  font-size: 2.2rem;
  color: var(--polar-200);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 20px rgba(95, 224, 168, 0.35);
}
.count-zelle span { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--eis-60); }

.heute-band {
  max-width: 640px;
  margin: 0 auto 2.4rem;
  text-align: center;
  border: 1px solid var(--polar-500);
  border-radius: 10px;
  background: linear-gradient(140deg, rgba(47, 191, 143, 0.16), rgba(47, 191, 143, 0.04));
  padding: 1.5rem 1.7rem;
  box-shadow: 0 0 46px rgba(47, 191, 143, 0.15);
}
.heute-band .eyebrow { justify-content: center; margin-bottom: 0.6rem; }
.heute-band strong { font-family: var(--display); font-size: 1.3rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--polar-200); }
.heute-band p { font-family: var(--serif); font-style: italic; color: var(--eis-80); margin-top: 0.4rem; }

/* --- Fortschritt --- */

.fortschritt { max-width: 640px; margin: 0 auto 3.2rem; }
.fortschritt-zeile { display: flex; justify-content: space-between; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--eis-60); margin-bottom: 0.65rem; }
.fortschritt-balken { height: 4px; border-radius: 2px; background: rgba(95, 224, 168, 0.14); position: relative; }
.fortschritt-balken .fuellung {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 0%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--polar-600), var(--polar-200));
  transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.fortschritt-balken .fuellung::after {
  content: "";
  position: absolute;
  right: -4px; top: 50%;
  transform: translateY(-50%);
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--polar-200);
  box-shadow: 0 0 14px rgba(159, 240, 200, 0.9);
}

/* --- Nächte im Begleiter --- */

.app-naechte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; margin-bottom: 4.2rem; }

.app-nacht { cursor: pointer; }

.app-nacht .status {
  position: absolute;
  top: 1.1rem; right: 1.1rem;
  width: 28px; height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--polar-600);
  border-radius: 50%;
  font-size: 0.76rem;
  color: var(--polar-200);
  background: rgba(4, 10, 16, 0.55);
  z-index: 1;
  transition: background 0.35s, color 0.35s;
}
.app-nacht .status .icon { width: 0.85rem; height: 0.85rem; }

.app-nacht.erledigt { border-color: var(--linie-stark); }
.app-nacht.erledigt .status { background: linear-gradient(140deg, var(--polar-200), var(--polar-500)); color: #03231a; border-color: transparent; }

.app-nacht.heute { border-color: var(--polar-300); box-shadow: 0 0 44px rgba(95, 224, 168, 0.2); }

.heute-etikett {
  display: inline-block;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #03231a;
  background: linear-gradient(130deg, var(--polar-200), var(--polar-300));
  padding: 0.22rem 0.7rem;
  border-radius: 3px;
  margin-bottom: 0.8rem;
}

.notiz-punkt { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 0.9rem; font-size: 0.66rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--eis-40); }
.notiz-punkt .icon { width: 0.85rem; height: 0.85rem; color: var(--polar-300); }

/* --- Modal (blättert wie eine Buchseite auf) --- */

.schleier {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 200;
  background: rgba(2, 7, 11, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: none;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: clamp(0.8rem, 3vh, 3rem) 0.9rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
  perspective: 1600px;
  -webkit-perspective: 1600px;
}
.schleier.aktiv { display: flex; }

.modal {
  width: min(780px, 100%);
  background: linear-gradient(168deg, #0e2f33, #081420 55%);
  border: 1px solid var(--polar-500);
  border-radius: 8px;
  position: relative;
  padding: clamp(2rem, 5vw, 3rem) clamp(1.2rem, 5vw, 3rem);
  transform-origin: left center;
  animation: seiteAuf 0.65s cubic-bezier(0.3, 0.9, 0.3, 1);
  box-shadow: var(--schatten-tief), 0 0 60px rgba(47, 191, 143, 0.12);
}

@keyframes seiteAuf {
  0%   { opacity: 0; transform: rotateY(-55deg) translateX(-16px); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: rotateY(0deg) translateX(0); }
}

.modal-zu {
  position: absolute;
  top: 0.8rem; right: 0.9rem;
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  background: none;
  border: none;
  color: var(--polar-200);
  cursor: pointer;
  z-index: 2;
  transition: transform 0.3s ease;
}
.modal-zu:hover { transform: rotate(90deg); }
.modal-zu .icon { width: 1.25rem; height: 1.25rem; }

.modal-nr { font-family: var(--display); font-size: 3.6rem; color: var(--polar-300); line-height: 1; text-align: center; text-shadow: 0 0 26px rgba(95, 224, 168, 0.4); }
.modal-datum { text-align: center; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--eis-60); margin: 0.5rem 0 0.6rem; }
.modal h2 { text-align: center; font-size: clamp(1.4rem, 4.6vw, 2.1rem); margin-bottom: 0.7rem; }
.modal-zitat { text-align: center; font-family: var(--serif); font-style: italic; font-size: 1.12rem; color: var(--polar-200); max-width: 500px; margin: 0 auto 2.2rem; line-height: 1.5; }

.modal .abschnitt { margin-bottom: 2rem; }
.modal .abschnitt .eyebrow { margin-bottom: 0.75rem; }
.modal .abschnitt > p { color: var(--eis-80); }

.frage { margin-bottom: 1.45rem; }
.frage label { display: block; font-family: var(--serif); font-style: italic; font-size: 1.12rem; color: var(--eis); margin-bottom: 0.5rem; }
.frage textarea {
  width: 100%;
  min-height: 86px;
  padding: 0.85rem 1rem;
  background: rgba(4, 10, 16, 0.6);
  border: 1px solid var(--linie);
  border-radius: 6px;
  color: var(--eis);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px; /* verhindert Auto-Zoom auf iOS */
  line-height: 1.6;
  resize: vertical;
  transition: border-color 0.3s, box-shadow 0.3s;
  -webkit-appearance: none;
  appearance: none;
}
.frage textarea:focus { outline: none; border-color: var(--polar-300); box-shadow: 0 0 0 3px rgba(95, 224, 168, 0.14); }
.frage textarea::placeholder { color: var(--eis-40); font-style: italic; }

.ritual-kasten {
  border: 1px solid var(--linie);
  border-left: 3px solid var(--polar-500);
  border-radius: 6px;
  background: rgba(47, 191, 143, 0.06);
  padding: 1.3rem 1.5rem;
}
.ritual-kasten p { font-family: var(--serif); font-style: italic; font-size: 1.06rem; color: var(--eis-80); line-height: 1.6; }

.modal-aktionen {
  margin-top: 2.3rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.speicher-status { font-size: 0.8rem; color: var(--erfolg); opacity: 0; transition: opacity 0.4s; display: inline-flex; gap: 0.4rem; align-items: center; }
.speicher-status.sichtbar { opacity: 1; }
.speicher-status .icon { width: 0.9rem; height: 0.9rem; }

/* --- 13 Wünsche --- */

.wuensche { max-width: 780px; margin: 0 auto 4.2rem; }

.wuensche-liste { display: grid; gap: 0.6rem; margin-top: 2.2rem; }

.wunsch {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  border: 1px solid var(--linie);
  border-radius: 7px;
  background: rgba(14, 47, 51, 0.35);
  padding: 0.55rem 1rem;
  transition: opacity 0.5s, border-color 0.3s, background 0.3s;
}
.wunsch:focus-within { border-color: var(--polar-300); background: rgba(14, 47, 51, 0.6); }
.wunsch .nr { font-family: var(--display); font-size: 1.05rem; color: var(--polar-300); min-width: 1.7rem; text-align: center; }
.wunsch input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  color: var(--eis);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px; /* verhindert Auto-Zoom auf iOS */
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}
.wunsch input:focus { outline: none; }
.wunsch input::placeholder { color: var(--eis-40); font-style: italic; }

.wunsch.verbrannt { opacity: 0.45; }
.wunsch.verbrannt input { text-decoration: line-through; }
.wunsch .flamme { color: var(--gelb-200); opacity: 0; transition: opacity 0.4s; }
.wunsch.verbrannt .flamme { opacity: 1; }
.wunsch .flamme .icon { width: 1rem; height: 1rem; }

.wuensche-aktionen { margin-top: 1.7rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.wuensche-status { margin-top: 1.1rem; font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--eis-60); }

.werkzeuge {
  max-width: 780px;
  margin: 0 auto;
  padding-bottom: 4rem;
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================
   Rechtliche Seiten
   ============================================================ */

.recht { max-width: 760px; margin-left: auto; margin-right: auto; padding-top: clamp(7rem, 14vh, 9rem); padding-bottom: 5rem; }
.recht h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 0.6rem; }
.recht .stand { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--eis-40); margin-bottom: 2.6rem; }
.recht h2 { font-size: 1.3rem; letter-spacing: 0.05em; color: var(--polar-200); margin: 2.5rem 0 0.9rem; }
.recht h3 { font-size: 1.05rem; color: var(--eis); margin: 1.7rem 0 0.6rem; }
.recht p, .recht li { color: var(--eis-80); margin-bottom: 0.9rem; }
.recht ul { padding-left: 1.3rem; margin-bottom: 1rem; }
.recht a { color: var(--polar-300); }
.recht .platzhalter {
  border: 1px dashed var(--polar-600);
  border-radius: 6px;
  background: rgba(47, 191, 143, 0.06);
  padding: 1rem 1.3rem;
  font-size: 0.92rem;
  color: var(--polar-200);
  margin-bottom: 1.4rem;
}

/* ============================================================
   Bewegung & Responsive
   ============================================================ */

.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.reveal.da { opacity: 1; transform: translateY(0); }

@media (max-width: 1080px) {
  .naechte-gitter { grid-template-columns: repeat(3, 1fr); }
  .drei-spalten, .wissen-gitter { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .hero { min-height: 0; padding-top: clamp(5.5rem, 12vh, 7rem); }
  .hero-gitter { grid-template-columns: 1fr; gap: 3rem; }
  .flipbook-buehne { order: -1; }

  .naechte-gitter, .app-naechte { grid-template-columns: repeat(2, 1fr); }
  .autorin-gitter { grid-template-columns: 1fr; }
  .autorin-rahmen { max-width: 380px; margin-left: auto; margin-right: auto; }

  .fuss-gitter { grid-template-columns: 1fr 1fr; }

  .burger { display: block; }
  .nav-links {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
    background: rgba(3, 8, 13, 0.97);
    transform: translateY(-102%);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 120;
  }
  .nav-links.offen { transform: translateY(0); }
  .nav-links a { font-size: 1rem; }
  .nav-links .btn { padding: 0.85rem 2.2rem; font-size: 0.85rem; }

  /* Einfache Navigation (Rechtsseiten ohne Burger) */
  .nav-links.einfach { position: static; transform: none; flex-direction: row; gap: 1.2rem; background: none; }
  .nav-links.einfach a { font-size: 0.7rem; }

  .demo-band { top: calc(52px + env(safe-area-inset-top, 0px)); }
}

@media (max-width: 560px) {
  body { font-size: 0.97rem; }

  .naechte-gitter, .app-naechte, .drei-spalten, .wissen-gitter { grid-template-columns: 1fr; }

  .hero h1 { font-size: clamp(3.2rem, 17vw, 4.6rem); }

  .fakt { flex-basis: 100%; border-right: none; border-bottom: 1px solid var(--linie); margin-right: 0; padding-right: 0; }
  .fakt:last-child { border-bottom: none; }

  .count-zelle { min-width: 0; flex: 1 1 calc(25% - 0.9rem); padding: 0.85rem 0.3rem 0.7rem; }
  .count-zelle strong { font-size: 1.7rem; }

  .fuss-gitter { grid-template-columns: 1fr; gap: 1.7rem; }
  .fuss-unten { justify-content: center; text-align: center; }

  .hero-aktionen .btn, .cta-schluss .btn, .wuensche-aktionen .btn, .werkzeuge .btn { width: 100%; }

  .benutzer-leiste { flex-direction: column; align-items: flex-start; }

  .modal-aktionen { flex-direction: column; align-items: stretch; }
  .modal-aktionen .btn { width: 100%; }

  .flipbook { width: min(240px, 62vw); }
  /* Offenes Buch verkleinern, damit die linke Seite aufs Display passt */
  .flipbook.offen { transform: rotateX(2deg) rotateY(0deg) translateX(25%) scale(0.7); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}