/* ═══════════════════════════════════════════════════════════════════════
   erasmus-stil.css — Designsystem für erasmus-hak.at
   HAK/HAS Voitsberg · Erasmus+

   HERKUNFT / RECHTLICHES
   Dieses Stylesheet ist vollständig neu geschrieben. Es wurde kein CSS,
   kein JavaScript und kein Bildmaterial aus einer fremden Vorlage kopiert.
   Übernommen wurden ausschließlich Gestaltungsentscheidungen — Farbwerte,
   Schriftwahl, Abstände, Anordnung. Solche Ideen sind nicht geschützt;
   geschützt wäre der konkrete Code, und der stammt hier zur Gänze aus
   eigener Feder. Klassennamen sind bewusst eigenständig (deutsch) gewählt,
   damit auch keine zufällige Übereinstimmung entsteht.

   Schriften: Hind (Text) und Lexend (Überschriften), beide SIL Open Font
   License — Selbsthosten ausdrücklich erlaubt. Sie liegen unter
   assets/fonts/, es gibt keinen Aufruf zu Google Fonts oder Bunny.
   Dadurch kein Drittanbieter und keine DSGVO-Frage.

   Bildmaterial unter assets/img/ stammt von der Schule selbst.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Schriften ──────────────────────────────────────────────────────── */
@font-face{font-family:Hind;font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/hind-latin-ext-400-normal.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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:Hind;font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/hind-latin-400-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Hind;font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/hind-latin-ext-500-normal.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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:Hind;font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/hind-latin-500-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Hind;font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/hind-latin-ext-600-normal.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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:Hind;font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/hind-latin-600-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@font-face{font-family:Lexend;font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/lexend-latin-ext-400-normal.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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:Lexend;font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/lexend-latin-400-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Lexend;font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/lexend-latin-ext-500-normal.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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:Lexend;font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/lexend-latin-500-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Lexend;font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/lexend-latin-ext-600-normal.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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:Lexend;font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/lexend-latin-600-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ── Tokens ─────────────────────────────────────────────────────────── */
:root{
  /* ── Hausfarben nach dem Logo ──────────────────────────────────────
     Die Bildmarke kennt genau zwei Farben: Cyan #29b2e7 (Schriftzug
     ERASMUS+, Rahmenbalken) und Grau #4d4d4c (HAK VOITSBERG, die drei
     Stufen). Beide tragen jetzt die ganze Seite.
     --marke ist der exakte Logowert. Für Fließtext und Schaltflächen
     wäre er auf Weiß zu hell (nur 2,4:1 Kontrast), deshalb gibt es mit
     --primaer eine abgedunkelte Fassung derselben Farbe: 4,5:1, damit
     lesbar und barrierefrei. */
  --marke:#29b2e7;         /* exakter Logowert Cyan */
  --primaer:#0b7fae;       /* abgedunkelt für Text, Links, Schaltflächen */
  --primaer-dunkel:#086a92;
  --sekundaer:#4d4d4c;     /* exakter Logowert Grau */
  --headline:#4d4d4c;
  --text:#6a6a68;
  --dunkel:#3a3a39;
  --grau:#e2f3fb;
  --grau-2:#f3fafd;
  --grau-3:#f5fbfe;
  --rand-1:#e8e8e6;
  --rand-2:#cfe3ee;
  --rand-4:#dcdcda;
  --gelb:#f5a623;
  --gruen:#12bb6a;
  --hellblau:#29b2e7;
  --kachel:#29b2e7;        /* Kennzahlen-Kacheln im Logo-Cyan */
  --weiss:#fff;
  --schrift:Hind,system-ui,-apple-system,"Segoe UI",sans-serif;
  --schrift-h:Lexend,Hind,system-ui,sans-serif;
  --schatten:0 10px 20px rgba(0,0,0,.05);
  --schatten-weich:0 0 10px rgba(0,0,0,.05);
  --schatten-hoch:0 16px 34px rgba(8,42,94,.12);
}

/* ── Grundlagen ─────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--schrift);font-size:16px;line-height:1.75;
     color:var(--text);background:var(--weiss);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5{font-family:var(--schrift-h);color:var(--headline);
               line-height:1.2;font-weight:600;margin:0}
p{margin:0 0 1rem}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
ul{margin:0;padding:0;list-style:none}

.behaelter{max-width:1290px;margin:0 auto;padding-inline:clamp(1rem,3vw,2rem)}
.pt-120{padding-top:clamp(3.5rem,8vw,120px)}
.pb-120{padding-bottom:clamp(3.5rem,8vw,120px)}
.pb-90 {padding-bottom:clamp(2.5rem,6vw,90px)}
.pt-100{padding-top:clamp(3rem,7vw,100px)}

/* ── Abschnitts-Kopf ────────────────────────────────────────────────── */
.eyebrow{display:inline-block;line-height:1;background:var(--grau);border-radius:4px;
         padding:7px 15px;font-weight:500;color:var(--primaer);margin:0 0 15px;font-size:15px}
.abschnitt-titel{font-size:clamp(1.7rem,3.4vw,2.5rem);margin:0 0 15px;letter-spacing:-.01em}
.abschnitt-text{max-width:56ch;margin:0}
.titel-reihe{display:flex;align-items:flex-end;gap:1.5rem;flex-wrap:wrap;margin-bottom:2.75rem}
.titel-reihe .rechts{margin-left:auto}
@media(max-width:700px){.titel-reihe .rechts{margin-left:0}}

/* ── Schaltflächen ──────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--schrift);
     font-weight:500;font-size:16px;line-height:1;padding:16px 30px;border-radius:5px;
     border:1px solid transparent;cursor:pointer;transition:.25s;white-space:nowrap}
.btn-primaer{background:var(--primaer);color:var(--weiss)}
.btn-primaer:hover{background:var(--sekundaer)}
.btn-hell{background:var(--weiss);color:var(--sekundaer);border-color:var(--rand-2)}
.btn-hell:hover{background:var(--primaer);color:var(--weiss);border-color:var(--primaer)}
.btn-rand{background:transparent;color:var(--sekundaer);border-color:var(--rand-2)}
.btn-rand:hover{background:var(--sekundaer);color:var(--weiss);border-color:var(--sekundaer)}
.btn-klein{padding:11px 20px;font-size:15px}

/* ── Kopfleiste ─────────────────────────────────────────────────────── */
.kopf{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.94);
      backdrop-filter:blur(10px);border-bottom:1px solid var(--rand-1)}
.kopf .behaelter{display:flex;align-items:center;gap:clamp(1rem,2.5vw,2.25rem);
                 min-height:82px}
.kopf .logo{flex:none}
.kopf .logo img{height:34px;width:auto}
.haupt-nav{display:flex;gap:clamp(1rem,2vw,1.9rem);margin-inline:auto;font-weight:500}
.haupt-nav a{color:var(--sekundaer);padding-block:.4rem;position:relative;transition:.2s}
.haupt-nav a:hover{color:var(--primaer)}
.haupt-nav a[aria-current]{color:var(--primaer)}
.haupt-nav a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:-.15rem;
                                  height:2px;background:var(--primaer);border-radius:2px}
.kopf-werkzeuge{display:flex;align-items:center;gap:.9rem;flex:none}
.kreis{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
       border:1px solid var(--rand-2);color:var(--sekundaer);transition:.2s}
.kreis:hover{background:var(--primaer);border-color:var(--primaer);color:var(--weiss)}
@media(max-width:1150px){.haupt-nav{display:none}}
@media(max-width:520px){.kreis{display:none}}

/* ── Karten (Projekte / Kurse) ──────────────────────────────────────── */
.karten-raster{display:grid;gap:30px;grid-template-columns:repeat(3,1fr)}
@media(max-width:1200px){.karten-raster{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.karten-raster{grid-template-columns:1fr}}

.karte{display:flex;flex-direction:column;padding:10px;background:var(--weiss);
       border-radius:6px;box-shadow:var(--schatten);transition:.3s}
.karte:hover{box-shadow:var(--schatten-hoch);transform:translateY(-5px)}
.karte-bild{position:relative;display:block;overflow:hidden;border-radius:4px;z-index:1}
.karte-bild .flaeche{aspect-ratio:16/10;transition:transform .5s ease}
.karte:hover .karte-bild .flaeche{transform:scale(1.06)}
/* Glanz-Wisch beim Überfahren */
.karte-bild::before{content:"";position:absolute;top:0;left:-75%;z-index:2;width:50%;height:100%;
  background:linear-gradient(90deg,hsla(0,0%,100%,0) 0,hsla(0,0%,100%,.35) 100%);
  transform:skewX(-25deg)}
.karte:hover .karte-bild::before{animation:glanz .9s}
@keyframes glanz{100%{left:125%}}

.karte-tag{position:absolute;left:22px;top:22px;z-index:3;font-size:15px;font-weight:500;
           line-height:1;border-radius:50px;padding:6px 16px;background:var(--weiss);
           color:var(--primaer)}
.karte-tag.gelb {background:var(--gelb);color:#4a3400}
.karte-tag.gruen{background:var(--gruen);color:#fff}
.karte-tag.blau {background:var(--primaer);color:#fff}

.karte-inhalt{padding:20px 13px 10px;display:flex;flex-direction:column;flex:1}
.karte-inhalt .titel{font-size:19px;font-weight:500;line-height:1.38;margin:0 0 16px}
.karte:hover .karte-inhalt .titel{color:var(--primaer)}
.karte-meta{display:flex;flex-wrap:wrap;align-items:center;gap:0 22px;margin:0 0 10px;
            font-size:15px;color:var(--text)}
.karte-meta span{display:inline-flex;align-items:center;gap:.4rem}
.karte-meta svg{color:var(--primaer);flex:none}
.karte-fuss{display:flex;align-items:center;flex-wrap:wrap;justify-content:space-between;
            gap:.75rem;padding:15px 0 0;margin:20px 0 0;border-top:1px solid var(--rand-4);
            margin-top:auto}
.karte-preis{font-size:20px;font-weight:500;color:var(--primaer);font-family:var(--schrift-h)}
.karte-bewertung{display:flex;align-items:center;gap:6px;color:#f8bc24;font-size:15px}

/* ── Seitenleisten-Widgets ──────────────────────────────────────────── */
.widget{border:1px solid var(--rand-1);box-shadow:var(--schatten-weich);border-radius:8px;
        padding:25px 30px;background:var(--weiss);margin-bottom:30px}
.widget-titel{font-size:19px;font-weight:500;margin:0 0 20px}

/* ── Kennzahlen ─────────────────────────────────────────────────────────
   Vier hellblaue Kacheln, wie auf der bestehenden Seite: Symbol, Zahl,
   Beschriftung — jeweils zentriert. */
.fakten{background:var(--weiss)}
.fakten .raster{display:grid;gap:24px;grid-template-columns:repeat(4,1fr);
                padding-block:clamp(2.5rem,6vw,80px)}
@media(max-width:1000px){.fakten .raster{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.fakten .raster{grid-template-columns:1fr}}
.fakt{background:var(--kachel);border-radius:8px;text-align:center;color:#fff;
      padding:clamp(1.75rem,3vw,2.4rem) 1.25rem;transition:.25s}
.fakt:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(63,169,212,.32)}
.fakt svg{width:44px;height:44px;display:block;margin:0 auto 1rem;
          color:rgba(255,255,255,.88)}
.fakt b{display:block;font-family:var(--schrift-h);font-size:clamp(1.9rem,4vw,2.6rem);
        font-weight:600;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.fakt span{display:block;margin-top:.65rem;color:rgba(255,255,255,.94);font-size:16px;
           line-height:1.4}

/* ── Fußbereich ─────────────────────────────────────────────────────── */
.fuss{background:var(--dunkel);color:#a8bcd8}
.fuss .raster{display:grid;gap:2.5rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
              padding-block:clamp(2.5rem,6vw,70px)}
.fuss h4{color:#fff;font-size:19px;margin:0 0 1.1rem}
.fuss a:hover{color:#fff}
.fuss li{margin-bottom:.45rem}
.fuss-unten{border-top:1px solid rgba(255,255,255,.1)}
.fuss-unten .behaelter{padding-block:1.4rem;font-size:14px;display:flex;gap:1.5rem;
                       flex-wrap:wrap;justify-content:space-between}

/* ── Entwurfs-Banner ────────────────────────────────────────────────── */
.entwurfs-banner{background:var(--sekundaer);color:#dce8fa;font-size:14px}
.entwurfs-banner .behaelter{padding-block:.6rem;display:flex;gap:.9rem;align-items:center;flex-wrap:wrap}
.entwurfs-banner a{color:#8fc0ff;text-decoration:underline}
.entwurfs-banner strong{color:#fff}

/* ── Animierte Bildmarke ────────────────────────────────────────────────
   Erzählreihenfolge nach der Bedeutung der Marke: erst spannt Erasmus+ den
   Rahmen (blaue Balken oben und unten), dann steigen die drei Schulen als
   Stufen von unten herauf, dann werden beide Schriftzüge geschrieben,
   zuletzt setzt sich das Plus. Danach wechselt die zweite Zeile im Takt
   zwischen HAK und HAS. */
.marke-anim{width:100%;height:auto;display:block}
.marke-anim [data-teil]{opacity:0}
.marke-anim.laeuft [data-teil]{animation-fill-mode:forwards;
                               animation-timing-function:cubic-bezier(.2,.7,.3,1)}
.marke-anim.laeuft .m-rahmen{animation-name:m-balken;animation-duration:.5s}
.marke-anim.laeuft .m-rahmen-oben{animation-delay:.05s}
.marke-anim.laeuft .m-rahmen-unten{animation-delay:.15s}
.marke-anim.laeuft .m-stufe{animation-name:m-stufe;animation-duration:.55s}
.marke-anim.laeuft .m-stufe-3{animation-delay:.45s}
.marke-anim.laeuft .m-stufe-2{animation-delay:.60s}
.marke-anim.laeuft .m-stufe-1{animation-delay:.75s}
.marke-anim.laeuft .m-wort{animation-name:m-schreiben;animation-duration:.95s;
                           animation-delay:.95s;animation-timing-function:cubic-bezier(.55,.05,.3,1)}
.marke-anim.laeuft .m-plus-h{animation-name:m-balken; animation-duration:.35s;animation-delay:1.75s}
.marke-anim.laeuft .m-plus-v{animation-name:m-balkenV;animation-duration:.35s;animation-delay:1.85s}
.marke-anim.laeuft .m-zeile2{animation-name:m-schreiben;animation-duration:.85s;
                             animation-delay:1.55s;animation-timing-function:cubic-bezier(.55,.05,.3,1)}
.m-rahmen,.m-plus-h{transform-box:fill-box;transform-origin:left center}
.m-plus-v{transform-box:fill-box;transform-origin:center top}
.m-stufe{transform-box:fill-box;transform-origin:center}
@keyframes m-balken   {from{opacity:0;transform:scaleX(0)} to{opacity:1;transform:scaleX(1)}}
@keyframes m-balkenV  {from{opacity:0;transform:scaleY(0)} to{opacity:1;transform:scaleY(1)}}
@keyframes m-stufe    {from{opacity:0;transform:translateY(46px)} to{opacity:1;transform:translateY(0)}}
@keyframes m-schreiben{from{opacity:1;clip-path:inset(0 100% 0 0)} to{opacity:1;clip-path:inset(0 0 0 0)}}

/* K ⇄ S: das K wird weggewischt, das S schreibt sich an dieselbe Stelle.
   Die Position des S berechnet JavaScript per getBBox — pixelgenau, ohne
   dass Koordinaten geraten werden müssen. */
.m-glyph-k,.m-glyph-s{transition:clip-path .42s cubic-bezier(.6,0,.35,1)}
.m-glyph-k{clip-path:inset(0 0 0 0);    transition-delay:.38s}
.m-glyph-s{clip-path:inset(0 100% 0 0); transition-delay:0s}
.marke-anim.has .m-glyph-k{clip-path:inset(0 0 0 100%); transition-delay:0s}
.marke-anim.has .m-glyph-s{clip-path:inset(0 0 0 0);    transition-delay:.38s}
.marke-anim:not(.bereit) .m-glyph-k,
.marke-anim:not(.bereit) .m-glyph-s{transition:none}

/* ── Presse-Schau (eigener Slider, ohne jQuery und ohne Fremdbibliothek) ─ */
.presse{position:relative}
.presse-fenster{overflow:hidden}
.presse-spur{display:flex;gap:20px;will-change:transform;
             transition:transform .6s cubic-bezier(.4,0,.2,1)}
.presse-spur.ohne-uebergang{transition:none}
.presse-folie{flex:0 0 auto;border-radius:6px;overflow:hidden;background:var(--grau-2);
              box-shadow:var(--schatten)}
.presse-folie img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;
                  transition:transform .5s ease}
.presse-folie:hover img{transform:scale(1.05)}
.presse-pfeil{position:absolute;top:calc(50% - 26px);width:46px;height:46px;border-radius:50%;
              display:grid;place-items:center;background:var(--weiss);color:var(--sekundaer);
              border:1px solid var(--rand-2);box-shadow:var(--schatten);cursor:pointer;
              transition:.2s;z-index:4}
.presse-pfeil:hover{background:var(--primaer);border-color:var(--primaer);color:#fff}
.presse-pfeil.vor{right:-12px}
.presse-pfeil.zurueck{left:-12px}
@media(max-width:900px){.presse-pfeil.vor{right:4px}.presse-pfeil.zurueck{left:4px}}
.presse-punkte{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.presse-punkte button{width:10px;height:10px;padding:0;border-radius:50%;border:0;cursor:pointer;
                      background:var(--rand-2);transition:.2s}
.presse-punkte button[aria-current]{background:var(--primaer);width:26px;border-radius:5px}

/* ── Partnerländer ──────────────────────────────────────────────────── */
.legende{display:flex;gap:1.75rem;flex-wrap:wrap;margin:0 0 1.75rem;font-size:15px}
.legende span{display:inline-flex;align-items:center;gap:.55rem}
.legende i{width:15px;height:15px;border-radius:3px;flex:none}
.i-austausch{background:var(--marke)}
.i-kontakt  {background:var(--gelb)}
.i-heimat   {background:var(--sekundaer)}

.laender{display:flex;flex-wrap:wrap;gap:10px}
.land{display:inline-flex;align-items:center;gap:.55rem;padding:9px 16px;border-radius:50px;
      font-size:15px;font-weight:500;border:1px solid var(--rand-2);background:var(--weiss);
      color:var(--sekundaer);transition:.2s}
.land:hover{transform:translateY(-2px);box-shadow:var(--schatten)}
.land i{width:11px;height:11px;border-radius:50%;flex:none}
.land small{color:var(--text);font-weight:400}
.land.austausch{border-color:rgba(41,178,231,.45);background:#e8f6fd}
.land.austausch i{background:var(--marke)}
.land.kontakt{border-color:rgba(245,166,35,.45);background:#fff7ea}
.land.kontakt i{background:var(--gelb)}
.land.heimat{border-color:rgba(77,77,76,.35);background:#f0f0ee}
.land.heimat i{background:var(--sekundaer)}

/* ── Europakarte ────────────────────────────────────────────────────────
   Geometrie aus Natural Earth (gemeinfrei), selbst nach SVG gerechnet.
   Ganze Landesflächen statt Stecknadeln, eingefärbt nach Zusammenarbeit.
   Kein Kartendienst, kein Drittanbieter, kein Cookie-Banner. */
.europa{position:relative;margin-top:2rem;background:#e8f5fc;border:1px solid var(--rand-2);
        border-radius:10px;overflow:hidden}
.europa svg{display:block;width:100%;height:auto}
.land-flaeche{fill:#d5dcdc;stroke:#e8f5fc;stroke-width:.8;stroke-linejoin:round;
              transition:fill .2s}
.land-flaeche.heimat   {fill:var(--sekundaer)}
.land-flaeche.austausch{fill:var(--marke)}
.land-flaeche.kontakt  {fill:var(--gelb)}
.land-flaeche.markiert {cursor:pointer}
.land-flaeche.markiert:hover,
.land-flaeche.markiert:focus{stroke:var(--sekundaer);stroke-width:1.6;outline:none}
.europa-laden{display:grid;place-items:center;aspect-ratio:1/1;color:var(--text);font-size:15px}

.karten-tipp{position:absolute;z-index:5;pointer-events:none;opacity:0;transform:translateY(4px);
             transition:opacity .15s,transform .15s;background:var(--weiss);
             border:1px solid var(--rand-2);border-radius:6px;box-shadow:var(--schatten-hoch);
             padding:10px 14px;max-width:250px}
.karten-tipp.sichtbar{opacity:1;transform:translateY(0)}
.karten-tipp b{display:block;font-family:var(--schrift-h);color:var(--sekundaer);font-size:16px}
.karten-tipp small{display:block;color:var(--text);font-size:14px;margin-top:2px}
.karten-tipp em{display:inline-block;margin-top:6px;font-style:normal;font-size:13px;
                font-weight:500;padding:2px 8px;border-radius:50px}
.karten-tipp em.heimat   {background:#f0f0ee;color:var(--sekundaer)}
.karten-tipp em.austausch{background:#e8f6fd;color:var(--primaer)}
.karten-tipp em.kontakt  {background:#fff7ea;color:#8a5c05}
.karten-quelle{font-size:13px;color:#8ea2c0;margin:.75rem 0 0}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .karte:hover{transform:none}
  .karte:hover .karte-bild .flaeche{transform:none}
  .karte:hover .karte-bild::before{animation:none}
  .marke-anim [data-teil]{opacity:1!important;transform:none!important;
                          clip-path:none!important;animation:none!important}
  .m-glyph-s{display:none}
  .m-glyph-k{clip-path:none!important}
  .presse-spur{transition:none}
  .presse-folie:hover img{transform:none}
  .land:hover{transform:none}
  .fakt:hover{transform:none}
}