/* =========================================================
   CSS-Werkstatt – Theme „Video-Look“
   tutorials.mario-wiecha.de

   Dunkler Verlauf (Teal → Indigo → Violett), Punktraster, Cyan / Pink /
   Gelb als Akzente, fette Inter-Überschriften, Pill-Badges, Glas-Karten.
   Entspricht dem Look des Werbevideos.

   Einbinden: NACH werkstatt.css und NACH dem <style>-Block der Seite
     <link rel="stylesheet" href="werkstatt.css">
     <style> … </style>
     <link rel="stylesheet" href="werkstatt-theme.css">

   Farben ändern: nur die Variablen in :root unten anpassen.
   Ohne diese Datei erscheint wieder das alte Bordeaux-Design.
   ========================================================= */

/* ---------- 1. Variablen ---------- */
:root{
  /* Video-Palette */
  --pink:   #f472b6;
  --cyan:   #22d3ee;
  --yellow: #fbbf24;
  --orange: #fb923c;
  --blue:   #60a5fa;
  --green:  #34d399;
  --violet: #a78bfa;

  /* bestehende Variablen der Seiten umbelegen */
  --bg:         #1b1044;
  --bg-alt:     rgba(10, 6, 30, .55);
  --card:       rgba(255, 255, 255, .06);
  --paper:      #ffffff;
  --ink:        #0f172a;
  --red:        var(--pink);      /* aktive Tabs, Rahmen-Akzent */
  --accent:     var(--cyan);      /* Links, Hervorhebungen */
  --red-bright: var(--cyan);
  --amber:      var(--yellow);
  --muted:      #a0b3d2;
  --line:       rgba(255, 255, 255, .14);
  --grid-line:  transparent;

  /* Zusatz */
  --glass:        rgba(255, 255, 255, .06);
  --glass-border: rgba(255, 255, 255, .14);
  --radius:       22px;
  --pill:         var(--pink);    /* Farbe der Modul-Badge, je Seite überschrieben */
}

/* Badge-Farbe pro Seite (wie im Video: Modul 05 gelb, 06 pink, 07 violett …) */
body[data-page="index"]               { --pill: var(--cyan); }
body[data-page="was-ist-html"],
body[data-page="html-tutorial"]       { --pill: var(--orange); }
body[data-page="was-ist-css"]         { --pill: var(--blue); }
body[data-page="was-ist-javascript"],
body[data-page="javascript-tutorial"],
body[data-page="box-modell-tutorial"],
body[data-page="box-modell-referenz"] { --pill: var(--yellow); }
body[data-page="flexbox-tutorial"]    { --pill: var(--pink); }
body[data-page="grid-tutorial"]       { --pill: var(--violet); }

/* ---------- 2. Hintergrund ---------- */
body{
  background-color: #1b1044;
  background-image:
    radial-gradient(rgba(255, 255, 255, .35) 1.5px, transparent 1.6px),
    radial-gradient(ellipse 60% 55% at 0% 0%,     #0e3b4e 0%, transparent 70%),
    radial-gradient(ellipse 65% 60% at 100% 100%, #4a255b 0%, transparent 70%);
  background-size: 56px 56px, 100% 100%, 100% 100%;
  background-position: 0 0;
  background-attachment: fixed;
}

/* ---------- 3. Typografie ---------- */
h1, h2, h3, .brand, .logo, .concept h3, .panel h2, .legend-item h2,
.card h3, .definition .acronym, .demo-box{
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
h1{
  font-weight: 900;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -.025em;
}
.concept h3, .legend-item h2, .card h3{ font-weight: 800; }
.hero p{ color: var(--muted); }

/* ---------- 4. Kopfzeile ---------- */
header.top, header{ border-bottom-color: rgba(255, 255, 255, .1); }

.brand, .logo{
  display: inline-flex; align-items: center; gap: 0;
  font-weight: 800; font-size: 1.1rem; letter-spacing: 0; color: #fff;
}
.brand span, .logo span{ color: #fff; }
.brand::before, .logo::before{
  content: "</>";
  display: inline-grid; place-items: center;
  width: 2rem; height: 2rem;
  font: 700 .8rem 'JetBrains Mono', monospace;
  margin-right: .6rem;
  color: var(--ink); background: var(--cyan); border-radius: 9px;
}

.back-link{
  color: var(--muted);
  background: rgba(10, 6, 30, .55);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(8px);
}
.back-link:hover{ border-color: var(--cyan); color: #fff; }

.crumb a{ text-decoration: none; }
.crumb b{ color: var(--cyan); }

/* ---------- 5. Eyebrow → Pill-Badge ---------- */
.hero .eyebrow{
  display: inline-block;
  padding: .32em 1.1em;
  margin-bottom: 16px;
  font: 800 .78rem 'Inter', system-ui, sans-serif;
  letter-spacing: .06em;
  color: var(--ink);
  background: var(--pill);
  border-radius: 999px;
}

/* ---------- 6. Glas-Flächen ---------- */
.stage, .panel, .concept, .legend-item, .card, .definition{
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.stage{ background: rgba(10, 6, 30, .45); }
.panels-wrap > .panel{               /* Tab-Inhalte der Startseite: kein Kasten */
  background: none; border: 0; border-radius: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.concept{ border-top: 4px solid var(--layer-color, var(--cyan)); }
.definition{ border-left: 4px solid var(--cyan); }
.definition .acronym{ color: var(--cyan); font-weight: 800; }
.definition dt{ color: var(--yellow); }
.panel h2{ color: var(--muted); }

/* Code */
.code{
  background: rgba(10, 6, 30, .7);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  color: #cbd5e1;
}
.code .prop{ color: var(--violet); }
.concept code, .legend-item code{
  color: var(--green); background: rgba(255, 255, 255, .1);
}

/* Regler */
.control .val{ color: var(--cyan); }

/* ---------- 7. Startseite: Tabs & Karten ---------- */
.tabs label{
  background: var(--glass);
  border-color: var(--glass-border);
  font-weight: 600;
}
.tabs label:hover{ border-color: var(--cyan); color: #fff; }
#tab-einfuehrung:checked ~ .tabs label[for="tab-einfuehrung"],
#tab-html:checked        ~ .tabs label[for="tab-html"],
#tab-css:checked         ~ .tabs label[for="tab-css"],
#tab-js:checked          ~ .tabs label[for="tab-js"]{
  background: var(--pink); border-color: var(--pink); color: var(--ink); font-weight: 800;
}

.card.live:hover{
  border-color: var(--cyan);
  box-shadow: 0 14px 40px -14px rgba(34, 211, 238, .45);
}
.card .num{
  align-self: flex-start;
  padding: .2em .9em;
  font-weight: 800; letter-spacing: .04em;
  color: var(--ink); background: var(--blue); border-radius: 999px;
}
.panel-html .card .num                            { background: var(--orange); }
.panel-js   .card .num                            { background: var(--yellow); }
.panel-einfuehrung .card:nth-child(1) .num        { background: var(--orange); }
.panel-einfuehrung .card:nth-child(2) .num        { background: var(--blue); }
.panel-einfuehrung .card:nth-child(3) .num        { background: var(--yellow); }

.status.ready{ color: var(--green); }

.icon-tag, .icon-generic{
  border-color: rgba(34, 211, 238, .6); color: var(--cyan); border-radius: 14px;
}
.card:hover .icon-tag{ background: var(--cyan); color: var(--ink); border-color: var(--cyan); }
.icon-box{ border-color: rgba(34, 211, 238, .5); }
.icon-box .b2{ background: rgba(96, 165, 250, .9); }
.icon-flex{ border-color: rgba(34, 211, 238, .45); border-radius: 10px; }
.icon-flex .f:nth-child(1){ background: var(--pink); }
.icon-flex .f:nth-child(2){ background: var(--cyan); }
.icon-flex .f:nth-child(3){ background: var(--yellow); }
.icon-grid div{ border-radius: 4px; }
.icon-grid div:nth-child(5){ background: var(--pink); }

footer{ border-top-color: rgba(255, 255, 255, .1); }

/* ---------- 8. Box-Modell (Tutorial + Referenz): Farben wie im Video ---------- */
.l-margin{ background: rgba(251, 146, 60, .28); border: 1px dashed var(--orange); }
.l-border{ background: var(--yellow); border-color: var(--yellow) !important; } /* !important: JS setzt den Rahmen inline */
.l-padding{ background: var(--green); }
.l-content{ background: var(--blue); color: var(--ink); border-radius: 6px; }
.l-content small{ color: rgba(15, 23, 42, .65); }
.tag.margin{ color: var(--orange); }
.tag.border{ color: var(--yellow); }
.tag.padding{ color: var(--green); }
.swatch.margin{ background: var(--orange); }
.swatch.border{ background: var(--yellow); }
.swatch.padding{ background: var(--green); }
.swatch.content{ background: var(--blue); border-color: transparent; }

.margin-layer{ background: rgba(251, 146, 60, .28); border: 1px dashed var(--orange); }
.border-layer{ background: var(--yellow); border-color: var(--yellow); }
.padding-layer{ background: var(--green); }
.content-box{ background: var(--blue); border-radius: 6px; }
.content-box .size{ color: var(--ink); }
.margin-layer > .tag{ color: var(--orange); }
.border-layer > .tag{ color: var(--ink); }
.margin-swatch{ background: rgba(251, 146, 60, .28); border: 1px dashed var(--orange); }
.border-swatch{ background: var(--yellow); }
.padding-swatch{ background: var(--green); }
.content-swatch{ background: var(--blue); border-color: transparent; }

/* ---------- 9. Flexbox & Grid: bunte Elemente 1 / 2 / 3 ---------- */
.flex-container, .grid-container{
  border: 1px dashed rgba(34, 211, 238, .5); border-radius: 14px;
}
.flex-item{ border-radius: 12px; color: var(--ink); }
.flex-item:nth-child(3n+1){ background: var(--pink);   color: var(--ink); }
.flex-item:nth-child(3n+2){ background: var(--cyan);   color: var(--ink); }
.flex-item:nth-child(3n)  { background: var(--yellow); color: var(--ink); }

.grid-cell{ border-radius: 10px; color: var(--ink); }
.grid-cell:nth-child(3n+1){ background: var(--pink); }
.grid-cell:nth-child(3n+2){ background: var(--cyan); }
.grid-cell:nth-child(3n)  { background: var(--yellow); }
.grid-cell.featured{ background: var(--violet); color: var(--ink); }

/* ---------- 10. HTML-Struktur-Seite ---------- */
.landmark{ border: 1.5px dashed rgba(34, 211, 238, .5); border-radius: 12px; }
.landmark b{ color: var(--cyan); }
.landmark.main{ background: rgba(251, 191, 36, .08); }
.landmark.nav{ background: rgba(244, 114, 182, .1); }

/* ---------- 11. Umschalter, CSS-/JavaScript-Seiten ---------- */
.seg button.active{ color: var(--ink); font-weight: 700; }
.demo-box{ border-radius: 14px; }
.actions button{ border-radius: 12px; }
.actions button:hover{ border-color: var(--cyan); background: rgba(34, 211, 238, .1); }

/* ---------- 12. Weiter-Leiste ---------- */
.next .up-next{ color: var(--cyan); }