/* Vinylstadt Dortmund — Fassung A "Die A-Seite" */

/* Selbst gehostete Schriften (SIL Open Font License 1.1) — beim Seitenaufruf
   entsteht keine Verbindung zu Google. Source Sans 3 ist ein Variable Font:
   eine Datei, aus der der Browser 400 bis 700 interpoliert. */

@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/anton-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/anton-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/source-sans-3-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/source-sans-3-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root{
  --gruen:#5EA455;
  --gruen-hell:#7CC072;
  --orange:#EC551C;
  --orange-hell:#FF7343;
  --schwarz:#0B0B0C;
  --weiss:#FFFFFF;

  --grund:var(--schwarz);
  --text:#F2F3F0;
  --text-leise:#9CA098;
  --linie:rgba(242,243,240,.16);
  --linie-stark:rgba(242,243,240,.34);
  --flaeche:#141613;

  --display:"Anton","Haettenschweiler","Arial Narrow",sans-serif;
  --text-font:"Source Sans 3","Segoe UI",Helvetica,Arial,sans-serif;

  --rand:clamp(18px,4vw,56px);
  --spalte:1280px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--grund);
  color:var(--text);
  font-family:var(--text-font);
  font-size:clamp(16px,1.05vw,18px);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:var(--spalte);margin:0 auto;padding-inline:var(--rand)}

a{color:var(--orange-hell);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--weiss)}
:focus-visible{outline:3px solid var(--gruen-hell);outline-offset:3px}

h1,h2,h3{font-family:var(--display);font-weight:400;text-transform:uppercase;margin:0;text-wrap:balance;letter-spacing:.005em}
p{margin:0}
img{max-width:100%;display:block}

.marke{
  font-family:var(--text-font);font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;font-size:.78rem;color:var(--text-leise);
}

/* ---------- Kopf ---------- */
.kopf{
  border-bottom:1px solid var(--linie);
  position:sticky;top:0;z-index:20;
  background:rgba(11,11,12,.94);
  backdrop-filter:blur(8px);
}
.kopf .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:56px}
.kopf .wort{font-family:var(--display);font-size:1.15rem;letter-spacing:.03em;text-transform:uppercase;color:var(--weiss);text-decoration:none}
.kopf .wort em{font-style:normal;color:var(--orange)}
.kopf nav{display:flex;gap:22px}
.kopf nav a{color:var(--text-leise);text-decoration:none;font-weight:600;font-size:.85rem;text-transform:uppercase;letter-spacing:.1em}
.kopf nav a:hover{color:var(--weiss)}

/* ---------- Held ---------- */
/* Die Platte ist Hintergrund und stark angeschnitten — oben, unten und rechts.
   Gesetzt ist sie über die Bildmaße: Im Motiv liegt das Label bei x 29–70 %,
   y 29–61 % der Bildkante. Bei 80vw Bildbreite und 12vw Überstand nach rechts
   beginnt das Label deshalb bei 55,2vw. Die Textspalte endet spätestens bei 46 %
   der Zeilenbreite — die Headline läuft also über die Rillen, nie über das Label. */
.held{
  position:relative;overflow:hidden;border-bottom:1px solid var(--linie);
  background-image:url(img/keyvisual-perspektivisch.webp);
  background-repeat:no-repeat;
  background-size:80vw auto;
  background-position:right -12vw center;
}
.held::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(11,11,12,.94) 0 12%,rgba(11,11,12,.6) 30%,rgba(11,11,12,0) 54%);
}
.held .wrap{
  position:relative;z-index:2;
  min-height:44vw;
  display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(34px,5vw,64px);
}
.held .wrap > *{max-width:min(46%,620px)}
.held h1{font-size:clamp(2.8rem,8.8vw,7.6rem);line-height:.92}
.held h1 span{display:block}
.held h1 .gruen{color:var(--gruen)}
.held h1 .orange{color:var(--orange)}
.held .lead{margin-top:clamp(16px,2vw,26px);max-width:min(44%,52ch);color:var(--text);font-size:1.05rem}

@media (max-width:760px){
  /* Schmale Schirme: gleiche Rechnung, nur senkrecht gedacht. Bei 145vw Bildbreite
     und 31,2vw Überstand nach rechts liegt das Label bei x 28–88vw — Schwerpunkt
     also leicht rechts. 33,6vw nach oben geschoben endet es bei y 55vw; darunter
     stehen Headline und Teaser auf den Rillen, die bis y 93vw reichen. */
  .held{
    background-size:145vw auto;
    background-position:right -31.2vw top -33.6vw;
  }
  .held::after{
    background:linear-gradient(180deg,
      rgba(11,11,12,0) 0 44%,
      rgba(11,11,12,.42) 56%,
      rgba(11,11,12,.86) 72%,
      var(--schwarz) 92%);
  }
  .held .wrap{
    min-height:0;
    padding-top:58vw;
    padding-bottom:clamp(28px,7vw,44px);
  }
  .held .wrap > *,.held .lead{max-width:none}
  .held h1{font-size:clamp(2.5rem,12.5vw,4.4rem)}
  .held .lead{margin-top:14px}
}
/* ---------- Abschnittsköpfe ---------- */
.abschnitt{padding-block:clamp(44px,6vw,86px)}
.abschnitt-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:clamp(20px,2.6vw,34px)}
.abschnitt-kopf h2{font-size:clamp(1.9rem,4.2vw,3.2rem);line-height:.95;color:var(--weiss)}
.abschnitt-kopf .hinweis{color:var(--text-leise);font-size:.95rem}

/* ---------- Trackliste ---------- */
.liste{border-top:1px solid var(--linie-stark)}

/* Der Kopf klebt oben — Sprungziele halten seine Höhe plus etwas Luft frei. */
.laden,.abschnitt{scroll-margin-top:70px}
.laden{border-bottom:1px solid var(--linie)}
.laden > summary{
  display:grid;grid-template-columns:3.2rem minmax(0,1fr) minmax(0,12rem) 2.2rem;
  gap:clamp(10px,1.6vw,22px);align-items:center;
  padding-block:clamp(14px,1.6vw,20px);
  cursor:pointer;list-style:none;
}
.laden > summary::-webkit-details-marker{display:none}
.laden > summary:hover .name{color:var(--gruen-hell)}

.nr{font-family:var(--display);font-size:1.35rem;color:var(--orange);font-variant-numeric:tabular-nums;line-height:1}
.name{font-family:var(--display);font-size:clamp(1.35rem,2.6vw,2.1rem);line-height:1;text-transform:uppercase;color:var(--weiss)}
.adresse{color:var(--text-leise);font-size:.95rem}
/* Grün heißt aufgeklappt — dieselbe Farbe wie beim Überfahren, denn beides zeigt
   dasselbe an: diese Zeile ist gerade die angesteuerte. Der Grund bleibt schwarz. */
.laden[open] > summary .name{color:var(--gruen-hell)}

/* Das Plus ist aus zwei Balken gebaut, nicht gesetzt: Antons Pluszeichen ist für
   diesen Zweck zu zierlich, und nur mit eigenen Balken lässt sich die Höhe exakt
   auf die Versalhöhe der Ziffer legen. Aufgeklappt kippt es um 45 Grad zum
   orangen Kreuz — eine Drehung statt eines Zeichenwechsels. */
.pfeil{
  justify-self:end;position:relative;width:1rem;height:1rem;
  transition:transform .18s ease;
}
.pfeil::before,.pfeil::after{
  content:"";position:absolute;inset:0;margin:auto;
  background:var(--gruen);transition:background .18s ease;
}
.pfeil::before{width:100%;height:3px}
.pfeil::after{width:3px;height:100%}
.laden[open] > summary .pfeil{transform:rotate(45deg)}
.laden[open] > summary .pfeil::before,
.laden[open] > summary .pfeil::after{background:var(--orange)}
@media (prefers-reduced-motion:reduce){.pfeil,.pfeil::before,.pfeil::after{transition:none}}

.laden.folgt > summary{cursor:default;opacity:.62}
.laden.folgt > summary:hover .name{color:var(--weiss)}
.laden.folgt .platzhalter{
  font-family:var(--text-font);font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;font-size:.72rem;color:var(--gruen-hell);
  border:1px solid var(--gruen);padding:.25em .7em;justify-self:start;white-space:nowrap;
}

/* ---------- Aufgeklapptes Porträt ---------- */
.portrait{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(20px,3vw,44px);
  padding:clamp(18px,2.4vw,32px) 0 clamp(30px,3.6vw,46px);
}
.portrait .bilder{display:flex;flex-direction:column;gap:12px}
.portrait .bilder img{width:100%;height:auto;background:var(--flaeche)}
/* Briefkopf des Porträts: das Logo stellt den Laden vor, die drei Zahlen
   verankern ihn. Feste Plattenhöhe, damit sehr breite und quadratische Logos
   optisch gleich groß wirken. */
.briefkopf{
  display:flex;flex-direction:column;align-items:flex-start;gap:28px;
  padding-bottom:16px;margin-bottom:24px;
  border-bottom:2px solid var(--linie-stark);
}
.logo-plate{
  background:var(--weiss);height:96px;padding:12px 20px;
  display:flex;align-items:center;justify-content:center;flex:none;
}
.logo-plate img{max-height:100%;width:auto}
.fakten{display:flex;gap:26px;margin:0;flex-wrap:wrap}
.fakten dt{
  font-family:var(--text-font);font-weight:700;text-transform:uppercase;
  letter-spacing:.11em;font-size:.68rem;color:var(--text-leise);
}
.fakten dd{
  margin:0;font-family:var(--display);font-weight:400;font-size:1.5rem;
  color:var(--weiss);line-height:1.05;font-variant-numeric:tabular-nums;
}

.fragen{display:flex;flex-direction:column;gap:14px}
.fragen dt{
  font-family:var(--text-font);font-weight:700;text-transform:uppercase;
  letter-spacing:.11em;font-size:.7rem;margin-bottom:2px;
  /* Halb Orange, halb das gedämpfte Grau der Nebentexte. Die Fragen bleiben als
     Orange erkennbar, rufen aber leiser als die Ziffern in der Liste. Der Hexwert
     davor ist derselbe Ton für Browser ohne color-mix. */
  color:#C47A5A;
  color:color-mix(in srgb,var(--orange) 50%,var(--text-leise));
}
.fragen dd{margin:0;max-width:62ch}

.top5{margin-top:26px;border-top:1px solid var(--linie);padding-top:16px}
.top5 h3{font-size:1.1rem;color:var(--gruen-hell);margin-bottom:8px}
.top5 ol{list-style:none;margin:0;padding:0;counter-reset:t}
.top5 li{counter-increment:t;display:grid;grid-template-columns:1.8rem 1fr;gap:6px;padding:3px 0}
.top5 li::before{content:counter(t);color:var(--text-leise);font-variant-numeric:tabular-nums;font-size:.9rem}
.top5 .quelle{color:var(--text-leise);font-size:.88rem;margin-top:8px}


.kontakt{margin-top:26px;border-top:1px solid var(--linie);padding-top:16px;display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.kontakt h3{font-size:1rem;color:var(--gruen-hell);margin-bottom:6px}
.zeiten{width:100%;border-collapse:collapse;font-size:.95rem}
.zeiten th{text-align:left;font-weight:400;color:var(--text-leise);padding:2px 10px 2px 0}
.zeiten td{text-align:right;font-variant-numeric:tabular-nums;padding:2px 0}
.zeiten .zu{color:var(--text-leise)}
.hinweis-zeit{color:var(--text-leise);font-size:.88rem;margin-top:8px;max-width:38ch}

.wege{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.knopf{
  display:inline-block;text-decoration:none;
  font-family:var(--text-font);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.74rem;
  border:1px solid var(--linie-stark);color:var(--text);padding:.6em 1em;
}
.knopf:hover{border-color:var(--orange);background:var(--orange);color:var(--weiss)}

@media (max-width:900px){
  .laden > summary{grid-template-columns:2.4rem minmax(0,1fr) 2.2rem;row-gap:2px}
  .adresse{grid-column:2}
  .laden.folgt .platzhalter{grid-column:2}
  .portrait{grid-template-columns:1fr}
}

/* ---------- Karte ---------- */
.karte-rahmen{border:1px solid var(--linie);background:var(--grund);padding:clamp(14px,2.4vw,30px);overflow-x:auto}
.karte-rahmen svg{width:100%;height:auto;display:block;min-width:980px}

/* Unterhalb von rund 1120 Pixeln passt der Plan nicht mehr in die Spalte. Dann
   steht er in fester Breite und wird geschoben, mittig beginnend. */
@media (max-width:1120px){
  .karte-rahmen svg{width:980px;min-width:0;max-width:none}
}

@media (max-width:760px){
  /* Von Kante zu Kante. Ein Bild, das am Bildschirmrand abgeschnitten wird, sagt
     von selbst, dass es weitergeht. */
  .karte-rahmen{margin-inline:calc(-1 * var(--rand));border-inline:0;padding-inline:0}
}

/* Quer gehaltenes Telefon: der ganze Plan passt, die feste Breite entfällt. */
@media (orientation:landscape) and (max-height:560px){
  .karte-rahmen{margin-inline:calc(-1 * var(--rand));border-inline:0;padding:8px}
  .karte-rahmen svg{width:100%;min-width:0}
}

/* Eigene Schiebeleiste statt der Systemleiste: Sie nimmt die Farbordnung des
   Plans auf — grüne Spur für die Stadt, orangefarbener Daumen für das, was man
   gerade sieht. Sie erscheint nur, wenn das Skript festgestellt hat, dass der
   Plan überhaupt zu breit ist; ohne Skript bleibt die Systemleiste stehen. */
.karte-anzeige{display:none;padding-block:12px;cursor:grab;touch-action:none}
.karte-anzeige:active{cursor:grabbing}
#karte.schiebbar .karte-anzeige{display:block}
#karte.schiebbar .karte-rahmen{scrollbar-width:none}
#karte.schiebbar .karte-rahmen::-webkit-scrollbar{display:none}
/* Der Daumen ist zwei Pixel dicker als die Spur — daran erkennt man ihn als
   Griff und nicht als Fortschrittsbalken. */
.karte-anzeige .spur{position:relative;display:block;height:3px;border-radius:2px;background:rgba(94,164,85,.32)}
.karte-anzeige .daumen{position:absolute;top:-1px;height:5px;border-radius:3px;background:var(--orange)}

/* ---------- Fuß ---------- */
.fuss{border-top:1px solid var(--linie);background:var(--flaeche)}
.fuss .skyline{color:var(--gruen);padding:clamp(26px,4vw,50px) var(--rand) 0;max-width:var(--spalte);margin-inline:auto}
.fuss .skyline svg{width:100%;height:auto;display:block;stroke-width:.7}
.fuss .unten{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:26px;padding-block:clamp(26px,3.4vw,42px);align-items:start;
}
.fuss h3{font-size:1rem;color:var(--weiss);margin-bottom:8px}
.fuss p,.fuss li{color:var(--text-leise);font-size:.95rem}
.fuss ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.fuss a{color:var(--text-leise)}
.fuss a:hover{color:var(--weiss)}
.foerderer img{width:190px;height:auto;background:var(--weiss);padding:10px 14px}
.copyright{border-top:1px solid var(--linie);padding-block:16px;color:var(--text-leise);font-size:.85rem;display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between}

/* ---------- Rechtstexte ---------- */
.rechtstext{padding-block:clamp(34px,5vw,70px);max-width:74ch}
.rechtstext h1{font-size:clamp(2rem,5vw,3.4rem);margin-bottom:24px;color:var(--weiss)}
.rechtstext h2{font-size:1.3rem;margin:32px 0 8px;color:var(--gruen-hell)}
.rechtstext p{margin-bottom:12px}
.rechtstext .zurueck{margin-top:40px;display:inline-block}