/* ==========================================================================
   Narrenzunft Hü-Ri – Stylesheet
   Farben aus dem Vereinslogo: Rot (Kappe links), Blau (Kappe rechts),
   Hautton (Maske), Tinte (Konturen).
   ========================================================================== */

@font-face {
  font-family: "Young Serif";
  src: url("../fonts/YoungSerif-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/BricolageGrotesque-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/BricolageGrotesque-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --rot: #d0423c;
  --blau: #463477;
  --blau-tief: #2e2254;
  --haut: #efb988;
  --haut-hell: #fbeadb;
  --tinte: #1a0d0b;
  --grau: #5b4f4c;
  --papier: #ffffff;

  --schrift-titel: "Young Serif", Georgia, "Times New Roman", serif;
  --schrift-text: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;

  --breite: 72rem;
  --rand: clamp(1.25rem, 4vw, 2.5rem);
  --kopf-hoehe: 4.5rem;
}

/* ---------- Grundlagen ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf-hoehe) + 1rem); }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift-text);
  font-size: 1.0625rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }

h1, h2, h3 {
  font-family: var(--schrift-titel);
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 0.6em;
  text-wrap: balance;
}
h2 { font-size: clamp(1.75rem, 3.2vw, 2.4rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
p { margin: 0 0 1em; max-width: 68ch; }

a { color: var(--rot); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--haut);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--tinte);
  border-radius: 2px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.sprunglink {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--tinte); color: #fff; padding: 0.6rem 1rem;
}
.sprunglink:focus { top: 1rem; }

.innen { width: min(100% - 2 * var(--rand), var(--breite)); margin-inline: auto; }

/* ---------- Platzhalter (später ersetzen) ---------- */
.ph {
  background: var(--haut-hell);
  border-bottom: 2px dashed var(--haut);
  padding: 0 0.2em;
  color: inherit;
}
p.ph, h3.ph, dd.ph, span.jahr.ph { width: fit-content; }
.zwei-orte .ort:first-child p.ph { margin-left: auto; }
.ph-block {
  background: var(--haut-hell);
  border: 2px dashed var(--haut);
  padding: 1.25rem 1.5rem;
  margin: 0 0 1.5rem;
  max-width: 68ch;
}
.ph-block p:last-child { margin-bottom: 0; }

/* ---------- Kopfzeile ---------- */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: var(--papier);
  border-bottom: 4px solid transparent;
  border-image: linear-gradient(90deg, var(--rot) 50%, var(--blau) 50%) 1;
}
.kopf .innen {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: var(--kopf-hoehe);
}
.marke {
  display: flex; align-items: center; gap: 0.7rem;
  color: var(--tinte); text-decoration: none;
  font-family: var(--schrift-titel); font-size: 1.25rem; line-height: 1.1;
}
.marke img { width: 3.6rem; height: auto; }
.marke:hover { text-decoration: none; }

.hauptnav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(1rem, 2.2vw, 2rem); align-items: center; }
.hauptnav a {
  color: var(--tinte); text-decoration: none; font-weight: 700; font-size: 1rem;
  padding: 0.4rem 0; border-bottom: 3px solid transparent;
}
.hauptnav a:hover { border-bottom-color: var(--blau); }
.hauptnav a[aria-current="page"] { border-bottom-color: var(--rot); }

.insta-link { display: inline-flex; align-items: center; gap: 0.45rem; }
.insta-link svg { width: 1.4rem; height: 1.4rem; flex: none; }
.hauptnav .insta-link { border-bottom: 0; color: var(--blau); }
.hauptnav .insta-link:hover { color: var(--rot); }

.burger {
  display: none;
  background: none; border: 0; padding: 0.5rem; margin-right: -0.5rem; cursor: pointer;
  color: var(--tinte);
}
.burger-linien { display: block; width: 28px; height: 20px; position: relative; }
.burger-linien span {
  position: absolute; left: 0; width: 100%; height: 3px; background: currentColor;
  transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease;
}
.burger-linien span:nth-child(1) { top: 0; background: var(--rot); }
.burger-linien span:nth-child(2) { top: 8.5px; }
.burger-linien span:nth-child(3) { top: 17px; background: var(--blau); }
.burger[aria-expanded="true"] .burger-linien span:nth-child(1) { top: 8.5px; transform: rotate(45deg); }
.burger[aria-expanded="true"] .burger-linien span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger-linien span:nth-child(3) { top: 8.5px; transform: rotate(-45deg); }

@media (max-width: 860px) {
  .burger { display: block; }
  .marke { font-size: 1.1rem; }
  .marke img { width: 3rem; }

  .hauptnav {
    position: fixed; inset: calc(var(--kopf-hoehe) + 4px) 0 0 0;
    background: var(--blau);
    background: linear-gradient(90deg, var(--rot) 50%, var(--blau) 50%);
    padding: 2rem var(--rand) 3rem;
    overflow-y: auto;
    visibility: hidden; opacity: 0;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
  }
  .hauptnav.offen { visibility: visible; opacity: 1; transition: opacity 0.2s ease; }
  .hauptnav ul { flex-direction: column; align-items: stretch; gap: 0.75rem; }
  .hauptnav a {
    display: block; text-align: center;
    background: var(--papier); color: var(--tinte);
    font-family: var(--schrift-titel); font-weight: 400; font-size: 1.6rem;
    padding: 0.9rem 1rem; border: 0;
  }
  .hauptnav a[aria-current="page"] { box-shadow: inset 0 -5px 0 var(--rot); }
  .hauptnav a:hover { box-shadow: inset 0 -5px 0 var(--blau); }
  .hauptnav .insta-link { display: flex; justify-content: center; font-family: var(--schrift-text); font-size: 1.1rem; font-weight: 700; }
  body.menue-offen { overflow: hidden; }
}

/* ---------- Narrenzacken (Kante wie am Häs / an der Narrenkappe) ---------- */
/* Narrenzacken: eine einzige breite Zackenform in der Seitenfarbe (weiß) wird über die
   Kante gelegt und ragt 1 px darüber hinaus. Bewusst ohne Kachel-Wiederholung und ohne
   Masken, denn die erzeugen bei Bildschirm-Skalierungen wie 125 % oder 150 % feine Linien.
   Zahnbreite 26 px, Höhe 13 px. */
.zacken-unten, .zacken-oben { position: relative; }
.zacken-unten { padding-bottom: 13px; }
.zacken-oben { padding-top: 13px; }
.zacken-unten::after, .zacken-oben::before {
  content: ""; position: absolute; left: 0; right: 0; height: 14px;
  background-repeat: no-repeat;
  background-size: 5200px 14px;
  background-position: 50% 0;
  pointer-events: none;
  z-index: 1;
}
.zacken-unten::after { bottom: -1px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5200' height='14' viewBox='0 0 5200 14'%3E%3Cpath fill='%23fff' d='M0 0L13 13L26 0L39 13L52 0L65 13L78 0L91 13L104 0L117 13L130 0L143 13L156 0L169 13L182 0L195 13L208 0L221 13L234 0L247 13L260 0L273 13L286 0L299 13L312 0L325 13L338 0L351 13L364 0L377 13L390 0L403 13L416 0L429 13L442 0L455 13L468 0L481 13L494 0L507 13L520 0L533 13L546 0L559 13L572 0L585 13L598 0L611 13L624 0L637 13L650 0L663 13L676 0L689 13L702 0L715 13L728 0L741 13L754 0L767 13L780 0L793 13L806 0L819 13L832 0L845 13L858 0L871 13L884 0L897 13L910 0L923 13L936 0L949 13L962 0L975 13L988 0L1001 13L1014 0L1027 13L1040 0L1053 13L1066 0L1079 13L1092 0L1105 13L1118 0L1131 13L1144 0L1157 13L1170 0L1183 13L1196 0L1209 13L1222 0L1235 13L1248 0L1261 13L1274 0L1287 13L1300 0L1313 13L1326 0L1339 13L1352 0L1365 13L1378 0L1391 13L1404 0L1417 13L1430 0L1443 13L1456 0L1469 13L1482 0L1495 13L1508 0L1521 13L1534 0L1547 13L1560 0L1573 13L1586 0L1599 13L1612 0L1625 13L1638 0L1651 13L1664 0L1677 13L1690 0L1703 13L1716 0L1729 13L1742 0L1755 13L1768 0L1781 13L1794 0L1807 13L1820 0L1833 13L1846 0L1859 13L1872 0L1885 13L1898 0L1911 13L1924 0L1937 13L1950 0L1963 13L1976 0L1989 13L2002 0L2015 13L2028 0L2041 13L2054 0L2067 13L2080 0L2093 13L2106 0L2119 13L2132 0L2145 13L2158 0L2171 13L2184 0L2197 13L2210 0L2223 13L2236 0L2249 13L2262 0L2275 13L2288 0L2301 13L2314 0L2327 13L2340 0L2353 13L2366 0L2379 13L2392 0L2405 13L2418 0L2431 13L2444 0L2457 13L2470 0L2483 13L2496 0L2509 13L2522 0L2535 13L2548 0L2561 13L2574 0L2587 13L2600 0L2613 13L2626 0L2639 13L2652 0L2665 13L2678 0L2691 13L2704 0L2717 13L2730 0L2743 13L2756 0L2769 13L2782 0L2795 13L2808 0L2821 13L2834 0L2847 13L2860 0L2873 13L2886 0L2899 13L2912 0L2925 13L2938 0L2951 13L2964 0L2977 13L2990 0L3003 13L3016 0L3029 13L3042 0L3055 13L3068 0L3081 13L3094 0L3107 13L3120 0L3133 13L3146 0L3159 13L3172 0L3185 13L3198 0L3211 13L3224 0L3237 13L3250 0L3263 13L3276 0L3289 13L3302 0L3315 13L3328 0L3341 13L3354 0L3367 13L3380 0L3393 13L3406 0L3419 13L3432 0L3445 13L3458 0L3471 13L3484 0L3497 13L3510 0L3523 13L3536 0L3549 13L3562 0L3575 13L3588 0L3601 13L3614 0L3627 13L3640 0L3653 13L3666 0L3679 13L3692 0L3705 13L3718 0L3731 13L3744 0L3757 13L3770 0L3783 13L3796 0L3809 13L3822 0L3835 13L3848 0L3861 13L3874 0L3887 13L3900 0L3913 13L3926 0L3939 13L3952 0L3965 13L3978 0L3991 13L4004 0L4017 13L4030 0L4043 13L4056 0L4069 13L4082 0L4095 13L4108 0L4121 13L4134 0L4147 13L4160 0L4173 13L4186 0L4199 13L4212 0L4225 13L4238 0L4251 13L4264 0L4277 13L4290 0L4303 13L4316 0L4329 13L4342 0L4355 13L4368 0L4381 13L4394 0L4407 13L4420 0L4433 13L4446 0L4459 13L4472 0L4485 13L4498 0L4511 13L4524 0L4537 13L4550 0L4563 13L4576 0L4589 13L4602 0L4615 13L4628 0L4641 13L4654 0L4667 13L4680 0L4693 13L4706 0L4719 13L4732 0L4745 13L4758 0L4771 13L4784 0L4797 13L4810 0L4823 13L4836 0L4849 13L4862 0L4875 13L4888 0L4901 13L4914 0L4927 13L4940 0L4953 13L4966 0L4979 13L4992 0L5005 13L5018 0L5031 13L5044 0L5057 13L5070 0L5083 13L5096 0L5109 13L5122 0L5135 13L5148 0L5161 13L5174 0L5187 13L5200 0V14H0Z'/%3E%3C/svg%3E"); }
.zacken-oben::before { top: -1px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5200' height='14' viewBox='0 0 5200 14'%3E%3Cpath fill='%23fff' d='M0 14L13 1L26 14L39 1L52 14L65 1L78 14L91 1L104 14L117 1L130 14L143 1L156 14L169 1L182 14L195 1L208 14L221 1L234 14L247 1L260 14L273 1L286 14L299 1L312 14L325 1L338 14L351 1L364 14L377 1L390 14L403 1L416 14L429 1L442 14L455 1L468 14L481 1L494 14L507 1L520 14L533 1L546 14L559 1L572 14L585 1L598 14L611 1L624 14L637 1L650 14L663 1L676 14L689 1L702 14L715 1L728 14L741 1L754 14L767 1L780 14L793 1L806 14L819 1L832 14L845 1L858 14L871 1L884 14L897 1L910 14L923 1L936 14L949 1L962 14L975 1L988 14L1001 1L1014 14L1027 1L1040 14L1053 1L1066 14L1079 1L1092 14L1105 1L1118 14L1131 1L1144 14L1157 1L1170 14L1183 1L1196 14L1209 1L1222 14L1235 1L1248 14L1261 1L1274 14L1287 1L1300 14L1313 1L1326 14L1339 1L1352 14L1365 1L1378 14L1391 1L1404 14L1417 1L1430 14L1443 1L1456 14L1469 1L1482 14L1495 1L1508 14L1521 1L1534 14L1547 1L1560 14L1573 1L1586 14L1599 1L1612 14L1625 1L1638 14L1651 1L1664 14L1677 1L1690 14L1703 1L1716 14L1729 1L1742 14L1755 1L1768 14L1781 1L1794 14L1807 1L1820 14L1833 1L1846 14L1859 1L1872 14L1885 1L1898 14L1911 1L1924 14L1937 1L1950 14L1963 1L1976 14L1989 1L2002 14L2015 1L2028 14L2041 1L2054 14L2067 1L2080 14L2093 1L2106 14L2119 1L2132 14L2145 1L2158 14L2171 1L2184 14L2197 1L2210 14L2223 1L2236 14L2249 1L2262 14L2275 1L2288 14L2301 1L2314 14L2327 1L2340 14L2353 1L2366 14L2379 1L2392 14L2405 1L2418 14L2431 1L2444 14L2457 1L2470 14L2483 1L2496 14L2509 1L2522 14L2535 1L2548 14L2561 1L2574 14L2587 1L2600 14L2613 1L2626 14L2639 1L2652 14L2665 1L2678 14L2691 1L2704 14L2717 1L2730 14L2743 1L2756 14L2769 1L2782 14L2795 1L2808 14L2821 1L2834 14L2847 1L2860 14L2873 1L2886 14L2899 1L2912 14L2925 1L2938 14L2951 1L2964 14L2977 1L2990 14L3003 1L3016 14L3029 1L3042 14L3055 1L3068 14L3081 1L3094 14L3107 1L3120 14L3133 1L3146 14L3159 1L3172 14L3185 1L3198 14L3211 1L3224 14L3237 1L3250 14L3263 1L3276 14L3289 1L3302 14L3315 1L3328 14L3341 1L3354 14L3367 1L3380 14L3393 1L3406 14L3419 1L3432 14L3445 1L3458 14L3471 1L3484 14L3497 1L3510 14L3523 1L3536 14L3549 1L3562 14L3575 1L3588 14L3601 1L3614 14L3627 1L3640 14L3653 1L3666 14L3679 1L3692 14L3705 1L3718 14L3731 1L3744 14L3757 1L3770 14L3783 1L3796 14L3809 1L3822 14L3835 1L3848 14L3861 1L3874 14L3887 1L3900 14L3913 1L3926 14L3939 1L3952 14L3965 1L3978 14L3991 1L4004 14L4017 1L4030 14L4043 1L4056 14L4069 1L4082 14L4095 1L4108 14L4121 1L4134 14L4147 1L4160 14L4173 1L4186 14L4199 1L4212 14L4225 1L4238 14L4251 1L4264 14L4277 1L4290 14L4303 1L4316 14L4329 1L4342 14L4355 1L4368 14L4381 1L4394 14L4407 1L4420 14L4433 1L4446 14L4459 1L4472 14L4485 1L4498 14L4511 1L4524 14L4537 1L4550 14L4563 1L4576 14L4589 1L4602 14L4615 1L4628 14L4641 1L4654 14L4667 1L4680 14L4693 1L4706 14L4719 1L4732 14L4745 1L4758 14L4771 1L4784 14L4797 1L4810 14L4823 1L4836 14L4849 1L4862 14L4875 1L4888 14L4901 1L4914 14L4927 1L4940 14L4953 1L4966 14L4979 1L4992 14L5005 1L5018 14L5031 1L5044 14L5057 1L5070 14L5083 1L5096 14L5109 1L5122 14L5135 1L5148 14L5161 1L5174 14L5187 1L5200 14V0H0Z'/%3E%3C/svg%3E"); }

.geteilt { background: linear-gradient(90deg, var(--rot) 50%, var(--blau) 50%); color: #fff; }

/* ---------- Startseite: Bühne ---------- */
.buehne { text-align: center; }
.buehne-inhalt {
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--rand) clamp(3rem, 6vw, 4.5rem);
  display: grid; justify-items: center;
}
.logo-scheibe {
  width: clamp(12.5rem, 30vw, 18rem); aspect-ratio: 1;
  border-radius: 50%; background: var(--papier);
  display: grid; place-items: center;
  box-shadow: 0 0 0 6px var(--papier), 0 0 0 9px var(--tinte);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.logo-scheibe img { width: 84%; }

.buehne h1 { margin: 0; width: 100%; }
.h1-klein {
  display: block;
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  margin-bottom: 0.15em;
}
.h1-gross {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline;
  font-size: clamp(5.25rem, 22vw, 11rem); line-height: 0.95;
}
.h1-gross .links { text-align: right; }
.h1-gross .rechts { text-align: left; }
.h1-gross .strich { padding-inline: 0.04em; }

.buehne .unterzeile {
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  margin: 1.25rem auto 1.75rem; max-width: 30ch;
}

/* Animation nur beim Laden: die beiden Hälften des Namens finden zusammen */
@media (prefers-reduced-motion: no-preference) {
  .h1-gross .links { animation: von-links 0.7s cubic-bezier(.2,.8,.2,1) both 0.1s; }
  .h1-gross .rechts { animation: von-rechts 0.7s cubic-bezier(.2,.8,.2,1) both 0.1s; }
  @keyframes von-links { from { transform: translateX(-0.35em); opacity: 0; } }
  @keyframes von-rechts { from { transform: translateX(0.35em); opacity: 0; } }
}

/* ---------- Buttons ---------- */
.knopf {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--schrift-text); font-weight: 700; font-size: 1.05rem;
  padding: 0.85rem 1.4rem;
  background: var(--tinte); color: #fff; text-decoration: none;
  border: 3px solid var(--tinte);
  transition: background 0.15s ease, color 0.15s ease;
}
.knopf:hover { background: var(--papier); color: var(--tinte); text-decoration: none; }
.knopf svg { width: 1.3rem; height: 1.3rem; }
.knopf-hell { background: var(--papier); color: var(--tinte); border-color: var(--papier); }
.knopf-hell:hover { background: transparent; color: #fff; }

/* ---------- Abschnitte ---------- */
.abschnitt { padding-block: clamp(3rem, 7vw, 5.5rem); }
.abschnitt + .abschnitt { padding-top: 0; }
.einleitung { font-size: clamp(1.15rem, 1.8vw, 1.3rem); max-width: 60ch; }

/* Gruppenfoto */
.gruppenfoto { margin: 0; }
.gruppenfoto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: 3px solid var(--tinte); }
.gruppenfoto figcaption { font-size: 0.95rem; color: var(--grau); margin-top: 0.6rem; }
.foto-platzhalter { display: none; }
.gruppenfoto.fehlt img { display: none; }
.gruppenfoto.fehlt .foto-platzhalter {
  display: grid; place-items: center; text-align: center; gap: 0.75rem;
  aspect-ratio: 3 / 2;
  background:
    repeating-linear-gradient(45deg, transparent 0 22px, rgba(239,185,136,.35) 22px 44px),
    var(--haut-hell);
  border: 3px dashed var(--haut);
  padding: 2rem; color: var(--grau);
}
.foto-platzhalter img { width: 7rem; display: block !important; aspect-ratio: auto; border: 0; opacity: 0.85; }
.foto-platzhalter strong { font-family: var(--schrift-titel); font-weight: 400; font-size: 1.5rem; color: var(--tinte); }

/* Übersicht der Unterseiten – Schachbrett wie Häs-Blätzle */
.felder {
  list-style: none; margin: 2rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr);
  border: 3px solid var(--tinte);
}
.felder li:nth-child(1), .felder li:nth-child(4) { --feld: var(--rot); }
.felder li:nth-child(2), .felder li:nth-child(3) { --feld: var(--blau); }
.felder a {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 0.4rem;
  min-height: clamp(11rem, 22vw, 16rem);
  padding: clamp(1.25rem, 3vw, 2.25rem);
  background: var(--feld); color: #fff; text-decoration: none;
  position: relative; height: 100%;
}
.felder .feld-titel {
  font-family: var(--schrift-titel); font-size: clamp(1.6rem, 3.4vw, 2.6rem); line-height: 1.05;
}
.felder .feld-text { max-width: 34ch; opacity: 0.92; }
.felder a::after {
  content: ""; position: absolute; top: clamp(1.25rem, 3vw, 2.25rem); right: clamp(1.25rem, 3vw, 2.25rem);
  width: 1.1rem; height: 1.1rem; border-top: 3px solid #fff; border-right: 3px solid #fff;
  transform: rotate(45deg); transition: transform 0.2s ease;
}
.felder a:hover::after { transform: translateX(4px) rotate(45deg); }
.felder a:hover .feld-titel { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.15em; }

@media (max-width: 640px) {
  .felder { grid-template-columns: 1fr; }
  .felder li:nth-child(3) { --feld: var(--rot); }
  .felder li:nth-child(4) { --feld: var(--blau); }
  .felder a { min-height: 8.5rem; }
}

/* Instagram-Band */
.insta-band { border-top: 3px solid var(--tinte); border-bottom: 3px solid var(--tinte); padding-block: clamp(2.5rem, 6vw, 4rem); }
.insta-band .innen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; }
.insta-band h2 { margin: 0; max-width: 22ch; }
.insta-band .knopf { background: var(--blau); border-color: var(--blau); }
.insta-band .knopf:hover { background: var(--papier); color: var(--blau); }

/* ---------- Unterseiten: Titelband ---------- */
.titelband .innen { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2.75rem, 6vw, 4.5rem); text-align: center; }
.titelband h1 {
  font-size: clamp(2.4rem, 7vw, 4.75rem); margin: 0;
}
.titelband p { margin: 0.9rem auto 0; font-size: clamp(1.05rem, 1.8vw, 1.25rem); max-width: 46ch; }

.inhalt { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.inhalt section + section { margin-top: clamp(2.5rem, 6vw, 4rem); }

/* Zwei Orte */
.zwei-orte { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(1rem, 4vw, 3rem); align-items: center; margin-top: 1.5rem; }
.zwei-orte .ort { border-top: 3px solid var(--tinte); padding-top: 1rem; }
.zwei-orte .ort:first-child { text-align: right; }
.zwei-orte .ort:first-child p { margin-left: auto; }
.zwei-orte img { width: clamp(8rem, 18vw, 12rem); }
@media (max-width: 700px) {
  .zwei-orte { grid-template-columns: 1fr 1fr; }
  .zwei-orte img { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
  .zwei-orte .ort:first-child { text-align: left; }
  .zwei-orte .ort:first-child p { margin-left: 0; }
}

/* Zeitleiste (Geschichte) */
.zeitleiste { list-style: none; margin: 1.5rem 0 0; padding: 0; border-left: 3px solid var(--tinte); max-width: 52rem; }
.zeitleiste li { position: relative; padding: 0 0 1.75rem 1.75rem; }
.zeitleiste li::before {
  content: ""; position: absolute; left: -0.6rem; top: 0.45rem;
  width: 0.95rem; height: 0.95rem; transform: rotate(45deg);
  background: linear-gradient(90deg, var(--rot) 50%, var(--blau) 50%);
  outline: 3px solid var(--papier);
}
.zeitleiste .jahr { font-family: var(--schrift-titel); font-size: 1.4rem; display: block; line-height: 1.2; }

/* Personenliste (Vorstand) */
.personen { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; }
.personen li { border: 3px solid var(--tinte); padding: 1rem 1.25rem; }
.personen .funktion { display: block; color: var(--grau); font-size: 0.95rem; }
.personen .name { font-family: var(--schrift-titel); font-size: 1.25rem; }

/* Narrenfahrplan */
.fahrplan { list-style: none; margin: 1.5rem 0 0; padding: 0; border-top: 3px solid var(--tinte); }
.termin {
  display: grid; grid-template-columns: 6.5rem 1fr; gap: 1.5rem; align-items: start;
  padding: 1.5rem 0; border-bottom: 1px solid #d9cfc9;
}
.termin-datum {
  display: grid; justify-items: center; text-align: center;
  padding: 0.6rem 0.4rem 0.7rem; color: #fff; line-height: 1.1;
  background: linear-gradient(90deg, var(--rot) 50%, var(--blau) 50%);
}
.termin:nth-child(even) .termin-datum { background: linear-gradient(90deg, var(--blau) 50%, var(--rot) 50%); }
.termin-datum .tag { font-family: var(--schrift-titel); font-size: 2.2rem; }
.termin-datum .monat, .termin-datum .wochentag { font-size: 0.9rem; font-weight: 700; }
.termin h3 { margin: 0.1rem 0 0.35rem; }
.termin-info { margin: 0; color: var(--grau); }
.termin-info span + span::before { content: " / "; }
@media (max-width: 520px) {
  .termin { grid-template-columns: 5rem 1fr; gap: 1rem; }
  .termin-datum .tag { font-size: 1.8rem; }
}

/* Eckdaten (Jubiläum, Bunter Abend) */
.eckdaten { display: grid; grid-template-columns: max-content 1fr; gap: 0; margin: 1.5rem 0 0; border-top: 3px solid var(--tinte); max-width: 46rem; }
.eckdaten dt, .eckdaten dd { padding: 0.85rem 0; border-bottom: 1px solid #d9cfc9; margin: 0; }
.eckdaten dt { font-weight: 700; padding-right: 2rem; }
@media (max-width: 520px) {
  .eckdaten { grid-template-columns: 1fr; }
  .eckdaten dt { border-bottom: 0; padding-bottom: 0; }
  .eckdaten dd { padding-top: 0.15rem; }
}

/* Countdown */
.countdown { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.5rem 0 0; }
.countdown div { min-width: 6rem; padding: 0.9rem 1rem; text-align: center; border: 3px solid var(--tinte); }
.countdown div:nth-child(odd) { background: var(--rot); color: #fff; border-color: var(--rot); }
.countdown div:nth-child(even) { background: var(--blau); color: #fff; border-color: var(--blau); }
.countdown .zahl { display: block; font-family: var(--schrift-titel); font-size: 2.4rem; line-height: 1.1; }
.countdown .einheit { font-size: 0.9rem; font-weight: 700; }
.countdown-hinweis { color: var(--grau); }

/* Rechtstexte */
.rechtstext { max-width: 48rem; }
.rechtstext h2 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); margin-top: 2.25rem; }
.rechtstext h3 { font-size: 1.2rem; margin-top: 1.5rem; }
.rechtstext address { font-style: normal; margin-bottom: 1em; }
.rechtstext ul { padding-left: 1.2rem; max-width: 68ch; }
.rechtstext li { margin-bottom: 0.35rem; }

/* ---------- Fußzeile ---------- */
.fuss { background: var(--blau-tief); color: #fff; margin-top: clamp(2rem, 5vw, 4rem); }
.fuss .innen {
  display: grid; grid-template-columns: auto 1fr auto; gap: 2rem; align-items: center;
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
}
.fuss-logo { width: 6rem; aspect-ratio: 1; border-radius: 50%; background: var(--papier); display: grid; place-items: center; }
.fuss-logo img { width: 86%; }
.fuss-name { font-family: var(--schrift-titel); font-size: 1.4rem; margin: 0 0 0.25rem; }
.fuss p { margin: 0; color: #e6e0f0; }
.fuss a { color: #fff; }
.fuss-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: flex-end; }
.fuss-links a { text-decoration: none; font-weight: 700; }
.fuss-links a:hover, .fuss-links a[aria-current="page"] { text-decoration: underline; }
.fuss-unten { border-top: 1px solid rgba(255,255,255,.18); }
.fuss-unten .innen { display: block; padding-block: 1rem; font-size: 0.9rem; }
.fuss-unten p { color: #c9c0dc; }
@media (max-width: 760px) {
  .fuss .innen { grid-template-columns: 1fr; justify-items: start; gap: 1.25rem; }
  .fuss-links { justify-content: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}