/* Gemeinsame Bausteine für ALLE Seiten (Suche, Fakten-Blöcke, Schwerpunkt-Vergleich). Eigene Datei, weil nicht jede Seite css/seiten.css lädt. */
:root{--linie:#dde7ec;--text2:#4a6272}
/* Suche */
.suche-knopf{display:inline-flex;align-items:center;gap:.45rem;margin:0 .4rem;padding:.5rem .95rem;border:1px solid rgba(255,255,255,.28);border-radius:50rem;background:rgba(255,255,255,.06);color:#e6edf2;font-weight:700;font-size:.9rem;transition:background .2s,border-color .2s}
.suche-knopf .ic{width:18px;height:18px}.suche-knopf:hover,.suche-knopf:focus-visible{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.6);color:#fff}
@media(max-width:1199.98px){.suche-knopf{margin:.6rem 0}}
.suche-ov{position:fixed;inset:0;z-index:2000;display:flex;align-items:flex-start;justify-content:center;padding:max(5vh,1rem) 1rem 1rem;background:rgba(4,12,20,.62);backdrop-filter:blur(6px)}
.suche-ov[hidden]{display:none}
body.suche-offen{overflow:hidden}
.suche-box{width:min(720px,100%);max-height:86vh;display:flex;flex-direction:column;overflow:hidden;border-radius:1.4rem;background:#fff;box-shadow:0 2rem 5rem rgba(0,0,0,.4)}
.suche-kopf{display:flex;align-items:center;gap:.8rem;padding:1rem 1.2rem;border-bottom:1px solid var(--linie,#dde7ec)}
.suche-kopf .ic{width:22px;height:22px;flex:none;color:#0a4e7e}
.suche-kopf input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:1.15rem;color:#10222e}
.suche-zu{padding:.2rem .6rem;border:1px solid var(--linie,#dde7ec);border-radius:.5rem;background:#f4f7f9;color:#4a6272;font-size:.75rem;font-weight:700}
.suche-ergebnis{overflow:auto;padding:.6rem}
.suche-gruppe{margin:.7rem .6rem .3rem;color:#0a4e7e;font-size:.7rem;font-weight:850;letter-spacing:.13em;text-transform:uppercase}
.suche-treffer{display:grid;gap:.1rem;padding:.65rem .8rem;border-radius:.8rem;color:#10222e;text-decoration:none}
.suche-treffer b{font-size:.98rem}.suche-treffer small{color:#5b6c78;line-height:1.4;font-size:.82rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.suche-treffer:hover,.suche-treffer.aktiv{background:#e8f3fa}
.suche-leer{margin:1rem .8rem;color:#4a6272}.suche-leer a{color:#0a4e7e;font-weight:700}
.suche-vorschlaege{display:flex;flex-wrap:wrap;gap:.5rem;padding:0 .8rem 1rem}
.suche-vorschlaege button{padding:.4rem .9rem;border:1px solid var(--linie,#dde7ec);border-radius:50rem;background:#f4f7f9;color:#10222e;font-weight:600;font-size:.88rem}
.suche-vorschlaege button:hover{background:#e8f3fa;border-color:#9dc7e3}
.suche-fuss{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin:0;padding:.7rem 1.2rem;border-top:1px solid var(--linie,#dde7ec);background:#f7fafc;color:#5b6c78;font-size:.75rem}
.suche-fuss kbd{color:#10222e;padding:.05rem .4rem;margin:0 .15rem;border:1px solid #cdd8e0;border-bottom-width:2px;border-radius:.35rem;background:#fff;font:inherit;font-weight:700}
@media(max-width:560px){.suche-fuss{display:none}.suche-kopf input{font-size:1rem}}
@media print{.suche-ov,.suche-knopf{display:none!important}}

/* Fakten-Blöcke („Gut zu wissen“, „Auf einen Blick“) */
.fakten-sektion{background:linear-gradient(180deg,#f2f7fa,#fff)}
.fakten-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}
.fakt{display:flex;flex-direction:column;gap:.55rem;padding:1.4rem 1.4rem 1.2rem;border:1px solid var(--linie,#dde7ec);border-radius:1.4rem;background:#fff;transition:transform .25s,box-shadow .25s}
.fakt:hover{transform:translateY(-4px);box-shadow:0 1.2rem 2.6rem rgba(11,55,79,.12)}
.fakt-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid rgba(10,78,126,.28);background:rgba(33,185,239,.1);color:#0a4e7e}
.fakt-ico .ic{width:22px;height:22px}
.fakt b{font:700 1.5rem/1.05 "Barlow Condensed",sans-serif}
.fakt p{margin:0;color:var(--text2,#4a6272);line-height:1.6;font-size:.94rem}
.fakt a{align-self:flex-start;margin-top:auto}
.fakt-knoepfe{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:auto}.fakt-knoepfe a{margin-top:0}
.fakt-fuss{margin:1.2rem 0 0;color:var(--text2,#4a6272)}
.zert-sub{margin:.1rem 0 .4rem;font-weight:700;color:#0a4e7e}


/* Schwerpunkte im Vergleich */
.vgl-schalter{display:inline-flex;align-items:center;gap:.6rem;margin:0 0 1rem;font-weight:700;cursor:pointer}
.vgl-tabelle{width:100%;min-width:640px;border-collapse:separate;border-spacing:0 .35rem}
.vgl-tabelle th,.vgl-tabelle td{padding:.55rem .8rem;background:#fff;vertical-align:middle}
.vgl-tabelle thead th{background:transparent;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:#4a6272}.vgl-tabelle thead small{display:block;font-weight:600;text-transform:none;letter-spacing:0;opacity:.8}
.vgl-tabelle tbody th{border-radius:.8rem 0 0 .8rem;font-weight:600;text-align:left}.vgl-tabelle tbody td:last-child{border-radius:0 .8rem .8rem 0}
.vgl-tabelle tr.gruppe th{background:transparent;padding:1rem .2rem .2rem;color:#0a4e7e;font-size:.72rem;font-weight:850;letter-spacing:.13em;text-transform:uppercase}
.vgl-z{position:relative;text-align:center;width:22%;min-width:120px}
.vgl-z b{position:relative;z-index:1;font:700 1.25rem/1 "Barlow Condensed",sans-serif}.vgl-z.leer b{opacity:.35}
.vgl-balken{position:absolute;left:.5rem;top:.5rem;bottom:.5rem;width:calc((100% - 1rem) * var(--b,0) / 100);max-width:calc(100% - 1rem);border-radius:.5rem;opacity:.18;background:#0a4e7e;transition:width .5s}
.vgl-creative .vgl-balken{background:#9a7a2c}.vgl-industrial .vgl-balken{background:#0a6db5}.vgl-praxis .vgl-balken{background:#2f8f6b}
.vgl-tabelle tfoot th,.vgl-tabelle tfoot td{background:#0a4e7e;color:#fff;border-radius:0}.vgl-tabelle tfoot th{border-radius:.8rem 0 0 .8rem}.vgl-tabelle tfoot td:last-child{border-radius:0 .8rem .8rem 0}

/* Instagram-Feed (js/instagram-feed.js) */
/* ── ATUS Instagram-Feed ──────────────────────────────────────────────────
   Zeigt @atusbaernbach-Beiträge als quadratische Kachel-Grid im ATUS-Stil.
   Gerendert von assets/js/instagram-feed.js in [data-instagram-feed].       */

.ig-feed{--ig-red:#0a4e7e}

/* Kopf: Logo + Handle + Folgen-Button */
.ig-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.ig-head__id{display:flex;align-items:center;gap:14px}
.ig-head__logo{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;color:#fff;
  background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%)}
.ig-head__id .eyebrow{display:block;margin:0 0 2px}
.ig-head__handle{font-weight:800;font-size:1.25rem;color:#111;text-decoration:none;line-height:1.1}
.ig-head__handle:hover{color:var(--ig-red)}
.ig-follow{display:inline-flex;align-items:center;gap:8px;background:var(--ig-red);color:#fff;
  padding:11px 20px;border-radius:999px;font-weight:800;text-decoration:none;line-height:1;
  box-shadow:0 6px 18px rgba(10,78,126,.28);transition:transform .18s ease,box-shadow .18s ease}
.ig-follow:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(10,78,126,.36);color:#fff}
.ig-follow svg{flex:0 0 auto}
.ig-head__cta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ig-wa-join{display:inline-flex;align-items:center;gap:8px;background:#25D366;color:#fff;
  padding:11px 20px;border-radius:999px;font-weight:800;text-decoration:none;line-height:1;
  box-shadow:0 6px 18px rgba(37,211,102,.32);transition:transform .18s ease,box-shadow .18s ease}
.ig-wa-join:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(37,211,102,.42);color:#fff}
.ig-wa-join svg{flex:0 0 auto;width:20px;height:20px}

/* Grid — feste 4 Spalten am Desktop.
   Vorher stand hier auto-fill mit minmax(220px): das ergab je nach Fensterbreite
   mal drei, mal fünf Spalten, und die letzte Reihe blieb oft halb leer. Feste
   Spaltenzahl je Stufe hält das Raster ruhig und die Kacheln gleich groß. */
.ig-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

/* Nachladen */
.ig-more{display:flex;justify-content:center;margin-top:26px}
.ig-more button{display:inline-flex;align-items:center;gap:10px;padding:14px 30px;border:0;
  border-radius:999px;background:#111;color:#fff;font:800 .72rem/1 'Barlow Condensed',Impact,sans-serif;
  letter-spacing:.13em;text-transform:uppercase;cursor:pointer;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.ig-more button:hover{background:#0a4e7e;transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(10,78,126,.32)}
.ig-more button:disabled{opacity:.55;cursor:default;transform:none;box-shadow:none;background:#111}
.ig-more__rest{margin-left:2px;opacity:.6;font-weight:600}
/* Neu nachgeladene Kacheln kurz einblenden, damit man sieht, was dazugekommen ist */
@keyframes ig-auf{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ig-card--neu{animation:ig-auf .35s ease both}
@media(prefers-reduced-motion:reduce){.ig-card--neu{animation:none}}

/* Kachel = ganzer Link */
.ig-card{position:relative;display:block;aspect-ratio:4/5;border-radius:16px;overflow:hidden;
  background:#0d0d0f;text-decoration:none;color:#fff;box-shadow:0 8px 22px rgba(0,0,0,.14);
  transition:transform .25s ease,box-shadow .25s ease}
.ig-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(0,0,0,.24)}
.ig-card__img{position:absolute;inset:0;background-size:cover;background-position:center}
.ig-card__img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.ig-card:hover .ig-card__img img{transform:scale(1.06)}
.ig-card__grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 42%,rgba(0,0,0,.72) 100%)}
.ig-card__badge{position:absolute;top:10px;right:10px;z-index:2;display:grid;place-items:center;
  width:30px;height:30px;color:#fff;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.ig-card__body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:12px 13px;display:flex;
  flex-direction:column;gap:5px}
.ig-card__caption{font-size:.92rem;line-height:1.35;font-weight:600;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ig-card__date{font-size:.76rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;opacity:.85}
.ig-card::after{content:"";position:absolute;inset:0;z-index:3;border-radius:16px;
  box-shadow:inset 0 0 0 0 var(--ig-red);transition:box-shadow .2s ease}
.ig-card:hover::after{box-shadow:inset 0 0 0 3px var(--ig-red)}

/* Ladeplatzhalter (Skeleton) */
.ig-skel{display:block;aspect-ratio:4/5;border-radius:16px;
  background:linear-gradient(100deg,#eceef1 30%,#f6f7f9 50%,#eceef1 70%);
  background-size:200% 100%;animation:ig-shimmer 1.2s infinite}
.ig-grid--one{grid-template-columns:1fr}
@keyframes ig-shimmer{from{background-position:200% 0}to{background-position:-200% 0}}

/* Leerzustand */
.ig-empty{text-align:center;padding:40px 20px;color:#6b7078}
.ig-empty svg{color:#c7ccd3}
.ig-empty p{margin:10px 0 16px;font-weight:600}


/* SEO-/Info-Text über dem Feed (news.html) */
.ig-lead{max-width:880px;margin:-6px 0 28px}
.ig-lead p{margin:0 0 13px;color:var(--text,#6a6a68);line-height:1.75;font-size:1rem}
.ig-lead p:last-child{margin-bottom:0}
.ig-lead__wa{border-left:3px solid #25D366;padding-left:15px}
.ig-lead__wa strong{color:#111}

@media(max-width:600px){
  .ig-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .ig-card{border-radius:13px}
  .ig-card__caption{-webkit-line-clamp:2;font-size:.86rem}
}
/* Tablet: 3 Spalten (zwischen Desktop-4 und Handy-2) */
@media(min-width:601px) and (max-width:900px){.ig-grid{grid-template-columns:repeat(3,1fr)}}

/* ── Startseiten-Kachel „Neuester Beitrag" (verlinkt zu news.html) ── */
.seo-intro__side{display:flex;flex-direction:column;gap:24px;min-width:0}
.ig-card--latest{--ig-red:#0a4e7e}
.ig-latest__tag{position:absolute;top:12px;left:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;
  background:rgba(0,0,0,.55);color:#fff;padding:6px 12px;border-radius:999px;font-size:.7rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.05em}
.ig-latest__tag svg{width:15px;height:15px}
.ig-latest__more{font-size:.84rem;font-weight:800;color:#fff;letter-spacing:.02em}
.ig-latest__more b{color:#ff5b66}

/* ── Popup / Lightbox (ganzer Beitrag auf der eigenen Seite) ──
   Feste Dialog-Höhe → Bild bleibt zentriert (wird nicht „nach unten geschoben"),
   der Text rechts scrollt in sich (eigene Scrollleiste). */
html.ig-lb-open{overflow:hidden}
.ig-lb{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:18px}
.ig-lb[hidden]{display:none}
.ig-lb__backdrop{position:absolute;inset:0;background:rgba(8,8,11,.82)}
.ig-lb__dialog{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);
  width:100%;max-width:960px;height:min(88vh,720px);background:#fff;border-radius:16px;overflow:hidden;
  box-shadow:0 30px 90px rgba(0,0,0,.55)}
.ig-lb__media{min-width:0;min-height:0;overflow:hidden;background:#0b0b0c;display:flex;align-items:center;justify-content:center}
.ig-lb__img{width:100%;height:100%;object-fit:contain;display:block}
.ig-lb__side{min-height:0;height:100%;display:flex;flex-direction:column;padding:22px}
.ig-lb__head{flex:0 0 auto;display:flex;align-items:center;gap:10px;color:#111}
.ig-lb__head svg{color:#c1275f;flex:0 0 auto}
.ig-lb__head strong{display:block;font-size:1.02rem;line-height:1.1}
.ig-lb__date{font-size:.78rem;color:#888;font-weight:700}
.ig-lb__caption{flex:1 1 auto;min-height:0;overflow-y:auto;margin:14px 0;white-space:pre-wrap;color:#333;font-size:.92rem;line-height:1.6}
.ig-lb__share-label{flex:0 0 auto;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#8a9099;margin-bottom:9px}
.ig-lb__actions{flex:0 0 auto;display:flex;gap:8px}
.ig-lb__btn{flex:1 1 0;min-width:0;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  padding:13px 6px;border:0;border-radius:12px;font-weight:800;font-size:.76rem;cursor:pointer;text-decoration:none;color:#fff;
  transition:filter .15s ease,transform .15s ease}
.ig-lb__btn svg{width:22px;height:22px}
.ig-lb__btn:hover{filter:brightness(1.08);transform:translateY(-1px);color:#fff}
.ig-lb__b-ig{background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%)}
.ig-lb__b-fb{background:#1877F2}
.ig-lb__b-wa{background:#25D366}
.ig-lb__close{position:absolute;top:10px;right:12px;z-index:3;width:38px;height:38px;border:0;border-radius:50%;
  background:rgba(0,0,0,.5);color:#fff;font-size:1.7rem;line-height:1;cursor:pointer}
.ig-lb__close:hover{background:rgba(0,0,0,.75)}
@media(max-width:720px){
  .ig-lb{padding:0}
  .ig-lb__dialog{grid-template-columns:1fr;grid-template-rows:minmax(0,auto) minmax(0,1fr);height:100dvh;max-width:none;border-radius:0}
  .ig-lb__media{max-height:45vh}
  .ig-lb__side{padding:18px}
}

/* Begleittext unter dem Feed. Lag frueher im Style-Block der Startseite;
   seit der Feed auf news.html wohnt, gehoert er hierher. */

/* Links (CI-Blau, gut lesbar): kein Hintergrund, nur die SCHRIFTFARBE läuft beim Überfahren/Fokussieren in CI-Blautönen durch,
   die Unterstreichung wächst dabei etwas an. Alle Farben erreichen auf Weiß mindestens 5:1 (#073f69 ≈ 11:1, #0a5a94 ≈ 7:1, #0a6db5 ≈ 5,4:1),
   auf dunklem Grund wechselt die Schrift zwischen Weiß und Hellblau. Der Unterstrich bleibt immer sichtbar (nicht nur Farbe). */
@keyframes linkFarbe{0%{color:var(--lk)}33%{color:var(--lka)}66%{color:var(--lkb)}100%{color:var(--lk)}}
a:not([class]),button.text-link,a.video-link{
  --lk:#0a5a94;--lka:#073f69;--lkb:#0a6db5;
  color:var(--lk);font-weight:650;cursor:pointer;
  text-decoration:underline;text-decoration-thickness:.09em;text-underline-offset:.2em;text-decoration-color:currentColor;
  transition:text-decoration-thickness .25s,text-underline-offset .25s}
a:not([class]):hover,a:not([class]):focus-visible,button.text-link:hover,button.text-link:focus-visible,a.video-link:hover,a.video-link:focus-visible{
  text-decoration-thickness:.16em;text-underline-offset:.26em;
  animation:linkFarbe 1.6s ease-in-out infinite}
a:not([class]):focus-visible,button.text-link:focus-visible,a.video-link:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:2px}
button.text-link{border:0;background:none;padding:0;font:inherit;font-weight:650}
/* auf dunklem Grund: Weiß ↔ Hellblau */
:is(.inner-hero,.finder-karte,.kt-leitung,.cta-band,.fazit-box,.sec.dark,.portfolio-box,.tour-feature,.program-feature,.virtual-stage) :is(a:not([class]),button.text-link,a.video-link){
  --lk:#fff;--lka:#7fd8ff;--lkb:#cfeeff}
/* Footer hat seine eigene Gestaltung */
footer.fuss a:not([class]){animation:none!important;font-weight:inherit}
@media(prefers-reduced-motion:reduce){a:not([class]):hover,a:not([class]):focus-visible,button.text-link:hover,button.text-link:focus-visible,a.video-link:hover,a.video-link:focus-visible{animation:none}}
@media print{a:not([class]){color:#000;text-decoration:underline}}

/* „Link-Knopf“: ein Link, der wie die animierten Knöpfe aussieht (class="link-knopf"; Varianten link-knopf-gold / -dunkel) */
.link-knopf,.fakt a{position:relative;display:inline-flex;align-items:center;gap:.45rem;padding:.55rem 1.15rem;border-radius:50rem;font-weight:800;font-size:.9rem;line-height:1.2;text-decoration:none;color:#fff;
  background:linear-gradient(110deg,#073f69 0%,#0a6db5 42%,#0a7cc0 50%,#0a6db5 58%,#073f69 100%) 0 0/260% 100%;box-shadow:0 .4rem 1rem rgba(7,63,105,.3);animation:linkFluss 3.6s linear infinite;transition:transform .2s,box-shadow .25s}
.link-knopf:hover,.link-knopf:focus-visible,.fakt a:hover,.fakt a:focus-visible{color:#fff;transform:translateY(-3px) scale(1.03);box-shadow:0 .7rem 1.4rem rgba(7,63,105,.38);animation-duration:1.4s;outline:none}
.link-knopf-gold{color:#2a2008;background-image:linear-gradient(110deg,#d8bd78 0%,#f6e3a8 40%,#fff3c9 50%,#f6e3a8 60%,#d8bd78 100%);box-shadow:0 .4rem 1rem rgba(216,189,120,.45)}
.link-knopf-gold:hover,.link-knopf-gold:focus-visible{color:#2a2008}
.link-knopf-dunkel{background-image:linear-gradient(110deg,#111b24 0%,#2c4a63 40%,#4d7392 50%,#2c4a63 60%,#111b24 100%);box-shadow:0 .4rem 1rem rgba(17,27,36,.35)}
/* Hover: der Knopf wird silbern und glänzt weiter (dunkle Schrift bleibt gut lesbar, auch wenn ein anderes Stylesheet die Linkfarbe beim Darüberfahren ändert) */
.link-knopf:hover,.link-knopf:focus-visible,.link-knopf-gold:hover,.link-knopf-gold:focus-visible,.link-knopf-dunkel:hover,.link-knopf-dunkel:focus-visible,.fakt a:hover,.fakt a:focus-visible{color:#0b2236!important;background-image:linear-gradient(110deg,#9aa5ae 0%,#dfe5e9 36%,#fff 50%,#dfe5e9 64%,#9aa5ae 100%);box-shadow:0 .7rem 1.4rem rgba(55,72,88,.32),inset 0 0 0 1px rgba(255,255,255,.65);text-shadow:0 1px 0 rgba(255,255,255,.6)}
@media(prefers-reduced-motion:reduce){.link-knopf,.fakt a{animation:none}}

/* Zwei-Klick-Video */
.video-zweiklick{background:linear-gradient(135deg,#06263e,#0a4e7e 60%,#1b86c4)}
.vz-knopf{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1rem;border:0;background:transparent;color:#fff;cursor:pointer;text-align:center}
.vz-play{display:grid;place-items:center;width:68px;height:68px;border-radius:50%;background:#fff;color:#0a4e7e;box-shadow:0 .6rem 1.6rem rgba(0,0,0,.35);transition:transform .25s}
.vz-knopf:hover .vz-play,.vz-knopf:focus-visible .vz-play{transform:scale(1.12)}
.vz-text{font:700 1.5rem/1 "Barlow Condensed",sans-serif}
.vz-knopf small{max-width:36ch;color:#cfe6f5;font-size:.76rem;line-height:1.4}

.opt-ico .bi{font-size:1.6rem;line-height:1}
footer.fuss .fuss-social a{display:inline-flex;align-items:center;gap:.4rem}
.ig-head__logo .bi,.ig-follow .bi,.ig-lb__btn .bi,.ig-empty .bi,.ig-wa-join .bi{font-size:1.25rem;line-height:1}
.ig-empty .bi{font-size:2.4rem;color:#0a4e7e;display:block;margin-bottom:.4rem}

/* Medien-Karten in den Farben der Marken (Kontrast ≥ 4,5:1): Galerie in HAK-Gold mit Schwarz, Instagram im Verlauf, Facebook im dunkleren Blau */
.opt-gold,.opt-insta,.opt-fb{border:0;position:relative;overflow:hidden;isolation:isolate}
.opt-gold h3,.opt-gold p,.opt-gold b{color:#14110a}.opt-gold{background:linear-gradient(135deg,#e6cf8e 0%,#d8bd78 55%,#c9aa5f 100%)}
.opt-insta,.opt-fb{color:#fff}.opt-insta h3,.opt-insta p,.opt-insta b,.opt-fb h3,.opt-fb p,.opt-fb b{color:#fff}
.opt-insta{background:linear-gradient(135deg,#c2185b 0%,#8e2ea8 55%,#4b57d6 100%)}
.opt-fb{background:linear-gradient(135deg,#1766d6 0%,#0f4fb3 55%,#0b3a86 100%)}
.opt-gold .opt-ico{background:rgba(20,17,10,.1);color:#14110a}
.opt-insta .opt-ico,.opt-fb .opt-ico{background:rgba(255,255,255,.2);color:#fff}
.opt-gold:hover{box-shadow:0 1.2rem 2.8rem rgba(201,170,95,.45);border-color:transparent}
.opt-insta:hover{box-shadow:0 1.2rem 2.8rem rgba(142,46,168,.4);border-color:transparent}
.opt-fb:hover{box-shadow:0 1.2rem 2.8rem rgba(15,79,179,.4);border-color:transparent}
.opt-gold:after,.opt-insta:after,.opt-fb:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.22) 50%,transparent 65%);background-size:260% 100%;background-position:130% 0;transition:background-position .9s}
.opt-gold:hover:after,.opt-insta:hover:after,.opt-fb:hover:after{background-position:-30% 0}

/* Hero-Slides (Startseite): goldener, animierter Knopf (dunkle Schrift → guter Kontrast) und Text rechts */
@keyframes heroGold{0%{background-position:130% 0}100%{background-position:-130% 0}}
.hero-gold{border:0;color:#2a2008;font-weight:800;background:linear-gradient(110deg,#d8bd78 0%,#f6e3a8 40%,#fff3c9 50%,#f6e3a8 60%,#d8bd78 100%) 0 0/260% 100%;box-shadow:0 .5rem 1.4rem rgba(216,189,120,.5);animation:heroGold 3.6s linear infinite;transition:transform .2s,box-shadow .25s}
.hero-gold:hover,.hero-gold:focus-visible{color:#2a2008;transform:translateY(-3px) scale(1.04);box-shadow:0 .8rem 1.8rem rgba(216,189,120,.6);animation-duration:1.6s}
.hero-layout-rechts .hero-copy{margin-left:auto}
.hero-layout-rechts .hero-shade{transform:scaleX(-1)}
@media(max-width:991.98px){.hero-layout-rechts .hero-copy{margin-left:0}.hero-layout-rechts .hero-shade{transform:none}}
@media(prefers-reduced-motion:reduce){.hero-gold{animation:none}}

/* Fach-Fenster: Handelsschule unter den Jahrgängen III–V ausgerichtet */
.pm-std th small{display:block;margin-top:.1rem;font-size:.66rem;font-weight:700;color:#8a6d1f}
.pm-std .pm-vor{opacity:.38}
.pm-std-hinweis{margin:.4rem 0 .6rem;font-size:.82rem;color:#4a6272}

/* Vorschau-Rahmen der Verwaltung (?vorschau=1) */
html.vorschau main>:not(.hero-carousel),html.vorschau .site-header,html.vorschau .offcanvas,html.vorschau footer.fuss{display:none!important}
html.vorschau .hero-control,html.vorschau .hero-indicators{display:none!important}
html.vorschau,html.vorschau body{overflow:hidden}

/* Dropdown „Sprechstunde am …“ im Stil der Filter-Chips */
.chip.chip-select{display:inline-flex;align-items:center;padding:0;position:relative}
.chip-select select{appearance:none;-webkit-appearance:none;border:0;background:transparent;font:inherit;color:inherit;cursor:pointer;padding:.55rem 2rem .55rem 1rem;border-radius:50rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23201a0c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .8rem center}
.chip-select select:focus-visible{outline:2px solid #073f69;outline-offset:2px}

/* Young Business School: Logo (Header, Footer, Startseiten-Slides) – Klick führt zum Easter Egg */
.ybs-logo{display:none;flex:none;align-items:center;margin-left:.2rem;padding:.2rem .3rem;border-radius:.5rem;transition:transform .3s}
.ybs-logo img{display:block;height:54px;width:auto}
.ybs-logo:hover{transform:rotate(-3deg) scale(1.06)}
@media(min-width:1500px){.ybs-logo{display:inline-flex}}
.ybs-menue{display:block;width:96px;margin:.6rem 0 0}
.ybs-menue img{display:block;width:100%;height:auto}
footer.fuss .ybs-fuss{display:inline-block;color:inherit;text-decoration:none}
footer.fuss .ybs-fuss img{display:block;width:120px;height:auto;margin-bottom:.5rem;transition:transform .3s}
footer.fuss .ybs-fuss:hover img{transform:rotate(-3deg) scale(1.06)}
.hero-ybs{position:absolute;z-index:6;right:clamp(1rem,3vw,3rem);top:clamp(1rem,3vw,2.4rem);width:clamp(84px,10vw,150px);filter:drop-shadow(0 .2rem .8rem rgba(0,0,0,.45));transition:transform .3s}
.hero-ybs img{display:block;width:100%;height:auto}
.hero-ybs:hover{transform:rotate(-3deg) scale(1.06)}
.hero-ybs:focus-visible{outline:3px solid #d8bd78;outline-offset:4px;border-radius:.4rem}
@media(max-width:575.98px){.hero-ybs{width:72px;top:.7rem;right:.7rem}}

/* Sichtbare H1 der Startseite unter den drei Schwerpunkten */
.h1-sektion{padding-block:clamp(2.4rem,5vw,4rem) 0}
.h1-sektion .sec-head{margin-bottom:0}
.h1-sektion h1{margin:.2rem 0 .8rem;font:700 clamp(2.6rem,5vw,4.6rem)/.92 "Barlow Condensed",sans-serif;letter-spacing:-.03em}
.h1-sektion h1 span{color:var(--industrial)}

/* Panorama-Foto auf die Personen zuschneiden (links im Bild), statt eine schmale Leiste mit leerer Fläche zu zeigen */
.bild-rund.bild-quadrat{aspect-ratio:1/1;max-width:460px;margin-inline:auto;object-position:6% 40%;box-shadow:0 1.4rem 3.4rem rgba(7,43,67,.16),0 0 0 .55rem #fff,0 0 0 .75rem #d8bd78}