/* Steffes Industries — Erscheinungsbild
   Schwarz und Weiß als Grundlage, Cyan #00E5FF als Signalfarbe.
   Die Wortmarke ist reine Typografie: kursive Großbuchstaben, Überstrich, Schrägstrich. */

:root{
  --schwarz:#08090c; --tief:#0d0f14; --flaeche:#12151c; --linie:#1e222c;
  --text:#e8ecf4; --leise:#8a93a5; --cyan:#00E5FF; --cyan-satt:#19f0ff;
  --orange:#ff8a2b; --orange-satt:#ffa64d;
  --gut:#4ade80; --fehler:#ff5f6d; --hinweis:#ffa63d;
  --rand:14px; --breite:1160px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:linear-gradient(180deg,var(--schwarz),var(--tief) 40%,var(--schwarz));
  color:var(--text); font:16px/1.65 "Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased; min-height:100vh;
}
a{color:var(--cyan); text-decoration:none}
a:hover{color:var(--cyan-satt); text-decoration:underline}
h1,h2,h3,h4{margin:0 0 .5rem; line-height:1.2; letter-spacing:.01em}
h1{font-size:clamp(1.9rem,4vw,3rem)}
h2{font-size:1.5rem}
h3{font-size:1.15rem}
p{margin:0 0 .9rem}
code{font-family:"JetBrains Mono","Cascadia Mono",ui-monospace,monospace; font-size:.9em}
.huelle{width:min(100% - 2.5rem,var(--breite)); margin-inline:auto}

/* Kopf */
.kopf{border-bottom:1px solid var(--linie); background:rgba(8,9,12,.86);
  position:sticky; top:0; z-index:20; backdrop-filter:blur(10px);
  transition:transform .22s ease}
.kopf-versteckt{transform:translateY(-101%)}
@media (prefers-reduced-motion:reduce){ .kopf{transition:none} }
.kopf-inhalt{display:flex; align-items:center; gap:1.2rem; padding:.9rem 0; flex-wrap:wrap}
.marke{display:flex; flex-direction:column; gap:.15rem; text-decoration:none}
.marke:hover{text-decoration:none}
.wortmarke{
  position:relative; display:inline-block; padding-top:.35rem;
  border-top:2px solid var(--text);
  font-style:italic; font-weight:800; text-transform:uppercase;
  letter-spacing:.11em; font-size:1.12rem; color:var(--text);
}
.wortmarke::after{
  content:""; position:absolute; top:-2px; right:-.75rem; width:.34rem; height:1.35rem;
  background:var(--cyan); transform:skewX(-24deg);
}
.wortmarke.klein{font-size:.95rem}
.claim{font-size:.72rem; color:var(--leise); letter-spacing:.06em}
.hauptnav{display:flex; gap:.95rem; margin-left:auto; flex-wrap:wrap}
.hauptnav a{color:var(--text); font-size:.95rem; padding:.2rem 0; border-bottom:2px solid transparent}
.hauptnav a:hover{border-color:var(--cyan); text-decoration:none}
.hauptnav a.aktiv{border-color:var(--cyan); color:var(--cyan)}
.konto{display:flex; gap:.5rem; align-items:center}
.profilmenue{position:relative}
.profilmenue summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:.55rem;
  padding:.25rem .6rem .25rem .3rem; border:1px solid var(--linie); border-radius:999px}
.profilmenue summary::-webkit-details-marker{display:none}
.profilmenue summary:hover{border-color:var(--cyan)}
.profilmenue[open] summary{border-color:var(--cyan)}
.profilbild{width:34px; height:34px; border-radius:50%; object-fit:cover; display:block;
  border:1px solid var(--linie); flex:0 0 auto}
.profilbild--leer{display:grid; place-items:center; background:#1b2430; color:var(--cyan);
  font-weight:600; font-size:.85rem; letter-spacing:.02em}
.profilbild--gross{width:96px; height:96px; font-size:1.6rem}
.profilbild-zeile{display:flex; align-items:center; gap:1rem; margin:.2rem 0 .6rem}
.profilname{font-size:.9rem; max-width:10rem; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap}
.profilmenue-liste{position:absolute; right:0; top:calc(100% + .45rem); min-width:11rem;
  background:#12161c; border:1px solid var(--linie); border-radius:var(--rand); padding:.35rem;
  box-shadow:0 14px 30px rgba(0,0,0,.55); z-index:55; display:flex; flex-direction:column}
.profilmenue-liste a{padding:.5rem .6rem; border-radius:6px; color:var(--text); font-size:.92rem}
.profilmenue-liste a:hover{background:#1b2430; text-decoration:none; color:var(--cyan)}

/* Knöpfe */
.knopf{display:inline-block; padding:.62rem 1.15rem; border:1px solid var(--cyan);
  background:var(--cyan); color:#04121a; font-weight:700; border-radius:8px; cursor:pointer;
  font-size:.95rem; font-family:inherit}
.knopf:hover{background:var(--cyan-satt); border-color:var(--cyan-satt); color:#04121a; text-decoration:none}
.knopf-leise{background:transparent; color:var(--text); border-color:var(--linie)}
.knopf-leise:hover{background:#171b24; color:var(--text); border-color:var(--cyan)}
.knopf-klein{padding:.34rem .7rem; font-size:.82rem}
.knopfreihe{display:flex; gap:.7rem; flex-wrap:wrap; align-items:center; margin:1.2rem 0}
.knopfreihe form{display:inline}

/* Meldungen */
.meldungen{padding-top:1rem}
.meldung{padding:.6rem .9rem; border-radius:8px; border:1px solid var(--linie);
  background:var(--flaeche); margin:0 0 .5rem}
.meldung.gut{border-color:var(--gut); color:var(--gut)}
.meldung.fehler{border-color:var(--fehler); color:var(--fehler)}
.meldung.hinweis{border-color:var(--hinweis); color:var(--hinweis)}

/* Auftakt und Seitenköpfe */
.auftakt{padding:3.4rem 0 1.6rem; border-bottom:1px solid var(--linie); margin-bottom:2rem}
.seitenkopf{padding:2.6rem 0 1rem}
.seitenkopf.schmal{max-width:640px}
.ueberzeile{margin:0 0 .6rem; color:var(--orange); font-size:.8rem; text-transform:uppercase;
  letter-spacing:.18em; font-weight:700}
.ueberzeile a{color:var(--orange)}
.gross{font-size:1.12rem; color:#c9d1e0; max-width:70ch}

/* Blöcke und Raster */
.block{padding:1.8rem 0; border-top:1px solid var(--linie)}
.block-kopf{margin-bottom:1.2rem}
.block-kopf p{color:var(--leise); margin:0}
.raster{display:grid; gap:1.1rem}
.raster.zwei{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.raster.drei{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.karte{background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--rand);
  padding:1.3rem; display:flex; flex-direction:column; gap:.4rem}
.karte.randlos{background:transparent}
.karte .unter{color:var(--cyan); font-size:.85rem; margin:0}
.karte p{margin:0}
.stand{color:var(--leise); font-size:.88rem; margin-top:auto; padding-top:.5rem}
.schlagworte{display:flex; gap:.4rem; flex-wrap:wrap; margin:.3rem 0 0}
.schlagworte span{border:1px solid var(--linie); border-radius:999px; padding:.1rem .6rem;
  font-size:.75rem; color:var(--leise)}
.preis{color:var(--cyan); font-weight:700}
.preis.gross{font-size:1.6rem}
.weiter{font-weight:600}
.leer{color:var(--leise); font-style:italic}
.fragen details{border:1px solid var(--linie); border-radius:10px; padding:.8rem 1rem;
  background:var(--flaeche); margin-bottom:.6rem}
.fragen summary{cursor:pointer; font-weight:600}
.fragen p{margin:.6rem 0 0; color:#c9d1e0}
.fliesstext{color:#c9d1e0; max-width:78ch}
.fliesstext h2{margin-top:1.4rem; color:var(--text)}
.fliesstext ul,.fliesstext ol{margin:0 0 1rem 1.2rem}
.klein{font-size:.82rem; color:var(--leise)}

/* Formulare */
.formular{display:flex; flex-direction:column; gap:.9rem; max-width:100%}
.formular.schmal{max-width:520px}
.formular label{display:flex; flex-direction:column; gap:.3rem}
.formular label>span{font-size:.85rem; color:var(--leise); letter-spacing:.03em}
.formular label.waagerecht{flex-direction:row; align-items:center; gap:.5rem}
.formular label.waagerecht>span{color:var(--text); font-size:.92rem}
input[type=text],input[type=email],input[type=password],input[type=number],select,textarea{
  background:#0e1117; border:1px solid var(--linie); color:var(--text); border-radius:8px;
  padding:.55rem .7rem; font:inherit; font-size:.95rem; width:100%}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(0,229,255,.14)}
textarea{resize:vertical}
.fehler{color:var(--fehler); font-size:.8rem; font-style:normal}
.klein-feld{width:6.5rem}
.zeile{display:flex; gap:.5rem; align-items:center; flex-wrap:wrap}
.menge{width:5rem}
button.knopf{font-family:inherit}

/* Tauschfenster auf der MySTIC-Seite */
.tauschbereich{display:grid; gap:1.1rem; align-items:start;
  grid-template-columns:minmax(0,480px) minmax(0,1fr)}
@media (max-width:860px){.tauschbereich{grid-template-columns:1fr}}
.tauschguthaben{padding:1rem}
.tauschguthaben h2{font-size:1rem; margin:0 0 .6rem}
.tauschguthaben .liste{margin:.3rem 0 .6rem; border:none}
.tauschguthaben .guthabenzeile{padding:.35rem 0}
.tauschkarte{max-width:480px; margin:0; padding:1rem; border:1px solid var(--linie);
  border-radius:14px; background:var(--flaeche)}
.tauschkarte form{display:flex; flex-direction:column; gap:.55rem}
.tauschfeld{display:grid; grid-template-columns:1fr auto;
  grid-template-areas:"marke marke" "wert einheit" "euro euro";
  gap:.1rem .6rem; padding:.6rem .8rem; border:1px solid var(--linie); border-radius:12px;
  background:#0e1117}
.tausch-euro{grid-area:euro; font-size:.78rem; color:var(--leise); min-height:1em}
.tausch-marke{grid-area:marke; font-size:.76rem; color:var(--leise); letter-spacing:.04em;
  text-transform:uppercase}
.tauschfeld input{grid-area:wert; width:100%; border:none; background:transparent; padding:0;
  font-size:1.3rem; font-weight:600; color:var(--text)}
.tauschfeld input:focus{outline:none; box-shadow:none; border:none}
.tauschfeld strong{grid-area:wert; font-size:1.3rem; color:var(--cyan); word-break:break-all}
.tausch-einheit{grid-area:einheit; align-self:center; font-weight:700; color:var(--cyan);
  font-size:.95rem; letter-spacing:.03em}
.tauschfeld-aus{background:#0b0e14}
.tausch-drehen{align-self:center; width:2.2rem; height:2.2rem; margin:-.4rem 0; border-radius:50%;
  border:1px solid var(--linie); background:var(--flaeche); color:var(--orange); font-size:1.05rem;
  line-height:1; cursor:pointer; position:relative; z-index:1}
.tausch-drehen:hover{border-color:var(--orange); color:var(--orange-satt)}
.tausch-rutschzeile{display:flex; align-items:center; justify-content:space-between; gap:.6rem}
.tausch-rutschzeile select{width:auto; min-width:9.5rem}
.tausch-konto{margin:0; text-align:center; color:var(--leise)}
.tausch-konto.verbunden{color:var(--gut)}
.knopf-breit{width:100%; text-align:center; margin-top:.2rem}
a.knopf-breit{display:block}
.warnung{color:var(--hinweis)}
.klein.gut{color:var(--gut)}

/* Handelskopf, Kursänderungen, Diagramm */
.handelskopf .kurszeile{display:flex; align-items:baseline; gap:.85rem; flex-wrap:wrap;
  margin:.2rem 0 .25rem}
.kursgross{font-size:2.4rem; font-weight:700; margin:0; letter-spacing:-.01em}
.aenderung{font-weight:700; font-variant-numeric:tabular-nums}
.aenderung.hoch{color:var(--gut)}
.aenderung.tief{color:var(--fehler)}
.aenderung.gleich{color:var(--leise)}
.aenderung.teilweise{opacity:.72}
.aenderung.gross{font-size:1.05rem}
.raster.sechs{grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}
.kennzahl{padding:.7rem .8rem}
.kennzahl .aenderung{font-size:1.15rem; margin:.15rem 0 0}
.aenderungshinweis{margin:.5rem 0 1.2rem}
.rasterlinie{stroke:var(--linie); stroke-width:1; opacity:.55}
.chartrahmen{position:relative}
.chart-faden{position:absolute; top:0; bottom:0; width:1px; background:var(--orange); opacity:.7;
  pointer-events:none}
.chart-tip{position:absolute; padding:.25rem .45rem; border:1px solid var(--orange);
  background:#0b0e14; color:var(--text); font-size:.78rem; border-radius:6px; white-space:nowrap;
  pointer-events:none; z-index:2}

/* Umrechner und Was-wäre-wenn */
.rechner{padding:1rem}
.rechner h2{font-size:1rem; margin:0 0 .6rem}
.rechnerzeile{display:flex; align-items:center; justify-content:space-between; gap:.8rem;
  margin:.45rem 0}
.rechnerzeile label{font-size:.85rem; color:var(--leise)}
.eingabefeld{display:inline-flex; align-items:center; gap:.35rem}
.eingabefeld input{width:7.5rem; text-align:right}
.eingabefeld .einheit{font-size:.82rem; color:var(--leise)}
.rechnerergebnis{margin-top:.7rem; border-top:1px solid var(--linie); padding-top:.6rem}
.rechnerergebnis .preis{font-size:1.5rem; color:var(--cyan); margin:.1rem 0}

/* Häufige Fragen */
.faq{border:1px solid var(--linie); border-radius:10px; padding:.7rem .9rem; margin-bottom:.6rem;
  background:var(--flaeche)}
.faq summary{cursor:pointer; font-weight:600; color:var(--text)}
.faq[open] summary{color:var(--orange); margin-bottom:.35rem}
.faq p{margin:.2rem 0 0; color:var(--leise); font-size:.9rem}
.technik summary{cursor:pointer; font-weight:600; color:var(--cyan)}
/* Statistik-Grafiken im Verwaltungspanel */
.grafik-rahmen{position:relative}
.grafik-tip{position:absolute; z-index:5; padding:.28rem .5rem; border:1px solid var(--orange);
  background:#0b0e14; color:var(--text); font-size:.78rem; border-radius:6px; white-space:nowrap;
  pointer-events:none; box-shadow:0 6px 18px rgba(0,0,0,.45)}
.grafik-hinweis{margin:.2rem 0 1.1rem}
.grafik [data-tipp]{cursor:help}

/* Tabellen und Listen */
.tabelle{width:100%; border-collapse:collapse; font-size:.92rem}
.tabelle th,.tabelle td{text-align:left; padding:.6rem .7rem; border-bottom:1px solid var(--linie);
  vertical-align:top}
.tabelle thead th{color:var(--leise); font-size:.78rem; text-transform:uppercase;
  letter-spacing:.08em; font-weight:700}
.tabelle tfoot th{border-top:2px solid var(--cyan); border-bottom:none; font-size:1rem}
.tabelle tr.gewaehlt{background:#141a24}
.liste{list-style:none; margin:0 0 1rem; padding:0}
.liste li{display:flex; justify-content:space-between; gap:1rem; padding:.45rem 0;
  border-bottom:1px solid var(--linie)}
.liste li:last-child{border-bottom:none}

/* Grafiken */
.grafik{width:100%; height:auto; display:block; background:#0b0e13;
  border:1px solid var(--linie); border-radius:10px; padding:.4rem; margin-bottom:.8rem}

/* Fuß */
.fuss{border-top:1px solid var(--linie); margin-top:3rem; background:#070810}
.fuss-inhalt{display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  padding:2rem 0 1.2rem}
.fuss h4{font-size:.8rem; text-transform:uppercase; letter-spacing:.14em; color:var(--leise)}
.fuss p{margin:0 0 .3rem; font-size:.9rem}
.fuss .seit{margin-top:.55rem; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--leise)}
.fuss-unten{display:flex; justify-content:space-between; border-top:1px solid var(--linie);
  padding:.8rem 0 1.4rem; font-size:.8rem; color:var(--leise)}

/* Verwaltung */
.verwaltungsnav{display:flex; gap:.4rem; flex-wrap:wrap; padding:1rem 0 .4rem;
  border-bottom:1px solid var(--linie); margin-bottom:1rem}
.verwaltungsnav a{padding:.35rem .8rem; border:1px solid var(--linie); border-radius:999px;
  font-size:.86rem; color:var(--text)}
.verwaltungsnav a:hover{border-color:var(--cyan); text-decoration:none}
.verwaltungsnav a.aktiv{border-color:var(--cyan); color:var(--cyan); background:#0e1a1f}
.kennzahlen{display:grid; gap:.9rem; grid-template-columns:repeat(auto-fit,minmax(185px,1fr));
  padding:1.2rem 0}
.kennzahl{background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--rand);
  padding:.9rem 1rem; display:flex; flex-direction:column; gap:.15rem}
.kennzahl .wert{font-size:1.5rem; font-weight:700; color:var(--cyan)}
.kennzahl .titel{font-size:.85rem; color:var(--text)}
.kennzahl .zusatz{font-size:.75rem; color:var(--leise)}
.bestellung{border:1px solid var(--linie); border-radius:var(--rand); padding:1.1rem;
  margin-bottom:1rem; background:var(--flaeche)}
.bestellung.ungelesen{border-left:3px solid var(--cyan)}
.marke-status{border:1px solid var(--cyan); color:var(--cyan); border-radius:999px;
  font-size:.72rem; padding:.1rem .6rem; vertical-align:middle; margin-left:.5rem}
.zahlkarte{background:#0b0e13}
.adresse{display:block; word-break:break-all; background:#0e1117; border:1px solid var(--linie);
  border-radius:8px; padding:.6rem; margin:.3rem 0 .8rem; color:var(--cyan)}
.qr{max-width:220px; margin:.6rem 0}
.qr svg{width:100%; height:auto; background:#fff; border-radius:8px; padding:.5rem}

/* Marke als Bild */
.wortmarke-bild{height:34px; width:auto; display:block}
.wortmarke-bild.klein{height:22px}
.marke .claim{padding-top:.15rem}

/* Projektbilder */
.auftaktbild{margin:0 0 1.6rem}
.auftaktbild img{width:100%; border-radius:var(--rand); border:1px solid var(--linie); display:block}
.auftaktbild figcaption{font-size:.82rem; color:var(--leise); padding-top:.45rem}
.galerie{display:grid; gap:.8rem; grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.galerie figure{margin:0; background:var(--flaeche); border:1px solid var(--linie);
  border-radius:12px; overflow:hidden}
.galerie img{width:100%; height:180px; object-fit:cover; display:block; transition:opacity .15s}
.galerie figure:hover img{opacity:.85}
.galerie figcaption{padding:.5rem .7rem; font-size:.8rem; color:var(--leise)}
.projektkarte .vorschau{display:block; margin:-1.3rem -1.3rem .8rem}
.projektkarte .vorschau img{width:100%; height:210px; object-fit:cover; display:block;
  border-radius:var(--rand) var(--rand) 0 0}
.produktbild img{width:100%; border-radius:12px; border:1px solid var(--linie); display:block}

/* Dateien zum Herunterladen */
.dateiliste{list-style:none; margin:0; padding:0}
.dateiliste li{display:flex; gap:1rem; align-items:center; justify-content:space-between;
  background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--rand);
  padding:1rem 1.2rem; margin-bottom:.7rem; flex-wrap:wrap}
.dateiliste li>div{flex:1 1 380px}
.dateiliste p{margin:.25rem 0 0; color:#c9d1e0; font-size:.92rem}
.dateiliste .unter{color:var(--cyan); font-size:.85rem; margin-left:.6rem}
pre.befehl{background:#0e1117; border:1px solid var(--linie); border-radius:8px; padding:.7rem .9rem;
  color:var(--cyan); overflow-x:auto; font-size:.88rem}

/* News */
.beitragsliste{display:flex; flex-direction:column; gap:1.1rem; padding:1rem 0}
.beitrag{background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--rand);
  padding:1.2rem 1.3rem}
.beitrag h2,.beitrag h3{margin-bottom:.35rem}
.beitrag .gross{font-size:1.02rem; margin-bottom:.4rem}
.beitrag .ueberzeile{margin-bottom:.45rem; font-size:.74rem}
.beitrag .klein{margin:0}
.schlagworte a{text-decoration:none}

/* Bestätigungsbild und stilles Feld */
.falle{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.captcha-zeile{display:flex; gap:.6rem; align-items:center; flex-wrap:wrap}
.captcha-zeile img{border:1px solid var(--linie); border-radius:8px; background:#0b0e13}
.captcha-zeile input{flex:1 1 140px; min-width:120px; letter-spacing:.18em; text-transform:uppercase}
.bestaetigung>span:first-child{display:block; margin-bottom:.3rem}

/* Karussell auf der Startseite */
.karussell-block .block-kopf{margin-bottom:1rem}
.karussell{border:1px solid var(--linie); border-radius:var(--rand); background:var(--flaeche);
  overflow:hidden}
.karussell-spur{display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:20px; scrollbar-width:none}
.karussell-spur::-webkit-scrollbar{display:none}
.karussell-karte{flex:0 0 min(580px,88%); scroll-snap-align:start; display:grid;
  grid-template-columns:210px 1fr; gap:18px; align-items:center}
.karussell-karte img{width:210px; height:158px; object-fit:cover; border-radius:10px;
  border:1px solid var(--linie)}
.karussell-text h3{margin-bottom:.35rem}
.karussell-text p{margin-bottom:.7rem; color:var(--leise)}
.karussell-steuerung{display:flex; align-items:center; justify-content:center; gap:1rem;
  padding:.7rem; border-top:1px solid var(--linie); background:#0b0e14}
.karussell-pfeil{background:transparent; border:1px solid var(--linie); color:var(--text);
  border-radius:8px; width:38px; height:34px; font-size:1.1rem; cursor:pointer}
.karussell-pfeil:hover{border-color:var(--cyan); color:var(--cyan)}
.karussell-punkte{display:flex; gap:.45rem}
.karussell-punkte button{width:9px; height:9px; padding:0; border-radius:50%; cursor:pointer;
  border:1px solid var(--linie); background:#22262f}
.karussell-punkte button.aktiv{background:var(--cyan); border-color:var(--cyan)}
.merkmal{display:inline-block; margin:0 .3rem; padding:.05rem .45rem; border-radius:999px;
  border:1px solid var(--cyan); color:var(--cyan); font-size:.72rem; text-transform:uppercase;
  letter-spacing:.06em}
.metakarte{border-color:var(--cyan)}
.adresse{display:block; word-break:break-all; background:#0b0e14; border:1px solid var(--linie);
  border-radius:8px; padding:.5rem .7rem; margin-bottom:.6rem}

/* Shop: Leiste, Filter, Kacheln in Viererreihen */
.raster.vier{grid-template-columns:repeat(4,minmax(0,1fr))}
.shop-leiste{display:flex; gap:1rem; align-items:center; justify-content:space-between;
  flex-wrap:wrap; margin-bottom:.8rem}
.shop-leiste .suche{display:flex; gap:.5rem; align-items:center; flex:1 1 320px}
.shop-leiste .suche input[type=search]{flex:1 1 auto; min-width:180px}
.filterleiste{display:flex; gap:.9rem; align-items:end; flex-wrap:wrap;
  border:1px solid var(--linie); border-radius:var(--rand); background:var(--flaeche);
  padding:.8rem .9rem; margin-bottom:1rem}
.filterleiste label{display:flex; flex-direction:column; gap:.25rem; font-size:.82rem;
  color:var(--leise)}
.filterleiste select, .filterleiste input{min-width:150px}
.treffer{margin:0 0 0 auto; align-self:center}
.produktkarte{display:flex; flex-direction:column; padding:0; overflow:hidden}
.produktkarte .vorschau{position:relative; display:block; aspect-ratio:1/1; background:#0b0e14;
  border-bottom:1px solid var(--linie); margin:0}
.produktkarte .vorschau img{width:100%; height:100%; object-fit:cover; display:block}
.produktkarte .bildplatz{display:flex; align-items:center; justify-content:center;
  width:100%; height:100%}
.produktkarte .bildplatz img{width:38%; height:auto; opacity:.25}
.produktkarte h3, .produktkarte p, .produktkarte form{margin-left:.9rem; margin-right:.9rem}
.produktkarte h3{margin-top:.8rem; margin-bottom:.3rem; font-size:1rem}
.produktkarte p{margin-bottom:.5rem}
.produktkarte form{margin-bottom:.9rem; margin-top:auto}
.rabattmarke{position:absolute; top:.55rem; left:.55rem; background:var(--cyan); color:#04121a;
  font-weight:800; font-size:.78rem; padding:.15rem .45rem; border-radius:6px}
.preis .rabattmarke, .preis.gross .rabattmarke{position:static; display:inline-block;
  margin-left:.5rem; vertical-align:middle}
.markemini{position:absolute; top:.55rem; right:.55rem; border:1px solid var(--cyan);
  color:var(--cyan); background:rgba(8,9,12,.8); font-size:.7rem; text-transform:uppercase;
  letter-spacing:.06em; padding:.1rem .4rem; border-radius:999px}
.altpreis{color:var(--leise); font-weight:400; margin-left:.4rem; font-size:.85em}
.blaettern{display:flex; gap:.4rem; align-items:center; justify-content:center; flex-wrap:wrap;
  margin:1.4rem 0}
.seitenzahl{border:1px solid var(--linie); border-radius:8px; padding:.3rem .65rem;
  color:var(--text); font-size:.85rem}
.seitenzahl:hover{border-color:var(--cyan); text-decoration:none}
.seitenzahl.aktiv{border-color:var(--cyan); color:var(--cyan); font-weight:700}
.seitenzahl.leer{border-color:transparent; color:var(--leise)}
/* Verbundene Brieftasche: grün */
.verbunden{color:var(--gut)}
.adresse.verbunden{border-color:var(--gut)}
.guthaben{display:block; margin:.2rem 0 .6rem; color:var(--gut); font-weight:700}
.guthaben klein{color:var(--leise); font-weight:400; display:block}
.statuspunkt{display:inline-block; width:.6rem; height:.6rem; border-radius:50%;
  background:var(--leise); margin-right:.35rem; vertical-align:middle}
.statuspunkt.gut{background:var(--gut); box-shadow:0 0 8px rgba(74,222,128,.7)}

@media (max-width:1100px){
  .raster.vier{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:860px){
  .raster.vier{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){
  .raster.vier{grid-template-columns:1fr}
}

.adresskarte{border:1px solid var(--linie); border-radius:10px; padding:.7rem .8rem;
  margin-bottom:.7rem; background:#0b0e14}
.adresskarte.standard{border-color:var(--cyan)}
.adresskarte .mehrzeilig{white-space:pre-line; margin:0 0 .5rem; color:var(--leise)}
.neuanschrift{margin-top:.6rem}
.neuanschrift summary{cursor:pointer; color:var(--cyan); margin-bottom:.7rem}
.adresswahl{margin-bottom:.8rem}
.adresswahl .knopf{margin:0 .3rem .4rem 0}
.knopf.gewaehlt{border-color:var(--cyan); color:var(--cyan)}
.walletstreifen{display:flex; align-items:center; justify-content:space-between; gap:1rem;
  flex-wrap:wrap; margin-top:1.2rem}
.walletstreifen p{margin:0 0 .3rem}
.walletstreifen .adresse{margin:.3rem 0 .4rem}

/* Kopfzeile: engere Anzeige, damit Logo, Navigation und Profil in einer Reihe bleiben */
@media (max-width:1240px){
  .kopf-inhalt{gap:1rem}
  .wortmarke-bild{height:30px}
}
@media (max-width:1040px){
  .wortmarke-bild{height:27px}
  .claim{display:none}
  .hauptnav{gap:.8rem}
  .hauptnav a{font-size:.9rem}
  .profilname{max-width:7rem}
}
@media (max-width:980px){
  /* Navigation bekommt eine eigene Zeile, statt das Profil mitzuziehen */
  .kopf-inhalt{gap:.6rem}
  .marke{flex:1 1 auto}
  .hauptnav{margin-left:0; width:100%; order:3; gap:.7rem}
}

@media (max-width:760px){
  .karussell-karte{grid-template-columns:1fr}
  .karussell-karte img{width:100%; height:172px}
  .kopf-inhalt{gap:.7rem}
  .hauptnav{margin-left:0; width:100%}
  .raster.zwei,.raster.drei{grid-template-columns:1fr}
  .dateiliste li{align-items:flex-start}
}

/* ---- Guthaben der Brieftasche (mehrere Währungen, mehrere Ketten) ---------- */
.guthabenliste{margin-top:.6rem}
.guthabenliste .liste{margin-bottom:.4rem}
.guthabenzeile{align-items:baseline}
.guthabenzeile span:last-child{color:var(--cyan); font-weight:600; white-space:nowrap}
.guthabenzeile.leer span:last-child{color:var(--leise); font-weight:400}
.guthabenzeile.unklar span:last-child{color:var(--fehler)}

/* ---- MySTIC-Seite ---------------------------------------------------------- */
.cyan{color:var(--cyan)}
.kennzahlen{margin-bottom:1.4rem}
.chartrahmen{background:var(--tief); border:1px solid var(--linie); border-radius:var(--rand);
  padding:.6rem; margin:.4rem 0 .8rem}
.verlauf{display:block; width:100%; height:auto}
.verlauf .achse{fill:var(--leise); font:11px "Inter","Segoe UI",system-ui,sans-serif}
.liste.schritte{counter-reset:schritt}
.liste.schritte li{display:block; border-bottom:1px solid var(--linie); padding:.6rem 0}
.liste.schritte li span{display:block; color:var(--cyan); font-weight:600}
.liste.schritte li::before{content:counter(schritt) ". "; counter-increment:schritt;
  color:var(--leise); font-weight:700; margin-right:.35rem}
.kennzahlen .preis.gross{overflow-wrap:anywhere}

/* ---- Protokoll der Brieftasche (sichtbarer Verlauf, auch am Handy) -------- */
.protokoll{list-style:none; margin:.4rem 0 .6rem; padding:.5rem .7rem; font-size:.82rem;
  color:var(--leise); background:var(--tief); border:1px solid var(--linie); border-radius:10px;
  max-height:11rem; overflow:auto}
.protokoll li{padding:.12rem 0; border-bottom:1px dotted var(--linie)}
.protokoll li:last-child{border-bottom:none}
.protokoll li.fehler{color:var(--fehler)}
.protokoll li.gut{color:var(--gut)}

/* ---- Drucken: Bestellübersicht sauber auf Papier ------------------------- */
@media print{
  .kopf, .hauptnav, .fuss, .meldungen, .knopfreihe, .protokoll, .walletstreifen{display:none !important}
  body{background:#fff; color:#000}
  .karte, .chartrahmen{background:#fff; border-color:#888}
  .preis, .preis.gross, .cyan, a, .liste li span:last-child{color:#000}
  .raster.zwei, .raster.drei{display:block}
  .huelle{max-width:none}
}

/* ---- Jenny als Begleiterin durch die Seite --------------------------------- */
.jenny{margin:1rem 0 1.2rem; display:flex; gap:.9rem; align-items:center;
  background:var(--tief); border:1px solid var(--linie); border-left:3px solid var(--cyan);
  border-radius:var(--rand); padding:.7rem .9rem .7rem .7rem}
.jenny img{display:block; width:140px; height:200px; object-fit:contain;
  object-position:50% 50%; border-radius:10px; background:var(--schwarz)}
.jenny figcaption{margin:0; font-size:.9rem; color:var(--leise); line-height:1.5}
.jenny--gross img{width:190px; height:250px}
.jenny--schmal img{width:130px; height:170px}
@media (max-width:560px){
  .jenny{flex-direction:column; align-items:flex-start}
  .jenny img{width:130px; height:170px}
}
@media print{.jenny{display:none}}

/* ---- Cookie-Hinweis -------------------------------------------------------- */
/* `hidden` muss stärker sein als das display des Kastens, sonst lässt sich der
   Hinweis nicht wegklicken: Der Knopf setzt hidden, das CSS überschrieb es aber. */
[hidden]{display:none !important}
.cookiehinweis{position:fixed; z-index:60; left:1rem; right:1rem; bottom:1rem; max-width:60rem;
  margin:0 auto; display:flex; gap:1.2rem; align-items:center; justify-content:space-between;
  background:#12161c; border:1px solid #2a323d; border-left:3px solid var(--cyan);
  border-radius:var(--rand); padding:1rem 1.2rem; box-shadow:0 16px 40px rgba(0,0,0,.6)}
.cookiehinweis p{margin:0 0 .25rem; font-size:.9rem}
.cookiehinweis p:last-child{margin:0}
.cookiehinweis-knoepfe{flex:0 0 auto}
@media (max-width:640px){
  .cookiehinweis{flex-direction:column; align-items:flex-start; bottom:.5rem; left:.5rem; right:.5rem}
  .cookiehinweis-knoepfe{width:100%}
  .cookiehinweis-knoepfe .knopf{width:100%}
}
@media print{.cookiehinweis{display:none}}

/* ---- Rechtstexte ---------------------------------------------------------- */
.rechtstext{max-width:52rem; margin:0 auto}
.rechtstext h2{font-size:1.05rem; margin:2rem 0 .5rem; letter-spacing:.01em}
.rechtstext p{color:var(--text); line-height:1.65; margin:0 0 .8rem}
.rechtstext ul{margin:0 0 .8rem 1.1rem}
.rechtstext li{margin-bottom:.3rem}
.rechtstext .adressblock{border-left:2px solid var(--cyan); padding-left:.9rem; color:var(--leise)}
.rechtstext .kasten{border:1px solid var(--linie); border-radius:var(--rand);
  padding:1rem 1.2rem; background:var(--flaeche); margin:1rem 0}
.rechtstext .kasten p{margin:0 0 .55rem; font-size:.92rem; color:var(--leise)}
.rechtstext a{color:var(--cyan)}

/* ---- Projektfotos in der Verwaltung --------------------------------------- */
.fotogitter{display:grid; gap:.9rem; grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  margin:1rem 0}
.fotokarte{margin:0; border:1px solid var(--linie); border-radius:var(--rand); padding:.5rem;
  background:var(--flaeche)}
.fotokarte img{width:100%; height:130px; object-fit:cover; border-radius:4px; display:block}
.fotokarte .klein{font-size:.78rem; color:var(--leise); margin:.4rem 0}
.fotokarte form{margin:.3rem 0 0}
.fotokarte .klein-feld{width:100%}
.hinweisstreifen{border-left:3px solid var(--orange); background:var(--flaeche); padding:.6rem .9rem;
  font-size:.9rem; color:var(--leise); margin-bottom:1rem}