/* =========================================================
   norbert endres · womenand.men
   Ein Stylesheet für die ganze Seite.
   Alle Farben und Maße stehen unter :root — dort ändern,
   dann gilt es überall.
   ========================================================= */

:root{
  /* --- Farben --------------------------------------------------- */
  --petrol:      #289CA8;   /* Wortmarke, Menü-Hover, Links       */
  --petrol-satt: #1F7C86;   /* Petrol dunkler, wo Kontrast nötig  */
  --rot:         #DC3220;   /* Marker, aktiver Menüpunkt, Knöpfe  */
  --rot-satt:    #B8281A;   /* Knopf beim Draufzeigen             */
  --orange:      #F08A18;   /* Überschriften, Action              */
  --orange-satt: #C46A08;   /* Orange als Textfarbe auf Weiß      */

  --text:        #666666;   /* Fließtext, 5,7:1 auf Weiß          */
  --text-leise:  #7F7F7F;   /* Statement, Bildunterschriften      */
  --schwarz:     #1A1A1A;
  --weiss:       #FFFFFF;
  --papier:      #F4F6F7;
  --linie:       #DFE4E7;

  /* --- Maße ----------------------------------------------------- */
  --breite:      1180px;
  --breite-text: 700px;
  --luft:        clamp(3.5rem, 7vw, 7rem);

  /* --- Schrift -------------------------------------------------- */
  --display: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --lauftext: -apple-system, BlinkMacSystemFont, "Segoe UI",
              Roboto, "Helvetica Neue", Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--weiss);
  color:var(--text);
  font-family:var(--lauftext);
  font-size:clamp(1rem,.96rem + .2vw,1.125rem);
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
}

img,video{ max-width:100%; height:auto; display:block; }

a{ color:var(--petrol-satt); text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:3px; }
:focus-visible{ outline:3px solid var(--orange); outline-offset:3px; }

.zur-hauptsache{
  position:absolute; left:-9999px;
  background:var(--petrol-satt); color:#fff; padding:.75rem 1.25rem; z-index:200;
}
.zur-hauptsache:focus{ left:1rem; top:1rem; }

.mitte{
  width:100%; max-width:var(--breite);
  margin-inline:auto;
  padding-inline:clamp(1.25rem,4vw,2.5rem);
}
.schmal{ max-width:var(--breite-text); }

/* =========================================================
   Typografie
   ========================================================= */

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:800;
  letter-spacing:-.025em;
  line-height:1.1;
  margin:0 0 .55em;
  text-wrap:balance;
  color:var(--orange-satt);          /* Überschriften in Orange */
}
h1{ font-size:clamp(2.3rem,1.4rem + 4vw,4.2rem); }
h2{ font-size:clamp(1.8rem,1.3rem + 2.2vw,2.8rem); }
h3{ font-size:clamp(1.15rem,1.05rem + .6vw,1.5rem); letter-spacing:-.015em; }
h4{ font-size:1.02rem; letter-spacing:0; color:var(--schwarz); }

/* Zweigeteilte Überschrift: ruhiges Statement, dann der Akzent */
.statement{ color:var(--text-leise); display:block; }
.akzent{ color:var(--orange-satt); display:block; }

p{ margin:0 0 1.2em; }
p:last-child{ margin-bottom:0; }

/* Marker über der Überschrift */
.marker{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.72rem; font-weight:700;
  letter-spacing:.19em; text-transform:uppercase;
  color:var(--rot);
  margin:0 0 1.1rem;
}
.marker::before{ content:""; width:1.9rem; height:3px; background:var(--rot); flex:none; }

.vorspann{
  font-size:clamp(1.08rem,1rem + .45vw,1.35rem);
  line-height:1.55; color:var(--schwarz);
}
.leise{ color:var(--text-leise); font-size:.88rem; line-height:1.5; }

/* =========================================================
   Kopfzeile mit Klappmenü
   ========================================================= */

.kopf{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid var(--linie);
}
.kopf-innen{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; min-height:4.5rem;
}

.wortmarke{
  font-family:var(--display);
  font-size:1.02rem; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--petrol); white-space:nowrap;
}
.wortmarke:hover{ text-decoration:none; color:var(--petrol-satt); }
.wortmarke span{ color:var(--rot); }

/* Schalter fürs Handy */
.menue-schalter{
  display:none;
  background:none; border:1px solid var(--linie); border-radius:2px;
  padding:.55rem .8rem; cursor:pointer;
  font-family:var(--lauftext); font-size:.8rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--petrol-satt);
}

.navi > ul{
  display:flex; align-items:center;
  gap:clamp(.9rem,2vw,1.9rem);
  list-style:none; margin:0; padding:0;
}
.navi a{
  display:block;
  color:var(--schwarz);
  font-size:.87rem; font-weight:600; letter-spacing:.04em;
  padding:.4rem 0;
  border-bottom:2px solid transparent;
  white-space:nowrap;
}
.navi a:hover{ color:var(--petrol); text-decoration:none; border-bottom-color:var(--petrol); }
.navi a[aria-current="page"],
.navi .hier > a{ color:var(--petrol-satt); }

/* Ebene 2 */
.hat-unterpunkte{ position:relative; }
.unterpunkte{
  position:absolute; top:100%; left:-1rem;
  min-width:15rem;
  background:var(--weiss);
  border:1px solid var(--linie);
  box-shadow:0 12px 32px rgba(26,26,26,.10);
  list-style:none; margin:0; padding:.5rem 0;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
}
.hat-unterpunkte:hover .unterpunkte,
.hat-unterpunkte:focus-within .unterpunkte{
  opacity:1; visibility:visible; transform:translateY(0);
}
.unterpunkte a{
  padding:.55rem 1.2rem;
  font-size:.86rem; font-weight:500; letter-spacing:0;
  border-bottom:0; white-space:normal;
}
.unterpunkte a:hover{ background:var(--papier); color:var(--petrol-satt); border-bottom:0; }
.unterpunkte .kommt-noch{
  padding:.55rem 1.2rem;
  font-size:.82rem; color:#AAB2B8; font-style:italic;
}

@media(max-width:60rem){
  .menue-schalter{ display:block; }
  .navi{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    background:var(--weiss);
    border-bottom:1px solid var(--linie);
    box-shadow:0 12px 32px rgba(26,26,26,.10);
    max-height:calc(100vh - 4.5rem); overflow-y:auto;
  }
  .navi.offen{ display:block; }
  .navi > ul{ display:block; padding:.75rem 0; }
  .navi > ul > li{ border-bottom:1px solid var(--linie); }
  .navi > ul > li:last-child{ border-bottom:0; }
  .navi a{ padding:.85rem clamp(1.25rem,4vw,2.5rem); border-bottom:0; }
  .navi > ul > li > a{ font-size:.95rem; font-weight:700; }
  .unterpunkte{
    position:static; opacity:1; visibility:visible; transform:none;
    border:0; box-shadow:none; padding:0 0 .6rem;
    background:var(--papier);
  }
  .unterpunkte a{ padding-left:calc(clamp(1.25rem,4vw,2.5rem) + 1rem); }
  .unterpunkte .kommt-noch{ padding-left:calc(clamp(1.25rem,4vw,2.5rem) + 1rem); }
}

/* =========================================================
   Höhenprofil als Abschnittstrenner
   ========================================================= */

.profil{ display:block; width:100%; height:clamp(38px,5vw,56px); margin-top:var(--luft); }
.profil .berg{ fill:none; stroke:var(--linie); stroke-width:2; }
.profil .gipfel{ fill:var(--orange); }
.profil .start{ fill:var(--rot); }

/* =========================================================
   Abschnitte
   ========================================================= */

.abschnitt{ padding-block:var(--luft); }
.abschnitt-grau{ background:var(--papier); }
.kopfzeile{ max-width:var(--breite-text); margin-bottom:clamp(2rem,4vw,3rem); }

/* =========================================================
   Aufmacher
   ========================================================= */

.aufmacher{ padding-block:clamp(2.5rem,5vw,4.5rem) 0; }
.aufmacher-raster{
  display:grid; gap:clamp(2rem,4vw,3.5rem);
  grid-template-columns:1fr; align-items:center;
}
@media(min-width:56rem){ .aufmacher-raster{ grid-template-columns:1.02fr .98fr; } }

.film{
  position:relative; overflow:hidden; border-radius:2px;
  background:var(--papier);
  box-shadow:0 1px 3px rgba(26,26,26,.08), 0 14px 40px rgba(26,26,26,.10);
}
.film video{ width:100%; display:block; }
.film .bildtext{
  position:absolute; left:0; right:0; bottom:0;
  padding:2.5rem 1rem .8rem;
  background:linear-gradient(to top,rgba(26,26,26,.8),transparent);
  color:#fff; font-size:.78rem; letter-spacing:.05em;
}

/* Panorama-Aufmacher */
.panorama{ position:relative; margin-bottom:clamp(2rem,4vw,3rem); }
.panorama img{ width:100%; border-radius:2px; }

/* =========================================================
   Knöpfe
   ========================================================= */

.knopfreihe{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:1.9rem; }

.knopf{
  display:inline-block; padding:.82rem 1.7rem;
  background:var(--rot); color:#fff;
  font-size:.9rem; font-weight:700; letter-spacing:.03em;
  border:2px solid var(--rot); border-radius:2px;
  transition:background .18s ease, border-color .18s ease;
}
.knopf:hover{ background:var(--rot-satt); border-color:var(--rot-satt); color:#fff; text-decoration:none; }

.knopf-leer{ background:transparent; color:var(--petrol-satt); border-color:var(--petrol); }
.knopf-leer:hover{ background:var(--petrol-satt); border-color:var(--petrol-satt); color:#fff; }

/* Herunterladen */
.download{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.72rem 1.2rem;
  border:2px solid var(--orange); border-radius:2px;
  color:var(--orange-satt); background:#FFF8EE;
  font-size:.85rem; font-weight:700;
}
.download:hover{ background:var(--orange); color:var(--schwarz); text-decoration:none; }
.download::before{ content:"↓"; font-size:1.05rem; }
.downloadreihe{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.5rem; }

/* =========================================================
   Laufband
   ========================================================= */

.laufband{
  margin-top:var(--luft);
  border-block:1px solid var(--linie);
  padding-block:1rem; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.laufband-spur{ display:flex; width:max-content; animation:laufen 25s linear infinite; }
.laufband-spur span{
  padding-inline:1.6rem;
  font-size:.8rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-leise); white-space:nowrap;
}
.laufband-spur span::after{ content:"•"; margin-left:1.6rem; color:var(--orange); }
@keyframes laufen{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media(prefers-reduced-motion:reduce){
  .laufband-spur{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* =========================================================
   Karten
   ========================================================= */

.karten{
  display:grid; gap:clamp(1.4rem,2.5vw,2.2rem);
  grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));
}
.karte{
  display:flex; flex-direction:column;
  background:var(--weiss); border:1px solid var(--linie); border-radius:2px;
  overflow:hidden; transition:border-color .18s ease, transform .18s ease;
}
.karte:hover{ border-color:var(--orange); transform:translateY(-3px); }
.karte img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.karte-inhalt{ padding:1.3rem 1.4rem 1.5rem; }
.karte-inhalt h3{ margin-bottom:.4rem; }
.karte-inhalt p{ font-size:.92rem; margin:0; }
.karte a{ color:inherit; }
.karte a:hover{ text-decoration:none; }
.karte .weiter{
  display:block; margin-top:.9rem;
  font-size:.8rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--rot);
}

/* Karte mit Bildmarke statt Foto */
.karte-marke{ text-align:center; padding-top:1.8rem; }
.karte-marke img{ width:8rem; height:8rem; aspect-ratio:1; margin-inline:auto; object-fit:contain; }

/* =========================================================
   Bildstrecken
   ========================================================= */

.bildreihe{
  display:grid; gap:1.2rem;
  grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));
}
.bildreihe figure{ margin:0; }
.bildreihe img{ width:100%; border-radius:2px; }
.bildreihe figcaption{ margin-top:.55rem; font-size:.82rem; color:var(--text-leise); line-height:1.45; }

.paar{ display:grid; gap:1.2rem; grid-template-columns:1fr; }
@media(min-width:44rem){ .paar{ grid-template-columns:1fr 1fr; } }

/* Bild responsiv: quer am Rechner, hochkant am Handy */
.bild-wechsel .quer{ display:block; }
.bild-wechsel .hoch{ display:none; }
@media(max-width:36rem){
  .bild-wechsel .quer{ display:none; }
  .bild-wechsel .hoch{ display:block; }
}

/* =========================================================
   Story-Baustein (Outdoor-Ausfahrten)
   ========================================================= */

.story{
  border-top:3px solid var(--linie);
  padding-top:2.2rem; margin-top:3rem;
}
.story:first-of-type{ border-top:0; margin-top:0; padding-top:0; }
.story-raster{ display:grid; gap:clamp(1.4rem,3vw,2.4rem); grid-template-columns:1fr; }
@media(min-width:52rem){ .story-raster{ grid-template-columns:1.1fr .9fr; align-items:start; } }
.story-bilder{ display:grid; gap:1rem; grid-template-columns:1fr 1fr; }
.story-bilder img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:2px; }
.story-daten{
  display:flex; flex-wrap:wrap; gap:1.4rem;
  margin:1.2rem 0;
  padding:.9rem 0; border-block:1px solid var(--linie);
}
.story-daten div{ font-size:.85rem; }
.story-daten dt{
  font-size:.68rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-leise); margin-bottom:.15rem;
}
.story-daten dd{ margin:0; font-weight:700; color:var(--schwarz); font-variant-numeric:tabular-nums; }

/* =========================================================
   Kursplan
   ========================================================= */

.kurstabelle{ width:100%; border-collapse:collapse; margin-bottom:2rem; }
.kurstabelle caption{
  text-align:left; font-size:.74rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--rot); padding-bottom:.85rem;
}
.kurstabelle th{
  text-align:left; font-size:.7rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--text-leise);
  padding:.6rem .9rem .6rem 0; border-bottom:2px solid var(--schwarz);
}
.kurstabelle td{
  padding:.92rem .9rem .92rem 0; border-bottom:1px solid var(--linie);
  vertical-align:top; font-size:.95rem;
}
.kurstabelle .tag{ font-weight:700; white-space:nowrap; color:var(--schwarz); }
.kurstabelle .zeit{ font-variant-numeric:tabular-nums; white-space:nowrap; font-weight:600; color:var(--schwarz); }
.kurstabelle .hinweis{ color:var(--rot); font-weight:600; }

@media(max-width:40rem){
  .kurstabelle thead{ display:none; }
  .kurstabelle tr{ display:block; padding:1rem 0; border-bottom:1px solid var(--linie); }
  .kurstabelle td{ display:flex; gap:.75rem; padding:.2rem 0; border:0; }
  .kurstabelle td::before{
    content:attr(data-spalte); flex:0 0 5.5rem;
    font-size:.68rem; font-weight:700; letter-spacing:.1em;
    text-transform:uppercase; color:var(--text-leise); padding-top:.25rem;
  }
}

/* =========================================================
   Zahlenspiegel
   ========================================================= */

.zahlen{
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  background:var(--linie); border:1px solid var(--linie);
}
.zahl{ background:var(--weiss); padding:1.45rem 1.35rem; }
.zahl dt{
  font-size:.68rem; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--text-leise); margin-bottom:.45rem;
}
.zahl dd{
  margin:0; font-family:var(--display);
  font-size:1.65rem; font-weight:800; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; color:var(--schwarz);
}
.zahl .offen{
  display:block; margin-top:.3rem;
  font-family:var(--lauftext); font-size:.76rem; font-weight:600;
  letter-spacing:0; color:var(--orange-satt);
}
.zahl.wartet dd{ color:#C3CACF; }

/* =========================================================
   Kästen
   ========================================================= */

.kasten{
  border-left:4px solid var(--orange);
  background:var(--papier);
  padding:1.35rem 1.55rem; margin-block:2rem;
}
.kasten h3{ font-size:1.02rem; margin-bottom:.45rem; }
.kasten p:last-child{ margin-bottom:0; }

.platzhalter{
  border:2px dashed var(--orange);
  background:#FFF8EE;
  padding:1.4rem 1.55rem; margin-block:1.5rem;
  font-size:.9rem; line-height:1.55;
}
.platzhalter strong{
  display:block; color:var(--rot);
  font-size:.7rem; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; margin-bottom:.45rem;
}
.platzhalter code{
  background:#fff; padding:.1rem .35rem;
  border:1px solid var(--linie); font-size:.86em;
}

/* Blindtext erkennbar machen */
.blindtext{ color:#8A9299; }

/* =========================================================
   Partnerlinks
   ========================================================= */

.partnerliste{ list-style:none; margin:1.5rem 0 0; padding:0; }
.partnerliste li{ border-bottom:1px solid var(--linie); }
.partnerliste a{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:.85rem 0; color:var(--schwarz); font-weight:600;
}
.partnerliste a:hover{ color:var(--petrol-satt); text-decoration:none; }
.partnerliste .quelle{ font-size:.8rem; font-weight:400; color:var(--text-leise); white-space:nowrap; }

/* =========================================================
   Fußzeile
   ========================================================= */

.fuss{
  background:var(--schwarz); color:#C2CACF;
  padding-block:clamp(3rem,5vw,4.5rem);
  margin-top:var(--luft); font-size:.92rem;
}
.fuss-raster{ display:grid; gap:2.4rem; grid-template-columns:repeat(auto-fit,minmax(12rem,1fr)); }
.fuss h2{
  font-size:.7rem; font-weight:700; letter-spacing:.17em;
  text-transform:uppercase; color:var(--orange); margin-bottom:.9rem;
}
.fuss a{ color:#fff; }
.fuss ul{ list-style:none; margin:0; padding:0; }
.fuss li{ margin-bottom:.5rem; }
.fuss-schluss{
  margin-top:2.8rem; padding-top:1.4rem;
  border-top:1px solid rgba(255,255,255,.16);
  display:flex; flex-wrap:wrap; gap:1.2rem; justify-content:space-between;
  font-size:.82rem; color:#8B959C;
}

@media print{
  .kopf,.fuss,.laufband,.knopfreihe,.platzhalter{ display:none; }
  body{ font-size:11pt; color:#000; }
}