/* ============================================================
   StufenHilfe – COMIC-THEME (Prototyp)
   Wird NACH app.css geladen und überschreibt das Standard-Design.
   ============================================================ */

/* Mitgelieferte Comic-Schrift: identisches Rendering auf allen Geräten
   (statt Comic Sans MS & Co., deren Schriftmetriken je nach System die
   Ausrichtung der Zahlen-Badges verschieben) */
@font-face {
  font-family: 'Comic Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/comic-neue-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Comic Neue';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/comic-neue-latin-700-normal.woff2') format('woff2');
}

:root {
  --teal: #2563eb;          /* Comic-Blau statt Petrol */
  --teal-dark: #1d4ed8;
  --teal-light: #fef08a;    /* Gelb als Akzentfläche */
  --amber: #f97316;
  --ink: #111111;
  --muted: #444444;
  --bg: #fdf6e3;
  --card: #ffffff;
  --line: #111111;
  --danger: #dc2626;
  --radius: 14px;
  --shadow: 4px 4px 0 #111111;
  --comic-font: 'Comic Neue', 'Comic Sans MS', 'Chalkboard SE', 'Segoe Print', cursive;
}

body {
  font-family: var(--comic-font);
  background:
    radial-gradient(#e8ddc0 1.4px, transparent 1.4px) 0 0 / 18px 18px,
    var(--bg);
}

h1, h2, h3, .brand, .card-title, .hero-title, .sec-title, .phone-title {
  font-family: var(--comic-font);
  letter-spacing: .5px;
}
h1 { text-transform: uppercase; }

/* Kästen: dicke schwarze Outline + versetzter Schatten */
.panel, .card, .auth-card, .student-card, .reveal-item, .feature, .step,
.create-bar, .empty, .fb-item, .student-intro, .phone-step, .phone-body {
  border: 3px solid #111 !important;
  box-shadow: 5px 5px 0 #111;
}
.student-intro { background: #fef08a; color: #111; }

/* Sprechblasen-Gefühl: Karten minimal gedreht */
.card:nth-child(odd), .feature:nth-child(odd) { transform: rotate(-.4deg); }
.card:nth-child(even), .feature:nth-child(even) { transform: rotate(.4deg); }
.reveal-item:nth-child(odd) { transform: rotate(-.3deg); }
.reveal-item:nth-child(even) { transform: rotate(.3deg); }

/* Topbar wie ein Comic-Titelbalken */
.topbar {
  background: #2563eb;
  border-bottom: 4px solid #111;
  box-shadow: 0 4px 0 rgba(17, 17, 17, .25);
}
.brand { font-size: 1.3rem; text-shadow: 2px 2px 0 #111; }
.brand span { color: #fde047; }
.topnav a { font-weight: 700; text-shadow: 1px 1px 0 #111; }
.topnav .btn-ghost { border: 2px solid #fff; }

/* Buttons: knallig, Outline, „Sprung“ beim Klicken */
.btn {
  border: 3px solid #111;
  border-radius: 12px;
  box-shadow: 3px 3px 0 #111;
  font-family: var(--comic-font);
  font-weight: 700;
}
.btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 #111; }
.btn-primary { background: #facc15; border-color: #111; color: #111; }
.btn-primary:hover { filter: none; background: #fde047; }
.btn-ghost { border-color: transparent; box-shadow: none; }
.btn-danger { background: #fff; }
.btn-lg { border-width: 3px; }

/* Eingaben */
input[type=text], input[type=password], input[type=email], textarea, select {
  border: 2.5px solid #111;
  border-radius: 10px;
  font-family: var(--comic-font);
  background: #fff;
}
input:focus, textarea:focus, .rte:focus { outline: 3px solid #facc15; }
label { font-family: var(--comic-font); }

/* Chips & Nummern-Buttons wie Comic-Sticker */
.chip {
  background: #fde047; color: #111; border: 2px solid #111;
  font-weight: 700; transform: rotate(-2deg);
}
.h-num, .reveal-num, .step-num, .p-num {
  background: #2563eb; border: 2.5px solid #111; box-shadow: 2px 2px 0 #111;
  font-family: var(--comic-font);
  line-height: 1;               /* Ziffer exakt in der Kreismitte, unabhängig von Schriftmetriken */
  align-self: center;
}
/* Zeilen mit Zahlen-Badge: kompakte Zeilenbox, damit Badge und Text
   auf jedem Gerät auf gleicher Höhe sitzen */
.phone-step, .reveal-btn, .help-list li { line-height: 1.3; align-items: center; }
.help-list li.is-solution .h-num, .p-lock .p-num { background: #f97316; }
.help-list li { border: 2.5px solid #111; background: #fff; }
.help-list .h-actions button { border: 2px solid #111; box-shadow: 2px 2px 0 #111; }
.help-list .h-actions button:active { transform: translate(2px, 2px); box-shadow: none; }

/* Editor-Details */
.type-tabs button { border: 2.5px solid #111; font-family: var(--comic-font); font-weight: 700; box-shadow: 2px 2px 0 #111; }
.type-tabs button.active { background: #facc15; color: #111; }
.rte, .formula-preview { border: 2.5px solid #111; }
.rte-toolbar button { border: 2px solid #111; box-shadow: 2px 2px 0 #111; }
.rte-toolbar button:active { transform: translate(2px, 2px); box-shadow: none; }
.upload-zone { border: 3px dashed #111; }
.formula-snippets button { border: 2px solid #111; }

/* Schüleransicht */
.reveal-btn { font-family: var(--comic-font); font-weight: 700; }
.reveal-item.open .reveal-btn { background: #fef9c3; border-bottom: 2.5px dashed #111; }
.solution-card { border-left: 8px solid #f97316 !important; }
.lock-form input { border: 3px solid #111; background: #fef9c3; }
.feedback-btns button { border: 2.5px solid #111; box-shadow: 2px 2px 0 #111; font-family: var(--comic-font); font-weight: 700; }
.feedback-btns button.sel { background: #facc15; color: #111; }
.feedback-msg { background: #fef08a; color: #111; border: 2.5px solid #111; }
.zoom-hint, .yt-note { font-family: var(--comic-font); }

/* Aufdecken mit kleinem „POW“-Einschlag */
@keyframes pow-in {
  0% { transform: scale(.7) rotate(-2deg); opacity: 0; }
  60% { transform: scale(1.06) rotate(1deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}
.reveal-body:not([hidden]), .phone-body:not([hidden]) { animation: pow-in .28s ease-out; }

/* Landing */
.hero-title {
  text-transform: uppercase;
  text-shadow: 4px 4px 0 #facc15;
}
.phone { background: #111; box-shadow: 8px 8px 0 #111; border: 3px solid #111; }
.phone-screen { background: #fdf6e3; }
.f-ico { font-size: 2rem; filter: drop-shadow(2px 2px 0 #facc15); }
.step { transform: rotate(-.4deg); }
.step:nth-child(2) { transform: rotate(.5deg); }
.demo-lock-row input { border: 2.5px solid #111; }
.demo-lock-row .demo-unlock { border: 2.5px solid #111; background: #facc15; color: #111; box-shadow: 2px 2px 0 #111; }

/* Tabellen & Admin */
.table th, .table td { border-bottom: 2px solid #111; }
.notice-ok { background: #fef08a; color: #111; border: 2.5px solid #111; }
.alert { border: 2.5px solid var(--danger); font-weight: 700; }

/* Registrierung: Feature-Panel */
.features-panel { border: 3px solid #111; box-shadow: 5px 5px 0 #111; }
.example-box { border: 2.5px solid #111; background: #fef08a; }

/* Eigener Audio-Player */
.player { border: 2.5px solid #111; background: #fff; box-shadow: 3px 3px 0 #111; }
.pl-btn { background: #facc15; color: #111; border: 2.5px solid #111; font-weight: 700; }
.pl-btn:active { transform: translate(1px, 1px); }
.pl-bar { border: 2px solid #111; background: #fdf6e3; }
.pl-fill { background: #2563eb; }
.pl-time { color: #111; font-weight: 700; }

/* Scan-Statistik */
.stat { border: 2.5px solid #111; background: #fef08a; box-shadow: 2px 2px 0 #111; }
.stat-num { color: #111; }
.stat-label { color: #444; font-weight: 700; }

/* Footer */
.footer { border-top: 3px solid #111; background: #fdf6e3; font-family: var(--comic-font); }