/* ==========================================================================
   Elias' 3D-Druck-Werkstatt  –  Design
   Idee: Die Seite sieht aus wie das Innere einer Werkstatt bei Nacht.
   Dunkel, Neonlicht, und im Hintergrund das Raster vom Druckbett.
   ========================================================================== */

:root {
  --bg:        #0d1117;
  --bg2:       #131b26;
  --karte:     #1a2331;
  --karte2:    #212d3e;
  --rand:      #2c3a4e;
  --text:      #e9eff8;
  --text-leise:#8fa2bb;

  --neon:      #2ff2c0;   /* Mint – die Hauptfarbe */
  --neon2:     #ff5fa2;   /* Pink */
  --neon3:     #ffc531;   /* Gelb */
  --neon4:     #8b7bff;   /* Lila */

  --radius:    22px;
  --schatten:  0 18px 40px rgba(0,0,0,.45);
  --font:      'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-fett: 'Arial Black', 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  /* Das Raster vom Druckbett */
  background-image:
    linear-gradient(rgba(47,242,192,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47,242,192,.045) 1px, transparent 1px),
    radial-gradient(circle at 15% 0%, rgba(139,123,255,.16), transparent 55%),
    radial-gradient(circle at 85% 12%, rgba(47,242,192,.12), transparent 50%);
  background-size: 44px 44px, 44px 44px, 100% 100%, 100% 100%;
  overflow-x: hidden;
}

h1, h2, h3, .fett { font-family: var(--font-fett); letter-spacing: -.5px; }

a { color: var(--neon); }

/* ==========================  Kopfzeile  ================================== */

.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 22px;
  background: rgba(13,17,23,.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rand);
}

.logo {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-fett); font-size: 1.05rem;
  text-decoration: none; color: var(--text);
  cursor: pointer; user-select: none;
  background: none; border: 0; padding: 0;
}
.logo-wuerfel {
  width: 34px; height: 34px; flex: none;
  background: linear-gradient(135deg, var(--neon), var(--neon4));
  border-radius: 9px;
  display: grid; place-items: center;
  font-size: 18px;
  box-shadow: 0 0 18px rgba(47,242,192,.5);
  animation: schweben 3s ease-in-out infinite;
}
@keyframes schweben { 0%,100% { transform: translateY(0) rotate(0) } 50% { transform: translateY(-4px) rotate(-6deg) } }

.logo b { color: var(--neon); }

.nav { display: flex; gap: 4px; margin-left: auto; align-items: center; }

/* Die Seitenlinks. Auf schmalen Bildschirmen wandern sie in das
   Klapp-Menue – siehe ganz unten bei "Handy". */
.nav-links { display: flex; gap: 4px; align-items: center; }

/* Der Menue-Knopf ist auf breiten Bildschirmen nicht noetig */
.menue-knopf { display: none; }

.nav-link {
  padding: 8px 14px; border-radius: 12px;
  color: var(--text-leise); text-decoration: none;
  font-weight: 600; font-size: .9rem;
  transition: .15s;
}
.nav-link:hover { background: var(--karte2); color: var(--text); }
.nav-link.aktiv { background: var(--karte2); color: var(--neon); }

/* Warenkorb-Knopf */
.korb-knopf {
  position: relative;
  background: linear-gradient(135deg, var(--neon), #17c9a0);
  color: #06211b; border: 0;
  font-family: var(--font-fett); font-size: .9rem;
  padding: 10px 18px; border-radius: 14px; cursor: pointer;
  transition: .15s;
}
.korb-knopf:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(47,242,192,.35); }
.korb-zahl {
  position: absolute; top: -7px; right: -7px;
  background: var(--neon2); color: #fff;
  min-width: 22px; height: 22px; border-radius: 11px;
  font-size: .75rem; display: grid; place-items: center;
  border: 2px solid var(--bg);
}
.korb-zahl:empty, .korb-zahl[data-leer="ja"] { display: none; }

.icon-knopf {
  background: var(--karte2); border: 1px solid var(--rand);
  color: var(--text-leise); width: 38px; height: 38px;
  border-radius: 11px; cursor: pointer; font-size: 1rem;
  transition: .15s;
}
.icon-knopf:hover { color: var(--neon); border-color: var(--neon); }

/* ==========================  Hero  ====================================== */

.hero {
  max-width: 1180px; margin: 0 auto;
  padding: 54px 22px 30px;
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center;
}

.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(47,242,192,.12); border: 1px solid rgba(47,242,192,.35);
  color: var(--neon); font-size: .8rem; font-weight: 700;
  padding: 7px 14px; border-radius: 999px; margin-bottom: 18px;
}
.punkt {
  width: 8px; height: 8px; border-radius: 50%; background: var(--neon);
  animation: pulsen 1.4s infinite;
}
@keyframes pulsen { 0%,100% { opacity: 1; transform: scale(1) } 50% { opacity: .35; transform: scale(.7) } }

.hero h1 { font-size: clamp(2.2rem, 5.5vw, 3.8rem); line-height: 1.02; margin: 0 0 16px; }
.hero h1 .glow {
  background: linear-gradient(120deg, var(--neon), var(--neon3), var(--neon2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p.lead { font-size: 1.1rem; color: var(--text-leise); line-height: 1.6; margin: 0 0 26px; max-width: 46ch; }

.hero-knoepfe { display: flex; gap: 12px; flex-wrap: wrap; }

.knopf {
  font-family: var(--font-fett); font-size: .95rem;
  padding: 15px 26px; border-radius: 16px; border: 0;
  cursor: pointer; text-decoration: none; display: inline-block;
  transition: .18s;
}
.knopf-haupt {
  background: linear-gradient(135deg, var(--neon), #16b894);
  color: #06211b;
  box-shadow: 0 10px 26px rgba(47,242,192,.3);
}
.knopf-haupt:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 14px 34px rgba(47,242,192,.45); }
.knopf-neben {
  background: var(--karte2); color: var(--text); border: 1px solid var(--rand);
}
.knopf-neben:hover { border-color: var(--neon); color: var(--neon); transform: translateY(-3px); }

/* Der Live-Drucker im Hero */
.drucker {
  background: linear-gradient(170deg, var(--karte), #141c27);
  border: 1px solid var(--rand);
  border-radius: 26px; padding: 20px;
  box-shadow: var(--schatten);
  position: relative; overflow: hidden;
}
.drucker::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 20%, rgba(47,242,192,.14), transparent 60%);
  pointer-events: none;
}
.drucker-kopf {
  display: flex; align-items: center; justify-content: space-between;
  font-size: .75rem; color: var(--text-leise); margin-bottom: 12px;
  font-weight: 700; letter-spacing: .5px;
}
.drucker-buehne {
  background: #0a0e14; border-radius: 16px; height: 210px;
  position: relative; overflow: hidden;
  border: 1px solid #223044;
}
/* Druckbett-Raster in der Buehne */
.drucker-buehne::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 46px;
  background:
    repeating-linear-gradient(90deg, rgba(47,242,192,.18) 0 1px, transparent 1px 18px),
    linear-gradient(180deg, transparent, rgba(47,242,192,.1));
  transform: perspective(180px) rotateX(58deg);
  transform-origin: bottom;
}
#druck-svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.duese {
  position: absolute; top: 8px; width: 26px; height: 34px;
  background: linear-gradient(180deg, #93a6bf, #5b6c85);
  border-radius: 5px 5px 3px 3px;
  box-shadow: 0 0 14px rgba(255,197,49,.55);
}
.duese::after {
  content: ''; position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%);
  border-left: 7px solid transparent; border-right: 7px solid transparent;
  border-top: 8px solid var(--neon3);
}

.drucker-fuss { display: flex; gap: 10px; margin-top: 14px; }
.stat-kachel {
  flex: 1; background: #0f1620; border: 1px solid #223044;
  border-radius: 12px; padding: 9px 11px;
}
.stat-kachel span { display: block; font-size: .68rem; color: var(--text-leise); letter-spacing: .4px; }
.stat-kachel b {
  font-family: var(--font-fett); font-size: .95rem; color: var(--neon);
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Fortschrittsbalken */
.balken { height: 7px; background: #0f1620; border-radius: 4px; overflow: hidden; margin-top: 10px; }
.balken i { display: block; height: 100%; background: linear-gradient(90deg, var(--neon), var(--neon3)); transition: width .4s; }

/* ==========================  Laufband  ================================== */

.laufband {
  border-top: 1px solid var(--rand); border-bottom: 1px solid var(--rand);
  background: rgba(47,242,192,.05);
  overflow: hidden; padding: 11px 0; margin: 26px 0 8px;
  white-space: nowrap;
}
.laufband-inhalt {
  display: inline-block;
  animation: laufen 26s linear infinite;
  font-weight: 700; font-size: .88rem; color: var(--neon);
}
.laufband-inhalt span { margin: 0 26px; opacity: .85; }
@keyframes laufen { from { transform: translateX(0) } to { transform: translateX(-50%) } }

/* ==========================  Bereiche  ================================== */

/* scroll-margin, damit Sprungmarken nicht hinter der Kopfzeile landen */
.bereich { max-width: 1180px; margin: 0 auto; padding: 46px 22px; scroll-margin-top: 80px; }

.bereich-kopf { margin-bottom: 26px; }
.bereich-kopf h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); margin: 0 0 8px; }
.bereich-kopf p { color: var(--text-leise); margin: 0; max-width: 60ch; line-height: 1.55; }

/* Filter-Knoepfe */
.filter { display: flex; gap: 9px; flex-wrap: wrap; margin: 22px 0 26px; }
.filter button {
  background: var(--karte); border: 1px solid var(--rand); color: var(--text-leise);
  padding: 10px 17px; border-radius: 999px; cursor: pointer;
  font-weight: 700; font-size: .87rem; transition: .15s;
}
.filter button:hover { transform: translateY(-2px); color: var(--text); }
.filter button.aktiv {
  background: var(--neon); border-color: var(--neon); color: #06211b;
  box-shadow: 0 6px 18px rgba(47,242,192,.3);
}

/* ==========================  Produktkarten  ============================= */

.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 22px;
}

.karte {
  background: linear-gradient(165deg, var(--karte), #151d29);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  overflow: hidden; cursor: pointer;
  transition: transform .2s cubic-bezier(.2,.9,.3,1.3), box-shadow .2s, border-color .2s;
  position: relative;
  display: flex; flex-direction: column;
}
.karte:hover {
  transform: translateY(-8px) rotate(-.7deg);
  border-color: var(--neon);
  box-shadow: 0 22px 44px rgba(0,0,0,.5), 0 0 0 1px rgba(47,242,192,.3);
}
.karte.rein { animation: reinploppen .4s cubic-bezier(.2,.9,.3,1.4) backwards; }
@keyframes reinploppen { from { opacity: 0; transform: translateY(24px) scale(.94) } }

.karte-bild {
  height: 190px; position: relative;
  background:
    radial-gradient(circle at 50% 45%, rgba(47,242,192,.13), transparent 62%),
    linear-gradient(180deg, #101823, #0c1219);
  display: grid; place-items: center;
  border-bottom: 1px solid var(--rand);
  overflow: hidden;
}
.karte-bild svg { width: 78%; height: 78%; overflow: visible; transition: transform .35s cubic-bezier(.2,.9,.3,1.3); }
.karte:hover .karte-bild svg { transform: scale(1.12) rotate(4deg); }

/* Schatten unter dem Objekt */
.karte-bild::after {
  content: ''; position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  width: 55%; height: 14px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,0,0,.55), transparent 70%);
}

.karte-inhalt { padding: 17px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.karte h3 { margin: 0 0 5px; font-size: 1.08rem; }
.karte .tagline { color: var(--neon); font-size: .82rem; font-weight: 700; margin: 0 0 9px; }
.karte .beschr { color: var(--text-leise); font-size: .87rem; line-height: 1.5; margin: 0 0 14px; flex: 1; }

.karte-fuss { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.preis { font-family: var(--font-fett); font-size: 1.3rem; color: var(--neon3); }
.preis small { font-size: .68rem; color: var(--text-leise); font-family: var(--font); display: block; font-weight: 600; }

.mini-knopf {
  background: var(--neon); color: #06211b; border: 0;
  padding: 11px 16px; border-radius: 12px; cursor: pointer;
  font-family: var(--font-fett); font-size: .82rem; transition: .15s;
}
.mini-knopf:hover { transform: scale(1.06); box-shadow: 0 6px 16px rgba(47,242,192,.4); }

/* Ecken-Aufkleber */
.sticker {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  background: var(--neon2); color: #fff;
  font-family: var(--font-fett); font-size: .68rem;
  padding: 5px 11px; border-radius: 999px;
  transform: rotate(-7deg);
  box-shadow: 0 4px 12px rgba(255,95,162,.4);
}
.sticker.gelb { background: var(--neon3); color: #3a2a00; }
.sticker.lila { background: var(--neon4); }

/* Schwierigkeits-Punkte */
.schwierigkeit { display: flex; gap: 3px; position: absolute; top: 14px; right: 14px; z-index: 3; }
.schwierigkeit i { width: 6px; height: 6px; border-radius: 50%; background: #35455c; }
.schwierigkeit i.an { background: var(--neon3); box-shadow: 0 0 7px var(--neon3); }

/* ==========================  Konfigurator (Overlay)  ==================== */

.overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(5,8,12,.78); backdrop-filter: blur(7px);
  display: none; align-items: center; justify-content: center; padding: 20px;
  overflow-y: auto;
}
.overlay.auf { display: flex; animation: einblenden .2s; }
@keyframes einblenden { from { opacity: 0 } }

.dialog {
  background: linear-gradient(165deg, var(--karte), #131a25);
  border: 1px solid var(--rand); border-radius: 26px;
  width: 100%; max-width: 940px; max-height: 92vh; overflow-y: auto;
  box-shadow: var(--schatten);
  animation: hochploppen .3s cubic-bezier(.2,.9,.3,1.3);
  position: relative;
}
@keyframes hochploppen { from { transform: translateY(30px) scale(.96); opacity: 0 } }

.dialog-schliessen {
  position: absolute; top: 16px; right: 16px; z-index: 5;
  background: var(--karte2); border: 1px solid var(--rand); color: var(--text-leise);
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer; font-size: 1.1rem;
}
.dialog-schliessen:hover { background: var(--neon2); color: #fff; border-color: var(--neon2); }

.konfig { display: grid; grid-template-columns: 1fr 1fr; }

.konfig-vorschau {
  background:
    radial-gradient(circle at 50% 40%, rgba(47,242,192,.16), transparent 62%),
    linear-gradient(180deg, #0f1721, #0a0e14);
  padding: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-right: 1px solid var(--rand);
  position: relative; min-height: 340px;
}
.konfig-vorschau svg { width: 100%; max-width: 290px; height: auto; overflow: visible; }
.konfig-vorschau.dreht svg { animation: wackeln 2.5s ease-in-out infinite; }
@keyframes wackeln { 0%,100% { transform: rotate(-4deg) translateY(0) } 50% { transform: rotate(4deg) translateY(-9px) } }

.vorschau-label {
  margin-top: 14px; font-size: .8rem; color: var(--text-leise); text-align: center;
  background: rgba(0,0,0,.35); padding: 7px 15px; border-radius: 999px;
  border: 1px solid var(--rand);
}

.konfig-form { padding: 30px 28px; }
.konfig-form h2 { margin: 0 0 4px; font-size: 1.5rem; }
.konfig-form .tagline { color: var(--neon); font-weight: 700; font-size: .87rem; margin: 0 0 14px; }
.konfig-form .beschr { color: var(--text-leise); font-size: .9rem; line-height: 1.6; margin: 0 0 22px; }

.feld { margin-bottom: 20px; }
.feld > label {
  display: block; font-family: var(--font-fett); font-size: .78rem;
  text-transform: uppercase; letter-spacing: .8px; color: var(--text-leise); margin-bottom: 9px;
}

/* Farbwahl */
.farben { display: flex; flex-wrap: wrap; gap: 9px; }
.farb-punkt {
  width: 38px; height: 38px; border-radius: 12px; cursor: pointer;
  border: 2px solid transparent; position: relative;
  transition: .15s;
}
.farb-punkt:hover { transform: scale(1.15) rotate(-6deg); }
.farb-punkt.gewaehlt {
  border-color: #fff;
  box-shadow: 0 0 0 3px var(--neon), 0 6px 16px rgba(0,0,0,.4);
  transform: scale(1.1);
}
.farb-punkt[data-effekt="glitzer"]::after,
.farb-punkt[data-effekt="leuchten"]::after,
.farb-punkt[data-effekt="glanz"]::after {
  content: '★'; position: absolute; top: -6px; right: -5px;
  font-size: .62rem; background: var(--neon3); color: #3a2a00;
  width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center;
}
.farb-punkt[data-effekt="leuchten"] { box-shadow: 0 0 14px rgba(182,240,106,.6); }

/* Auswahl-Reihen (Groesse, Farbanzahl) */
.optionen { display: flex; gap: 9px; flex-wrap: wrap; }
.option {
  flex: 1; min-width: 88px;
  background: var(--karte2); border: 1px solid var(--rand);
  border-radius: 14px; padding: 11px 12px; cursor: pointer;
  text-align: center; transition: .15s;
}
.option:hover { border-color: var(--neon); transform: translateY(-2px); }
.option.gewaehlt { background: rgba(47,242,192,.14); border-color: var(--neon); }
.option b { display: block; font-family: var(--font-fett); font-size: .95rem; }
.option span { font-size: .7rem; color: var(--text-leise); }
.option.gewaehlt b { color: var(--neon); }

/* Nicht wählbar, z.B. 4 Farben bei TPU */
.option.gesperrt { opacity: .4; cursor: not-allowed; }
.option.gesperrt:hover { transform: none; border-color: var(--rand); }

/* Emoji-Auswahl beim Produkt-Anlegen */
.emoji-wahl {
  width: 42px; height: 42px; border-radius: 12px; cursor: pointer;
  background: var(--karte2); border: 2px solid var(--rand);
  font-size: 1.3rem; line-height: 1; transition: .13s;
}
.emoji-wahl:hover { transform: scale(1.18) rotate(-7deg); border-color: var(--neon); }
.emoji-wahl.gewaehlt {
  border-color: var(--neon); background: rgba(47,242,192,.16); transform: scale(1.1);
  box-shadow: 0 0 14px rgba(47,242,192,.3);
}

/* Material-Info im Konfigurator */
.mat-info {
  margin: 10px 0 0; font-size: .8rem; line-height: 1.5;
  color: var(--text-leise);
  background: rgba(139,123,255,.09); border: 1px solid rgba(139,123,255,.28);
  border-radius: 12px; padding: 10px 13px;
}

/* Kleines Zeichen auf Karten, die es auch in TPU gibt */
.tpu-pin {
  font-size: .85rem; vertical-align: middle;
  filter: drop-shadow(0 0 6px rgba(139,123,255,.8));
}

/* Menge */
.menge { display: flex; align-items: center; gap: 12px; }
.menge button {
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--karte2); border: 1px solid var(--rand); color: var(--text);
  font-size: 1.3rem; cursor: pointer; font-family: var(--font-fett);
}
.menge button:hover { background: var(--neon); color: #06211b; border-color: var(--neon); }
.menge input {
  width: 62px; height: 42px; text-align: center;
  background: #0f1620; border: 1px solid var(--rand); border-radius: 12px;
  color: var(--text); font-family: var(--font-fett); font-size: 1.1rem;
}

/* Preis und Kaufknopf bleiben beim Scrollen unten kleben */
.konfig-kauf {
  position: sticky; bottom: -30px;
  background: linear-gradient(180deg, transparent, #161f2b 18%);
  padding: 10px 0 14px; margin-top: 6px;
}

/* Preis-Anzeige im Konfigurator */
.preis-box {
  background: #0f1620; border: 1px solid var(--rand);
  border-radius: 16px; padding: 15px 17px; margin: 22px 0 16px;
}
.preis-zeile { display: flex; justify-content: space-between; font-size: .85rem; color: var(--text-leise); margin-bottom: 6px; }
.preis-zeile.rabatt { color: var(--neon); font-weight: 700; }
.preis-zeile.gesamt {
  border-top: 1px solid var(--rand); padding-top: 11px; margin-top: 11px; margin-bottom: 0;
  font-family: var(--font-fett); font-size: 1.35rem; color: var(--text);
}
.preis-zeile.gesamt b { color: var(--neon3); }

.knopf-breit { width: 100%; text-align: center; }

/* ==========================  Warenkorb  ================================= */

.korb-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(430px, 100%);
  background: linear-gradient(180deg, var(--karte), #10161f);
  border-left: 1px solid var(--rand);
  z-index: 110; transform: translateX(105%); transition: transform .3s cubic-bezier(.3,.9,.3,1);
  display: flex; flex-direction: column;
  box-shadow: -20px 0 50px rgba(0,0,0,.5);
}
.korb-panel.auf { transform: translateX(0); }

.korb-kopf {
  padding: 20px 22px; border-bottom: 1px solid var(--rand);
  display: flex; align-items: center; justify-content: space-between;
}
.korb-kopf h2 { margin: 0; font-size: 1.25rem; }
.korb-liste { flex: 1; overflow-y: auto; padding: 16px 18px; }

.korb-zeile {
  display: flex; gap: 12px; align-items: center;
  background: var(--karte2); border: 1px solid var(--rand);
  border-radius: 16px; padding: 11px; margin-bottom: 11px;
  animation: reinploppen .3s;
}
.korb-bild {
  width: 58px; height: 58px; flex: none; border-radius: 12px;
  background: #0d131b; display: grid; place-items: center; overflow: hidden;
}
.korb-bild svg { width: 88%; height: 88%; overflow: visible; }
.korb-info { flex: 1; min-width: 0; }
.korb-info b { display: block; font-size: .9rem; }
.korb-info span { font-size: .74rem; color: var(--text-leise); }
.korb-preis { font-family: var(--font-fett); color: var(--neon3); white-space: nowrap; }
.korb-weg {
  background: none; border: 0; color: var(--text-leise); cursor: pointer;
  font-size: 1.1rem; padding: 4px 6px;
}
.korb-weg:hover { color: var(--neon2); }

.korb-fuss { padding: 18px 20px; border-top: 1px solid var(--rand); background: rgba(0,0,0,.2); }

.korb-leer { text-align: center; color: var(--text-leise); padding: 56px 20px; }
.korb-leer div { font-size: 3.4rem; margin-bottom: 12px; opacity: .5; }

/* ==========================  Werkstatt / Info  ========================== */

.info-gitter { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.info-karte {
  background: var(--karte); border: 1px solid var(--rand);
  border-radius: var(--radius); padding: 22px;
  transition: .2s;
}
.info-karte:hover { border-color: var(--neon4); transform: translateY(-4px); }
.info-karte .ikon { font-size: 2rem; margin-bottom: 10px; display: block; }
.info-karte h3 { margin: 0 0 7px; font-size: 1.05rem; }
.info-karte p { margin: 0; color: var(--text-leise); font-size: .88rem; line-height: 1.55; }

/* Drucker-Status */
.drucker-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.drucker-karte {
  background: var(--karte); border: 1px solid var(--rand);
  border-radius: var(--radius); padding: 20px;
}
.drucker-karte header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.drucker-karte header b { font-family: var(--font-fett); flex: 1; }
.lampe {
  width: 10px; height: 10px; border-radius: 50%; background: var(--neon);
  box-shadow: 0 0 10px var(--neon); animation: pulsen 1.6s infinite;
}
.lampe.aus { background: #4a5a72; box-shadow: none; animation: none; }
.drucker-karte .zeile { display: flex; justify-content: space-between; font-size: .82rem; color: var(--text-leise); margin-top: 9px; }
.drucker-karte .zeile b { color: var(--text); }

/* ==========================  Fusszeile  ================================= */

footer {
  border-top: 1px solid var(--rand); margin-top: 40px;
  padding: 34px 22px; text-align: center; color: var(--text-leise); font-size: .87rem;
}
footer .fuss-logo { font-family: var(--font-fett); color: var(--text); font-size: 1.1rem; margin-bottom: 9px; }

/* ==========================  Konfetti + Effekte  ======================== */

#konfetti { position: fixed; inset: 0; pointer-events: none; z-index: 200; }
.konfetti-stueck {
  position: absolute; width: 10px; height: 14px; border-radius: 2px;
  animation: fallen linear forwards;
}
@keyframes fallen {
  to { transform: translateY(105vh) rotate(720deg); opacity: 0; }
}

/* Toast-Meldung */
#toast-box { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 300; display: flex; flex-direction: column; gap: 9px; align-items: center; }
.toast {
  background: var(--karte2); border: 1px solid var(--neon);
  color: var(--text); padding: 13px 22px; border-radius: 14px;
  font-weight: 700; font-size: .9rem;
  box-shadow: 0 12px 30px rgba(0,0,0,.5);
  animation: toast-rein .3s cubic-bezier(.2,.9,.3,1.4);
  display: flex; align-items: center; gap: 9px;
}
.toast.weg { animation: toast-raus .3s forwards; }
@keyframes toast-rein { from { transform: translateY(24px); opacity: 0 } }
@keyframes toast-raus { to { transform: translateY(24px); opacity: 0 } }

/* Sticker-Sammlung (Erfolge) */
.sticker-leiste { display: flex; gap: 10px; flex-wrap: wrap; }
.erfolg {
  background: var(--karte); border: 1px dashed var(--rand);
  border-radius: 16px; padding: 13px 15px; text-align: center;
  min-width: 108px; opacity: .38; transition: .3s; filter: grayscale(1);
}
.erfolg.freigeschaltet {
  opacity: 1; filter: none; border-style: solid; border-color: var(--neon3);
  box-shadow: 0 0 18px rgba(255,197,49,.2);
  animation: reinploppen .5s cubic-bezier(.2,.9,.3,1.5);
  cursor: pointer; position: relative;
}
.erfolg.freigeschaltet:hover {
  transform: translateY(-5px) scale(1.05) rotate(-2deg);
  border-color: var(--neon);
  box-shadow: 0 10px 26px rgba(255,197,49,.35);
}
.erfolg.freigeschaltet:hover .ikon { animation: emoji-wippen .8s ease-in-out infinite; }
.erfolg .ikon { font-size: 1.7rem; display: block; margin-bottom: 5px; }
.erfolg b { font-size: .76rem; display: block; }
.erfolg span { font-size: .66rem; color: var(--text-leise); }

/* "nochmal"-Hinweis, der beim Drüberfahren auftaucht */
.nochmal-hinweis {
  position: absolute; left: 50%; bottom: 7px; transform: translateX(-50%);
  background: var(--neon3); color: #3a2a00 !important;
  font-family: var(--font-fett); font-size: .6rem !important;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  opacity: 0; transition: opacity .18s; pointer-events: none;
}
.erfolg.freigeschaltet:hover .nochmal-hinweis { opacity: 1; }

/* ==========================  Sticker-Feier  ============================= */

#feier {
  position: fixed; inset: 0; z-index: 400;
  display: none; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 45%, rgba(255,197,49,.16), rgba(5,8,12,.86) 60%);
  backdrop-filter: blur(6px);
  cursor: pointer;
}
#feier.auf { display: flex; animation: einblenden .25s; }
#feier.zu  { animation: ausblenden .45s forwards; }
@keyframes ausblenden { to { opacity: 0; visibility: hidden; } }

.feier-inhalt { text-align: center; position: relative; padding: 20px; }

/* Strahlenkranz, der sich langsam dreht */
.feier-strahlen {
  position: absolute; top: 50%; left: 50%;
  width: 620px; height: 620px; margin: -310px 0 0 -310px;
  background: conic-gradient(
    from 0deg,
    rgba(255,197,49,.30) 0deg 8deg, transparent 8deg 30deg,
    rgba(47,242,192,.26) 30deg 38deg, transparent 38deg 60deg,
    rgba(255,95,162,.26) 60deg 68deg, transparent 68deg 90deg,
    rgba(139,123,255,.26) 90deg 98deg, transparent 98deg 120deg,
    rgba(255,197,49,.30) 120deg 128deg, transparent 128deg 150deg,
    rgba(47,242,192,.26) 150deg 158deg, transparent 158deg 180deg,
    rgba(255,95,162,.26) 180deg 188deg, transparent 188deg 210deg,
    rgba(139,123,255,.26) 210deg 218deg, transparent 218deg 240deg,
    rgba(255,197,49,.30) 240deg 248deg, transparent 248deg 270deg,
    rgba(47,242,192,.26) 270deg 278deg, transparent 278deg 300deg,
    rgba(255,95,162,.26) 300deg 308deg, transparent 308deg 330deg,
    rgba(139,123,255,.26) 330deg 338deg, transparent 338deg 360deg);
  animation: strahlen-dreh 9s linear infinite;
  mask-image: radial-gradient(circle, #000 22%, transparent 68%);
  -webkit-mask-image: radial-gradient(circle, #000 22%, transparent 68%);
  pointer-events: none;
}
@keyframes strahlen-dreh { to { transform: rotate(360deg); } }

.feier-titel {
  font-family: var(--font-fett);
  font-size: clamp(1rem, 3vw, 1.5rem);
  letter-spacing: 3px; text-transform: uppercase;
  background: linear-gradient(100deg, var(--neon), var(--neon3), var(--neon2), var(--neon));
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: schimmern 2.4s linear infinite, titel-rein .5s cubic-bezier(.2,.9,.3,1.5) backwards;
  margin-bottom: 22px; position: relative;
}
@keyframes schimmern { to { background-position: 300% 0; } }
@keyframes titel-rein { from { opacity: 0; transform: translateY(-22px); } }

/* Die Sticker-Scheibe selbst */
.feier-sticker {
  width: 190px; height: 190px; margin: 0 auto 24px; position: relative;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--neon3), #ff9d2f 55%, var(--neon2));
  display: grid; place-items: center;
  box-shadow: 0 0 60px rgba(255,197,49,.55), inset 0 -10px 26px rgba(0,0,0,.28);
  animation: sticker-landung 1s cubic-bezier(.18,1.1,.32,1.4) backwards;
  border: 7px solid rgba(255,255,255,.92);
}
@keyframes sticker-landung {
  0%   { opacity: 0; transform: scale(0) rotate(-220deg); }
  55%  { opacity: 1; transform: scale(1.28) rotate(14deg); }
  75%  { transform: scale(.93) rotate(-7deg); }
  100% { transform: scale(1) rotate(0); }
}
.feier-sticker::after {           /* Glanzlicht wie auf einem echten Aufkleber */
  content: ''; position: absolute; top: 14px; left: 26px;
  width: 74px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,.4); filter: blur(7px);
}
.feier-emoji {
  font-size: 5.6rem; line-height: 1; position: relative; z-index: 2;
  filter: drop-shadow(0 5px 10px rgba(0,0,0,.32));
  animation: emoji-wippen 2.1s ease-in-out .95s infinite;
}
@keyframes emoji-wippen {
  0%, 100% { transform: rotate(-7deg) scale(1); }
  50%      { transform: rotate(7deg) scale(1.09); }
}

/* Ring, der nach aussen pulsiert */
.feier-ring {
  position: absolute; top: 50%; left: 50%; width: 190px; height: 190px;
  margin: -95px 0 0 -95px; border-radius: 50%;
  border: 3px solid var(--neon3);
  animation: ring-welle 2s ease-out infinite; pointer-events: none;
}
.feier-ring:nth-of-type(2) { animation-delay: .65s; border-color: var(--neon); }
.feier-ring:nth-of-type(3) { animation-delay: 1.3s; border-color: var(--neon2); }
@keyframes ring-welle {
  from { transform: scale(1); opacity: .85; }
  to   { transform: scale(2.5); opacity: 0; }
}

.feier-name {
  font-family: var(--font-fett); font-size: clamp(1.7rem, 5vw, 2.7rem);
  color: #fff; margin-bottom: 8px; position: relative;
  text-shadow: 0 4px 22px rgba(0,0,0,.55);
  animation: titel-rein .5s .3s cubic-bezier(.2,.9,.3,1.5) backwards;
}
.feier-info {
  color: var(--text-leise); font-size: 1rem; position: relative;
  animation: titel-rein .5s .42s backwards;
}
.feier-zaehler {
  margin-top: 20px; font-size: .84rem; color: var(--text-leise);
  position: relative; animation: titel-rein .5s .55s backwards;
}
.feier-zaehler b { color: var(--neon3); font-family: var(--font-fett); font-size: 1.15rem; }
.feier-tipp {
  margin-top: 14px; font-size: .76rem; color: var(--text-leise);
  opacity: .65; position: relative;
}

/* Party-Modus (Easter Egg) */
body.party { animation: regenbogen 4s linear infinite; }
@keyframes regenbogen { to { filter: hue-rotate(360deg) } }

/* ==========================  Bestell-Zusammenfassung  =================== */

.zettel {
  background: #0f1620; border: 1px solid var(--rand); border-radius: 18px;
  padding: 22px; font-family: 'Consolas', monospace; font-size: .86rem;
  line-height: 1.75; color: var(--text-leise);
  max-height: 300px; overflow-y: auto;
}
.zettel .kopf { color: var(--neon); font-weight: 700; }
.zettel .gesamt { color: var(--neon3); font-size: 1.1rem; font-weight: 700; }

.hinweis {
  background: rgba(255,197,49,.1); border: 1px solid rgba(255,197,49,.4);
  border-radius: 16px; padding: 15px 17px; color: #ffdd8a;
  font-size: .87rem; line-height: 1.6; margin: 18px 0;
}
.hinweis b { color: var(--neon3); }

/* ==========================================================================
   SPEZIALANFERTIGUNGEN
   ========================================================================== */

.panel-gross {
  background: linear-gradient(165deg, var(--karte), #141c27);
  border: 1px solid var(--rand); border-radius: 26px;
  padding: 28px; box-shadow: var(--schatten);
}

/* Hervorgehobener Navi-Link */
.nav-link.hervor {
  color: var(--neon4); border: 1px solid rgba(139,123,255,.45);
  background: rgba(139,123,255,.10);
}
.nav-link.hervor:hover { background: rgba(139,123,255,.22); color: #c9c0ff; }

/* ----------  Banner im Shop  ---------- */

.spezial-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 22px;
  background: linear-gradient(115deg, rgba(139,123,255,.16), rgba(47,242,192,.10));
  border: 1px solid rgba(139,123,255,.4);
  border-radius: var(--radius); padding: 24px 26px;
  text-decoration: none; color: var(--text);
  transition: .2s; position: relative; overflow: hidden;
}
.spezial-banner::after {
  content: ''; position: absolute; top: -60%; right: -8%;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(139,123,255,.22), transparent 70%);
  pointer-events: none;
}
.spezial-banner:hover { transform: translateY(-3px); border-color: var(--neon4); box-shadow: 0 16px 36px rgba(139,123,255,.22); }
.sb-links { display: flex; align-items: flex-start; gap: 18px; }
.sb-ikon { font-size: 2.6rem; flex: none; animation: schweben 3.4s ease-in-out infinite; }
.spezial-banner b { display: block; font-family: var(--font-fett); font-size: 1.15rem; margin-bottom: 6px; }
.spezial-banner p { margin: 0; color: var(--text-leise); font-size: .89rem; line-height: 1.55; max-width: 62ch; }
.sb-knopf {
  flex: none; background: var(--neon4); color: #fff;
  font-family: var(--font-fett); font-size: .88rem;
  padding: 14px 22px; border-radius: 14px; white-space: nowrap;
  box-shadow: 0 8px 22px rgba(139,123,255,.35);
}

/* ----------  Referenzprojekte  ---------- */

.referenz {
  display: grid; grid-template-columns: 340px 1fr; gap: 28px; align-items: center;
  background: linear-gradient(165deg, var(--karte), #151d29);
  border: 1px solid var(--rand); border-radius: 26px;
  padding: 26px; margin-bottom: 22px;
  transition: border-color .2s;
}
.referenz:hover { border-color: var(--neon4); }
.referenz.gedreht { grid-template-columns: 1fr 340px; }
.referenz.gedreht .referenz-bild { order: 2; }

.referenz-bild {
  position: relative; border-radius: 20px; padding: 18px;
  background:
    radial-gradient(circle at 50% 42%, rgba(139,123,255,.18), transparent 62%),
    linear-gradient(180deg, #101823, #0b1118);
  border: 1px solid var(--rand);
  display: grid; place-items: center; min-height: 250px;
}
.referenz-bild svg { width: 100%; max-width: 250px; height: auto; overflow: visible; }
.marke {
  position: absolute; top: 13px; left: 13px;
  background: var(--neon4); color: #fff;
  font-family: var(--font-fett); font-size: .68rem;
  padding: 5px 12px; border-radius: 999px; transform: rotate(-4deg);
}

.referenz-text h3 { margin: 0 0 4px; font-size: 1.35rem; }
.fuer-wen { color: var(--neon); font-weight: 700; font-size: .87rem; margin: 0 0 18px; }

.problem-loesung { display: flex; flex-direction: column; gap: 6px; }
.pl-block { border-radius: 15px; padding: 14px 16px; border: 1px solid var(--rand); }
.pl-block b {
  display: block; font-family: var(--font-fett); font-size: .72rem;
  text-transform: uppercase; letter-spacing: .8px; margin-bottom: 6px;
}
.pl-block p { margin: 0; font-size: .89rem; line-height: 1.55; color: var(--text-leise); }
.pl-block.problem { background: rgba(255,95,162,.07); border-color: rgba(255,95,162,.3); }
.pl-block.problem b { color: var(--neon2); }
.pl-block.loesung { background: rgba(47,242,192,.07); border-color: rgba(47,242,192,.3); }
.pl-block.loesung b { color: var(--neon); }
.pl-pfeil { text-align: center; color: var(--text-leise); font-size: 1.2rem; }

.ergebnis-zeile {
  margin-top: 15px; font-family: var(--font-fett); font-size: .95rem; color: var(--neon);
}

/* ----------  Karten "was moeglich ist"  ---------- */

.art-karte { cursor: pointer; display: flex; flex-direction: column; }
.art-karte:hover { border-color: var(--neon); }
.art-karte p { flex: 1; }
.art-hinweis {
  font-size: .8rem !important; color: var(--neon3) !important;
  background: rgba(255,197,49,.08); border-radius: 10px; padding: 9px 11px; margin-top: 11px !important;
}

/* ----------  Schritt-Leiste  ---------- */

.schritt-leiste { display: flex; align-items: center; margin-bottom: 26px; }
.schritt-punkt {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  background: var(--karte2); border: 2px solid var(--rand);
  display: grid; place-items: center;
  font-family: var(--font-fett); font-size: .85rem; color: var(--text-leise);
  transition: .25s;
}
.schritt-punkt.aktiv {
  border-color: var(--neon); color: var(--neon);
  box-shadow: 0 0 16px rgba(47,242,192,.35); transform: scale(1.12);
}
.schritt-punkt.fertig { background: var(--neon); border-color: var(--neon); color: #06211b; }
.schritt-linie { flex: 1; height: 3px; background: var(--rand); transition: background .3s; }
.schritt-linie.fertig { background: var(--neon); }

/* ----------  Fragen  ---------- */

.frage-block { animation: reinploppen .3s; }
.frage-nummer {
  display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; color: var(--neon); margin-bottom: 8px;
}
.frage-block h3 { margin: 0 0 6px; font-size: 1.45rem; }
.frage-hilfe { color: var(--text-leise); font-size: .9rem; margin: 0 0 22px; line-height: 1.55; }

.antwort-liste { display: flex; flex-direction: column; gap: 10px; }
.antwort {
  display: flex; align-items: center; gap: 14px; text-align: left; width: 100%;
  background: var(--karte2); border: 1px solid var(--rand); border-radius: 16px;
  padding: 15px 17px; cursor: pointer; color: var(--text);
  font-family: var(--font); transition: .15s;
}
.antwort:hover { border-color: var(--neon); transform: translateX(4px); }
.antwort.gewaehlt { background: rgba(47,242,192,.12); border-color: var(--neon); }
.antwort-ikon { font-size: 1.6rem; flex: none; }
.antwort-text { flex: 1; min-width: 0; }
.antwort-text b { display: block; font-size: .98rem; margin-bottom: 2px; }
.antwort-text span { font-size: .8rem; color: var(--text-leise); }
.antwort-haken {
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  border: 2px solid var(--rand); display: grid; place-items: center;
  color: #06211b; font-weight: 700; font-size: .85rem;
}
.antwort.gewaehlt .antwort-haken { background: var(--neon); border-color: var(--neon); }

.assistent-fuss { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; }
.assistent-fuss .knopf { font-size: .87rem; padding: 12px 22px; }

/* ----------  Ergebnis  ---------- */

.ergebnis-kopf {
  display: flex; align-items: center; gap: 16px;
  background: var(--karte2); border: 2px solid var(--rand);
  border-radius: 18px; padding: 17px 20px; margin-bottom: 18px;
}
.ergebnis-ampel { font-size: 2.2rem; }
.ergebnis-kopf b { display: block; font-family: var(--font-fett); font-size: 1.25rem; }
.ergebnis-kopf span { font-size: .82rem; color: var(--text-leise); }

.warn-liste { display: flex; flex-direction: column; gap: 11px; margin-bottom: 20px; }
.warn-karte { border-radius: 16px; padding: 15px 17px; border: 1px solid var(--rand); }
.warn-karte b { display: block; font-family: var(--font-fett); font-size: .95rem; margin-bottom: 7px; }
.warn-karte p { margin: 0 0 6px; font-size: .87rem; line-height: 1.55; color: var(--text-leise); }
.warn-karte .warn-tipp { color: var(--text); font-weight: 600; margin: 0; }
.warn-karte.rot   { background: rgba(255,95,109,.08); border-color: rgba(255,95,109,.4); }
.warn-karte.rot b { color: #ff8b95; }
.warn-karte.gelb  { background: rgba(255,197,49,.08); border-color: rgba(255,197,49,.4); }
.warn-karte.gelb b { color: var(--neon3); }
.warn-karte.gruen { background: rgba(47,242,192,.08); border-color: rgba(47,242,192,.4); }
.warn-karte.gruen b { color: var(--neon); }

.ergebnis-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 6px; }
.ergebnis-label {
  display: block; font-family: var(--font-fett); font-size: .72rem;
  text-transform: uppercase; letter-spacing: .8px; color: var(--text-leise); margin-bottom: 9px;
}
.check-liste { margin: 0; padding: 0; list-style: none; }
.check-liste li {
  background: var(--karte2); border: 1px solid var(--rand); border-radius: 13px;
  padding: 12px 14px 12px 40px; margin-bottom: 8px;
  font-size: .87rem; line-height: 1.5; position: relative;
}
.check-liste li::before {
  content: '☐'; position: absolute; left: 14px; top: 10px;
  color: var(--neon); font-size: 1.1rem;
}

/* ----------  Drucken  ---------- */

@media print {
  body { background: #fff !important; color: #000; }
  .topbar, .hero, #projekte, #moeglich, footer, .schritt-leiste,
  .assistent-fuss, #konfetti, #toast-box { display: none !important; }
  .panel-gross, .zettel, .warn-karte, .check-liste li {
    background: #fff !important; border-color: #999 !important; color: #000 !important;
    box-shadow: none !important;
  }
  .zettel, .check-liste li, .warn-karte p { color: #000 !important; }
  .ergebnis-spalten { grid-template-columns: 1fr 1fr; }
}

/* ==========================  Handy  ===================================== */

@media (max-width: 980px) {
  /* Referenzprojekte: Bild oben, Text darunter – nebeneinander wird zu eng */
  .referenz, .referenz.gedreht { grid-template-columns: 1fr; gap: 20px; }
  .referenz.gedreht .referenz-bild { order: 0; }
  .referenz-bild { min-height: 210px; }
  .ergebnis-spalten { grid-template-columns: 1fr; }
  .spezial-banner { flex-direction: column; align-items: flex-start; }
  .sb-knopf { width: 100%; text-align: center; }
}

@media (max-width: 880px) {
  .hero { grid-template-columns: 1fr; padding-top: 34px; gap: 28px; }
  .konfig { grid-template-columns: 1fr; }
  .konfig-vorschau { border-right: 0; border-bottom: 1px solid var(--rand); min-height: 250px; }
  /* Ab hier passen die Links nicht mehr nebeneinander in die Kopfzeile.
     Frueher waren sie einfach versteckt – auf dem Tablet hochkant gab es
     dann ueberhaupt kein Menue mehr. Jetzt klappen sie ueber den
     Menue-Knopf auf. */
  .menue-knopf { display: grid; place-items: center; }

  .nav-links {
    display: none;
    position: absolute; top: calc(100% + 8px);
    right: 12px; left: auto;
    min-width: 240px; max-width: calc(100vw - 24px);
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--karte);
    border: 1px solid var(--rand); border-radius: 14px;
    padding: 8px;
    box-shadow: 0 18px 40px rgba(0,0,0,.45);
  }
  .nav-links.offen { display: flex; }
  .nav-links .nav-link { padding: 13px 14px; font-size: 1rem; border-radius: 10px; }
  .galerie { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; }
  .karte-bild { height: 155px; }
}

@media (max-width: 560px) {
  /* Logo darf nie umbrechen, sonst wird die Kopfzeile doppelt so hoch */
  .logo { font-size: .88rem; white-space: nowrap; }
  .logo-wuerfel { width: 30px; height: 30px; font-size: 15px; }
  .korb-knopf { font-size: .8rem; padding: 9px 13px; }
  .icon-knopf { width: 34px; height: 34px; }
}

@media (max-width: 460px) {
  .galerie { grid-template-columns: 1fr 1fr; }
  .karte .beschr, .karte .tagline { display: none; }
  .karte-inhalt { padding: 12px; }
  .karte h3 { font-size: .92rem; }
  .karte-bild { height: 140px; }

  /* Preis und Knopf untereinander – nebeneinander ist zu eng */
  .karte-fuss { flex-direction: column; align-items: stretch; gap: 8px; }
  .preis { font-size: 1.1rem; white-space: nowrap; }
  .preis small { white-space: nowrap; font-size: .62rem; }
  .mini-knopf { width: 100%; padding: 10px; font-size: .78rem; }

  .topbar { padding: 10px 12px; gap: 8px; }
  .bereich { padding: 32px 14px; }
  .hero { padding: 26px 14px; }
  .korb-knopf { font-size: 0; padding: 10px 12px; }      /* nur noch das Symbol */
  .korb-knopf::first-letter { font-size: 1.1rem; }
}

/* ====================  Anzeige: im Netz gespeichert?  ==================== */
/* Klebt unten links. Gute Nachrichten blenden sich wieder aus,
   Warnungen bleiben stehen, bis es geklappt hat. */

.wolke-status {
  position: fixed; left: 14px; bottom: 14px; z-index: 90;
  background: var(--karte2); border: 1px solid var(--rand);
  color: var(--text-leise);
  font-size: .8rem; font-weight: 600;
  padding: 9px 14px; border-radius: 999px;
  box-shadow: 0 8px 22px rgba(0,0,0,.45);
  opacity: 0; transform: translateY(6px);
  transition: opacity .25s, transform .25s;
  pointer-events: none;
}
.wolke-status.zeigen { opacity: 1; transform: none; }
.wolke-status.warnung { border-color: #ffc357; color: #ffc357; }

/* ==========================================================================
   MODELLE AUS DEM INTERNET
   ========================================================================== */

.seiten-karte { text-decoration: none; color: inherit; display: block; }
.seiten-karte:hover { border-color: var(--neon); }
.seiten-karte h3 { color: var(--neon); }

/* Link-Eingabe */
.link-zeile { display: flex; gap: 10px; flex-wrap: wrap; }
.link-zeile input {
  flex: 1; min-width: 220px;
  background: #0f1620; border: 1px solid var(--rand); border-radius: 14px;
  color: var(--text); padding: 14px 16px; font-family: var(--font);
  font-size: .92rem; outline: none;
}
.link-zeile input:focus { border-color: var(--neon); }
.link-zeile input::placeholder { color: #5a6b82; }
.link-zeile .knopf { font-size: .88rem; padding: 14px 24px; }

/* Merkliste */
.merk-zeile {
  display: flex; align-items: center; gap: 11px;
  background: var(--karte2); border: 1px solid var(--rand);
  border-radius: 13px; padding: 11px 13px; margin-bottom: 8px;
  animation: reinploppen .3s;
}
.merk-punkt { flex: none; font-size: 1rem; }
.merk-link {
  flex: 1; min-width: 0; color: var(--neon); font-size: .84rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.merk-link:hover { text-decoration: underline; }

/* Lizenz-Karten */
.lizenz-gitter {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 14px;
}
.lizenz-karte {
  background: var(--karte); border: 1px solid var(--rand);
  border-radius: 18px; padding: 17px;
}
.lizenz-karte.gruen { border-color: rgba(47,242,192,.4);  background: rgba(47,242,192,.05); }
.lizenz-karte.rot   { border-color: rgba(255,95,109,.4);  background: rgba(255,95,109,.05); }
.lizenz-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.lizenz-ampel { font-size: 1.5rem; flex: none; }
.lizenz-kopf b { display: block; font-family: var(--font-fett); font-size: .92rem; line-height: 1.3; }
.lizenz-kopf span { font-size: .76rem; color: var(--text-leise); }
.lizenz-karte.gruen .lizenz-kopf span { color: var(--neon); font-weight: 700; }
.lizenz-karte.rot   .lizenz-kopf span { color: #ff8b95; font-weight: 700; }
.lizenz-karte p { margin: 0; font-size: .85rem; line-height: 1.55; color: var(--text-leise); }

@media (max-width: 560px) {
  .link-zeile .knopf { width: 100%; }
}

/* ==========================  Das Logo  ================================== */
/* Seit 03.08.2026: der gedruckte Drucker statt des Emoji-Wuerfels.
   In der Kopfzeile steht das Zeichen als Bild, der Name daneben als Text —
   so bleibt er in jeder Groesse scharf. Die Schrift ist dieselbe wie im
   Logo (Arial Black, --font-fett). */

.logo-zeichen {
  width: 34px; height: 34px; flex: none; display: block;
  filter: drop-shadow(0 0 14px rgba(47,242,192,.35));
  animation: schweben 3s ease-in-out infinite;
}
.logo-wort { letter-spacing: .4px; white-space: nowrap; }
.logo-wort b { color: var(--neon3); }        /* das „3D" gelb, wie im Logo */

footer .fuss-zeichen {
  width: min(260px, 70vw); height: auto; display: block;
  margin: 0 auto 12px;
}

/* Auf schmalen Bildschirmen wird der Name kleiner statt weggelassen —
   die Marke soll auch auf dem Handy lesbar bleiben. Umbrechen darf er
   nie, sonst wird die Kopfzeile doppelt so hoch. */
@media (max-width: 620px) {
  .logo-zeichen { width: 30px; height: 30px; }
  .logo-wort { font-size: .82rem; letter-spacing: 0; }
}
@media (max-width: 400px) {
  .logo-zeichen { width: 26px; height: 26px; }
  .logo-wort { font-size: .72rem; }
  .topbar { gap: 6px; }
  .nav { gap: 2px; }
}