/* ============================================================
   COMIC DESIGN SYSTEM  ·  Klassen-Feedback
   Alles offline: Fonts liegen lokal in /fonts
   ============================================================ */

@font-face { font-family:'Bangers'; src:url('../fonts/bangers.woff2') format('woff2'); font-weight:400; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Bangers'; src:url('../fonts/bangers-ext.woff2') format('woff2'); font-weight:400; font-display:swap;
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Patrick Hand'; src:url('../fonts/patrick.woff2') format('woff2'); font-weight:400; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Patrick Hand'; src:url('../fonts/patrick-ext.woff2') format('woff2'); font-weight:400; font-display:swap;
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Baloo'; src:url('../fonts/baloo-600.woff2') format('woff2'); font-weight:600; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Baloo'; src:url('../fonts/baloo-600-ext.woff2') format('woff2'); font-weight:600; font-display:swap;
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Baloo'; src:url('../fonts/baloo-800.woff2') format('woff2'); font-weight:800; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Baloo'; src:url('../fonts/baloo-800-ext.woff2') format('woff2'); font-weight:800; font-display:swap;
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root{
  --ink:#181521;
  --ink-soft:#3b3549;
  --paper:#fdf3dd;
  --paper-2:#fff9ec;
  --paper-3:#f5e7c8;

  --pow:#ffd23f;
  --blue:#3b8beb;
  --blue-d:#1f5fa9;
  --red:#ff4f5a;
  --mint:#25c2a0;
  --violet:#a375e8;
  --orange:#ff8c3b;
  --pink:#ff77b0;
  --teal:#37c7d4;

  --b:5px;                       /* Standard-Linienstärke */
  --shadow:8px 8px 0 var(--ink);
  --shadow-sm:4px 4px 0 var(--ink);
  --shadow-lg:14px 14px 0 var(--ink);
  --r:14px;

  --f-display:'Bangers','Baloo',system-ui,sans-serif;
  --f-ui:'Baloo','Trebuchet MS',system-ui,sans-serif;
  --f-hand:'Patrick Hand','Baloo',cursive,sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--f-ui);
  color:var(--ink);
  background-color:var(--paper);
  background-image:
    radial-gradient(circle at 50% 50%, rgba(24,21,33,.10) 1.6px, transparent 1.7px),
    radial-gradient(circle at 50% 50%, rgba(24,21,33,.06) 1.4px, transparent 1.5px);
  background-size:14px 14px, 14px 14px;
  background-position:0 0, 7px 7px;
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
}

/* ---------- Typo ---------- */
.display{ font-family:var(--f-display); font-weight:400; letter-spacing:.02em; line-height:.95; text-transform:uppercase; }
.hand{ font-family:var(--f-hand); }
h1,h2,h3{ margin:0; font-family:var(--f-display); font-weight:400; letter-spacing:.02em; line-height:1; text-transform:uppercase; }

.outline-text{
  color:var(--paper-2);
  -webkit-text-stroke:3px var(--ink);
  paint-order:stroke fill;
  text-shadow:5px 5px 0 var(--ink);
}
.outline-text.pow{ color:var(--pow); }
.outline-text.blue{ color:#8fd0ff; }

/* ---------- Panels ---------- */
.panel{
  position:relative;
  background:var(--paper-2);
  border:var(--b) solid var(--ink);
  border-radius:var(--r);
  box-shadow:var(--shadow);
}
.panel.tilt-l{ transform:rotate(-.9deg); }
.panel.tilt-r{ transform:rotate(.9deg); }
.panel.flat{ box-shadow:var(--shadow-sm); }
.panel.halftone::before{
  content:''; position:absolute; inset:0; border-radius:calc(var(--r) - 3px);
  background-image:radial-gradient(circle, rgba(24,21,33,.13) 1.7px, transparent 1.8px);
  background-size:11px 11px; pointer-events:none; opacity:.7;
}
.panel > *{ position:relative; z-index:1; }

.panel-title{
  display:inline-flex; align-items:center; gap:.4em;
  font-family:var(--f-display); font-size:clamp(18px,2vw,30px); text-transform:uppercase;
  background:var(--ink); color:var(--paper-2);
  padding:.16em .7em .22em; border-radius:6px;
  transform:rotate(-1.2deg); letter-spacing:.03em;
}

/* ---------- Buttons ---------- */
.btn{
  font-family:var(--f-display); font-size:1.35rem; letter-spacing:.03em; text-transform:uppercase;
  color:var(--ink); background:var(--pow);
  border:var(--b) solid var(--ink); border-radius:12px;
  box-shadow:var(--shadow-sm);
  padding:.45em 1.1em .55em; cursor:pointer;
  transition:transform .07s ease, box-shadow .07s ease, background .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); }
.btn:active{ transform:translate(3px,3px); box-shadow:1px 1px 0 var(--ink); }
.btn.blue{ background:var(--blue); color:#fff; }
.btn.mint{ background:var(--mint); color:#08312a; }
.btn.red{ background:var(--red); color:#fff; }
.btn.violet{ background:var(--violet); color:#fff; }
.btn.ghost{ background:var(--paper-2); }
.btn.sm{ font-size:1rem; padding:.35em .8em .45em; border-width:3px; box-shadow:3px 3px 0 var(--ink); }
.btn.xl{ font-size:2rem; padding:.4em 1.4em .5em; box-shadow:var(--shadow); }
.btn[disabled]{ opacity:.45; cursor:not-allowed; transform:none!important; box-shadow:var(--shadow-sm)!important; }

/* ---------- Sprechblasen ---------- */
.bubble{
  position:relative; background:var(--paper-2);
  border:var(--b) solid var(--ink); border-radius:22px;
  box-shadow:var(--shadow-sm); padding:.9em 1.1em;
  font-family:var(--f-hand); font-size:1.25rem; line-height:1.25;
}
.bubble::after{
  content:''; position:absolute; left:34px; bottom:-24px;
  width:0; height:0;
  border-left:16px solid transparent; border-right:20px solid transparent;
  border-top:24px solid var(--ink);
}
.bubble::before{
  content:''; position:absolute; left:39px; bottom:-14px; z-index:2;
  width:0; height:0;
  border-left:10px solid transparent; border-right:13px solid transparent;
  border-top:16px solid var(--paper-2);
}
.bubble.good{ background:#e7fbf3; }
.bubble.good::before{ border-top-color:#e7fbf3; }
.bubble.wish{ background:#fff1e0; }
.bubble.wish::before{ border-top-color:#fff1e0; }
.bubble.think{ border-radius:30px; }
.bubble.think::after,.bubble.think::before{ display:none; }

/* ---------- Bursts / Sterne ---------- */
.burst{
  display:grid; place-items:center; text-align:center;
  font-family:var(--f-display); color:var(--ink);
  background:var(--pow);
  clip-path:polygon(50% 0%,61% 18%,80% 8%,80% 30%,100% 34%,86% 50%,100% 66%,80% 70%,80% 92%,61% 82%,50% 100%,39% 82%,20% 92%,20% 70%,0% 66%,14% 50%,0% 34%,20% 30%,20% 8%,39% 18%);
  filter:drop-shadow(4px 4px 0 var(--ink));
}
.burst.red{ background:var(--red); color:#fff; }
.burst.blue{ background:var(--blue); color:#fff; }

.starburst-bg{
  position:absolute; inset:-10%; z-index:0; opacity:.28; pointer-events:none;
  background:repeating-conic-gradient(from 0deg at 50% 50%, var(--pow) 0deg 7deg, transparent 7deg 14deg);
  animation:spin 90s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.speedlines{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.16;
  background:repeating-linear-gradient(100deg, var(--ink) 0 2px, transparent 2px 16px);
  mask-image:linear-gradient(to right, black, transparent 42%, transparent 58%, black);
  -webkit-mask-image:linear-gradient(to right, black, transparent 42%, transparent 58%, black);
}

/* ---------- Animationen ---------- */
@keyframes wobble{ 0%,100%{ transform:rotate(-1.2deg); } 50%{ transform:rotate(1.2deg); } }
@keyframes pop{ 0%{ transform:scale(.2) rotate(-14deg); opacity:0; } 65%{ transform:scale(1.12) rotate(3deg); opacity:1; } 100%{ transform:scale(1) rotate(0); opacity:1; } }
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }
@keyframes flash{ 0%,100%{ filter:none; } 50%{ filter:brightness(1.35); } }
@keyframes slideUp{ from{ transform:translateY(26px); opacity:0; } to{ transform:translateY(0); opacity:1; } }
.anim-wobble{ animation:wobble 3.6s ease-in-out infinite; }
.anim-pop{ animation:pop .42s cubic-bezier(.2,1.5,.4,1) both; }
.anim-bob{ animation:bob 3s ease-in-out infinite; }
.anim-up{ animation:slideUp .4s ease both; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none!important; transition:none!important; }
}

/* ---------- Formularelemente ---------- */
input[type=text], input[type=number], textarea, select{
  font-family:var(--f-ui); font-size:1.05rem; color:var(--ink);
  background:var(--paper-2); border:3px solid var(--ink); border-radius:10px;
  padding:.5em .7em; width:100%; box-shadow:3px 3px 0 rgba(24,21,33,.25);
}
textarea{ font-family:var(--f-hand); font-size:1.25rem; resize:vertical; }
input:focus, textarea:focus, select:focus{ outline:4px solid var(--blue); outline-offset:2px; }
label{ font-weight:800; }

/* ---------- Kleinteile ---------- */
.tag{
  display:inline-block; font-family:var(--f-ui); font-weight:800; font-size:.95rem;
  color:var(--ink); background:var(--paper-3); border:3px solid var(--ink); border-radius:999px;
  padding:.12em .8em .18em; box-shadow:2px 2px 0 var(--ink);
}
.tag.blue{ background:var(--blue); color:#fff; }
.tag.mint{ background:var(--mint); color:#06322a; }
.tag.red{ background:var(--red); color:#fff; }
.tag.pow{ background:var(--pow); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }