/* ═══════════════════════════════════════════════════════════════════════════
   Union Ruderverein Pöchlarn
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:'Archivo';src:url('../schriften/archivo-latin.woff2') format('woff2');
  font-weight:100 900;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212}
@font-face{font-family:'Archivo';src:url('../schriften/archivo-ext.woff2') format('woff2');
  font-weight:100 900;font-display:swap;unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB}
@font-face{font-family:'Plex';src:url('../schriften/plex-latin.woff2') format('woff2');
  font-weight:400;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122}
@font-face{font-family:'Plex';src:url('../schriften/plex-ext.woff2') format('woff2');
  font-weight:400;font-display:swap;unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20AB}

:root{
  --tief:    #0c2422;   /* Donau im Schatten — der Grund             */
  --tiefer:  #071716;
  --nebel:   #eef1ed;   /* Morgennebel über dem Wasser               */
  --papier:  #f7f8f6;
  --holz:    #b9884e;   /* Riemenholz — der einzige warme Ton        */
  --holz-h:  #d3a068;
  --schrift: #12302e;
  --leise:   #5c716e;   /* Neutral mit Grünstich, nicht reines Grau  */
  --linie:   #d3dad5;
  --linie-d: #1d3c39;

  --max: 1180px;
  --gap: clamp(56px, 8vw, 104px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--papier); color:var(--schrift);
  font:400 17px/1.65 'Plex', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}

h1,h2,h3,.mark{font-family:'Archivo', ui-sans-serif, system-ui, sans-serif; text-wrap:balance}
h2{font-size:clamp(30px,4.4vw,46px); font-weight:800; letter-spacing:-.02em; line-height:1.08; margin:0 0 14px}
h3{font-size:20px; font-weight:700; letter-spacing:-.01em; margin:0 0 8px}
p{margin:0 0 14px; max-width:64ch}

.wrap{max-width:var(--max); margin:0 auto; padding:0 24px}
.band{padding:var(--gap) 0}
.band.dunkel{background:var(--tief); color:var(--nebel)}
.band.dunkel h2{color:#fff}
.band.dunkel .leise{color:#93a8a4}
.leise{color:var(--leise)}

/* Augenbraue: benennt den Abschnitt, nicht nummeriert — die Abschnitte
   sind keine Reihenfolge, sondern Bereiche des Vereinslebens.            */
.brow{
  font-family:'Archivo'; font-size:12px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--holz); margin:0 0 12px;
  display:flex; align-items:center; gap:10px;
}
.brow::after{content:''; height:1px; flex:1; background:currentColor; opacity:.35}

/* ── Kopf ───────────────────────────────────────────────────────────────── */
header{
  position:sticky; top:0; z-index:50; background:rgba(12,36,34,.94);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--linie-d);
}
.nav{display:flex; align-items:center; gap:28px; height:66px}
.nav img{height:34px; width:auto}
.nav nav{margin-left:auto; display:flex; gap:26px; align-items:center}
.nav a{
  color:#cfdbd8; text-decoration:none; font-size:14px; letter-spacing:.01em;
  padding:6px 0; border-bottom:2px solid transparent;
}
.nav a:hover,.nav a:focus-visible{color:#fff; border-bottom-color:var(--holz)}
.nav .btn{margin-left:4px}
.burger{display:none}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  font-family:'Archivo'; font-weight:700; font-size:15px; letter-spacing:.01em;
  padding:13px 24px; border-radius:2px; border:1.5px solid transparent;
  background:var(--holz); color:#12241f; transition:background .15s, transform .15s;
}
.btn:hover{background:var(--holz-h)}
.btn:active{transform:translateY(1px)}
.btn.leer{background:transparent; border-color:currentColor; color:inherit}
.btn.leer:hover{background:rgba(185,136,78,.14)}
a:focus-visible,button:focus-visible{outline:2px solid var(--holz); outline-offset:3px}

/* ── Aufmacher: das Bild führt, nicht die Typografie ────────────────────── */
.hero{position:relative; background:var(--tiefer); overflow:hidden}
.hero img{
  width:100%; height:clamp(340px,58vh,520px); object-fit:cover; object-position:center 42%;
  opacity:.72; filter:saturate(.85) contrast(1.05);
}
.hero .auf{
  position:absolute; inset:0; display:flex; align-items:flex-end;
  background:linear-gradient(180deg, rgba(7,23,22,.35) 0%, rgba(7,23,22,.15) 42%, rgba(7,23,22,.92) 100%);
}
.hero .auf .wrap{width:100%; padding-bottom:clamp(28px,5vw,52px)}
.hero h1{
  font-size:clamp(38px,7vw,80px); font-weight:800; line-height:.98; letter-spacing:-.03em;
  margin:0 0 14px; color:#fff; text-shadow:0 2px 24px rgba(0,0,0,.45);
}
.hero h1 span{display:block; color:var(--holz); font-size:.42em; letter-spacing:.14em;
  text-transform:uppercase; font-weight:700; margin-bottom:14px; text-shadow:none}
.hero p{color:#d8e2df; font-size:clamp(16px,1.9vw,19px); max-width:44ch; margin-bottom:24px}
.hero .knoepfe{display:flex; gap:12px; flex-wrap:wrap}
/* Der Umriss-Knopf erbt sonst die dunkle Textfarbe des Grundtextes und
   verschwindet auf dem Foto. */
.hero .btn.leer{color:#fff; border-color:rgba(255,255,255,.7)}
.hero .btn.leer:hover{background:rgba(255,255,255,.14); border-color:#fff}

/* ── Zahlenband ─────────────────────────────────────────────────────────── */
.zahlen{background:var(--tief); color:var(--nebel); border-top:1px solid var(--linie-d)}
.zahlen .wrap{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--linie-d); padding:0; max-width:var(--max);
}
.zahl{background:var(--tief); padding:30px 24px; text-align:center}
.zahl b{
  display:block; font-family:'Archivo'; font-weight:800; font-size:clamp(32px,4.6vw,50px);
  color:#fff; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1;
}
.zahl span{display:block; margin-top:8px; font-size:13px; color:#93a8a4; letter-spacing:.02em}

/* ── Zweispalter Bild + Text ────────────────────────────────────────────── */
.duo{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,64px); align-items:center}
.duo.gedreht > :first-child{order:2}
.duo figure{margin:0}
.duo figure img{width:100%; height:100%; min-height:260px; object-fit:cover; border-radius:2px}

/* ── Karten ─────────────────────────────────────────────────────────────── */
.karten{display:grid; grid-template-columns:repeat(auto-fit,minmax(238px,1fr)); gap:20px; margin-top:34px}
.karte{
  background:#fff; border:1px solid var(--linie); border-radius:2px; padding:26px 24px;
  display:flex; flex-direction:column; gap:6px;
}
.band.dunkel .karte{background:#0f2b29; border-color:var(--linie-d)}
.band.dunkel .karte h3{color:#fff}
.karte .kopf{
  font-family:'Archivo'; font-size:12px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--holz); margin-bottom:4px;
}
.karte p{margin:0; font-size:15.5px; color:var(--leise)}
.band.dunkel .karte p{color:#93a8a4}

/* ── Weg zum Einstieg: hier IST die Reihenfolge die Information ─────────── */
.schritte{counter-reset:s; display:grid; gap:2px; margin-top:34px; background:var(--linie)}
.schritt{
  counter-increment:s; background:var(--papier); padding:24px 26px 24px 76px; position:relative;
}
.schritt::before{
  content:counter(s,decimal-leading-zero);
  position:absolute; left:26px; top:24px; font-family:'Archivo'; font-weight:800;
  font-size:20px; color:var(--holz); font-variant-numeric:tabular-nums;
}
.schritt h3{margin-bottom:4px}
.schritt p{margin:0; color:var(--leise); font-size:15.5px}

/* ── Flotte ─────────────────────────────────────────────────────────────── */
.flotte{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:2px;
  background:var(--linie-d); margin-top:34px}
.boot{background:var(--tief); padding:22px 18px}
.boot b{display:block; font-family:'Archivo'; font-weight:800; font-size:26px; color:#fff;
  font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.boot span{display:block; margin-top:5px; font-size:13.5px; color:#93a8a4}

/* ── Aktuelles ──────────────────────────────────────────────────────────── */
.news{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:22px; margin-top:34px}
.eintrag{border-top:2px solid var(--holz); padding-top:16px}
.eintrag time{
  display:block; font-family:'Archivo'; font-size:12.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--holz); margin-bottom:7px; font-variant-numeric:tabular-nums;
}
.eintrag h3{font-size:18px; margin-bottom:6px}
.eintrag p{font-size:15px; color:var(--leise); margin:0}

/* ── Kontakt ────────────────────────────────────────────────────────────── */
.kontakt{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,64px)}
.zeile{display:flex; gap:14px; padding:15px 0; border-bottom:1px solid var(--linie-d)}
.zeile:last-child{border-bottom:0}
.zeile dt{width:104px; flex:none; color:#93a8a4; font-size:14px; margin:0}
.zeile dd{margin:0; color:#fff}
.zeile dd a{color:var(--holz-h); text-decoration:none}
.zeile dd a:hover{text-decoration:underline}
dl{margin:0}

footer{background:var(--tiefer); color:#7d918e; padding:30px 0; font-size:13.5px}
.fz{display:flex; gap:18px; flex-wrap:wrap; align-items:center; justify-content:space-between}
footer a{color:#a8bab7; text-decoration:none}
footer a:hover{color:#fff}

@media (max-width:820px){
  .duo,.kontakt{grid-template-columns:1fr}
  .duo.gedreht > :first-child{order:0}
  /* Die drei Zahlen bleiben nebeneinander — sie sind kurz genug und
     stehen gestapelt über die ganze Breite verloren da (05.08. am
     Tablet gesehen). */
  .nav nav{display:none}
  .nav nav.offen{
    display:flex; position:absolute; left:0; right:0; top:66px; flex-direction:column;
    background:var(--tief); padding:18px 24px 24px; gap:4px; border-bottom:1px solid var(--linie-d);
  }
  .nav nav.offen a{padding:11px 0; border-bottom:1px solid var(--linie-d); width:100%}
  .burger{
    display:block; margin-left:auto; background:none; border:1px solid var(--linie-d);
    color:#cfdbd8; border-radius:2px; padding:8px 12px; font:inherit; font-size:14px; cursor:pointer;
  }
  .schritt{padding:20px 20px 20px 66px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important}
}

/* ── Breitband-Bild im Fließtext ────────────────────────────────────────── */
.streifen{margin:34px 0 0}
.streifen img{width:100%; height:clamp(200px,26vw,300px); object-fit:cover;
  object-position:center 40%; border-radius:2px}

/* Bilder in den Meldungen: gleiche Höhe, damit die Spalten ruhig bleiben */
.eintrag img{
  width:100%; height:190px; object-fit:cover; object-position:center 28%;
  border-radius:2px; margin-bottom:14px;
}

/* ── Herausgehobener Satz ───────────────────────────────────────────────── */
.gross{
  font-family:'Archivo'; font-weight:700; font-size:clamp(19px,2.2vw,23px);
  line-height:1.3; color:#fff; letter-spacing:-.01em;
  border-left:3px solid var(--holz); padding-left:18px; margin-top:22px;
}

/* ── Zeitstrahl: die Jahreszahl trägt die Information, nicht ein Ornament ─ */
.strahl{list-style:none; margin:38px 0 0; padding:0; position:relative}
.strahl::before{
  content:''; position:absolute; left:78px; top:8px; bottom:8px;
  width:1px; background:var(--linie);
}
.strahl li{
  display:grid; grid-template-columns:78px 1fr; gap:0 30px;
  padding:15px 0; position:relative;
}
.strahl .jahr{
  font-family:'Archivo'; font-weight:800; font-size:19px; color:var(--leise);
  font-variant-numeric:tabular-nums; letter-spacing:-.01em; padding-top:1px;
}
.strahl li::after{
  content:''; position:absolute; left:74px; top:22px;
  width:9px; height:9px; border-radius:50%;
  background:var(--papier); border:2px solid var(--linie);
}
.strahl h3{font-size:17.5px; font-weight:700; margin:0}
.strahl p{margin:5px 0 0; font-size:15px; color:var(--leise)}

/* Der Weltcup-Sieg ist der Höhepunkt — er darf das auch zeigen */
.strahl li.hoch .jahr{color:var(--holz); font-size:23px}
.strahl li.hoch h3{font-size:22px; color:var(--schrift)}
.strahl li.hoch::after{
  background:var(--holz); border-color:var(--holz); width:13px; height:13px;
  left:72px; top:21px;
}

@media (max-width:600px){
  .strahl::before,.strahl li::after{display:none}
  .strahl li{grid-template-columns:1fr; gap:2px; padding:14px 0;
    border-bottom:1px solid var(--linie)}
  .strahl .jahr{color:var(--holz); font-size:14px; letter-spacing:.08em}
}

/* ═══════════════════════════════════════════════════════════════════════════
   Schärfe: Die Bilder des Vereins sind klein — das größte misst 1140 × 330.
   Kein Bild wird über seine echte Größe hinaus aufgezogen; stattdessen richtet
   sich das Layout nach dem Bild. Das kostet etwas Fläche und bringt Schärfe.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Aufmacher: Bild oben in Originalbreite, Text darunter statt darüber */
.hero{position:static; background:var(--tief); color:var(--nebel);
  padding:0 0 clamp(40px,6vw,64px); border-bottom:1px solid var(--linie-d)}
.hero figure{margin:0 0 clamp(28px,4vw,44px)}
.hero figure img{
  width:100%; max-width:1140px; height:auto; margin:0 auto; display:block;
  border-radius:2px;
}
.hero h1{
  font-family:'Archivo'; font-size:clamp(36px,6vw,68px); font-weight:800;
  line-height:1.0; letter-spacing:-.03em; color:#fff; margin:0 0 16px;
  text-shadow:none;
}
.hero .an{color:#a9bcb8; font-size:clamp(16px,1.9vw,19px); max-width:52ch; margin:0}
.hero .brow{color:var(--holz)}

/* Hochkantbild im Zweispalter: nicht auf Spaltenhöhe strecken */
.duo figure.hoch img{height:auto; min-height:0; max-height:520px; width:auto;
  max-width:100%; margin:0 auto}

/* Breitbilder im Zweispalter bleiben unter ihrer echten Breite */
.duo figure img{max-width:100%}

/* Kleines Porträt im Zeitstrahl — 253 px echte Breite, also klein gezeigt */
.portraet{margin:12px 0 0}
.portraet img{width:150px; height:auto; border-radius:2px}

/* ═══════════════════════════════════════════════════════════════════════════
   Walters Gliederung, 04.08.2026: „wenig Text mit coolen Bildern".
   Deshalb Galerie, größere Bildflächen und ein Zeitstrahl, der auch auf
   dunklem Grund lesbar ist.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Galerie: gleichmäßiges Raster, Bilder füllen ihre Kachel */
.galerie{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:10px; margin-top:34px;
}
.galerie figure{margin:0; overflow:hidden; border-radius:2px; background:#0a1f1e}
.galerie img{
  width:100%; height:210px; object-fit:cover; display:block;
  transition:transform .35s ease;
}
.galerie figure:hover img{transform:scale(1.04)}
@media (prefers-reduced-motion:reduce){ .galerie img{transition:none} }

/* Zeitstrahl auf dunklem Grund */
.band.dunkel .strahl::before{background:var(--linie-d)}
.band.dunkel .strahl li::after{background:var(--tief); border-color:var(--linie-d)}
.band.dunkel .strahl .jahr{color:#93a8a4}
.band.dunkel .strahl h3{color:#fff}
.band.dunkel .strahl p{color:#93a8a4}
.band.dunkel .strahl li.hoch .jahr{color:var(--holz)}
.band.dunkel .strahl li.hoch h3{color:#fff}
.strahl.hell{margin-top:46px}

/* Kontakt auf hellem Grund */
.kontakt.hell .zeile{border-bottom-color:var(--linie)}
.kontakt.hell dt{color:var(--leise)}
.kontakt.hell dd{color:var(--schrift)}
.kontakt.hell dd a{color:#8a5f28}

/* Aufmacherbild darf jetzt größer werden — Walters Fotos haben die Auflösung */
.hero figure img{max-width:100%; max-height:60vh; object-fit:cover}

/* Der Aufmacher zeigt jetzt ein Foto in Originalqualität, kein Hintergrundbild
   hinter Text. Deckkraft und Farbfilter aus der alten Vollbild-Fassung würden
   es abdunkeln — hier zurückgesetzt. */
.hero figure img{opacity:1; filter:none; object-position:center 45%}

/* Der Vierer sitzt im unteren Drittel des Bildes, darüber liegt viel Wasser.
   Ein schmales Band in der Mitte zeigt deshalb nur Spiegelungen. Höher und
   tiefer angesetzt — dann sind Ufer, Boot und Wasser zusammen im Bild. */
.streifen img{height:clamp(300px,40vw,520px); object-position:center 58%}

/* Der Achter läuft schräg durch das obere Bilddrittel, darunter liegt offenes
   Wasser. Der Ausschnitt sitzt deshalb hoch — sonst zeigt der Aufmacher
   Wasser und schneidet das Boot ab. */
.hero figure img{object-position:center 32%}

/* ── Credit ──────────────────────────────────────────────────────────────
   Gleiche Handschrift wie auf rowpilot.at: reiner Text, zentriert unter
   einer Haarlinie, 12,5 px. „Designed by" gedämpft, der Name fett und hell.
   Kein Logo — auf einer Vereinsseite wäre eine Bildmarke im Fuß zu laut.  */
.urheber{
  margin-top:22px; padding-top:18px;
  border-top:1px solid rgba(255,255,255,.12);
  text-align:center; font-size:12.5px; color:#7d918e;
}
.urheber a{
  color:#eef1ed; font-weight:700; text-decoration:none;
  border-bottom:1px solid transparent; transition:border-color .2s;
}
.urheber a:hover{border-bottom-color:var(--holz)}

/* ── Rechtsseiten ───────────────────────────────────────────────────────── */
.band.recht{padding-top:52px}
.recht h1{font-family:'Archivo'; font-size:clamp(32px,4.6vw,46px); font-weight:800;
  letter-spacing:-.02em; margin:0 0 12px}
.recht h2{font-size:20px; margin:34px 0 8px}
.recht .vorspann{font-size:18px; color:var(--leise); max-width:62ch; margin-bottom:8px}
.recht p, .recht li{max-width:70ch}
.recht .fussnote{margin-top:38px; padding-top:20px; border-top:1px solid var(--linie)}
.recht a{color:#8a5f28}

.daten{display:grid; gap:1px; background:var(--linie); margin:30px 0 8px;
  border:1px solid var(--linie); border-radius:2px}
.daten > div{background:#fff; display:grid; grid-template-columns:230px 1fr;
  gap:18px; padding:14px 18px}
.daten dt{font-size:14px; color:var(--leise); margin:0}
.daten dd{margin:0}
.daten .offen{color:#a06a1e; font-style:italic}

.liste-schlicht{margin:12px 0 14px; padding-left:20px}
.liste-schlicht li{margin-bottom:5px}

@media (max-width:640px){
  .daten > div{grid-template-columns:1fr; gap:3px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   Kleine Bildschirme — gemessen, nicht geraten (05.08.2026, 375 px)
   Gefunden: Tippflächen von 18–22 px, drei gestapelte Großzahlen und eine
   einspaltige Galerie. Kein seitliches Scrollen, das war schon in Ordnung.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Tippflächen: Apple und Google nennen 44 bzw. 48 px als Mindestmaß. Mit
   nassen oder kalten Fingern am Steg ist das keine Theorie. */
@media (max-width:820px){
  .zeile dd a, .fz a, .urheber a{
    display:inline-block; padding:11px 2px; margin:-11px 0;
  }
  .recht a{display:inline-block; padding:6px 0}
}

@media (max-width:640px){
  /* Die drei Zahlen sind kurz — sie passen nebeneinander und sparen dem
     Daumen eine ganze Bildschirmhöhe. */
  .zahlen .wrap{grid-template-columns:repeat(3,1fr)}
  .zahl{padding:20px 8px}
  .zahl b{font-size:clamp(22px,7vw,30px)}
  .zahl span{font-size:11px; margin-top:6px; line-height:1.35}

  /* Galerie zweispaltig: sieben Bilder untereinander sind eine Zumutung. */
  .galerie{grid-template-columns:1fr 1fr; gap:8px}
  .galerie img{height:135px}

  /* Etwas mehr Luft am Rand, etwas weniger Abstand zwischen den Bändern */
  .wrap{padding:0 20px}
  :root{--gap:clamp(44px,11vw,72px)}

  /* Überschriften dürfen enger stehen, wenn die Zeile ohnehin umbricht */
  h2{line-height:1.12}
  .recht h1{font-size:30px}
}

@media (max-width:400px){
  .galerie img{height:118px}
  .zahl b{font-size:21px}
}

/* Querformat am Handy: der Aufmacher darf nicht die ganze Höhe fressen */
@media (max-height:520px) and (orientation:landscape){
  .hero figure img{max-height:56vh}
}