/* Schella Hexa Rudersberg
   Layout: Nachtschwarzer Grund wie das Logo, runde Fredoka für Überschriften,
   Grün für Schrift-Akzente, Enzianblau für Flächen und Knöpfe (wie die Stola). */
:root {
  --nacht: #0b0d0c;        /* Hintergrund, wie der Logo-Kreis */
  --russ: #151917;         /* Flächen */
  --russ-2: #1d2320;       /* Rahmen, Linien */
  --hexengruen: #7adc57;   /* Logo-Grün */
  --enzian: #377cbd;       /* Stola-Blau */
  --enzian-hell: #6aa6de;  /* Blau für Text auf Schwarz */
  --nebel: #e6ece8;        /* Fließtext */
  --asche: #9aa69f;        /* Nebentext */
  --f-display: "Fredoka", "Nunito", system-ui, sans-serif;
  --f-body: "Karla", "Segoe UI", system-ui, sans-serif;
  --f-label: "Fredoka", "Karla", system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--nacht);
  color: var(--nebel);
  font: 17px/1.65 var(--f-body);
}
img { max-width: 100%; display: block; }
a { color: var(--hexengruen); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--hexengruen); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 600; line-height: 1.1; text-wrap: balance; margin: 0; }
h2 { font-size: clamp(2.2rem, 5vw, 3.2rem); color: var(--hexengruen); }
h3 { font-size: 1.6rem; color: var(--nebel); }
p { margin: 0; }

.wrap { max-width: 1080px; margin: 0 auto; padding-inline: 20px; }
.eyebrow {
  font-family: var(--f-label); text-transform: uppercase; letter-spacing: .14em;
  font-size: .8rem; color: var(--enzian-hell);
}

/* Kopfleiste */
.top {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10;
  background: color-mix(in srgb, var(--nacht) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--russ-2);
}
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 10px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--nebel); }
.brand img { width: 40px; height: 40px; }
.brand span { font-family: var(--f-display); font-weight: 600; font-size: 1.3rem; color: var(--hexengruen); }
.nav { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: .95rem; }
.nav a { color: var(--nebel); text-decoration: none; }
.nav a:hover { color: var(--hexengruen); }
.nav .btn-klein { color: #fff; background: var(--enzian); padding: 4px 12px; border-radius: 999px; }
.nav .btn-klein:hover { color: #fff; filter: brightness(1.12); }

/* Startbereich */
.hero { padding-block: 64px 56px; position: relative; overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: center; }
.hero h1 { font-size: clamp(3.4rem, 10vw, 6.6rem); color: var(--hexengruen); }
.hero h1 small { display: block; font-size: .42em; color: var(--nebel); margin-top: 8px; }
.hero .ruf { font-family: var(--f-display); font-weight: 600; font-size: 1.7rem; color: var(--enzian-hell); margin-top: 18px; }
.hero p.lead { margin-top: 18px; max-width: 34em; color: var(--asche); font-size: 1.1rem; }
.hero .logo-gross { width: 100%; max-width: 380px; justify-self: center; filter: drop-shadow(0 0 40px rgba(122, 220, 87, .18)); }
.schellen { display: flex; gap: 10px; margin-top: 28px; flex-wrap: wrap; }
.btn {
  display: inline-block; padding: 12px 22px; border-radius: 999px; text-decoration: none; font-weight: 700;
  background: var(--enzian); color: #fff; border: 2px solid var(--enzian);
}
.btn.leer { background: transparent; color: var(--nebel); border-color: var(--russ-2); }
.btn:hover { filter: brightness(1.12); }

/* Stola-Band: Enzianblau als Trenner */
.stola { height: 14px; background: repeating-linear-gradient(135deg, var(--enzian) 0 10px, #2f6ea9 10px 20px); }

section { padding-block: 72px; }
section + section { border-top: 1px solid var(--russ-2); }
.kopf { display: flex; flex-direction: column; gap: 6px; margin-bottom: 32px; }

/* Über uns */
.zweispaltig { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.zweispaltig > * { min-width: 0; }
.text p + p { margin-top: 14px; }
.haes { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; border-top: 1px solid var(--russ-2); }
.haes li { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding-block: 14px; border-bottom: 1px solid var(--russ-2); }
.haes b { font-family: var(--f-label); text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; color: var(--hexengruen); padding-top: 3px; }

/* Termine */
.termine { display: grid; gap: 0; border-top: 1px solid var(--russ-2); }
.termin { display: grid; grid-template-columns: 96px 1fr auto; gap: 20px; align-items: center; padding-block: 16px; border-bottom: 1px solid var(--russ-2); }
.datum { font-family: var(--f-label); font-variant-numeric: tabular-nums; line-height: 1.1; }
.datum b { display: block; font-size: 1.6rem; color: var(--hexengruen); font-weight: 600; }
.datum span { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--asche); }
.termin h3 { font-family: var(--f-body); font-weight: 700; font-size: 1.1rem; }
.termin p { color: var(--asche); font-size: .95rem; }
.tag { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--enzian); color: var(--enzian-hell); white-space: nowrap; }

/* News */
.news { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; align-items: start; }
.beitrag { background: var(--russ); border: 1px solid var(--russ-2); border-radius: 14px; padding: 22px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.beitrag time { font-size: .85rem; color: var(--enzian-hell); font-variant-numeric: tabular-nums; }
.beitrag h3 { font-family: var(--f-body); font-weight: 700; font-size: 1.15rem; }
.beitrag p { color: var(--asche); font-size: .95rem; }

/* Instagram */
.insta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.insta a {
  aspect-ratio: 1; max-width: 100%; border-radius: 10px; background: var(--russ); border: 1px solid var(--russ-2);
  display: grid; place-items: center; text-align: center; padding: 12px; color: var(--asche); text-decoration: none; font-size: .9rem;
  background-size: cover; background-position: center;
}
.insta a:hover { border-color: var(--hexengruen); color: var(--nebel); }
.hinweis { margin-top: 16px; font-size: .85rem; color: var(--asche); }

/* Kontakt */
.kontakt { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: start; }
.kontakt > * { min-width: 0; }
.kontakt-info { display: grid; gap: 16px; }
.kontakt-info > div { background: var(--russ); border: 1px solid var(--russ-2); border-radius: 14px; padding: 24px; }
.kontakt h3 { margin-bottom: 8px; }
.kontakt p { color: var(--asche); }

/* Fußzeile */
footer { border-top: 1px solid var(--russ-2); padding-block: 28px; font-size: .9rem; color: var(--asche); }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
footer a { color: var(--asche); }

/* Unterseiten (Impressum, Datenschutz, Mitglieder) */
.seite { padding-block: 56px 80px; }
.seite .text { max-width: 44em; }
.seite h1 { font-size: clamp(2.6rem, 7vw, 4rem); color: var(--hexengruen); margin-bottom: 24px; }
.seite h2 { font-size: 1.8rem; margin-top: 36px; margin-bottom: 10px; }
.platzhalter { background: rgba(55, 124, 189, .18); border-radius: 4px; padding: 0 4px; color: var(--enzian-hell); }
.box { background: var(--russ); border: 1px solid var(--russ-2); border-radius: 14px; padding: 22px; }
.kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.kacheln a { text-decoration: none; color: var(--nebel); }
.kacheln .box b { display: block; font-family: var(--f-display); font-size: 1.3rem; color: var(--hexengruen); font-weight: 600; margin-bottom: 4px; }
.kacheln .box span { color: var(--asche); font-size: .95rem; }
.kacheln a:hover .box { border-color: var(--enzian); }

@media (max-width: 820px) {
  .hero .wrap, .zweispaltig, .kontakt { grid-template-columns: 1fr; }
  .hero .logo-gross { max-width: 220px; grid-row: 1; }
  .news, .kacheln { grid-template-columns: 1fr; }
  .insta { grid-template-columns: repeat(2, 1fr); }
  .nav a:not(.btn-klein) { display: none; }
}
@media (max-width: 520px) {
  .termin { grid-template-columns: 72px 1fr; }
  .termin .tag { grid-column: 2; justify-self: start; }
  .haes li { grid-template-columns: 1fr; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.sage { font-family: var(--f-display); font-weight: 400; font-size: 1.3rem; line-height: 1.45; color: var(--nebel); margin-bottom: 0;
  border-left: 3px solid var(--enzian); padding-left: 18px; }

/* Datenschutzerklärung (Generator-Text) */
.ds h1 { margin-bottom: 8px; }
.ds h3 { font-size: 1.2rem; margin-top: 20px; margin-bottom: 6px; }
.ds p, .ds ul { margin-block: 10px; }
.ds ul { padding-left: 1.2em; }
.ds li + li { margin-top: 6px; }
.ds ul.index { columns: 2; column-gap: 32px; padding-left: 1em; }
.ds .seal { margin-top: 32px; font-size: .9rem; }
.ds { overflow-wrap: anywhere; }
@media (max-width: 600px) { .ds ul.index { columns: 1; } }

/* Instagram mit Zustimmung (2-Klick-Lösung) */
.insta-zustimmung { display: flex; gap: 20px; align-items: flex-start; background: var(--russ); border: 1px solid var(--russ-2); border-radius: 14px; padding: 24px; }
.insta-zustimmung > div { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.insta-zustimmung img { flex: none; width: 72px; height: 72px; }
.insta-zustimmung p { color: var(--asche); max-width: 46em; }
.insta-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 4px; }
.insta-knoepfe .btn { font: inherit; font-weight: 700; cursor: pointer; }
.insta-merken { display: flex; align-items: center; gap: 8px; color: var(--asche); font-size: .95rem; cursor: pointer; }
.insta-merken input { accent-color: var(--enzian); width: 18px; height: 18px; }
.insta-feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; align-items: start; }
.insta-feed .instagram-media { margin: 0 !important; min-width: 0 !important; width: 100% !important; }
.insta-feed > .hinweis { grid-column: 1 / -1; margin: 0; }
@media (max-width: 520px) { .insta-zustimmung { flex-direction: column; } .insta-zustimmung img { width: 56px; height: 56px; } }

/* News: Aufruf */
.beitrag.gesucht { border-color: var(--enzian); }
.beitrag .stempel { align-self: flex-start; font-family: var(--f-label); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; font-size: .75rem;
  color: #fff; background: var(--enzian); padding: 3px 10px; border-radius: 999px; }
.beitrag .btn { align-self: flex-start; margin-top: 6px; }

/* Kontaktformular */
.formular { background: var(--russ); border: 1px solid var(--russ-2); border-radius: 14px; padding: 24px; display: grid; gap: 16px; }
.feld { display: grid; gap: 6px; }
.feld label { font-weight: 700; font-size: .95rem; }
.feld input, .feld select, .feld textarea {
  font: inherit; color: var(--nebel); background: var(--nacht); border: 1px solid var(--russ-2); border-radius: 10px; padding: 10px 12px; width: 100%; }
.feld textarea { resize: vertical; min-height: 120px; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: 2px solid var(--enzian); outline-offset: 1px; border-color: var(--enzian); }
.zustimmung { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; color: var(--asche); cursor: pointer; }
.zustimmung input { accent-color: var(--enzian); width: 18px; height: 18px; margin-top: 3px; flex: none; }
.formular .btn { justify-self: start; font: inherit; font-weight: 700; cursor: pointer; }
.formular .btn:disabled { opacity: .6; cursor: wait; }
.falle { position: absolute; left: -9999px; }
.meldung:empty { display: none; }
.meldung { font-size: .95rem; padding: 10px 14px; border-radius: 10px; background: var(--russ-2); }
.meldung.ok { background: rgba(122, 220, 87, .14); color: var(--hexengruen); }
.meldung.fehler { background: rgba(230, 120, 110, .14); color: #f0a49b; }

/* Formulare: Zusatz */
.formular h3 { margin-bottom: 2px; }
.feldreihe { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.feldreihe > * { min-width: 0; }
fieldset.feld { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.feld legend { font-weight: 700; font-size: .95rem; padding: 0; margin-bottom: 6px; }
.haken { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.haken label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.haken input { accent-color: var(--enzian); width: 18px; height: 18px; }
.feldhinweis { color: var(--asche); font-size: .85rem; }
.zweispaltig .formular { align-self: start; }

/* Mitgliederbereich */
.antraege { display: grid; gap: 14px; }
.antrag { background: var(--russ); border: 1px solid var(--russ-2); border-radius: 14px; }
.antrag[open] { border-color: var(--enzian); }
.antrag summary { cursor: pointer; list-style: none; padding: 18px 22px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.antrag summary::-webkit-details-marker { display: none; }
.antrag summary::before { content: "+"; font-family: var(--f-display); font-weight: 600; color: var(--hexengruen); width: 1em; }
.antrag[open] summary::before { content: "–"; }
.antrag summary span { font-family: var(--f-display); font-weight: 600; font-size: 1.25rem; }
.antrag summary small { color: var(--asche); }
.antrag .formular { border: 0; border-top: 1px solid var(--russ-2); border-radius: 0 0 14px 14px; background: transparent; }
.dokumente { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.dokumente a { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; border-radius: 12px; background: var(--russ); border: 1px solid var(--russ-2); text-decoration: none; color: var(--nebel); }
.dokumente a:hover { border-color: var(--enzian); }
.dokumente b { font-weight: 700; }
.dokumente span { color: var(--asche); font-size: .85rem; }
@media (max-width: 520px) { .feldreihe { grid-template-columns: 1fr; } }

/* Anmeldung Mitgliederbereich */
.anmeldung { max-width: 420px; margin-inline: auto; text-align: center; justify-items: center; }
.anmeldung .feld { width: 100%; text-align: left; }
.anmeldung h1 { margin-bottom: 4px; }
.anmeldung .btn { justify-self: center; }
.sepa { border: 1px solid var(--russ-2); border-radius: 12px; padding: 16px 18px; margin: 0; display: grid; gap: 14px; min-width: 0; }
.sepa legend { font-family: var(--f-display); font-weight: 600; font-size: 1.1rem; color: var(--hexengruen); padding: 0 6px; }
.nav a + .btn-klein { margin-left: 4px; }
@media (max-width: 820px) { .seite .nav a:not(.btn-klein) { display: inline; } }
.anmeldung-form { display: grid; gap: 16px; width: 100%; justify-items: center; }
.anmeldung > p:not(.eyebrow):not(.hinweis) { color: var(--asche); }
.code-feld { text-align: center; font-size: 1.4rem !important; letter-spacing: .2em; text-transform: uppercase; }