/* Sternenbrief – created by AnnoBoy 2026 */
:root{
  --seite:#151038; --karte:#0d0d25; --violett:#7b2cff; --violett2:#a95bff;
  --titel:#f7f4ff; --text:#e4e0f0; --leise:#a9a2c4; --linie:#2c2560;
  --gruen:#7dffc0; --luecke:#fff1a8;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--seite);color:var(--text);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
body{min-height:100vh;display:flex;flex-direction:column}
a{color:var(--violett2)}
button{font:inherit;cursor:pointer}
[hidden]{display:none!important}

.kopf{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding:14px 16px;border-bottom:1px solid var(--linie);background:var(--karte)}
.marke{font-weight:800;font-size:1.35rem;text-decoration:none;background:linear-gradient(90deg,#c9a7ff,#7b2cff 60%,#ff8fd0);-webkit-background-clip:text;background-clip:text;color:transparent}
.kopf-sub{color:var(--leise);font-size:.95rem}

.ansicht{flex:1;width:100%;max-width:1280px;margin:0 auto;padding:16px}
.hallo h1{color:var(--titel);font-size:1.5rem;margin:6px 0 4px}
.hallo p{margin:0 0 16px;color:var(--text);text-align:justify;hyphens:auto;max-width:720px}

.kacheln{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.kachel{background:var(--karte);border:1px solid var(--linie);border-radius:14px;padding:14px;text-align:left;color:var(--text);display:flex;flex-direction:column;gap:4px;transition:border-color .15s,transform .15s}
.kachel:hover,.kachel:focus-visible{border-color:var(--violett);transform:translateY(-2px);outline:none}
.kachel .ico{font-size:1.7rem}
.kachel b{color:var(--titel);hyphens:auto;overflow-wrap:anywhere}
.kachel small{color:var(--leise)}

.meine{margin-top:22px}
.meine h2{color:var(--titel);font-size:1.15rem}
.meine h2 small{color:var(--leise);font-weight:400;font-size:.8rem}
.eintrag{display:flex;align-items:center;gap:8px;background:var(--karte);border:1px solid var(--linie);border-radius:10px;padding:10px 12px;margin-bottom:8px}
.eintrag span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eintrag small{color:var(--leise)}
.eintrag button{background:none;border:1px solid var(--linie);color:var(--text);border-radius:8px;padding:4px 10px}

.werbung{display:flex;gap:12px;align-items:center;margin-top:24px;padding:14px 16px;border-radius:14px;text-decoration:none;color:var(--text);background:linear-gradient(120deg,#24124f,#0d0d25);border:1px solid var(--violett)}
.werbung-stern{font-size:2rem}
.werbung b{color:var(--titel)}

/* Editor */
.umschalter{display:none;gap:6px;margin-bottom:10px}
.umschalter button{flex:1;padding:10px;border-radius:10px;border:1px solid var(--linie);background:var(--karte);color:var(--text)}
.umschalter button.an{background:var(--violett);border-color:var(--violett);color:#fff}
.arbeit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
.zurueck{background:none;border:none;color:var(--violett2);padding:0 0 8px}
.block{background:var(--karte);border:1px solid var(--linie);border-radius:14px;padding:12px;margin-bottom:12px}
.block summary{cursor:pointer;color:var(--titel);font-weight:600}
.block summary small{color:var(--leise);font-weight:400}
.felder{margin-top:10px}
label{display:block;font-size:.85rem;color:var(--leise);margin-bottom:8px}
label i{font-style:normal;opacity:.8}
input,textarea{display:block;width:100%;margin-top:3px;padding:9px 10px;border-radius:9px;border:1px solid var(--linie);background:#0a0a1c;color:var(--titel);font:inherit;font-size:16px}
input:focus,textarea:focus,.textfeld:focus{outline:2px solid var(--violett);border-color:var(--violett)}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.haken{display:flex;align-items:center;gap:8px}
.haken input{width:auto;margin:0}
.werkzeug{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.werkzeug button{background:#1b1640;border:1px solid var(--linie);color:var(--titel);border-radius:8px;padding:6px 10px;min-width:40px}
.werkzeug button:hover{border-color:var(--violett)}
.textfeld{min-height:260px;padding:12px;border-radius:9px;border:1px solid var(--linie);background:#fff;color:#111;font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.45;text-align:justify;hyphens:auto}
.textfeld p{margin:0 0 .8em}
.luecke{background:var(--luecke);color:#111;border-radius:3px;padding:0 2px}
.tipp{font-size:.85rem;color:var(--leise);margin:8px 0 0}

/* Vorschau-Blatt (A4 in mm) */
.vorschau{position:sticky;top:12px}
.blatt-rahmen{width:100%;overflow:hidden;border-radius:6px;box-shadow:0 8px 30px rgba(0,0,0,.5)}
.blatt{--x0:25mm;width:210mm;min-height:297mm;background:#fff;color:#111;position:relative;padding:98.5mm 20mm 20mm 25mm;font-family:Arial,Helvetica,sans-serif;font-size:11pt;line-height:1.35;transform-origin:0 0}
.blatt .b-abs{position:absolute;left:125mm;top:15mm;font-size:9.5pt;line-height:1.35}
.blatt .b-abs b{font-size:11pt}
.blatt .b-rueck{position:absolute;left:var(--x0);top:57mm;width:85mm;font-size:7pt;border-bottom:.2mm solid #333;white-space:nowrap;overflow:hidden}
.blatt .b-an{position:absolute;left:var(--x0);top:63mm;width:85mm;white-space:pre-line}
.blatt .b-datum{text-align:right;margin:0 0 8mm}
.blatt .b-betreff{font-weight:700;margin:0 0 8mm}
.blatt .b-text{text-align:justify;hyphens:auto}
.blatt .b-text p{margin:0 0 4.2mm}
.blatt .b-text ul,.blatt .b-text ol{margin:0 0 4.2mm;padding-left:7mm}
.blatt .b-gruss{margin-top:2mm}
.blatt .b-name{margin-top:14mm}
.blatt .b-unterschrift{margin-top:18mm;border-top:.2mm solid #333;width:70mm;padding-top:1mm;font-size:9pt}
.blatt .b-anl{margin-top:8mm;font-size:10pt}
.blatt .marke-f{position:absolute;left:5mm;width:5mm;border-top:.2mm solid #999}
.blatt .luecke{background:var(--luecke)}

/* Leiste */
.leiste{position:sticky;bottom:0;display:flex;flex-wrap:wrap;gap:8px;padding:12px 0;background:linear-gradient(transparent,var(--seite) 30%)}
.leiste button{flex:1 1 140px;padding:12px;border-radius:12px;border:1px solid var(--linie);background:var(--karte);color:var(--titel);font-weight:600}
.leiste button.haupt{background:var(--violett);border-color:var(--violett)}
.leiste button:hover{border-color:var(--violett2)}
.leiste button.bald{opacity:.55}
.leiste button small{font-weight:400;font-size:.7rem;background:#2c2560;border-radius:6px;padding:1px 5px}

.meldung{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:#0d0d25;border:1px solid var(--gruen);color:var(--titel);padding:10px 16px;border-radius:12px;z-index:50;max-width:calc(100% - 32px);box-shadow:0 6px 24px rgba(0,0,0,.5)}

.fuss{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:12px 16px;border-top:1px solid var(--linie);font-size:.8rem;color:var(--leise)}
.fuss a{text-decoration:none}
.signatur{margin-left:auto}
.druckblatt{display:none}

@media (max-width:860px){
  .umschalter{display:flex}
  .arbeit{grid-template-columns:minmax(0,1fr)}
  .arbeit.zeige-formular .vorschau{display:none}
  .arbeit.zeige-vorschau .formular{display:none}
  .vorschau{position:static}
  .zwei{grid-template-columns:1fr}
  .leiste button{flex:1 1 45%}
}

/* Drucken (Handy-Weg): nur das Blatt */
@page{size:A4;margin:20mm 20mm 20mm 25mm}
@page :first{margin-top:0}
@media print{
  html,body{background:#fff!important}
  body>*:not(.druckblatt){display:none!important}
  .druckblatt{display:block}
  .druckblatt .blatt{--x0:0mm;width:auto;min-height:0;padding:98.5mm 0 0 0;box-shadow:none;transform:none!important}
  .druckblatt .blatt .b-abs{left:100mm}
  .druckblatt .marke-f{display:none}
  .druckblatt .luecke{background:none}
}