/* Selbst gehostete Schriften (statt Google Fonts – keine Übertragung der Besucher-IP an Google).
 * Lizenz: SIL Open Font License 1.1 (Archivo, Newsreader, Space Mono). Archivo/Newsreader sind variable Schriften:
 * eine Datei deckt alle Gewichte ab, daher je ein @font-face pro Zeichenbereich (latin wird bei Bedarf vorab geladen, siehe kopf.php). */
@font-face{font-family:'Archivo';font-style:normal;font-weight:500 900;font-stretch:100%;font-display:swap;src:url(fonts/archivo-latin-ext-normal-0.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500 900;font-stretch:100%;font-display:swap;src:url(fonts/archivo-latin-normal-1.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/newsreader-latin-ext-italic-2.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/newsreader-latin-italic-3.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 500;font-display:swap;src:url(fonts/newsreader-latin-ext-normal-4.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 500;font-display:swap;src:url(fonts/newsreader-latin-normal-5.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/space-mono-latin-ext-normal-6.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/space-mono-latin-normal-7.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/space-mono-latin-ext-normal-8.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/space-mono-latin-normal-9.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
  --ink:#15120d;          /* warmes Schwarz  */
  --asphalt:#211c15;      /* dunkle Fläche   */
  --asphalt-2:#2c261d;
  --gold:#f8d500;         /* Markengelb (wie das Logo 2026) */
  --gold-deep:#ad8a00;
  --paper:#f3ecdf;        /* warmes Off-White*/
  --card:#fbf7ee;
  --text:#26221b;         /* Text auf hell   */
  --muted:#6f665a;
  --line:#e0d6c4;
  --on-gold:#15120d;      /* Text auf Gold-Flächen (bleibt immer dunkel) */
  --gold-dark:#957200;    /* Gold für kleine Schrift auf hellem Grund */
  --surface:#fff;         /* Eingabefelder, Aufklappfelder, Kalenderzellen */
  --surface-hl:#fdf6e6;   /* ausgewählt / Maus darüber */
  --surface-soft:#fffdf7;
  --tl-past:#c9bfa9;      /* vergangene Termine (Punkt) */
  --req:#b23a2a;          /* Pflichtfeld-Stern */
  --err-bg:#fbe7e5; --err-line:#e5b3ad; --err-text:#8f2a20;
  --ok-bg:#eaf6ec;  --ok-line:#bfe3c6;  --ok-text:#1f5c2e;
  color-scheme:light;
  --maxw:1180px;
  --pad:clamp(20px,5vw,64px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--text);
  font-family:"Newsreader",Georgia,serif;font-size:1.075rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.nav a,.brand,.btn,.eyebrow{font-family:"Archivo",system-ui,sans-serif}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}

/* ---------- Timing-Strip Eyebrow (Signature) ---------- */
.eyebrow{
  font-family:"Space Mono",monospace;font-weight:700;
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-deep);display:inline-flex;align-items:center;gap:.6em;margin:0 0 .9rem;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--gold);display:inline-block}
.on-dark .eyebrow{color:var(--gold)}

/* ---------- Top utility bar ---------- */
.utility{background:#0e0b07;color:#c9c1b2;font-family:"Space Mono",monospace;font-size:.78rem}
.utility .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-block:.5rem;flex-wrap:wrap}
.utility a{color:#c9c1b2;text-decoration:none}
.utility a:hover{color:var(--gold)}
.utility .u-contact{display:flex;gap:1.4rem;flex-wrap:wrap}
.utility .u-social{display:flex;gap:.9rem;align-items:center}
.utility .u-ico{display:none}   /* Symbole nur in der kompakten Handy-Leiste von Design 2 */
/* Hell/Dunkel-Umschalter (Kontaktleiste oben) */
.theme-toggle{display:inline-flex;align-items:center;gap:.35rem;background:none;border:1px solid #3a3122;color:#c9c1b2;
  font:inherit;border-radius:999px;padding:.2rem .65rem;cursor:pointer;line-height:1.2;min-height:30px}
.theme-toggle:hover,.theme-toggle:focus-visible{color:var(--gold);border-color:var(--gold)}
.theme-toggle svg{width:14px;height:14px;flex-shrink:0}
.theme-toggle span{display:inline-flex;align-items:center;gap:.35rem}
.theme-toggle .ico-sun{display:none}
[data-theme-now="dark"] .theme-toggle .ico-sun{display:inline-flex}
[data-theme-now="dark"] .theme-toggle .ico-moon{display:none}

/* ---------- Header / Nav ---------- */
.site-head{position:sticky;top:0;z-index:50;background:rgba(21,18,13,.96);backdrop-filter:blur(8px);
  border-bottom:1px solid #362e21}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.7rem}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:#fff}
.brand{flex-shrink:0}
.brand img{height:40px;width:auto;display:block}
.brand b{font-weight:900;font-size:1.05rem;letter-spacing:.02em;line-height:1}
.brand span{display:block;font-family:"Space Mono",monospace;font-size:.6rem;letter-spacing:.28em;color:var(--gold);text-transform:uppercase}
.nav{display:flex;align-items:center;gap:.2rem}
.nav a{color:#e9e3d6;text-decoration:none;font-weight:600;font-size:.86rem;letter-spacing:.02em;
  padding:.55rem .7rem;border-radius:8px;position:relative;text-align:left;display:inline-block}
.nav a:hover{color:#fff}
.nav a.active{color:var(--on-gold);background:var(--gold)}
/* Breite Bildschirme: Menüpunkte einzeilig halten (sonst "Legenden der / Straße" zweizeilig).
   Darunter dürfen lange Punkte weiterhin umbrechen, bis das Handy-Menü greift (920px). */
@media (min-width:1400px){.nav a{white-space:nowrap}}
.has-sub{position:relative}
.submenu{position:absolute;top:100%;left:0;margin-top:6px;background:#1c1811;border:1px solid #3a3122;
  border-radius:10px;padding:.4rem;min-width:210px;display:none;box-shadow:0 18px 40px rgba(0,0,0,.4)}
.submenu::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px}
.has-sub:hover .submenu,.has-sub:focus-within .submenu{display:block}
.submenu a{display:block;padding:.5rem .7rem}
.btn-join{background:var(--gold);color:var(--on-gold)!important;font-weight:800;padding:.55rem 1rem;border-radius:999px;margin-left:.4rem}
.btn-join:hover{background:#ffe033}
.burger{display:none;background:none;border:1px solid #4a3f2c;color:#fff;border-radius:8px;padding:.5rem .6rem;cursor:pointer}
.burger span{display:block;width:20px;height:2px;background:#fff;margin:4px 0}
.nav-close{display:none}
.nav-head{display:none}
.nav-backdrop{display:none}

/* ---------- Views ---------- */
.view[hidden]{display:none}
main{min-height:60vh}

/* ---------- Hero ---------- */
.hero{position:relative;background:#0e0b07;color:#f4efe4;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:#0e0b07 center/cover no-repeat;opacity:.42;filter:saturate(.9)}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,#0e0b07 12%,rgba(14,11,7,.55) 55%,rgba(14,11,7,.2))}
.hero .wrap{position:relative;z-index:2;padding-block:clamp(64px,12vw,132px);max-width:920px}
.hero h1{font-weight:900;font-size:clamp(2.6rem,7vw,5.2rem);line-height:.98;margin:.2rem 0 1rem;
  letter-spacing:-.01em;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero p.lead{font-size:clamp(1.05rem,2vw,1.3rem);max-width:56ch;color:#e2dccd}
.hero-cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.8rem}
.btn{display:inline-block;text-decoration:none;font-weight:800;border-radius:999px;padding:.8rem 1.5rem;
  font-size:.9rem;letter-spacing:.02em;transition:transform .15s ease}
.btn:hover{transform:translateY(-2px)}
.btn-gold{background:var(--gold);color:var(--on-gold)}
.btn-ghost{border:1.5px solid #6a5c40;color:#f4efe4}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}

/* ---------- Sections ---------- */
.section{padding-block:clamp(48px,8vw,92px)}
.section.dark{background:var(--asphalt);color:#efe8da}
.section.dark.on-dark h2{color:#fff}
h2,.page-head h1,.prose>h1{font-weight:800;font-size:clamp(1.7rem,3.6vw,2.7rem);line-height:1.05;margin:0 0 1rem;letter-spacing:-.01em}
h3{font-weight:700;font-size:1.3rem;margin:2rem 0 .6rem}
.lede{font-size:1.2rem;max-width:70ch}
.prose p{max-width:72ch;margin:0 0 1.1rem}
.prose a{color:var(--gold-deep);text-decoration:underline;text-underline-offset:3px}
.on-dark .prose a{color:var(--gold)}
/* Buttons innerhalb von Fließtext (.prose) sollen wie Buttons aussehen, nicht wie normale Textlinks */
.prose a.btn{text-decoration:none}
.prose a.btn-gold{color:var(--on-gold)}
.prose a.btn-ghost{color:#f4efe4}
.prose a.btn-nf{border:1.5px solid var(--line);color:var(--ink)}   /* 404-Seite: weitere Links */
.prose strong{font-family:"Archivo",sans-serif;font-weight:700}
.page-head{border-bottom:1px solid var(--line);padding-bottom:1.4rem;margin-bottom:2rem}

/* ---------- Aktuelles cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.4rem;margin-top:2rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:transform .18s ease,box-shadow .18s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(30,22,8,.14)}
.card .thumb{aspect-ratio:16/10;background:linear-gradient(135deg,var(--asphalt),var(--gold-deep));overflow:hidden}
.card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.card:hover .thumb img{transform:scale(1.05)}
.card .body{padding:1.3rem 1.3rem 1.5rem}
.card h3{margin:.2rem 0 .5rem;font-size:1.18rem;color:var(--ink)}
.card p{margin:0;color:var(--muted);font-size:.98rem;line-height:1.55}
.card .go{margin-top:.9rem;font-family:"Space Mono",monospace;font-size:.75rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-deep);display:inline-flex;align-items:center;gap:.4em}
.card:hover .go{gap:.7em}

/* ---------- Editorial media ---------- */
.figure{border-radius:16px;overflow:hidden;border:1px solid var(--line);margin:1.5rem 0;background:var(--asphalt)}
.figure img{width:100%;object-fit:cover}
.on-dark .figure{border-color:#3a3122}

/* ---------- Termine Timeline (Signature) ---------- */
.timeline{list-style:none;margin:2rem 0 0;padding:0;position:relative}
.timeline::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:linear-gradient(var(--gold),transparent)}
.tl-item{position:relative;padding:0 0 1.9rem 2.4rem}
.tl-item::before{content:"";position:absolute;left:3px;top:6px;width:14px;height:14px;border-radius:50%;
  background:var(--gold);border:3px solid var(--paper);box-shadow:0 0 0 2px var(--gold)}
.tl-date{font-family:"Space Mono",monospace;font-weight:700;font-size:.82rem;color:var(--gold-deep);
  letter-spacing:.03em}
.tl-title{font-family:"Archivo",sans-serif;font-weight:700;font-size:1.15rem;margin:.15rem 0 .1rem}
.tl-place{color:var(--muted);font-size:.95rem}
.tl-item.note .tl-title{color:var(--muted)}
.tl-item.past{opacity:.6}
.tl-item.past::before{background:var(--tl-past);box-shadow:0 0 0 2px var(--tl-past)}
.tl-past{display:inline-block;margin-left:.45rem;font-family:"Space Mono",monospace;font-weight:700;
  font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:.05rem .5rem;vertical-align:middle}

/* ---------- Kontakte ---------- */
.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;margin-top:1.5rem}
.person{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1.2rem}
.person .role{font-family:"Space Mono",monospace;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep)}
.person .name{font-family:"Archivo",sans-serif;font-weight:700;font-size:1.12rem;margin:.35rem 0 .3rem}
.person .tel{font-family:"Space Mono",monospace;font-size:.86rem;color:var(--text);text-decoration:none}
.person .tel:hover{color:var(--gold-deep)}
.person .mail{display:block;font-family:"Space Mono",monospace;font-size:.82rem;color:var(--gold-deep);
  text-decoration:none;margin-top:.15rem;word-break:break-word}
.person .mail:hover{text-decoration:underline}
/* Kontakte: „Kontakt speichern“ (vCard) – gleiches Etikett wie „In Kalender“ bei den Terminen */
.person{display:flex;flex-direction:column;align-items:flex-start}
.person .vcard-save{display:inline-flex;align-items:center;gap:.35rem;margin-top:auto;padding:.4rem .8rem;min-height:36px;
  font-family:"Space Mono",monospace;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.2;
  color:var(--gold-dark);border:1px solid currentColor;border-radius:999px;text-decoration:none}
.person .vcard-save:hover,.person .vcard-save:focus{background:var(--gold);color:var(--on-gold);border-color:var(--gold)}
.person>:has(+.vcard-save){margin-bottom:.9rem}   /* Abstand zum Knopf; Knopf sitzt unten, auch bei ungleich hohen Karten */
.vcard-hint{font-size:.9rem;color:var(--muted);margin:.4rem 0 0}
.groupline{font-family:"Space Mono",monospace;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin:2.4rem 0 .2rem;border-top:1px solid var(--line);padding-top:1.4rem}

/* ---------- Lists / callouts ---------- */
.linklist{list-style:none;padding:0;margin:1rem 0}
.linklist li{border-bottom:1px solid var(--line);padding:.75rem 0}
.linklist a{color:var(--gold-deep);text-decoration:none;font-weight:600}
.linklist a:hover{text-decoration:underline}
.callout{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--gold);
  border-radius:0 12px 12px 0;padding:1.1rem 1.3rem;margin:1.5rem 0;color:var(--muted);font-size:.98rem}
.on-dark .callout{background:var(--asphalt-2);border-color:#3a3122;color:#cabfa9}

/* ---------- Footer ---------- */
.site-foot{background:#0e0b07;color:#c9c1b2;padding-block:3rem 2rem}
.site-foot .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem}
.site-foot h4{font-family:"Archivo",sans-serif;color:#fff;font-size:.8rem;letter-spacing:.16em;
  text-transform:uppercase;margin:0 0 1rem}
.site-foot a{color:#c9c1b2;text-decoration:none;display:block;padding:.2rem 0}
.site-foot a:hover{color:var(--gold)}
.foot-brand b{font-family:"Archivo",sans-serif;font-weight:900;color:#fff;font-size:1.3rem}
.foot-brand p{max-width:34ch;font-size:.95rem;color:#a89e8d}
.foot-addr{color:#a89e8d;font-size:.9rem;margin-top:.6rem}
.foot-bottom{border-top:1px solid #2a2318;margin-top:2.4rem;padding-top:1.4rem;
  font-family:"Space Mono",monospace;font-size:.72rem;color:#8c8373;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem}

/* ---------- Focus / a11y ---------- */
a:focus-visible,button:focus-visible,.btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px}
.skip:focus{left:8px;top:8px;z-index:100;background:var(--gold);color:#000;padding:.6rem 1rem;border-radius:8px}

/* ---------- Responsive ---------- */
/* Handy-Menü (Burger) bis 1240px: darunter passen die 8 Menüpunkte nicht mehr sauber nebeneinander */
@media (max-width:1240px){
  .burger{display:block}
  /* backdrop-filter macht .site-head sonst zum Bezugsrahmen für das
     fixierte Menü – dann klappt die Leiste auf Kopfzeilenhöhe zusammen. */
  .site-head{backdrop-filter:none;-webkit-backdrop-filter:none}
  .nav{position:fixed;top:0;right:0;bottom:0;left:auto;z-index:60;
    width:min(84vw,340px);height:100vh;height:100dvh;background:#15120d;flex-direction:column;
    align-items:stretch;gap:.1rem;padding:1rem 1rem 2rem;transform:translateX(100%);transition:transform .25s ease;
    border-left:1px solid #362e21;overflow-y:auto}
  .nav.open{transform:translateX(0)}
  .nav a{padding:.85rem .8rem;font-size:1rem}
  .nav-head{display:flex;align-items:center;justify-content:space-between;
    margin:0 -.2rem .7rem;padding:.2rem .1rem .8rem;border-bottom:1px solid #362e21}
  .nav-head-label{color:#b8ae9c;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase}
  .nav-close{display:grid;place-items:center;flex:0 0 auto;width:40px;height:40px;
    background:none;border:1px solid #4a3f2c;color:#fff;border-radius:8px;font-size:1.25rem;line-height:1;cursor:pointer}
  .nav-close:hover{border-color:var(--gold);color:var(--gold)}
  .nav-backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:55}
  .nav-backdrop[hidden]{display:none}
  body.nav-locked{overflow:hidden}
  .submenu{position:static;display:block;background:transparent;border:none;box-shadow:none;padding:.1rem 0 .3rem 1rem}
  .submenu::before{display:none}
  .submenu a{color:#b8ae9c}
  .btn-join{margin:.6rem 0 0}
  .site-foot .cols{grid-template-columns:1fr;gap:1.6rem}
}

/* ---------- Termine: Jahres-Gruppen (immer sichtbar, nicht klappbar) ---------- */
.tl-group{border-bottom:1px solid var(--line)}
.tl-group:last-of-type{border-bottom:0}
.tl-year{list-style:none;display:flex;align-items:center;gap:.7rem;padding:1rem 0;margin:0}
.tl-year span{display:inline-block;font-family:"Archivo",sans-serif;font-weight:800;font-size:1.05rem;
  letter-spacing:.04em;color:var(--on-gold);background:var(--gold);padding:.2rem .8rem;border-radius:999px}
.tl-group .timeline{margin:.1rem 0 .4rem;padding-bottom:.6rem}


/* ---------- Bewertungs-/Feedback-Formular ---------- */
.fb-wrap{max-width:680px}
.fb-intro{font-size:1.05rem;color:var(--text);margin:.4rem 0 1.4rem}
.fb-reqnote{font-size:.85rem;margin:0 0 1.2rem}
.fb-req{color:var(--req);font-weight:700}
.fb-form{margin-top:.4rem}
.fb-q{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1.1rem 1.2rem;margin-bottom:1rem}
.fb-q-label{font-family:"Archivo",sans-serif;font-weight:700;font-size:1.02rem;margin-bottom:.7rem}
.fb-form textarea,.fb-form input[type=text]{width:100%;border:1px solid var(--line);border-radius:8px;
  padding:.7rem .8rem;font:inherit;font-size:1rem;background:var(--surface);color:var(--text)}
.fb-form textarea:focus,.fb-form input[type=text]:focus{outline:2px solid var(--gold);border-color:var(--gold)}
/* Sternchen-/Punkte-Bewertung 1–5 */
.fb-rating{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.fb-rating input{position:absolute;opacity:0;width:0;height:0}
.fb-rating label{display:grid;place-items:center;width:48px;height:48px;border:1px solid var(--line);
  border-radius:10px;font-family:"Archivo",sans-serif;font-weight:700;font-size:1.1rem;cursor:pointer;
  background:var(--surface);transition:all .12s ease}
.fb-rating label:hover{border-color:var(--gold-deep)}
.fb-rating input:checked + label{background:var(--gold);border-color:var(--gold-deep);color:var(--on-gold)}
.fb-rating input:focus-visible + label{outline:2px solid var(--gold-deep);outline-offset:2px}
.fb-rating-hint{width:100%;font-size:.8rem;margin-top:.1rem}
.fb-choice{display:flex;flex-direction:column;gap:.5rem}
.fb-choice-opt{display:flex;align-items:center;gap:.5rem;font-size:1rem;cursor:pointer}
.fb-actions{margin-top:1.2rem}
.fb-thanks{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--gold);
  border-radius:0 12px 12px 0;padding:1.4rem 1.4rem}
.fb-thanks p{margin:.3rem 0}
.fb-err{border-color:var(--err-line);background:var(--err-bg);color:var(--err-text)}
.fb-err div{margin:.1rem 0}
/* Honeypot (Spam-Schutz) – für Menschen unsichtbar */
.fb-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Mitglieds-/Beitrittsformular ---------- */
.mform,.mform-wrap .fb-thanks,.mform-wrap .fb-err,.mform-reqnote{max-width:720px}
.mform{margin-top:1.6rem;accent-color:var(--gold-deep)}
.mform-sec{border:1px solid var(--line);border-radius:16px;background:var(--card);
  padding:1.5rem 1.6rem;margin:0 0 1.3rem;box-shadow:0 1px 0 rgba(0,0,0,.02)}
.mform-sec legend{font-family:"Space Mono",monospace;font-weight:700;font-size:.72rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);
  display:inline-flex;align-items:center;gap:.6em;padding:0 .4rem}
.mform-sec legend::before{content:"";width:22px;height:2px;background:var(--gold);display:inline-block}
.mform label{display:block;margin:0 0 1rem}
.mform-sec > label:last-child{margin-bottom:0}
.mform label,.mform-label{font-family:"Archivo",sans-serif;font-weight:600;font-size:.82rem;
  letter-spacing:.02em;color:var(--muted)}
.mform-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 1.1rem}
.mform input[type=text],.mform input[type=tel],.mform input[type=email],
.mform input[type=date],.mform textarea{display:block;width:100%;margin-top:.4rem;
  border:1px solid var(--line);border-radius:10px;padding:.7rem .8rem;
  font-family:"Newsreader",Georgia,serif;font-size:1.02rem;background:var(--surface);color:var(--text);
  transition:border-color .15s,box-shadow .15s}
.mform input:focus,.mform textarea:focus{outline:none;border-color:var(--gold-deep);
  box-shadow:0 0 0 3px rgba(248,213,0,.28)}
.mform textarea{resize:vertical}
.mform-label{display:block;margin-bottom:.1rem}
.mform-radios{display:flex;flex-wrap:wrap;gap:.5rem .8rem;margin-top:.5rem}
.mform-opt{display:inline-flex;align-items:center;gap:.5rem;font-family:"Newsreader",Georgia,serif;
  font-size:1rem;font-weight:400;letter-spacing:0;color:var(--text);cursor:pointer;margin:0;
  border:1px solid var(--line);border-radius:999px;padding:.35rem .9rem;background:var(--surface)}
.mform-opt:has(input:checked){border-color:var(--gold-deep);background:var(--surface-hl)}
.mform-opt input{width:auto;margin:0}
/* Auswählbare Mitgliedschafts-Karten */
.mform-choice{display:flex;align-items:flex-start;gap:.7rem;border:1.5px solid var(--line);
  border-radius:12px;padding:1rem 1.1rem;margin:0 0 .75rem;cursor:pointer;background:var(--surface);
  transition:border-color .15s,background .15s,box-shadow .15s}
.mform-choice:hover{border-color:var(--gold)}
.mform-choice:has(input:checked){border-color:var(--gold-deep);background:var(--surface-hl);
  box-shadow:0 0 0 3px rgba(248,213,0,.18)}
.mform-choice input{width:auto;margin:.25rem 0 0;flex:0 0 auto;transform:scale(1.15)}
.mform-choice span{font-family:"Newsreader",Georgia,serif;font-weight:400;font-size:.98rem;
  line-height:1.5;letter-spacing:0;color:var(--text)}
.mform-choice strong{font-family:"Archivo",sans-serif;font-weight:700}
.mform-reveal{border-left:3px solid var(--gold);background:var(--surface-soft);border-radius:0 10px 10px 0;
  padding:1rem 1.1rem;margin:-.1rem 0 1rem .3rem}
.mform-reveal[hidden]{display:none}
.mform .field-hint{font-family:"Newsreader",Georgia,serif;font-size:.9rem;color:var(--muted);
  font-weight:400;letter-spacing:0;margin:.4rem 0 0}
.mform-privacy{display:flex;align-items:flex-start;gap:.7rem;font-family:"Newsreader",Georgia,serif;
  font-weight:400;font-size:1rem;letter-spacing:0;color:var(--text);
  border:1px solid var(--line);border-radius:12px;background:var(--card);padding:1rem 1.1rem;margin:0 0 1.2rem}
.mform-privacy input{width:auto;margin:.2rem 0 0;flex:0 0 auto;transform:scale(1.2)}
.mform .fb-actions{margin-top:.4rem}
.mform .btn-gold{font-size:1rem;padding:.85rem 2rem;border-radius:999px;
  box-shadow:0 6px 18px rgba(248,213,0,.35)}
.mform .btn-gold:hover{background:var(--gold-deep)}
.mform-reqnote{font-family:"Space Mono",monospace;font-size:.78rem;letter-spacing:.03em;margin:0 0 1.2rem}
@media(max-width:640px){.mform-grid{grid-template-columns:1fr;gap:0}}


/* ---------- Fotoalbum-Beiträge ---------- */
.albums{margin-top:1.6rem}
.album-group .albums{margin-top:.2rem}
.album-date{font-family:"Space Mono",monospace;font-weight:700;font-size:.8rem;letter-spacing:.03em;
  color:var(--gold-deep);text-transform:uppercase;margin-bottom:.25rem}
.album{display:flex;gap:1.4rem;padding:1.6rem 0;border-top:1px solid var(--line)}
.album:first-child{border-top:0;padding-top:.6rem}
.album-thumb{flex:0 0 160px}
.album-thumb img{width:160px;height:120px;object-fit:cover;border-radius:10px;display:block}
.album.no-img .album-thumb{display:none}
.album-body{flex:1;min-width:0}
.album-body h3{font-family:"Archivo",sans-serif;font-weight:800;font-size:1.2rem;margin:0 0 .55rem;color:var(--ink)}
.album-text{color:var(--text);line-height:1.65;overflow-wrap:anywhere}
.album-link{margin-top:.8rem;color:var(--muted);font-size:.95rem}
.album-link a{color:var(--gold-deep);word-break:break-word}
@media (max-width:640px){
  .album{flex-direction:column;gap:.8rem}
  .album-thumb{flex:none}
  .album-thumb img{width:100%;height:auto;max-height:220px}
}

/* ---------- Öffentliche Verleih-/Inventarseite ---------- */
.inv-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;margin:1.5rem 0 2.2rem;align-items:stretch}
.inv-card{display:flex;gap:.7rem;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1rem}
.inv-dot{flex:0 0 auto;width:16px;height:16px;border-radius:50%;margin-top:.25rem}
.inv-card-body{display:flex;flex-direction:column;flex:1 1 auto}
.inv-card-body h3{margin:0 0 .3rem;font-size:1.05rem}
.inv-desc{margin:0 0 .4rem;color:var(--muted);font-size:.9rem;min-height:1.2em}
.inv-desc:empty{margin:0 0 .4rem}
.inv-qty{margin:auto 0 0;font-weight:600;font-size:.9rem}

.inv-cal{margin:1rem 0 2rem}
.inv-cal-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.7rem}
.inv-cal-head strong{font-size:1.15rem}
.inv-nav{text-decoration:none;border:1px solid var(--line);border-radius:8px;padding:.25rem .7rem;
  color:var(--ink);background:var(--card);font-weight:700}
.inv-nav:hover{border-color:var(--gold);background:var(--surface-hl)}
.inv-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.inv-wd{text-align:center;font-weight:700;font-size:.8rem;color:var(--muted);padding:.2rem 0}
.inv-cell{min-height:74px;border:1px solid var(--line);border-radius:8px;padding:.3rem;background:var(--surface);
  display:flex;flex-direction:column;gap:3px}
.inv-cell.inv-empty{background:transparent;border:none}
.inv-cell.has-res{background:var(--card)}
.inv-day{font-size:.78rem;color:var(--muted);font-weight:700}
.inv-chip{display:block;font-size:.72rem;line-height:1.25;border-radius:5px;padding:1px 5px;
  white-space:normal;overflow-wrap:anywhere;word-break:break-word}
.inv-cal-note{margin:.7rem 0 0;color:var(--muted);font-size:.85rem;font-style:italic}
.inv-cal.is-loading{opacity:.5;pointer-events:none;transition:opacity .15s}

/* Handy-Listenansicht (statt Gitter) */
.inv-list{display:none}
.inv-list-row{display:flex;gap:.6rem;padding:.55rem 0;border-bottom:1px solid var(--line)}
.inv-list-row:last-child{border-bottom:none}
.inv-list-date{flex:0 0 5.4rem;font-weight:700;font-size:.9rem}
.inv-list-items{display:flex;flex-wrap:wrap;gap:4px;flex:1 1 auto}
.inv-list-items .inv-chip{display:inline-block;white-space:normal}
.inv-list-empty{color:var(--muted);font-style:italic;margin:.6rem 0}

/* Auf schmalen Geräten (Handy hoch- UND querformat, kleine Fenster) Liste statt Gitter */
@media(max-width:960px){
  .inv-grid{display:none}
  .inv-list{display:block}
  .inv-cal-head strong{font-size:1.05rem}
  .inv-nav{padding:.35rem 1rem;font-size:1.1rem}
}



/* ============================================================
   Startseiten-Animationen (dezent, modern)
   – respektiert prefers-reduced-motion (Barrierefreiheit)
   ============================================================ */
/* Beim Scrollen sanft einblenden */
.reveal{opacity:0;transform:translateY(24px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* Hero: gestaffeltes Einblenden beim Laden */
@keyframes heroUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.hero .eyebrow,.hero h1,.hero .lead,.hero-cta{animation:heroUp .85s cubic-bezier(.2,.7,.2,1) both}
.hero h1{animation-delay:.10s}
.hero .lead{animation-delay:.22s}
.hero-cta{animation-delay:.34s}
/* Hintergrund langsam heranzoomen */
@keyframes heroZoom{from{transform:scale(1.07)}to{transform:none}}
.hero-bg{animation:heroZoom 1.8s cubic-bezier(.2,.7,.2,1) both}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero .eyebrow,.hero h1,.hero .lead,.hero-cta,.hero-bg{animation:none}
}

/* ---------- Öffentliches Reservierungs-Anfrageformular ---------- */
.inv-reserve{margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.inv-reserve h3{font-family:"Archivo",sans-serif;font-weight:800;font-size:1.3rem;margin:0 0 1rem}
.inv-form{max-width:640px}
.inv-form label{display:block;font-weight:600;font-size:.92rem;margin-bottom:.9rem}
.inv-form input,.inv-form select{display:block;width:100%;margin-top:.3rem;padding:.6rem .7rem;
  border:1px solid var(--line);border-radius:9px;background:var(--surface);font:inherit;font-weight:400}
.inv-form input:focus,.inv-form select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(248,213,0,.25)}
.inv-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 1.1rem}
@media(max-width:560px){.inv-form-grid{grid-template-columns:1fr}}
.inv-form-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.inv-form-captcha strong{color:var(--gold-deep)}
.inv-form-hint{color:var(--muted);font-size:.85rem;margin:.2rem 0 1rem}
.inv-note{border-radius:10px;padding:.8rem 1rem;margin-bottom:1.2rem}
.inv-note-ok{background:var(--ok-bg);border:1px solid var(--ok-line);color:var(--ok-text)}
.inv-note-err{background:var(--err-bg);border:1px solid var(--err-line);color:var(--err-text)}
.inv-note ul{margin:.4rem 0 0;padding-left:1.1rem}

.cards-more{margin-top:1.6rem;text-align:center}

.card--extra{display:none}

/* Sanftes Einblenden des Seiteninhalts beim Laden (alle öffentlichen Seiten
   außer der Startseite, die ihre eigene Hero-Animation hat) */
.page-enter{animation:pageEnter .6s cubic-bezier(.2,.7,.2,1) both}
@keyframes pageEnter{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.page-enter{animation:none}}
/* Termine: Kalender-Abo-Link */
.ics-sub{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem;margin:0 0 1.6rem}
.cal-add.ics-abo{margin-left:0}
.cal-add.ics-abo>summary{font-size:.72rem;padding:.4rem .85rem;min-height:36px}
.ics-hint{font-size:.9rem;color:var(--muted);flex:1 1 16rem}
.ics-hint a{color:inherit}
/* Termine: "In Kalender" – kleines Etikett in der Datumszeile, Auswahl als Aufklappfeld */
.cal-add{display:inline-block;position:relative;margin-left:.5rem;vertical-align:middle}
.cal-add>summary{list-style:none;display:inline-flex;align-items:center;gap:.35rem;cursor:pointer;user-select:none;
  font-family:"Space Mono",monospace;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold-dark);border:1px solid currentColor;border-radius:999px;padding:.22rem .6rem;line-height:1.2;background:transparent}
.cal-add>summary::-webkit-details-marker{display:none}
.cal-add>summary:hover,.cal-add[open]>summary{background:var(--gold);color:var(--on-gold);border-color:var(--gold)}
.cal-add-pop{position:absolute;left:0;top:calc(100% + .4rem);z-index:20;min-width:15.5rem;background:var(--surface);
  border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 30px rgba(33,28,21,.16);padding:.35rem;
  font-family:inherit;text-transform:none;letter-spacing:0}
.cal-add-pop a{display:block;text-decoration:none;color:var(--text);border-radius:8px;padding:.6rem .75rem;min-height:44px}
.cal-add-pop a+a{border-top:1px solid var(--line)}
.cal-add-pop a:hover,.cal-add-pop a:focus{background:var(--surface-hl)}
.cal-add-pop b{display:block;font-family:"Archivo",system-ui,sans-serif;font-size:.95rem}
.cal-add-pop small{display:block;font-family:"Newsreader",Georgia,serif;font-size:.88rem;font-weight:400;color:var(--muted);margin-top:.1rem}
@media (max-width:560px){.cal-add{display:block;margin:.45rem 0 0}.cal-add>summary{font-size:.72rem;padding:.35rem .75rem}.cal-add.ics-abo{margin:0}}

/* ---------- Dunkler Modus ----------
 * Automatisch, wenn Handy/Computer auf „dunkel“ eingestellt sind – außer jemand hat oben
 * „Hell“ gewählt. Mit dem Umschalter gewählt: data-theme="dark" (in localStorage gemerkt).
 * Kopf, Fuß und Titelbild sind ohnehin dunkel und bleiben unverändert. */
:root[data-theme="dark"]{
  --ink:#f1e9da;          /* Überschriften */
  --asphalt:#0d0b07;      /* dunkle Abschnitte: etwas dunkler als der Seitengrund */
  --asphalt-2:#1b1610;
  --gold-deep:#fad932;    /* Gold als Schrift/Link: heller, damit es auf Dunkel gut lesbar ist */
  --gold-dark:#fad932;
  --paper:#14110c;
  --card:#1f1a13;
  --text:#e6dccb;
  --muted:#ab9f8b;
  --line:#393024;
  --surface:#1a160f;
  --surface-hl:#33291a;
  --surface-soft:#1c170f;
  --tl-past:#5b5244;
  --req:#f28b7d;
  --err-bg:#3b1d18; --err-line:#6e3128; --err-text:#f5b5ab;
  --ok-bg:#15301c;  --ok-line:#2d5c39;  --ok-text:#a6dfb3;
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#f1e9da;          /* Überschriften */
    --asphalt:#0d0b07;      /* dunkle Abschnitte: etwas dunkler als der Seitengrund */
    --asphalt-2:#1b1610;
    --gold-deep:#fad932;    /* Gold als Schrift/Link: heller, damit es auf Dunkel gut lesbar ist */
    --gold-dark:#fad932;
    --paper:#14110c;
    --card:#1f1a13;
    --text:#e6dccb;
    --muted:#ab9f8b;
    --line:#393024;
    --surface:#1a160f;
    --surface-hl:#33291a;
    --surface-soft:#1c170f;
    --tl-past:#5b5244;
    --req:#f28b7d;
    --err-bg:#3b1d18; --err-line:#6e3128; --err-text:#f5b5ab;
    --ok-bg:#15301c;  --ok-line:#2d5c39;  --ok-text:#a6dfb3;
    color-scheme:dark;
  }
}

/* ---------- Aktuelles: eigene Beitragsseite (inc/pages/beitrag.php) ---------- */
.article-wrap{max-width:900px}
.article .eyebrow a{color:inherit;text-decoration:none}
.article h1{margin-bottom:.4rem;overflow-wrap:anywhere}
.article-date{font-family:"Space Mono",monospace;font-size:.85rem;letter-spacing:.08em;color:var(--muted);margin:0 0 1.4rem}
.article-img{margin:0 0 1.6rem;border-radius:16px;overflow:hidden;background:var(--card);border:1px solid var(--line)}
.article-img img{display:block;width:100%;height:auto;max-height:75vh;object-fit:contain}
.article-text{max-width:72ch;margin:0 0 1.6rem;font-size:1.12rem}
.share{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin:2rem 0 1.2rem;padding-top:1.2rem;border-top:1px solid var(--line)}
.share-label{font-family:"Archivo",sans-serif;font-weight:700;color:var(--ink)}
.prose a.share-btn{display:inline-block;text-decoration:none;font-family:"Archivo",sans-serif;font-weight:700;font-size:.95rem;
  padding:.5rem 1.1rem;border-radius:999px;border:1.5px solid var(--line);color:var(--ink);background:var(--card)}
.prose a.share-btn:hover,.prose a.share-btn:focus-visible{border-color:var(--gold);color:var(--gold-deep)}
.article-back{margin-top:1rem}
.preview-bar{background:var(--gold);color:var(--on-gold);padding:.7rem 0;font-family:"Archivo",sans-serif;font-size:.95rem}