/* Typorama Cockpit — Theme „Papier/Ink" (G4)
   EB Garamond (Display/Text) · Nunito Sans (Labels) · JetBrains Mono (Technik) · Akzent Gelb #ffcc00 */
:root{
  --paper:#f6f6f4; --paper-2:#efeee9; --panel:#fbfbf9;
  --ink:#1b1b18; --label:#5f5d54; --soft:#7c7a71; --rule:#dad8cf;
  --gelb:#ffcc00; --brick:#a8412b; --moss:#586b45;
  --serif:'EB Garamond',Georgia,serif;
  --sans:'Nunito Sans',Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:19px;line-height:1.6;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
.wrap{max-width:1120px;margin:0 auto;padding:0 40px}
hr{border:0;border-top:1px solid var(--rule);margin:0}
.rule-ink{border:0;border-top:2px solid var(--ink);margin:0}
.mono{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--label)}
.lab{font-family:var(--sans);font-weight:700;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--label)}
.muted{color:var(--soft)} .neg{color:var(--brick)} .small{font-size:.85rem}
.right{text-align:right} .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------- Kopf */
.coords{display:flex;justify-content:space-between;align-items:center;padding:.7rem 0}
.coords b{color:var(--ink);font-weight:500}
.coords-act{display:flex;gap:.5rem}
.dot{width:8px;height:8px;border-radius:50%;background:var(--gelb);display:inline-block;margin-right:.4rem;box-shadow:0 0 0 4px rgba(255,204,0,.22)}
.icon-btn{font-family:var(--mono);background:transparent;border:1px solid var(--rule);color:var(--label);width:34px;height:30px;border-radius:3px;font-size:1rem;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.icon-btn:hover{border-color:var(--ink);color:var(--ink)}
.icon-btn .ico{display:inline-block;line-height:1}
#refreshBtn.spin .ico{animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}

.mast{display:flex;align-items:center;justify-content:space-between;padding:.9rem 0 .8rem;flex-wrap:wrap;gap:.8rem}
.logo{font-family:var(--serif);font-weight:600;letter-spacing:.05em;font-size:1.5rem}
.logo .slash{color:var(--soft)} .logo .reg{color:var(--gelb);font-size:.85rem;vertical-align:.7rem}
.tabs{display:flex;gap:.45rem;flex-wrap:wrap}
.tabs button{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--label);background:transparent;border:1px solid var(--rule);padding:.36rem .62rem;border-radius:2px;cursor:pointer}
.tabs button:hover{color:var(--ink);border-color:var(--soft)}
.tabs button.on{color:var(--ink);border-color:var(--ink)}
.tabs button.on::before{content:"● ";color:var(--gelb)}

#view{padding-top:.4rem;min-height:60vh}

/* ---------------------------------------------------------- Fuss */
.foot{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:2.6rem;padding:.9rem 0 1.6rem;border-top:1px solid var(--rule)}
.foot .ver{color:var(--ink)}

/* ---------------------------------------------------------- Sektionstitel */
.sechs,.section-title-row{display:flex;align-items:baseline;gap:1rem;margin:2.2rem 0 .4rem}
.sechs h2{font-family:var(--serif);font-weight:600;font-size:1.6rem;margin:0}
.sechs .line{flex:1;border-top:1px solid var(--rule);transform:translateY(-7px)}
.section-title{font-family:var(--sans);font-weight:700;text-transform:uppercase;font-size:.8rem;letter-spacing:.14em;color:var(--label);margin:2.2rem 0 .7rem}
.section-title:first-child{margin-top:1.4rem}

/* ---------------------------------------------------------- Hero (Dashboard) */
.hero{padding:2.2rem 0 1.6rem}
.hero .lab{display:block;margin-bottom:.9rem}
.hero h1{font-family:var(--serif);font-weight:600;font-size:3.3rem;line-height:1.12;letter-spacing:-.01em;margin:0;max-width:22ch}
.hero h1 .neg{color:var(--brick)}
.hero .act{font-size:1.35rem;color:var(--soft);margin-top:1rem}
.hero .act .hl,.hl{background:linear-gradient(transparent 58%, var(--gelb) 58%);padding:0 .12em;color:var(--ink)}

/* ---------------------------------------------------------- Kennzahlen (Dashboard) */
.chart{max-height:0;overflow:hidden;transition:max-height .55s ease}
.chart.open{max-height:320px}
.chart .inner{padding:.6rem 0 0}
.bars{display:flex;align-items:flex-end;gap:22px;height:170px}
.bars .col,.bars .bar-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:.55rem;min-width:20px}
.bar{width:62%;background:var(--ink)}
.chart .bar{height:0;transition:height .65s cubic-bezier(.2,.75,.25,1)}
.col.pk .bar,.bar-col.pk .bar{background:var(--gelb)}
.bars .m,.bar-lbl{font-family:var(--sans);font-weight:600;font-size:.85rem;color:var(--label)}
.bar-val{font-family:var(--mono);font-size:.58rem;color:var(--soft)}

.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid var(--ink)}
.stat{padding:1.4rem 1.4rem 1.3rem;border-right:1px solid var(--rule);cursor:pointer;transition:background .15s}
.stat:last-child{border-right:0}.stat:hover{background:var(--paper-2)}
.stat .lab{display:block;margin-bottom:.55rem}
.stat .v{font-family:var(--serif);font-weight:500;font-size:2.6rem;line-height:1;letter-spacing:-.01em}
.stat .v .cur{font-size:1rem;color:var(--soft);margin-right:.16rem}
.stat .v.neg{color:var(--brick)}
.stat .toggle{font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--label);margin-top:.6rem;display:inline-flex;align-items:center;gap:.4rem}
.stat .toggle .car{display:inline-block;transition:transform .3s}
.stat.on .toggle{color:var(--ink)} .stat.on .toggle .car{transform:rotate(180deg)}

/* Aufklapp-Listen unter den Kennzahlen */
.detail{max-height:0;overflow:hidden;border-bottom:1px solid var(--rule);transition:max-height .5s ease}
.detail.open{max-height:520px}
.detail .pane{display:none;padding:1.5rem 0 1.8rem}.detail .pane.show{display:block}
.list .li{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:baseline;padding:.65rem 0;border-bottom:1px solid var(--rule);opacity:0;transform:translateY(-10px);transition:opacity .4s ease,transform .4s ease}
.detail.open .pane.show .li{opacity:1;transform:none}
.list .li:nth-child(2){transition-delay:.06s}.list .li:nth-child(3){transition-delay:.12s}.list .li:nth-child(4){transition-delay:.18s}.list .li:nth-child(5){transition-delay:.24s}.list .li:nth-child(6){transition-delay:.3s}
.li .name{font-size:1.15rem}
.li .name small{font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--soft);margin-left:.6rem}
.li .amt{font-family:var(--serif);font-size:1.3rem;white-space:nowrap}.li .amt.neg{color:var(--brick)}
.li.sum{border-bottom:0}.li.sum .name{font-family:var(--sans);font-weight:700;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--label)}.li.sum .amt{font-weight:500}
.more{font-style:italic;color:var(--soft);margin-top:.6rem;font-size:1rem}

/* Nächste Schritte / Empfehlungen */
.steps{padding:1.8rem 0 2.2rem}
.step,.recos li{display:flex;gap:1.3rem;align-items:baseline;padding:1rem 0;border-bottom:1px solid var(--rule)}
.steps .step:first-of-type{border-top:1px solid var(--rule)}
.step .k,.recos .k{font-family:var(--mono);font-weight:500;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--label);flex:0 0 8rem}
.step .k.al,.recos .k.al{color:var(--brick)}
.step .t,.recos li span:last-child{font-size:1.28rem}
.step .t b{font-weight:600}
.recos{list-style:none;margin:0;padding:0}
.recos .reco-ic{flex:0 0 auto}

/* Search Console / SEO (Dashboard) – Chancen */
.seo{padding:.4rem 0 1.6rem}
.seo-prop2{border-top:1px solid var(--rule);padding:1rem 0 .6rem}
.seo-prop2:first-of-type{border-top:2px solid var(--ink)}
.seo-head2{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:.4rem}
.seo-name{font-family:var(--serif);font-weight:600;font-size:1.3rem}
.seo-stat{font-family:var(--mono);font-size:.72rem;letter-spacing:.02em;color:var(--soft)}
.seo-d{font-family:var(--mono);margin-left:.1em}
.seo-d.up{color:var(--moss)} .seo-d.dn{color:var(--brick)}
.seo-opps{list-style:none;margin:0;padding:0}
.seo-opp{display:flex;align-items:baseline;gap:.7rem;padding:.55rem 0;border-bottom:1px solid var(--rule);flex-wrap:wrap}
.seo-q{font-family:var(--serif);font-size:1.18rem}
.seo-meta{font-family:var(--mono);font-size:.64rem;color:var(--soft);letter-spacing:.03em}
.seo-tag{font-family:var(--sans);font-weight:700;font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;padding:.14rem .5rem;border-radius:2px;margin-left:auto;white-space:nowrap}
.seo-tag.push{background:#e6ece0;color:var(--moss)}
.seo-tag.title{background:#faecda;color:#854f0b}
.seo-prompt{font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;border:1px solid var(--rule);background:transparent;color:var(--label);border-radius:3px;padding:.28rem .55rem}
.seo-prompt:hover{border-color:var(--ink);background:var(--gelb);color:#000}
.prompt-btn{font-family:var(--mono);font-size:.58rem;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;border:1px solid var(--rule);background:transparent;color:var(--label);border-radius:3px;padding:.22rem .5rem;flex:0 0 auto;white-space:nowrap}
.prompt-btn:hover{border-color:var(--ink);background:var(--gelb);color:#000}
.ktask-head .prompt-btn{align-self:center}
.check-item .prompt-btn{margin-top:.1rem}
.seo-none{color:var(--soft);font-style:italic;font-size:.95rem;padding:.1rem 0 .5rem}
.seo-hint{font-style:italic;color:var(--soft);font-size:1rem;margin-top:1rem}

/* ---------------------------------------------------------- Karten / Tabellen / Listen (andere Tabs) */
.card{background:transparent;border:0;border-top:1px solid var(--rule);padding:1.2rem 0 0;margin-bottom:1.4rem}
.card h3{font-family:var(--serif);font-weight:600;font-size:1.4rem;margin:0 0 .6rem}
.grid{display:grid;gap:0}
.grid.kpi{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));border-top:2px solid var(--ink);border-bottom:1px solid var(--rule)}
.grid.cards{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.4rem}
.kpi-tile{padding:1.3rem 1.4rem;border-right:1px solid var(--rule)}
.kpi-tile:last-child{border-right:0}
.kpi-tile .label{font-family:var(--sans);font-weight:700;font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;color:var(--label);display:block;margin-bottom:.5rem}
.kpi-tile .value{font-family:var(--serif);font-weight:500;font-size:2.4rem;line-height:1}
.kpi-tile .sub{font-style:italic;color:var(--soft);font-size:.95rem;margin-top:.45rem}
.kpi-tile.warn .value{color:var(--brick)}

table{width:100%;border-collapse:collapse;font-size:1.02rem}
th,td{text-align:left;padding:.7rem .6rem;border-bottom:1px solid var(--rule);vertical-align:top}
th{font-family:var(--sans);font-weight:700;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--label)}
tr.done td{color:var(--soft)} tr.done .aufgabe{text-decoration:line-through}

/* Badges */
.badge{font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;padding:.18rem .5rem;border-radius:2px;white-space:nowrap;background:var(--paper-2);color:var(--label);border:1px solid var(--rule)}
.badge.gelb{background:var(--gelb);color:#3a2f00;border-color:var(--gelb)}
.badge.rot{background:#f3e4df;color:var(--brick);border-color:#e6c9c0}
.badge.gruen{background:#e6ece0;color:var(--moss);border-color:#cdd9c2}
.badge.grau{background:var(--paper-2)}
.mahn{font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.04em}
.mahn-1{color:#9a7b1e}.mahn-2{color:#c0561f}.mahn-3{color:var(--brick)}

/* Checklisten (Aufgaben) */
.check-item{display:flex;align-items:flex-start;gap:.7rem;padding:.45rem 0}
.check-item input{margin-top:.4rem;width:20px;height:20px;accent-color:var(--ink);cursor:pointer;flex:0 0 auto}
.check-item label{cursor:pointer;font-size:1.12rem;flex:1}
.check-item.checked label{color:var(--soft);text-decoration:line-through}
.status-pick{font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;padding:.3rem .5rem;border:1px solid var(--rule);border-radius:3px;background:var(--panel);color:var(--ink)}

/* Buttons */
button.btn,.btn{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;border-radius:3px;padding:.5rem .8rem;border:1px solid var(--ink);background:var(--ink);color:var(--paper)}
button.btn.ghost,.btn.ghost{background:transparent;color:var(--ink)}
button.btn.small,.btn.small{padding:.32rem .55rem;font-size:.62rem}
button.btn:hover,.btn:hover{background:var(--gelb);color:#000;border-color:var(--gelb)}
input.cell-edit,textarea.cell-edit{font-family:var(--serif);font-size:1.02rem;width:100%;border:1px solid var(--ink);border-radius:3px;padding:.4rem .5rem;background:var(--panel)}

/* Deck-Liste */
.deck-bar{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;margin:1rem 0 .4rem}
.board-select{font-family:var(--mono);font-size:.78rem;padding:.45rem .6rem;border-radius:3px;border:1px solid var(--rule);background:var(--panel)}
.tasklist{list-style:none;margin:0;padding:0}
.taskrow{display:flex;gap:.8rem;align-items:flex-start;padding:.8rem 0;border-bottom:1px solid var(--rule)}
.done-btn{flex:0 0 auto;margin-top:.15rem;width:30px;height:30px;border-radius:50%;border:1px solid var(--rule);background:transparent;color:var(--moss);font-size:1rem;cursor:pointer}
.done-btn:hover{background:var(--moss);color:#fff;border-color:var(--moss)}
.taskmain{flex:1;min-width:0}
.tasktitle{font-size:1.18rem}
.taskmeta{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-top:.25rem}
.due{font-family:var(--mono);font-size:.66rem;letter-spacing:.04em;color:var(--soft)}.due.overdue{color:var(--brick)}

/* Aufgaben-Tab: Schwerpunkte + aufklappbare T/S-Liste */
.aufg-bar{display:flex;justify-content:space-between;align-items:center;gap:.8rem;flex-wrap:wrap;padding:.6rem 0 .2rem}
.sort-pick{font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;padding:.32rem .5rem;border:1px solid var(--rule);border-radius:3px;background:var(--panel);color:var(--ink)}
.sp-head{display:flex;justify-content:space-between;gap:.6rem;align-items:flex-start;flex-wrap:wrap}
.sp-head h3{flex:1}
.ktasks-card{border-top:1px solid var(--rule)}
.ktasks{list-style:none;margin:0;padding:0}
.ktask{border-bottom:1px solid var(--rule)}
.ktask-head{display:flex;align-items:baseline;gap:.9rem;padding:.85rem 0;cursor:pointer}
.ktask-head:hover .ktask-title{color:#000}
.ktask-id{font-family:var(--mono);font-size:.72rem;color:var(--soft);flex:0 0 2.6rem}
.ktask-title{flex:1;font-size:1.2rem}
.ktask.done .ktask-title{text-decoration:line-through;color:var(--soft)}
.ktask-car{font-family:var(--mono);font-size:.7rem;color:var(--soft);transition:transform .3s}
.ktask.open .ktask-car{transform:rotate(180deg);color:var(--ink)}
.ktask-detail{max-height:0;overflow:hidden;transition:max-height .4s ease}
.ktask.open .ktask-detail{max-height:1600px}
.ktask-inner{padding:.2rem 0 1.1rem 3.5rem}
.km{display:grid;grid-template-columns:9rem 1fr;gap:1rem;align-items:baseline;padding:.4rem 0}
.km-lbl{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}
.km input.cell-edit{max-width:640px}
.km-val{min-width:0}
.km-val code{font-family:var(--mono);font-size:.82em;background:var(--paper-2);padding:.05em .3em;border-radius:2px}
.km-val a{color:var(--brick)}
.km-pts{margin:0;padding-left:1.1rem}
.km-pts li{margin:.2rem 0}
.ktask-head .badge{align-self:center}
.ktask.ready .ktask-id{color:var(--moss)}
.ktask-actions{margin-top:.7rem;display:flex;gap:.5rem}
.ktasks-foot{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.9rem 0}

/* Top-Kunden / Kategorie-Balken (Umsatz-Tab) */
.health-row{display:flex;align-items:center;gap:.7rem;padding:.6rem 0;border-bottom:1px solid var(--rule)}
.health-row .dot{box-shadow:none;width:10px;height:10px}
.health-row .dot.ok{background:var(--moss)}.health-row .dot.bad{background:var(--brick)}.health-row .dot.unknown{background:var(--soft)}
.links a{display:inline-block;margin:.3rem .6rem .3rem 0}

/* Diverse */
.empty{color:var(--soft);padding:1.4rem 0;font-style:italic}
.loading{color:var(--soft);padding:2.5rem 0;text-align:center;font-style:italic}
.row-actions{display:flex;gap:.4rem}
.cached-note{font-family:var(--mono);font-size:.58rem;color:#b6b3a8;text-transform:uppercase;letter-spacing:.1em;margin:1.8rem 0 1rem}
.mini{font-family:var(--mono);background:none;border:1px solid var(--rule);border-radius:3px;cursor:pointer;padding:.2rem .45rem;font-size:.9rem}.mini:hover{border-color:var(--ink)}

/* Toast */
.toast{position:fixed;left:50%;bottom:1.4rem;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:.7rem 1.1rem;border-radius:4px;font-family:var(--sans);font-weight:600;font-size:.85rem;z-index:50;border-left:3px solid var(--gelb);max-width:90vw}
.toast.err{border-left-color:var(--brick)}

/* Login */
.login-body{display:flex;min-height:100vh;align-items:center;justify-content:center;background:var(--paper)}
.login-card{background:var(--panel);border:1px solid var(--rule);border-top:3px solid var(--gelb);border-radius:6px;padding:2.2rem;width:min(380px,92vw)}
.login-logo{font-family:var(--serif);font-weight:600;letter-spacing:.08em;font-size:1.7rem;text-align:center}
.login-claim{font-family:var(--mono);text-transform:uppercase;letter-spacing:.2em;font-size:.62rem;color:var(--label);text-align:center;margin-bottom:1.6rem}
.login-card label{display:block;font-family:var(--sans);font-weight:700;font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--label);margin-bottom:1rem}
.login-card input{width:100%;padding:.65rem;margin-top:.3rem;border:1px solid var(--rule);border-radius:4px;font-family:var(--serif);font-size:1.05rem;background:var(--paper)}
.login-card button{width:100%;margin-top:.7rem;padding:.8rem;font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;background:var(--ink);color:var(--paper);border:1px solid var(--ink);border-radius:4px;cursor:pointer}
.login-card button:hover{background:var(--gelb);color:#000;border-color:var(--gelb)}
.login-error{color:var(--brick);font-family:var(--sans);font-size:.85rem;text-align:center}

/* Arbeitslisten-Tab */
.card.liste .sp-head{align-items:flex-start;gap:.8rem}
.card.liste .sp-head h3{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.lhead-act{display:flex;align-items:center;gap:.5rem;flex-shrink:0}
.lmeta{display:flex;flex-wrap:wrap;gap:.2rem 1.1rem;font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--label);margin:.15rem 0 .5rem}
.card.liste .health-row{border-bottom:0;padding:.35rem 0}
.zielbody{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;min-width:0}
.zielbody a{word-break:break-all}
.pathv{font-family:var(--mono);font-size:.76rem;background:var(--paper-2);border:1px solid var(--rule);padding:.12rem .4rem;word-break:break-all}
.ltext{margin:.4rem 0 .2rem;font-size:.95rem;color:var(--label)}
.lchecks{margin-top:.5rem;border-top:1px solid var(--rule);padding-top:.35rem}

/* ---------------------------------------------------------- Kurstermine */
/* Der Anstoss oben: das Stueck, das fragt — damit sich niemand etwas merken muss. */
.anstoss{border:2px solid var(--ink);background:var(--panel);padding:1.1rem 1.2rem;margin:1.4rem 0 2rem}
.anstoss-kopf{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap}
.anstoss-kopf h3{font-family:var(--serif);font-weight:600;font-size:1.35rem;margin:0}
.anstoss .marke{background:var(--gelb);font-family:var(--sans);font-weight:700;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;padding:.12rem .5rem}
.anstoss p{margin:.5rem 0 0}
.anstoss ul{margin:.6rem 0 0;padding-left:1.1rem}
.anstoss li{margin:.15rem 0}

.kurs{border:1px solid var(--rule);background:var(--panel);margin:0 0 1.3rem}
.kurs.faellig{border-color:var(--ink);border-left:4px solid var(--gelb)}
.kurs-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;padding:1rem 1.2rem .7rem;flex-wrap:wrap}
.kurs-kopf h3{font-family:var(--serif);font-weight:600;font-size:1.4rem;margin:0;line-height:1.2}
.kurs-meta{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--soft);margin-top:.25rem}
.kurs-stand{font-family:var(--sans);font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;padding-top:.3rem}
.kurs-stand.ok{color:var(--moss)} .kurs-stand.leer{color:var(--brick)}

.konstanten{display:flex;gap:1.6rem;flex-wrap:wrap;padding:0 1.2rem .9rem;border-bottom:1px solid var(--rule)}
.konst{display:flex;flex-direction:column;gap:.1rem}
.konst .lab{font-size:.68rem;letter-spacing:.12em}
.konst .wert{font-size:1rem}
.dauer-feld{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}
.dauer-feld input,.dauer-feld select{font-family:var(--serif);font-size:1rem;border:1px solid var(--rule);background:#fff;padding:.24rem .4rem;border-radius:2px}
.dauer-feld input{width:4.6rem}
.dauer-setzen:disabled{opacity:.4;cursor:default;background:transparent;color:var(--soft);border-color:var(--rule)}
.dauer-setzen:disabled:hover{background:transparent;color:var(--soft);border-color:var(--rule)}

.sperre{background:#fff6d8;border-left:4px solid var(--gelb);padding:.7rem 1rem;margin:.8rem 1.2rem 0;font-size:.92rem}
.sperre b{font-weight:600}

.termine{padding:.4rem 1.2rem 1rem}
.zeile{display:flex;align-items:center;gap:.7rem;padding:.45rem 0;border-bottom:1px solid var(--rule);flex-wrap:wrap}
.zeile:last-of-type{border-bottom:0}
.zeile.vergangen{opacity:.45}
.zeile.unlesbar{background:#f6ece9;padding-left:.5rem;padding-right:.5rem}
.zeile .roh-zeile{font-family:var(--mono);font-size:.78rem}
.zeile .wochentag{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--soft);width:3.2rem;flex:none}
.zeile input[type=date],.zeile input[type=time],.zeile .plaetze-ab input{font-family:var(--serif);font-size:1rem;border:1px solid var(--rule);background:#fff;padding:.28rem .45rem;border-radius:2px}
.zeile input[type=time]{width:6.2rem}
.zeile .plaetze-ab{display:flex;align-items:center;gap:.35rem;font-size:.9rem;color:var(--label)}
.zeile .plaetze-ab input{width:3.4rem;font-size:.95rem}
.zeile .bis{display:flex;align-items:center;gap:.4rem}
.zeile .abweich{font-family:var(--sans);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--soft);background:transparent;border:1px dashed var(--rule);border-radius:2px;padding:.2rem .45rem;cursor:pointer}
.zeile .abweich:hover{border-style:solid;color:var(--ink)}
.zeile .weg{margin-left:auto;font-family:var(--mono);border:1px solid var(--rule);background:transparent;color:var(--soft);width:30px;height:28px;border-radius:2px;cursor:pointer;flex:none}
.zeile .weg:hover{border-color:var(--brick);color:var(--brick)}

.vergangen-schalter{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--soft);background:transparent;border:0;border-bottom:1px dotted var(--rule);cursor:pointer;padding:.3rem 0;margin:.2rem 0 .4rem}
.vergangen-schalter:hover{color:var(--ink)}
.termine .hinweis{font-size:.92rem;color:var(--label);margin:.5rem 0 0}

.kurs-fuss{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.7rem 1.2rem 1rem;flex-wrap:wrap}
.kurs-fuss-links{display:flex;gap:.5rem;flex-wrap:wrap}
.kurs-speichern:disabled{opacity:.45;cursor:default;background:transparent;color:var(--soft);border-color:var(--rule)}
.kurs-speichern:disabled:hover{background:transparent;color:var(--soft);border-color:var(--rule)}

@media (max-width:680px){
  .wrap{padding:0 22px}
  body{font-size:18px}
  .hero h1{font-size:2.4rem}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2){border-right:0}
  .step .k,.recos .k{flex-basis:6rem}
  /* Am Handy im Museum: eine Terminzeile darf nicht seitlich verschwinden. */
  .kurs-kopf,.konstanten,.termine,.kurs-fuss{padding-left:.9rem;padding-right:.9rem}
  .sperre{margin-left:.9rem;margin-right:.9rem}
  .zeile{gap:.45rem}
  .zeile .weg{margin-left:0}
  .konstanten{gap:1.1rem}
}