/* ============================================================
   simabu.com – Hero-System (geteilte Komponente)
   Datei: css/sim-hero.css · Version 2026-09-14 · Scope: body.sim-refined
   Enthält: Navigation (86/68 px), Hero (Bild + Shade + H1 + Lead + CTA + Proof),
   Entry-Context + Direktkontakt, Panorama-Zitat, Stats-Row, KI-Foto-Kennzeichnung,
   Sticky-Mobil-Aktionsleiste. Nach css/style.css einbinden.
   Ursprung: Inline-CSS der index.html (Block #sim-mobile-first-css), Deklarationen
   unverändert, Scope-Klasse .sim-home-refined -> .sim-refined.
   ============================================================ */

/* ---------- Navigation normalisiert + Hero + Entry-Context ---------- */
body.sim-refined .fh5co-nav { padding:12px 0; height:86px; }
body.sim-refined #fh5co-logo img { display:block; width:207px; height:auto; }
body.sim-refined .fh5co-nav #fh5co-logo a { display:inline-block; padding:0; }
body.sim-refined #main { padding-top:86px; }
body.sim-refined #fh5co-header.sim-hero {
  position:relative; isolation:isolate; float:none; width:100%; height:auto;
  min-height:610px; background:#170d22; overflow:hidden; color:#fff;
}
body.sim-refined #main .sim-hero__image {
  position:absolute; inset:0; width:100%; height:100%; max-width:none;
  object-fit:cover; object-position:60% 45%; z-index:-2;
}
.sim-refined .sim-hero__shade {
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg,rgba(20,10,31,.94) 0%,rgba(20,10,31,.82) 30%,rgba(20,10,31,.32) 52%,rgba(20,10,31,.02) 78%);
}
.sim-refined .sim-hero__inner { min-height:610px; display:flex; align-items:center; padding-top:54px; padding-bottom:54px; }
.sim-refined .sim-hero__copy { width:48%; max-width:540px; }
.sim-refined #page-h1 { color:#fff!important; -webkit-text-fill-color:#fff!important; font-family:var(--sim-font-display); font-size:clamp(42px,4.7vw,62px)!important; font-weight:600; line-height:1.03!important; margin:0 0 22px; }
.sim-refined .sim-hero__location { display:block; color:#ead79d; -webkit-text-fill-color:#ead79d; font-family:var(--sim-font-body); font-weight:500; font-size:18px; line-height:1.4; margin-bottom:14px; }
.sim-refined .sim-hero__lead { color:#f6f0f9; font-size:18px; line-height:1.65; margin:0 0 26px; }
.sim-refined .sim-hero__occasions { display:block; margin-top:8px; font-size:14px; line-height:1.5; color:#ead79d; }
.sim-refined #fh5co-header .sim-hero__occasions a,
.sim-refined #fh5co-header .sim-hero__occasions a:hover,
.sim-refined #fh5co-header .sim-hero__occasions a:focus { color:inherit; border:0 !important; border-bottom:0 !important; box-shadow:none !important; background:none !important; text-decoration-line:underline; text-decoration-style:solid; text-decoration-color:rgba(234,215,157,.55); text-underline-offset:3px; text-decoration-thickness:1px; }
.sim-refined #fh5co-header .sim-hero__occasions a:hover { color:#fff; text-decoration-color:#fff; }
.sim-refined .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.sim-refined .sim-hero__actions { display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.sim-refined #fh5co-header .sim-hero__cta { background:#e4c571; color:#241032!important; border:0; border-radius:10px; min-height:52px; padding:13px 22px; white-space:normal; text-align:center; box-shadow:0 6px 24px rgba(0,0,0,.18); }
.sim-refined #fh5co-header .sim-hero__cta:hover { background:#f1d68c; color:#241032!important; border:0; }
.sim-refined .sim-hero__proof { display:flex; align-items:center; flex-wrap:wrap; column-gap:16px; row-gap:2px; margin:12px 0 0; font-size:14px; line-height:1.5; color:#f6f0f9; }
.sim-refined #fh5co-header .sim-hero__proof a { display:inline-flex; align-items:center; gap:5px; min-height:32px; color:inherit; border:0; text-decoration:none; white-space:nowrap; }
.sim-refined #fh5co-header .sim-hero__proof a:hover { color:#ffe3a0; text-decoration:none; }
.sim-refined .sim-hero__proof-star { color:#e4c571; font-size:17px; }
.sim-refined .sim-entry-context { padding:34px 0 38px; background:#fff; }
.sim-refined .sim-entry-context .sim-container { max-width:990px; }
.sim-refined .sim-entry-context .sim-sub { color:#4b4553; font-size:17px; line-height:1.8; margin:0; }
.sim-refined .sim-entry-contact { margin:20px 0 0; font-size:14px; color:#5c5262; line-height:1.7; }
.sim-refined .sim-entry-contact__label { margin:0 0 12px; font-size:18px; font-weight:700; line-height:1.45; color:var(--sim-brand); -webkit-text-fill-color:var(--sim-brand); }
.sim-refined .sim-entry-contact__buttons { display:flex; flex-wrap:wrap; gap:10px; }
.sim-refined .sim-entry-contact__buttons .sim-btn { min-height:48px; padding:12px 22px; text-decoration:none; white-space:normal; text-align:center; }
.sim-refined .sim-entry-contact__buttons .sim-btn--outline { background:#fff; }
.sim-refined .sim-entry-contact__buttons .sim-btn--outline:hover { background:var(--sim-brand); }
.sim-refined .sim-entry-contact__buttons .sim-btn--whatsapp:is(:hover,:active,:focus-visible) { background:var(--sim-accent); color:var(--sim-brand-dark)!important; -webkit-text-fill-color:var(--sim-brand-dark); box-shadow:0 6px 20px rgba(201,162,39,.30); }
.sim-refined :is(a,button,summary):focus-visible { outline:3px solid #ad7611; outline-offset:5px; }
.sim-refined #fh5co-header :is(a,button):focus-visible { outline-color:#ffe7a5; }
.sim-refined [id] { scroll-margin-top:105px; }
@media (max-width:991px) and (min-width:769px) {
  .sim-refined .fh5co-nav .container { width:100%; }
  .sim-refined .fh5co-nav ul li a { padding-left:6px; padding-right:6px; font-size:14px; }
  .sim-refined #fh5co-logo img { width:168px; }
  .sim-refined .sim-hero__copy { width:53%; }
}
@media (max-width:768px) {
  body.sim-refined .fh5co-nav { height:68px; padding:10px 0; }
  body.sim-refined #fh5co-logo img { width:165px; height:auto; }
  body.sim-refined .fh5co-nav .col-xs-3 { width:auto; }
  body.sim-refined #main { padding-top:68px; }
  body.sim-refined .fh5co-nav-toggle { top:12px; right:14px; width:44px; height:44px; padding:0; }
  body.sim-refined #fh5co-header.sim-hero { min-height:0; }
  /* Foto bleibt 390px hoch, wird aber um 68px (Höhe der Menüleiste) nach oben geschoben → oberer Rand beschnitten,
     Hero wird 68px kürzer. Sobald ein eigenes Mobil-Bild (<source>) aktiv ist: hier top:0; height:322px; setzen. */
  body.sim-refined #main .sim-hero__image { height:390px; top:-68px; bottom:auto; object-position:57% 32%; }
  .sim-refined .sim-hero__shade { background:linear-gradient(180deg,rgba(23,13,34,0) 0px,rgba(23,13,34,0) 152px,rgba(23,13,34,.75) 239px,#170d22 322px); }
  .sim-refined .sim-hero__inner { min-height:0; display:block; padding:218px 24px 20px; }
  .sim-refined .sim-hero__copy { width:100%; max-width:580px; }
  .sim-refined #page-h1 { font-size:clamp(34px,7.6vw,48px)!important; line-height:1.04!important; margin-bottom:14px; }
  .sim-refined .sim-hero__location { font-size:15px; margin-bottom:8px; }
  .sim-refined .sim-hero__lead { font-size:15px; line-height:1.5; margin-bottom:18px; }
  .sim-refined .sim-hero__occasions { margin-top:6px; font-size:13px; }
  .sim-refined .sim-hero__actions { align-items:stretch; gap:2px; }
  .sim-refined #fh5co-header .sim-hero__cta { min-height:50px; font-size:15px!important; padding:12px 14px; }
  .sim-refined .sim-hero__proof { column-gap:14px; font-size:13px; margin-top:10px; }
  .sim-refined #fh5co-header .sim-hero__proof a { gap:4px; }
  .sim-refined .sim-entry-context { padding:24px 0 28px; }
  .sim-refined .sim-entry-context .sim-sub { font-size:16px; line-height:1.75; }
  .sim-refined .sim-entry-contact { font-size:13px; }
  .sim-refined .sim-entry-contact__label { font-size:17px; }
  .sim-refined .sim-entry-contact__buttons { flex-direction:column; }
  .sim-refined .sim-entry-contact__buttons .sim-btn { width:100%; }
  .sim-refined [id] { scroll-margin-top:84px; }
}
@media (max-width:374px) {
  .sim-refined .sim-hero__inner { padding-left:20px; padding-right:20px; padding-top:200px; }
  .sim-refined #page-h1 { font-size:32px!important; }
}
@media (prefers-reduced-motion:reduce) {
  body.sim-refined { scroll-behavior:auto; }
  html:has(body.sim-refined) { scroll-behavior:auto; }
}
/* Sticky Mobil-Aktionsleiste: erscheint erst, wenn der Hero aus dem Bild gescrollt ist (JS setzt .is-visible). */
.sim-sticky-cta { display:none; }
@media (max-width:768px) {
  .sim-sticky-cta { display:flex; position:fixed; left:0; right:0; bottom:0; z-index:950; gap:1px; background:#241032; box-shadow:0 -6px 24px rgba(0,0,0,.22); padding-bottom:env(safe-area-inset-bottom); transform:translateY(110%); transition:transform .28s ease; }
  .sim-sticky-cta.is-visible { transform:translateY(0); }
  .sim-sticky-cta a { flex:1 1 0; display:flex; align-items:center; justify-content:center; gap:7px; min-height:56px; padding:8px 6px; font-family:var(--sim-font-body); font-size:14px; font-weight:600; text-decoration:none; color:#fff; background:#35145F; }
  .sim-sticky-cta a i { font-size:16px; }
  .sim-sticky-cta a.sim-sticky-cta__primary { background:#e4c571; color:#241032; }
  .sim-sticky-cta a:focus-visible { outline:3px solid #ffe7a5; outline-offset:-4px; }
  body.sim-sticky-visible { padding-bottom:calc(56px + env(safe-area-inset-bottom)); }
  body.sim-sticky-visible .gototop { bottom:calc(72px + env(safe-area-inset-bottom)) !important; }
  /* CookieFirst-Fingerabdruck (Einstellungen öffnen) über die Leiste heben, damit er den Anfragen-Button nicht verdeckt */
  body.sim-sticky-visible .cookiefirst-root [data-cookiefirst-action="open-preferences"],
  body.sim-sticky-visible #cookiefirst-root [data-cookiefirst-action="open-preferences"] { bottom:calc(66px + env(safe-area-inset-bottom)) !important; transition:bottom .28s ease; }
}
@media (prefers-reduced-motion:reduce) {
  .sim-sticky-cta { transition:none; }
}
@media print {
  .sim-sticky-cta { display:none !important; }
}


/* ---------- Seiten mit eigenem Mobil-Ausschnitt (<source> 1000x900 aktiv): Bild bündig unter der Nav, 322 px sichtbar ---------- */
@media (max-width:768px) {
  body.sim-refined.sim-hero-has-mobile #main .sim-hero__image { top:0; bottom:auto; height:322px; object-position:50% 40%; }
}


/* ---------- Schutz gegen seitenweite .sim-container-Overrides (Unterseiten setzen mobil padding:0 16px !important) ---------- */
.sim-refined #fh5co-header .sim-hero__inner.sim-container { padding-top:54px !important; padding-bottom:54px !important; }
@media (max-width:768px) {
  .sim-refined #fh5co-header .sim-hero__inner.sim-container { padding:218px 24px 20px !important; }
}
@media (max-width:374px) {
  .sim-refined #fh5co-header .sim-hero__inner.sim-container { padding:200px 20px 20px !important; }
}


/* ---------- Button-Varianten, die Unterseiten nicht definieren (aus index.html #sim-critical-css, identisch) ---------- */
.sim-refined .sim-btn--whatsapp { background:var(--sim-brand); color:#fff!important; box-shadow:0 4px 18px rgba(53,20,95,.28); border:none; }
.sim-refined .sim-btn--whatsapp-light { background:#fff; color:var(--sim-brand)!important; border:none; box-shadow:0 4px 18px rgba(255,255,255,.20); }
.sim-refined .sim-btn--sm { font-size:14px!important; padding:9px 20px; }


/* ---------- Breadcrumb (aus den Anlassseiten, für Formatseiten ohne eigenes Breadcrumb-CSS) ---------- */
.sim-refined .sim-breadcrumb { background: var(--sim-bg-soft); padding: 10px 0; border-bottom: 1px solid var(--sim-border); font-family: var(--sim-font-body); font-size: 13px; }
.sim-refined .sim-breadcrumb__inner { max-width: 1200px; margin: 0 auto; padding: 0 clamp(1.25rem,4vw,2rem); }
.sim-refined .sim-breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sim-refined .sim-breadcrumb li { display: flex; align-items: center; gap: 6px; }
.sim-refined .sim-breadcrumb li + li::before { content: "›"; color: #9CA3AF; }
.sim-refined .sim-breadcrumb a { color: var(--sim-brand); text-decoration: none; }
.sim-refined .sim-breadcrumb a:hover { text-decoration: underline; }
.sim-refined .sim-breadcrumb [aria-current] { color: var(--sim-text-soft); }
.sim-refined #main .sim-breadcrumb li, .sim-refined #main .sim-breadcrumb a, .sim-refined #main .sim-breadcrumb span { font-size: 13px; line-height: 1.5; }

.sim-refined .sim-hero__location--after { margin:12px 0 0; }

/* ---------- Panorama-Zitat (aus index.html #sim-page-css, identisch) ---------- */
.sim-refined .sim-panorama-section { position: relative; height: clamp(220px, 30vw, 340px); overflow: hidden; clear: both; display: block; width: 100%; z-index: 1; }
.sim-refined .sim-panorama-section img { width: 100%; height: 100%; max-width:100%; object-fit: cover; object-position: center 30%; display: block; }
.sim-refined .sim-panorama-section__overlay { position: absolute; inset: 0; background: linear-gradient( to top, rgba(35,13,63,0.82) 0%, rgba(35,13,63,0.32) 55%, transparent 100% ); display: flex; align-items: flex-end; padding: clamp(20px, 4vw, 36px); }
.sim-refined .sim-panorama-section__quote { font-family: var(--sim-font-display); font-size: clamp(18px, 2.2vw, 26px); font-style: italic; color: #fff; line-height: 1.4; margin: 0; max-width: 700px; text-shadow: 0 2px 12px rgba(0,0,0,0.4); }
.sim-refined .sim-panorama-section__quote strong { font-style: normal; color: var(--sim-accent-2); }
@media (max-width: 768px) { .sim-refined .sim-panorama-section { height: clamp(180px, 52vw, 260px); } }

/* ---------- Stats-Row (aus index.html #sim-page-css, identisch) ---------- */
.sim-refined .sim-stats-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 600px) { .sim-refined .sim-stats-row { grid-template-columns: repeat(4, 1fr); } }
.sim-refined .sim-stat-card { text-align: center; padding: 1.25rem 1rem; border-radius: var(--sim-radius); background: var(--sim-grad-brand); box-shadow: 0 10px 26px rgba(53,20,95,0.18); }
.sim-refined .sim-stat-card__number { display: block; font-family: var(--sim-font-display); font-size: clamp(32px, 4vw, 48px); font-weight: 700; color: var(--sim-accent); line-height: 1; }
.sim-refined .sim-stat-card__label { display: block; font-family: var(--sim-font-body); font-size: 13px; color: rgba(255,255,255,0.85); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.06em; }

/* ---------- KI-Foto-Kennzeichnung (Netzwerk-Standard) ---------- */
.sim-refined .sim-hero .ai-photo-note { position:absolute; right:0; bottom:6px; z-index:2; padding-right:22px; font-family:var(--sim-font-body); font-size:.58em; line-height:1.3; color:#c9c9c9; opacity:.5; text-align:right; pointer-events:none; text-shadow:0 1px 2px rgba(0,0,0,.35); }

/* ---------- Entscheider-PDF-Zeile (Business-Anlassseiten) ---------- */
.sim-refined .sim-pdf-line { display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; margin:18px 0 0; padding:14px 16px; background:var(--sim-bg-soft); border:1px solid var(--sim-border); border-left:4px solid var(--sim-accent); border-radius:var(--sim-radius); font-family:var(--sim-font-body); font-size:15px; line-height:1.55; color:var(--sim-text); }
.sim-refined .sim-pdf-line__icon { font-size:22px; color:var(--sim-brand); }
.sim-refined .sim-pdf-line__text { flex:1 1 260px; margin:0; }
.sim-refined .sim-pdf-line__text strong { color:var(--sim-brand); }
.sim-refined .sim-pdf-line .sim-btn { min-height:44px; padding:10px 18px; }
@media (max-width:768px) { .sim-refined .sim-pdf-line { font-size:14px; } .sim-refined .sim-pdf-line .sim-btn { width:100%; } }

/* ---------- Breadcrumb unter dem Hero (kompakt) ---------- */
.sim-refined .sim-breadcrumb--hero { padding:10px 0 0; }