:root {
  --endekra-tuerkis: #258E8A;
  --endekra-mint: #C7EBE1;
  --endekra-hellblau: #BDE0FF;
  --endekra-pink: #E83E8C;
  --endekra-text: #2E4C52;
  --endekra-weiss: #FFFFFF;
  --font-heading: 'Cormorant Garamond', serif;
  --font-body: 'Montserrat', sans-serif;
  --bg:#f3faf8; --card:var(--endekra-weiss); --ink:var(--endekra-text); --muted:#55706f; --gold:var(--endekra-tuerkis); --line:#dcebe7;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.6 var(--font-body); }
h1,h2,h3 { font-family:var(--font-heading); font-weight:600; margin:0 0 .4em; }
.hdhero { background:linear-gradient(135deg,var(--endekra-mint),var(--endekra-hellblau)); text-align:center; padding:48px 16px 40px; }
.hdhero .brand { letter-spacing:.2em; color:var(--gold); font-size:12px; text-transform:uppercase; }
.hdhero h1 { font-size:34px; margin-top:10px; }
.hdhero .brand { color:var(--endekra-pink); font-weight:600; }
main { max-width:760px; margin:0 auto; padding:24px 16px 64px; }
.card { background:var(--card); border-radius:10px; padding:22px 24px; margin-bottom:18px; box-shadow:0 1px 6px rgba(0,0,0,.05); }
.card.accent { border-left:3px solid var(--gold); }
.kicker { font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--gold); margin-bottom:4px; }
label { display:block; font-size:13px; color:var(--muted); margin:12px 0 4px; }
input, select { width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:8px; font:inherit; background:#fff; }
.row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
button { background:var(--gold); color:#fff; border:0; border-radius:8px; padding:11px 20px; font:inherit; cursor:pointer; margin-top:16px; }
button.ghost { background:transparent; color:var(--gold); border:1px solid var(--gold); }
button.small { padding:5px 10px; font-size:13px; margin:0 0 0 6px; }
.chip { display:inline-block; background:var(--endekra-mint); border-radius:20px; padding:4px 14px; font-size:13px; margin:2px; }
.hero { text-align:center; } .hero h2 { font-size:30px; }
svg text { font:11px var(--font-body); fill:var(--endekra-text); }
table { width:100%; border-collapse:collapse; font-size:14px; } td,th { padding:5px 8px; border-bottom:1px solid var(--line); text-align:left; }
.kunde { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid var(--line); }
.hint { font-size:12px; color:var(--muted); }
.klick { cursor:pointer; }
.rk { font-size:9px; font-weight:700; color:var(--muted); }
.pz.klick:hover { background:var(--bg); border-radius:6px; }
.info { position:relative; background:var(--card); border:1px solid var(--endekra-tuerkis); border-left-width:4px; border-radius:10px; padding:14px 40px 10px 18px; margin-bottom:18px; }
.info h3 { font-size:22px; margin:0 0 4px; } .info p { margin:6px 0; }
.info .kern { font-style:italic; color:var(--endekra-tuerkis); }
.info .x { position:absolute; right:8px; top:6px; margin:0; background:none; color:var(--muted); font-size:22px; padding:0 8px; }
.tpanel h4 { font:600 15px var(--font-body); margin:22px 0 4px; }
.schalter { display:flex; align-items:center; gap:10px; color:var(--ink); font-size:15px; margin:4px 0 0; cursor:pointer; }
.schalter input { width:auto; accent-color:var(--endekra-tuerkis); }
.zregler { padding:0; border:0; accent-color:var(--endekra-tuerkis); margin-top:8px; }
.zachse { display:flex; justify-content:space-between; font-size:11px; color:var(--muted); }
.zknoepfe { text-align:center; } .zknoepfe .small { margin:8px 3px 0; padding:6px 14px; }
.zdatum { text-align:center; font:600 20px var(--font-heading); margin:10px 0; }
.punkt { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; }
.tchart { max-width:360px; margin:10px auto; }
.chips { text-align:center; } .chip.pl { border:0; cursor:pointer; font:inherit; font-size:13px; color:var(--ink); margin-top:2px; }
.tinfo .info, .kinfo .info { margin-top:12px; margin-bottom:0; }
.tl { font-size:13px; } .tlkopf, .tlreihe { display:grid; grid-template-columns:96px 1fr; gap:8px; align-items:center; margin:4px 0; }
.tlachse { display:flex; justify-content:space-between; font-size:10px; color:var(--muted); font-style:normal; } .tlachse i { font-style:normal; }
.tlbalken { position:relative; height:16px; background:var(--endekra-mint); border-radius:4px; overflow:hidden; opacity:.9; }
.tlbalken u { position:absolute; top:0; bottom:0; }
.tlreihe s { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; }
.pkarte { border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin:10px 0; }
.treffer { background:#fdeacb; border-radius:8px; padding:8px 12px; margin:8px 0; font-size:14px; }
.chartkarte { padding:14px 8px; }
.chart { display:grid; grid-template-columns:minmax(66px,84px) 1fr minmax(66px,84px); gap:6px; align-items:stretch; }
.mitte { background:#e7f3f6; border-radius:10px; padding:6px 2px; }
.sp { display:flex; flex-direction:column; justify-content:space-between; background:#fff; border-radius:10px; padding:4px 2px; }
.spk { text-align:center; font-weight:700; font-size:13px; line-height:1.1; padding:4px 0 8px; border-bottom:1px solid var(--line); }
.spk small { display:block; font-weight:400; font-size:9px; color:var(--muted); }
.pz { display:flex; flex-direction:column; align-items:center; font-size:14px; padding:2px 0; line-height:1.25; }
.pz1 { display:flex; justify-content:center; align-items:center; gap:5px; }
.zg { font-size:9.5px; color:var(--muted); white-space:nowrap; }
.mitte { display:flex; align-items:center; }
.gl { color:#8a7f84; font-size:15px; width:1.1em; text-align:center; }
.centers div { margin:8px 0; } .centers b { font-weight:600; }
#fehler { color:#a33; font-size:14px; }
.hidden { display:none !important; }
@media print { header, .site-header, .site-footer, .hdhero, .noprint { display:none !important; } body { background:#fff; } .card { box-shadow:none; border:1px solid var(--line); } }

.seitenlink { text-align:center; font-size:14px; margin:18px 0; }
.seitenlink a { color:var(--endekra-tuerkis); font-weight:600; text-decoration:none; }
.seitenlink a:hover { text-decoration:underline; }

/* Handy: Bodygraph in voller Breite, die beiden Planetenspalten darunter */
@media (max-width:640px){
  .chart { grid-template-columns:1fr 1fr; gap:8px; }
  .mitte { grid-column:1 / -1; order:-1; }
  .sp { padding:6px 4px; }
  .pz1 { gap:6px; }
}