/* BK-Eventrent – Designsystem v2 ("laut und flach")
   Wird nach styles.css geladen und überschreibt dessen Optik.
   Regeln: keine Schatten, keine Verläufe, kein Glas, keine Haarlinien als Deko.
   Flächen statt Rahmen, große Schrift, eine Akzentfarbe. */

@font-face{font-family:"Archivo Black";src:url("../fonts/ArchivoBlack-Regular.woff") format("woff");font-weight:400 900;font-display:swap}
@font-face{font-family:"Barlow";src:url("../fonts/Barlow-Regular.woff") format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow";src:url("../fonts/Barlow-SemiBold.woff") format("woff");font-weight:500 600;font-display:swap}
@font-face{font-family:"Barlow";src:url("../fonts/Barlow-Bold.woff") format("woff");font-weight:700 900;font-display:swap}

:root{
  --ink:#0c0c0c;        /* Grund dunkel */
  --tile:#181818;       /* Fläche auf dunkel */
  --tile2:#222;         /* Fläche hover */
  --paper:#f3f0e9;      /* Grund hell */
  --paper2:#e7e2d7;     /* Fläche auf hell */
  --red:#e01f1a;        /* Akzent */
  --red-ink:#b81510;    /* Akzent gedrückt */
  --soft:#c4bfb4;       /* Sekundärtext auf dunkel */
  --soft-paper:#57534b; /* Sekundärtext auf hell */
  --f-display:"Archivo Black", "Arial Black", Impact, sans-serif;
  --f-body:"Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r:14px;
  --gutter:clamp(16px, 4vw, 48px);
  --ease:cubic-bezier(.2,.7,.2,1);

  /* alte Variablen auf neue Werte mappen */
  --bg:var(--ink); --panel:var(--tile); --panel2:var(--tile2);
  --text:var(--paper); --muted:var(--soft);
  --line:transparent; --accent:var(--red); --accent2:var(--red);
  --shadow:none;
}

html,body{background:var(--ink) !important; color:var(--paper); font-family:var(--f-body); font-size:17px}
body{line-height:1.55}
*,*::before,*::after{box-shadow:none !important; text-shadow:none !important}
::selection{background:var(--red); color:#fff}
:focus-visible{outline:3px solid var(--red); outline-offset:3px}

h1,h2,h3,.h1,.h2{font-family:var(--f-display); font-weight:400; letter-spacing:-.01em; line-height:1.02; color:inherit; text-wrap:balance}
h1{font-size:clamp(40px, 6.4vw, 92px)}
h2{font-size:clamp(30px, 4vw, 56px); margin:0 0 .45em}
h3{font-size:clamp(20px, 1.8vw, 26px); line-height:1.12; margin:0 0 .4em}
p,li{color:inherit}
.lead{font-size:clamp(18px,1.5vw,21px); color:var(--paper); max-width:62ch}
.notice{font-size:15px; color:var(--soft)}
.container{max-width:1360px; padding:0 var(--gutter)}
a{text-underline-offset:3px}
p a:not(.btn),.seoText li a,.seoFaq a{text-decoration:underline; text-decoration-color:var(--red); text-decoration-thickness:2px}

/* Kicker (Überzeilen) gibt es im neuen System nicht */
.kicker{display:none !important}

/* ---------- Kopfzeile ---------- */
header{background:var(--ink) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; border:0 !important}
.nav{padding:14px 0; gap:14px}
.brand span,.brand > span{font-family:var(--f-display); font-size:19px; letter-spacing:-.01em}
.logoBox{border-radius:10px !important; background:#000 !important; border:0 !important}
.links{gap:2px}
.links a{color:var(--paper); font-weight:600; font-size:16px; padding:10px 12px; border-radius:10px}
.links a:hover,.links a[aria-current="page"]{background:var(--tile); color:var(--paper)}
.langToggle,.langBtn{background:var(--tile) !important; border:0 !important; color:var(--paper) !important; border-radius:10px}
.langMenu{background:var(--tile) !important; border:0 !important}
.hamburger{background:var(--tile) !important; border:0 !important; color:var(--paper) !important; border-radius:10px}
.socialIcon{background:var(--tile) !important; border:0 !important}

/* ---------- Schaltflächen ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:12px 20px; border-radius:999px;
  background:var(--tile) !important; color:var(--paper) !important; border:0 !important;
  font-family:var(--f-body); font-weight:700; font-size:16px; line-height:1.1;
  transition:background .18s var(--ease), transform .18s var(--ease);
}
.btn:hover{background:var(--tile2) !important; transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn.primary{background:var(--red) !important; color:#fff !important}
.btn.primary:hover{background:var(--red-ink) !important}
.btn.light{background:var(--paper) !important; color:var(--ink) !important}
.btn.dark{background:var(--ink) !important; color:var(--paper) !important}

/* ---------- Flächen ---------- */
.card,.seoTile,.heroCard,.seoGallery figure,.pdLiveBox,.pdMain,.pdThumb,.seoDisclosure,.badge,.itemCard{
  background:var(--tile) !important; border:0 !important; border-radius:var(--r) !important;
  backdrop-filter:none !important;
}
.card:hover,.seoTile:hover{transform:none !important; background:var(--tile2) !important}
.badge{color:var(--paper); font-weight:600}
.itemImg,.pdMain,.pdThumb{background:#efece5 !important; border:0 !important}
.seoGallery figure:hover{transform:none}
details summary{cursor:pointer; font-weight:700}
.details ul{color:var(--paper)}
.section{padding:clamp(44px,6vw,88px) 0}

/* Altes Hero (Unterseiten) flach machen */
.heroShade{background:rgba(12,12,12,.72) !important}
.heroFull{border:0 !important; border-radius:var(--r) !important}

/* ---------- Fußzeile ---------- */
footer{background:var(--ink) !important; border:0 !important; padding:56px 0 32px}
.footerLinks a{border:0 !important; background:var(--tile) !important; border-radius:999px; color:var(--paper)}


/* Verläufe aus styles.css neutralisieren */
.logo{background:#000 !important}
.mediaOverlay{background:rgba(12,12,12,.6) !important}
.seoGallery img,.pkgBox .pkgFig{background:#efece5 !important}
.setupFinderLauncher{background:var(--tile) !important; border:0 !important}
.setupFinderChatHead{background:var(--tile) !important}
.setupRecommendation{background:var(--tile2) !important; border:0 !important}
.setupFinderBar span{background:var(--red) !important}
.heroFull::before{display:none !important}
.heroFull{min-height:0 !important}

/* Unterseiten-Hero: ruhig, zentriert, Überschrift max. zwei bis drei Zeilen */
.seoIntro{max-width:1040px !important}
.seoIntro p{max-width:62ch; margin-left:auto; margin-right:auto}
.hero .heroInner h1,.seoIntro h1{font-size:clamp(34px,4.6vw,68px); max-width:22ch; margin-left:auto; margin-right:auto}
.heroInner{padding:clamp(48px,7vw,104px) clamp(18px,4vw,56px) !important}
.seoIntro p{font-size:clamp(17px,1.4vw,20px); color:var(--paper)}
.seoSection h2{font-size:clamp(28px,3.2vw,46px)}

/* ---------- Gemeinsame Bausteine (Kopf, Fuß) ---------- */
.h-wrap{max-width:1360px; margin:0 auto; padding:0 var(--gutter)}
.h-sr{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
/* ---------- Kopfzeile Startseite ---------- */
.h-nav .links a.navCta{background:var(--red); color:#fff; border-radius:999px; padding:10px 18px; margin-left:6px}
.h-nav .links a.navCta:hover{background:var(--red-ink)}

/* ---------- Fußzeile ---------- */
.h-foot{background:var(--ink); padding:clamp(56px,7vw,96px) 0 0; overflow:hidden}
.h-footCols{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:28px}
.h-footCols h3{font-family:var(--f-body); font-weight:700; font-size:17px; margin:0 0 12px; color:var(--red)}
.h-footCols ul{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.h-footCols a{font-size:16px; text-decoration:none}
.h-footCols a:hover{color:var(--red)}
.h-footLegal{display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between; margin-top:48px; font-size:15px; color:var(--soft)}
.h-footLegal a{color:var(--soft)}
.h-footLegal a:hover{color:var(--paper)}
.h-footName{font-family:var(--f-display); font-size:clamp(36px,10.8vw,170px); line-height:.78; letter-spacing:-.04em; color:var(--red); white-space:nowrap; margin:40px 0 0; transform:translateY(.12em); user-select:none}
@media (max-width:980px){.h-footCols{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:620px){.h-footCols{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Zurück-nach-oben-Knopf im neuen Stil */
.backToTop{background:var(--red) !important; color:#fff !important; border:0 !important}

/* ---------- Bewegung ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important; transition:none !important; scroll-behavior:auto !important}
}

@media (max-width:820px){
  .h-nav .links a.navCta{margin-left:0; border-radius:12px; text-align:left}
  .links a[aria-current="page"]{background:var(--tile2); box-shadow:inset 4px 0 0 var(--red) !important}
}
@media (min-width:821px) and (max-width:1100px){
  .links{flex-wrap:nowrap; gap:0}
  .links a{padding:9px 8px; font-size:15px; white-space:nowrap}
  .h-nav .links a.navCta{padding:9px 14px; margin-left:4px}
  .brand span,.brand > span{font-size:17px}
}

/* Paketfotos immer vollständig zeigen (Format 4:5) */
.pkgBox{align-items:start}
.pkgBox .pkgFig{aspect-ratio:4/5 !important; height:auto !important; min-height:0 !important; align-self:start}
.pkgBox .pkgFig img[src*="-foto."]{object-fit:cover; object-position:center !important}