/* Lindenrain — Kune Kune. Ein Stylesheet für alle Seiten. */

:root{
  --weide:#e4eada;
  --weide-hell:#e9eee1;
  --lasur-1:#e8eddf;  /* Wiese */
  --lasur-2:#efe9d8;  /* Hafer */
  --lasur-3:#f2e8dc;  /* Altrosa */
  --lasur-4:#f0ead9;  /* zurueck zum Hafer */
  --tief:#26361f;
  --moos:#5b6f52;
  --honig:#b8791f;
  --honig-hell:#e0a94a;
  --honig-moos:#f0c87e;  /* heller, fuer Text auf dem Moos-Abschnitt */
  --rahm:#f5f3e9;
  --linie:rgba(38,54,31,.16);
  --display:"Fraunces",Georgia,serif;
  --body:"Karla","Helvetica Neue",Arial,sans-serif;
  --wrap:1140px;
  --gut:clamp(2.4rem,5vw,4.2rem);
  --rund:18px;
  --korn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' seed='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}

body{margin:0;background:var(--weide);color:var(--tief);font-family:var(--body);font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);font-variation-settings:"SOFT" 40,"WONK" 1;font-weight:600;line-height:1.08;letter-spacing:-.015em;margin:0}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--honig);outline-offset:3px;border-radius:2px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(1.25rem,4vw,2.5rem)}
.wrap.eng{max-width:var(--wrap)}
.wrap.eng > *{max-width:68ch}
.eyebrow{font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--moos);margin:0 0 1.1rem}
.abschnitt.dunkel .eyebrow{color:var(--honig-moos)}

/* Kopf */
.kopf{position:sticky;top:0;z-index:50;background:rgba(238,241,230,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--linie)}
.kopf-in{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding-block:.8rem}
.marke{font-family:var(--display);font-weight:700;font-size:clamp(.92rem,3.4vw,1.1rem);min-width:0;text-decoration:none;letter-spacing:-.01em;white-space:nowrap;display:flex;align-items:center;gap:.55rem}

.marke img{width:clamp(34px,9vw,44px);height:auto;flex:none}
.marke .wort{min-width:0;overflow:hidden;text-overflow:ellipsis}
.marke .wort span{color:var(--honig)}
.nav{display:flex;align-items:center;gap:1.15rem;font-size:.86rem;font-weight:500}
.nav a{text-decoration:none;padding-block:.2rem;border-bottom:2px solid transparent;transition:border-color .18s;white-space:nowrap}
.nav a:hover,.nav a[aria-current="page"]{border-color:var(--honig)}
.nav .cta{background:var(--tief);color:var(--weide-hell);border:none;border-radius:999px;padding:.45rem 1.1rem;font-weight:700}
.nav .cta:hover{background:var(--honig)}
.menue{display:none;flex:none;width:44px;height:44px;padding:0;background:none;
  border:1px solid var(--linie);border-radius:999px;cursor:pointer;color:inherit;
  align-items:center;justify-content:center}
/* Die drei Striche: der mittlere ist das Element selbst, die zwei
   aeusseren sind seine Pseudoelemente. */
.menue .striche,.menue .striche::before,.menue .striche::after{
  content:"";display:block;width:20px;height:2px;border-radius:2px;
  background:currentColor;transition:transform .2s,opacity .2s}
.menue .striche::before{transform:translateY(-6px)}
.menue .striche::after{transform:translateY(4px)}
.menue[aria-expanded="true"] .striche{background:transparent}
.menue[aria-expanded="true"] .striche::before{transform:rotate(45deg)}
.menue[aria-expanded="true"] .striche::after{transform:translateY(-2px) rotate(-45deg)}
@media (max-width:1000px){
  .menue{display:flex}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:#eef1e6;border-bottom:1px solid var(--linie);padding:.5rem 0}
  .nav.offen{display:flex}
  .nav a{padding:.75rem clamp(1.25rem,4vw,2.5rem);border-bottom:1px solid var(--linie)}
  .nav .cta{border-radius:0;text-align:left}
}

/* Titelbereich ohne Bild */
.titel{padding-block:clamp(2.8rem,6vw,4.5rem) clamp(2rem,4vw,3rem)}
.titel h1{font-size:clamp(2.4rem,6vw,4rem);max-width:18ch}
.titel .lead{font-size:clamp(1.05rem,1.9vw,1.2rem);max-width:56ch;color:#3c4d35;margin:1.4rem 0 0}

/* Buehne: bildschirmfüllender Titelbereich */
.buehne{
  position:relative;display:flex;align-items:flex-end;
  min-height:58vh;padding-block:clamp(3rem,8vw,5rem) clamp(4.5rem,10vw,7rem);
  color:var(--weide-hell);isolation:isolate;
  border-radius:0 0 clamp(24px,4vw,44px) clamp(24px,4vw,44px);
}
.buehne.gross{min-height:min(88vh,780px)}
/* Bild und Schleier liegen auf zwei Hilfsebenen. Nur die werden nach
   unten weich ausgeblendet, damit das Bild in die Lasur uebergeht.
   Laege die Maske auf dem Abschnitt selbst, verblasste die
   Ueberschrift gleich mit. */
.buehne::before,.buehne::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  -webkit-mask-image:linear-gradient(to bottom,#000 88%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 88%,transparent 100%);
}
.buehne::before{z-index:-2;background-image:var(--b);background-size:cover;
  background-position:var(--pos,center)}
.buehne::after{z-index:-1;
  background:linear-gradient(to top,rgba(30,42,22,.8) 0%,rgba(30,42,22,.52) 38%,rgba(30,42,22,.15) 70%,rgba(30,42,22,.02) 100%);
}
.buehne-in{position:relative;z-index:1;width:100%}
.buehne .eyebrow{color:var(--honig-hell)}
.buehne h1{font-size:clamp(2.5rem,6.5vw,4.6rem);max-width:17ch;text-shadow:0 2px 24px rgba(12,20,10,.45)}
.buehne h1 em{font-style:normal;color:var(--honig-hell);display:block}
.buehne .lead{font-size:clamp(1.05rem,1.9vw,1.22rem);max-width:52ch;margin:1.4rem 0 0;color:#dfe8d6}
.buehne .status{background:rgba(233,238,225,.14);backdrop-filter:blur(6px);color:var(--weide-hell)}
.buehne .knopf-neben{color:var(--weide-hell);border-bottom-color:rgba(233,238,225,.4)}
.buehne .quelle{position:absolute;right:1rem;bottom:.5rem;font-size:.7rem;color:rgba(233,238,225,.55);z-index:1}
@media (max-width:640px){.buehne{min-height:52vh}.buehne.gross{min-height:76vh}}

/* Hero Startseite */
.hero{padding-block:clamp(2.5rem,6vw,4.5rem) var(--gut)}
.hero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(2rem,5vw,4rem);align-items:center}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;gap:2.5rem}}
.hero h1{font-size:clamp(2.8rem,7vw,4.8rem)}
.hero h1 em{font-style:normal;color:var(--honig);display:block}
.hero-text{font-size:clamp(1.05rem,1.9vw,1.2rem);max-width:34ch;color:#3c4d35;margin:1.5rem 0 2rem}

.status{display:inline-flex;align-items:center;gap:.6rem;background:var(--tief);color:var(--weide-hell);padding:.5rem .95rem .5rem .8rem;border-radius:99px;font-size:.82rem;font-weight:500;margin-bottom:1.1rem}
.punkt{width:8px;height:8px;border-radius:50%;background:var(--honig-hell);flex:none;animation:puls 2.6s ease-in-out infinite}
@keyframes puls{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}

.knopf{display:inline-block;background:var(--honig);color:#fff;text-decoration:none;font-weight:700;font-size:.95rem;padding:.9rem 1.9rem;border-radius:999px;transition:background .18s,transform .18s}
.knopf:hover{background:#9d660f;transform:translateY(-1px)}
.knopf-neben{margin-left:1.4rem;font-size:.9rem;font-weight:500;text-decoration:none;border-bottom:1px solid var(--linie)}

/* Bild in einem Abschnitt */
.abbildung{margin:1.9rem 0 2.4rem;border-radius:26px 16px 24px 18px;overflow:hidden;border:1px solid rgba(38,54,31,.08);background:linear-gradient(180deg,#fbf8ed,#f4eee0)}
.abbildung img{width:100%;display:block}
.abbildung figcaption{padding:.8rem 1.1rem;font-size:.88rem;color:#43553b}
.abschnitt.dunkel .abbildung{border-color:rgba(191,205,180,.2);background:rgba(233,238,225,.06)}
.abschnitt.dunkel .abbildung figcaption{color:#dde5d2}
.gruppe .abbildung{margin:1.6rem 0 0;max-width:640px}

/* Grosses Bild im Hero */
.hero-bild{margin:0;border-radius:24px 18px 26px 16px;overflow:hidden;background:linear-gradient(180deg,#fbf8ed,#f4eee0);border:1px solid rgba(38,54,31,.1)}
.hero-bild img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.hero-bild .platz{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;color:var(--moos);font-size:.9rem;background:var(--weide-hell)}
.hero-bild figcaption{padding:.8rem 1.1rem;font-size:.88rem;color:#43553b}

/* Zeichnung: Tusche. Umriss von Hand, Schraffur aus zeichnung.py */
.figur{width:100%;height:auto}
.figur .papier{fill:#faf6ea}
.figur .tusche{fill:none;stroke:var(--tief);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.figur .tusche.stark{stroke-width:3}
.figur .tusche.schwanz{stroke-width:2.6}
.figur .spalt{fill:none;stroke:var(--tief);stroke-width:1.6;stroke-linecap:round}
.figur .schraffur{fill:none;stroke:var(--tief);stroke-width:1;opacity:.38}
.figur .haar{fill:none;stroke:var(--tief);stroke-width:1.3;stroke-linecap:round;opacity:.6}
.figur .falte{fill:none;stroke:var(--tief);stroke-width:1.4;stroke-linecap:round;opacity:.45}
.figur .nasenloch,.figur .auge{fill:var(--tief)}
.figur .piri{fill:#faf6ea;stroke:var(--tief);stroke-width:2.2;stroke-linejoin:round}
.figur .hang{fill:none;stroke:var(--moos);stroke-width:1.6;opacity:.5}
.figur .halme{fill:none;stroke:var(--moos);stroke-width:1.4;stroke-linecap:round;opacity:.5}
.figur .leiter{fill:none;stroke:var(--moos);stroke-width:1.2;opacity:.85}
.figur .beschriftung{font-family:var(--body);font-size:14px;font-weight:700;fill:var(--tief);letter-spacing:.06em}
.figur .erklaerung{font-family:var(--body);font-size:12.5px;fill:var(--moos)}

/* Abschnitte: Lasur statt Farbbloecke */
.abschnitt{padding-block:var(--gut);border-top:none}




main > .abschnitt.dunkel:nth-of-type(n){background:#4c5940;
  margin-block:clamp(1rem,3vw,2rem);border-radius:clamp(24px,4vw,44px)}
.abschnitt.dunkel{color:var(--weide-hell)}
.abschnitt h2{font-size:clamp(1.9rem,4vw,2.9rem);max-width:min(32rem,100%);margin-bottom:1.2rem}
.abschnitt h3{font-size:1.3rem;margin-bottom:.5rem}
.vorspann{max-width:58ch;margin:0 0 1rem;color:#43553b}
.abschnitt.dunkel .vorspann,.abschnitt.dunkel p{color:#dde5d2}
.abschnitt.dunkel h2,.abschnitt.dunkel h3{color:var(--weide-hell)}
.fliess p{max-width:66ch;color:#3c4d35;margin:0 0 .95rem}
.fliess > h3{font-size:1.6rem;margin-top:3rem;margin-bottom:1.1rem}

/* Wegweiser */
.wege{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.4rem;margin-top:2rem}
.weg{display:block;background:var(--rahm);border:1px solid rgba(38,54,31,.1);border-radius:var(--rund);padding:1.7rem;text-decoration:none;transition:transform .18s,border-color .18s}
.weg:hover{transform:translateY(-3px);border-color:var(--honig)}
.weg h3{font-size:1.35rem;margin-bottom:.5rem}
.weg p{margin:0;font-size:.95rem;color:#43553b}
.weg .pfeil{display:inline-block;margin-top:1rem;color:var(--honig);font-weight:700;font-size:.9rem}

/* Merkmale */
.merkmale{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:2.2rem 2.6rem;margin-top:3rem}
.merkmal p{margin:0;font-size:.97rem;color:#43553b}
.abschnitt.dunkel .merkmal p{color:#dde5d2}
.merkmal .zahl{font-family:var(--display);font-size:2.6rem;font-weight:700;color:var(--honig);line-height:1;display:block;margin-bottom:.7rem}
.abschnitt.dunkel .merkmal .zahl{color:var(--honig-moos)}

/* Tierkarten */
.tiere{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.6rem;margin-top:3rem}
.karte{background:linear-gradient(180deg,#fbf8ed 0%,#f5efe1 100%);color:var(--tief);border-radius:22px;overflow:hidden;border:1px solid rgba(38,54,31,.1)}
.karte-bild{aspect-ratio:4/3;background:var(--weide);display:flex;align-items:center;justify-content:center;color:var(--moos);font-size:.85rem;border-bottom:1px solid var(--linie)}
.karte-bild img{width:100%;height:100%;object-fit:cover}
.karte-kopf{padding:1.3rem 1.5rem 1rem;border-bottom:1px dashed var(--linie);display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.karte-kopf h3{font-size:1.6rem;margin:0}
.rolle{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--moos);white-space:nowrap}
.karte dl{margin:0;padding:1.1rem 1.5rem 1.3rem;display:grid;grid-template-columns:auto 1fr;gap:.5rem 1.3rem;font-size:.9rem}
.karte dt{color:var(--moos);font-weight:500}
.karte dd{margin:0;font-weight:700}
.karte dd.linie{color:var(--honig)}
.notiz{padding:0 1.5rem 1.4rem;font-size:.9rem;color:#43553b;margin:0}

/* Ablauf */
.ablauf{margin-top:3rem;border-top:1px solid rgba(191,205,180,.25)}
.abschnitt:not(.dunkel) .ablauf{border-color:var(--linie)}
.schritt{display:grid;grid-template-columns:9rem 1fr;gap:2rem;padding:1.5rem 0;border-bottom:1px solid rgba(191,205,180,.25);align-items:start}
.abschnitt:not(.dunkel) .schritt{border-color:var(--linie)}
@media (max-width:640px){.schritt{grid-template-columns:1fr;gap:.4rem}}
.wann{font-family:var(--display);font-size:1.05rem;font-weight:600;color:var(--honig)}
.abschnitt.dunkel .wann{color:var(--honig-moos)}
.schritt h3{font-size:1.15rem;margin-bottom:.35rem}
.schritt p{margin:0;font-size:.95rem;color:#43553b}
.abschnitt.dunkel .schritt p{color:#dde5d2}

/* Punkteliste */
.liste{list-style:none;padding:0;margin:1.7rem 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1.15rem 2.4rem}
.liste li{padding-left:1.9rem;position:relative;font-size:.97rem;color:#43553b}
.liste li::before{content:"";position:absolute;left:0;top:.34em;width:15px;height:15px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M14.6 1.6C6.2 1.4 1.8 5.4 1.8 10.6c0 1.1.3 2.1.8 3C4.9 9.6 8.2 7 12.3 5.9c-3.6 2-6.9 4.8-8.7 8.4.9.4 2 .6 3.1.6 5.2 0 8-4.8 7.9-13.3z' fill='%23b8791f'/%3E%3C/svg%3E") center/contain no-repeat}
.abschnitt.dunkel .liste li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M14.6 1.6C6.2 1.4 1.8 5.4 1.8 10.6c0 1.1.3 2.1.8 3C4.9 9.6 8.2 7 12.3 5.9c-3.6 2-6.9 4.8-8.7 8.4.9.4 2 .6 3.1.6 5.2 0 8-4.8 7.9-13.3z' fill='%23e0a94a'/%3E%3C/svg%3E")}
.liste strong{display:block;color:var(--tief);font-size:1.05rem;font-weight:700;margin-bottom:.15rem}

/* Nummerierte Schritte */
.schritte{list-style:none;counter-reset:s;padding:0;margin:1.6rem 0 0;max-width:66ch;display:grid;gap:1.05rem}
.schritte li{counter-increment:s;position:relative;padding-left:3.4rem;font-size:.97rem;color:#43553b}
.schritte li::before{content:counter(s);position:absolute;left:0;top:-.15em;width:2.3rem;height:2.3rem;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:var(--honig);color:#fff;font-family:var(--display);font-weight:700;font-size:1.15rem}
.schritte strong{display:block;color:var(--tief);font-size:1.05rem;margin-bottom:.15rem}
.abschnitt.dunkel .schritte li{color:#dde5d2}
.abschnitt.dunkel .schritte strong{color:var(--weide-hell)}

/* Checkliste */
.gruppe{margin-top:3rem}
.gruppe > h2{margin-bottom:1.1rem}
/* Gezeichneter Strich unter jedem Abschnittstitel. Nur direkte Kinder,
   damit Titel in Kaesten und Karten aussen vor bleiben. */
.abschnitt h2,.fliess > h3,.gruppe > h2{
  padding-bottom:1.1rem;max-width:min(32rem,100%);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8' preserveAspectRatio='none'%3E%3Cpath d='M0 5c10-4 20 4 30 0s20-4 30 0 20 4 30 0 20-4 30 0' fill='none' stroke='%2326361f' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") bottom left/100% 8px no-repeat}
.abschnitt.dunkel h2,.abschnitt.dunkel .fliess > h3,.abschnitt.dunkel .gruppe > h2{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8' preserveAspectRatio='none'%3E%3Cpath d='M0 5c10-4 20 4 30 0s20-4 30 0 20 4 30 0 20-4 30 0' fill='none' stroke='%23cfdcbe' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E")}
.punkte{list-style:none;margin:0;padding:0}
.punkte li{border-bottom:1px solid var(--linie);padding:1.1rem 0}
.punkte label{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start;cursor:pointer;font-size:1rem;font-weight:400;color:inherit;letter-spacing:0}
.punkte input{appearance:none;width:20px;height:20px;margin:.25rem 0 0;border:2px solid var(--moos);border-radius:3px;background:var(--rahm);cursor:pointer;flex:none;position:relative}
.punkte input:checked{background:var(--honig);border-color:var(--honig)}
.punkte input:checked::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(42deg)}
.punkte input:checked ~ .txt{opacity:.5;text-decoration:line-through}
.punkte .txt strong{display:block;font-weight:700;font-size:1.05rem}
.punkte .txt span{display:block;font-size:.93rem;color:#43553b;margin-top:.2rem}
.zaehler{margin-top:2.5rem;font-size:.9rem;color:var(--moos);display:flex;gap:1.5rem;align-items:center;flex-wrap:wrap}
.drucken{background:none;border:1px solid var(--linie);border-radius:999px;padding:.6rem 1.2rem;font-family:var(--body);font-weight:700;font-size:.85rem;cursor:pointer;color:inherit}
.drucken:hover{border-color:var(--honig)}

/* Hinweiskasten */
.kasten{background:linear-gradient(115deg,#f8f3e6 0%,#f4ebdf 100%);border-left:4px solid var(--honig);border-radius:0 20px 20px 0;padding:1.4rem 1.6rem;margin:1.8rem 0;max-width:66ch}
.kasten h3{font-size:1.15rem;margin-bottom:.4rem}
.kasten p{margin:0;font-size:.95rem;color:#43553b}
.kasten p + p{margin-top:.8rem}

/* Preise */
.preis-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.6rem;margin-top:2.8rem}
.preis{background:linear-gradient(180deg,#fbf8ed 0%,#f4eee0 100%);border:1px solid var(--linie);border-radius:20px;padding:1.8rem}
.preis .betrag{font-family:var(--display);font-size:2.3rem;font-weight:700;line-height:1;display:block;margin:.3rem 0 .8rem}
.preis p{margin:0;font-size:.95rem;color:#43553b}
.klein{font-size:.88rem;color:var(--moos);margin-top:2rem;max-width:64ch}

/* Wurfkacheln. Eine Kachel je Wurf, gleicher Bau wie die Tierkarten
   auf der Herdeseite. So bleibt es uebersichtlich, wenn weitere
   Wuerfe dazukommen. */
.wuerfe{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:1.6rem;margin-top:2rem;max-width:640px}
.karte.wurf .karte-bild{position:relative;display:block;padding:0}
.karte.wurf .diaschau{margin:0;max-width:none}
.karte.wurf .diaschau figure{margin:0;border:none;border-radius:0;background:none;
  height:100%;overflow:hidden}
.karte.wurf .diaschau img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover}
/* Die Bedienelemente liegen ueber dem Bild, damit die Kachel kompakt
   bleibt. Das Skript haengt sie ans Ende des Behaelters. */
.karte.wurf .dia-steuer{position:absolute;right:.6rem;bottom:.6rem;margin:0;
  gap:.4rem;padding:.3rem;border-radius:999px;background:rgba(250,246,234,.9);
  backdrop-filter:blur(4px);box-shadow:0 2px 8px rgba(38,54,31,.16)}
.karte.wurf .dia-steuer button{width:32px;height:32px;font-size:.95rem}
.karte.wurf .dia-zaehler{font-size:.82rem;padding-right:.3rem}
.karte.wurf .dia-punkte{display:none}

/* Der Status auf der Startseite verlinkt auf die Abgabetiere. */
.status a{color:inherit;text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:rgba(233,238,225,.5)}
.status a:hover{text-decoration-color:currentColor}

/* Diaschau: ein Bild aufs Mal, mit Pfeilen. Die Bedienelemente baut
   das Skript, damit ohne JavaScript keine toten Knoepfe herumstehen -
   dann sieht man einfach alle Bilder untereinander. */
.diaschau{margin:1.9rem 0 0;max-width:640px}
.diaschau figure{margin:0;border-radius:26px 16px 24px 18px;overflow:hidden;
  border:1px solid rgba(38,54,31,.08);background:linear-gradient(180deg,#fbf8ed,#f4eee0)}
.diaschau img{width:100%;aspect-ratio:4/3;object-fit:cover}
.diaschau figcaption{padding:.85rem 1.1rem;font-size:.92rem;color:var(--moos);font-style:italic}
.diaschau.bereit figure{display:none}
.diaschau.bereit figure.jetzt{display:block}
.dia-steuer{display:flex;align-items:center;gap:.8rem;margin-top:.9rem}
.dia-steuer button{width:40px;height:40px;flex:none;border:1px solid var(--linie);
  border-radius:50%;background:var(--rahm);color:var(--tief);cursor:pointer;
  font-family:var(--body);font-size:1.1rem;line-height:1}
.dia-steuer button:hover{background:var(--honig);border-color:var(--honig);color:#fff}
.dia-zaehler{font-family:var(--display);font-weight:600;font-size:.95rem;color:var(--moos)}
.dia-punkte{display:flex;gap:.4rem;margin-left:auto}
.dia-punkte span{width:8px;height:8px;border-radius:50%;background:rgba(38,54,31,.2)}
.dia-punkte span.jetzt{background:var(--honig)}
@media (max-width:520px){.dia-punkte{display:none}}

/* Logo auf der Kontaktseite */
.marke-gross{width:min(300px,70%);height:auto;margin:2.2rem 0 0}

/* Die Zeichnung auf der Rasseseite */
.abbildung.zeichnung{margin:0}
.abbildung.zeichnung img{width:100%;height:auto;aspect-ratio:auto}

/* Galerie */
.gitter{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1.1rem;margin-top:1rem}
.bild{background:linear-gradient(180deg,#fbf8ed,#f4eee0);
  border:1px solid rgba(38,54,31,.1);border-radius:20px;overflow:hidden;margin:0}
.oeffnen{display:block;width:100%;padding:0;border:none;background:none;cursor:zoom-in;line-height:0}
.oeffnen img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .25s,filter .25s}
.bild.hoch .oeffnen img{aspect-ratio:3/4}
.oeffnen:hover img{transform:scale(1.04);filter:brightness(1.05)}

/* Lupe: ein Bild gross */
.lupe{position:fixed;inset:0;z-index:100;background:rgba(16,24,13,.94);
  display:flex;align-items:center;justify-content:center;padding:clamp(1rem,4vw,3rem)}
.lupe[hidden]{display:none}
body.fixiert{overflow:hidden}
.lupe img{max-width:100%;max-height:calc(100vh - 9rem);object-fit:contain;border-radius:14px}
.lupe-zu{position:absolute;top:.8rem;right:1rem;z-index:3;width:46px;height:46px;border:none;
  border-radius:50%;cursor:pointer;background:rgba(233,238,225,.16);color:var(--weide-hell);
  font-size:1.7rem;line-height:1;font-family:var(--body);backdrop-filter:blur(6px)}
.lupe-zu:hover{background:var(--honig)}
.pfeil{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:52px;height:52px;border:none;border-radius:50%;cursor:pointer;
  background:rgba(233,238,225,.16);color:var(--weide-hell);backdrop-filter:blur(6px);
  font-size:1.5rem;line-height:1;font-family:var(--body)}
.pfeil:hover{background:var(--honig)}
.pfeil.zurueck{left:.9rem}
.pfeil.vor{right:.9rem}
.lupe-fuss{position:absolute;left:0;right:0;bottom:1.2rem;text-align:center}
.lupe-fuss span{font-family:var(--display);font-weight:600;font-size:1rem;color:var(--honig-hell)}
@media (max-width:640px){
  .gitter{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.7rem}
  .bild{border-radius:14px}
  .pfeil{width:44px;height:44px}
}

/* Links */
.linkliste{list-style:none;padding:0;margin:2.6rem 0 0;display:grid;gap:1.3rem;max-width:70ch}
.linkliste li{border-bottom:1px solid var(--linie);padding-bottom:1.3rem}
.linkliste a{font-family:var(--display);font-size:1.25rem;font-weight:600;text-decoration:none;border-bottom:2px solid var(--honig)}
.linkliste p{margin:.4rem 0 0;font-size:.95rem;color:#43553b}

/* Formular */
.formular{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:2.6rem;max-width:720px}
.feld{display:flex;flex-direction:column;gap:.4rem}
.feld.breit{grid-column:1/-1}
@media (max-width:620px){.formular{grid-template-columns:1fr}.feld{grid-column:1/-1}}
label{font-size:.82rem;font-weight:700;letter-spacing:.04em;color:var(--moos)}
input,textarea,select{font-family:var(--body);font-size:1rem;color:var(--tief);background:#fbf8ed;border:1px solid rgba(38,54,31,.22);border-radius:14px;padding:.75rem .9rem;width:100%}
textarea{min-height:120px;resize:vertical}
input:focus,textarea:focus,select:focus{border-color:var(--honig);outline:none;box-shadow:0 0 0 3px rgba(184,121,31,.18)}
button[type=submit]{font-family:var(--body);font-weight:700;font-size:.95rem;color:#fff;background:var(--honig);border:none;border-radius:999px;padding:.95rem 2.2rem;cursor:pointer;justify-self:start}
button[type=submit]:hover{background:#9d660f}
.honigtopf{position:absolute;left:-9999px}
.danke{grid-column:1/-1;background:var(--tief);color:var(--weide-hell);border-radius:20px;padding:1.8rem;display:none}
.danke.sichtbar{display:block}
.warnung{display:none;grid-column:1/-1;margin:.4rem 0 0;padding:.9rem 1.1rem;border-left:4px solid #a8443a;background:#f8ece6;border-radius:0 4px 4px 0;font-size:.95rem}
.danke h3{color:var(--weide-hell);font-size:1.4rem;margin-bottom:.5rem}
.danke p{margin:0;font-size:.95rem;color:#bfcdb4}

/* Fuss */
.fuss{position:relative;background:var(--tief);color:#bfcdb4;padding-block:3rem 2rem;
  font-size:.9rem;border-radius:clamp(24px,4vw,44px) clamp(24px,4vw,44px) 0 0;
  margin-top:clamp(1.5rem,4vw,3rem)}
.fuss::before{content:"";display:none;position:absolute;left:0;right:0;top:-11px;height:12px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 12'%3E%3Cpath d='M0 12V8c10-6 20 4 30 0s20 4 30 0v4z' fill='%2326361f'/%3E%3C/svg%3E") repeat-x bottom left/60px 12px}
.fuss-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:2rem}
.fuss h4{font-family:var(--body);font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--honig-hell);margin:0 0 .9rem}
.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.fuss a{text-decoration:none}
.fuss a:hover{color:var(--weide-hell);text-decoration:underline}
.fuss-unten{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid rgba(191,205,180,.2);font-size:.82rem;display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:space-between}

/* Druck */
@media print{
  .kopf,.fuss,.zaehler,.titel .lead,.knopf,.abbildung,.lupe{display:none}
  body{background:#fff;font-size:11pt}
  .punkte input{-webkit-print-color-adjust:exact}
  .punkte input:checked ~ .txt{opacity:1;text-decoration:none}
  .gruppe{break-inside:avoid}
  .abschnitt{padding-block:1rem;border:none}
}