/* Website der Grenzland Darters – gleiche Farben und Schriften wie die Grenzland Darters App (GDA).
   Schriften liegen auf dem eigenen Webspace (keine Google Fonts), es gibt keine Cookies und kein Tracking. */

@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url("../fonts/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url("../fonts/barlow-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url("../fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url("../fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); }

:root {
  color-scheme: dark;
  --grund: #111009;
  --flaeche: #2A221D;
  --flaeche2: #1C1714;
  --orange: #E88000;
  --gruen: #5F7318;
  --bordeaux: #8A1F2E;
  --text: #F7F4EC;
  --leise: #B9B0A2;
  --linie: #3A302A;
  --breite: 1100px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--grund); color: var(--text);
  font: 400 17px/1.6 "Barlow", system-ui, sans-serif;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--orange); }
a:hover { color: #ffa53a; }
h1, h2, h3 { font-family: "Barlow Condensed", "Barlow", sans-serif; font-weight: 700; line-height: 1.1; margin: 0 0 .5em; }
h1 { font-size: clamp(44px, 9vw, 92px); text-transform: uppercase; letter-spacing: .5px; }
h2 { font-size: clamp(30px, 5vw, 44px); color: var(--orange); text-transform: uppercase; }
h3 { font-size: 26px; text-transform: uppercase; }
p { margin: 0 0 1em; }
ul { margin: 0 0 1em; padding-left: 1.2em; }
li { margin: .2em 0; }
li::marker { color: var(--orange); }
.innen { max-width: var(--breite); margin: 0 auto; padding: 0 16px; }
.leise { color: var(--leise); }
.klein { font-size: 14px; }

/* Kopf mit Navigation – am Handy als Menü zum Aufklappen (ohne JavaScript) */
.kopf { position: sticky; top: 0; z-index: 10; background: rgba(17, 16, 9, .94); backdrop-filter: blur(6px); border-bottom: 1px solid var(--linie); }
.kopf .innen { display: flex; align-items: center; gap: 16px; min-height: 64px; }
.marke { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font: 700 22px "Barlow Condensed", sans-serif; text-transform: uppercase; margin-right: auto; }
.marke img { width: 40px; height: 40px; }
.menue { display: flex; gap: 4px; }
.menue a { color: var(--text); text-decoration: none; font: 600 18px "Barlow Condensed", sans-serif; text-transform: uppercase; padding: 10px 12px; border-radius: 10px; }
.menue a:hover { background: var(--flaeche); }
.menue a[aria-current] { color: var(--orange); }
.menue a.app { border: 2px solid var(--orange); color: var(--orange); margin-left: 6px; }
.menueknopf { display: none; }
@media (max-width: 860px) {
  .menueknopf { display: block; position: relative; }
  .menueknopf summary { list-style: none; cursor: pointer; min-width: 48px; min-height: 48px; display: grid; place-items: center; border: 1px solid var(--linie); border-radius: 12px; font: 700 18px "Barlow Condensed", sans-serif; }
  .menueknopf summary::-webkit-details-marker { display: none; }
  .menueknopf .menue { position: absolute; right: 0; top: 56px; flex-direction: column; min-width: 230px; background: var(--flaeche); border: 2px solid var(--orange); border-radius: 14px; padding: 8px; box-shadow: 0 12px 30px rgba(0, 0, 0, .5); }
  .menueknopf .menue a { padding: 12px 14px; }
  .menue.breit { display: none; }
}

/* Großes Bild oben – solange die echten Fotos fehlen, mit einem Platzhalter im Vereinsdesign */
.held { position: relative; min-height: 58vh; display: flex; align-items: flex-end; padding: 48px 0; background: var(--flaeche2) center / cover no-repeat; }
.held::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17, 16, 9, .2), rgba(17, 16, 9, .92)); }
.held .innen { position: relative; width: 100%; }
.held .unterzeile { font: 600 clamp(20px, 3.5vw, 30px) "Barlow Condensed", sans-serif; text-transform: uppercase; color: var(--orange); margin-bottom: 18px; }
.held.klein { min-height: 34vh; }
.platzhalter { background-image: repeating-radial-gradient(circle at 78% 40%, #2A221D 0 26px, #1C1714 26px 52px, #8A1F2E 52px 56px, #1C1714 56px 82px, #5F7318 82px 86px); }

.knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }
.knopf { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: 12px; background: var(--orange); color: #111009; text-decoration: none; font: 700 19px "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .5px; }
.knopf:hover { background: #ffa53a; color: #111009; }
.knopf.rahmen { background: transparent; color: var(--text); border: 2px solid var(--orange); }
.knopf.rahmen:hover { background: var(--flaeche); color: var(--text); }

/* Abschnitte und Karten */
.abschnitt { padding: 56px 0; }
.abschnitt + .abschnitt { padding-top: 0; }
.raster { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.raster.zwei { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
@media (max-width: 420px) { .raster, .raster.zwei { grid-template-columns: 1fr; } }
.karte { background: var(--flaeche); border-radius: 18px; padding: 24px; }
.karte h3 { color: var(--text); }
.karte .zahl { font: 700 54px/1 "Barlow Condensed", sans-serif; color: var(--orange); }
.karte.bild { padding: 0; overflow: hidden; }
.karte.bild .text { padding: 20px 24px 24px; }
.foto { aspect-ratio: 4 / 3; background: var(--flaeche2) center / cover no-repeat; display: grid; place-items: center; color: var(--leise); font-size: 14px; }
.foto.platzhalter { background-image: repeating-linear-gradient(135deg, #1C1714 0 18px, #221b17 18px 36px); }
.band { background: var(--flaeche2); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); padding: 56px 0; }
.band + .abschnitt, .abschnitt + .band { margin-top: 0; }
img.foto { width: 100%; object-fit: cover; }
.foto.oben { object-position: center 15%; }
.band .seite-logo { width: min(220px, 60%); }
.zitat { font: 700 clamp(28px, 5vw, 46px)/1.1 "Barlow Condensed", sans-serif; text-transform: uppercase; color: var(--orange); }
.zeit { display: inline-block; background: var(--gruen); color: var(--text); border-radius: 999px; padding: 4px 14px; font: 600 18px "Barlow Condensed", sans-serif; margin: 4px 0 12px; }
.seite-logo { width: min(320px, 70%); margin: 0 auto; }
.fussnoten { font-size: 15px; color: var(--leise); }
.fussnoten strong { color: var(--text); }

/* Rechtstexte */
.recht { max-width: 820px; }
.recht h2 { font-size: 30px; margin-top: 1.4em; }
.recht h3 { font-size: 22px; margin-top: 1.2em; color: var(--orange); }
.offen { background: var(--bordeaux); color: var(--text); padding: 2px 6px; border-radius: 6px; }

/* Fuß */
.fuss { background: var(--flaeche2); border-top: 3px solid var(--orange); padding: 40px 0 24px; margin-top: 40px; font-size: 15px; }
.fuss .raster { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.fuss h3 { font-size: 20px; color: var(--orange); }
.fuss a { color: var(--text); }
.fuss ul { list-style: none; padding: 0; }
.fuss .unten { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--linie); display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--leise); }
.fuss .unten a { color: var(--leise); }