:root{
  --rot:#c21429; --rot-dunkel:#8f0d1e; --gold:#fabc47; --gold-text:#8a5c00;
  --gruen:#8db863; --gruen-text:#3f6b1f; --orange:#d97706;
  --tinte:#1a1512; --tinte-2:#241d19; --tinte-3:#2e2622;
  --papier:#f7f5f1; --weiss:#fff; --linie:#e3ddd4; --linie-2:#efeae2;
  --grau:#6b625a; --grau-hell:#7a716a;
  --schrift:"Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --display:"Fraunces",Georgia,serif;
  --seite:250px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--papier);color:var(--tinte);font-family:var(--schrift);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;line-height:1.2;letter-spacing:-.02em}
a{color:var(--rot)}
.verborgen{display:none!important}

/* ---------- Anmeldung ---------- */
#tor{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#241d19,#100d0b);padding:24px}
#tor .karte{width:100%;max-width:400px;text-align:center}
#tor img{height:52px;margin:0 auto 30px}
#tor h1{font-family:var(--display);font-size:2.1rem;color:#fff;font-weight:600;margin-bottom:8px}
#tor p{color:#a99e93;font-size:.92rem;margin:0 0 26px}
#tor .feld{display:flex;gap:9px}
#tor input{flex:1;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.22);
  color:#fff;padding:13px 15px;border-radius:4px;outline:none}
#tor input:focus{border-color:var(--gold);background:rgba(255,255,255,.11)}
#tor button{background:var(--rot);color:#fff;border:none;padding:13px 22px;border-radius:4px;
  font-weight:700;cursor:pointer}
#tor button:hover{background:#a8101f}
#tor .fehler{color:#ff9aa6;font-size:.87rem;margin-top:14px;min-height:20px}

/* ---------- Rahmen ---------- */
#rahmen{display:grid;grid-template-columns:var(--seite) minmax(0,1fr);min-height:100vh}
aside{background:var(--tinte);color:#c9bfb5;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;min-width:0}
aside .marke{padding:20px 20px 18px;border-bottom:1px solid rgba(255,255,255,.09)}
aside .marke img{height:34px}
aside .marke small{display:block;font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);margin-top:9px}
aside nav{padding:12px 0;flex:1;overflow-y:auto;min-width:0}
aside nav button{display:flex;align-items:center;gap:11px;width:100%;background:none;border:none;
  color:#b8ada2;padding:11px 20px;cursor:pointer;text-align:left;font-size:.92rem;border-left:3px solid transparent}
aside nav button:hover{color:#fff;background:rgba(255,255,255,.05)}
aside nav button.an{color:#fff;background:rgba(194,20,41,.16);border-left-color:var(--rot);font-weight:700}
aside nav button svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;flex:none}
aside .fuss{padding:14px 20px;border-top:1px solid rgba(255,255,255,.09);font-size:.72rem;color:#7d736a}
aside .fuss button{background:none;border:none;color:#a99e93;cursor:pointer;padding:0;text-decoration:underline;font-size:.72rem}
main{min-width:0;padding:26px 30px 60px}
@media(max-width:900px){
  #rahmen{grid-template-columns:minmax(0,1fr)}
  aside{position:static;height:auto}
  aside nav{display:flex;overflow-x:auto;padding:0;min-width:0}
  aside .marke{padding:14px 16px 12px}
  .karte{overflow-x:auto}
  aside nav button{border-left:none;border-bottom:3px solid transparent;white-space:nowrap;padding:12px 14px}
  aside nav button.an{border-left:none;border-bottom-color:var(--rot)}
  aside .fuss{display:none}
  main{padding:18px 16px 50px}
}

/* ---------- Kopf ---------- */
.seitenkopf{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-bottom:22px}
.seitenkopf h2{font-size:1.7rem;font-weight:800}
.seitenkopf p{margin:4px 0 0;color:var(--grau);font-size:.9rem}
.seitenkopf .rechts{margin-left:auto;display:flex;gap:9px;align-items:center;flex-wrap:wrap}

/* ---------- Bausteine ---------- */
.karten{display:grid;gap:14px}
.k4{grid-template-columns:repeat(4,1fr)} .k3{grid-template-columns:repeat(3,1fr)} .k2{grid-template-columns:repeat(2,1fr)}
@media(max-width:1100px){.k4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.k4,.k3,.k2{grid-template-columns:1fr}}
.karte{background:var(--weiss);border:1px solid var(--linie);border-radius:5px;padding:18px 20px}
.karte h3{font-size:.98rem;margin-bottom:12px}
.kennzahl .zahl{font-family:var(--display);font-size:2.3rem;font-weight:600;line-height:1;letter-spacing:-.03em}
.kennzahl .bez{font-size:.8rem;color:var(--grau);margin-top:7px}
.kennzahl.rot .zahl{color:var(--rot)} .kennzahl.gold .zahl{color:var(--gold-text)}
.kennzahl.gruen .zahl{color:var(--gruen-text)}

.knopf{background:var(--rot);color:#fff;border:none;padding:9px 16px;border-radius:4px;font-weight:700;
  font-size:.87rem;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.knopf:hover{background:#a8101f}
.knopf.still{background:var(--weiss);color:var(--tinte);border:1px solid var(--linie)}
.knopf.still:hover{background:var(--linie-2)}
.knopf.klein{padding:6px 11px;font-size:.8rem}
.knopf svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}

.marke-status{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;padding:3px 9px;border-radius:100px;white-space:nowrap}
.marke-status i{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.s-gut{color:var(--gruen-text);background:#eaf3e0}
.s-beobachten{color:var(--gold-text);background:#fdf1da}
.s-faellig{color:var(--rot);background:#fbe4e7}
.s-ueberfaellig{color:#fff;background:var(--rot)}
.marke-fern{color:#1d4ed8;background:#e4ebfd}

table{width:100%;border-collapse:collapse;font-size:.88rem}
th{text-align:left;font-size:.71rem;letter-spacing:.09em;text-transform:uppercase;color:var(--grau-hell);
  padding:0 12px 9px;border-bottom:1px solid var(--linie);font-weight:700}
td{padding:11px 12px;border-bottom:1px solid var(--linie-2);vertical-align:middle}
tbody tr{cursor:pointer}
tbody tr:hover{background:var(--linie-2)}
td.nr{font-family:ui-monospace,Menlo,monospace;font-size:.8rem;color:var(--grau)}
.leer{padding:34px;text-align:center;color:var(--grau-hell);font-size:.9rem}

input[type=text],input[type=number],input[type=date],select,textarea{
  width:100%;padding:9px 11px;border:1px solid var(--linie);border-radius:4px;background:var(--weiss);outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--rot);box-shadow:0 0 0 3px rgba(194,20,41,.1)}
label{display:block;font-size:.74rem;letter-spacing:.07em;text-transform:uppercase;color:var(--grau);
  margin-bottom:5px;font-weight:700}
.feldreihe{display:grid;gap:12px;margin-bottom:12px}
.f2{grid-template-columns:1fr 1fr} .f3{grid-template-columns:repeat(3,1fr)} .f4{grid-template-columns:repeat(4,1fr)}
@media(max-width:760px){.f2,.f3,.f4{grid-template-columns:1fr}}
.ankreuz{display:flex;align-items:center;gap:9px;font-size:.9rem;cursor:pointer;text-transform:none;letter-spacing:0;color:inherit;font-weight:400}
.ankreuz input{width:auto}

.werkzeugleiste{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.werkzeugleiste input[type=text]{max-width:280px}
.werkzeugleiste select{max-width:190px}

/* ---------- Objektakte ---------- */
.akte{display:grid;grid-template-columns:1.15fr 1fr;gap:16px}
@media(max-width:1000px){.akte{grid-template-columns:1fr}}
.dachfeld{background:linear-gradient(170deg,#f6f2eb,#ece4d8);border:1px solid var(--linie);border-radius:5px;padding:10px 10px 4px}
svg.dach{width:100%;height:auto;display:block;overflow:visible}
svg.dach .zone{cursor:pointer}
svg.dach .zone:hover{filter:brightness(1.07)}
svg.dach .zone:focus{outline:none}
svg.dach .zone.aus{opacity:.45}
svg.dach .zone.an .flaeche{stroke:var(--tinte);stroke-width:2.5}
svg.dach .flaeche{stroke:rgba(26,21,18,.28);stroke-width:1.2;stroke-linejoin:round}
svg.dach .marke circle{fill:#fff;stroke:var(--tinte);stroke-width:2}
svg.dach .marke text{font-family:var(--schrift);font-size:13px;font-weight:800;fill:var(--tinte);
  text-anchor:middle;dominant-baseline:central}

.uhren{list-style:none;padding:0;margin:0}
.uhren li{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:11px 0;border-bottom:1px solid var(--linie-2);cursor:pointer}
.uhren li:last-child{border-bottom:none}
.uhren li:hover{background:var(--linie-2)}
.uhren li.an{background:#fbf7f0}
.uhren .name{font-weight:700;font-size:.93rem}
.uhren .unter{font-size:.78rem;color:var(--grau);grid-column:1/-1}
.balken{height:7px;border-radius:100px;background:var(--linie-2);overflow:hidden;grid-column:1/-1;margin-top:3px}
.balken i{display:block;height:100%;border-radius:100px;transition:width .7s cubic-bezier(.2,.7,.3,1)}
.b-gut{background:var(--gruen)} .b-beobachten{background:var(--gold)}
.b-faellig{background:var(--rot)} .b-ueberfaellig{background:var(--rot-dunkel)}

.reihen{list-style:none;padding:0;margin:0;font-size:.88rem}
.reihen li{padding:10px 0;border-bottom:1px solid var(--linie-2)}
.reihen li:last-child{border-bottom:none}
.reihen .kopf{display:flex;justify-content:space-between;gap:12px;font-weight:700}
.reihen .datum{color:var(--grau);font-weight:400;font-size:.82rem;white-space:nowrap}
.reihen .text{color:var(--grau);margin-top:3px}

dl.werte{display:grid;grid-template-columns:1fr 1fr;gap:9px 14px;margin:0;font-size:.87rem}
dl.werte dt{color:var(--grau-hell);font-size:.72rem;letter-spacing:.07em;text-transform:uppercase}
dl.werte dd{margin:0 0 6px;font-weight:700}

/* ---------- Jahresplan ---------- */
.plan{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:1100px){.plan{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.plan{grid-template-columns:1fr}}
.monat{background:var(--weiss);border:1px solid var(--linie);border-radius:5px;padding:14px 15px;min-height:118px}
.monat.winter{border-color:#e9bcc2;background:#fffafb}
.monat h4{font-size:.85rem;display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}
.monat h4 span{font-family:var(--display);font-size:1.4rem;font-weight:600;color:var(--rot)}
.monat.leer h4 span{color:var(--linie)}
.monat ul{list-style:none;padding:0;margin:0;font-size:.79rem}
.monat li{padding:5px 0;border-top:1px solid var(--linie-2);cursor:pointer;display:flex;gap:7px;align-items:baseline}
.monat li:hover{color:var(--rot)}
.monat li b{font-weight:700}
.monat li .ort{color:var(--grau);font-size:.74rem}

/* ---------- Aufmass ---------- */
.rechnung{background:var(--weiss);border:1px solid var(--linie);border-radius:5px;overflow:hidden}
.rechnung table{font-size:.87rem}
.rechnung td.zahl,.rechnung th.zahl{text-align:right;font-variant-numeric:tabular-nums}
.rechnung tbody tr{cursor:default}
.rechnung tbody tr:hover{background:none}
.rechnung tfoot td{font-weight:700;border-top:2px solid var(--tinte);border-bottom:none}
.rechnung tfoot tr.gross td{font-size:1.15rem;font-family:var(--display);font-weight:600}
.kenn{display:flex;gap:22px;flex-wrap:wrap;padding:14px 16px;background:var(--linie-2);border-top:1px solid var(--linie);font-size:.85rem}
.kenn b{display:block;font-family:var(--display);font-size:1.3rem;font-weight:600;line-height:1.2}

/* ---------- Schublade ---------- */
.schub{position:fixed;inset:0;z-index:120;background:rgba(26,21,18,.55);display:flex;justify-content:flex-end}
.schub .blatt{background:var(--papier);width:min(560px,100%);height:100%;overflow-y:auto;padding:24px 26px 40px;
  box-shadow:-20px 0 60px rgba(0,0,0,.28)}
.schub h3{font-size:1.25rem;margin-bottom:4px}
.schub .zu{float:right;background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--grau);line-height:1}

/* ---------- Druck ---------- */
#druck{display:none}
@media print{
  aside,.seitenkopf .rechts,.werkzeugleiste,#tor{display:none!important}
  #rahmen{display:block}
  main{display:none}
  #druck{display:block;padding:0}
  body{background:#fff;font-size:11pt}
  @page{size:A4;margin:20mm 18mm 22mm}
}
.beleg{max-width:180mm;margin:0 auto;color:#000}
.beleg .briefkopf{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  border-bottom:2px solid #000;padding-bottom:10px;margin-bottom:20px}
.beleg .briefkopf b{font-size:1.05rem}
.beleg .briefkopf .klein{font-size:.78rem;color:#444;line-height:1.5}
.beleg h1{font-family:var(--display);font-size:1.6rem;font-weight:600;margin-bottom:14px}
.beleg h2{font-size:1rem;margin:20px 0 8px;padding-bottom:4px;border-bottom:1px solid #bbb}
.beleg table{width:100%;border-collapse:collapse;font-size:.85rem;margin-bottom:10px}
.beleg th{text-align:left;border-bottom:1px solid #000;padding:5px 6px;font-size:.72rem;text-transform:uppercase}
.beleg td{padding:5px 6px;border-bottom:1px solid #ddd}
.beleg .fuss{margin-top:26px;padding-top:10px;border-top:1px solid #bbb;font-size:.74rem;color:#444}
.beleg .unterschrift{margin-top:34px;font-family:var(--display);font-style:italic;font-size:1.3rem}
.beleg .unterschrift small{display:block;font-family:var(--schrift);font-style:normal;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.08em;color:#444;margin-top:6px}

/* ---------- Kennzeichnung: belegt gegen Demo ---------- */
.marke-quelle{display:inline-flex;align-items:center;gap:5px;font-size:.66rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:100px;
  white-space:nowrap;vertical-align:middle;align-self:flex-start;flex:none}
.marke-quelle svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.6}
.q-echt{color:var(--gruen-text);background:#eaf3e0;border:1px solid #c6ddaf}
.q-demo{color:var(--gold-text);background:#fdf1da;border:1px solid #eccb8f}
.karte h3 .marke-quelle{margin-left:8px}
.seitenkopf h2 .marke-quelle{margin-left:10px;vertical-align:middle}

/* Dauerhafter Streifen ueber der Buehne */
.streifen{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#fdf1da;
  border:1px solid #eccb8f;border-radius:5px;padding:10px 14px;margin-bottom:20px;font-size:.85rem}
.streifen b{color:var(--gold-text)}
.streifen > svg{width:18px;height:18px;flex:none;stroke:var(--gold-text);fill:none;stroke-width:2.2}
/* Notnagel: ein Inline-SVG ohne Groessenangabe darf nie die Seite sprengen */
svg:not([width]):not(.dach){max-width:2rem;max-height:2rem}
.streifen button{margin-left:auto;background:none;border:1px solid #d9b26a;color:var(--gold-text);
  padding:5px 12px;border-radius:100px;font-size:.78rem;font-weight:700;cursor:pointer;white-space:nowrap}
.streifen button:hover{background:#f8e4bf}

/* Herkunftsseite */
.herkunft{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:900px){.herkunft{grid-template-columns:1fr}}
.herkunft ul{list-style:none;padding:0;margin:0;font-size:.88rem}
.herkunft li{padding:11px 0;border-bottom:1px solid var(--linie-2)}
.herkunft li:last-child{border-bottom:none}
.herkunft li b{display:block}
.herkunft li span{color:var(--grau);font-size:.82rem}
.herkunft li .quelle{display:block;color:var(--grau-hell);font-size:.76rem;margin-top:3px;font-style:italic}
.beleg .demo-fuss{margin-top:14px;padding:8px 10px;border:1px dashed #999;font-size:.72rem;color:#333}
.q-richt{color:#1d4ed8;background:#e8eefd;border:1px solid #b9caf5}