/* Modernisierung 2026 – gemeinsamer Stil für Startseite, Steakdöner (highlight-information), Produkte, Bestellen
   (body.modern). Gleiche Marke (Schwarz/Rot, Roboto Slab, Inhalte), aber im Stil von ueber-uns.php/history.php
   (css/geschichte.css): klare dunkle Karten statt Glas, große Überschriften mit rotem Strich, abwechselnde Bänder (.band).
   Bewusst ohne backdrop-filter: Weichzeichner über Videos ruckeln beim Scrollen. Hero mit Video: .heroModern. */
body.modern{
  --m-card: #141416;
  --m-card-2: #19191c;
  --m-line: rgba(255,255,255,.09);
  --m-red-rgb: 222,10,23;
  --m-pad: clamp(64px, 8vw, 112px);
}
body.modern *,
body.modern *::before,
body.modern *::after{ -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
/* Ausnahme: die Navigation bleibt eine Glas-Leiste (gewünscht; eine einzelne Fläche ist unkritisch) */
body.modern .navbar::before{ -webkit-backdrop-filter: blur(18px) saturate(160%) !important; backdrop-filter: blur(18px) saturate(160%) !important; }

/* ---------- Abschnitte: Rhythmus + Überschriften ---------- */
.modern .section{ padding: var(--m-pad) 0; }
.modern .band{ background: var(--bg-2); border-block: 1px solid var(--m-line); }
.modern .section > .wrap > .h2,
.modern .storyBox > .h2,
.modern .twoCol__content > .h2,
.modern .split__text > .h2{
  margin: 0 0 12px; font-weight: 600; letter-spacing: -.03em; line-height: 1.08;
  font-size: clamp(30px, 4vw, 48px); text-wrap: balance;
}
.modern .section > .wrap > .h2::before{
  content: ""; display: block; width: 44px; height: 4px; margin: 0 0 18px; border-radius: 2px; background: var(--accent);
}
.modern .section > .wrap > .p{ max-width: 62ch; font-size: clamp(16px, 1.5vw, 18px); line-height: 1.65; }

/* Buttons etwas größer und klarer */
.modern .section .btn{ min-height: 48px; padding: 0 20px; border-radius: 14px; font-weight: 600; }
.modern .section .btn:not(.btnPrimary){ background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); }
.modern .section .btn:not(.btnPrimary):hover{ background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.26); }

/* ---------- Hero: Video bildschirmfüllend, Text groß unten links ---------- */
.heroModern.hero{ align-items: flex-end; padding-bottom: clamp(72px, 11vh, 132px); }
.heroModern .heroMedia::after{
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 45%, rgba(7,7,8,.88) 100%),
    linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 55%, rgba(0,0,0,0) 75%);
}
.heroModern .heroCopy{
  justify-self: start; width: min(760px, 100%); margin: 0; padding: 0;
  background: none; border: 0; border-radius: 0; box-shadow: none;
}
.heroModern .heroTitle{
  margin: 0 0 16px; font-weight: 600; letter-spacing: -.035em; line-height: 1.02;
  font-size: clamp(40px, 6.2vw, 84px); text-wrap: balance; text-shadow: 0 6px 40px rgba(0,0,0,.45);
}
.heroModern .heroSub{ max-width: 56ch; margin: 0 0 26px; font-size: clamp(16px, 1.5vw, 18px); line-height: 1.6; color: rgba(255,255,255,.84); }
.heroModern .heroKicker{ font-weight: 600; color: #fff; }
.heroModern .heroActions{ display: flex; flex-wrap: wrap; gap: 12px; }
.heroModern .heroActions .btn{ min-height: 54px; padding: 0 26px; font-size: 16px; }
.heroModern .heroActions .btn:not(.btnPrimary){ background: rgba(0,0,0,.35); border-color: rgba(255,255,255,.28); }
.homeRating{
  align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 8px 14px 8px 12px; border-radius: 999px;
  background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.88); font-size: 14px; text-decoration: none;
}
.modern a.homeRating{ color: rgba(255,255,255,.88); text-decoration: none; }
.homeRating:hover{ border-color: rgba(255,255,255,.32); }
.homeRating b{ color: #fff; }
.homeRating__stars{ color: #ffc22e; letter-spacing: 1px; font-size: 13px; }
.homeScroll{
  position: absolute; z-index: 3; left: 50%; bottom: 22px; width: 44px; height: 44px; margin-left: -22px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.28); background: rgba(0,0,0,.3); display: grid; place-items: center;
}
.homeScroll span{ width: 10px; height: 10px; margin-top: -4px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); }
.homeScroll:hover{ border-color: #fff; }
@media (prefers-reduced-motion: no-preference){
  .homeScroll span{ animation: home-nudge 2.4s ease-in-out infinite; }
}
@keyframes home-nudge{ 0%, 60%, 100%{ translate: 0 0; } 30%{ translate: 0 4px; } }
@media (max-width: 980px){
  .heroModern .heroCopy{ justify-self: start; }
}
@media (max-width: 640px){
  .heroModern.hero{ padding-bottom: 40px; }
  .heroModern .heroMedia::after{ background: linear-gradient(180deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,.15) 40%, rgba(7,7,8,.94) 82%); }
  .heroModern .heroTitle{ font-size: clamp(36px, 10.5vw, 48px); }
  .heroModern .heroSub{ font-size: 15.5px; margin-bottom: 20px; }
  .heroModern .heroActions .btn{ flex: 1 1 0; padding: 0 14px; }
  .homeRating{ margin-top: 16px; font-size: 13px; }
  .homeScroll{ display: none; }
}

/* ---------- Qualitäts-Kacheln: nicht mehr über dem Video, klare Karten ---------- */
.modern .homeTiles{ padding-top: clamp(40px, 5vw, 64px); }
.modern .tiles{ margin: 0; gap: 16px; }
.modern .tile{
  min-height: 168px; padding: 24px 22px; border-radius: 20px; background: var(--m-card);
  border: 1px solid var(--m-line); box-shadow: none; transition: border-color .2s ease, transform .2s ease;
}
.modern .tile::before{ opacity: .35; }
.modern .tile::after{ background: rgba(0,0,0,.35); }
.modern .tileContent{ justify-content: flex-end; }
.modern .tile b{ font-size: 20px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 8px; }
.modern .tile b::before{ content: ""; display: block; width: 28px; height: 3px; margin-bottom: 14px; border-radius: 2px; background: var(--accent); }
.modern .tile span{ font-size: 15px; }
.modern .tile:hover{ border-color: rgba(var(--m-red-rgb), .5); transform: translateY(-2px); }

/* ---------- Signature Produkte: großes Bild, Text darunter ---------- */
.modern .cards3{ margin: 28px 0 0; gap: 18px; }
.modern .imgCard{ min-height: 0; display: flex; flex-direction: column; border-radius: 22px; background: var(--m-card); border: 1px solid var(--m-line); box-shadow: none; }
.modern .imgCard::after{ display: none; }
.modern .imgCard img{ height: auto; aspect-ratio: auto; transform: none; } /* echtes Bildformat, kein Beschnitt */
.modern .imgCard:hover img{ transform: scale(1.04); }
.modern .imgCard .cap{ position: static; z-index: auto; margin: 0; padding: 18px 20px 20px; border: 0; border-radius: 0; background: none; }
.modern .imgCard .cap b{ font-size: 21px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 6px; }
.modern .imgCard .cap small{ font-size: 15px; color: var(--muted); }
.modern .imgCard{ overflow: hidden; }
.modern .imgCard > img{ overflow: hidden; }
@media (max-width: 980px){
  .modern .cards3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px){
  .modern .cards3{ grid-template-columns: 1fr; }
}

/* ---------- So machen wir den Döner: Text + großes Bild ---------- */
.modern .story{ grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(20px, 3vw, 40px); align-items: center; }
.modern .story .storyBox{ padding: clamp(4px, 1vw, 12px) 0; background: none; border: 0; box-shadow: none; border-radius: 0; }
.modern .storyBox > .h2::before{ content: ""; display: block; width: 44px; height: 4px; margin: 0 0 18px; border-radius: 2px; background: var(--accent); }
.modern .storyBox .p{ font-size: clamp(16px, 1.5vw, 18px); line-height: 1.65; max-width: 48ch; }
.modern .storyBox .btn{ margin-top: 24px; }
.modern .storyMedia{ border-radius: 24px; border: 1px solid var(--m-line); box-shadow: 0 30px 80px rgba(0,0,0,.45); aspect-ratio: 3 / 2; }
@media (max-width: 980px){
  .modern .story{ grid-template-columns: 1fr; }
  .modern .storyMedia{ order: -1; }
}

/* ---------- Saucen & Extras ---------- */
.modern .pillGrid{ margin-top: 24px; gap: 10px; }
.modern .pill{ padding: 12px 18px; font-size: 15px; background: var(--m-card-2); border-color: rgba(255,255,255,.12); box-shadow: none; }
.modern .pill:hover{ border-color: rgba(var(--m-red-rgb), .55); box-shadow: none; }

/* ---------- Socials + eigene Bewertungen ---------- */
.modern .socials{ margin-top: 24px; gap: 18px; }
.modern .socialCard{ background: var(--m-card); border-color: var(--m-line); box-shadow: none; border-radius: 22px; padding: 22px; }
.modern .socialCard .row b{ font-size: 18px; font-weight: 600; }
.modern .socialCard .gReviewSlide{ background: var(--m-card-2) !important; }
.modern .rv-item{ background: var(--m-card); border-color: var(--m-line); }

/* ---------- Galerie ---------- */
.modern .marquee{ margin-top: 24px; border-radius: 22px; background: transparent; border: 0; box-shadow: none; }
.modern .track{ padding: 4px 0; gap: 14px; }
/* Jedes Bild in seinem echten Format (Hoch- und Querformat), gleiche Höhe – nichts wird abgeschnitten */
.modern .gItem{ width: auto; height: 240px; border-radius: 18px; border: 0; flex: none; }
.modern .gItem img{ width: auto; height: 100%; object-fit: contain; }
@media (max-width: 520px){
  .modern .gItem{ width: auto; height: 190px; }
}

/* ---------- Karte + FAQ ---------- */
.modern .mapWrap{ margin-top: 24px; border-radius: 22px; overflow: hidden; border: 1px solid var(--m-line); }
.modern .faq{ margin-top: 24px; gap: 12px; max-width: 880px; }
.modern .faq details{ padding: 0; border-radius: 18px; background: var(--m-card); border-color: var(--m-line); box-shadow: none; transition: border-color .2s ease; }
.modern .faq details[open]{ border-color: rgba(var(--m-red-rgb), .45); }
.modern .faq summary{ min-height: 64px; padding: 0 22px; font-size: 17px; font-weight: 600; }
.modern .faq summary::after{ flex: none; border-color: var(--accent); }
.modern .faq details > :not(summary){ margin-left: 22px; margin-right: 22px; }
.modern .faq details > :last-child{ margin-bottom: 20px; }
.modern .faq details > p:first-of-type{ margin-top: 0; }

/* Ohne Weichzeichner brauchen halbtransparente Ebenen einen festen Grund */
.modern .cc__panel{ background: #141416; }

/* ---------- Handy ---------- */
@media (max-width: 520px){
  .modern .section{ padding: 56px 0; }
  .modern .homeTiles{ padding-top: 32px; }
  .modern .tiles:not(.tiles--content){ margin: 0; }
  .modern .tile{ min-height: 0; padding: 20px 18px; }
  .modern .faq summary{ padding: 0 18px; font-size: 16px; }
  .modern .faq details > :not(summary){ margin-left: 18px; margin-right: 18px; }
}

/* ---------- Abschluss-Box (alleinstehende storyBox, z. B. Steakdöner „Jetzt probieren“) ---------- */
.modern .section > .wrap > .storyBox{
  position: relative; overflow: hidden; padding: clamp(28px, 4vw, 56px); border-radius: 28px; border: 1px solid rgba(var(--m-red-rgb), .35); box-shadow: none;
  background: radial-gradient(700px 360px at 100% 0%, rgba(var(--m-red-rgb), .28), transparent 65%), var(--m-card);
}
.modern .section > .wrap > .storyBox .h2{ font-size: clamp(30px, 4.4vw, 54px); }
.modern .section > .wrap > .storyBox .p{ max-width: 60ch; }
.modern .btnRow{ display: flex; flex-wrap: wrap; gap: 12px; }
.modern .storyBox .btnRow .btn{ margin-top: 24px; }
.modern .storyBox .p + .p{ margin-top: 12px; }

/* ---------- Karten-Kacheln im Text (contentTiles) ---------- */
.modern .contentTiles{ margin-top: 28px; gap: 16px; }
.modern .contentTiles--mt{ margin-top: 40px; }
.modern .contentTiles .tile{ justify-content: flex-end; min-height: 160px; padding: 22px 20px; }
.modern .contentTiles .tile b{ margin: 0; }

/* ---------- Produkte: Kategorie-Leiste, Kategorien, Zwei-Spalter, Karte ---------- */
.modern .productsSubnav::before{ background: rgba(9, 9, 10, .94); box-shadow: 0 10px 24px rgba(0,0,0,.3); }
.modern .productsSubnav__item{ border-radius: 999px; }
/* Kategorien als Karten im 2er-Raster: großes Bild oben, Titel + Text darunter (Wunsch des Inhabers, Okt 2026) */
.modern .productGrid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.modern .productCat,
.modern .productCat:nth-of-type(even){
  margin: 0; display: flex; flex-direction: column; grid-template-columns: none; overflow: hidden;
  border-radius: 24px; border: 1px solid var(--m-line); background: var(--m-card); box-shadow: none;
  transition: border-color .25s ease, transform .25s ease;
}
.modern .productCat:hover{ border-color: rgba(var(--m-red-rgb), .55); transform: translateY(-3px); }
.modern .productCat__media,
.modern .productCat:nth-of-type(even) .productCat__media{ order: 0; min-height: 0; aspect-ratio: 3 / 2; }
.modern .productCat__media::after,
.modern .productCat:nth-of-type(even) .productCat__media::after{ background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(20,20,22,.85) 100%); }
.modern .productCat__media img{ transform: none; transition: transform .6s ease; }
.modern .productCat:hover .productCat__media img{ transform: scale(1.05); }
.modern .productCat__content,
.modern .productCat:nth-of-type(even) .productCat__content{ order: 1; position: relative; margin-top: -34px; padding: 0 clamp(20px, 2.4vw, 30px) clamp(22px, 2.6vw, 30px); justify-content: flex-start; flex: 1; }
.modern .productCat__content .h2{ margin: 0 0 8px; font-weight: 600; letter-spacing: -.025em; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.1; text-shadow: 0 2px 18px rgba(0,0,0,.5); }
.modern .productCat__content .h2::before{ content: ""; display: block; width: 32px; height: 4px; margin: 0 0 14px; border-radius: 2px; background: var(--accent); }
.modern .productCat__content .p{ margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--muted); }
@media (max-width: 680px){
  .modern .productGrid{ grid-template-columns: 1fr; }
}
.modern .twoCol{ gap: clamp(20px, 3vw, 40px); align-items: center; }
.modern .twoCol__content{ padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; }
.modern .twoCol__content .p{ font-size: clamp(16px, 1.5vw, 18px); line-height: 1.65; }
.modern .twoCol__content .p + .p{ margin-top: 12px; }
.modern .twoCol__media{ border-radius: 24px; border-color: var(--m-line); box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.modern .mapEmbed{ margin-top: 24px; border-radius: 22px; border-color: var(--m-line); box-shadow: none; }
.modern .productsOrderBtn{ min-height: 52px; padding: 0 26px; border-radius: 14px; }
.modern .productsHero__order{ margin-top: 0; }
@media (max-width: 760px){
  .modern .twoCol{ grid-template-columns: 1fr; }
}

/* ---------- Bestellen (bestellen.php): großer Einstieg, Karten ---------- */
.modern .hero--simple{ min-height: 0; height: auto; max-height: none; margin-top: 0; padding: clamp(56px, 9vw, 120px) 0 clamp(40px, 6vw, 72px); }
.modern .hero--simple .h1{ margin: 0 0 16px; font-weight: 600; letter-spacing: -.035em; line-height: 1.02; font-size: clamp(40px, 6.4vw, 80px); }
.modern .hero--simple .h1::before{ content: ""; display: block; width: 52px; height: 4px; margin: 0 0 22px; border-radius: 2px; background: var(--accent); }
.modern .hero--simple .p{ max-width: 60ch; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.65; }
.modern .orderActions{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.modern .orderActions .btn, .modern .orderActions__cta{ min-height: 56px; padding: 0 28px; font-size: 17px; margin: 0; }
.modern .noteGlass{ margin-top: 20px; padding: 14px 18px; border-radius: 16px; background: var(--m-card); border: 1px solid var(--m-line); color: var(--muted); }
.modern .glassCard{ background: var(--m-card); border: 1px solid var(--m-line); box-shadow: none; }
.modern .mediaCard{ border-radius: 24px; overflow: hidden; }
.modern .split{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: center; }
.modern .mediaCard img{ display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 760px){ .modern .split{ grid-template-columns: 1fr; } }
.modern .split__text .p + .p{ margin-top: 12px; }
.heroModern .productsHero__cta{ justify-content: flex-start; margin-top: 0; }
/* Bestellen: keine Video-Abdunklung (es gibt kein Video) – sonst liegt sie über Text und Button */
.modern .hero--simple::before{ display: none; }
.modern .hero--simple .wrap{ position: relative; z-index: 2; }