/* Gemeinsame Basis aller Entwürfe – Schrift selbst gehostet (keine Verbindung zu Google) */
@font-face {
  font-family: "Saira";
  src: url("../fonts/saira-latin-ext.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 50% 125%; font-display: swap;
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Saira";
  src: url("../fonts/saira-latin.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 50% 125%; font-display: swap;
  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;
}

:root {
  --gelb: #F5C400;
  --gelb-hell: #FFE35A;
  --gelb-tief: #C99A00;
  --anthrazit: #1E1E1C;
  --anthrazit-2: #2A2A27;
  --grau: #6B6B66;
  --papier: #FAFAF7;
  --weiss: #FFFFFF;
  --radius: 14px;
  --breite: 1180px;
  --font: "Saira", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 1.0625rem; line-height: 1.6; color: var(--anthrazit); background: var(--papier); }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3 { line-height: 1.1; margin: 0 0 .5em; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
.wrap { width: min(var(--breite), 100% - 32px); margin-inline: auto; }
.ico { width: 1.4em; height: 1.4em; flex: none; }
.breit { font-stretch: 125%; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--gelb); outline-offset: 3px; border-radius: 4px; }

/* Wortmarke – nachgebaut nach Visitenkarte/Schild */
.marke { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; }
.marke img { width: 46px; height: 46px; }
.marke-text { display: flex; flex-direction: column; line-height: 1; }
.marke-text small { font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.marke-text strong { font-size: 1.2rem; font-weight: 800; font-stretch: 125%; letter-spacing: -.01em; margin-top: .2rem; }

/* Karte mit pulsierendem Marker – Kacheln lokal gespeichert, kein externer Kartendienst */
.karte {
  position: relative; overflow: hidden; min-height: 420px;
  background-repeat: no-repeat;
  background-size: max(1300px, 100%) auto;
  background-position: 47.48% 39.8%;
}
.karte-hell   { background-image: url("../map/karte-hell.webp"); }
.karte-dunkel { background-image: url("../map/karte-dunkel.webp"); }
.karte-gelb   { background-image: url("../map/karte-gelb.webp"); }
.marker { position: absolute; left: 47.48%; top: 39.8%; width: 0; height: 0; }
.marker i {
  position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--gelb); border: 4px solid var(--anthrazit); box-shadow: 0 4px 14px rgba(0,0,0,.35); z-index: 2;
}
.marker::before, .marker::after {
  content: ""; position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--gelb); opacity: .55; animation: puls 2.4s cubic-bezier(.2,.6,.3,1) infinite;
}
.marker::after { animation-delay: 1.2s; }
@keyframes puls { from { transform: scale(1); opacity: .6; } to { transform: scale(5.5); opacity: 0; } }
.marker-label {
  position: absolute; left: 22px; top: -20px; white-space: nowrap; z-index: 3;
  background: var(--anthrazit); color: #fff; font-size: .82rem; font-weight: 600; line-height: 1.25;
  padding: .45rem .7rem; border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.marker-label span { display: block; font-weight: 400; opacity: .75; font-size: .75rem; }
.osm { position: absolute; right: 6px; bottom: 4px; font-size: .68rem; background: rgba(255,255,255,.85); color: #333; padding: 1px 6px; border-radius: 4px; z-index: 3; }
.osm a { color: inherit; }

/* Einblenden beim Scrollen */
.rein { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.rein.da { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marker::before, .marker::after { animation: none; opacity: .35; transform: scale(2.2); }
  .rein { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 560px) {
  .marker-label { left: -70px; top: 20px; }
}

/* Entwurfs-Umschalter (nur in den Entwürfen) */
.entwurf-leiste {
  position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 100;
  display: flex; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(20,20,18,.88); backdrop-filter: blur(8px);
  box-shadow: 0 8px 30px rgba(0,0,0,.3); font-size: .8rem;
}
.entwurf-leiste a { color: #fff; text-decoration: none; padding: .35rem .8rem; border-radius: 999px; white-space: nowrap; }
.entwurf-leiste a[aria-current] { background: var(--gelb); color: var(--anthrazit); font-weight: 700; }
@media (max-width: 420px) { .entwurf-leiste { font-size: .7rem; } .entwurf-leiste a { padding: .35rem .55rem; } }