/* Adler-Schützen Köln Zollstock 1930 e. V.
   Entwurf von Velora. Ein einziges Stylesheet, keine Abhängigkeiten,
   keine externen Schriften. Alles läuft ohne Verbindung nach außen. */

:root {
  --tanne:       #1c3a2b;
  --tanne-hell:  #2c5641;
  --tanne-tief:  #142a1f;
  --messing:     #a8823f;
  --messing-hell: #d5b675;
  --sand:        #f6f3ec;
  --sand-tief:   #ece6da;
  --papier:      #ffffff;
  --text:        #21231f;
  --text-weich:  #55584f;
  --linie:       #ddd7c9;
  --breite:      1120px;
}
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--sand);
  color: var(--text);
  font: 17px/1.68 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .serif { font-family: Georgia, "Iowan Old Style", "Times New Roman", serif; font-weight: 700; }
h1 { font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1.14; margin: 0 0 .5em; letter-spacing: -.01em; }
h2 { font-size: clamp(1.45rem, 3vw, 2.05rem); line-height: 1.22; margin: 0 0 .6em; }
h3 { font-size: 1.16rem; line-height: 1.35; margin: 0 0 .4em; }
p  { margin: 0 0 1.05em; }
a  { color: var(--tanne-hell); }
img { max-width: 100%; display: block; }

.huelle { width: min(100% - 2.5rem, var(--breite)); margin-inline: auto; }
.schmal { width: min(100% - 2.5rem, 760px); margin-inline: auto; }

/* ---------- Entwurfshinweis ---------- */
.entwurf {
  background: #12140f; color: #efe9d8; font-size: .78rem; letter-spacing: .06em;
  text-transform: uppercase; text-align: center; padding: .55rem 1rem;
}
.entwurf b { color: var(--messing-hell); }

/* ---------- Sprungmarke ---------- */
.skip {
  position: absolute; left: -9999px; background: var(--tanne); color: #fff;
  padding: .8rem 1.2rem; z-index: 100;
}
.skip:focus { left: .8rem; top: .8rem; }

:where(a, button, summary, input, textarea):focus-visible {
  outline: 3px solid var(--messing); outline-offset: 3px; border-radius: 2px;
}

/* ---------- Kopf ---------- */
.kopf { background: var(--tanne); color: #eae5d6; }
.kopf-innen { display: flex; align-items: center; gap: 1.1rem; padding: 1.05rem 0; flex-wrap: wrap; }
.marke { display: flex; align-items: center; gap: .85rem; text-decoration: none; color: inherit; margin-right: auto; }
.marke svg { width: 46px; height: 46px; flex: 0 0 auto; }
.marke-text { line-height: 1.2; }
.marke-text strong { display: block; font-family: Georgia, serif; font-size: 1.14rem; letter-spacing: .01em; color: #fff; }
.marke-text span { font-size: .74rem; letter-spacing: .17em; text-transform: uppercase; color: var(--messing-hell); }

nav.haupt ul { display: flex; gap: .3rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
nav.haupt a {
  display: block; padding: .5rem .85rem; border-radius: 4px; text-decoration: none;
  color: #d9d3c2; font-size: .95rem;
}
nav.haupt a:hover { background: var(--tanne-hell); color: #fff; }
nav.haupt a[aria-current="page"] { color: #fff; box-shadow: inset 0 -2px 0 var(--messing); }

/* ---------- Titelbereich ---------- */
.buehne { background: var(--tanne-tief); color: #ece7d9; padding: clamp(3rem, 8vw, 5.6rem) 0; }
.buehne h1 { color: #fff; }
.buehne p.vor {
  font-size: .8rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--messing-hell); margin-bottom: 1rem;
}
.buehne p.lauf { font-size: 1.13rem; color: #cfcabb; max-width: 46rem; }
.buehne-raster { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 820px) { .buehne-raster { grid-template-columns: 1fr; } }

.knopfleiste { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.6rem; }
.knopf {
  display: inline-block; padding: .85rem 1.5rem; border-radius: 3px; text-decoration: none;
  font-weight: 700; font-size: .97rem; border: 2px solid transparent;
}
.knopf-voll { background: var(--messing); color: #17190f; }
.knopf-voll:hover { background: var(--messing-hell); }
.knopf-linie { border-color: #6d7a6f; color: #e6e1d2; }
.knopf-linie:hover { border-color: var(--messing-hell); color: #fff; }

/* ---------- Abschnitte ---------- */
section { padding: clamp(2.6rem, 6vw, 4.4rem) 0; }
section.hell { background: var(--papier); }
section.sand { background: var(--sand-tief); }

.ueberschrift { margin-bottom: 2rem; }
.ueberschrift .vor {
  font-size: .76rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--messing); font-weight: 700; margin-bottom: .5rem;
}
.ueberschrift p { color: var(--text-weich); max-width: 44rem; margin-bottom: 0; }

/* ---------- Karten ---------- */
.raster { display: grid; gap: 1.3rem; }
.raster-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.raster-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.karte {
  background: var(--papier); border: 1px solid var(--linie); border-radius: 5px;
  padding: 1.5rem 1.6rem;
}
section.hell .karte { background: var(--sand); }
.karte h3 { margin-bottom: .35rem; }
.karte p:last-child { margin-bottom: 0; }
.karte .zahl {
  font-family: Georgia, serif; font-size: 2.4rem; line-height: 1; color: var(--tanne);
  display: block; margin-bottom: .3rem;
}

/* ---------- Termine ---------- */
.termin {
  display: grid; grid-template-columns: 108px 1fr; gap: 1.4rem;
  padding: 1.3rem 0; border-top: 1px solid var(--linie); align-items: start;
}
.termin:first-of-type { border-top: 0; }
.termin .wann {
  font-family: Georgia, serif; color: var(--tanne); font-size: 1.02rem; font-weight: 700;
}
.termin .wann small { display: block; font-weight: 400; color: var(--text-weich); font-size: .84rem; letter-spacing: .04em; }
.termin p { margin: .2rem 0 0; color: var(--text-weich); }
@media (max-width: 560px) { .termin { grid-template-columns: 1fr; gap: .3rem; } }

/* Marke und Text stehen in zwei Spalten, damit umbrechende Zeilen
   unter dem Text weiterlaufen und nicht unter der Marke. */
.ablauf { list-style: none; margin: 0; padding: 0; }
.ablauf li {
  display: grid; grid-template-columns: 7.2rem 1fr; column-gap: 1rem;
  padding: .75rem 0 .75rem 1.6rem; border-bottom: 1px solid var(--linie);
  position: relative;
}
.ablauf.zahlen li { grid-template-columns: 2rem 1fr; }
.ablauf li:last-child { border-bottom: 0; }
.ablauf li::before {
  content: ""; position: absolute; left: 0; top: 1.5rem;
  width: 7px; height: 7px; border-radius: 50%; background: var(--messing);
}
.ablauf b { color: var(--tanne); }
@media (max-width: 560px) {
  .ablauf li, .ablauf.zahlen li { grid-template-columns: 1fr; row-gap: .15rem; }
}

/* ---------- Hervorhebung ---------- */
.hinweiskasten {
  background: var(--tanne); color: #e9e4d5; border-radius: 5px;
  padding: clamp(1.6rem, 4vw, 2.4rem);
}
.hinweiskasten h2, .hinweiskasten h3 { color: #fff; }
.hinweiskasten a { color: var(--messing-hell); }

.zitat {
  border-left: 3px solid var(--messing); padding: .3rem 0 .3rem 1.4rem;
  font-family: Georgia, serif; font-size: 1.24rem; line-height: 1.5; color: var(--tanne);
  margin: 1.6rem 0;
}
.zitat cite { display: block; font: 400 .88rem/1.5 -apple-system, Arial, sans-serif; color: var(--text-weich); margin-top: .6rem; font-style: normal; }

/* ---------- Bilder / Platzhalter ---------- */
.galerie { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
.platzhalter {
  aspect-ratio: 4 / 3; border: 1px dashed #b9b09a; border-radius: 4px;
  background: repeating-linear-gradient(45deg, #efe9dc, #efe9dc 9px, #e7e0d1 9px, #e7e0d1 18px);
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: #7a7260; padding: 1rem;
}
.platzhalter span { font-size: .84rem; line-height: 1.45; }
.platzhalter.hoch { aspect-ratio: 3 / 4; }

/* Früher „.offen“: die Kästen mit offenen Fragen an den Verein. Die
   waren für die Entwurfsphase gedacht und standen nach dem Livegang
   versehentlich öffentlich auf vier Seiten. Sie sind raus; die Fragen
   stehen jetzt in offene-fragen-kampf.md.
   Geblieben ist der Kasten selbst, für Hinweise an die Besucher. */
.hinweis {
  background: #fdf6e3; border: 1px solid #e3d5ab; border-left: 3px solid var(--messing);
  border-radius: 4px; padding: 1rem 1.2rem; font-size: .93rem; color: #6b5c33;
}
.hinweis strong { color: #4d411f; }

/* ---------- Tabelle ---------- */
table.liste { width: 100%; border-collapse: collapse; }
table.liste th, table.liste td { text-align: left; padding: .7rem .6rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
table.liste th { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-weich); font-weight: 700; }
table.liste td:first-child { font-weight: 700; color: var(--tanne); white-space: nowrap; }

/* ---------- Fuß ---------- */
.fuss { background: var(--tanne-tief); color: #b9b5a6; padding: 3rem 0 2rem; font-size: .93rem; }
.fuss a { color: #d6d0be; }
.fuss-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 2rem; }
.fuss h3 { color: #fff; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; font-family: inherit; margin-bottom: .8rem; }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: .4rem; }
.fuss-unten { border-top: 1px solid #2a4536; margin-top: 2.2rem; padding-top: 1.2rem; display: flex; gap: 1rem; flex-wrap: wrap; justify-content: space-between; font-size: .85rem; }

/* ---------- Ergänzungen für die Fassung mit echten Inhalten ---------- */

/* Das echte Vereinslogo im Kopf. Feste Maße, damit beim Laden nichts springt.

   Die helle Scheibe darunter ist kein Schmuck, sondern nötig. Der Adler
   im Wappen ist Linienzeichnung mit durchsichtiger Fläche — er hat keine
   eigene Füllung. Auf dem dunkelgrünen Kopf lief deshalb das Grün durch
   den Vogel hindurch, und aus dem Adler wurde ein dunkler Fleck. Auf
   hellem Grund ist er weiß, so wie er gedacht ist.

   Dazu kommt: Ein Wappen mit Eichenkranz, Schriftring und Jahreszahlen
   hat viel Feinzeichnung. Unter 60 Punkten wird daraus Grieß. 68 Punkte
   sind das Wenigste, bei dem der Schriftzug noch als Schrift zu erkennen
   ist. */
.wappen {
  width: 68px; height: 68px; flex: none; object-fit: contain;
  background: var(--sand); border-radius: 50%; padding: 6px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}

/* Fotos füllen ihren Platz und behalten dabei ihr Seitenverhältnis. */
main img, .galerie img {
  display: block; width: 100%; height: auto; border-radius: 10px;
}
.buehne-raster img { aspect-ratio: 4 / 3; object-fit: cover; }
.raster-2 img { aspect-ratio: 3 / 4; object-fit: cover; object-position: top center; }
.galerie img { aspect-ratio: 4 / 3; object-fit: cover; }

/* Zwischenüberschrift über einer Tabelle. */
.untertitel {
  margin: 2.2rem 0 .7rem; font-size: 1.05rem; letter-spacing: .01em;
}
.untertitel:first-of-type { margin-top: 0; }

/* Woher eine Angabe stammt. Bewusst leise. */
.quelle {
  margin-top: 1rem; font-size: .85rem; color: var(--text-weich);
}
.hinweiszeile {
  margin-top: 1.4rem; padding-top: 1rem;
  border-top: 1px solid var(--linie); font-size: .95rem;
}

/* Tagesüberschrift in der Festfolge. */
.tagestitel {
  margin: 2.2rem 0 .2rem; padding-bottom: .4rem;
  border-bottom: 2px solid var(--gold); font-size: 1.15rem;
}
.tagestitel:first-of-type { margin-top: 1rem; }
.tagesnote { margin: .5rem 0 0; font-size: .95rem; color: var(--text-weich); }

/* Jahreslisten: Jahr links, Name rechts, saubere zweite Spalte auch beim Umbruch. */
.jahre { list-style: none; margin: 0; padding: 0; }
.jahre li {
  display: grid; grid-template-columns: 5.6rem 1fr; gap: .8rem;
  padding: .42rem 0; border-bottom: 1px solid var(--linie);
  font-size: .95rem; align-items: baseline;
}
.jahre li b { font-variant-numeric: tabular-nums; color: var(--text-weich); font-weight: 600; }
.jahre.breit li { grid-template-columns: 8.5rem 1fr; }

@media (max-width: 620px) {
  .jahre li, .jahre.breit li { grid-template-columns: 5rem 1fr; gap: .6rem; font-size: .9rem; }
  .wappen { width: 56px; height: 56px; padding: 5px; }
}

/* Vierer-Raster für die Beitragskarten. */
.raster-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
@media (max-width: 900px) { .raster-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .raster-4 { grid-template-columns: 1fr; } }

/* Nummerierte Schritte, Zahl und Text sauber in zwei Spalten. */
.schritte { list-style: none; counter-reset: s; margin: 1.4rem 0 0; padding: 0; }
.schritte li {
  counter-increment: s; display: grid; grid-template-columns: 2.4rem 1fr;
  gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--linie);
}
.schritte li::before {
  content: counter(s); grid-row: span 2;
  font-weight: 700; font-size: 1.3rem; color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.schritte li b { display: block; }
.schritte li span { color: var(--text-weich); font-size: .95rem; }

/* Zusatzangaben in den Jahreslisten. */
.jahre em { font-style: normal; color: var(--gold); font-size: .85em; }
.jahre abbr { text-decoration: none; color: var(--text-weich); cursor: help; }

/* Terminkalender: Monate nebeneinander, innerhalb je Monat eine Liste. */
.monatsraster {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.6rem 2rem; margin-top: 1.6rem;
}
.monat h3 {
  margin: 0 0 .5rem; padding-bottom: .35rem; font-size: 1rem;
  border-bottom: 2px solid var(--gold);
}
.kalender { list-style: none; margin: 0; padding: 0; }
.kalender li {
  display: grid; grid-template-columns: 2.2rem 1fr; gap: .6rem;
  padding: .5rem .5rem .5rem .35rem; border-bottom: 1px solid var(--linie);
  font-size: .92rem; align-items: baseline;
}
.kalender li b {
  font-variant-numeric: tabular-nums; color: var(--text-weich);
  font-weight: 600; text-align: right;
}
/* Eigene Termine heben sich ab, ohne zu schreien. */
.kalender li.eigen { background: var(--sand); border-radius: 4px; }
.kalender li.eigen b { color: var(--gruen); }
.kalender .uhr {
  display: block; font-size: .82rem; color: var(--text-weich);
  font-variant-numeric: tabular-nums;
}

/* Grußworte: mehrere Zitate untereinander, etwas ruhiger als das große
   Einzelzitat auf der Startseite. */
.zitat.gruss {
  font-size: 1.02rem; line-height: 1.62; margin: 0 0 1.6rem;
  padding: 1.1rem 0 1.1rem 1.3rem;
}
.zitat.gruss:last-child { margin-bottom: 0; }

/* ── Das Schloss im Fußbereich ─────────────────────────────────────────
   Sitzt in fuss-unten und fällt dort niemandem ins Auge, der es nicht
   sucht. Genau das ist gewollt: Der Bereich geht nur Mitglieder etwas
   an, und ein großer Knopf „INTERN" in der Hauptnavigation würde den
   Rest der Seite verstellen.                                        */
.schloss-verweis {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  text-decoration: none;
  opacity: .72;
}
.schloss-verweis:hover,
.schloss-verweis:focus-visible { opacity: 1; }
.schloss-verweis svg {
  width: 1em;
  height: 1em;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Sponsorenstreifen auf der Startseite ──────────────────────────────
   Elf Betriebe in gleich hohen Kacheln.

   WARUM KACHELN UND KEINE KREISE
   Die Kreis-Idee scheiterte an den Logos selbst. In einem 76-Pixel-
   Kreis bleibt nach dem Polster ein Quadrat von 48 Pixeln. Der
   Zollstocker Hof ist 1480 x 190 Pixel — daraus würde ein sechs Pixel
   hoher Strich. Bei druck·ideen und net@com wären es elf Pixel.
   Am 11. September alle Logos durchgerechnet; drei von acht wären
   unlesbar gewesen.

   WARUM JEDE KACHEL EINEN EIGENEN GRUND HAT
   Barberclub und net@com sind hell auf dunklem Grund. Ohne Kachel
   stünden sie als schwarze Rechtecke zwischen den übrigen. Dieselbe
   Lösung wie auf der Sponsorenseite.

   Die Höhe ist fest, die Breite richtet sich nach dem Logo. So haben
   alle dieselbe optische Größe, egal ob quadratisch oder achtmal so
   breit wie hoch.                                                  */
.marken {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  justify-content: center;
  align-items: stretch;
}
.marke-kachel {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 74px;
  min-width: 120px;
  padding: .7rem 1rem;
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: 5px;
  text-decoration: none;
  transition: border-color .15s, transform .15s;
}
.marke-kachel:hover,
.marke-kachel:focus-visible {
  border-color: var(--messing);
  transform: translateY(-2px);
}
/* Die Kachel begrenzt NICHT die Breite, das Bild tut es. Sonst
   entscheidet bei breiten Logos die Kachelbreite über die Höhe, und
   der Zollstocker Hof (1480 x 190) schrumpft auf einen Strich, während
   das quadratische Barberclub-Zeichen die volle Höhe bekommt.
   So bekommt jedes Logo dieselben 44 Pixel Höhe, solange es dafür
   nicht breiter als 230 Pixel wird. */
.marke-kachel img {
  max-height: 44px;
  max-width: 230px;
  width: auto;
  height: auto;
  object-fit: contain;
}
/* Wo kein Logo vorliegt, steht der Name — in derselben Serifenschrift
   wie die Überschriften, damit die Lücke nicht das Auffälligste ist. */
.marke-kachel.schrift {
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-size: .95rem;
  line-height: 1.25;
  color: var(--tanne);
  font-weight: 700;
  text-align: center;
}
span.marke-kachel { cursor: default; }
span.marke-kachel:hover { border-color: var(--linie); transform: none; }

@media (max-width: 560px) {
  .marken { gap: .6rem; }
  .marke-kachel { height: 62px; min-width: 104px; padding: .5rem .7rem; }
  .marke-kachel img { max-height: 36px; max-width: 170px; }
  .marke-kachel.schrift { font-size: .85rem; }
}