/* Ferienhaus Stützerbach – „Hüttenbuch“
 * Papier, Tannengrün, Rost und ein dunkles Brett. Serifen für Überschriften, Schreibmaschine für Stempel.
 * Mobil zuerst: unten die Leiste; ab 720 px links die Schiene; ab 1100 px mit Namen. */

@font-face { font-family: "Stempel"; src: url("/schrift.woff2") format("woff2"); font-display: swap; }

:root {
  --papier: #F2EBDC;  --papier-2: #E8DEC8;  --karte: #FBF7EE;  --karte-2: #F5EEDD;
  --tinte: #2B2620;   --tinte-2: #6B6256;   --linie: #D9CDB4;
  --akzent: #23403A;  --auf-akzent: #F6F0E2; --akzent-2: #2F5A50;
  --rost: #B4532A;    --senf: #D8A13A;     --moos: #6F8B57;   --schnee: #F7FAFB;
  --brett: #1B1E1C;   --brett-2: #262A27;  --kreide: #ECE7D9;
  --schatten: 0 1px 0 rgba(255,255,255,.6) inset, 0 1px 2px rgba(60,40,10,.12), 0 8px 24px -10px rgba(60,40,10,.25);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "Noto Serif", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --stempel: "Stempel", "Courier New", monospace;
  --radius: 22px;
  --leiste-h: 68px;
  --unten: env(safe-area-inset-bottom, 0px);
  --oben: env(safe-area-inset-top, 0px);
}
@media (prefers-color-scheme: dark) {
  :root {
    --papier: #151A18;  --papier-2: #1C2320;  --karte: #1F2825;  --karte-2: #25302C;
    --tinte: #EDE6D6;   --tinte-2: #A59D8E;   --linie: #33403B;
    --akzent: #E3A45F;  --auf-akzent: #1D1710; --akzent-2: #F0B877;
    --schatten: 0 1px 0 rgba(255,255,255,.04) inset, 0 8px 24px -10px rgba(0,0,0,.6);
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--papier); color: var(--tinte);
  font: 16px/1.5 var(--sans); overflow-x: hidden;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .27  0 0 0 0 .15  0 0 0 .07 0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
}
h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; margin: 0; }
p { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: var(--rost); }
svg.ic { width: 1.4em; height: 1.4em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
:focus-visible { outline: 3px solid var(--senf); outline-offset: 2px; border-radius: 8px; }
.stempel { font-family: var(--stempel); text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; color: var(--tinte-2); }
.leise { color: var(--tinte-2); }
.klein { font-size: .85rem; }
.nurlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ───────── Hülle: Leiste + Inhalt ───────── */
.huelle { display: block; min-height: 100dvh; }
.spalte { min-width: 0; padding-bottom: calc(var(--leiste-h) + var(--unten) + 20px); }
.kopf {
  display: flex; align-items: center; gap: 12px; padding: calc(var(--oben) + 12px) 18px 8px;
  max-width: 1180px; margin: 0 auto;
}
.kopf .titel { flex: 1; min-width: 0; }
.kopf h1 { font-size: 1.55rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kopf .stempel { display: block; margin-bottom: 2px; }
#seite { max-width: 1180px; margin: 0 auto; padding: 4px 16px 24px; outline: none; }
.ich-knopf {
  width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--karte); display: grid; place-items: center;
  color: #fff; font: 700 1.1rem var(--serif); box-shadow: var(--schatten);
}

.leiste {
  position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; height: calc(var(--leiste-h) + var(--unten));
  padding-bottom: var(--unten); display: flex; background: var(--akzent); color: var(--auf-akzent);
  box-shadow: 0 -8px 30px -8px rgba(20,30,25,.45);
}
.leiste .marke { display: none; }
.leiste a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: inherit; text-decoration: none; font-size: .72rem; font-weight: 600; letter-spacing: .02em; opacity: .62; position: relative;
  transition: opacity .2s;
}
.leiste a svg { width: 25px; height: 25px; transition: transform .25s cubic-bezier(.3,1.6,.5,1); }
.leiste a[aria-current="page"] { opacity: 1; }
.leiste a[aria-current="page"] svg { transform: translateY(-2px) scale(1.08); }
.leiste a[aria-current="page"]::after {
  content: ""; position: absolute; top: 6px; width: 34px; height: 3px; border-radius: 3px; background: var(--senf);
}
@media (prefers-color-scheme: dark) { .leiste { background: #101614; border-top: 1px solid var(--linie); color: var(--tinte); } }

@media (min-width: 720px) {
  .huelle { display: grid; grid-template-columns: 96px 1fr; }
  .spalte { padding-bottom: 40px; }
  .leiste {
    position: sticky; top: 0; height: 100dvh; width: 96px; flex-direction: column; justify-content: center; gap: 6px;
    padding: 24px 8px; box-shadow: 8px 0 30px -12px rgba(20,30,25,.4);
  }
  .leiste .marke { display: block; position: absolute; top: 18px; left: 50%; transform: translateX(-50%); }
  .leiste .marke img { width: 54px; height: 54px; border-radius: 15px; display: block; }
  .leiste a { flex: 0 0 auto; padding: 14px 0; border-radius: 16px; }
  .leiste a:hover { opacity: 1; background: rgba(255,255,255,.07); }
  .leiste a[aria-current="page"] { background: rgba(255,255,255,.1); }
  .leiste a[aria-current="page"]::after { top: 50%; left: -8px; width: 4px; height: 30px; margin-top: -15px; }
  #seite { padding: 8px 28px 24px; }
  .kopf { padding: 22px 28px 8px; }
  .kopf h1 { font-size: 2rem; }
}
@media (min-width: 1100px) {
  .huelle { grid-template-columns: 236px 1fr; }
  .leiste { width: 236px; align-items: stretch; padding: 110px 18px 24px; justify-content: flex-start; }
  .leiste .marke { left: 22px; transform: none; display: flex; align-items: center; gap: 12px; top: 22px; }
  .leiste .marke b { font: 700 1.25rem var(--serif); line-height: 1.1; }
  .leiste .marke small { display: block; font: .7rem var(--stempel); letter-spacing: .1em; text-transform: uppercase; opacity: .65; }
  .leiste a { flex-direction: row; justify-content: flex-start; gap: 14px; padding: 13px 16px; font-size: 1rem; }
  .leiste a[aria-current="page"]::after { left: 0; }
}

/* ───────── Karten, Knöpfe, Felder ───────── */
.karte {
  background: var(--karte); border-radius: var(--radius); box-shadow: var(--schatten); padding: 18px;
  border: 1px solid color-mix(in srgb, var(--linie) 60%, transparent);
}
.rise { animation: rise .55s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px;
  border: 0; border-radius: 99px; background: var(--akzent); color: var(--auf-akzent); font-weight: 700;
  box-shadow: 0 6px 16px -6px rgba(35,64,58,.55); transition: transform .15s, filter .15s;
}
.knopf:active { transform: scale(.97); }
.knopf:disabled { opacity: .55; }
.knopf.zweit { background: transparent; color: var(--tinte); box-shadow: none; border: 1.5px solid var(--linie); }
.knopf.rost { background: var(--rost); color: #fff; box-shadow: 0 6px 16px -6px rgba(180,83,42,.6); }
.knopf.klein { min-height: 38px; padding: 0 14px; font-size: .88rem; }
.knopf.gefahr { background: transparent; color: #B3261E; border: 1.5px solid currentColor; box-shadow: none; }
.icon-knopf {
  width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; display: grid; place-items: center; color: inherit;
}
.icon-knopf:hover { background: color-mix(in srgb, var(--tinte) 8%, transparent); }

label.feld { display: block; font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--tinte-2); margin: 16px 0 6px; }
input[type=text], input[type=date], input[type=password], input[type=number], textarea, select {
  width: 100%; font: inherit; color: var(--tinte); background: var(--karte-2); border: 1.5px solid var(--linie); border-radius: 14px;
  padding: 12px 14px; min-height: 48px; transition: border-color .15s, box-shadow .15s; appearance: none;
}
select { background-image: linear-gradient(45deg, transparent 50%, var(--tinte-2) 50%), linear-gradient(135deg, var(--tinte-2) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 38px; }
textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--akzent) 22%, transparent); }
.zeile { display: flex; gap: 12px; } .zeile > * { flex: 1; min-width: 0; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 15px; border-radius: 99px;
  border: 1.5px solid var(--linie); background: transparent; font-weight: 600; font-size: .92rem; color: var(--tinte);
  transition: background .15s, color .15s, border-color .15s;
}
.chip[aria-pressed="true"], .chip.an { background: var(--akzent); color: var(--auf-akzent); border-color: var(--akzent); }
.chips.scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px; }
.chips.scroll::-webkit-scrollbar { display: none; }
.chips.scroll .chip { flex: none; }

.avatar {
  width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; color: #fff;
  font: 700 .85rem var(--serif); background: var(--c, var(--moos));
}
.avatar.gross { width: 46px; height: 46px; font-size: 1.15rem; }
.abschnitt { display: flex; align-items: baseline; justify-content: space-between; margin: 26px 2px 10px; gap: 10px; }
.abschnitt h2 { font-size: 1.3rem; }
.abschnitt a, .abschnitt button.text { font-size: .9rem; font-weight: 700; color: var(--rost); text-decoration: none; background: none; border: 0; padding: 6px 0; }
.leer { text-align: center; padding: 34px 20px; color: var(--tinte-2); }
.leer svg { width: 42px; height: 42px; opacity: .45; margin-bottom: 8px; }

/* ───────── Start ───────── */
.start { display: grid; gap: 4px; }
@media (min-width: 900px) { .start { grid-template-columns: 1.15fr 1fr; gap: 0 22px; align-items: start; } .start > .voll { grid-column: 1 / -1; } }

.postkarte { border-radius: 28px; overflow: hidden; background: var(--karte); box-shadow: var(--schatten); border: 1px solid color-mix(in srgb, var(--linie) 60%, transparent); }
.szene { position: relative; height: clamp(190px, 38vw, 270px); background: #9FB2B8; overflow: hidden; }
.szene > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.szene .ort { position: absolute; top: 14px; left: 16px; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.45); z-index: 2; }
.szene .ort .stempel { color: inherit; }
.szene .ort strong { display: block; font: 700 1.4rem var(--serif); letter-spacing: -.01em; }
.szene .gruss { position: absolute; top: 14px; right: 16px; z-index: 2; text-align: right; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.45); font-size: .9rem; }
.szene .wolke { animation: treiben 60s linear infinite alternate; }
.szene .wolke.b { animation-duration: 90s; animation-direction: alternate-reverse; }
@keyframes treiben { to { transform: translateX(60px); } }
.szene .rauch { animation: rauch 6s ease-in-out infinite; transform-origin: 95px -14px; }
@keyframes rauch { 50% { transform: translateX(8px) scaleY(1.08); opacity: .15; } }
.szene .fall { animation: fallen linear infinite; }
.szene .fall.schnee { animation-name: rieseln; }
@keyframes fallen { from { transform: translate(0,-30px); } to { transform: translate(-30px, 330px); } }
@keyframes rieseln { from { transform: translate(0,-20px); } 50% { transform: translate(14px,150px); } to { transform: translate(-6px, 330px); } }
.szene .blitz { animation: blitz 7s infinite; opacity: 0; }
@keyframes blitz { 0%,92%,100% { opacity: 0; } 93% { opacity: .85; } 95% { opacity: 0; } 96% { opacity: .6; } }
.szene .twinkle { animation: funkeln 4s ease-in-out infinite; }
@keyframes funkeln { 50% { opacity: .25; } }
.messwerte { position: relative; padding: 0 20px 20px; z-index: 3; }
.messwerte .haupt { display: flex; align-items: flex-end; gap: 16px; }
.messwerte .grad { margin-top: -46px; position: relative; }
.grad { font: 700 clamp(4rem, 17vw, 6.2rem)/.85 var(--serif); letter-spacing: -.04em; color: var(--tinte); text-shadow: 0 2px 0 var(--karte); }
.grad sup { font-size: .38em; vertical-align: top; position: relative; top: .35em; margin-left: 2px; color: var(--rost); }
.messwerte .lage { padding-bottom: 6px; min-width: 0; }
.messwerte .lage strong { display: flex; align-items: center; gap: 8px; font: 700 1.3rem var(--serif); }
.messwerte .lage strong svg { width: 34px; height: 34px; color: var(--rost); stroke-width: 1.4; }
.fakten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.fakt { background: var(--karte-2); border-radius: 14px; padding: 10px 12px; }
.fakt .stempel { display: block; font-size: .62rem; }
.fakt b { font: 700 1.1rem var(--serif); }
.tage { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; margin-top: 16px; padding-top: 14px; border-top: 1.5px dashed var(--linie); }
.tag-w { text-align: center; font-size: .8rem; display: grid; gap: 2px; justify-items: center; }
.tag-w .stempel { font-size: .62rem; letter-spacing: .06em; }
.tag-w svg { width: 26px; height: 26px; color: var(--tinte-2); stroke-width: 1.5; }
.tag-w .heute { color: var(--rost); }
.tag-w b { font-family: var(--serif); font-size: 1rem; }
.tag-w span.min { color: var(--tinte-2); }
.tag-w .nied { font-size: .72rem; color: #3E6FA0; font-weight: 700; min-height: 1.1em; }

.pegel-karte { display: grid; grid-template-columns: 120px 1fr; gap: 6px 20px; align-items: stretch; }
.pegel { grid-row: span 2; }
.pegel svg { width: 100%; height: 100%; min-height: 250px; display: block; overflow: visible; }
.pegel-zahl { font: 700 clamp(3rem, 12vw, 4.2rem)/1 var(--serif); letter-spacing: -.03em; }
.pegel-zahl small { font-size: .38em; letter-spacing: 0; margin-left: 4px; color: var(--tinte-2); font-weight: 600; }
.pegel-text { color: var(--tinte-2); margin-top: 6px; }
.pegel-liste { display: grid; gap: 8px; margin-top: 14px; align-content: start; }
.pegel-liste div { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 8px 0; border-bottom: 1.5px dashed var(--linie); font-size: .95rem; }
.pegel-liste b { font: 700 1.1rem var(--serif); }
.quelle { margin-top: 10px; font-size: .74rem; color: var(--tinte-2); grid-column: 1 / -1; }
.verlauf { display: flex; align-items: flex-end; gap: 6px; height: 54px; margin-top: 10px; }
.verlauf i { flex: 1; background: linear-gradient(#DCE7EE, #AFC4D2); border-radius: 5px 5px 0 0; min-height: 3px; position: relative; }
.verlauf i[data-w="0"] { background: var(--linie); }
.verlauf-t { display: flex; gap: 6px; } .verlauf-t span { flex: 1; text-align: center; font-size: .66rem; color: var(--tinte-2); }
.pegel-karte.nacht { }

.hausgaeste { display: grid; gap: 10px; }
.aufenthalt-zeile { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--karte-2); border: 0; text-align: left; width: 100%; }
.aufenthalt-zeile .wer { flex: 1; min-width: 0; }
.aufenthalt-zeile b { display: block; }
.aufenthalt-zeile .stempel { display: block; margin-top: 1px; }
.im-haus { display: flex; align-items: center; gap: 8px; font-weight: 700; margin-bottom: 12px; }
.punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--moos); box-shadow: 0 0 0 4px color-mix(in srgb, var(--moos) 25%, transparent); animation: puls 2.4s infinite; }
@keyframes puls { 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--moos) 0%, transparent); } }

/* ───────── Brett ───────── */
.brett-rahmen {
  border-radius: 14px; padding: 12px; margin: 6px -4px 0;
  background: linear-gradient(135deg, #7B5733 0%, #5A3E24 45%, #6D4A2B 100%);
  box-shadow: 0 18px 36px -16px rgba(30,20,5,.7), inset 0 1px 0 rgba(255,255,255,.2), inset 0 -2px 0 rgba(0,0,0,.3);
}
.brett {
  position: relative; border-radius: 6px; min-height: 60vh; padding: 20px 14px 90px;
  background:
    radial-gradient(ellipse 70% 40% at 20% 15%, rgba(255,255,255,.07), transparent 70%),
    radial-gradient(ellipse 50% 30% at 80% 70%, rgba(255,255,255,.05), transparent 70%),
    radial-gradient(ellipse 90% 20% at 50% 100%, rgba(255,255,255,.04), transparent 70%),
    var(--brett);
  box-shadow: inset 0 3px 14px rgba(0,0,0,.7), inset 0 0 0 1px rgba(0,0,0,.5);
}
.brett::before { content: ""; position: absolute; inset: 0; border-radius: 6px; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 .95  0 0 0 .11 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>"); }
.brett-kopf { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; color: var(--kreide); }
.brett-kopf h2 { font: 400 clamp(1.5rem, 5vw, 2.1rem)/1.1 var(--stempel); letter-spacing: .03em; text-shadow: 0 0 1px rgba(255,255,255,.4); }
.brett-kopf .stempel { color: color-mix(in srgb, var(--kreide) 65%, transparent); }
.brett-filter { position: relative; margin-bottom: 34px; }
.brett-filter .chip { border-color: rgba(236,231,217,.28); color: var(--kreide); background: transparent; }
.brett-filter .chip[aria-pressed="true"] { background: var(--kreide); color: #1B1E1C; border-color: var(--kreide); }
.zettelwand { position: relative; columns: 1; column-gap: 18px; }
@media (min-width: 560px) { .zettelwand { columns: 2; } }
@media (min-width: 1000px) { .zettelwand { columns: 3; } }
.zettel {
  --bg: #F6EFD9; --r: 0deg;
  position: relative; display: block; width: 100%; text-align: left; break-inside: avoid; margin: 0 0 26px; padding: 26px 18px 16px;
  background: var(--bg); color: #2B2620; border: 0; border-radius: 3px; transform: rotate(var(--r));
  box-shadow: 0 1px 1px rgba(0,0,0,.25), 0 10px 18px -6px rgba(0,0,0,.6);
  transition: transform .25s cubic-bezier(.3,1.4,.5,1), box-shadow .25s;
  background-image: linear-gradient(transparent 0 31px, rgba(60,50,30,.07) 31px 32px); background-size: 100% 32px; background-position: 0 14px;
}
.zettel:hover, .zettel:focus-visible { transform: rotate(0) translateY(-4px) scale(1.015); box-shadow: 0 1px 1px rgba(0,0,0,.25), 0 18px 26px -8px rgba(0,0,0,.7); }
.zettel::after { content: ""; position: absolute; right: 0; bottom: 0; width: 22px; height: 22px; background: linear-gradient(135deg, transparent 50%, rgba(0,0,0,.14) 50%, rgba(0,0,0,.04)); }
.zettel.k-frage { --bg: #E6EBEF; } .zettel.k-problem { --bg: #F4DDD1; } .zettel.k-einkauf { --bg: #E2EAD3; }
.zettel .nadel {
  position: absolute; top: -9px; left: 50%; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #F07A5A, #B4331C 60%, #7A1F10); box-shadow: 0 6px 8px -2px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.4) inset;
}
.zettel .tesa { position: absolute; top: -10px; left: 50%; width: 74px; height: 22px; margin-left: -37px; transform: rotate(-2deg);
  background: rgba(216,161,58,.55); box-shadow: 0 1px 2px rgba(0,0,0,.25); mask: linear-gradient(90deg, transparent 0 2px, #000 2px calc(100% - 2px), transparent 0); }
.zettel:nth-child(3n) .tesa { background: rgba(160,190,200,.6); transform: rotate(3deg); }
.zettel:nth-child(3n+1) .tesa { background: rgba(190,110,80,.5); transform: rotate(-4deg); }
.zettel h3 { font-size: 1.2rem; margin-bottom: 6px; padding-right: 4px; }
.zettel .z-text { white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.5; }
.zettel img.z-bild { display: block; width: 100%; max-height: 220px; object-fit: cover; margin: 10px 0 4px; border: 5px solid #fff; border-bottom-width: 16px; box-shadow: 0 2px 6px rgba(0,0,0,.3); transform: rotate(-.8deg); }
.zettel .z-fuss { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: .82rem; color: #6B6256; flex-wrap: wrap; }
.zettel .z-fuss .avatar { width: 24px; height: 24px; font-size: .7rem; }
.zettel .z-fuss .antw { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.zettel .z-fuss .antw svg { width: 1.1em; height: 1.1em; }
.marke-kat {
  display: inline-block; font: .68rem var(--stempel); letter-spacing: .14em; text-transform: uppercase; padding: 2px 8px; margin-bottom: 8px;
  border: 1.5px solid currentColor; border-radius: 3px; color: #6B6256; transform: rotate(-2deg);
}
.k-problem .marke-kat { color: #B4331C; } .k-frage .marke-kat { color: #3E6FA0; } .k-einkauf .marke-kat { color: #4A6B2E; } .k-info .marke-kat { color: #8A6A1C; }
.zettel.erledigt { opacity: .72; filter: saturate(.55); }
.zettel.erledigt::before { content: "ERLEDIGT"; position: absolute; right: 12px; top: 40%; transform: rotate(-14deg); font: 1.5rem var(--stempel); letter-spacing: .12em;
  color: rgba(46,110,70,.75); border: 3px solid rgba(46,110,70,.75); padding: 0 10px; border-radius: 4px; z-index: 1; pointer-events: none; }
.fab {
  position: fixed; z-index: 20; right: 18px; bottom: calc(var(--leiste-h) + var(--unten) + 18px); height: 58px; padding: 0 24px 0 20px; border: 0; border-radius: 99px;
  background: var(--rost); color: #fff; font: 700 1rem var(--sans); display: inline-flex; align-items: center; gap: 10px;
  box-shadow: 0 14px 26px -10px rgba(120,40,10,.8), 0 1px 0 rgba(255,255,255,.3) inset;
}
.fab:active { transform: scale(.96); }
@media (min-width: 720px) { .fab { bottom: 28px; right: 28px; } }

/* Zettel-Detail */
.faden { display: grid; gap: 12px; margin-top: 8px; }
.antwort { display: flex; gap: 10px; align-items: flex-start; }
.antwort .blase { flex: 1; background: var(--karte-2); border-radius: 4px 16px 16px 16px; padding: 10px 14px; overflow-wrap: anywhere; white-space: pre-wrap; }
.antwort .blase small { display: block; color: var(--tinte-2); margin-bottom: 2px; }
.antwort-eingabe { display: flex; gap: 8px; align-items: flex-end; margin-top: 14px; }
.antwort-eingabe textarea { min-height: 48px; height: 48px; resize: none; }

/* ───────── Kalender ───────── */
.kal-kopf { display: flex; align-items: center; gap: 6px; margin: 4px 0 12px; flex-wrap: wrap; }
.kal-kopf h2 { font-size: 1.6rem; flex: 1; min-width: 150px; text-align: center; }
.segment { display: inline-flex; background: var(--papier-2); border-radius: 99px; padding: 4px; }
.segment button { border: 0; background: transparent; padding: 8px 16px; border-radius: 99px; font-weight: 700; font-size: .88rem; color: var(--tinte-2); }
.segment button[aria-pressed="true"] { background: var(--karte); color: var(--tinte); box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.monat { background: var(--karte); border-radius: var(--radius); box-shadow: var(--schatten); overflow: hidden; border: 1px solid color-mix(in srgb, var(--linie) 60%, transparent); touch-action: pan-y; }
.wochentage { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--akzent); color: var(--auf-akzent); }
@media (prefers-color-scheme: dark) { .wochentage { background: #101614; color: var(--tinte-2); } }
.wochentage span { text-align: center; padding: 9px 0; font: .68rem var(--stempel); letter-spacing: .12em; text-transform: uppercase; }
.woche { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: 30px; grid-auto-rows: 24px; padding-bottom: 6px; border-top: 1px solid var(--linie); position: relative; row-gap: 3px; }
.woche .t { grid-row: 1 / -1; border: 0; background: transparent; border-left: 1px solid var(--linie); padding: 5px 6px 0; text-align: left; font: 600 .9rem var(--serif); color: var(--tinte); display: flex; align-items: flex-start; justify-content: flex-start; margin: 0 0 -6px; }
.woche .t:first-child { border-left: 0; }
.woche .t.anders { color: var(--tinte-2); opacity: .45; background: color-mix(in srgb, var(--papier-2) 50%, transparent); }
.woche .t.wochenende { background: color-mix(in srgb, var(--papier-2) 35%, transparent); }
.woche .t.heute span { display: inline-grid; place-items: center; min-width: 24px; height: 24px; border-radius: 12px; background: var(--rost); color: #fff; padding: 0 4px; margin: -2px 0 0 -3px; }
.balken {
  position: relative; z-index: 2; min-width: 0; margin: 0 2px; padding: 0 8px; height: 24px; border: 0; border-radius: 7px; background: var(--c);
  color: #fff; font: 700 .78rem/24px var(--sans); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 1px 2px rgba(0,0,0,.25), 0 1px 0 rgba(255,255,255,.22) inset;
}
.balken.fl { margin-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.balken.fr { margin-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.balken i { font-style: normal; font-weight: 500; opacity: .85; }
.legende { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 14px; font-size: .88rem; color: var(--tinte-2); }
.legende span { display: inline-flex; align-items: center; gap: 7px; }
.legende .avatar { width: 14px; height: 14px; }
.liste-monat { display: grid; gap: 10px; }
.liste-gruppe h3 { font: .72rem var(--stempel); letter-spacing: .14em; text-transform: uppercase; color: var(--tinte-2); margin: 20px 4px 8px; }
.stay-karte { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 18px; background: var(--karte); box-shadow: var(--schatten); border: 0; width: 100%; text-align: left; border-left: 6px solid var(--c); }
.stay-karte .datum { text-align: center; min-width: 58px; line-height: 1.1; }
.stay-karte .datum b { display: block; font: 700 1.5rem var(--serif); }
.stay-karte .datum span { font: .66rem var(--stempel); letter-spacing: .1em; text-transform: uppercase; color: var(--tinte-2); }
.stay-karte .info { flex: 1; min-width: 0; } .stay-karte .info b { display: block; }
.warnung { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--senf) 22%, var(--karte)); font-size: .92rem; margin-top: 14px; }
.warnung svg { color: #A8741A; margin-top: 1px; }

/* ───────── Wiki ───────── */
.suche { position: relative; margin: 4px 0 6px; }
.suche input { padding-left: 46px; border-radius: 99px; background: var(--karte); }
.suche svg { position: absolute; left: 16px; top: 13px; color: var(--tinte-2); width: 22px; height: 22px; }
.wiki-gruppe h3 { font: .74rem var(--stempel); letter-spacing: .16em; text-transform: uppercase; color: var(--tinte-2); margin: 26px 4px 10px; display: flex; align-items: center; gap: 12px; }
.wiki-gruppe h3::after { content: ""; flex: 1; border-top: 1.5px dashed var(--linie); }
.wiki-raster { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.wiki-kachel {
  display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 20px; background: var(--karte); border: 0; text-align: left; width: 100%;
  box-shadow: var(--schatten); transition: transform .2s; text-decoration: none; color: inherit;
}
.wiki-kachel:hover { transform: translateY(-3px); }
.wiki-kachel .sym { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: color-mix(in srgb, var(--akzent) 12%, var(--karte)); color: var(--akzent); flex: none; }
.wiki-kachel .sym svg { width: 28px; height: 28px; stroke-width: 1.5; }
.wiki-kachel b { font: 700 1.1rem var(--serif); display: block; line-height: 1.2; }
.wiki-kachel small { color: var(--tinte-2); }
.seite { max-width: 760px; margin: 0 auto; }
.seite-kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.seite-kopf .zurueck { display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px 8px 6px; border: 0; background: none; font-weight: 700; color: var(--rost); border-radius: 99px; }
.seite-titel { display: flex; gap: 16px; align-items: center; margin: 8px 0 18px; }
.seite-titel .sym { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: var(--akzent); color: var(--auf-akzent); flex: none; box-shadow: 0 8px 18px -8px rgba(35,64,58,.7); }
.seite-titel .sym svg { width: 34px; height: 34px; stroke-width: 1.5; }
.seite-titel h2 { font-size: clamp(1.7rem, 6vw, 2.4rem); }
.artikel { font-size: 1.05rem; line-height: 1.65; }
.artikel > * + * { margin-top: 14px; }
.artikel h3 { font-size: 1.35rem; margin-top: 30px; padding-bottom: 6px; border-bottom: 2px solid var(--linie); }
.artikel ul { padding-left: 1.2em; } .artikel li { margin: 4px 0; }
.artikel img { max-width: 100%; border-radius: 14px; box-shadow: var(--schatten); display: block; }
.artikel code { font-family: var(--stempel); background: var(--papier-2); padding: 1px 6px; border-radius: 5px; font-size: .9em; }
.hinweis-box { display: flex; gap: 12px; padding: 14px 16px; border-radius: 16px; background: color-mix(in srgb, var(--senf) 20%, var(--karte)); border-left: 5px solid var(--senf); }
.hinweis-box svg { color: #A8741A; margin-top: 2px; }
.schritte { list-style: none; padding: 0; counter-reset: s; display: grid; gap: 12px; }
.schritte li { counter-increment: s; display: flex; gap: 16px; align-items: flex-start; background: var(--karte); border-radius: 18px; padding: 14px 16px; box-shadow: var(--schatten); margin: 0; }
.schritte li::before { content: counter(s); flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--rost); color: #fff; font: 700 1.2rem var(--serif); margin-top: -1px; }
.haken { list-style: none; padding: 0; display: grid; gap: 4px; }
.haken label { display: flex; gap: 14px; align-items: center; padding: 10px 14px; background: var(--karte); border-radius: 14px; box-shadow: var(--schatten); min-height: 52px; cursor: pointer; }
.haken input { appearance: none; width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--tinte-2); flex: none; display: grid; place-items: center; margin: 0; cursor: pointer; background: transparent; }
.haken input:checked { background: var(--moos); border-color: var(--moos); }
.haken input:checked::after { content: ""; width: 12px; height: 7px; border: solid #fff; border-width: 0 0 3px 3px; transform: rotate(-45deg) translate(1px,-1px); }
.haken input:checked + span { text-decoration: line-through; color: var(--tinte-2); }
.seite-fuss { margin-top: 34px; padding-top: 14px; border-top: 1.5px dashed var(--linie); font-size: .85rem; color: var(--tinte-2); display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.werkzeug { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 8px; }
.werkzeug button { min-height: 40px; padding: 0 12px; border-radius: 10px; border: 1.5px solid var(--linie); background: var(--karte-2); font-weight: 700; font-size: .85rem; display: inline-flex; align-items: center; gap: 6px; }
.symbolwahl { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.symbolwahl button { aspect-ratio: 1; border-radius: 14px; border: 1.5px solid var(--linie); background: var(--karte-2); display: grid; place-items: center; color: var(--tinte); }
.symbolwahl button[aria-pressed="true"] { background: var(--akzent); color: var(--auf-akzent); border-color: var(--akzent); }
.wiki-edit textarea { min-height: 320px; font-family: ui-monospace, "Cascadia Mono", Menlo, monospace; font-size: .92rem; }

/* ───────── Blatt (Dialog) ───────── */
.blatt {
  border: 0; padding: 0; background: var(--karte); color: var(--tinte); width: 100%; max-width: 100%; max-height: 92dvh; margin: auto 0 0;
  border-radius: 28px 28px 0 0; box-shadow: 0 -20px 60px -10px rgba(0,0,0,.5); overflow: hidden;
}
.blatt[open] { display: flex; flex-direction: column; animation: hoch .38s cubic-bezier(.2,.9,.25,1); }
.blatt::backdrop { background: rgba(20,24,20,.55); backdrop-filter: blur(3px); animation: einblenden .3s; }
@keyframes hoch { from { transform: translateY(40px); opacity: 0; } }
@keyframes einblenden { from { opacity: 0; } }
.blatt .griff { width: 44px; height: 5px; border-radius: 5px; background: var(--linie); margin: 10px auto 0; flex: none; }
.blatt-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px 0 22px; flex: none; }
.blatt-kopf h2 { font-size: 1.4rem; }
.blatt-inhalt { padding: 6px 22px calc(22px + var(--unten)); overflow-y: auto; overscroll-behavior: contain; flex: 1; }
.blatt-fuss { display: flex; gap: 10px; justify-content: space-between; margin-top: 22px; flex-wrap: wrap; }
.blatt-fuss .rechts { display: flex; gap: 10px; margin-left: auto; }
@media (min-width: 720px) {
  .blatt { width: min(600px, 92vw); margin: auto; border-radius: 26px; max-height: 88dvh; box-shadow: 0 30px 80px -20px rgba(0,0,0,.6); }
  .blatt.breit { width: min(760px, 92vw); }
  .blatt .griff { display: none; }
  .blatt-kopf { padding-top: 18px; }
}
.hinweis {
  position: fixed; z-index: 100; left: 50%; bottom: calc(var(--leiste-h) + var(--unten) + 86px); transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--tinte); color: var(--papier); padding: 12px 20px; border-radius: 99px; font-weight: 600; font-size: .92rem; transition: .3s; max-width: 90vw; box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.hinweis.an { opacity: 1; transform: translate(-50%, 0); }
.hinweis.fehler { background: #B3261E; color: #fff; }
@media (min-width: 720px) { .hinweis { bottom: 40px; } }
.offline-band { background: var(--senf); color: #2B2620; text-align: center; padding: 6px 12px; font-size: .85rem; font-weight: 700; }

/* ───────── Anmeldung ───────── */
body.anmeldung { background: #0F1B1A; display: grid; place-items: center; min-height: 100dvh; padding: 20px; background-image: none; position: relative; overflow: hidden; }
.anm-szene { position: fixed; inset: 0; width: 100%; height: 100%; }
.anm-szene .rauch { animation: rauch 6s ease-in-out infinite; }
.anm-karte { position: relative; z-index: 2; width: min(400px, 100%); background: color-mix(in srgb, #F6EFDC 94%, transparent); color: #2B2620; border-radius: 28px; padding: 30px 26px 26px;
  text-align: center; box-shadow: 0 30px 70px -20px rgba(0,0,0,.8); backdrop-filter: blur(6px); animation: rise .8s cubic-bezier(.2,.8,.2,1) both; }
.anm-karte .stempel { color: #6B6256; margin-top: 12px; }
.anm-symbol { border-radius: 20px; box-shadow: 0 10px 24px -8px rgba(0,0,0,.5); }
.anm-karte h1 { font-size: 2.6rem; margin: 4px 0 8px; }
.anm-text { color: #6B6256; margin-bottom: 20px; }
.anm-karte form { text-align: left; }
.anm-karte label { font-size: .8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #6B6256; }
.anm-karte input { margin: 6px 0 16px; background: #fff; color: #2B2620; border-color: #D9CDB4; }
.anm-karte .knopf { width: 100%; background: #23403A; color: #F6F0E2; }
.anm-fehler { color: #B3261E; font-weight: 600; text-align: center; min-height: 1.4em; margin-top: 10px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print { .leiste, .fab, .kopf .ich-knopf { display: none; } }

/* ───────── Nachträge ───────── */
.start > div { display: grid; gap: 16px; align-content: start; margin-bottom: 16px; }
.k-titel { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.k-titel h2 { font-size: 1.3rem; }
.k-titel a { font-size: .9rem; font-weight: 700; color: var(--rost); text-decoration: none; }
.still .rise { animation: none; }
.nurmittel { display: none; }
@media (min-width: 1100px) { .nurmittel { display: block; } }
.woche { min-height: 62px; }
.zettel-detail h3 { margin-top: 4px; }
.werkzeug b { font-family: var(--serif); font-size: 1.1rem; }

.fab-platz { height: 84px; }

.artikel ul.haken, .artikel ol.schritte { padding-left: 0; }
@media (max-width: 600px) { .anm-szene .huette { transform: translate(335px, 478px); } }

/* ───────── Checklisten (zum Abhaken, je Person nachverfolgt) ───────── */
a.aufenthalt-zeile { text-decoration: none; color: inherit; }
a.knopf { text-decoration: none; }
.fortschritt { height: 10px; border-radius: 10px; background: var(--papier-2); overflow: hidden; margin: 8px 0 4px; box-shadow: inset 0 1px 2px rgba(0,0,0,.12); }
.fortschritt i { display: block; height: 100%; border-radius: 10px; background: linear-gradient(90deg, var(--moos), #8DAA6E); transition: width .4s cubic-bezier(.2,.8,.2,1); }
.cl-raster { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.cl-lauf { display: flex; gap: 14px; padding: 16px; border-radius: 20px; background: var(--karte); box-shadow: var(--schatten); text-decoration: none; color: inherit; border: 2px solid transparent; transition: transform .2s; }
.cl-lauf:hover { transform: translateY(-3px); }
.cl-lauf.meine { border-color: var(--moos); }
.cl-lauf .sym, .cl-kopfzeile .sym { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--moos) 18%, var(--karte)); color: var(--moos); }
.cl-lauf .sym svg, .cl-kopfzeile .sym svg { width: 26px; height: 26px; stroke-width: 1.5; }
.cl-text { flex: 1; min-width: 0; display: block; }
.cl-text b { display: block; font: 700 1.1rem var(--serif); }
.cl-wer { display: flex; align-items: center; gap: 7px; margin-top: 2px; }
.cl-wer .avatar { width: 22px; height: 22px; font-size: .68rem; }
.cl-vorlage { display: grid; gap: 10px; align-content: start; }
.cl-vorlage .knopf { justify-self: start; }
.cl-kopfzeile { display: flex; align-items: center; gap: 14px; }
.cl-kopfzeile > div { flex: 1; min-width: 0; }
.cl-kopfzeile b { display: block; font: 700 1.15rem var(--serif); }
.cl-zuletzt { display: flex; gap: 8px; align-items: center; }
.cl-zuletzt svg { color: var(--moos); width: 1.2em; height: 1.2em; }
.cl-protokoll { display: grid; gap: 8px; }
.cl-zeile { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--karte); box-shadow: var(--schatten); text-decoration: none; color: inherit; }
.cl-zeile .wer { flex: 1; min-width: 0; } .cl-zeile .wer b { display: block; } .cl-zeile .wer .stempel { display: block; }
.cl-marke { font: .66rem var(--stempel); letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border: 1.5px solid currentColor; border-radius: 4px; transform: rotate(-2deg); white-space: nowrap; }
.cl-marke.komplett { color: #3E7A4C; } .cl-marke.abgebrochen { color: #B4532A; }
.cl-wer-zeile { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.cl-stempel { display: inline-block; font: 1.5rem var(--stempel); letter-spacing: .14em; text-transform: uppercase; padding: 2px 14px; border: 3px solid currentColor; border-radius: 6px; transform: rotate(-3deg); margin: 0 0 18px; opacity: .85; }
.cl-stempel.komplett { color: #3E7A4C; } .cl-stempel.abgebrochen { color: #B4532A; }
.cl-punkte { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; }
.cl-kopf { font: .74rem var(--stempel); letter-spacing: .16em; text-transform: uppercase; color: var(--tinte-2); margin: 16px 4px 2px; padding-bottom: 6px; border-bottom: 1.5px dashed var(--linie); }
.cl-punkt { display: flex; gap: 14px; align-items: center; padding: 14px 16px; min-height: 60px; background: var(--karte); border-radius: 16px; box-shadow: var(--schatten); cursor: pointer; transition: background .2s, transform .12s; }
.cl-punkt:active { transform: scale(.985); }
.cl-punkt input { appearance: none; width: 30px; height: 30px; flex: none; border-radius: 10px; border: 2.5px solid var(--tinte-2); margin: 0; display: grid; place-items: center; background: transparent; cursor: pointer; transition: background .2s, border-color .2s; }
.cl-punkt input:checked { background: var(--moos); border-color: var(--moos); }
.cl-punkt input:checked::after { content: ""; width: 14px; height: 8px; border: solid #fff; border-width: 0 0 3px 3px; transform: rotate(-45deg) translate(1px, -1px); }
.cl-punkt input:disabled { cursor: default; }
.cl-punkt .t { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 1.05rem; }
.cl-punkt small { font: .7rem var(--stempel); letter-spacing: .06em; color: var(--tinte-2); }
.cl-punkt.fertig { background: color-mix(in srgb, var(--moos) 12%, var(--karte)); }
.cl-punkt.fertig .t { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--tinte) 40%, transparent); color: var(--tinte-2); }

/* ───────── Erwähnungen auf Zetteln ───────── */
.z-wer { display: flex; align-items: center; gap: 6px; margin-top: 12px; padding: 6px 10px; border-radius: 8px; background: rgba(60,50,30,.08); font-size: .85rem; color: #5A5146; }
.z-wer svg { width: 1.1em; height: 1.1em; }
.z-wer.ich { background: #B4532A; color: #fff; font-weight: 600; box-shadow: 0 2px 6px -2px rgba(120,40,10,.6); }
.zettel.fuer-mich { box-shadow: 0 0 0 3px rgba(216,161,58,.9), 0 1px 1px rgba(0,0,0,.25), 0 10px 18px -6px rgba(0,0,0,.6); }
.zustaendig { margin-top: 16px; }
.karte.fuer-dich { border: 2px solid var(--rost); }
.chip .avatar { width: 22px; height: 22px; font-size: .68rem; }