/* Liesels Kalender v8 · Gestaltungsschicht (Entwurf 22.10.2026)
   Lädt nach style.css. Nur Gestaltung und Interaktion, keine Inhalte.
   3D nur mit CSS-Transforms; ohne JS bleibt alles lesbar; «Bewegung reduzieren» schaltet Animationen ab. */
@font-face{font-family:"Fraunces";src:url("/assets/fonts/fraunces.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
:root{
  --papier:#f7f2e6;--papier2:#efe6d2;--blatt:#fffdf8;--tinte:#2a2620;--grau:#5f574a;
  --gruen:#35553a;--gruen-tief:#223b29;--gruen2:#6f8f4e;--salbei:#c9d4bc;--hell:#e7eddd;
  --rot:#9c3426;--honig:#865c1b;--linie:#e2d7bf;--r:14px;
  --kursiv:Georgia,"Iowan Old Style","Palatino Linotype",serif;
  --zier:"Fraunces","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --schatten:0 1px 1px rgba(60,45,20,.06),0 6px 14px -6px rgba(60,45,20,.18),0 22px 40px -24px rgba(40,30,10,.28);
  --papierkorn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .15 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html{background:var(--papier)}
body{background:var(--papierkorn),radial-gradient(1200px 600px at 50% -200px,#fffaf0 0,rgba(255,250,240,0) 70%),var(--papier);color:var(--tinte);font-size:17.5px;line-height:1.65;text-rendering:optimizeLegibility}
h1,h2,h3,.logo strong{font-family:var(--zier);font-weight:560;letter-spacing:-.005em;font-optical-sizing:auto}
h1{font-size:clamp(1.9rem,1.2rem + 3.2vw,2.9rem);line-height:1.08;color:var(--gruen-tief);margin:.5em 0 .35em;font-weight:500}
h2{font-size:clamp(1.3rem,1.1rem + .9vw,1.65rem);color:var(--gruen-tief);margin:1.9em 0 .55em;display:flex;align-items:center;gap:.55em}
h2::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--linie),rgba(226,215,191,0))}
.lead{font-size:1.14rem;color:var(--grau);max-width:40em}
.datum{letter-spacing:.14em;font-size:.78rem;color:var(--honig);font-weight:600}
.datum a{color:inherit}
a{color:var(--gruen);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--rot)}
:focus-visible{outline:2px solid var(--honig);outline-offset:3px;border-radius:6px}
.wrap{max-width:920px;padding:0 20px}

/* Kopf: ruhig, mit feiner Doppellinie */
.kopf{background:rgba(250,246,236,.86);border-bottom:0;box-shadow:0 1px 0 var(--linie),0 4px 0 -3px var(--linie);position:relative}
@supports (backdrop-filter:blur(6px)){.kopf{backdrop-filter:saturate(1.1) blur(6px)}}
.logo svg{filter:drop-shadow(0 2px 3px rgba(40,60,30,.18));transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.logo:hover svg{transform:rotate(-8deg) scale(1.05)}
.logo strong{font-size:1.3rem;color:var(--gruen-tief);font-weight:600}
.logo small{letter-spacing:.06em}
.nav a{transition:background .2s,color .2s}
.nav a:hover{background:var(--hell)}
.vorschau-banner{background:#8e2f22;letter-spacing:.02em}

/* Karten allgemein */
.karte{background:var(--blatt);border:1px solid var(--linie);border-radius:var(--r);box-shadow:var(--schatten)}
.oma{background:linear-gradient(180deg,#fbf3d9,#f7ecca);border-left:0;border-radius:var(--r);position:relative;padding:16px 18px 14px 22px;font-family:var(--kursiv);font-size:1.08rem;box-shadow:var(--schatten)}
.oma::after{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:3px;background:var(--gruen2)}
.oma::before{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.06em;text-transform:uppercase;font-size:.72rem;color:var(--gruen);font-style:normal}
.regel-gross{font-family:var(--kursiv);font-style:italic;font-weight:400;font-size:clamp(1.3rem,1.05rem + 1.4vw,1.85rem);line-height:1.3;color:var(--gruen-tief)}
.regel-gross::before,.regel-gross::after{color:var(--honig)}
.btn{background:var(--gruen);box-shadow:0 2px 0 var(--gruen-tief),0 8px 16px -8px rgba(34,59,41,.6);transition:transform .2s,box-shadow .2s,background .2s;letter-spacing:.01em}
.btn:hover{background:var(--gruen-tief);transform:translateY(-1px)}
.btn:active{transform:translateY(1px);box-shadow:0 1px 0 var(--gruen-tief)}
.chip{background:var(--hell);color:var(--gruen-tief);border:1px solid rgba(53,85,58,.12)}
.fuss{background:linear-gradient(180deg,var(--gruen),var(--gruen-tief));margin-top:2em;position:relative}
.fuss::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px;background:radial-gradient(14px 10px at 7px 14px,var(--gruen) 98%,transparent 100%) repeat-x;background-size:14px 14px}

/* ───────── Kalenderblatt mit Ringbindung (Monats- und Tagesseiten) ───────── */
.buehne{perspective:1800px;perspective-origin:50% 0}
.seite-monat main.wrap,.seite-regel main.wrap,.seite-heute main.wrap{
  position:relative;background:var(--papierkorn),var(--blatt);border-radius:6px 6px var(--r) var(--r);
  width:calc(100% - 20px);max-width:900px;margin:34px auto 40px;padding:34px 20px 34px;transform-origin:50% 0;
  box-shadow:0 1px 0 #fff inset,0 2px 0 var(--linie),0 5px 0 -1px #f4ecdc,0 6px 0 -1px var(--linie),0 10px 0 -3px #efe5d1,0 11px 0 -3px var(--linie),var(--schatten)}
/* Ringe */
.seite-monat main.wrap::before,.seite-regel main.wrap::before,.seite-heute main.wrap::before{
  content:"";position:absolute;left:24px;right:24px;top:-16px;height:30px;pointer-events:none;
  background:
   radial-gradient(circle at 50% 70%,#2b261e 0 4px,transparent 4.6px) 0 0/44px 30px repeat-x,
   linear-gradient(90deg,transparent 18px,#b7ab93 18px,#efe9dc 20px,#8f846c 23px,transparent 24px) 0 0/44px 22px repeat-x}
.seite-monat main.wrap::after,.seite-regel main.wrap::after,.seite-heute main.wrap::after{
  content:"";position:absolute;left:0;right:0;top:0;height:28px;border-radius:6px 6px 0 0;pointer-events:none;
  background:linear-gradient(180deg,rgba(40,30,10,.06),rgba(40,30,10,0))}
@media (min-width:700px){.seite-monat main.wrap,.seite-regel main.wrap,.seite-heute main.wrap{padding:44px 48px 44px;margin-top:44px;width:calc(100% - 40px)}}

/* Abreisskalender-Ziffer (nur Deko, aus der URL der Tagesseite) */
.abreiss{float:right;margin:-6px 0 12px 18px;width:104px;text-align:center;background:var(--blatt);border-radius:10px;overflow:hidden;
  box-shadow:0 1px 0 var(--linie),0 3px 0 -1px #f3ead8,0 4px 0 -1px var(--linie),var(--schatten);transform:rotate(2deg)}
.abreiss .am{display:block;background:var(--rot);color:#fff;font:600 .72rem/1 system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;padding:8px 4px}
.abreiss .at{display:block;font-family:var(--zier);font-weight:600;font-size:3.1rem;line-height:1.1;color:var(--gruen-tief);padding:6px 0 8px;font-variant-numeric:lining-nums}
@media (max-width:480px){.abreiss{width:78px;margin-left:12px}.abreiss .at{font-size:2.3rem}.flip-innen{min-height:190px}}

/* Ankommen: Blatt klappt von oben herunter */
@keyframes blattAn{from{transform:rotateX(-78deg);opacity:0}60%{opacity:1}to{transform:none;opacity:1}}
@keyframes blattWeg{to{transform:rotateX(96deg) translateY(-12px);opacity:0}}
.seite-monat main.wrap,.seite-regel main.wrap,.seite-heute main.wrap{animation:blattAn .8s cubic-bezier(.2,.75,.25,1) both;backface-visibility:hidden}
.seite-monat main.wrap.blatt-weg,.seite-regel main.wrap.blatt-weg,.seite-heute main.wrap.blatt-weg{animation:blattWeg .5s cubic-bezier(.5,0,.75,0) forwards!important}

/* Monatsleiste als Registerreiter */
.monatsleiste{gap:0;margin:.2em 0 1.2em;border-bottom:1px solid var(--linie)}
.monatsleiste .chip{border-radius:10px 10px 0 0;margin:0 4px -1px 0;padding:7px 16px;font-size:.88rem;background:var(--papier2)!important;color:var(--gruen-tief)!important;border:1px solid var(--linie);text-decoration:none}
.monatsleiste .chip[aria-current]{background:var(--blatt)!important;border-bottom-color:var(--blatt);font-weight:700}
.tag-nav{font-family:var(--zier);font-size:1rem;padding-top:14px;border-top:1px dashed var(--linie)}

/* ───────── Kräuterkarten: Raster und 3D-Drehen ───────── */
.raster{gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}
.pflanzkarte{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s;transform-style:preserve-3d}
.pflanzkarte strong{font-family:var(--zier);font-weight:600;font-size:1.22rem;color:var(--gruen-tief)}
.pflanzkarte:hover{transform:translateY(-3px);box-shadow:0 2px 2px rgba(60,45,20,.06),0 18px 30px -16px rgba(40,30,10,.4)}
.flipkarte{perspective:1100px;position:relative}
.flip-innen{display:grid;min-height:236px;transform-style:preserve-3d;transition:transform .75s cubic-bezier(.25,.8,.25,1)}
.flipkarte.gedreht .flip-innen{transform:rotateY(180deg)}
.flip-vorne,.flip-hinten{grid-area:1/1;position:relative;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:var(--r);border:1px solid var(--linie);
  background:var(--papierkorn),var(--blatt);box-shadow:var(--schatten);padding:16px 16px 14px;display:flex;flex-direction:column;overflow:hidden}
.flip-hinten{transform:rotateY(180deg);background:var(--papierkorn),linear-gradient(180deg,#f6f8f1,#eef2e6);font-size:.95rem}
.flip-vorne{align-items:flex-start}
.flip-vorne .zweig{position:absolute;right:-8px;bottom:-10px;width:120px;height:120px;opacity:.9;color:var(--gruen2);transform:rotate(-12deg)}
.flip-vorne .fname{font-family:var(--zier);font-weight:600;font-size:1.45rem;line-height:1.15;color:var(--gruen-tief);text-decoration:none;margin-top:auto;position:relative;z-index:1}
.flip-vorne .fname::after{content:"";position:absolute;inset:-200px;z-index:-1}
.flip-vorne .latein{position:relative;z-index:1;margin-bottom:6px}
.flip-vorne .monatsmarke{font:600 .7rem/1 system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--honig)}
.flip-knopf{position:relative;z-index:2;align-self:flex-start;margin-top:8px;font:600 .8rem/1 system-ui,sans-serif;color:var(--gruen-tief);background:rgba(255,255,255,.75);border:1px solid var(--linie);border-radius:999px;padding:8px 12px;cursor:pointer;min-height:36px}
.flip-knopf:hover{background:var(--hell)}
.flip-hinten .fname-klein{font-family:var(--zier);font-weight:600;color:var(--gruen-tief);font-size:1.05rem;margin:0 0 6px}
.flip-hinten .finhalt{flex:1}
.flip-hinten .finhalt strong{display:none}
.flip-hinten .sicher{font-size:.8rem;color:#7d2a1e;background:#fbebe6;border-radius:8px;padding:6px 8px;margin:8px 0}
.flip-hinten .fuss-zeile{display:flex;justify-content:space-between;align-items:center;gap:8px}
.flip-hinten .zum{font:600 .85rem/1.2 system-ui,sans-serif}
.flipkarte.gedreht .flip-vorne,.flipkarte:not(.gedreht) .flip-hinten{pointer-events:none}

/* Startseite: Hero als Bühne mit Tiefe */
.seite-start h1{max-width:16em}
.hero{gap:22px}
.hero-bild{border-radius:18px;border:6px solid var(--blatt);box-shadow:var(--schatten),0 0 0 1px var(--linie);transform:rotate(-1.2deg)}
.hero-regel{position:relative;transform:rotate(.6deg);padding-top:26px!important}
.hero-regel::before{content:"";position:absolute;left:16px;right:16px;top:-10px;height:20px;background:radial-gradient(circle at 50% 65%,#2b261e 0 3.5px,transparent 4px) 0 0/34px 20px repeat-x,linear-gradient(90deg,transparent 14px,#b7ab93 14px,#efe9dc 16px,#8f846c 18px,transparent 19px) 0 0/34px 14px repeat-x}
.seite-start .raster .pflanzkarte{min-height:120px;display:flex;flex-direction:column;justify-content:flex-end;background:var(--papierkorn),var(--blatt)}
.kipp{transition:transform .25s ease-out;will-change:transform}

/* Pflanzenseite: Herbarbogen */
.seite-pflanze main.wrap{position:relative}
.seite-pflanze h1{font-size:clamp(2.2rem,1.4rem + 4vw,3.4rem);margin-bottom:.1em}
.seite-pflanze .latein{font-family:var(--kursiv);font-size:1.05rem}
.vergleich{border-radius:var(--r);box-shadow:var(--schatten);border-color:var(--linie)}
.vergleich-kopf div{font-family:var(--zier);font-size:1.05rem}
.notruf{border-width:1px;box-shadow:var(--schatten)}
.warnung{border-radius:var(--r)}

/* v8-dach-Elemente: Notfallkasten (CH/DE/AT), Notruf-Fusszeile, Länderabschnitte */
.notruf{background:linear-gradient(180deg,#fdf1ee,#fbe8e3);border:1px solid #e3b6ab;border-left:4px solid var(--rot);border-radius:var(--r);padding:16px 18px;scroll-margin-top:16px}
.notruf .notruf-titel{font-family:var(--zier);text-transform:none;letter-spacing:0;font-size:1.2rem;font-weight:600;color:var(--rot);margin-bottom:6px}
.notruf p{margin:.45em 0;line-height:1.55}
.notruf p+p{padding-top:.45em;border-top:1px dashed #e7c3ba}
.notruf p strong{display:inline-block;min-width:6.2em;font:700 .74rem/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#7d2a1e}
.notruf a[href^="tel:"]{white-space:nowrap;color:#7d2a1e}
.notruf .klein{color:#5f4a44}
.notruf-fuss{background:rgba(0,0,0,.2);border-radius:10px;padding:10px 14px;line-height:1.6}
.notruf-fuss a[href^="tel:"]{white-space:nowrap}
#recht-de,#recht-at,#notfall{scroll-margin-top:16px}
.seite-pflanze main>p>strong:first-child{font-family:var(--zier);font-weight:600;color:var(--gruen-tief)}

/* Leserhinweise (neutral, ersetzt die frühere Inhaber-Klasse) */
.hinweis{position:relative;margin:1.1em 0;padding:10px 14px 10px 40px;border:1px solid var(--linie);border-radius:var(--r);background:var(--papierkorn),#fbf8f0;color:var(--grau);font-size:.92rem;line-height:1.55}
.hinweis::before{content:"i";position:absolute;left:12px;top:11px;width:18px;height:18px;border-radius:50%;border:1px solid var(--honig);color:var(--honig);font:italic 600 .78rem/16px Georgia,serif;text-align:center}

/* Bewegung reduzieren: keine Animationen, kein Drehen im Raum */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .flipkarte.gedreht .flip-innen{transform:none}
  .flip-hinten{transform:none;visibility:hidden}
  .flipkarte.gedreht .flip-hinten{visibility:visible}
  .flipkarte.gedreht .flip-vorne{visibility:hidden}
  .hero-bild,.hero-regel,.abreiss{transform:none}
}
@media print{body{background:#fff}.seite-monat main.wrap,.seite-regel main.wrap,.seite-heute main.wrap{box-shadow:none}.flipkarte{min-height:0}}