/* Gallia Helvetica — Webseite, Blog und Meldeseiten.
   Entwurf A „Bannerhalle“ in zwei Ansichten: Tag (hell) und Nacht (dunkel).
   Umschalten: html[data-theme="light"|"dark"], gesetzt im <head> (gh-theme). */

:root{
  --bg:#F5EFE1; --bg2:#EDE4CF; --panel:#FFFCF4; --line:#D9CCA9; --line-strong:#B9A979;
  --ink:#1B1A14; --ink-soft:#4A4637; --ink-faint:#6A6451;
  --green:#1D5E3B; --green-deep:#164A2E; --on-green:#FFFFFF; --green-soft:#E3EDE6;
  --gold:#8E6519; --gold-bright:#D4A548; --on-gold:#1A1206;
  --hero-bg:#B7D3E6; --hero-ink:#13202A; --hero-ink-soft:#2E3D47; --hero-eyebrow:#164A2E;
  --header-bg:#FFFCF4; --header-ink:#1B1A14;
  --band-bg:#1D5E3B; --band-ink:#F3EEDF; --band-soft:#D7E6DC; --band-line:#3E7A58;
  --alt-bg:#EDE4CF; --alt-ink:#1B1A14; --alt-soft:#4A4637;
  --banner-a:#FFFCF4; --banner-a-ink:#1B1A14; --banner-b:#1D5E3B; --banner-b-ink:#F3EEDF; --banner-num:#1D5E3B; --banner-num-b:#F1D48A;
  --rod:#8C6F3A;
  --shadow:0 1px 2px rgba(40,30,10,.06), 0 10px 26px rgba(40,30,10,.08);
  --radius:4px;
  --font-display:'Cinzel', 'Trajan Pro', 'Times New Roman', serif;
  --font-body:'Alegreya Sans', 'Gill Sans', 'Segoe UI', sans-serif;

  /* Skyline: Tag */
  --sk-sky1:#9CC6E4; --sk-sky2:#CFE3EE; --sk-sky3:#F3EBD7; --sk-star:#FFFFFF; --sk-starop:0;
  --sk-moon:#FFF2C4; --sk-mtn:#8EA6B7; --sk-snow:#FFFFFF; --sk-hill1:#7FA58A; --sk-hill2:#5E8D6D;
  --sk-back:#D6C9AE; --sk-land:#E9DFC9; --sk-spire:#3F7A68; --sk-dome:#4F9A7F; --sk-door:#3A3326;
  --sk-front:#C4AE88; --sk-win:#5A4A35; --sk-wall:#A6998A; --sk-joint:#857967; --sk-b1:#FFFFFF; --sk-b2:#1D5E3B; --sk-pole:#6B5A3A;
  --o-body:#8C6339; --o-dark:#3B2715; --o-light:#E2CDA2; --o-eye:#FF9F1C; --o-beak:#2B2118;
  color-scheme:light;
}
html[data-theme="dark"]{
  --bg:#0C1512; --bg2:#121C18; --panel:#121C18; --line:#2A3A33; --line-strong:#3C5A50;
  --ink:#EFE6D2; --ink-soft:#C9C1AE; --ink-faint:#A8A08C;
  --green:#2F8A57; --green-deep:#1D5E3B; --on-green:#FFFFFF; --green-soft:#16261F;
  --gold:#E2B65A; --gold-bright:#D4A548; --on-gold:#1A1206;
  --hero-bg:#071321; --hero-ink:#EFE6D2; --hero-ink-soft:#D2CBB8; --hero-eyebrow:#E2B65A;
  --header-bg:#071321; --header-ink:#EFE6D2;
  --band-bg:#071321; --band-ink:#EFE6D2; --band-soft:#C9C1AE; --band-line:#1B2C33;
  --alt-bg:#EFE6D2; --alt-ink:#1A1A14; --alt-soft:#3A382E;
  --banner-a:#EFE6D2; --banner-a-ink:#1A1A14; --banner-b:#1D5E3B; --banner-b-ink:#F1EBDD; --banner-num:#1D5E3B; --banner-num-b:#F1D48A;
  --shadow:0 2px 4px rgba(0,0,0,.3), 0 14px 30px rgba(0,0,0,.35);

  /* Skyline: Nacht */
  --sk-sky1:#071321; --sk-sky2:#15304A; --sk-sky3:#2C4C5C; --sk-star:#F4EBD0; --sk-starop:.8;
  --sk-moon:#F6E7B4; --sk-mtn:#304A5C; --sk-snow:#A9BCC6; --sk-hill1:#1B3631; --sk-hill2:#132823;
  --sk-back:#10221E; --sk-land:#1C2F2B; --sk-spire:#2C5A4C; --sk-dome:#3F7A68; --sk-door:#0A1412;
  --sk-front:#0B1916; --sk-win:#F2B544; --sk-wall:#3A3631; --sk-joint:#26231F; --sk-b1:#F1EBDD; --sk-b2:#2F8A57; --sk-pole:#B89A5E;
  color-scheme:dark;
}

*{box-sizing:border-box;}
html{font-size:18px; -webkit-text-size-adjust:100%; scroll-behavior:smooth;}
html,body{margin:0; padding:0; overflow-x:clip;}  /* clip statt hidden: sonst klebt die Kopfzeile nicht (sticky) */
@supports not (overflow:clip){ body{overflow-x:hidden;} }
body{font-family:var(--font-body); background:var(--bg); color:var(--ink); line-height:1.6;}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:900; line-height:1.1; margin:0; letter-spacing:.01em; text-wrap:balance;}
p{text-wrap:pretty;}
a{color:var(--gold);}
a:hover{color:var(--ink);}
img{max-width:100%; height:auto; display:block;}
:focus-visible{outline:3px solid var(--gold-bright); outline-offset:2px;}
.wrap{max-width:1280px; margin:0 auto; padding:0 24px;}
.narrow{max-width:900px;}
.muted{color:var(--ink-faint);}
.small{font-size:.85rem;}
.sr-only,.hp{position:absolute !important; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; padding:0;}
.skip{position:absolute; left:12px; top:-60px; z-index:300; background:var(--gold-bright); color:var(--on-gold); padding:10px 16px; font-weight:700;}
.skip:focus{top:12px;}
@media (prefers-reduced-motion: reduce){*{transition:none !important; scroll-behavior:auto !important;}}

/* ---------- Kopf ---------- */
.herold{background:var(--green-deep); color:#F3EEDF; font-size:.84rem; letter-spacing:.03em;}
.herold .wrap{display:flex; flex-wrap:wrap; justify-content:center; gap:4px 18px; padding-top:8px; padding-bottom:8px; text-align:center;}
.herold strong{font-family:var(--font-display); font-weight:700;}
.herold a{color:#FFFFFF; font-weight:700;}
.site-head{background:var(--header-bg); color:var(--header-ink); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:100;}
.head-in{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 24px; max-width:1280px; margin:0 auto;}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--header-ink);}
.brand .crest{width:46px; height:auto; flex:0 0 auto;}
.brand-t{display:flex; flex-direction:column; line-height:1.1;}
.brand-t b{font-family:var(--font-display); font-weight:900; font-size:1.05rem; letter-spacing:.12em;}
.brand-t span{font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint);}
.main-nav{display:flex; align-items:center; gap:4px 26px; font-family:var(--font-display); font-weight:700; font-size:.78rem; letter-spacing:.12em;}
.main-nav a{color:var(--header-ink); text-decoration:none; padding:12px 0; position:relative;}
.main-nav a[aria-current="page"]::after, .main-nav a:hover::after{content:""; position:absolute; left:0; right:0; bottom:6px; height:2px; background:var(--gold-bright);}
.head-right{display:flex; align-items:center; gap:12px;}
.menu{display:none; position:relative;}
.menu summary{list-style:none; cursor:pointer; width:44px; height:44px; display:grid; place-items:center; border:1.5px solid var(--line-strong); border-radius:var(--radius);}
.menu summary::-webkit-details-marker{display:none;}
.menu-panel{position:absolute; right:0; top:52px; min-width:240px; background:var(--panel); border:1px solid var(--line); box-shadow:var(--shadow); padding:8px; display:flex; flex-direction:column;}
.menu-panel a{padding:12px 14px; color:var(--ink); text-decoration:none; font-family:var(--font-display); font-weight:700; font-size:.82rem; letter-spacing:.1em;}
.menu-panel a:hover{background:var(--bg2);}

.theme-toggle{width:58px; height:32px; border-radius:999px; border:1.5px solid var(--line-strong); background:var(--bg2); position:relative; cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:space-between; padding:0 7px;}
.theme-toggle svg{width:15px; height:15px; position:relative; z-index:1; opacity:.5;}
.theme-toggle .sun{color:#B07A12;} .theme-toggle .moon{color:#9DB6F5;}
html[data-theme="light"] .theme-toggle .sun, html[data-theme="dark"] .theme-toggle .moon{opacity:1;}
.theme-toggle .knob{position:absolute; top:2px; left:2px; width:25px; height:25px; border-radius:50%; background:var(--ink); transition:transform .2s ease; box-shadow:0 1px 3px rgba(0,0,0,.35);}
html[data-theme="dark"] .theme-toggle .knob{transform:translateX(26px);}

/* ---------- Knoepfe ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--font-display); font-weight:700; font-size:.8rem; letter-spacing:.1em;
  padding:14px 22px; min-height:48px; border-radius:var(--radius); border:1.5px solid var(--line-strong); background:transparent; color:var(--ink); text-decoration:none; cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;}
.btn:hover{transform:translateY(-1px); box-shadow:var(--shadow); color:var(--ink);}
.btn.primary{background:var(--gold-bright); border-color:var(--gold-bright); color:var(--on-gold); font-weight:900;}
.btn.primary:hover{color:var(--on-gold); background:#E0B45A;}
.btn.green{background:var(--green-deep); border-color:var(--green-deep); color:#FFFFFF;}
.btn.green:hover{color:#FFFFFF;}
.btn.small{padding:8px 14px; min-height:38px; font-size:.72rem;}
.btn:disabled{opacity:.6; cursor:default; transform:none;}
.head-cta{white-space:nowrap;}

/* ---------- Abschnitte ---------- */
section{position:relative;}
.sec{padding:104px 0;}
.eyebrow{font-family:var(--font-display); font-weight:700; font-size:.76rem; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); margin:0 0 14px;}
.h2{font-size:clamp(2rem, 4vw, 3rem);}
.lead{font-size:1.2rem; line-height:1.6; color:var(--ink-soft);}
.center{text-align:center;}
.center .eyebrow{text-align:center;}

/* Hero mit gemalter Skyline */
.hero{background:var(--hero-bg); color:var(--hero-ink); position:relative; overflow:hidden;}
.hero-text{position:relative; z-index:2; max-width:940px; margin:0 auto; padding:72px 24px 0; text-align:center;}
.hero .eyebrow{color:var(--hero-eyebrow);}
.hero h1{font-size:clamp(2.2rem, 5.6vw, 4.6rem); line-height:1.04;}
.hero p.lead{color:var(--hero-ink-soft); max-width:680px; margin:24px auto 0; font-size:1.18rem;}
@media (min-width:901px) and (max-width:1240px){ .hero-text{padding-left:150px; padding-right:150px;} }
.hero-cta{display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:32px;}
.hero .btn:not(.primary){color:var(--hero-ink); border-color:currentColor;}
.skyline{display:block; width:100%; height:auto; aspect-ratio:1440/560; min-height:220px;}
.hero .skyline{margin-top:4px;}
.hero-banner{position:absolute; top:0; width:92px; height:380px; display:flex; flex-direction:column; align-items:center; z-index:1;}
.hero-banner.l{left:4%;} .hero-banner.r{right:4%;}
.hero-banner .rod{width:112px; height:8px; background:var(--rod); border-radius:4px;}
.hero-banner .cloth{width:92px; flex:1; clip-path:polygon(0 0,100% 0,100% 100%,50% 86%,0 100%); display:flex; justify-content:center; padding-top:40px;}
.hero-banner.l .cloth{background:linear-gradient(90deg,#1D5E3B 50%,#F1EBDD 50%);}
.hero-banner.r .cloth{background:linear-gradient(90deg,#1D5E3B 50%,#F1EBDD 50%);}
.hero-banner .medal{width:56px; height:56px; border-radius:50%; background:#071321; border:3px solid #D4A548; display:grid; place-items:center; color:#D4A548; font-family:var(--font-display); font-weight:900;}
.hero-banner .medal svg{width:36px; height:auto;}

/* Seitenkopf der Unterseiten */
.page-hero{background:var(--hero-bg); color:var(--hero-ink); overflow:hidden;}
.page-hero .wrap{padding-top:56px; padding-bottom:6px;}
.page-hero h1{font-size:clamp(2rem, 4.6vw, 3.6rem); max-width:960px;}
.page-hero .lead{color:var(--hero-ink-soft); max-width:760px; margin:18px 0 0;}
.page-hero .eyebrow{color:var(--hero-eyebrow);}
/* Unterseiten: die ganze Skyline zeigen (Tuerme, Uhu, Fahne), oben hoechstens etwas Himmel abschneiden */
.page-hero .sky-strip{margin-top:28px; line-height:0;}
.page-hero .sky-strip .skyline{width:100%; height:33vw; min-height:150px; aspect-ratio:auto;}
.crumbs{font-size:.86rem; margin:0 0 14px; color:var(--hero-ink-soft);}
.crumbs a{color:inherit;}
.crumbs span{margin:0 6px;}

/* Wappenzeile */
.facts{background:var(--bg2); border-top:4px solid var(--gold-bright); border-bottom:1px solid var(--line);}
.facts ul{list-style:none; margin:0 auto; max-width:1280px; padding:26px 24px; display:grid; grid-template-columns:repeat(auto-fit, minmax(min(230px,100%),1fr)); gap:18px;}
.facts li{display:flex; gap:14px; align-items:center; line-height:1.35;}
.facts svg{flex:0 0 28px; color:var(--gold);}
.facts strong{font-family:var(--font-display); font-weight:700;}

/* Was ist Schlaraffia */
.intro{display:flex; flex-wrap:wrap; gap:64px; align-items:center;}
.intro-crest{flex:1 1 320px; display:flex; justify-content:center;}
.intro-crest .big-crest{width:min(340px, 100%); height:auto; filter:drop-shadow(0 10px 22px rgba(0,0,0,.18));}
.intro-text{flex:1 1 560px; min-width:0;}
.answer{font-size:1.28rem; line-height:1.55; margin:22px 0 0;}
.virtues{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(180px,100%),1fr)); gap:16px; margin-top:34px;}
.virtue{border:1px solid var(--line); background:var(--panel); padding:22px 20px;}
.virtue svg{color:var(--gold); width:34px; height:34px;}
.virtue h3{font-size:1.1rem; margin:12px 0 6px;}
.virtue p{margin:0; font-size:.95rem; color:var(--ink-soft);}

/* Vier Staende als Banner */
.band{background:var(--band-bg); color:var(--band-ink);}
.band .eyebrow{color:var(--gold-bright);}
.band .lead{color:var(--band-soft);}
.rod-line{height:10px; background:var(--rod); border-radius:5px; max-width:1180px; margin:52px auto 0;}
.banners{list-style:none; margin:0 auto; padding:0 20px; max-width:1140px; display:grid; grid-template-columns:repeat(auto-fit, minmax(min(220px,100%),1fr)); gap:24px;}
.banners li{clip-path:polygon(0 0,100% 0,100% 100%,50% 90%,0 100%); padding:34px 24px 78px; text-align:center; background:var(--banner-a); color:var(--banner-a-ink);}
.banners li:nth-child(even){background:var(--banner-b); color:var(--banner-b-ink);}
.banners .num{font-family:var(--font-display); font-weight:900; font-size:2.6rem; color:var(--banner-num); line-height:1;}
.banners li:nth-child(even) .num{color:var(--banner-num-b);}
.banners h3{font-size:1.35rem; margin:10px 0;}
.banners p{margin:0; font-size:1rem; line-height:1.55;}

/* Turnierplan */
.plan-head{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:end; gap:16px;}
.plan{display:flex; flex-wrap:wrap; gap:28px; margin-top:42px;}
.next{flex:1 1 400px; min-width:0; background:var(--alt-bg); color:var(--alt-ink); border:6px double var(--rod); padding:38px; display:flex; flex-direction:column; gap:16px;}
.next .eyebrow{color:#1D5E3B; margin:0;}
.next .day{display:flex; align-items:baseline; gap:16px; flex-wrap:wrap;}
.next .day b{font-family:var(--font-display); font-weight:900; font-size:5.2rem; line-height:.9;}
.next .day span{font-family:var(--font-display); font-weight:700; font-size:1.4rem;}
.next .day small{display:block; font-family:var(--font-body); font-weight:500; font-size:1rem; letter-spacing:0;}
.next h3{font-size:1.9rem;}
.next p{margin:0; color:var(--alt-soft);}
.next .btn{align-self:flex-start;}
.list{flex:1 1 480px; min-width:0; list-style:none; margin:0; padding:0;}
.list li{display:flex; align-items:center; gap:18px; padding:18px 0; border-bottom:1px solid var(--line);}
.list svg{flex:0 0 28px; color:var(--gold);}
.list .d{flex:0 0 86px; font-family:var(--font-display); font-weight:700; font-size:1.15rem; color:var(--gold);}
.list .t{flex:1 1 auto; min-width:0; font-size:1.1rem; line-height:1.35;}
.list .t small{display:block; font-size:.86rem; color:var(--ink-faint);}

/* Chronik */
.alt{background:var(--alt-bg); color:var(--alt-ink);}
.alt .eyebrow{color:#1D5E3B;}
.years{list-style:none; margin:52px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(min(230px,100%),1fr)); gap:32px;}
.years li{border-top:3px solid #1D5E3B; padding-top:20px;}
.years b{font-family:var(--font-display); font-weight:900; font-size:2.6rem;}
.years p{margin:10px 0 0; color:var(--alt-soft);}

/* FAQ */
.faq-list details, details.faq{border-bottom:1px solid var(--line);}
.faq-list summary, details.faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:22px 0; font-weight:700; font-size:1.15rem; min-height:64px;}
.faq-list summary::-webkit-details-marker, details.faq summary::-webkit-details-marker{display:none;}
.faq-list summary::after, details.faq summary::after{content:"+"; font-family:var(--font-display); font-size:1.6rem; color:var(--gold); flex:0 0 auto;}
.faq-list details[open] summary::after, details.faq[open] summary::after{content:"−";}
.faq-list details p, details.faq p{margin:0 0 24px; color:var(--ink-soft); font-size:1.08rem;}
.faq-list h3{font-family:var(--font-body); font-weight:700; font-size:1.15rem; letter-spacing:0; margin:0;}

/* Burgpforte / Formular */
.gate-sec{background:var(--bg2); border-top:4px solid var(--gold-bright);}
.gate{display:flex; flex-wrap:wrap; gap:56px; align-items:center;}
.gate-text{flex:1 1 380px; min-width:0;}
.gate-text address{font-style:normal; margin-top:24px; line-height:1.7;}
.gate-form{flex:1 1 420px; min-width:0; display:flex; flex-direction:column; gap:14px;}
.gate-form .gf-title{text-align:center; font-family:var(--font-display); font-weight:900; font-size:1.7rem; letter-spacing:.06em; margin:0;}
.gate-form .gf-sub{text-align:center; font-style:italic; margin:-8px 0 8px; color:var(--ink-soft);}
/* Pilgerbrief als aufgerollte Pergamentrolle (in Tag und Nacht hell, Tinte dunkel) */
.scroll{color-scheme:light; position:relative; margin:34px 44px; padding:70px clamp(24px,5vw,60px) 64px;
  --ink:#2B2014; --ink-soft:#4A3A24; --ink-faint:#6B5838; --line:#CFB37C; --line-strong:#B48E50; --bg:#FCF6E6; --bg2:#EEDDB5; --panel:#F6EACB; --green:#1D5E3B; --gold:#7A5418;
  color:var(--ink);
  background:
    radial-gradient(ellipse 60% 40% at 18% 12%, rgba(255,255,255,.55), transparent 70%),
    radial-gradient(ellipse 50% 35% at 85% 92%, rgba(150,100,35,.16), transparent 70%),
    radial-gradient(ellipse 30% 20% at 70% 40%, rgba(150,100,35,.07), transparent 70%),
    linear-gradient(90deg, #E2C892 0%, #F1E1BA 6%, #F8EDD2 50%, #F0DFB6 94%, #DDC088 100%);
  box-shadow:0 22px 44px rgba(40,25,5,.28), inset 0 0 40px rgba(140,95,30,.18);}
.scroll .roll{position:absolute; left:-12px; right:-12px; height:38px; border-radius:19px; z-index:2;
  background:
    linear-gradient(90deg, rgba(110,70,20,.45) 0, rgba(110,70,20,0) 14px, rgba(110,70,20,0) calc(100% - 14px), rgba(110,70,20,.45) 100%),
    linear-gradient(180deg, #A9844A 0%, #DCC18A 16%, #F6E8C6 38%, #FFF6E0 46%, #EBD5A3 64%, #C9A66A 84%, #8F6C36 100%);
  box-shadow:0 7px 12px rgba(60,35,5,.32), inset 0 -2px 0 rgba(90,55,15,.25);}
.scroll .roll.top{top:-19px;}
.scroll .roll.bottom{bottom:-19px;}
/* Holzstab durch die Rolle, mit gedrechselten Knaeufen */
.scroll .roll i{position:absolute; left:-20px; right:-20px; top:50%; height:12px; margin-top:-6px; border-radius:6px; z-index:-1;
  background:linear-gradient(180deg, #4A2A0E 0%, #8C5A28 30%, #C08850 50%, #7A4A1C 75%, #3E2208 100%);
  -webkit-mask-image:linear-gradient(90deg, #000 0 26px, transparent 26px calc(100% - 26px), #000 calc(100% - 26px));
  mask-image:linear-gradient(90deg, #000 0 26px, transparent 26px calc(100% - 26px), #000 calc(100% - 26px));}
.scroll .roll::before, .scroll .roll::after{content:""; position:absolute; top:50%; width:24px; height:30px; margin-top:-15px; border-radius:45% 45% 45% 45% / 50% 50% 50% 50%;
  background:
    radial-gradient(ellipse 5px 12px at 50% 50%, rgba(255,220,160,.35), transparent 70%),
    radial-gradient(circle at 38% 32%, #D49A58 0%, #9A6330 38%, #5E3712 72%, #34190A 100%);
  box-shadow:0 3px 5px rgba(40,20,5,.45), inset 0 0 0 2px rgba(40,20,5,.25);}
.scroll .roll::before{left:-40px;}
.scroll .roll::after{right:-40px;}
.scroll .seal{position:absolute; top:42px; right:30px; width:74px;}
.scroll .seal .seal-crest{display:block; width:100%; height:auto; filter:drop-shadow(0 4px 6px rgba(60,35,5,.35));}
.scroll a{color:#6E4A12;}
.gate-emblem{display:flex; align-items:flex-end; gap:22px; margin-bottom:26px;}
.gate-emblem .gate-crest{width:clamp(96px, 12vw, 140px); height:auto; filter:drop-shadow(0 8px 16px rgba(0,0,0,.18));}
.gate-emblem .gate-uhu{width:clamp(110px, 13vw, 150px); height:auto;}
[id]{scroll-margin-top:96px;}
label{display:flex; flex-direction:column; gap:6px; font-size:.95rem; color:var(--ink-soft);}
label .lbl .small{font-size:.85em;}
input[type=text], input[type=email], input[type=tel], input[type=number], input[type=date], input[type=datetime-local], input[type=password], select, textarea{
  font:inherit; font-size:1rem; color:var(--ink); background:var(--bg); border:1px solid var(--line-strong); border-radius:var(--radius); padding:12px 14px; min-height:48px; width:100%;}
textarea{min-height:110px; resize:vertical;}
input:focus, select:focus, textarea:focus{outline:none; border-color:var(--gold-bright); box-shadow:0 0 0 3px color-mix(in srgb, var(--gold-bright) 30%, transparent);}
.check{flex-direction:row; align-items:center; gap:10px; min-height:44px;}
.check input{width:22px; height:22px; accent-color:var(--gold-bright);}
.row2{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(180px,100%),1fr)); gap:14px; align-items:end;}
.form-msg{margin:0; padding:12px 14px; border-left:5px solid var(--green); background:var(--bg2);}
.form-msg.err{border-left-color:#B33A2E;}
.seg{display:flex; border:1.5px solid var(--line-strong); border-radius:var(--radius); overflow:hidden;}
.seg label{flex:1; flex-direction:row; justify-content:center; margin:0; position:relative; gap:0;}
.seg input{position:absolute; opacity:0;}
.seg span{display:block; width:100%; text-align:center; padding:12px 8px; font-weight:700; cursor:pointer; min-height:46px;}
.seg input:checked + span{background:var(--green-deep); color:#FFFFFF;}
.seg input:focus-visible + span{outline:3px solid var(--gold-bright); outline-offset:-3px;}

/* Fuss */
.site-foot{background:var(--hero-bg); color:var(--hero-ink-soft); border-top:1px solid var(--line);}
html[data-theme="light"] .site-foot{background:#173C29; color:#D7E6DC;}
.foot-in{max-width:1280px; margin:0 auto; padding:48px 24px 36px; display:grid; grid-template-columns:repeat(auto-fit, minmax(min(220px,100%),1fr)); gap:28px;}
.site-foot h2{font-size:.8rem; letter-spacing:.2em; color:#E2B65A; margin:0 0 12px;}
.site-foot a{color:inherit;}
.site-foot ul{list-style:none; margin:0; padding:0; line-height:1.9;}
.foot-brand{display:flex; gap:14px; align-items:flex-start;}
.foot-brand .crest{width:58px; height:auto; flex:0 0 auto;}
.foot-brand b{font-family:var(--font-display); letter-spacing:.12em; color:#F3EEDF; display:block;}
.foot-base{border-top:1px solid rgba(255,255,255,.12); max-width:1280px; margin:0 auto; padding:18px 24px 28px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; font-size:.86rem;}
.motto{font-family:var(--font-display); font-weight:700; color:#E2B65A; letter-spacing:.1em;}

/* Karten, Hinweise */
.card{background:var(--panel); border:1px solid var(--line); box-shadow:var(--shadow); padding:24px 26px;}
.notice{background:var(--panel); border:1px solid var(--line); border-left:6px solid var(--green); padding:12px 16px; margin:18px 0;}
.notice.warn{border-left-color:var(--gold-bright);}

/* Tabelle Sippungsfolge */
.season{width:100%; border-collapse:collapse; font-size:1.02rem;}
.season th{text-align:left; font-family:var(--font-display); font-weight:700; font-size:.76rem; letter-spacing:.14em; padding:12px 10px; border-bottom:2px solid var(--ink);}
.season td{padding:14px 10px; border-bottom:1px solid var(--line); vertical-align:top;}
.season .m td{background:var(--bg2); font-family:var(--font-display); font-weight:700; letter-spacing:.12em; font-size:.8rem;}
.season .past td{color:var(--ink-faint);}
.season .closed td{color:var(--ink-faint); font-style:italic;}
.season .dt{white-space:nowrap; font-weight:700;}
.tag{display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:2px 8px; border:1px solid var(--line-strong); border-radius:999px; color:var(--ink-soft); white-space:nowrap;}
.tag.fest{border-color:var(--gold-bright); color:var(--gold);}
.table-wrap{overflow-x:auto;}

/* Glossar */
.glossar{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(260px,100%),1fr)); gap:0 32px; margin:28px 0 0; border-top:2px solid var(--ink);}
.glossar div{padding:18px 0; border-bottom:1px solid var(--line);}
.glossar dt{font-family:var(--font-display); font-weight:700; font-size:1.15rem; color:var(--gold);}
.glossar dd{margin:6px 0 0; color:var(--ink-soft);}

/* Fliesstext (Unterseiten, Blog) */
.prose{font-size:1.1rem; line-height:1.72;}
.prose h2{font-size:clamp(1.5rem, 3vw, 2rem); margin:2.2em 0 .6em;}
.prose h3{font-size:1.25rem; margin:1.8em 0 .5em;}
.prose h4{font-size:1.05rem; margin:1.5em 0 .4em;}
.prose p, .prose ul, .prose ol{margin:0 0 1.1em;}
.prose li{margin:.3em 0;}
.prose blockquote{margin:1.6em 0; padding:6px 0 6px 22px; border-left:4px solid var(--gold-bright); font-size:1.18rem; font-style:italic; color:var(--ink-soft);}
.prose figure{margin:1.8em 0;}
.prose figcaption{font-size:.88rem; color:var(--ink-faint); margin-top:8px;}
.prose hr{border:0; height:1px; background:var(--line); margin:2.4em 0;}
.prose code{background:var(--bg2); padding:1px 6px; border-radius:3px; font-size:.92em;}
.prose details.faq summary{font-size:1.08rem;}
.md-pilger{background:var(--band-bg); color:var(--band-ink); padding:26px 28px; margin:2em 0; border-left:6px solid var(--gold-bright);}
.md-pilger p{margin:0 0 10px;}
.md-pilger .md-pilger-k{font-family:var(--font-display); font-size:.74rem; letter-spacing:.24em; color:var(--gold-bright); text-transform:uppercase;}
.md-pilger .md-pilger-h{font-family:var(--font-display); font-weight:900; font-size:1.35rem;}
.md-pilger .btn{margin-top:6px;}
.sipp-box{border:1px solid var(--line); background:var(--panel); padding:18px 22px; margin:2em 0;}
.sipp-box ul{list-style:none; margin:10px 0 0; padding:0;}
.sipp-box li{display:flex; gap:14px; padding:8px 0; border-bottom:1px solid var(--line);}
.sipp-box li b{font-family:var(--font-display); color:var(--gold); min-width:74px;}

/* Blog */
.post-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(330px,100%),1fr)); gap:26px; margin-top:44px;}
.post-card{background:var(--panel); border:1px solid var(--line); display:flex; flex-direction:column; transition:transform .15s ease, box-shadow .15s ease;}
.post-card:hover{transform:translateY(-3px); box-shadow:var(--shadow);}
.post-card .cover{aspect-ratio:1200/630; overflow:hidden; background:var(--bg2); display:block;}
.post-card .cover img{width:100%; height:100%; object-fit:cover;}
.post-card .pc-body{padding:22px 24px 24px; display:flex; flex-direction:column; gap:10px; flex:1;}
.post-card h2{font-size:1.25rem; line-height:1.2;}
.post-card h2 a{color:var(--ink); text-decoration:none;}
.post-card h2 a:hover{color:var(--gold);}
.post-card p{margin:0; color:var(--ink-soft); font-size:1rem;}
.post-card .meta{margin-top:auto; font-size:.86rem; color:var(--ink-faint);}
.post-head{max-width:820px;}
.post-head .meta{color:var(--hero-ink-soft); font-size:.95rem; margin-top:14px;}
.post-body{display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:56px; margin-top:52px;}
.post-cover{margin:0 0 34px;}
.toc{position:sticky; top:96px; align-self:start; border-left:3px solid var(--gold-bright); padding:4px 0 4px 18px;}
.toc p{font-family:var(--font-display); font-weight:700; font-size:.74rem; letter-spacing:.2em; margin:0 0 10px; color:var(--gold);}
.toc ol{list-style:none; margin:0; padding:0; font-size:.95rem; line-height:1.4;}
.toc li{margin:0 0 10px;}
.toc a{color:var(--ink-soft); text-decoration:none;}
.toc a:hover{color:var(--gold);}
.author{display:flex; gap:16px; align-items:center; margin:44px 0 0; padding:20px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.author .crest{width:46px; height:auto;}
.comments{margin-top:56px;}
.comment-list{list-style:none; margin:20px 0; padding:0;}
.comment{border-bottom:1px solid var(--line); padding:16px 0;}
.comment .c-head{margin:0 0 6px; display:flex; flex-wrap:wrap; gap:6px 12px; align-items:baseline;}
.comment .c-head time{font-size:.85rem; color:var(--ink-faint);}
.comment.team{background:var(--bg2); padding:16px 18px;}
.badge-team{font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; background:var(--green-deep); color:#FFFFFF; padding:2px 8px;}
.c-toggle summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; font-family:var(--font-display); font-weight:700;}
.c-toggle summary::-webkit-details-marker{display:none;}
.c-toggle summary::after{content:"+"; font-size:1.6rem; color:var(--gold);}
.c-toggle[open] summary::after{content:"−";}
.comment-form{display:flex; flex-direction:column; gap:14px; margin-top:16px;}
.nl-box{display:flex; flex-wrap:wrap; gap:24px 48px; align-items:center; background:var(--band-bg); color:var(--band-ink); padding:36px clamp(22px,4vw,48px); margin:64px 0 0;}
.nl-box > div{flex:1 1 340px;}
.nl-box h2{font-size:1.6rem;}
.nl-box p{color:var(--band-soft); margin:10px 0 0;}
.nl-box form{flex:1 1 380px; display:flex; flex-direction:column; gap:10px;}
.nl-row{display:flex; gap:10px; flex-wrap:wrap;}
.nl-row input{flex:1 1 220px; background:var(--panel); color:var(--ink);}
.nl-msg{margin:0; color:var(--band-ink);}
.page-nav{display:flex; flex-wrap:wrap; gap:12px; margin:44px 0 0;}

/* Meldeseite */
.msg-page{padding:96px 0;}
.msg-page .card{max-width:640px; margin:0 auto; text-align:center;}
.msg-page .crest{width:96px; height:auto; display:block; margin:0 auto;}

@media (max-width: 980px){
  .post-body{grid-template-columns:1fr;}
  .toc{position:static; order:-1;}
}
@media (max-width: 900px){
  .main-nav, .head-cta{display:none;}
  .menu{display:block;}
  .hero-banner{display:none;}
  .sec{padding:72px 0;}
  .hero-text{padding-top:48px;}
}
@media (max-width: 520px){
  html{font-size:17px;}
  .brand-t span{display:none;}
  .next{padding:26px;}
  .next .day b{font-size:4rem;}
  .scroll{margin:34px 26px; padding:64px 20px 56px;}
  .scroll .roll{left:-6px; right:-6px; height:32px; border-radius:16px;}
  .scroll .roll.top{top:-16px;} .scroll .roll.bottom{bottom:-16px;}
  .scroll .roll i{left:-12px; right:-12px; height:10px; margin-top:-5px; -webkit-mask-image:linear-gradient(90deg, #000 0 16px, transparent 16px calc(100% - 16px), #000 calc(100% - 16px)); mask-image:linear-gradient(90deg, #000 0 16px, transparent 16px calc(100% - 16px), #000 calc(100% - 16px));}
  .scroll .roll::before, .scroll .roll::after{width:18px; height:24px; margin-top:-12px;}
  .scroll .roll::before{left:-26px;} .scroll .roll::after{right:-26px;}
  .scroll .seal{width:54px; top:34px; right:14px;}
  .gate-form .gf-title{font-size:1.35rem;}
}
@media print{
  .site-head,.herold,.site-foot,.theme-toggle,.nl-box,.comments,.hero-banner{display:none !important;}
  body{background:#fff; color:#000;}
}

/* Skyline-Farben (Inline-SVG app/partials/skyline.svg.php) */
.sk-stars{fill:var(--sk-star); opacity:var(--sk-starop);}
.sk-moon{fill:var(--sk-moon);}
.sk-mtn{fill:var(--sk-mtn);} .sk-snow{fill:var(--sk-snow);}
.sk-hill1{fill:var(--sk-hill1);} .sk-hill2{fill:var(--sk-hill2);}
.sk-back{fill:var(--sk-back);} .sk-land{fill:var(--sk-land);} .sk-spire{fill:var(--sk-spire);}
.sk-dome{fill:var(--sk-dome);} .sk-cross{stroke:var(--sk-dome);} .sk-door{fill:var(--sk-door);}
.sk-front{fill:var(--sk-front);} .sk-win{fill:var(--sk-win);}
.sk-wall{fill:var(--sk-wall);} .sk-joint{stroke:var(--sk-joint);}
.sk-shields{stroke:var(--sk-door);} .sk-b1{fill:var(--sk-b1);} .sk-b2{fill:var(--sk-b2);}
.sk-pole{fill:var(--sk-pole);} .sk-polestroke{stroke:var(--sk-pole);}
.o-body{fill:var(--o-body);} .o-dark{fill:var(--o-dark);} .o-light{fill:var(--o-light);}
.o-eye{fill:var(--o-eye);} .o-beak{fill:var(--o-beak);} .o-ringstroke{stroke:var(--o-dark);}
.o-streak{stroke:var(--o-dark);} .o-wing{stroke:var(--o-light);} .o-brow{stroke:var(--o-dark);} .o-feet{stroke:var(--o-beak);}
.o-pupil{fill:#120C06;} .o-glint{fill:#FFFFFF;}

/* Himmel ohne Naht: Hintergrund und Skyline sind ein Bild. Der Himmelsverlauf liegt auf dem
   ganzen Kopfbereich, Sterne und Mond/Sonne wandern nach oben hinter den Text. */
.hero, .page-hero{position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(180deg, var(--sk-sky1) 0%, var(--sk-sky2) 66%, var(--sk-sky3) 100%);}
.hero .sk-skyrect, .page-hero .sk-skyrect, .hero .sk-moon, .page-hero .sk-moon, .hero .sk-glow, .page-hero .sk-glow, .hero .sk-stars, .page-hero .sk-stars{display:none;}
.hero::before, .page-hero::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:var(--sk-starop);
  background-image:
    radial-gradient(1.6px 1.6px at 23px 41px, var(--sk-star) 60%, transparent 70%),
    radial-gradient(1.2px 1.2px at 141px 17px, var(--sk-star) 60%, transparent 70%),
    radial-gradient(1.8px 1.8px at 211px 133px, var(--sk-star) 60%, transparent 70%),
    radial-gradient(1.2px 1.2px at 77px 171px, var(--sk-star) 60%, transparent 70%),
    radial-gradient(1.4px 1.4px at 263px 69px, var(--sk-star) 60%, transparent 70%),
    radial-gradient(1px 1px at 189px 209px, var(--sk-star) 60%, transparent 70%),
    radial-gradient(1.5px 1.5px at 57px 97px, var(--sk-star) 60%, transparent 70%),
    radial-gradient(1.1px 1.1px at 307px 37px, var(--sk-star) 60%, transparent 70%),
    radial-gradient(1.3px 1.3px at 331px 181px, var(--sk-star) 60%, transparent 70%);
  background-size:350px 230px;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 55%, transparent 85%); mask-image:linear-gradient(180deg, #000 0%, #000 55%, transparent 85%);}
.hero::after, .page-hero::after{content:""; position:absolute; z-index:-1; pointer-events:none; top:54px; right:clamp(24px, 9vw, 150px);
  width:clamp(52px, 6vw, 88px); aspect-ratio:1; border-radius:50%; background:var(--sk-moon);
  box-shadow:0 0 40px 14px color-mix(in srgb, var(--sk-moon) 55%, transparent), 0 0 140px 70px color-mix(in srgb, var(--sk-moon) 22%, transparent);}
.hero::after{right:calc(4% + 150px); top:26px;}
.page-hero .sky-strip{margin-top:12px;}
.hero-text, .page-hero .wrap{position:relative; z-index:1;}
@media (max-width:900px){ .hero::after{right:18px; top:16px;} }
@media (max-width:640px){ .page-hero::after{top:14px; right:14px; width:44px;} .hero::after{width:44px;} }
.page-hero.no-sky{background:linear-gradient(180deg, var(--sk-sky1) 0%, var(--sk-sky2) 100%);}
.page-hero.no-sky::before{-webkit-mask-image:none; mask-image:none;}

/* Uhu sitzt auf der oberen Rolle des Pilgerbriefs */
.scroll{margin-top:160px;}
.scroll .perch{position:absolute; z-index:3; left:34px; top:-148px; width:110px; line-height:0;}
.scroll .perch .uhu{width:100%; height:auto; filter:drop-shadow(0 4px 6px rgba(40,25,5,.3));}
#pilgerbrief{scroll-margin-top:240px;}
@media (max-width:520px){ .scroll .perch{left:14px; width:82px; top:-111px;} .scroll{margin-top:126px;} }

/* Uhu schlaegt mit den Fluegeln (Klick/Tippen, site.js) */
.owl-flap{cursor:pointer; -webkit-tap-highlight-color:transparent;}
.owl-flap .o-wingL, .owl-flap .o-wingR{transform-box:fill-box;}
.owl-flap .o-wingL{transform-origin:100% 0;}
.owl-flap .o-wingR{transform-origin:0 0;}
.owl-flap.flap{animation:owlHop .9s ease-in-out;}
.owl-flap.flap .o-wingL{animation:flapL .9s ease-in-out;}
.owl-flap.flap .o-wingR{animation:flapR .9s ease-in-out;}
@keyframes flapL{0%,100%{transform:rotate(0)} 18%,58%{transform:rotate(48deg)} 38%,78%{transform:rotate(6deg)}}
@keyframes flapR{0%,100%{transform:rotate(0)} 18%,58%{transform:rotate(-48deg)} 38%,78%{transform:rotate(-6deg)}}
@keyframes owlHop{0%,100%{transform:translateY(0)} 30%,70%{transform:translateY(-10px)}}
@media (prefers-reduced-motion: reduce){ .owl-flap.flap, .owl-flap.flap .o-wingL, .owl-flap.flap .o-wingR{animation-duration:.01s;} }
.atzung-wahl[hidden]{display:none;}

/* Naechste Sippung: Atzung und Pilger nebeneinander */
.next-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:4px;}
.next .next-actions .btn{align-self:auto;}
.next .atzung-btn{color:var(--alt-ink); border-color:#8C6F3A; background:transparent;}
.next .atzung-btn:hover{color:var(--alt-ink); background:rgba(140,111,58,.12);}
/* Anmeldung zur Atzung: Rolle ohne Uhu, normaler Abstand oben */
.scroll.no-perch{margin-top:34px;}
#anmeldung-atzung{scroll-margin-top:110px;}
/* Anmeldung zur Atzung: Titel zweizeilig neben dem Siegel, Stand breit / Reych-Nr. schmal */
.scroll .gf-title{padding:0 110px; line-height:1.2;}
.row2.stand-reych{grid-template-columns:minmax(0,2fr) minmax(0,1fr); align-items:start;}
@media (max-width:520px){ .scroll .gf-title{padding:0;} .scroll .seal{position:static; display:block; margin:0 auto 10px;} }
.atz-zeit{margin-left:.4em; font-weight:700; color:var(--alt-ink, #2B2014); white-space:nowrap;}
/* Anmeldung zur Atzung: Stand und Personen kurz */
#anmeldung-atzung .row2.stand-reych{display:flex; justify-content:space-between; gap:14px;}
#anmeldung-atzung .stand-reych > label:first-child{flex:0 0 9.5em;}
#anmeldung-atzung .stand-reych > label:last-child{flex:0 0 9em;}
#anmeldung-atzung input[name=personen]{width:5.5em;}
.scroll .seal{top:62px; right:52px;}
@media (max-width:520px){ #anmeldung-atzung .stand-reych > label:first-child{flex:1 1 auto; min-width:0;} #anmeldung-atzung .stand-reych > label:last-child{flex:0 0 5.5em;} }
/* Chronik-Band auf der Startseite: folgt der Ansicht (Nacht = dunkel) */
.alt .alt-btn{color:var(--alt-ink); border-color:var(--alt-ink); background:transparent;}
html[data-theme="dark"] .alt{background:var(--bg2); color:var(--ink);}
html[data-theme="dark"] .alt .eyebrow{color:var(--gold);}
html[data-theme="dark"] .alt .years li{border-top-color:var(--green);}
html[data-theme="dark"] .alt .years p{color:var(--ink-soft);}
html[data-theme="dark"] .alt .alt-btn{color:var(--ink); border-color:var(--ink);}
html[data-theme="dark"] .alt .alt-btn:hover{color:var(--on-gold); background:var(--gold-bright); border-color:var(--gold-bright);}
/* Eckdaten unter dem Titelbild: auf dem Handy immer zwei nebeneinander */
@media (max-width:700px){
  .facts ul{grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px 12px; padding:22px 16px;}
  .facts li{gap:10px; align-items:flex-start; font-size:.95rem;}
  .facts svg{flex:0 0 22px; width:22px; height:26px; margin-top:2px;}
}
@media (max-width:420px){ .facts ul{padding:20px 12px; gap:16px 10px;} .facts li{gap:8px; font-size:.9rem;} .facts svg{flex-basis:18px; width:18px; height:21px;} }
.gate > .gate-text{align-self:flex-start; padding-top:34px;}
@media (max-width:900px){ .gate > .gate-text{padding-top:0;} }
/* Handy: Brief näher an den Text */
@media (max-width:900px){ .gate{gap:0;} }
/* Burgpforte / Atzung: Rolle näher an die Oberkante */
.gate-sec{padding-top:48px;}
@media (max-width:900px){ .gate-sec{padding-top:56px;} }
.intro-text{max-width:860px;}