:root{
  /* --- Hausfarben, entnommen aus dem Logo ---------------------------
     Markenrot   #FF3131   Flaechen, Logo, Akzente
     Markenblau  #1C72C2   aus dem "C" und "O"
     Markengruen #7ED957   aus dem "a"
     Markengelb  #FFDE59   aus dem "r" und "t"
     Fuer Text und Knoepfe wird ein etwas tieferes Rot benutzt,
     damit weisse Schrift darauf gut lesbar bleibt. ------------------ */
  --rot-marke:#ff3131;
  --blau-marke:#1c72c2;
  --gruen-marke:#7ed957;
  --gelb-marke:#ffde59;

  --rot:#e01c1c; --rot-dunkel:#b81717; --rot-hell:#ffeded;
  --tinte:#1b1a19; --grau:#6b6663; --linie:#e5e0da;
  --papier:#faf8f5; --weiss:#fff;
  --gruen:#1f7a4d; --gruen-hell:#eefae7;
  --gelb:#8a6100; --gelb-hell:#fff8e2;
  --blau:#1c72c2; --blau-hell:#eaf2fa;
  --radius:14px;
  --schatten:0 1px 2px rgba(27,26,25,.06), 0 8px 24px rgba(27,26,25,.06);
}

/* Vierfarbstreifen aus den Logofarben – wird unter den Kopf gesetzt */
.farbstreifen{
  height:5px;
  background:linear-gradient(90deg,
    var(--blau-marke) 0 25%, var(--gruen-marke) 25% 50%,
    var(--gelb-marke) 50% 75%, var(--rot-marke) 75% 100%);
}

/* Logo im Kopf und auf der Anmeldekarte */
.logo{
  width:52px; height:52px; border-radius:50%; flex:0 0 auto;
  box-shadow:0 1px 3px rgba(27,26,25,.18); background:var(--rot-marke);
}
.logo.gross{width:88px; height:88px}
.logo.riesig{width:120px; height:120px; box-shadow:0 6px 20px rgba(255,49,49,.28)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--papier); color:var(--tinte);
  font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
  font-size:17px; line-height:1.6;
}
h1,h2,h3{line-height:1.25; margin:0 0 .5em; font-weight:700; letter-spacing:-.01em}
h1{font-size:2.1rem} h2{font-size:1.4rem} h3{font-size:1.08rem}
p{margin:0 0 1em}
a{color:var(--rot-dunkel)}
small{font-size:.85rem}
.huelle{max-width:1080px; margin:0 auto; padding:0 20px}
.eng{max-width:760px}

/* ---------- Kopf ---------- */
.kopf{background:var(--weiss); border-bottom:1px solid var(--linie); position:sticky; top:0; z-index:40}
.kopf-inhalt{display:flex; align-items:center; gap:16px; padding:14px 20px; max-width:1080px; margin:0 auto}
.marke{font-weight:800; letter-spacing:-.02em; font-size:1.05rem; line-height:1.2}
.marke span{display:block; font-weight:500; font-size:.78rem; color:var(--grau); letter-spacing:0}
.kopf-rechts{margin-left:auto; display:flex; align-items:center; gap:12px}
@media (max-width:560px){
  .kopf-inhalt{gap:10px; padding:10px 16px}
  .logo{width:40px; height:40px}
  .marke{font-size:.95rem}
  .marke span{font-size:.7rem}
  .kopf-rechts .knopf-flach{padding:8px 12px; font-size:.85rem}
}

/* ---------- Bühne ---------- */
.buehne{background:linear-gradient(160deg,#fff 0%, #fff1ef 100%); border-bottom:1px solid var(--linie); padding:44px 0 36px}
.buehne .schild{display:inline-block; background:var(--rot-hell); color:var(--rot-dunkel);
  border:1px solid #ffd0d0; padding:5px 12px; border-radius:999px; font-size:.8rem; font-weight:700; margin-bottom:14px}
/* Geoeffnet = gruen, geschlossen = rot, noch nicht gestartet = gelb */
.buehne .schild.offen{background:var(--gruen-hell); color:var(--gruen); border-color:#bfe3d0}
.buehne .schild.bald{background:var(--gelb-hell); color:var(--gelb); border-color:#eddcb0}
.buehne-inhalt{display:flex; gap:28px; align-items:flex-start}
.buehne-inhalt .buehne-text{flex:1; min-width:0}
@media (max-width:720px){
  .buehne-inhalt{flex-direction:column-reverse; gap:18px}
  .logo.riesig{width:88px; height:88px}
}
.buehne p.vorspann{font-size:1.1rem; max-width:64ch; color:#3c3835}

/* ---------- Karten ---------- */
.abschnitt{padding:34px 0}
.karte{background:var(--weiss); border:1px solid var(--linie); border-radius:var(--radius); padding:22px; box-shadow:var(--schatten)}
.karte + .karte{margin-top:16px}

.hinweisbox{border-radius:var(--radius); padding:16px 18px; border:1px solid; margin:0 0 18px}
.hinweisbox h3{margin-bottom:.35em; font-size:1rem}
.hinweisbox p:last-child{margin-bottom:0}
.hb-rot{background:var(--rot-hell); border-color:#f3c9d1}
.hb-gelb{background:var(--gelb-hell); border-color:#eddcb0; color:#4a3a12}
.hb-gruen{background:var(--gruen-hell); border-color:#bfe3d0; color:#154a30}
.hb-blau{background:var(--blau-hell); border-color:#cadff2; color:#173f66}

/* ---------- Regeln ---------- */
.regeln{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); margin:0; padding:0; list-style:none}
.regeln li{background:var(--weiss); border:1px solid var(--linie); border-radius:var(--radius);
  padding:16px 18px; border-top:4px solid var(--linie)}
/* Kopfkanten in den vier Logofarben, der Reihe nach */
.regeln li:nth-child(4n+1){border-top-color:var(--blau-marke)}
.regeln li:nth-child(4n+2){border-top-color:var(--gruen-marke)}
.regeln li:nth-child(4n+3){border-top-color:var(--gelb-marke)}
.regeln li:nth-child(4n+4){border-top-color:var(--rot-marke)}
.regeln b{display:block; margin-bottom:2px}
.regeln span{color:var(--grau); font-size:.92rem}

/* ---------- Artikel ---------- */
.artikelgitter{display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.artikel{background:var(--weiss); border:1px solid var(--linie); border-radius:var(--radius);
  padding:18px; display:flex; flex-direction:column; gap:10px; transition:border-color .15s, box-shadow .15s}
.artikel.gewaehlt{border-color:var(--rot); box-shadow:0 0 0 3px var(--rot-hell)}
.artikel .bild{aspect-ratio:4/3; border-radius:10px; background:#f2eee9 center/cover no-repeat;
  display:flex; align-items:center; justify-content:center; color:#b8b0a8; font-size:.82rem; text-align:center; padding:8px}
.artikel .name{font-weight:700}
.artikel .beschreibung{color:var(--grau); font-size:.9rem}
.artikel .preis{font-weight:700; margin-top:auto; padding-top:4px}
.artikel .preis small{font-weight:500; color:var(--grau)}

/* Ausklappbarer Produkttext */
.artikel .langtext{font-size:.9rem}
.artikel .langtext summary{cursor:pointer; font-weight:600; color:var(--rot-dunkel); list-style:none}
.artikel .langtext summary::-webkit-details-marker{display:none}
.artikel .langtext summary::before{content:"＋ "; font-weight:700}
.artikel .langtext[open] summary::before{content:"－ "}
.artikel .langtext p{margin:8px 0 0; color:#3c3835}
.mehrzeilig{white-space:pre-line}
.artikel .hersteller{color:var(--grau); font-size:.85rem}

/* Pflicht-Warnhinweis, z. B. Altersfreigabe und Erstickungsgefahr */
.warnhinweis{
  display:flex; gap:8px; align-items:flex-start; margin:0;
  background:var(--gelb-hell); border:1px solid #eddcb0; color:#4a3a12;
  border-radius:10px; padding:9px 11px; font-size:.83rem; line-height:1.45;
}
.warnhinweis span[aria-hidden]{font-size:1rem; line-height:1.3}

/* ---------- Knöpfe ---------- */
button, .knopf-flach{font:inherit}
.knopf{
  background:var(--rot); color:#fff; border:1px solid var(--rot); border-radius:10px;
  padding:12px 18px; font-weight:700; cursor:pointer; transition:background .15s, transform .05s;
}
.knopf:hover:not(:disabled){background:var(--rot-dunkel)}
.knopf:active:not(:disabled){transform:translateY(1px)}
.knopf:disabled{opacity:.5; cursor:not-allowed}
.knopf.gross{width:100%; padding:15px; font-size:1.05rem}
.knopf.zweit{background:#fff; color:var(--tinte); border-color:var(--linie)}
.knopf.zweit:hover:not(:disabled){background:#f6f3ef}
.knopf.gruen{background:var(--gruen); border-color:var(--gruen)}
.knopf.gruen:hover:not(:disabled){background:#175c39}
.knopf.klein{padding:7px 12px; font-size:.88rem; border-radius:8px}
.knopf.gewaehlt{background:var(--gruen); border-color:var(--gruen)}
.knopf.gewaehlt:hover:not(:disabled){background:#175c39}
.knopf-flach{display:inline-block; padding:10px 16px; border:1px solid var(--linie);
  border-radius:10px; background:#fff; text-decoration:none; color:var(--tinte); font-weight:600}

/* ---------- Warenkorb ---------- */
.korb{position:sticky; top:76px}
.korb ul{list-style:none; margin:0 0 14px; padding:0}
.korb li{display:flex; gap:10px; align-items:flex-start; padding:9px 0; border-bottom:1px solid var(--linie); font-size:.94rem}
.korb li .weg{margin-left:auto; background:none; border:0; color:var(--grau); cursor:pointer; font-size:1.15rem; line-height:1; padding:0 2px}
.korb li .weg:hover{color:var(--rot)}
.korb .summe{display:flex; justify-content:space-between; font-weight:700; padding:10px 0}
.korb .leer{color:var(--grau); font-size:.94rem}

/* ---------- Formular ---------- */
.feldreihe{display:grid; gap:14px; grid-template-columns:1fr 1fr}
@media (max-width:620px){.feldreihe{grid-template-columns:1fr}}
.feld{display:flex; flex-direction:column; gap:5px; margin-bottom:14px}
.feld label{font-weight:600; font-size:.92rem}
.feld .pflicht{color:var(--rot)}
.feld input, .feld select, .feld textarea{
  font:inherit; padding:11px 12px; border:1px solid var(--linie); border-radius:10px;
  background:#fff; color:var(--tinte); width:100%;
}
.feld input:focus, .feld select:focus, .feld textarea:focus{outline:2px solid var(--rot); outline-offset:1px; border-color:var(--rot)}
.feld.fehlerhaft input, .feld.fehlerhaft select, .feld.fehlerhaft textarea{border-color:var(--rot); background:#fff8f9}
.feldfehler{color:var(--rot-dunkel); font-size:.85rem; font-weight:600}
.hilfetext{color:var(--grau); font-size:.85rem}

.wahlkacheln{display:grid; gap:12px; grid-template-columns:1fr 1fr; margin-bottom:6px}
.wahlkacheln.einzeln{grid-template-columns:1fr}
@media (max-width:620px){.wahlkacheln{grid-template-columns:1fr}}
.wahlkachel{border:1px solid var(--linie); border-radius:12px; padding:14px; cursor:pointer; background:#fff; display:block}
.wahlkachel:hover{border-color:#cfc7bf}
.wahlkachel input{margin-right:8px}
.wahlkachel.aktiv{border-color:var(--rot); box-shadow:0 0 0 3px var(--rot-hell)}
.wahlkachel b{display:block}
.wahlkachel span{color:var(--grau); font-size:.88rem}

.zustimmung{display:flex; gap:11px; align-items:flex-start; margin-bottom:12px; font-size:.94rem}
.zustimmung input{margin-top:5px; width:18px; height:18px; flex:0 0 auto; accent-color:var(--rot)}

.honigtopf{position:absolute!important; left:-9999px!important; width:1px; height:1px; overflow:hidden}

/* ---------- Statusanzeigen ---------- */
.marke-status{display:inline-block; padding:3px 10px; border-radius:999px; font-size:.78rem; font-weight:700; white-space:nowrap}
.st-unbestaetigt{background:#f1ece6; color:#5f584f}
.st-offen{background:var(--blau-hell); color:var(--blau)}
.st-freigegeben{background:var(--gruen-hell); color:var(--gruen)}
.st-abgelehnt{background:var(--rot-hell); color:var(--rot-dunkel)}
.st-warteliste{background:var(--gelb-hell); color:var(--gelb)}
.st-abholbereit{background:#e4f1fb; color:#12558f}
.st-abgeholt{background:#e8e4f5; color:#4b3f8f}
.st-storniert{background:#eee; color:#777}

/* ---------- Fuß ---------- */
.fuss{background:#fff; border-top:1px solid var(--linie); margin-top:40px; padding:30px 0 44px; font-size:.92rem; color:var(--grau)}
.fuss h3{color:var(--tinte); font-size:.98rem; margin-top:18px}
.fuss a{color:var(--grau)}
.rechtsspalten{display:grid; gap:26px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
details.rechtstext{border-top:1px solid var(--linie); padding:14px 0}
details.rechtstext summary{cursor:pointer; font-weight:700; color:var(--tinte)}
details.rechtstext[open] summary{margin-bottom:10px}
.hinweis-rechtlich{background:var(--gelb-hell); border:1px solid #eddcb0; border-radius:10px; padding:12px 14px; font-size:.9rem; color:#4a3a12}

/* ---------- Schlichte Seiten ---------- */
body.schlicht{display:flex; align-items:center; justify-content:center; min-height:100vh; padding:24px}
.karte-mitte{background:#fff; border:1px solid var(--linie); border-radius:var(--radius);
  padding:34px; max-width:560px; box-shadow:var(--schatten)}
.statuszeichen{width:46px; height:46px; border-radius:50%; margin-bottom:16px;
  display:flex; align-items:center; justify-content:center; font-size:1.4rem; font-weight:800}
.statuszeichen.gruen{background:var(--gruen-hell); border:2px solid var(--gruen); color:var(--gruen)}
.statuszeichen.rot{background:var(--rot-hell); border:2px solid var(--rot); color:var(--rot-dunkel)}
.liste-schlicht{padding-left:20px}

/* ---------- Ladeanzeige / Meldungen ---------- */
.meldung{padding:14px 16px; border-radius:10px; margin-bottom:16px; font-weight:600}
.meldung.fehler{background:var(--rot-hell); border:1px solid #f3c9d1; color:var(--rot-dunkel)}
.meldung.erfolg{background:var(--gruen-hell); border:1px solid #bfe3d0; color:#154a30}
.spinner{display:inline-block; width:16px; height:16px; border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff; border-radius:50%; animation:dreh .7s linear infinite; vertical-align:-3px; margin-right:8px}
@keyframes dreh{to{transform:rotate(360deg)}}
.versteckt{display:none!important}

/* ---------- Team-Bereich ---------- */
body.team{background:#f3f1ee}
.team-gitter{display:grid; grid-template-columns:minmax(0,1fr) 420px; gap:18px; align-items:start}
@media (max-width:1000px){.team-gitter{grid-template-columns:1fr}}
.kennzahlen{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); margin-bottom:18px}
.kennzahl{background:#fff; border:1px solid var(--linie); border-radius:12px; padding:14px}
.kennzahl b{display:block; font-size:1.7rem; line-height:1.1}
.kennzahl span{color:var(--grau); font-size:.83rem}
.werkzeugleiste{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:14px}
.werkzeugleiste input[type=search], .werkzeugleiste select{
  font:inherit; padding:8px 11px; border:1px solid var(--linie); border-radius:9px; background:#fff}
table.tickets{width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--linie); border-radius:12px; overflow:hidden}
table.tickets th{text-align:left; font-size:.79rem; text-transform:uppercase; letter-spacing:.04em;
  color:var(--grau); padding:10px 12px; border-bottom:1px solid var(--linie); background:#faf8f5}
table.tickets td{padding:11px 12px; border-bottom:1px solid var(--linie); font-size:.92rem; vertical-align:top}
table.tickets tr{cursor:pointer}
table.tickets tr:hover td{background:#fbf9f6}
table.tickets tr.aktiv td{background:var(--rot-hell)}
.flagge{display:inline-block; background:var(--gelb-hell); border:1px solid #eddcb0; color:var(--gelb);
  border-radius:6px; padding:1px 6px; font-size:.75rem; font-weight:700; margin-left:6px}
.detail{background:#fff; border:1px solid var(--linie); border-radius:12px; padding:18px; position:sticky; top:16px; max-height:calc(100vh - 32px); overflow:auto}
.detail dl{display:grid; grid-template-columns:auto 1fr; gap:4px 14px; margin:0 0 14px; font-size:.92rem}
.detail dt{color:var(--grau)}
.detail dd{margin:0}
.verlauf{list-style:none; padding:0; margin:0; font-size:.86rem}
.verlauf li{padding:7px 0; border-bottom:1px dashed var(--linie)}
.verlauf .zeit{color:var(--grau)}
.reiter{display:flex; gap:4px; border-bottom:1px solid var(--linie); margin-bottom:16px; flex-wrap:wrap}
.reiter button{background:none; border:0; border-bottom:2px solid transparent; padding:10px 14px;
  font-weight:600; cursor:pointer; color:var(--grau)}
.reiter button.aktiv{color:var(--tinte); border-bottom-color:var(--rot)}
textarea{font:inherit; padding:10px 12px; border:1px solid var(--linie); border-radius:10px; width:100%; resize:vertical}
.kopierfeld{background:#f6f3ef; border:1px solid var(--linie); border-radius:10px; padding:12px;
  font-size:.85rem; white-space:pre-wrap; max-height:230px; overflow:auto; margin-bottom:8px}
/* Produktpflege: Bildspalte links, Felder rechts */
.artikelpflege{display:grid; grid-template-columns:180px minmax(0,1fr); gap:20px; align-items:start}
@media (max-width:820px){.artikelpflege{grid-template-columns:1fr}}
.bildspalte{display:flex; flex-direction:column; gap:8px}
.bildvorschau{
  aspect-ratio:4/3; border-radius:10px; border:1px solid var(--linie);
  background:#f2eee9 center/cover no-repeat;
  display:flex; align-items:center; justify-content:center;
  color:#b8b0a8; font-size:.82rem;
}
.dateiknopf{text-align:center; cursor:pointer}
.hochladestand{margin:0; min-height:1.2em}

.balken{height:7px; background:#eee7de; border-radius:4px; overflow:hidden; margin-top:5px}
.balken i{display:block; height:100%; background:var(--rot)}
@media print{.kopf,.werkzeugleiste,.knopf{display:none}}

/* Nachrichtenvorschau im Ticket */
.vorschau{border:1px solid var(--rot); border-radius:12px; padding:16px; margin-top:12px; background:#fff}
.vorschau h4{margin:0 0 8px; font-size:1rem}
.vorschau textarea{font-size:.9rem; line-height:1.5}
.vorschau .kanalwahl{display:flex; gap:16px; flex-wrap:wrap; margin:6px 0 12px}
.vorschau .kanalwahl label{display:flex; align-items:center; gap:7px; font-size:.92rem}
.versandbericht{font-size:.88rem; margin-top:10px}
.versandbericht .ok{color:var(--gruen)}
.versandbericht .achtung{color:var(--gelb)}
.vorlagenblock{border-top:1px solid var(--linie); padding-top:14px; margin-top:14px}
.vorlagenblock h4{margin:0 0 4px}

/* Mengenauswahl auf der Artikelkarte */
.mengenwahl{display:flex; align-items:center; gap:10px; margin-top:auto}
.mengenwahl .stufe{
  width:42px; height:42px; border-radius:10px; border:1px solid var(--linie); background:#fff;
  font-size:1.3rem; font-weight:700; line-height:1; cursor:pointer; color:var(--tinte);
}
.mengenwahl .stufe:hover:not(:disabled){background:#f6f3ef; border-color:#cfc7bf}
.mengenwahl .stufe:disabled{opacity:.35; cursor:not-allowed}
.mengenwahl .wert{
  min-width:52px; text-align:center; font-weight:700; font-size:1.1rem;
  border:1px solid var(--linie); border-radius:10px; padding:9px 4px; background:#fff;
}
.mengenwahl .wert.aktiv{border-color:var(--gruen); background:var(--gruen-hell); color:var(--gruen)}
.artikel .grenze{font-size:.83rem; color:var(--grau); margin:0}
.artikel .grenze strong{color:var(--tinte)}

/* Speichern-Zeile am einzelnen Artikel */
.artikelfuss{display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-top:14px; padding-top:12px; border-top:1px solid var(--linie)}
.artikelfuss .hilfetext{min-height:1.2em}
.artikelfuss .loeschen{margin-left:auto; color:var(--rot-dunkel); border-color:#f0cfcf}
.artikelfuss .loeschen:hover:not(:disabled){background:var(--rot-hell)}