/* Oberflaeche fuer den Betreiber. Bewusst ruhig: links die Eingabe, rechts
   sofort die fertige Mail. Farben sind die der Marke aus der Mailvorlage. */
:root{
  --dunkel:#22323F; --dunkel-2:#1A2731; --akzent:#F0882D; --akzent-dunkel:#8C490D;
  --hell:#F3F2EE; --weiss:#fff; --rand:#DCD9D1; --text:#1E2F3B; --text-2:#5B6670; --text-3:#8C9AA6;
  --gut:#1F7A4D; --gut-hell:#E7F4EC; --warn:#8A5A00; --warn-hell:#FDF3E2; --fehler:#A62B26; --fehler-hell:#FBEDEC;
  --schatten:0 1px 2px rgba(30,47,59,.06),0 8px 24px rgba(30,47,59,.07);
  --radius:12px;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  font-family:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
  background:var(--hell); color:var(--text); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--akzent-dunkel)}
h1,h2,h3{color:var(--text); letter-spacing:-.02em; margin:0}
h1{font-size:26px;line-height:1.2}
h2{font-size:18px;line-height:1.3}
h3{font-size:14px;line-height:1.3}
small{color:var(--text-3)}

/* ---------- Rahmen ---------- */
.rahmen{display:flex;min-height:100vh}
.seitenleiste{
  width:236px;flex:0 0 236px;background:var(--dunkel);color:#DCD9D1;
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
}
.marke{padding:22px 20px 18px;border-bottom:1px solid rgba(220,217,209,.16)}
.marke .zeichen{display:flex;flex-direction:column;gap:2px;width:46px;margin-bottom:10px}
.marke .zeichen i{display:block;height:4px;background:var(--akzent);border-radius:1px}
.marke b{display:block;color:#fff;font-size:15px;line-height:1.25}
.marke span{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#FAC580;font-weight:600;margin-top:2px}
nav{padding:12px 10px;flex:1}
nav a{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:9px;
  color:#C6CFD6;text-decoration:none;font-size:14px;font-weight:500;margin-bottom:2px;
}
nav a:hover{background:rgba(255,255,255,.06);color:#fff}
nav a.aktiv{background:var(--akzent);color:#fff}
nav a .sym{flex:0 0 17px;opacity:.85}
.fuss{padding:14px 18px;border-top:1px solid rgba(220,217,209,.16);font-size:12px;color:#8C9AA6}
.fuss b{color:#fff;display:block;font-size:13px;font-weight:600}
.fuss a{color:#FAC580;text-decoration:none}

.inhalt{flex:1;min-width:0;padding:28px 32px 60px}
.kopfzeile{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:22px;flex-wrap:wrap}
.kopfzeile p{margin:6px 0 0;color:var(--text-2);max-width:64ch}

/* ---------- Bausteine ---------- */
.karte{background:var(--weiss);border:1px solid var(--rand);border-radius:var(--radius);box-shadow:var(--schatten)}
.karte>.kopf{padding:14px 18px;border-bottom:1px solid var(--rand);display:flex;align-items:center;justify-content:space-between;gap:12px}
.karte>.leib{padding:18px}
.gitter{display:grid;grid-template-columns:minmax(400px,1fr) 668px;gap:22px;align-items:start}
@media(max-width:1500px){.gitter{grid-template-columns:minmax(360px,1fr) 500px}}
@media(max-width:1160px){.gitter{grid-template-columns:1fr}}
@media(max-width:800px){.seitenleiste{display:none}.inhalt{padding:18px}}

label{display:block;font-size:12.5px;font-weight:600;color:var(--text-2);margin:0 0 5px;letter-spacing:.01em}
input[type=text],input[type=email],input[type=password],input[type=url],select,textarea{
  width:100%;padding:10px 12px;border:1px solid var(--rand);border-radius:9px;background:#fff;
  font:inherit;color:var(--text);
}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(240,136,45,.35);outline-offset:1px;border-color:var(--akzent)}
textarea{min-height:190px;resize:vertical;line-height:1.55}
.feld{margin-bottom:14px}
.feld .hinweis{font-size:12px;color:var(--text-3);margin-top:4px}
.reihe{display:flex;gap:12px}
.reihe>*{flex:1;min-width:0}

button,.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 18px;border-radius:9px;border:1px solid transparent;background:var(--dunkel);color:#fff;
  font:inherit;font-weight:600;cursor:pointer;text-decoration:none;
}
button:hover,.knopf:hover{filter:brightness(1.08)}
button:disabled{opacity:.5;cursor:not-allowed;filter:none}
.knopf-akzent,button.akzent{background:var(--akzent);color:#fff}
.knopf-still,button.still{background:#fff;color:var(--text);border-color:var(--rand)}
.knopf-still:hover,button.still:hover{background:var(--hell);filter:none}
.knopf-klein,button.klein{padding:7px 12px;font-size:13px;border-radius:8px}
.knopf-gefahr,button.gefahr{background:var(--fehler-hell);color:var(--fehler);border-color:#EEC9C7}

.meldung{padding:11px 14px;border-radius:9px;font-size:14px;margin-bottom:16px;border:1px solid}
.meldung.gut{background:var(--gut-hell);border-color:#BFE0CD;color:var(--gut)}
.meldung.warn{background:var(--warn-hell);border-color:#F0DDB8;color:var(--warn)}
.meldung.fehler{background:var(--fehler-hell);border-color:#EEC9C7;color:var(--fehler)}
.meldung.info{background:#EEF3F7;border-color:#D3DFE8;color:#33475A}

.marke-zeile{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.chip{
  padding:7px 13px;border:1px solid var(--rand);border-radius:999px;background:#fff;cursor:pointer;
  font-size:13px;font-weight:600;color:var(--text-2);
}
.chip:hover{border-color:var(--akzent);color:var(--akzent-dunkel)}
.chip.aktiv{background:var(--dunkel);border-color:var(--dunkel);color:#fff}

table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);font-weight:700;padding:0 12px 9px;border-bottom:1px solid var(--rand)}
td{padding:11px 12px;border-bottom:1px solid #EDEBE5;vertical-align:top}
tr:last-child td{border-bottom:0}
.leer{padding:38px 18px;text-align:center;color:var(--text-3)}

.abzeichen{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:.02em}
.abzeichen.gut{background:var(--gut-hell);color:var(--gut)}
.abzeichen.fehler{background:var(--fehler-hell);color:var(--fehler)}
.abzeichen.still{background:var(--hell);color:var(--text-2)}
.abzeichen.akzent{background:#FDEEDF;color:var(--akzent-dunkel)}

/* ---------- Vorschau ---------- */
.vorschau{position:sticky;top:22px}
.geraete{display:flex;gap:6px}
.geraete button{padding:6px 12px;font-size:12.5px;border-radius:7px;background:#fff;color:var(--text-2);border:1px solid var(--rand);font-weight:600}
.geraete button.aktiv{background:var(--dunkel);color:#fff;border-color:var(--dunkel)}
.buehne{background:var(--hell);padding:16px;display:flex;justify-content:center;align-items:flex-start;border-radius:0 0 var(--radius) var(--radius);min-height:420px;overflow:hidden}
.skalierer{flex:0 0 auto;width:620px;transform-origin:top center}
.buehne.handy .skalierer{width:390px}
.buehne iframe{display:block;width:100%;height:min(74vh,860px);border:1px solid var(--rand);border-radius:8px;background:#fff}

.lade{display:flex;align-items:center;gap:10px;color:var(--text-2);font-size:14px}
.dreher{width:15px;height:15px;border:2px solid var(--rand);border-top-color:var(--akzent);border-radius:50%;animation:dreh .7s linear infinite}
@keyframes dreh{to{transform:rotate(360deg)}}

/* ---------- Knopfzeilen (URL-Felder) ---------- */
.knopfzeile{display:flex;gap:10px;margin-bottom:9px;align-items:center}
.knopfzeile input{flex:1}
.knopfzeile input.text-feld{flex:0 0 40%}
.knopfzeile .weg{flex:0 0 auto;padding:9px 11px;background:#fff;border:1px solid var(--rand);color:var(--text-3);border-radius:8px;font-weight:700}
.knopfzeile .weg:hover{color:var(--fehler);border-color:#EEC9C7;background:var(--fehler-hell);filter:none}

/* ---------- Anmeldung ---------- */
.tor{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:linear-gradient(160deg,#22323F 0%,#1A2731 58%,#101A22 100%)}
.tor-karte{width:100%;max-width:404px;background:#fff;border-radius:16px;padding:30px;box-shadow:0 24px 60px rgba(0,0,0,.32)}
.tor-marke{display:flex;flex-direction:column;gap:2px;width:46px;margin-bottom:16px}
.tor-marke i{display:block;height:4px;background:var(--akzent);border-radius:1px}
.tor-karte h1{font-size:21px;margin-bottom:4px}
.tor-karte p.unter{color:var(--text-2);font-size:14px;margin:0 0 20px}
.tor-karte button{width:100%;margin-top:6px}
.tor-fuss{margin-top:18px;text-align:center;font-size:12.5px;color:var(--text-3)}
.code-feld{font-size:26px;letter-spacing:.42em;text-align:center;font-weight:700;padding:13px}
.qr{display:block;margin:0 auto 14px;width:196px;height:196px;border:1px solid var(--rand);border-radius:10px}
.geheim{font-family:ui-monospace,Menlo,Consolas,monospace;background:var(--hell);border:1px dashed var(--rand);
  border-radius:8px;padding:10px;text-align:center;font-size:14px;letter-spacing:.06em;word-break:break-all}
.codes{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0 4px}
.codes span{font-family:ui-monospace,Menlo,Consolas,monospace;background:var(--hell);border:1px solid var(--rand);
  border-radius:7px;padding:8px;text-align:center;font-size:13.5px;font-weight:600}
.schritte{display:flex;gap:8px;margin-bottom:18px}
.schritte i{flex:1;height:3px;border-radius:2px;background:var(--rand)}
.schritte i.an{background:var(--akzent)}

/* ---------- Posteingang ---------- */
nav a{position:relative}
.zaehler{
  margin-left:auto;background:var(--akzent);color:#fff;font-size:11px;font-weight:700;
  border-radius:999px;padding:1px 7px;min-width:19px;text-align:center;
}
nav a.aktiv .zaehler{background:#fff;color:var(--akzent-dunkel)}
table.post td{padding:12px}
table.post tr.neu td{background:#FFFDF9}
table.post tr.neu .von,table.post tr.neu a{font-weight:700}
table.post td.punkt{width:24px;padding-right:0}
table.post td.von{width:26%}
table.post td.zeit{width:88px;color:var(--text-3);white-space:nowrap;text-align:right}
table.post td.tat{width:96px;text-align:right}
table.post a{text-decoration:none;color:var(--text)}
table.post a:hover{color:var(--akzent-dunkel);text-decoration:underline}
table.post .abzeichen{margin-left:8px;vertical-align:1px}
.tupfen{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--akzent)}

.gitter-post{display:grid;grid-template-columns:minmax(360px,1fr) minmax(420px,600px);gap:22px;align-items:start}
@media(max-width:1180px){.gitter-post{grid-template-columns:1fr}}
.buehne-post{background:var(--hell);padding:14px;border-radius:0 0 var(--radius) var(--radius)}
.buehne-post iframe{width:100%;height:min(62vh,700px);border:1px solid var(--rand);border-radius:8px;background:#fff}
.rohtext{white-space:pre-wrap;word-break:break-word;font:14px/1.6 'Segoe UI',system-ui,Arial,sans-serif;
  margin:0;max-height:min(62vh,700px);overflow:auto;color:#33475A}
.anhaenge{display:flex;flex-wrap:wrap;gap:8px}
.zusammen{margin:0 0 12px;font-size:15px;color:var(--text);background:var(--hell);
  border-left:3px solid var(--akzent);border-radius:0 8px 8px 0;padding:10px 14px}
ul.punkte{margin:0 0 14px;padding-left:18px;color:var(--text-2);font-size:14px}
ul.punkte li{margin-bottom:3px}
.fehlt{background:var(--warn-hell);border:1px solid #F0DDB8;border-radius:9px;padding:10px 14px;margin-bottom:14px;font-size:14px;color:var(--warn)}
.fehlt ul{margin:6px 0 0;padding-left:18px}
.fehlt li{margin-bottom:2px}
code{background:var(--hell);padding:1px 5px;border-radius:4px;font-size:13px}
.luecke{background:#FDEEDF;box-shadow:0 0 0 2px #FDEEDF;border-radius:3px}