/* studentphone.de – Design „Schulblock“ (seit 11.10.2026 für alle aktiv)
   Liegt als Schicht über style.css und greift nur, wenn <html data-design="schulblock"> gesetzt ist
   (build/layout.js setzt das Attribut auf jeder Seite; entfernen = altes Design).
   Idee: Karopapier statt Verlauf, Textmarker auf Preisen, Tarife als Zettel mit Klebestreifen,
   handschriftliche Randnotizen. Bedienung (Filter, Preise, Buttons) bleibt klar und ruhig.
   Mobile first; Kontraste ≥ 4,5 : 1 hell und dunkel; ohne Animation bei prefers-reduced-motion. */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/fonts/bricolage-grotesque-latin-wght-normal.woff2) format('woff2-variations');
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/fonts/caveat-latin-600-normal.woff2) format('woff2');
}

/* ---------- Tokens: Papier (hell) ---------- */
:root[data-design='schulblock'] {
  --font-display: 'Bricolage Grotesque', var(--font-sans);
  --font-hand: 'Caveat', 'Comic Sans MS', cursive;

  --bg: #fbf8f1;
  --surface: #fffdf8;
  --surface-2: #f4efe3;
  --text: #1c1b18;
  --muted: #55504a;
  --border: #ddd5c4;
  --ink: #1c1b18;

  --brand: #1d4ed8;
  --brand-strong: #1a3fae;
  --brand-soft: #e5ebfb;
  --pink: #e0115f;
  --pink-ink: #b30d4c;
  --pink-soft: #fde7ef;

  --marker: #fff06a;
  --marker-pink: #ffc2db;
  --marker-gruen: #b8f2c8;
  --raster: rgb(29 78 216 / 0.07);
  --rand: rgb(224 17 95 / 0.35);
  --schatten: #1c1b18;

  --radius-s: 4px;
  --radius: 6px;
  --radius-l: 10px;
}

/* ---------- Tokens: Tafel (dunkel) ---------- */
:root[data-design='schulblock'][data-theme='dark'] {
  --bg: #17231e;
  --surface: #1e2c26;
  --surface-2: #24342d;
  --text: #f3f0e6;
  --muted: #bfc7bd;
  --border: #3a4b43;
  --ink: #f3f0e6;
  --brand: #9cc0ff;
  --brand-strong: #c3d8ff;
  --brand-soft: #22374f;
  --pink: #ff8ab5;
  --pink-ink: #ff9fc3;
  --pink-soft: #3a2430;
  --marker-pink: #8a2a52;
  --raster: rgb(255 255 255 / 0.045);
  --rand: rgb(255 138 181 / 0.3);
  --schatten: #000;
}
@media (prefers-color-scheme: dark) {
  :root[data-design='schulblock']:not([data-theme='light']) {
    --bg: #17231e;
    --surface: #1e2c26;
    --surface-2: #24342d;
    --text: #f3f0e6;
    --muted: #bfc7bd;
    --border: #3a4b43;
    --ink: #f3f0e6;
    --brand: #9cc0ff;
    --brand-strong: #c3d8ff;
    --brand-soft: #22374f;
    --pink: #ff8ab5;
    --pink-ink: #ff9fc3;
    --pink-soft: #3a2430;
    --marker-pink: #8a2a52;
    --raster: rgb(255 255 255 / 0.045);
    --rand: rgb(255 138 181 / 0.3);
    --schatten: #000;
  }
}

/* ---------- Papier, Heftrand, Schrift ---------- */
[data-design='schulblock'] body {
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--raster) 1px, transparent 1px),
    linear-gradient(90deg, var(--raster) 1px, transparent 1px);
  background-size: 22px 22px;
}
/* Roter Heftrand links (nur Deko, liegt im Seitenabstand) */
[data-design='schulblock'] body::before {
  content: '';
  position: fixed;
  inset: 0 auto 0 0.45rem;
  width: 2px;
  background: var(--rand);
  pointer-events: none;
  z-index: 0;
}
@media (min-width: 60rem) {
  [data-design='schulblock'] body::before {
    left: 1.5rem;
  }
}
[data-design='schulblock'] :is(h1, h2, h3, .h3) {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
}
[data-design='schulblock'] h1 {
  line-height: 1.02;
}

/* Bänder ohne Flächenfarbe: Papier läuft durch, Abschnitte trennt eine gestrichelte Linie */
[data-design='schulblock'] :is(.section-alt, .pg-home .rechner-band, .pg-home .iz-band, .ratgeber-band, .page-hero) {
  background: transparent;
}
[data-design='schulblock'] main > .section + .section,
[data-design='schulblock'] main > section + section {
  border-top: 2px dashed var(--border);
}

/* ---------- Header und Footer ---------- */
[data-design='schulblock'] .site-header::before {
  background: var(--bg);
}
[data-design='schulblock'] .site-header {
  border-bottom: 2px solid var(--ink);
}
[data-design='schulblock'] .site-footer {
  background: var(--surface-2);
  border-top: 2px solid var(--ink);
}

/* ---------- Buttons: Umriss und harter Schatten, beim Tippen „gedrückt“ ---------- */
[data-design='schulblock'] .btn {
  border-radius: 999px;
}
[data-design='schulblock'] .btn-primary {
  background: var(--brand);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--schatten);
}
[data-design='schulblock'] .btn-primary:hover {
  background: var(--brand-strong);
}
[data-design='schulblock'] .btn-primary:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--schatten);
}
[data-design='schulblock'] .btn-ghost {
  border: 2px solid var(--ink);
  color: var(--text);
  background: var(--surface);
}

/* ---------- Startseite: Hero auf Papier ---------- */
[data-design='schulblock'] .pg-home .hero {
  background: transparent;
  color: var(--text);
}
[data-design='schulblock'] .pg-home .hero::after {
  display: none;
}
[data-design='schulblock'] .pg-home .hero h1 {
  color: var(--text);
  font-size: clamp(2.3rem, 1.6rem + 4vw, 4.6rem);
  max-width: 11ch;
}
/* „passt“ mit Textmarker unterlegt */
[data-design='schulblock'] .kringel {
  background: linear-gradient(100deg, transparent 0 1%, var(--marker-pink) 2% 97%, transparent 99%) 0 85% / 100% 0.55em no-repeat;
  padding-inline: 0.05em;
}
[data-design='schulblock'] .pg-home .hero .lead {
  color: var(--muted);
}
/* Dachzeile als schräg aufgeklebtes Etikett */
[data-design='schulblock'] .pg-home .hero-kicker {
  background: var(--marker);
  color: #1c1b18;
  border: 2px solid #1c1b18;
  transform: rotate(-2deg);
  font-size: 0.8rem;
}
[data-design='schulblock'] .pg-home .trust {
  color: var(--text);
}
[data-design='schulblock'] .pg-home .trust li::before {
  color: var(--pink-ink);
}

/* Schnell-Check als Zettel mit Klebestreifen */
[data-design='schulblock'] .pg-home .check {
  position: relative;
  border: 2px solid var(--ink);
  border-radius: var(--radius-l);
  box-shadow: 5px 5px 0 var(--schatten);
}
[data-design='schulblock'] .pg-home .check::before {
  content: '';
  position: absolute;
  top: -0.7rem;
  left: 50%;
  width: 5.5rem;
  height: 1.3rem;
  translate: -50% 0;
  rotate: -3deg;
  background: color-mix(in srgb, var(--pink) 45%, transparent);
}
[data-design='schulblock'] .pg-home .check-ergebnis {
  background: var(--surface-2);
}
[data-design='schulblock'] .pg-home .erg-zahl strong {
  background: linear-gradient(100deg, transparent 0 1%, var(--marker) 2% 97%, transparent 99%);
  color: #1c1b18;
  padding-inline: 0.15em;
}

/* ---------- Tarifkarten als Zettel ---------- */
[data-design='schulblock'] .tarif {
  position: relative;
  background: var(--surface);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  margin-top: 0.6rem;
}
/* Klebestreifen in der Anbieterfarbe */
[data-design='schulblock'] .tarif::before {
  content: '';
  position: absolute;
  top: -0.65rem;
  left: 1.25rem;
  width: 4.5rem;
  height: 1.2rem;
  rotate: -4deg;
  background: color-mix(in srgb, var(--c, var(--brand)) 55%, transparent);
}
[data-design='schulblock'] .tarif:nth-child(even)::before {
  left: auto;
  right: 1.25rem;
  rotate: 3deg;
}
[data-design='schulblock'] .t-felder > div {
  background: var(--surface-2);
  border-radius: var(--radius-s);
}
/* Preis mit Textmarker */
[data-design='schulblock'] .t-monat strong,
[data-design='schulblock'] .pg-home .deal-preis strong {
  background: linear-gradient(100deg, transparent 0 1%, var(--marker) 2% 97%, transparent 99%);
  color: #1c1b18;
  padding: 0 0.15em;
  font-family: var(--font-display);
}
/* Handschriftliche Randnotiz mit kleinem Pfeil */
[data-design='schulblock'] .t-notiz {
  display: block;
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--pink-ink);
  rotate: -3deg;
  transform-origin: left center;
}
[data-design='schulblock'] .t-notiz::after {
  content: ' ↓';
}
[data-design='schulblock'] .t-art.young {
  background: var(--marker-gruen);
  color: #1c1b18;
}
:root[data-design='schulblock'][data-theme='dark'] .t-art.young {
  background: #2f5a3d;
  color: #f3f0e6;
}
@media (prefers-color-scheme: dark) {
  :root[data-design='schulblock']:not([data-theme='light']) .t-art.young {
    background: #2f5a3d;
    color: #f3f0e6;
  }
}

/* Angebotskarten der Startseite: gleiche Zettel-Optik */
[data-design='schulblock'] .pg-home .deal {
  border: 1.5px solid var(--ink);
  border-top: 6px solid var(--c, var(--brand));
  border-radius: var(--radius);
}
[data-design='schulblock'] .pg-home .rg-karte,
[data-design='schulblock'] .card {
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  background: var(--surface);
}

/* Schnellfilter: aktiver Chip mit Textmarker */
[data-design='schulblock'] .chip,
[data-design='schulblock'] .pg-home .pill {
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
}
[data-design='schulblock'] .chip[aria-pressed='true'],
[data-design='schulblock'] .pg-home .pill:has(input:checked) {
  background: var(--marker);
  color: #1c1b18;
  border-color: #1c1b18;
}
[data-design='schulblock'] .v-leiste {
  background: var(--bg);
}

/* ---------- Bewegung: Textmarker „malt“ sich einmal über den Preis ---------- */
@media (prefers-reduced-motion: no-preference) {
  [data-design='schulblock'] :is(.t-monat strong, .kringel, .pg-home .erg-zahl strong) {
    background-repeat: no-repeat;
    background-size: 100% 100%;
    animation: marker 0.5s ease-out both;
  }
  [data-design='schulblock'] .kringel {
    background-size: 100% 0.55em;
    animation-delay: 0.2s;
  }
  @keyframes marker {
    from {
      background-size: 0% 100%;
    }
  }
  [data-design='schulblock'] .kringel {
    animation-name: marker-unten;
  }
  @keyframes marker-unten {
    from {
      background-size: 0% 0.55em;
    }
  }
}

/* Überblickstabelle wie ein Eintrag im Heft */
[data-design='schulblock'] .ueberblick {
  background: var(--surface);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
}
[data-design='schulblock'] .ueberblick td:last-child {
  font-family: var(--font-display);
}

/* „Kurz gesagt“ als gelber Haftzettel */
[data-design='schulblock'] .prose .kurz {
  background: #fff6b3;
  color: #1c1b18;
  border: 1.5px solid #1c1b18;
  border-radius: 2px;
  box-shadow: 4px 4px 0 var(--schatten);
  rotate: -0.6deg;
}
[data-design='schulblock'] .prose .kurz strong {
  color: #1c1b18;
}
@media (prefers-reduced-motion: reduce) {
  [data-design='schulblock'] .prose .kurz {
    rotate: none;
  }
}
[data-design='schulblock'] .eintrag:target {
  background: #fff6b3;
  color: #1c1b18;
  outline-color: #1c1b18;
}
[data-design='schulblock'] .eintrag:target dd {
  color: #1c1b18;
}

/* Merken/Vergleichen */
[data-design='schulblock'] .merkleiste {
  background: var(--bg);
}
[data-design='schulblock'] .merk-dialog {
  background: var(--surface);
  box-shadow: 6px 6px 0 var(--schatten);
}
[data-design='schulblock'] .merk-bester {
  background: var(--marker);
  color: #1c1b18;
}
[data-design='schulblock'] .tarif.gemerkt {
  outline-color: var(--pink);
}