/* ======================================================================
   Bankonbet — style.css  ·  Archetyp: DECO PLATE (Art-déco / Casino-Luxe)
   Prefix: ugf-  ·  Display: Sora · Text: Inter
   Charakter: Onyx-Tiefe + warmes Off-White, geometrische Hairline-Rahmen,
   rote Akzentlinien, dosiertes Glow auf Fokuspunkten, Snap-Return-Karten.
   ====================================================================== */

/* ---------- @property (Akzent-Überblendung, GPU, progressiv) ---------- */
@property --ugf-fx{syntax:'<color>';inherits:false;initial-value:transparent}
@property --ugf-fxa{syntax:'<angle>';inherits:false;initial-value:115deg}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;scroll-behavior:smooth}
body{margin:0}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,h4,p,ul,ol,dl,figure,dd,blockquote{margin:0}

/* ---------- Design-Tokens ---------- */
:root{
  --ugf-wrap:1292px;
  --ugf-pad:clamp(16px,4vw,34px);

  /* Flächen — warme Off-White-Treppe */
  --ugf-bg:#f7f3ee;
  --ugf-surface:#fffdfa;
  --ugf-surface-2:#ece4da;
  --ugf-ink:#17110e;
  --ugf-ink-2:#3e352f;
  --ugf-ink-3:#5d544c;
  --ugf-hairline:color-mix(in srgb,var(--ugf-ink) 16%,transparent);
  --ugf-hair-soft:color-mix(in srgb,var(--ugf-ink) 9%,transparent);

  /* Marken-Akzente (HEX fix) */
  --ugf-accent:#f51b2b;            /* Links, Kicker, aktive Zustände, Linien */
  --ugf-accent-ink:#ffffff;
  --ugf-accent-deep:color-mix(in srgb,var(--ugf-accent) 78%,#000);
  --ugf-cta:#000a90;               /* Haupt-Handlungsknöpfe */
  --ugf-cta-ink:#ffffff;
  --ugf-brand2:#cb718d;            /* sekundäre Markenzone */
  --ugf-brand3:#eae1e1;            /* Badges, sekundäre Hervorhebung */

  /* Onyx-Zone (Footer / Overlays) */
  --ugf-dark:#191310;
  --ugf-dark-ink:#f3ece6;
  --ugf-dark-ink-2:color-mix(in srgb,var(--ugf-dark-ink) 72%,transparent);
  --ugf-dark-hair:color-mix(in srgb,#fff 16%,transparent);

  --ugf-tp-star:#00b67a;

  /* Typo-Skala (1.25 modular) */
  --ugf-step--1:.8rem;--ugf-step-0:1rem;--ugf-step-1:1.25rem;--ugf-step-2:1.563rem;
  --ugf-step-3:1.953rem;--ugf-step-4:2.441rem;--ugf-step-5:3.052rem;

  /* Raster */
  --ugf-space:clamp(34px,5vw,60px);
  --ugf-gap:16px;
  --ugf-r:0;                        /* Art-déco: scharfe Kanten */
  --ugf-rcorner:0 0 14px 0;         /* Signatur: nur unten-rechts gerundet */
  --ugf-col:280px;

  /* Motion */
  --ugf-ease:cubic-bezier(.16,1,.3,1);
  --ugf-spring:cubic-bezier(.5,1.6,.4,1);
  --ugf-dur:.2s;

  --ugf-fdisplay:"Sora",system-ui,Segoe UI,Arial,sans-serif;
  --ugf-ftext:"Inter",system-ui,-apple-system,Roboto,Segoe UI,Arial,sans-serif;
}

/* ---------- Body / Grundtypografie ---------- */
body.ugf-body{
  font-family:var(--ugf-ftext);
  font-size:clamp(1rem,.97rem + .2vw,1.0625rem);
  line-height:1.66;
  color:var(--ugf-ink);
  background:var(--ugf-bg);
  font-variant-numeric:tabular-nums lining-nums;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:color-mix(in srgb,var(--ugf-accent) 26%,transparent);color:var(--ugf-ink)}
::marker{color:var(--ugf-accent)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--ugf-ink) 28%,transparent)}
*{scrollbar-color:color-mix(in srgb,var(--ugf-ink) 28%,transparent) transparent}

/* ---------- Layout-Container ---------- */
.ugf-wrap{width:100%;max-width:var(--ugf-wrap);margin-inline:auto;padding-inline:var(--ugf-pad)}
.ugf-main{
  width:100%;max-width:var(--ugf-wrap);margin-inline:auto;
  padding-inline:var(--ugf-pad);
  padding-block:clamp(26px,5vw,58px);
}
/* vertikaler Rhythmus für seiten ohne prose-klasse */
.ugf-main>p{margin-top:1em}
.ugf-main>h2{margin-top:1.7em}
.ugf-main>h3{margin-top:1.3em}

.ugf-skip{position:absolute;left:-999px;top:0;background:var(--ugf-accent);color:var(--ugf-accent-ink);padding:10px 18px;z-index:400;font-weight:700}
.ugf-skip:focus{left:8px;top:8px}
:focus-visible{outline:2px solid var(--ugf-accent);outline-offset:2px}

/* ---------- Überschriften ---------- */
h1,h2,h3,h4{font-family:var(--ugf-fdisplay);color:var(--ugf-ink);line-height:1.12;letter-spacing:-.01em;text-wrap:balance}
h1{font-weight:800}
h2,h3{font-weight:700}

/* ================= HEADER ================= */
.ugf-head{
  position:sticky;top:0;z-index:100;
  background:color-mix(in srgb,var(--ugf-bg) 94%,transparent);
  border-bottom:1px solid var(--ugf-hairline);
}
.ugf-head::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,transparent,var(--ugf-accent),transparent);opacity:.55}
.ugf-head__bar{display:flex;align-items:center;gap:clamp(12px,2vw,22px);min-height:66px;flex-wrap:nowrap}
.ugf-logo{line-height:0;flex:0 0 auto}
.ugf-logo img{height:clamp(30px,4vw,44px);width:auto}
.ugf-nav{flex:1 1 auto;display:flex;justify-content:center;min-width:0}
.ugf-nav__list{list-style:none;display:flex;flex-wrap:nowrap;gap:clamp(10px,1.7vw,28px);padding:0;margin:0}
.ugf-nav__list a{
  position:relative;text-decoration:none;
  font-family:var(--ugf-fdisplay);font-weight:700;font-size:.8rem;
  letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
  color:var(--ugf-ink-2);padding:8px 1px;
  transition:color var(--ugf-dur) var(--ugf-ease);
}
.ugf-nav__list a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--ugf-accent);transform:scaleX(0);transform-origin:center;transition:transform var(--ugf-dur) var(--ugf-ease)}
.ugf-nav__list a:hover,.ugf-nav__list a[aria-current="page"]{color:var(--ugf-accent)}
.ugf-nav__list a:hover::after,.ugf-nav__list a[aria-current="page"]::after{transform:scaleX(1)}

.ugf-burger{display:none;background:none;border:1px solid var(--ugf-ink);width:48px;height:44px;color:var(--ugf-ink);cursor:pointer;align-items:center;justify-content:center;transition:background var(--ugf-dur) var(--ugf-ease), color var(--ugf-dur) var(--ugf-ease)}
.ugf-burger:hover{background:var(--ugf-ink);color:var(--ugf-bg)}

/* ================= CTA ================= */
.ugf-cta{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--ugf-fdisplay);font-weight:700;font-size:.84rem;
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  border:2px solid transparent;border-radius:var(--ugf-rcorner);
  padding:14px 26px;min-height:48px;white-space:nowrap;cursor:pointer;
  transition:transform .12s var(--ugf-ease), --ugf-fx .45s;
}
/* Header-CTA hängt direkt in der Bar — kompakt halten */
.ugf-head__bar>.ugf-cta{flex:0 0 auto}
.ugf-cta--solid{
  color:var(--ugf-cta-ink);border-color:var(--ugf-cta);
  background:linear-gradient(var(--ugf-fxa),var(--ugf-cta),var(--ugf-fx));
  background-color:var(--ugf-cta);
}
.ugf-cta--solid:hover{--ugf-fx:color-mix(in srgb,var(--ugf-cta) 55%,var(--ugf-accent));transform:translateY(-2px) scale(1.02);filter:brightness(1.05)}
.ugf-cta--solid:active{transform:translateY(0) scale(.99)}
.ugf-cta--ghost{background:transparent;color:var(--ugf-accent);border-color:var(--ugf-accent)}
.ugf-cta--ghost:hover{background:color-mix(in srgb,var(--ugf-accent) 12%,transparent);transform:translateY(-2px)}
/* Sheen-Durchlauf (Signatur) */
.ugf-cta::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(115deg,transparent 32%,color-mix(in srgb,#fff 32%,transparent) 50%,transparent 68%);transform:translateX(-130%);transition:transform .65s var(--ugf-ease)}
.ugf-cta:hover::after{transform:translateX(130%)}
/* dosiertes Glow auf der Haupt-CTA */
.ugf-cta--solid::before{content:"";position:absolute;inset:-40%;z-index:-2;pointer-events:none;background:radial-gradient(closest-side,color-mix(in srgb,var(--ugf-cta) 55%,transparent),transparent 72%);opacity:0;transition:opacity var(--ugf-dur) var(--ugf-ease)}
.ugf-cta--solid:hover::before{opacity:.7}

/* CTA im Fließtext — IMMER zentriert (jede Tiefe) */
.ugf-ctarow{display:flex;justify-content:center;margin:1.6em 0}
.ugf-main>.ugf-cta,
.ugf-main :not(.ugf-hero__cta):not(.ugf-nav__cta)>.ugf-cta{display:flex;width:fit-content;margin:1.6em auto}

/* ================= HERO ================= */
.ugf-hero{position:relative;isolation:isolate;padding-block:clamp(22px,4vw,42px)}
/* Akzent-Halo hinter der Bühne (horizontaler inset = 0 → kein H-Scroll) */
.ugf-hero::before{content:"";position:absolute;inset:-6% 0 auto 0;height:70%;z-index:-1;pointer-events:none;background:radial-gradient(58% 60% at 72% 30%,color-mix(in srgb,var(--ugf-accent) 22%,transparent),transparent 70%)}
.ugf-hero__inner{display:grid;gap:var(--ugf-gap)}
/* Basis-Hero (falls kein showcase) */
.ugf-hero:not(.ugf-hero--showcase) .ugf-hero__inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
.ugf-hero__kicker{display:block;text-transform:uppercase;letter-spacing:.16em;font-size:.76rem;font-weight:700;color:var(--ugf-accent)}
.ugf-hero__h1{font-size:clamp(2.1rem,5.2vw,3.4rem);margin:.18em 0 .3em;line-height:1.05}
.ugf-hero__lead{color:var(--ugf-ink-2);font-size:clamp(1rem,1.4vw,1.15rem);max-width:46ch}
.ugf-hero:not(.ugf-hero--showcase) .ugf-hero__media img{aspect-ratio:1/1;object-fit:cover;width:100%;border-radius:var(--ugf-rcorner)}
/* Showcase-Bühne (Tiefe via Triple-Offset-Outline statt Schatten) */
.ugf-hero--showcase .ugf-hero__stage{box-shadow:0 0 0 1px var(--ugf-hairline),0 0 0 4px var(--ugf-hair-soft)}
.ugf-hero--showcase .ugf-hero__h1{font-size:clamp(1.9rem,4.6vw,3rem);line-height:1.06}
.ugf-hero__facts,.ugf-hero__rail{margin-top:14px}

/* ================= BREADCRUMBS ================= */
.ugf-crumbs{padding-block:12px}
.ugf-crumbs__list{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0;font-size:.8rem;color:var(--ugf-ink-3)}
.ugf-crumbs__item+.ugf-crumbs__item::before{content:"\203A";margin-right:8px;color:var(--ugf-accent)}
.ugf-crumbs__item a{text-decoration:none;color:var(--ugf-ink-3);transition:color var(--ugf-dur) var(--ugf-ease)}
.ugf-crumbs__item a:hover{color:var(--ugf-accent)}
.ugf-crumbs__item [aria-current="page"]{color:var(--ugf-ink-2);font-weight:600}

/* ================= BYLINE (Layout liegt inline im Part; hier nur Basis/Foto) ================= */
.ugf-byline{padding-block:16px;color:var(--ugf-ink-2);font-size:.92rem}
.ugf-byline__photo{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:0 0 auto;box-shadow:0 0 0 1px var(--ugf-hairline),0 0 0 3px var(--ugf-hair-soft)}
.ugf-byline__author{font-family:var(--ugf-fdisplay);font-weight:700;text-decoration:none;color:var(--ugf-ink)}
.ugf-byline__author:hover{color:var(--ugf-accent)}
.ugf-byline__rev a{color:var(--ugf-accent);text-decoration:none}
.ugf-byline__rev a:hover{text-decoration:underline}

/* ================= PAGETITLE (Banner-Layout inline im Part) ================= */
.ugf-pagetitle{padding-block:clamp(20px,4vw,38px)}

/* ================= PROSE / FLIESSTEXT ================= */
.ugf-prose{max-width:74ch}
.ugf-doc{max-width:none}
.ugf-doc p,.ugf-doc li,.ugf-doc .ugf-authorpage,.ugf-authorpage p{max-width:none}
.ugf-prose>*+*{margin-top:1em}
.ugf-prose p{margin:1em 0;color:var(--ugf-ink-2);text-wrap:pretty;overflow-wrap:break-word}
.ugf-prose h2{
  position:relative;font-size:clamp(1.55rem,1.2rem + 1.6vw,var(--ugf-step-3));
  margin:1.7em 0 .5em;padding-bottom:.32em;border-bottom:1px solid var(--ugf-hairline);
}
.ugf-prose h2::after{content:"";position:absolute;left:0;bottom:-1px;width:64px;height:2px;background:var(--ugf-accent)}
.ugf-prose h3{font-size:clamp(1.2rem,1.05rem + .6vw,var(--ugf-step-1));margin:1.35em 0 .4em}
.ugf-prose h4{font-size:var(--ugf-step-0);margin:1.2em 0 .35em;text-transform:uppercase;letter-spacing:.06em;color:var(--ugf-ink-2)}
.ugf-prose ul,.ugf-prose ol{margin:1em 0;padding-left:1.4em}
.ugf-prose li{margin:.45em 0;color:var(--ugf-ink-2)}
.ugf-prose ul li::marker{color:var(--ugf-accent)}
.ugf-prose ol li::marker{color:var(--ugf-accent);font-family:var(--ugf-fdisplay);font-weight:700}
.ugf-prose strong{color:var(--ugf-ink);font-weight:700}
/* Links im Fließtext — animierte Unterstreichung */
.ugf-prose a:not(.ugf-cta){
  color:var(--ugf-accent-deep);text-decoration:none;font-weight:600;
  background-image:linear-gradient(var(--ugf-accent),var(--ugf-accent));
  background-size:0% 2px;background-repeat:no-repeat;background-position:0 100%;
  text-underline-offset:2px;transition:background-size var(--ugf-dur) var(--ugf-ease), color var(--ugf-dur) var(--ugf-ease);
}
.ugf-prose a:not(.ugf-cta):hover{background-size:100% 2px;color:var(--ugf-accent)}
.ugf-prose blockquote{
  margin:1.4em 0;padding:.6em 0 .6em 1.2em;border-left:3px solid var(--ugf-accent);
  font-size:1.08em;line-height:1.55;color:var(--ugf-ink);font-style:italic;
}

/* Callout / Info-Box (Signatur-Ecke) */
.ugf-callout{
  margin:1.6em 0;padding:18px 20px;
  background:var(--ugf-surface);border:1px solid var(--ugf-hairline);
  border-left:3px solid var(--ugf-accent);border-radius:var(--ugf-rcorner);
  box-shadow:0 0 0 1px var(--ugf-hair-soft);
}
.ugf-callout>*+*{margin-top:.6em}
.ugf-callout strong:first-child{font-family:var(--ugf-fdisplay)}

/* Tabellen — Hairline-Stil, auch nackte <table> */
.ugf-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.5em 0}
.ugf-prose table,table{width:100%;border-collapse:collapse;font-size:.95rem;background:var(--ugf-surface)}
table caption{caption-side:top;text-align:left;font-weight:700;font-family:var(--ugf-fdisplay);margin-bottom:.5em;color:var(--ugf-ink)}
th,td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--ugf-hairline);vertical-align:top}
thead th{
  background:var(--ugf-dark);color:var(--ugf-dark-ink);
  font-family:var(--ugf-fdisplay);font-weight:700;font-size:.82rem;
  letter-spacing:.06em;text-transform:uppercase;border-bottom:none;
}
tbody tr:nth-child(even){background:color-mix(in srgb,var(--ugf-ink) 3%,transparent)}
tbody tr:hover{background:color-mix(in srgb,var(--ugf-accent) 7%,transparent)}
tbody td:first-child{font-weight:600;color:var(--ugf-ink)}
td[align="right"],th[align="right"]{text-align:right;font-variant-numeric:tabular-nums}

/* Inhaltsbilder — vollständig, zentriert, mit px-Cap */
.ugf-prose figure,.ugf-figure{width:min(72%,760px);margin:1.6em auto}
.ugf-prose figure img,.ugf-figure img,.ugf-img{width:100%;height:auto;border-radius:var(--ugf-rcorner);box-shadow:0 0 0 1px var(--ugf-hairline),0 0 0 4px var(--ugf-hair-soft)}
.ugf-prose figcaption,.ugf-figure figcaption{margin-top:.6em;font-size:.85rem;color:var(--ugf-ink-3);text-align:center}

/* Autorenseite — vollbreite Bio, fixiertes Portrait */
.ugf-authorpage__photo{width:200px;height:auto;aspect-ratio:3/4;object-fit:cover;float:left;margin:6px 22px 14px 0;border-radius:var(--ugf-rcorner);box-shadow:0 0 0 1px var(--ugf-hairline),0 0 0 5px var(--ugf-hair-soft)}
.ugf-prose img.ugf-authorpage__photo{width:200px}

/* ================= SLOTS-VITRINE ================= */
.ugf-slots{padding-block:var(--ugf-space)}
.ugf-slots__h{font-size:clamp(1.5rem,1.2rem + 1.4vw,var(--ugf-step-3));margin-bottom:.7em;position:relative;padding-left:.7em}
.ugf-slots__h::before{content:"";position:absolute;left:0;top:.15em;bottom:.15em;width:3px;background:var(--ugf-accent)}
.ugf-slot{
  display:block;text-decoration:none;color:inherit;
  background:var(--ugf-surface);border:1px solid var(--ugf-hairline);
  border-radius:var(--ugf-rcorner);overflow:hidden;
  transition:transform .18s cubic-bezier(.16,1,.3,1), border-color var(--ugf-dur) var(--ugf-ease);
}
.ugf-slot:hover{transform:translateY(-3px);border-color:var(--ugf-accent)}
/* Snap-Return: federt elastisch zurück */
.ugf-slot:not(:hover){transition:transform .1s var(--ugf-spring), border-color var(--ugf-dur) var(--ugf-ease)}
.ugf-slot__img{display:block;width:100%;aspect-ratio:457/512;object-fit:contain;background:var(--ugf-surface-2)}
.ugf-slot__name{display:block;padding:9px 12px;font-family:var(--ugf-fdisplay);font-weight:700;font-size:.9rem;border-top:1px solid var(--ugf-hairline)}

/* generisches Karten-/Bento-Raster */
.ugf-grid{display:grid;gap:var(--ugf-gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--ugf-col)),1fr))}
.ugf-grid>*{min-width:0}

/* ================= FOOTER (Onyx-Zone) ================= */
.ugf-foot{background:var(--ugf-dark);color:var(--ugf-dark-ink);margin-top:var(--ugf-space);padding-block:clamp(34px,5vw,52px);position:relative}
.ugf-foot::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--ugf-accent),transparent)}
.ugf-foot__inner{display:grid;gap:clamp(22px,4vw,40px)}
.ugf-foot__lead{display:grid;gap:.7em;align-items:start}
.ugf-foot__logo img{height:42px;width:auto}
.ugf-foot__age{justify-self:start;font-family:var(--ugf-fdisplay);font-weight:800;border:2px solid var(--ugf-brand2);color:var(--ugf-brand2);border-radius:var(--ugf-r);padding:1px 8px;font-size:.85rem}
.ugf-foot__disc{font-size:.84rem;color:var(--ugf-dark-ink-2);max-width:60ch;line-height:1.55}
.ugf-foot__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:clamp(18px,3vw,30px)}
.ugf-foot__col{min-width:0}
.ugf-foot__h{font-family:var(--ugf-fdisplay);font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;margin-bottom:12px;color:var(--ugf-brand2)}
.ugf-foot__list{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.ugf-foot__list a{text-decoration:none;color:var(--ugf-dark-ink);opacity:.82;font-size:.9rem;transition:opacity var(--ugf-dur) var(--ugf-ease), color var(--ugf-dur) var(--ugf-ease)}
.ugf-foot__list a:hover{opacity:1;color:var(--ugf-accent)}
.ugf-foot__ribbon{display:block;padding-top:18px;border-top:1px solid var(--ugf-dark-hair);font-size:.82rem;color:var(--ugf-dark-ink-2);line-height:1.7}
.ugf-foot__ribbon a{color:var(--ugf-dark-ink);text-decoration:none}
.ugf-foot__ribbon a:hover{color:var(--ugf-accent)}

/* ================= COOKIE-BANNER ================= */
.ugf-cookie{position:fixed;left:0;right:0;bottom:0;z-index:300;background:var(--ugf-dark);color:var(--ugf-dark-ink);padding:14px 0;border-top:2px solid var(--ugf-accent)}
.ugf-cookie[hidden]{display:none}
.ugf-cookie__inner{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.ugf-cookie__txt{font-size:.86rem;color:var(--ugf-dark-ink-2);margin:0;flex:1 1 320px;min-width:0}
.ugf-cookie__txt a{color:var(--ugf-accent);text-decoration:underline}
.ugf-cookie__btns{display:flex;gap:10px;flex-wrap:wrap}
.ugf-cookie__btn{border:1px solid var(--ugf-dark-hair);background:transparent;color:var(--ugf-dark-ink);padding:10px 18px;border-radius:var(--ugf-r);cursor:pointer;font-family:var(--ugf-fdisplay);font-weight:700;font-size:.82rem;letter-spacing:.04em;transition:transform .12s var(--ugf-ease), background var(--ugf-dur) var(--ugf-ease)}
.ugf-cookie__btn:hover{transform:translateY(-2px)}
.ugf-cookie__btn--ok{background:var(--ugf-cta);color:var(--ugf-cta-ink);border-color:var(--ugf-cta)}

/* ================= 404 ================= */
.ugf-404__code{font-family:var(--ugf-fdisplay);font-size:clamp(3.5rem,12vw,6rem);font-weight:800;color:var(--ugf-accent);line-height:1;filter:drop-shadow(0 0 18px color-mix(in srgb,var(--ugf-accent) 40%,transparent))}

/* ================= SCROLL-REVEAL (ergänzt JS-Layer aus header.php) ================= */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    html:not(.ugf-js) [data-ugf-reveal]{animation:ugf-rise linear both;animation-timeline:view();animation-range:entry 0% cover 26%}
    @keyframes ugf-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
  }
}

/* ================= RESPONSIVE ================= */
/* Tablet */
@media(max-width:900px){
  .ugf-burger{display:inline-flex;order:3;margin-left:auto}
  .ugf-nav{flex:0 0 auto;justify-content:flex-end}
  .ugf-nav__list{
    position:fixed;inset:auto 0 0 0;z-index:150;
    background:var(--ugf-dark);color:var(--ugf-dark-ink);
    flex-direction:column;align-items:center;gap:6px;display:none;
    padding:26px 24px calc(26px + env(safe-area-inset-bottom));
    border-top:2px solid var(--ugf-accent);
    border-top-left-radius:18px;border-top-right-radius:18px;
    max-width:100vw;max-height:84vh;overflow:auto;
    box-shadow:0 -16px 40px rgba(0,0,0,.4);
  }
  /* Griff-Strich oben am Bottom-Sheet */
  .ugf-nav__list::before{content:"";width:44px;height:4px;border-radius:99px;background:var(--ugf-dark-hair);margin-bottom:14px}
  .ugf-nav.is-open .ugf-nav__list{display:flex}
  .ugf-nav.is-open .ugf-burger{position:fixed;top:14px;right:18px;z-index:160;background:var(--ugf-dark);color:var(--ugf-dark-ink);border-color:var(--ugf-dark-hair)}
  .ugf-nav__list a{font-family:var(--ugf-fdisplay);font-size:1.25rem;letter-spacing:.02em;color:var(--ugf-dark-ink);padding:12px;width:100%;text-align:center}
  .ugf-nav__list a::after{display:none}
  .ugf-nav__list a:hover,.ugf-nav__list a[aria-current="page"]{color:var(--ugf-accent)}
}

/* Tablet-Layout */
@media(max-width:900px) and (min-width:641px){
  .ugf-hero:not(.ugf-hero--showcase) .ugf-hero__inner{grid-template-columns:minmax(0,1fr)}
}

/* Mobil */
@media(max-width:640px){
  body.ugf-body{font-size:16px}
  .ugf-hero:not(.ugf-hero--showcase) .ugf-hero__inner{grid-template-columns:minmax(0,1fr)}
  /* mobile Hero-DOM-Reihenfolge: H1 → CTA → Bild → Lead.
     Bild höhenbegrenzt, damit CTA über dem Fold bleibt (1:1 ohne Crop) */
  .ugf-hero:not(.ugf-hero--showcase) .ugf-hero__media img{max-height:42vh;width:auto;margin-inline:auto;aspect-ratio:1/1;object-fit:contain}
  .ugf-prose{max-width:none}
  .ugf-prose figure,.ugf-figure{width:100%}
  .ugf-authorpage__photo,.ugf-prose img.ugf-authorpage__photo{float:none;width:160px;margin:0 0 16px}
  .ugf-foot__cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .ugf-cookie__inner{flex-direction:column;align-items:stretch;gap:10px}
  .ugf-cookie__txt{flex:0 1 auto;font-size:.8rem}
  .ugf-cookie__btns{justify-content:stretch}
  .ugf-cookie__btn{flex:1 1 auto;padding-block:11px}
  th,td{padding:9px 11px}
}

@media(max-width:380px){
  .ugf-foot__cols{grid-template-columns:minmax(0,1fr)}
}

/* ================= REDUCED MOTION ================= */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .ugf-cta::after{display:none}
}

/* container-guarantee */
.ugf-prose{max-width:var(--ugf-wrap,1200px);margin-inline:auto;padding-inline:clamp(16px,4vw,32px);box-sizing:border-box}
.ugf-main .ugf-prose,.ugf-main>.ugf-wrap{max-width:none;padding-inline:0;margin-inline:0}