/* ═══ A&S Alpha Bau ══════════════════════════════════════════════
   Farben aus dem Firmenlogo: Signalrot und Anthrazit. Der Grund ist
   ein kühles Betongrau, kein Weiß – passt zum Gewerk und lässt das
   Rot arbeiten, ohne dass es schreit.
   ══════════════════════════════════════════════════════════════ */
:root{
  --rot:        #d81f26;
  --rot-tief:   #a8141a;
  --anthrazit:  #1e2226;
  --stahl:      #2b3138;
  --beton:      #eceef0;
  --beton-tief: #dde1e5;
  --weiss:      #fff;
  --text:       #1e2226;
  --leise:      #626a73;
  --linie:      #d3d8dd;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--weiss); color:var(--text);
  font-family:'Barlow', -apple-system, system-ui, sans-serif;
  font-size:17px; line-height:1.65;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--rot); }
h1,h2,h3{
  font-family:'Barlow Condensed', 'Barlow', sans-serif;
  font-weight:700; line-height:1.05; letter-spacing:.005em;
  text-transform:uppercase; margin:0 0 1rem;
}
h1{ font-size:clamp(2.6rem,6vw,4.4rem); }
h2{ font-size:clamp(1.9rem,3.6vw,2.7rem); }
h3{ font-size:1.16rem; text-transform:none; letter-spacing:0; }
.huelle{ max-width:1140px; margin:0 auto; padding:0 1.5rem; }
.abschnitt{ padding:clamp(3.5rem,7vw,6rem) 0; }
.abschnitt.beton{ background:var(--beton); }
.abschnitt.dunkel{ background:var(--anthrazit); color:#e8eaec; }
.abschnitt.dunkel h2{ color:#fff; }

/* Überzeile über jeder Überschrift – rot, kurz, sachlich */
.kicker{
  display:flex; align-items:center; gap:.7rem; margin:0 0 .7rem;
  font-family:'Barlow Condensed', sans-serif; font-weight:600;
  font-size:.92rem; letter-spacing:.18em; text-transform:uppercase; color:var(--rot);
}
.kicker::before{ content:""; width:2rem; height:3px; background:var(--rot); }
.vorspann{ font-size:1.1rem; color:var(--leise); max-width:62ch; margin:0; }
.abschnitt.dunkel .vorspann{ color:#a8b0b8; }

/* ── Kopfzeile ───────────────────────────────────────────────── */
.kopf{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--linie); backdrop-filter:blur(8px);
}
.kopf .huelle{ display:flex; align-items:center; gap:1rem; padding-top:.8rem; padding-bottom:.8rem; }
.marke{ display:flex; align-items:center; gap:.75rem; text-decoration:none; color:inherit; }
.marke img{ width:52px; height:auto; }
.marke b{
  display:block; font-family:'Barlow Condensed',sans-serif; font-size:1.32rem;
  font-weight:700; text-transform:uppercase; letter-spacing:.02em; line-height:1;
}
.marke b span{ color:var(--rot); }
.marke small{
  display:block; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--leise); margin-top:.22rem;
}
nav{ margin-left:auto; display:flex; gap:.2rem; align-items:center; flex-wrap:wrap; }
nav a{
  padding:.55rem .8rem; border-radius:4px; text-decoration:none; color:var(--text);
  font-weight:600; font-size:.95rem;
}
nav a:hover{ background:var(--beton); }
nav a.ruf{ background:var(--rot); color:#fff; }
nav a.ruf:hover{ background:var(--rot-tief); }
.menue-schalter{
  display:none; margin-left:auto; background:none; border:1px solid var(--linie);
  border-radius:4px; padding:.5rem .75rem; font-size:1.2rem; cursor:pointer;
}
/* Bis 1099 px Klappmenü: erst ab 1084 px passen alle Menüpunkte in eine Zeile */
@media(max-width:1099px){
  /* Die Kopfzeile darf umbrechen, sonst quetscht sich das aufgeklappte Menü
     neben Logo und Knopf, statt darunter in voller Breite zu erscheinen. */
  .kopf .huelle{ flex-wrap:wrap; }
  /* Das Logo gibt nach (flex-basis 0), damit der Menüknopf immer in der ersten Zeile bleibt;
     der Leitspruch wird auf sehr schmalen Geräten enger gesetzt und notfalls mit … gekürzt. */
  .marke{ flex:1 1 0; min-width:0; }
  .marke > span{ min-width:0; }
  .marke b, .marke small{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  nav{ display:none; width:100%; order:3; flex-direction:column; align-items:stretch; gap:.1rem;
       padding-top:.6rem; border-top:1px solid var(--linie); }
  nav.offen{ display:flex; }
  nav a{ padding:.8rem .6rem; }
  nav a.ruf{ text-align:center; margin-top:.4rem; }
  .menue-schalter{ display:block; flex:0 0 auto; }
}
@media(max-width:420px){
  .marke small{ font-size:.6rem; letter-spacing:.1em; }
}

/* ── Aufmacher ───────────────────────────────────────────────── */
.aufmacher{
  background:linear-gradient(160deg, var(--anthrazit) 0%, var(--stahl) 100%);
  color:#fff; position:relative; overflow:hidden;
}
.aufmacher::after{
  content:""; position:absolute; right:-8%; top:-30%; width:60%; height:180%;
  background:var(--rot); opacity:.12; transform:skewX(-14deg);
}
.aufmacher .huelle{ position:relative; z-index:1; padding-top:clamp(3.5rem,8vw,6.5rem); padding-bottom:clamp(3.5rem,8vw,6.5rem); }
.aufmacher .kicker{ color:#ff8f93; }
.aufmacher .kicker::before{ background:var(--rot); }
.aufmacher h1{ max-width:20ch; }
.aufmacher h1 em{ font-style:normal; color:var(--rot); }
.aufmacher p{ font-size:1.16rem; max-width:52ch; color:#c3c9cf; }
.claim{
  display:flex; gap:.9rem; flex-wrap:wrap; margin:2rem 0 0; padding:0; list-style:none;
  font-family:'Barlow Condensed',sans-serif; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; font-size:.95rem;
}
.claim li{ display:flex; align-items:center; gap:.9rem; }
.claim li+li::before{ content:""; width:1px; height:1.1rem; background:rgba(255,255,255,.28); }
.knoepfe{ display:flex; gap:.8rem; flex-wrap:wrap; margin-top:2.4rem; }
.knopf{
  display:inline-block; padding:.95rem 1.8rem; border-radius:4px; text-decoration:none;
  font-weight:700; font-size:1rem; background:var(--rot); color:#fff; border:2px solid var(--rot);
  transition:background .16s, border-color .16s;
}
.knopf:hover{ background:var(--rot-tief); border-color:var(--rot-tief); }
.knopf.rand{ background:transparent; color:#fff; border-color:rgba(255,255,255,.55); }
.knopf.rand:hover{ background:rgba(255,255,255,.12); border-color:#fff; }
.knopf.dunkel{ background:var(--anthrazit); border-color:var(--anthrazit); }
.knopf.dunkel:hover{ background:#000; border-color:#000; }

/* ── Leistungen ──────────────────────────────────────────────── */
.raster{ display:grid; gap:1.1rem; margin-top:2.6rem; }
.raster-3{ grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); }
.raster-2{ grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
.leistung{
  background:var(--weiss); border:1px solid var(--linie); border-radius:6px;
  padding:1.6rem 1.5rem; display:flex; flex-direction:column;
  border-top:3px solid var(--rot);
}
.leistung h3{ margin:0 0 .4rem; }
.leistung .kuerzel{
  display:inline-block; font-family:'Barlow Condensed',sans-serif; font-weight:700;
  font-size:.78rem; letter-spacing:.12em; color:var(--rot); margin-bottom:.5rem;
}
.leistung p{ margin:0; color:var(--leise); font-size:.97rem; }

/* Vorteile im dunklen Block */
.vorteil{ display:flex; gap:1rem; align-items:flex-start; }
.vorteil .nr{
  flex:0 0 auto; width:2.6rem; height:2.6rem; border-radius:4px; background:var(--rot);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:1.15rem;
}
.vorteil h3{ margin:0 0 .3rem; color:#fff; }
.vorteil p{ margin:0; color:#a8b0b8; font-size:.97rem; }

/* ── Kontakt ─────────────────────────────────────────────────── */
.kontaktraster{ display:grid; gap:2.5rem; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); margin-top:2.4rem; }
.kontaktzeile{ display:flex; gap:1rem; padding:1.1rem 0; border-bottom:1px solid var(--linie); }
.kontaktzeile:first-child{ border-top:1px solid var(--linie); }
.kontaktzeile dt{
  flex:0 0 8rem; font-family:'Barlow Condensed',sans-serif; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; font-size:.86rem; color:var(--leise); margin:0;
}
.kontaktzeile dd{ margin:0; font-weight:600; }
.kontaktzeile a{ text-decoration:none; }
.kontaktzeile a:hover{ text-decoration:underline; }

/* ── Fußzeile ────────────────────────────────────────────────── */
footer{ background:var(--anthrazit); color:#98a1aa; padding:3.5rem 0 1.6rem; }
footer h4{
  font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:.1em;
  color:#fff; font-size:.95rem; margin:0 0 .8rem;
}
footer a{ color:#c3c9cf; text-decoration:none; }
footer a:hover{ color:#fff; }
.fuss-unten{
  border-top:1px solid rgba(255,255,255,.14); margin-top:2.4rem; padding-top:1.3rem;
  display:flex; gap:1rem; flex-wrap:wrap; justify-content:space-between; font-size:.86rem;
}

/* ── Rechtstexte ─────────────────────────────────────────────── */
.rechtstext{ max-width:44rem; }
.rechtstext h2{ margin-top:2.6rem; font-size:1.5rem; }
.rechtstext p, .rechtstext li{ color:var(--leise); }
.rechtstext strong{ color:var(--text); }

@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

/* ── Aufbauten: Liste zum Aufklappen ─────────────────────────── */
.aufbauten{ margin-top:2.6rem; border-top:1px solid var(--linie); }
.aufbau{ border-bottom:1px solid var(--linie); background:var(--weiss); }
.aufbau-kopf{
  width:100%; display:flex; align-items:center; gap:1.2rem; text-align:left;
  padding:1.4rem 1.4rem 1.4rem 1.2rem; background:none; border:0; cursor:pointer;
  font:inherit; color:inherit;
}
.aufbau-kopf:hover{ background:var(--beton); }
.aufbau-kopf:focus-visible{ outline:3px solid var(--rot); outline-offset:-3px; }
.aufbau-nr{
  flex:0 0 auto; width:2.4rem; height:2.4rem; border-radius:3px;
  background:var(--beton-tief); color:var(--anthrazit);
  font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:1.02rem;
  display:flex; align-items:center; justify-content:center;
}
.aufbau[data-offen="true"] .aufbau-nr{ background:var(--rot); color:#fff; }
.aufbau-titel{ flex:1; }
.aufbau-titel strong{
  display:block; font-family:'Barlow Condensed',sans-serif; font-size:1.24rem;
  text-transform:uppercase; letter-spacing:.01em; line-height:1.2;
}
.aufbau-titel span{ display:block; color:var(--leise); font-size:.95rem; margin-top:.15rem; }
.aufbau-zeichen{
  flex:0 0 auto; width:1.6rem; height:1.6rem; position:relative;
}
.aufbau-zeichen::before, .aufbau-zeichen::after{
  content:""; position:absolute; left:50%; top:50%; background:var(--rot);
  transform:translate(-50%,-50%); transition:transform .22s ease, opacity .22s ease;
}
.aufbau-zeichen::before{ width:1.5rem; height:2.5px; }
.aufbau-zeichen::after{ width:2.5px; height:1.5rem; }
.aufbau[data-offen="true"] .aufbau-zeichen::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.aufbau-inhalt{ overflow:hidden; height:0; transition:height .32s ease; }
.aufbau-innen{ padding:0 1.4rem 1.8rem 5.8rem; }
.aufbau-innen img{
  width:100%; max-width:52rem; border:1px solid var(--linie); border-radius:4px; background:#f4f6f7;
}
.aufbau-innen p{ margin:1rem 0 0; color:var(--leise); max-width:62ch; }
@media(max-width:640px){ .aufbau-innen{ padding:0 1rem 1.5rem 1rem; } }
.hinweis-grafik{
  margin-top:1.6rem; font-size:.88rem; color:var(--leise);
  border-left:3px solid var(--linie); padding-left:.9rem;
}

/* ── Formular ────────────────────────────────────────────────── */
.formular{ display:grid; gap:1rem; margin-top:1.6rem; }
.feld{ display:flex; flex-direction:column; gap:.35rem; }
.feld label{ font-weight:600; font-size:.93rem; }
.feld label .pflicht{ color:var(--rot); }
.feld input, .feld textarea, .feld select{
  font:inherit; font-size:1rem; padding:.8rem .9rem; border:1px solid var(--linie);
  border-radius:4px; background:var(--weiss); color:var(--text); width:100%;
}
.feld input:focus, .feld textarea:focus, .feld select:focus{
  outline:2px solid var(--rot); outline-offset:0; border-color:var(--rot);
}
.feld textarea{ min-height:9rem; resize:vertical; }
.feld-paar{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.honigtopf{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.einwilligung{ display:flex; gap:.7rem; align-items:flex-start; font-size:.92rem; color:var(--leise); }
.einwilligung input{ width:auto; margin-top:.25rem; flex:0 0 auto; }
.formular button[type=submit]{
  justify-self:start; font:inherit; font-weight:700; font-size:1rem; cursor:pointer;
  padding:.95rem 1.9rem; border-radius:4px; background:var(--rot); color:#fff;
  border:2px solid var(--rot);
}
.formular button[type=submit]:hover{ background:var(--rot-tief); border-color:var(--rot-tief); }
.meldung{ padding:1rem 1.2rem; border-radius:4px; font-size:.96rem; }
.meldung.gut{ background:#e8f3e4; border-left:4px solid #3f8f2e; color:#204a17; }
.meldung.schlecht{ background:#fbe9e8; border-left:4px solid var(--rot); color:#7c1a17; }

/* ── Referenzgalerie ─────────────────────────────────────────── */
.galerie{ display:grid; gap:2.4rem; margin-top:2.6rem; }
.stueck{
  display:grid; gap:0; background:var(--weiss); border:1px solid var(--linie);
  border-radius:6px; overflow:hidden;
}
/* Schmal (Handy, Tablet hochkant): Bild in voller Breite und natürlicher Höhe, nichts wird beschnitten.
   Breit: zwei Spalten, das Bild füllt die Höhe des Textes und wird dabei angeschnitten. */
.stueck img{ display:block; width:100%; height:auto; background:var(--beton); }
@media(min-width:900px){
  .stueck{ grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); align-items:stretch; }
  .stueck:nth-child(even) img{ order:2; }
  .stueck img{ height:100%; min-height:16rem; object-fit:cover; }
}
.stueck-text{ padding:2rem 2.2rem; }
.stueck-marke{
  margin:0 0 .5rem; font-family:'Barlow Condensed',sans-serif; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; font-size:.82rem; color:var(--rot);
}
.stueck h2{ margin:0 0 .8rem; font-size:1.5rem; }
.stueck-text p{ margin:0 0 .8rem; color:var(--leise); }
.stueck-text p:last-child{ margin-bottom:0; }

/* ── Kopfbereich: wechselnde Aussagen ────────────────────────── */
/* Die Folien liegen im selben Rasterfeld übereinander – so bestimmt die
   längste die Höhe und nichts überlappt den Claim darunter. */
.wechsler{ display:grid; }
.folie{
  grid-area:1 / 1; opacity:0; transform:translateY(12px);
  transition:opacity .5s ease, transform .5s ease; pointer-events:none;
}
.folie[data-aktiv="true"]{ opacity:1; transform:none; pointer-events:auto; }
.folie h1, .folie h2{
  max-width:20ch; margin:0 0 1rem;
  font-size:clamp(2.6rem,6vw,4.4rem); line-height:1.05;
  font-family:'Barlow Condensed','Barlow',sans-serif; font-weight:700;
  text-transform:uppercase; color:#fff;
}
.folie em{ font-style:normal; color:var(--rot); }
.folie p{ font-size:1.16rem; max-width:52ch; color:#c3c9cf; margin:0; }
.wechsler-punkte{ display:flex; gap:.5rem; margin-top:2.4rem; }
.wechsler-punkte button{
  width:2.2rem; height:4px; padding:0; border:0; border-radius:2px; cursor:pointer;
  background:rgba(255,255,255,.28);
}
.wechsler-punkte button[aria-current="true"]{ background:var(--rot); }
.wechsler-punkte button:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
@media (prefers-reduced-motion: reduce){ .folie{ transition:none; } }

/* ══ Vorspann ══════════════════════════════════════════════════
   Der Aufbau entsteht in Schrägansicht Schicht für Schicht, wie beim
   Einbau selbst. Zum Schluss zieht der Schirm nach oben weg – als würde
   die Abdeckung von der fertigen Fläche genommen. */
.vorspann-schirm{
  position:fixed; inset:0; z-index:200; overflow:hidden; cursor:pointer;
  display:grid; place-items:center;
  background:
    radial-gradient(90% 70% at 50% 30%, #2a3138 0%, #171c21 55%, #0c0f12 100%);
  will-change:transform;
}
.vorspann-schirm[hidden]{ display:none; }
/* Abgang: der Schirm fährt nach oben aus dem Bild */
.vorspann-schirm.faellt{
  transform:translateY(-101%);
  transition:transform .82s cubic-bezier(.76,0,.24,1);
}

/* ── Der Aufbau: gestapelte Lagen mit sichtbarer Materialstärke ─
   Tiefe entsteht über Staffelung, Kantenlicht und Schatten – das ist
   verlässlicher als eine 3D-Drehung, die je nach Fenster aus dem Bild
   rutscht. */
.buehne{
  position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:min(94vw,1180px); display:flex; flex-direction:column-reverse;
  align-items:center; padding-bottom:9vh;
}
.lage{
  position:relative; width:var(--b); border-radius:3px 3px 0 0;
  opacity:0; transform:translateY(30px);
  animation:legt .55s cubic-bezier(.18,.85,.3,1) forwards;
  box-shadow:0 -1px 0 rgba(255,255,255,.16) inset, 0 14px 30px rgba(0,0,0,.5);
}
@keyframes legt{ to{ opacity:1; transform:none } }
.lage i{ position:absolute; inset:0; border-radius:3px 3px 0 0; }

/* von unten nach oben: jede Lage schmaler, so entsteht die Staffelung */
.l1{ height:74px; --b:100%;  background:linear-gradient(180deg,#565c64,#33383e); animation-delay:.10s }
.l2{ height:16px; --b:96.5%; background:linear-gradient(180deg,#6094d2,#3f6ea8); animation-delay:.44s }
.l3{ height:96px; --b:93%;   background:linear-gradient(180deg,#f8d999,#dda446); animation-delay:.72s }
.l4{ height:14px; --b:89.5%; background:linear-gradient(180deg,#f8f2e5,#ded4bf); animation-delay:1.06s }
.l5{ height:54px; --b:86%;   background:linear-gradient(180deg,#e6eaee,#b4bac1); animation-delay:1.28s }

.l3 i{
  background:repeating-linear-gradient(90deg,transparent 0 9.4%,rgba(120,78,18,.26) 9.4% 10%);
  opacity:0; animation:blendet .45s ease 1.0s forwards;
}
.l5 i{
  background:linear-gradient(180deg,rgba(255,255,255,.6),transparent 46%);
  opacity:0; animation:blendet .5s ease 1.54s forwards;
}
@keyframes blendet{ to{ opacity:1 } }

.randstreifen{
  position:absolute; left:calc(50% - min(47vw,590px)); bottom:9vh; width:9px; height:0;
  background:linear-gradient(180deg,#e8433a,#a8141a); border-radius:2px 2px 0 0;
  box-shadow:0 0 20px rgba(216,31,38,.55); z-index:2;
  animation:steigt .5s cubic-bezier(.3,.9,.3,1) 1.5s forwards;
}
@keyframes steigt{ to{ height:268px } }
@media(max-width:700px){
  .l1{ height:52px } .l3{ height:66px } .l5{ height:38px }
}

/* ── Mitte: Logo, Name, Claim ──────────────────────────────── */
.vorspann-mitte{ position:relative; z-index:3; text-align:center; padding:0 1.5rem; transform:translateY(-9vh); }
.vorspann-mitte img{
  width:clamp(8.5rem,22vw,13rem); margin:0 auto;
  opacity:0; transform:translateY(20px) scale(.92);
  animation:kommt .78s cubic-bezier(.2,.9,.28,1) 1.62s forwards;
  filter:drop-shadow(0 22px 46px rgba(0,0,0,.6));
}
@keyframes kommt{ to{ opacity:1; transform:none } }
.vorspann-name{
  margin:1.5rem 0 0; font-family:'Barlow Condensed',sans-serif; font-weight:700;
  font-size:clamp(2.1rem,5.4vw,3.5rem); line-height:1; letter-spacing:.04em;
  text-transform:uppercase; color:#fff;
}
.vorspann-name span{ display:inline-block; opacity:0; transform:translateY(14px);
  animation:kommt .5s cubic-bezier(.2,.9,.3,1) forwards; }
.vorspann-name span:nth-child(1){ color:var(--rot); animation-delay:1.9s }
.vorspann-name span:nth-child(2){ animation-delay:2.02s }
.vorspann-strich{
  height:3px; width:0; background:var(--rot); margin:1.3rem auto 0;
  animation:zieht .55s cubic-bezier(.4,0,.2,1) 2.12s forwards;
}
@keyframes zieht{ to{ width:clamp(4.5rem,12vw,8rem) } }
.vorspann-claim{
  display:flex; gap:1.5rem; justify-content:center; margin:1.1rem 0 0; padding:0; list-style:none;
  font-family:'Barlow Condensed',sans-serif; font-weight:600; letter-spacing:.26em;
  text-transform:uppercase; font-size:clamp(.68rem,1.7vw,.84rem); color:#8d959c;
}
.vorspann-claim li{ opacity:0; animation:kommt .45s ease forwards; }
.vorspann-claim li:nth-child(1){ animation-delay:2.34s }
.vorspann-claim li:nth-child(2){ animation-delay:2.46s }
.vorspann-claim li:nth-child(3){ animation-delay:2.58s }


/* Fortschritt und Hinweis zum Überspringen */
.vorspann-fortschritt{
  position:absolute; left:0; bottom:0; height:3px; width:0; background:var(--rot);
  box-shadow:0 0 14px rgba(216,31,38,.6); z-index:4;
  animation:laeuft 3.4s linear forwards;
}
@keyframes laeuft{ to{ width:100% } }
.vorspann-weiter{
  position:absolute; bottom:1.9rem; left:0; right:0; text-align:center; z-index:4;
  font-family:'Barlow Condensed',sans-serif; font-size:.78rem; letter-spacing:.22em;
  text-transform:uppercase; color:#6d757c; opacity:0;
  animation:kommt .5s ease 2.7s forwards;
}
@media (prefers-reduced-motion: reduce){ .vorspann-schirm{ display:none !important } }

/* ── Galerie (Fotos und Videos) ─────────────────────────────── */
.medien{ display:grid; gap:.8rem; margin-top:2.6rem; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); }
.medium{ position:relative; display:block; border-radius:6px; overflow:hidden; background:var(--beton-tief);
  aspect-ratio:4/3; color:#fff; text-decoration:none; }
.medium img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .45s ease; }
.medium:hover img, .medium:focus-visible img{ transform:scale(1.04); }
.medium:focus-visible{ outline:3px solid var(--rot); outline-offset:3px; }
.medium-titel{ position:absolute; left:0; right:0; bottom:0; padding:1.8rem .9rem .7rem; font-weight:600;
  font-size:.95rem; line-height:1.3; background:linear-gradient(transparent, rgba(16,18,20,.85)); }
.medium-spielen{ position:absolute; top:50%; left:50%; width:3.6rem; height:3.6rem; margin:-1.8rem 0 0 -1.8rem;
  border-radius:50%; background:var(--rot); box-shadow:0 6px 22px rgba(0,0,0,.4); transition:transform .2s ease; }
.medium:hover .medium-spielen{ transform:scale(1.08); }
.medium-spielen::after{ content:""; position:absolute; left:1.4rem; top:1.05rem; border-style:solid;
  border-width:.75rem 0 .75rem 1.2rem; border-color:transparent transparent transparent #fff; }
.medium-dauer{ position:absolute; top:.6rem; right:.6rem; background:rgba(16,18,20,.78); padding:.05rem .45rem;
  border-radius:3px; font-size:.8rem; font-variant-numeric:tabular-nums; }
#galerie .knoepfe{ margin-top:1.6rem; }

.gross{ border:0; padding:0; background:transparent; width:min(94vw,1400px); max-width:none; max-height:none; overflow:visible; }
.gross::backdrop{ background:rgba(12,14,16,.93); }
.gross-buehne{ display:flex; flex-direction:column; align-items:center; gap:.9rem; }
.gross img, .gross video{ max-width:100%; max-height:82vh; border-radius:4px; background:#000; }
.gross-text{ color:#e8eaec; text-align:center; max-width:70ch; margin:0; }
.gross-text strong{ display:block; font-size:1.1rem; }
.gross-zu, .gross-pfeil{ position:fixed; z-index:2; width:3rem; height:3rem; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.14); color:#fff; font-size:1.7rem; line-height:1; }
.gross-zu:hover, .gross-pfeil:hover, .gross-zu:focus-visible, .gross-pfeil:focus-visible{ background:var(--rot); }
.gross-zu{ top:1rem; right:1rem; }
.gross-pfeil{ top:50%; margin-top:-1.5rem; }
.gross-pfeil.zurueck{ left:1rem; } .gross-pfeil.vor{ right:1rem; }
@media(max-width:620px){ .gross-pfeil{ top:auto; bottom:1rem; margin-top:0; } }