/* ═══════════════════════════════════════════════════════════
   Fan Point Kassel – Startseite
   Ergaenzt assets/kopf.css (Tokens, Kopf- und Fussbereich).
   ═══════════════════════════════════════════════════════════ */

/* ── Hero ─────────────────────────────────────────────── */
.hero { background:var(--dark); position:relative; overflow:hidden; padding:5.5rem 0 6rem; }
.hero-bg { position:absolute; inset:0; background:radial-gradient(ellipse 60% 95% at 78% 45%, rgba(78,114,20,.30) 0%, transparent 62%); }
/* Hintergrundbild rechts, nach links in den dunklen Grund ausgeblendet */
.hero-figur {
  position:absolute; top:0; right:0; bottom:0;
  width:min(62%, 780px);
  background-image:url(../_uploads/FPK_hintergrund.jpg);
  background-image:image-set(url(../_uploads/FPK_hintergrund.webp) type("image/webp"),
                             url(../_uploads/FPK_hintergrund.jpg) type("image/jpeg"));
  background-size:cover; background-position:60% center; background-repeat:no-repeat;
  opacity:.9; pointer-events:none;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 42%, #000 100%);
          mask-image:linear-gradient(to right, transparent 0%, #000 42%, #000 100%);
}
.hero-inner { position:relative; z-index:2; max-width:1400px; margin:0 auto; padding:0 2rem; }
.hero h1, .hero-sub, .hero-eyebrow, .hero-aktionen, .status { max-width:640px; }
.hero-eyebrow { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:.92rem; letter-spacing:.24em; text-transform:uppercase; color:var(--rot-hell); margin-bottom:1rem; display:flex; align-items:center; gap:.85rem; }
.hero-eyebrow::after { content:''; height:2px; width:72px; background:var(--rot); }
.hero h1 { font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:clamp(2.7rem,8vw,6rem); line-height:.9; text-transform:uppercase; color:#fff; }
.hero h1 em { font-style:italic; color:var(--gruen); }
.hero-sub { color:rgba(255,255,255,.62); font-size:1.08rem; margin-top:1.2rem; max-width:560px; line-height:1.6; }
.hero-aktionen { display:flex; gap:1rem; margin-top:2.2rem; flex-wrap:wrap; align-items:center; }
.btn-geist { display:inline-flex; align-items:center; gap:.5rem; border:2px solid rgba(255,255,255,.28); color:#fff; text-decoration:none; font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:1rem; letter-spacing:.09em; text-transform:uppercase; padding:.85rem 1.8rem; border-radius:2px; transition:border-color .2s, background .2s; }
.btn-geist:hover { border-color:var(--gruen); background:rgba(135,179,52,.14); }

/* Live-Status "jetzt geoeffnet" */
.status { display:inline-flex; align-items:center; gap:.55rem; margin-top:2rem; font-size:.92rem; color:rgba(255,255,255,.72); }
.status-punkt { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.status.offen .status-punkt { background:#5ed12a; box-shadow:0 0 0 0 rgba(94,209,42,.7); animation:blink 2.4s ease-out infinite; }
.status.zu .status-punkt { background:#e05050; }
@keyframes blink { 0% { box-shadow:0 0 0 0 rgba(94,209,42,.65); } 70%,100% { box-shadow:0 0 0 10px rgba(94,209,42,0); } }
.status strong { color:#fff; }

/* ── Aktuelles-Band (eine Meldung, kein Karussell) ────── */
.aktuell { background:var(--gruen-dunkel); color:#fff; }
.aktuell-inner { max-width:1400px; margin:0 auto; padding:1rem 2rem; display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap; }
.aktuell-tag { background:var(--rot); font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; padding:.3rem .8rem; border-radius:2px; flex-shrink:0; }
.aktuell-text { flex:1; min-width:200px; font-size:.98rem; }
.aktuell-text a { color:#fff; text-decoration:none; }
.aktuell-text a:hover { text-decoration:underline; }
.aktuell-datum { opacity:.6; font-size:.85rem; }

/* ── Abschnitte ───────────────────────────────────────── */
section { scroll-margin-top:150px; }
.wrap { max-width:1400px; margin:0 auto; padding:5rem 2rem; }
.label { display:flex; align-items:center; gap:.75rem; font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:.8rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gruen-dunkel); margin-bottom:.85rem; }
.label::before { content:''; background:var(--gruen-dunkel); width:32px; height:2px; display:block; }
.titel { font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:clamp(2rem,5vw,3.2rem); text-transform:uppercase; line-height:.98; }
.titel em { font-style:italic; color:var(--gruen-dunkel); }
.einleitung { color:#555; margin-top:1rem; max-width:65ch; font-size:1.02rem; }

.dunkel { background:var(--dark); color:#fff; }
.dunkel .label { color:var(--gruen); }
.dunkel .label::before { background:var(--gruen); }
.dunkel .titel em { color:var(--gruen); }
.dunkel .einleitung { color:rgba(255,255,255,.6); }

/* Leistungskarten – Kartenkopf mit Rückennummer, Motiv vom Trikot */
.leistungen { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr)); gap:1.5rem; margin-top:3rem; }
/* Shop-Artikel statt der Sortiment-Karten (siehe werkzeuge/listen.py).
   Produktfotos sind unterschiedlich geschnitten - deshalb quadratische
   Flaeche mit contain auf Weiss, nichts wird abgeschnitten. */
.produkte { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.25rem; margin-top:3rem; }
.produkt { background:#fff; border:1px solid var(--grau-hell); border-radius:3px; overflow:hidden; display:flex; flex-direction:column; text-decoration:none; color:inherit; transition:transform .25s, box-shadow .25s, border-color .25s; }
.produkt:hover { transform:translateY(-4px); box-shadow:0 12px 30px rgba(0,0,0,.09); border-color:var(--gruen); }
/* Das Bild liegt absolut im Quadrat - sonst dehnt ein hohes Foto die
   Flaeche, und die Kacheln einer Reihe werden unterschiedlich hoch. */
.produkt-bild { position:relative; aspect-ratio:1; background:#fff; --rand:1rem; }
.produkt-bild img { position:absolute; inset:var(--rand); width:calc(100% - 2 * var(--rand)); height:calc(100% - 2 * var(--rand)); object-fit:contain; display:block; }
.produkt-text { padding:1rem 1.1rem 1.15rem; border-top:1px solid var(--grau-hell); display:flex; flex-direction:column; gap:.3rem; flex:1; }
.produkt-kat { font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gruen-dunkel); }
.produkt-name { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:1.15rem; text-transform:uppercase; line-height:1.15; color:var(--dark); }
.produkt-mehr { margin-top:auto; padding-top:.5rem; font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:var(--rot); }
.karte { background:#fff; border:1px solid var(--grau-hell); border-radius:3px; overflow:hidden; display:flex; flex-direction:column; transition:transform .25s, box-shadow .25s, border-color .25s; }
.karte:hover { transform:translateY(-4px); box-shadow:0 12px 30px rgba(0,0,0,.09); border-color:var(--gruen); }

.karte-kopf { position:relative; background:var(--dark); padding:1.7rem 1.6rem 1.35rem; overflow:hidden; }
.karte-nr {
  position:absolute; right:-.4rem; top:-1.5rem;
  font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:6.4rem; line-height:1;
  color:transparent; -webkit-text-stroke:2px rgba(135,179,52,.5); text-stroke:2px rgba(135,179,52,.5);
  pointer-events:none; user-select:none;
}
.karte-kopf h3 { position:relative; z-index:2; font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:1.45rem; text-transform:uppercase; color:#fff; line-height:1.05; max-width:74%; }
.karte-tag { position:relative; z-index:2; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gruen); margin-top:.4rem; }

.karte-inhalt { padding:1.5rem 1.6rem 1.7rem; flex:1; display:flex; flex-direction:column; }
.karte-inhalt p { color:#555; font-size:.95rem; line-height:1.65; }
.karte-inhalt ul { margin:.9rem 0 0 1.1rem; color:#555; font-size:.92rem; }
.karte-inhalt li { margin-bottom:.3rem; }
.karte-mehr { display:inline-flex; align-items:center; gap:.4rem; margin-top:auto; padding-top:1.1rem; font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:.85rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gruen-dunkel); text-decoration:none; }
.karte-mehr:hover { gap:.8rem; }

/* Auf dunklem Grund traegt die Karte die Farbe selbst – kein zweiter Farbblock.
   Aussen Dunkelgruen mit weisser Schrift (5,61:1), die hervorgehobene Karte
   Hellgruen mit dunkler Schrift (7,26:1). Weiss auf Hellgruen waere 2,46:1
   und damit unlesbar – die Schriftfarbe haengt hier an der Flaeche. */
.dunkel .karte { background:var(--gruen-dunkel); border-color:rgba(255,255,255,.14); }
.dunkel .karte:hover { border-color:var(--gruen-blass); }
.dunkel .karte-kopf { background:transparent; padding-bottom:.4rem; }
.dunkel .karte-nr { -webkit-text-stroke-color:rgba(212,232,160,.45); text-stroke-color:rgba(212,232,160,.45); }
.dunkel .karte-kopf h3 { color:#fff; }
.dunkel .karte-tag { color:#e2f0bd; }
.dunkel .karte-inhalt p, .dunkel .karte-inhalt ul { color:rgba(255,255,255,.92); }
.dunkel .karte-mehr { color:#e2f0bd; }

/* Hervorgehobene Karte – steht inhaltlich im Mittelpunkt */
.dunkel .karte-hervor { background:var(--gruen); border-color:rgba(0,0,0,.16); transform:scale(1.03); }
.dunkel .karte-hervor:hover { transform:translateY(-4px) scale(1.03); border-color:var(--dark); }
.dunkel .karte-hervor .karte-nr { -webkit-text-stroke-color:rgba(17,26,8,.4); text-stroke-color:rgba(17,26,8,.4); }
.dunkel .karte-hervor .karte-kopf h3 { color:var(--dark); }
.dunkel .karte-hervor .karte-tag { color:rgba(17,26,8,.74); }
.dunkel .karte-hervor .karte-inhalt p, .dunkel .karte-hervor .karte-inhalt ul { color:rgba(17,26,8,.84); }
.dunkel .karte-hervor .karte-mehr { color:var(--dark); }

/* ── Markenleiste ─────────────────────────────────────── */
/* Laufband: vier identische Sätze hintereinander, die Spur wandert um
   genau einen Satz (-25 %) – dadurch ist der Übergang nahtlos.
   Die Abstände sitzen als margin an den Bildern, nicht als gap, sonst
   wäre der letzte Abstand vor der Wiederholung kleiner als die übrigen. */
.marken { background:var(--grau); padding:1.25rem 0; overflow:hidden; }
.marken-lauf {
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.marken-spur { display:flex; align-items:center; width:max-content; animation:marken-lauf 38s linear infinite; }
.marken-spur img { height:38px; width:auto; display:block; margin:0 2.4rem; opacity:.92; flex-shrink:0; }
@keyframes marken-lauf { from { transform:translateX(0); } to { transform:translateX(-25%); } }
/* Anhalten beim Überfahren und bei Tastaturfokus */
.marken-lauf:hover .marken-spur, .marken-lauf:focus-within .marken-spur { animation-play-state:paused; }

@media (prefers-reduced-motion: reduce) {
  .marken-lauf { -webkit-mask-image:none; mask-image:none; }
  .marken-spur { animation:none; width:auto; flex-wrap:wrap; justify-content:center; row-gap:1.2rem; }
  .marken-spur [aria-hidden="true"] { display:none; }
}
@media (max-width:1000px) {
  .produkte { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; margin-top:2rem; }
  .produkt-bild { --rand:.6rem; }
  .produkt-text { padding:.75rem .8rem .9rem; }
  .produkt-name { font-size:1rem; }
  .marken-spur img { height:30px; margin:0 1.5rem; }

  /* Der grosse Aufruf im Hero ist auf dem Handy zu wuchtig: 1,3rem
     Schrift und 2,6rem Innenabstand ergeben 185 px auf einem 360 px
     breiten Schirm. Hier eine eigene, dezentere Groesse - immer noch
     groesser als der Knopf oben im Kopf, aber kein Klotz. 46 px hoch
     bleibt fingerbreit. */
  .hero .shop-btn-gross { font-size:1rem; padding:.85rem 1.6rem; gap:.6rem; }
  .hero .btn-geist      { font-size:.95rem; padding:.8rem 1.4rem; }
  .hero-aktionen        { gap:.7rem; }
}

/* ── Social Media ─────────────────────────────────────── */
/* Die Markenfarben bleiben, der Text sitzt aber nur über Flächen, die
   weisse Schrift tragen: Instagram-Gelb käme auf 1,85:1 und liegt
   deshalb dekorativ in der oberen rechten Ecke, der Text unten links
   über Violett/Blauviolett (6,50 bzw. 5,81:1). */
.social-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); gap:1.5rem; margin-top:3rem; }
.social-kachel {
  position:relative; overflow:hidden; border-radius:4px; text-decoration:none;
  min-height:210px; padding:1.8rem 1.9rem; display:flex; flex-direction:column;
  transition:transform .25s, box-shadow .25s;
}
.social-kachel:hover { transform:translateY(-4px); box-shadow:0 14px 34px rgba(0,0,0,.22); }
.social-kachel:focus-visible { outline:3px solid var(--dark); outline-offset:3px; }

.social-fb { background:linear-gradient(135deg, #1877f2 0%, #1568d8 45%, #1450ad 100%); }
.social-ig { background:linear-gradient(225deg, #fcaf45 0%, #f77737 11%, #e1306c 30%, #c13584 54%, #833ab4 78%, #5851db 100%); }

.social-logo { width:44px; height:44px; margin-bottom:auto; }
.social-logo svg { width:100%; height:100%; fill:#fff; }
.social-logo svg .strich { fill:none; stroke:#fff; stroke-width:1.9; }

.social-netz { font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:1.7rem; text-transform:uppercase; color:#fff; line-height:1; margin-top:1.4rem; }
.social-name { font-size:1rem; color:rgba(255,255,255,.92); margin-top:.3rem; }
.social-cta { display:inline-flex; align-items:center; gap:.45rem; margin-top:1rem; font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:.85rem; letter-spacing:.12em; text-transform:uppercase; color:#fff; }
.social-kachel:hover .social-cta { gap:.85rem; }

/* Grosses Wasserzeichen-Logo in der Ecke */
.social-marke { position:absolute; right:-1.6rem; top:-1.6rem; width:150px; height:150px; opacity:.13; pointer-events:none; }
.social-marke svg { width:100%; height:100%; fill:#fff; }

@media (max-width:1000px) {
  .social-kachel { min-height:170px; padding:1.4rem 1.5rem; }
  .social-marke { width:110px; height:110px; }
}

/* ── Shop-Kasten nach dem Sortiment ──
   Eigene Box auf hellem Grund, nicht durchlaufend: dadurch liegt
   Weiss zwischen dem Kasten und dem dunklen Abschnitt darunter. */
.shopkasten { background:var(--off-white); padding:0 0 4rem; }
/* Huelle mit derselben Geometrie wie .wrap – Begrenzung aussen, Abstand
   innen. Sonst waere der Kasten 64 px breiter als die Abschnitte. */
.shopkasten-huelle { max-width:1400px; margin:0 auto; padding:0 2rem; }
.shopkasten-box {
  position:relative; overflow:hidden; border-radius:4px;
  background:linear-gradient(100deg, #425f11 0%, #476813 60%, var(--gruen-dunkel) 100%);
  box-shadow:0 10px 30px rgba(17,26,8,.18);
}
.shopkasten-box::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 45% 170% at 84% 50%, rgba(255,255,255,.12) 0%, transparent 60%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 68px, transparent 68px 136px);
}
.shopkasten-wort {
  position:absolute; right:2rem; top:50%; transform:translateY(-50%);
  font-family:'Barlow Condensed',sans-serif; font-weight:900;
  font-size:clamp(4.5rem,11vw,9rem); color:rgba(255,255,255,.10);
  line-height:.8; pointer-events:none; user-select:none; white-space:nowrap;
}
.shopkasten-inner {
  position:relative; z-index:2;
  padding:2.3rem 2.4rem; display:flex; align-items:center; gap:2rem; flex-wrap:wrap;
}
.shopkasten-text { flex:1; min-width:260px; }
.shopkasten .eyebrow {
  font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:.78rem;
  letter-spacing:.22em; text-transform:uppercase; color:#e2f0bd;
  display:flex; align-items:center; gap:.7rem; margin-bottom:.6rem;
}
.shopkasten .eyebrow::after { content:''; height:2px; width:52px; background:#e2f0bd; }
.shopkasten h2 {
  font-family:'Barlow Condensed',sans-serif; font-weight:900;
  font-size:clamp(1.6rem,3.6vw,2.4rem); text-transform:uppercase;
  color:#fff; line-height:1;
}
.shopkasten p { color:rgba(255,255,255,.92); font-size:1rem; margin-top:.6rem; max-width:52ch; line-height:1.6; }
/* Der Knopf klebte am rechten Kastenrand. Ein Stueck nach innen, damit er
   optisch zur Mitte gehoert. Mit vw gekoppelt, damit er bei schmaleren
   Fenstern nicht in den Text laeuft. */
.shopkasten .shop-btn { margin-right:clamp(0rem, 5vw, 5.5rem); }

@media (max-width:1000px) {
  .shopkasten { padding:0 0 3rem; }
  .shopkasten-huelle { padding:0 1.25rem; }
  .shopkasten-inner { padding:1.8rem 1.5rem; gap:1.4rem; }
  .shopkasten-wort { right:-.5rem; }
  /* Umbruch: Knopf steht unter dem Text, kein Versatz mehr noetig. */
  .shopkasten .shop-btn { margin-right:0; }
}

/* News */
.news-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr)); gap:1.25rem; margin-top:3rem; }
/* Die Karten tragen seit dem 01.10.2026 ein echtes Bild aus dem
   Beitrag statt eines Emoji-Platzhalters. .news-kopf war auf ein
   zentriertes Zeichen ausgelegt und braucht fuer ein Bild object-fit,
   sonst wird es auf 110 px gestaucht. */
/* Dasselbe wie auf der News-Seite: .news-kopf hatte height:110px, das
   ergab bei knapp 290 px Breite einen Kasten von 2,64:1 und zeigte nur
   57 Prozent der Bildhoehe. */
img.news-kopf { width:100%; aspect-ratio:3 / 2; height:auto;
                object-fit:cover; display:block; }
.news-kopf-leer { background:linear-gradient(135deg,var(--gruen-dunkel),var(--dark-mid)); }

.news-karte { background:var(--dark-mid); border-radius:3px; overflow:hidden; text-decoration:none; display:flex; flex-direction:column; transition:transform .25s, background .25s; }
.news-karte:hover { transform:translateY(-4px); background:#22350f; }
.news-kopf { height:110px; background:linear-gradient(135deg,var(--gruen-dunkel),var(--dark-mid)); display:grid; place-items:center; font-size:2.4rem; }
.news-body { padding:1.3rem 1.4rem 1.5rem; flex:1; display:flex; flex-direction:column; }
.news-meta { display:flex; align-items:center; gap:.7rem; margin-bottom:.7rem; flex-wrap:wrap; }
.news-kat { font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:.22rem .6rem; border-radius:100px; background:rgba(135,179,52,.2); color:var(--gruen); }
.news-datum { font-size:.8rem; color:rgba(255,255,255,.4); }
.news-titel { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:1.2rem; text-transform:uppercase; color:#fff; line-height:1.15; margin-bottom:.6rem; }
.news-teaser { color:rgba(255,255,255,.55); font-size:.9rem; line-height:1.6; flex:1; }
.news-mehr { margin-top:1rem; font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gruen); }

/* Info / Besuch */
.info-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr)); gap:1.5rem; margin-top:3rem; }
.info-karte { background:#fff; border-left:3px solid var(--gruen); padding:1.6rem 1.5rem; }
.info-kopf { display:flex; align-items:center; gap:.7rem; margin-bottom:.7rem; }
.info-kopf svg { width:19px; height:19px; stroke:var(--gruen-dunkel); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.info-karte h4 { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:1.2rem; text-transform:uppercase; }
.info-karte p, .info-karte td { color:#555; font-size:.95rem; line-height:1.7; }
.info-karte a { color:var(--gruen-dunkel); }
.zeiten { width:100%; border-collapse:collapse; }
.zeiten td { padding:.18rem 0; }
.zeiten td:last-child { text-align:right; font-variant-numeric:tabular-nums; }
.zeiten tr.heute td { font-weight:600; color:var(--dark); }
.zeiten-grund { display:block; font-weight:400; font-size:.8rem; color:var(--rot); }
.zeiten tr.heute td::after { }

/* Shop-Band */
.shopband { background:linear-gradient(120deg,var(--dark) 0%, #1a2b0a 100%); position:relative; overflow:hidden; text-align:center; padding:5rem 2rem; }
.shopband-wort { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:clamp(8rem,22vw,20rem); color:rgba(255,255,255,.03); line-height:.8; pointer-events:none; user-select:none; white-space:nowrap; }
.shopband-inner { position:relative; z-index:2; max-width:760px; margin:0 auto; }
.shopband h2 { font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:clamp(2.2rem,6vw,4rem); text-transform:uppercase; color:#fff; line-height:.95; }
.shopband p { color:rgba(255,255,255,.6); margin-top:1rem; font-size:1.05rem; }

/* Einblenden beim Scrollen */
.reveal { opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.sichtbar { opacity:1; transform:none; }

/* ── Bewegung reduzieren ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity:1; transform:none; }
}

/* ── Schmale Schirme ──────────────────────────────────── */
@media (max-width:1000px) {
  .wrap { padding:3.5rem 1.25rem; }
  .hero { padding:3.5rem 0 4rem; }
  .hero-inner { padding:0 1.25rem; }
  .dunkel .karte-hervor, .dunkel .karte-hervor:hover { transform:none; }
  /* Auf dem Handy liegt das Bild blass hinter dem Text - dafuer reicht
     eine kleine Fassung (800 px, 27 statt 95 KB). Es ist das groesste
     Element im ersten Bildschirm, kleiner heisst hier direkt schneller.
     Gleicher Dateiname wie im preload in vorlagen/index.html. */
  .hero-figur {
    background-image:url(../_uploads/FPK_hintergrund.jpg);
    background-image:image-set(url(../_uploads/FPK_hintergrund-handy.webp) type("image/webp"),
                               url(../_uploads/FPK_hintergrund.jpg) type("image/jpeg"));
  }
  .hero-figur { width:100%; opacity:.28; -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 55%); mask-image:linear-gradient(to bottom, transparent 0%, #000 55%); }
}