/* schule-verstehen.de – Layout seit 2026-11 · Farben in Anlehnung an die bisherige Seite (Hellgrün #CCFF99, Orange #FF7F00 / #FFCC7F) */
:root {
  --ink: #1f2a1b; --muted: #5d6b57; --line: #dbe5d2; --bg: #f5f9ee; --paper: #fff;
  --green: #2f7d24; --green2: #3d9a2e; --lime: #ccff99; --lime-soft: #eefadf; --lime-mid: #dff5c4;
  --orange: #ff7f00; --orange-dk: #c45f00; --orange-soft: #ffe7c7; --orange-mid: #ffcc7f;
  --fe: #9fdc74; --fe-ink: #1f4d14; --ft: #ff7f00; --ft-ink: #7a3a00; --ftt: #ffcc7f; --we: #eef2e8; --sf: #3d9a2e;
  --r: 12px; --sh: 0 1px 2px rgba(31,61,20,.06), 0 4px 14px rgba(31,61,20,.07);
  font-size: 16px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 1rem/1.55 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
a { color: var(--green); text-underline-offset: 2px; }
a:hover { color: var(--orange-dk); }
h1 { font-size: clamp(1.55rem, 1.1rem + 2vw, 2.2rem); line-height: 1.2; margin: .3rem 0 .6rem; letter-spacing: -.01em; color: #1c3a13; }
h2 { font-size: 1.3rem; line-height: 1.3; margin: 2rem 0 .7rem; color: #24461a; }
h2::before { content: ""; display: inline-block; width: .55rem; height: .55rem; border-radius: 2px; background: var(--orange); margin-right: .5rem; vertical-align: .12em; }
h3 { font-size: 1.08rem; margin: 1.4rem 0 .5rem; }
p, ul, ol { margin: 0 0 1rem; }
.wrap { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 1rem; }
.lead { font-size: 1.08rem; color: #34432e; max-width: 52rem; }
.muted, .hint { color: var(--muted); font-size: .92rem; }
.preview-bar { background: #b4232c; color: #fff; text-align: center; font-size: .85rem; padding: .3rem; }

/* ------------------------------------------------------------ Kopf: hell, Logo + Claim, darunter grüne Menüleiste */
.top { background: var(--paper); border-top: 5px solid var(--orange); position: relative; z-index: 40; }
.top-in { display: flex; align-items: center; gap: 1.25rem; min-height: 76px; }
.logo { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); flex: none; }
.logo:hover { color: var(--ink); }
.logo-mark { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: var(--lime); }
.logo-txt { font-size: 1.45rem; letter-spacing: -.02em; font-weight: 600; color: #2b3a26; line-height: 1; }
.logo-txt b { color: var(--green); font-weight: 800; }
.logo-txt small { color: var(--orange-dk); font-size: .62em; font-weight: 700; margin-left: .05em; }
.claim { margin: 0 0 0 auto; color: var(--muted); font-size: .92rem; text-align: right; line-height: 1.35; border-left: 3px solid var(--lime-mid); padding-left: .9rem; }
.nav-toggle { display: none; }

.nav { background: linear-gradient(180deg, var(--green2), var(--green)); box-shadow: 0 2px 0 var(--lime) inset, 0 3px 10px rgba(31,61,20,.18); }
.nav ul { list-style: none; margin: 0; padding: 0; }
.m1 { display: flex; flex-wrap: wrap; }
.m1 > li { position: relative; }
.m1-a { display: block; color: #fff; text-decoration: none; font-weight: 600; padding: .78rem 1.05rem .72rem; font-size: .98rem; border-bottom: 4px solid transparent; }
.m1 > li:hover > .m1-a, .m1 > li:focus-within > .m1-a, .m1 > li.open > .m1-a { background: rgba(255,255,255,.12); color: #fff; }
.m1 > li.on > .m1-a { border-bottom-color: var(--orange); background: rgba(0,0,0,.1); }
.m1 > li.has > .m1-a::after { content: ""; display: inline-block; width: .38rem; height: .38rem; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); margin: 0 0 .18rem .5rem; opacity: .8; }
.m-tog { display: none; }

/* zweite Ebene */
.m2 { position: absolute; left: 0; top: 100%; min-width: 250px; background: var(--paper); border-radius: 0 0 10px 10px; border-top: 3px solid var(--orange);
  box-shadow: 0 12px 30px rgba(31,61,20,.22); padding: .35rem 0; visibility: hidden; opacity: 0; transform: translateY(4px);
  transition: opacity .12s, transform .12s, visibility 0s linear .18s; }
.m1 > li:hover > .m2, .m1 > li:focus-within > .m2, .m1 > li.open > .m2 { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.m2 > li { position: relative; }
.m2 > li > a, .m2-t { display: block; padding: .5rem 1rem; color: var(--ink); text-decoration: none; font-size: .95rem; cursor: pointer; }
.m2 > li:hover > a, .m2 > li:hover > .m2-t, .m2 > li:focus-within > a, .m2 > li:focus-within > .m2-t, .m2 > li.open > a, .m2 > li.open > .m2-t { background: var(--lime-soft); color: var(--green); }
.m2 > li.has > a::after, .m2 > li.has > .m2-t::after { content: "›"; float: right; color: var(--orange); font-weight: 700; margin-left: 1rem; }

/* dritte Ebene, seitlich */
.m3 { position: absolute; left: 100%; top: -.35rem; min-width: 220px; background: var(--paper); border-radius: 10px; border-left: 3px solid var(--lime);
  box-shadow: 0 12px 30px rgba(31,61,20,.22); padding: .35rem 0; visibility: hidden; opacity: 0; transition: opacity .1s, visibility 0s linear .2s; }
.m3.two { columns: 2; column-gap: 0; min-width: 430px; }
.m2 > li:hover > .m3, .m2 > li:focus-within > .m3, .m2 > li.open > .m3 { visibility: visible; opacity: 1; transition-delay: 0s; }
.m3 a { display: block; padding: .38rem 1rem; color: var(--ink); text-decoration: none; font-size: .92rem; break-inside: avoid; }
.m3 a:hover, .m3 a:focus { background: var(--orange-soft); color: var(--orange-dk); }
.m1 > li.flip > .m2 { left: auto; right: 0; }
.m2 > li.flip > .m3 { left: auto; right: 100%; border-left: 0; border-right: 3px solid var(--lime); }

@media (max-width: 900px) {
  .top-in { min-height: 62px; gap: .6rem; }
  .logo-mark { width: 40px; height: 40px; } .logo-mark svg { width: 32px; height: 32px; }
  .logo-txt { font-size: 1.18rem; }
  .claim { display: none; }
  .nav-toggle { display: flex; align-items: center; gap: .5rem; margin-left: auto; font: inherit; font-weight: 600; color: var(--green); background: var(--lime-soft);
    border: 1px solid var(--lime-mid); border-radius: 10px; padding: .45rem .8rem; cursor: pointer; }
  .burger, .burger::before, .burger::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; position: relative; }
  .burger::before, .burger::after { content: ""; position: absolute; left: 0; } .burger::before { top: -6px; } .burger::after { top: 6px; }
  .nav { display: none; }
  .nav.open { display: block; }
  .nav .wrap { padding: 0; }
  .m1 { display: block; }
  .m1 > li { border-top: 1px solid rgba(255,255,255,.15); display: flex; flex-wrap: wrap; }
  .m1-a { flex: 1; border-bottom: 0; padding: .8rem 1rem; }
  .m1 > li.on > .m1-a { box-shadow: inset 4px 0 0 var(--orange); }
  .m1 > li.has > .m1-a::after, .m2 > li.has > a::after, .m2 > li.has > .m2-t::after { display: none; }
  .m-tog { display: block; flex: none; width: 3.2rem; border: 0; background: transparent; color: inherit; cursor: pointer; position: relative; }
  .m-tog::before { content: ""; position: absolute; left: 50%; top: 50%; width: .5rem; height: .5rem; border: solid currentColor; border-width: 0 2px 2px 0; transform: translate(-50%, -70%) rotate(45deg); transition: transform .15s; }
  .open > .m-tog::before { transform: translate(-50%, -30%) rotate(-135deg); }
  .m1 > li > .m-tog { color: #fff; }
  .m2, .m3 { position: static; visibility: visible; opacity: 1; transform: none; box-shadow: none; border-radius: 0; min-width: 0; width: 100%; display: none; transition: none; }
  .m1 > li:hover > .m2, .m1 > li:focus-within > .m2 { display: none; }
  .m1 > li.open > .m2 { display: block; }
  .m2 { border-top: 0; padding: 0; }
  .m2 > li { display: flex; flex-wrap: wrap; border-top: 1px solid var(--line); }
  .m2 > li > a, .m2-t { flex: 1; padding: .65rem 1rem .65rem 1.4rem; }
  .m2 > li > .m-tog { color: var(--green); }
  .m2 > li:hover > .m3, .m2 > li:focus-within > .m3 { display: none; }
  .m2 > li.open > .m3 { display: block; }
  .m3, .m2 > li.flip > .m3 { border: 0; background: var(--lime-soft); padding: .2rem 0 .4rem; }
  .m3.two { columns: 2 150px; min-width: 0; }
  .m3 a { padding: .45rem 1rem .45rem 2rem; }
}

.main { padding-top: 1rem; padding-bottom: 2.5rem; min-height: 60vh; }
.crumbs { font-size: .85rem; color: var(--muted); margin: .2rem 0 .4rem; }
.crumbs a { color: var(--muted); }

/* ------------------------------------------------------------ Bausteine */
.box { background: var(--paper); border-radius: var(--r); box-shadow: var(--sh); padding: 1.1rem 1.25rem; margin: 0 0 1.25rem; }
.box > :last-child { margin-bottom: 0; }
.note { background: var(--orange-soft); border-left: 4px solid var(--orange); border-radius: 8px; padding: .75rem 1rem; margin: 0 0 1.25rem; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .85rem; margin: 0 0 1.5rem; }
.card { display: flex; flex-direction: column; gap: .25rem; background: var(--paper); border-radius: var(--r); box-shadow: var(--sh); padding: .95rem 1.05rem; text-decoration: none; color: var(--ink); border: 1px solid transparent; border-top: 4px solid var(--lime); transition: border-color .15s, transform .15s; }
.card:hover { border-color: var(--orange-mid); border-top-color: var(--orange); transform: translateY(-1px); color: var(--ink); }
.card b { color: var(--green); font-size: 1.04rem; }
.card span { color: var(--muted); font-size: .92rem; }
.card.big { padding: 1.2rem 1.25rem; }
.card.big b { font-size: 1.2rem; }

.chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: .2rem 0 1rem; }
.chip { display: inline-block; padding: .28rem .65rem; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); text-decoration: none; font-size: .9rem; color: var(--green); }
a.chip:hover { border-color: var(--orange); color: var(--orange-dk); }
.chip.on { background: var(--green); border-color: var(--green); color: #fff; font-weight: 600; }
.chips.regions .chip { min-width: 2.6rem; text-align: center; }
.toolbar { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center; margin-bottom: .4rem; }
.toolbar .chips { margin: 0; }

/* ------------------------------------------------------------ Tabellen */
.table-wrap { overflow-x: auto; background: var(--paper); border-radius: var(--r); box-shadow: var(--sh); margin: 0 0 1.25rem; }
table.list { border-collapse: collapse; width: 100%; font-size: .95rem; }
table.list th, table.list td { padding: .55rem .7rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.list thead th { background: var(--lime-mid); color: #24461a; font-size: .85rem; white-space: nowrap; position: sticky; top: 0; }
table.list tbody tr:hover { background: #fbfdf7; }
table.list td.n { white-space: nowrap; }
table.list .sub { display: block; color: var(--muted); font-size: .82rem; }
table.list .now { background: var(--lime-soft); }
table.grid th[scope=row] { white-space: nowrap; font-weight: 600; }
table.grid td { white-space: nowrap; font-variant-numeric: tabular-nums; font-size: .9rem; }
.badge { display: inline-block; font-size: .75rem; padding: .05rem .45rem; border-radius: 6px; background: var(--lime-mid); color: var(--fe-ink); font-weight: 600; vertical-align: middle; }
.badge.next { background: var(--orange-soft); color: var(--ft-ink); }
.badge.part { background: var(--ftt); color: var(--ft-ink); }

/* ------------------------------------------------------------ Kalender */
.year-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: .85rem; margin: 0 0 1rem; }
table.month { border-collapse: separate; border-spacing: 2px; width: 100%; background: var(--paper); border-radius: var(--r); box-shadow: var(--sh); padding: .45rem .5rem .55rem; font-variant-numeric: tabular-nums; }
table.month caption { caption-side: top; text-align: left; font-weight: 700; color: var(--green); padding: .1rem .35rem .3rem; }
table.month th { font-size: .72rem; color: var(--muted); font-weight: 600; padding: .1rem 0; }
table.month td { text-align: center; font-size: .86rem; height: 1.85rem; border-radius: 6px; position: relative; }
table.month td.kw, table.month th.kw { color: #9aa894; font-size: .68rem; width: 1.6rem; }
table.month td.x { background: none; }
table.month td.sa, table.month td.so { background: var(--we); color: #56634f; }
table.month td.so { color: #b04a12; }
table.month td.fe { background: var(--fe); color: var(--fe-ink); }
table.month td.ft { background: var(--ft); color: #fff; font-weight: 700; }
table.month td.ftt { background: var(--ftt); color: var(--ft-ink); font-weight: 600; }
table.month td.sf { background: var(--sf); color: #fff; font-weight: 600; }
table.month td.sfw { background: #d6f0bf; color: #2d5a1e; }
/* Brückentage: Urlaubstag = hellblau gefüllt, restliche Tage des freien Blocks = blauer Rahmen */
table.month td.br { background: #9fd0f5; color: #0b3d66; font-weight: 800; box-shadow: inset 0 0 0 2px #1c6fb8; }
table.month td.brf { box-shadow: inset 0 0 0 2px #1c6fb8; font-weight: 700; }
table.month td.br2 { background: #e3f1fc; color: #2a5a85; font-weight: 600; box-shadow: inset 0 0 0 1px #7fb3de; }
table.month td.br.br2 { background: #9fd0f5; box-shadow: inset 0 0 0 2px #1c6fb8; }
/* beim Zeigen auf einen Brückentag: freien Block hervorheben, Rest abblenden */
.has-blk table.month td[data-d]:not(.blk) { opacity: .35; }
table.month td.blk { box-shadow: inset 0 0 0 3px #0b5aa0, 0 0 0 2px #0b5aa0; z-index: 1; opacity: 1; transform: scale(1.04); transition: transform .1s; }
table.month td.blk:not(.ft):not(.br) { background: #dcecfb; color: #0b3d66; }
table.month td.blk-s::after, table.month td.blk-e::after { content: ""; position: absolute; top: 3px; width: 6px; height: 6px; border-radius: 50%; background: #0b5aa0; }
table.month td.blk-s::after { left: 3px; } table.month td.blk-e::after { right: 3px; }
.choose { background: #e8f3fd; border: 2px solid #1c6fb8; border-radius: var(--r); padding: .9rem 1.1rem .5rem; margin: 0 0 1.25rem; }
.choose p { margin: 0 0 .5rem; font-size: 1.02rem; color: #0b3d66; }
.choose .chips { margin: .2rem 0 .4rem; }
.choose .chip { background: #fff; border-color: #9fc6e8; color: #0b3d66; font-weight: 600; }
.choose a.chip:hover { border-color: #1c6fb8; color: #1c6fb8; }
table.month td.today { outline: 2px solid var(--green); outline-offset: -2px; font-weight: 800; }
table.month td[title] { cursor: help; }
.legend { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; padding: 0; margin: .2rem 0 1rem; font-size: .9rem; color: #3a4a34; }
.legend .sw { display: inline-block; width: 1rem; height: 1rem; border-radius: 4px; vertical-align: -3px; margin-right: .4rem; background: var(--we); }
.legend .sw.fe { background: var(--fe); } .legend .sw.ft { background: var(--ft); } .legend .sw.ftt { background: var(--ftt); }
.legend .sw.br { background: #9fd0f5; box-shadow: inset 0 0 0 2px #1c6fb8; } .legend .sw.br2 { background: #e3f1fc; box-shadow: inset 0 0 0 1px #7fb3de; } .legend .sw.brf { background: #fff; box-shadow: inset 0 0 0 2px #1c6fb8; }
.chip.gap { border: 0; background: none; padding-left: .1rem; padding-right: .1rem; color: var(--muted); }
.legend .sw.sf { background: var(--sf); } .legend .sw.sfw { background: #d6f0bf; } .legend .sw.today { background: none; outline: 2px solid var(--green); outline-offset: -2px; }
.tip { position: absolute; z-index: 30; max-width: 280px; background: #fff; color: var(--ink); font-size: .86rem; line-height: 1.4; padding: .55rem .75rem .6rem; border-radius: 10px;
  border: 1px solid var(--line); border-top: 4px solid var(--green2); box-shadow: 0 8px 26px rgba(31,61,20,.22); pointer-events: none; }
.tip b { display: block; color: var(--green); margin-bottom: .2rem; padding-bottom: .2rem; border-bottom: 1px solid var(--line); }
.tip div { white-space: normal; }
.tip div.hl + div:not(.hl) { margin-top: .25rem; }
.tip div:not(.hl) + div.hl { margin-top: .5rem; padding-top: .35rem; border-top: 1px dashed var(--line); }
.tip div + div { margin-top: .1rem; }
.tip span { color: var(--muted); display: inline-block; min-width: 4.2rem; }
.tip .hl { color: #0b3d66; font-weight: 700; white-space: normal; }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .65rem; margin: 0 0 1.25rem; }
.stat { background: var(--paper); border-radius: var(--r); box-shadow: var(--sh); padding: .7rem .9rem; border-left: 4px solid var(--lime); }
.stat b { display: block; font-size: 1.5rem; color: var(--green); line-height: 1.1; }
.stat span { color: var(--muted); font-size: .85rem; }

/* ------------------------------------------------------------ Startseite */
.hero { background: var(--lime); background: linear-gradient(120deg, var(--lime) 0%, #e6ffc9 60%, var(--orange-soft) 100%); color: var(--ink); border-radius: 18px; padding: 1.5rem 1.4rem 1.3rem; margin: .8rem 0 1.5rem; box-shadow: var(--sh); }
.hero h1 { margin-top: 0; }
.hero p { color: #34432e; max-width: 46rem; }
.hero .chips .chip { background: rgba(255,255,255,.75); border-color: rgba(47,125,36,.25); }
.year-rows { background: var(--paper); border-radius: var(--r); box-shadow: var(--sh); padding: .7rem 1rem .4rem; margin: 0 0 1.5rem; }
.year-row { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .8rem; border-bottom: 1px solid var(--line); padding: .25rem 0; }
.year-row:last-child { border-bottom: 0; }
.year-row b { width: 9.5rem; color: var(--green); font-size: .95rem; }
.year-row .chips { margin: 0; }
.next-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .5rem; margin: 0 0 1.5rem; }
.next-item { background: var(--paper); border-radius: 10px; box-shadow: var(--sh); padding: .6rem .8rem; text-decoration: none; color: var(--ink); display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.next-item:hover { color: var(--ink); outline: 1px solid var(--orange); }
.next-item b { color: var(--green); }
.next-item span { font-size: .85rem; color: var(--muted); text-align: right; }

/* ------------------------------------------------------------ Artikel (Verstehen) */
.article { max-width: 760px; }
.answer { background: var(--paper); border-radius: var(--r); box-shadow: var(--sh); padding: 1rem 1.2rem; border-left: 5px solid var(--green2); margin: 0 0 1.25rem; font-size: 1.05rem; }
.answer b { color: var(--fe-ink); }
.answer.wrong { border-left-color: var(--orange); }
.ex { list-style: none; padding: 0; }
.ex li { background: var(--paper); border-radius: 8px; padding: .5rem .8rem; margin-bottom: .4rem; box-shadow: var(--sh); }
.ex li.no { text-decoration: line-through; text-decoration-color: #c0392b; color: #7b8577; }
.ex em { font-style: normal; background: var(--lime-mid); padding: 0 .2rem; border-radius: 3px; }
.pairs { columns: 3 230px; column-gap: 1.5rem; padding: 0; list-style: none; }
.pairs li { break-inside: avoid; padding: .2rem 0; }
.pairs li::before { content: "›"; color: var(--orange); font-weight: 700; margin-right: .4rem; }

/* ------------------------------------------------------------ Formulare, Rechner */
form.calc { background: var(--paper); border-radius: var(--r); box-shadow: var(--sh); padding: 1rem 1.2rem; margin: 0 0 1.25rem; border-top: 4px solid var(--lime); }
form.calc label { display: block; font-weight: 600; margin: .3rem 0 .25rem; }
form.calc .row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; }
form.calc .row > div { flex: 1 1 140px; }
input[type=text], input[type=number], select, textarea { width: 100%; font: inherit; padding: .5rem .6rem; border: 1px solid #c3d1b8; border-radius: 8px; background: #fff; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--orange-mid); outline-offset: 1px; border-color: var(--green2); }
.btn { display: inline-block; font: inherit; font-weight: 600; background: var(--orange); color: #fff; border: 0; border-radius: 8px; padding: .55rem 1.05rem; cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--orange-dk); color: #fff; }
.btn.alt { background: var(--paper); color: var(--green); border: 1px solid var(--line); }
.btn.alt:hover { border-color: var(--green2); }
.result { background: var(--lime-soft); border: 1px solid #c8e7a9; border-radius: var(--r); padding: .9rem 1.1rem; margin: 0 0 1.25rem; }
.result.err { background: #fdf0ea; border-color: #f2c9b4; }
.steps { counter-reset: s; padding: 0; list-style: none; }
.steps > li { counter-increment: s; background: var(--paper); border-radius: 10px; box-shadow: var(--sh); padding: .7rem .9rem .5rem 2.6rem; margin-bottom: .55rem; position: relative; overflow-x: auto; }
.steps > li::before { content: counter(s); position: absolute; left: .8rem; top: .7rem; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--green); color: #fff; font-size: .8rem; display: grid; place-items: center; }
.formula { font-size: 1.15rem; text-align: center; background: var(--paper); border-radius: var(--r); box-shadow: var(--sh); padding: .8rem; margin: 0 0 1rem; overflow-x: auto; }

/* ------------------------------------------------------------ Sprüche */
.quotes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .7rem; margin: 0 0 1.25rem; }
.quote { background: var(--paper); border-radius: var(--r); box-shadow: var(--sh); padding: .8rem 1rem; border-left: 4px solid var(--orange-mid); }
.quote b { display: block; color: var(--green); margin-bottom: .2rem; }
.quote span { color: #3a4a34; }
.quote[hidden] { display: none; }

/* ------------------------------------------------------------ Stundenplan */
.sp-wrap { overflow-x: auto; margin: 0 0 1rem; }
.sp { --sp-head: #2f7d24; --sp-bg: #fff; --sp-cell: #eefadf; width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 4px; background: var(--sp-bg); border-radius: var(--r); padding: .6rem; box-shadow: var(--sh); background-size: cover; background-position: center; }
.sp caption { font-size: 1.4rem; font-weight: 800; color: var(--sp-head); padding: .3rem; caption-side: top; }
.sp th { background: var(--sp-head); color: #fff; font-size: .9rem; padding: .4rem; border-radius: 7px; }
.sp td { background: var(--sp-cell); border-radius: 7px; padding: 0; }
.sp td input { border: 0; background: transparent; text-align: center; padding: .55rem .3rem; font-size: .95rem; border-radius: 7px; }
.sp td.t input { font-size: .8rem; color: #50604a; }
.sp.has-img td { background: rgba(255,255,255,.82); }
.themes { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 1rem; }
.themes button { width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--line); cursor: pointer; }
.themes button.on { box-shadow: 0 0 0 3px var(--orange); }

/* ------------------------------------------------------------ Werbung */
.ad { margin: 1rem 0 1.5rem; min-height: 90px; text-align: center; }
.ad-ph { display: grid; place-items: center; background: repeating-linear-gradient(45deg, #eef2e8, #eef2e8 10px, #f6f9f1 10px, #f6f9f1 20px); color: #9aa894; font-size: .8rem; border-radius: var(--r); }

/* ------------------------------------------------------------ Fuß */
.foot { background: #233f19; color: #c3d4b8; padding: 1.8rem 0 1.2rem; font-size: .92rem; border-top: 5px solid var(--lime); }
.foot a { color: #eaf5df; text-decoration: none; display: block; padding: .12rem 0; }
.foot a:hover { color: var(--orange-mid); }
.foot b { color: #fff; display: block; margin-bottom: .35rem; }
.foot-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; }
.foot-note { margin: 1.4rem 0 0; color: #93a888; font-size: .82rem; }

.legal h2 { font-size: 1.25rem; } .legal h3 { font-size: 1.02rem; }
.legal h2::before { display: none; }
.legal { background: var(--paper); border-radius: var(--r); box-shadow: var(--sh); padding: 1.1rem 1.3rem; max-width: 860px; overflow-wrap: anywhere; }

@media print {
  .top, .foot, .ad, .crumbs, .chips, .noprint, .preview-bar, .legend-hint { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  h2::before { display: none; }
  .main { padding: 0; }
  table.month, .box, .table-wrap, .card, .sp { box-shadow: none; border: 1px solid #ccc; }
  .year-grid { grid-template-columns: repeat(3, 1fr); gap: .4rem; }
  table.month td { height: 1.35rem; font-size: 8pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  table.month caption { font-size: 10pt; }
  .sp { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  h1 { font-size: 16pt; margin: 0 0 .3rem; }
  .lead { font-size: 10pt; }
}