/* immer-kuehl.de — built from Hashir's Figma (Flo New Work, 23.09.2026).
   Tokens mirror the Figma style guide 1:1. Headline face: VAG Rounded Next in
   the design (commercial, Monotype); Nunito is the free self-hosted stand-in. */

@font-face { font-family: "Nunito"; font-weight: 700; font-display: swap; src: url("../fonts/nunito-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 800; font-display: swap; src: url("../fonts/nunito-latin-800-normal.woff2") format("woff2"); }
/* Clear Sans — Josefs Originalschrift (Intel, Apache 2.0, frei auch als Webfont).
   Kam am 25.09.2026 mit seinen Originaldateien, gebaut von _build/brand.py.
   Zurück auf Open Sans: unten in --f-body die erste Familie tauschen, die
   Open-Sans-Dateien liegen weiterhin in assets/fonts/. */
@font-face { font-family: "Clear Sans"; font-weight: 400; font-display: swap; src: url("../fonts/clear-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Clear Sans"; font-weight: 600; font-display: swap; src: url("../fonts/clear-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Clear Sans"; font-weight: 700; font-display: swap; src: url("../fonts/clear-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-weight: 400; font-display: swap; src: url("../fonts/open-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-weight: 600; font-display: swap; src: url("../fonts/open-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-weight: 700; font-display: swap; src: url("../fonts/open-sans-latin-700-normal.woff2") format("woff2"); }

:root {
  --bg: #F4F7F9;
  --white: #FFFFFF;
  --grey-50: #EEEEED;
  --grey-100: #CAC9C8;
  --grey-200: #B0AFAD;
  --grey-300: #8C8A88;
  --grey-400: #767371;
  --grey-500: #54504D;
  --grey-600: #4C4946;
  --grey-700: #3C3937;
  --grey-800: #2E2C2A;
  --grey-900: #232220;
  --blue-50: #E6F6FC;
  --blue-100: #B0E3F6;
  --blue-500: #00A6E2;
  --blue-600: #0097CE;
  --blue-700: #0076A0;
  /* Blau des Fussbereichs: exakt der Ton von Josefs alter Seite (dort liegt das
     weisse Logo auf #0095D4). Bewusst NICHT --blue-500, das ist das Seitenblau.
     Sollen beide gleich sein, hier auf #00A6E2 stellen. */
  --blue-footer: #0095D4;
  --green: #17B529;

  --f-head: "Nunito", "VAG Rounded Next", "Arial Rounded MT Bold", system-ui, sans-serif;
  --f-body: "Clear Sans", "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --container: 1280px;
  --gutter: 80px;
  --section: 100px;
  --r-card: 16px;
  --r-media: 25px;
  --r-input: 12px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --header-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 110px; }
body {
  margin: 0; font-family: var(--f-body); font-size: 16px; line-height: 25px;
  color: var(--grey-700); background: var(--white); -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
p { margin: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--f-head); font-weight: 800; color: var(--grey-800); letter-spacing: -0.01em; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--grey-900); color: #fff; padding: 12px 18px; z-index: 100; }
.skip:focus { left: 12px; top: 12px; }
:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 3px; border-radius: 4px; }

.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- type scale (Figma: H1 70/71, H2 50/52, H3 36, H4 28, H5 24, H6 22) */
.h1 { font-size: 70px; line-height: 71px; }
.h2 { font-size: 50px; line-height: 52px; }
.h3 { font-size: 36px; line-height: 1.2; }
.h4 { font-size: 28px; line-height: 1.2; }
.h5 { font-size: 24px; line-height: 1.2; }
.h6 { font-size: 22px; line-height: 1.25; }
.eyebrow {
  display: block; font-family: var(--f-head); font-weight: 800; font-size: 16px; line-height: 1.3;
  letter-spacing: .08em; text-transform: uppercase; color: var(--blue-500);
}
.eyebrow.muted { color: var(--grey-500); }
.lead { max-width: 540px; }
.muted { color: var(--grey-500); }

/* ---------- buttons */
.btns { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 53px; padding: 14px 25px; border-radius: 52px; border: 0; cursor: pointer;
  font-family: var(--f-body); font-weight: 700; font-size: 16px; line-height: 25px; white-space: nowrap;
  transition: transform .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease);
}
.btn svg { flex: none; transition: transform .2s var(--ease); }
.btn:hover { transform: translateY(-2px); }
.btn:hover .ic-arrow { transform: translateX(4px); }
.btn:active { transform: scale(.98); }
.btn-blue { background: var(--blue-500); color: #fff; }
.btn-blue:hover { background: var(--blue-600); box-shadow: 0 8px 20px rgba(0,166,226,.25); }
.btn-dark { background: var(--grey-900); color: #fff; padding-left: 18px; gap: 12px; }
.btn-dark:hover { background: #000; }
.on-dark .btn-dark { background: #fff; color: var(--grey-900); }
.btn-block { width: 100%; }
.btn .ic-wa { width: 28px; height: 28px; }

/* ---------- top bar + header */
.topbar { background: var(--grey-800); color: #fff; font-size: 16px; }
.topbar .container { display: flex; justify-content: space-between; align-items: center; min-height: 46px; gap: 24px; }
.topbar-group { display: flex; align-items: center; }
.topbar-group > * + * { border-left: 1px solid rgba(255,255,255,.28); margin-left: 16px; padding-left: 16px; }
.topbar .social { display: flex; gap: 8px; }
.topbar a:hover { color: var(--blue-100); }
.topbar .label { opacity: .9; text-transform: uppercase; margin-right: 4px; }

.site-header {
  position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.96);
  backdrop-filter: saturate(1.4) blur(8px); -webkit-backdrop-filter: saturate(1.4) blur(8px);
  transition: box-shadow .25s var(--ease);
}
.site-header.scrolled { box-shadow: 0 1px 0 var(--grey-50), 0 6px 20px rgba(35,34,32,.06); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; height: 92px; transition: height .25s var(--ease); }
.site-header.scrolled .container { height: var(--header-h); }
.nav { display: flex; align-items: center; }
.nav a { color: var(--grey-500); font-size: 16px; padding: 4px 0; transition: color .15s; }
.nav a + a { border-left: 1px solid var(--grey-100); margin-left: 18px; padding-left: 18px; }
.nav a:hover { color: var(--blue-500); }
.nav a[aria-current="page"] { color: var(--grey-900); font-weight: 700; }
.nav a.nav-contact { color: var(--grey-900); font-weight: 700; }
.menu-btn { display: none; width: 42px; height: 42px; border-radius: 8px; border: 0; background: var(--blue-500); color: #fff; align-items: center; justify-content: center; cursor: pointer; }

/* ---------- sections */
.section { padding: var(--section) 0; }
.section.bg { background: var(--bg); }
.section.dark { background: var(--grey-900); color: var(--grey-100); }
.section.dark h1, .section.dark h2, .section.dark h3, .section.dark h4 { color: #fff; }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 50px; }
.sec-head .titles { display: flex; flex-direction: column; gap: 12px; max-width: 640px; }
.sec-head > p { max-width: 500px; }
.sec-head.center { flex-direction: column; align-items: flex-start; }

/* ---------- hero */
.hero { padding: 40px 0 100px; }
.hero .container { display: grid; grid-template-columns: 569fr 659fr; gap: 52px; align-items: start; }
.hero-copy { padding-top: 41px; display: flex; flex-direction: column; gap: 40px; }
.hero-copy .intro { display: flex; flex-direction: column; gap: 16px; }
.hero h1 { text-shadow: 0 0 14px rgba(0,166,226,.16); }
.nw { white-space: nowrap; }
.flake { display: inline-block; margin-left: .18em; width: .71em; height: .71em; vertical-align: -.02em; background: url("../img/snowflake.png") center/contain no-repeat; }
.checks { display: flex; flex-wrap: wrap; gap: 10px 25px; list-style: none; margin: 0; padding: 0; }
.checks li { display: flex; align-items: center; gap: 8px; }
.checks li::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--green); flex: none; }
.hero-media { position: relative; }
.hero-media > picture img { width: 100%; aspect-ratio: 659 / 648; object-fit: cover; border-radius: var(--r-media); }
.float-card {
  position: absolute; left: 20px; bottom: 20px; display: flex; gap: 16px; align-items: flex-start;
  background: #fff; border-radius: 12px; padding: 12px 14px 12px 12px; max-width: calc(100% - 40px);
  box-shadow: 0 10px 30px rgba(35,34,32,.12);
}
.float-card img { width: 46px; height: 46px; flex: none; }
.float-card strong { display: block; font-family: var(--f-head); font-weight: 800; font-size: 18px; line-height: 1.4; color: var(--grey-800); max-width: 190px; }

/* ---------- about */
.about { position: relative; overflow: hidden; }
.about::after {
  content: ""; position: absolute; right: -40px; top: 0; width: 411px; height: 427px; opacity: .04;
  background: url("../img/snowflake.png") center/contain no-repeat; pointer-events: none;
}
.about .container { position: relative; z-index: 1; }
/* Flo 25.09: Bild links bündig mit dem Hero (volle Containerbreite statt 1166 zentriert), gleiche Höhe 648 */
.about-grid { display: grid; grid-template-columns: 536px 1fr; gap: 48px; align-items: center; }
.about-grid .portrait img { width: 100%; aspect-ratio: 536 / 648; object-fit: cover; border-radius: var(--r-media); }
.about-copy { display: flex; flex-direction: column; gap: 40px; }
.about-copy .intro { display: flex; flex-direction: column; gap: 16px; padding-bottom: 32px; border-bottom: 1px solid var(--grey-100); }
.features { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.feature { display: flex; flex-direction: column; gap: 16px; }
.feature .ic { width: 48px; height: 48px; }
.feature h3 { font-size: 18px; line-height: 1.4; }
.feature p { margin-top: 2px; }

/* ---------- product grid */
.products { display: grid; gap: 20px; }
.products .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.products .row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.product { display: flex; flex-direction: column; gap: 20px; color: inherit; }
.product .media { overflow: hidden; border-radius: var(--r-card); }
.product .media img { width: 100%; aspect-ratio: 630 / 256; object-fit: cover; transition: transform .5s var(--ease); }
.products .row3 .product .media img { aspect-ratio: 413 / 281; }
.product:hover .media img { transform: scale(1.03); }
.product h3 { font-size: 28px; line-height: 1.2; display: flex; align-items: center; gap: 10px; }
.product h3 svg { opacity: 0; transform: translateX(-6px); transition: .25s var(--ease); }
.product:hover h3 svg { opacity: 1; transform: none; }
.product p { margin-top: 8px; }
.dark .product p { color: var(--grey-100); }

/* ---------- trailer cards */
.trailers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.trailer {
  background: #fff; border-radius: var(--r-card); overflow: hidden; display: flex; flex-direction: column;
  border: 1px solid transparent; transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.trailer:hover { border-color: var(--blue-100); box-shadow: 0 14px 34px rgba(0,118,160,.10); transform: translateY(-3px); }
.trailer .pic { background: linear-gradient(180deg, #7FCBEF 0%, #CDEBF8 70%, #fff 100%); }
.trailer .pic img { width: 100%; aspect-ratio: 305 / 190; object-fit: cover; }
.trailer .top { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 16px 20px 6px; }
.trailer .top h3 { font-size: 22px; line-height: 1.2; white-space: nowrap; }
.badge { background: var(--blue-50); color: var(--blue-500); border-radius: 36px; padding: 4px 12px; font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.specs { list-style: none; margin: 0; padding: 4px 20px 12px; }
.specs li { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; font-size: 14px; }
.specs li + li { border-top: 1px solid var(--grey-50); }
.specs .v { color: var(--grey-900); font-weight: 600; letter-spacing: -.01em; text-align: right; }
.trailer .cta { margin-top: auto; border-top: 1px solid var(--grey-50); display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; font-weight: 700; color: var(--grey-900); }
.trailer .cta svg { transition: transform .2s var(--ease); }
.trailer .cta:hover { color: var(--blue-500); }
.trailer .cta:hover svg { transform: translateX(4px); }
.center-cta { display: flex; justify-content: center; margin-top: 50px; }

/* ---------- steps + emergency */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step { background: var(--bg); border-radius: var(--r-card); padding: 20px 20px 24px; display: flex; flex-direction: column; gap: 36px; }
.step .ic { width: 48px; height: 48px; }
.step h3 { font-size: 22px; line-height: 1.25; margin-bottom: 8px; }
.emergency {
  margin-top: 20px; background: var(--grey-900); color: var(--grey-100); border-radius: var(--r-card);
  padding: 20px 20px 20px 24px; display: flex; align-items: center; gap: 25px;
}
.emergency img { width: 40px; height: 40px; flex: none; }
.emergency .txt { flex: 1; }
.emergency strong { display: block; color: #fff; font-family: var(--f-head); font-weight: 800; font-size: 22px; line-height: 1.3; }

/* ---------- references */
.refs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ref { display: flex; flex-direction: column; gap: 20px; }
.ref .media { overflow: hidden; border-radius: var(--r-card); }
.ref .media img { width: 100%; aspect-ratio: 413 / 283; object-fit: cover; transition: transform .5s var(--ease); }
.ref:hover .media img { transform: scale(1.03); }
.ref h3 { font-size: 28px; line-height: 1.2; }
.ref .where { display: flex; align-items: center; gap: 6px; color: var(--blue-500); font-family: var(--f-head); font-weight: 800; letter-spacing: .04em; margin: 4px 0 10px; }
.ref p { color: var(--grey-500); }

/* ---------- service area */
.area { display: grid; grid-template-columns: 503px 1fr; gap: 55px; align-items: center; }
.area-copy { display: flex; flex-direction: column; gap: 25px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.chips li { background: var(--bg); border-radius: 52px; padding: 6px 16px; color: var(--grey-900); font-weight: 600; }
.divider { height: 1px; background: var(--grey-50); border: 0; margin: 0; }
.map { position: relative; border-radius: var(--r-card); overflow: hidden; }
.map img { width: 100%; aspect-ratio: 722 / 491; object-fit: cover; }
.map .rings span { position: absolute; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.map .r1 { width: 81.6%; height: 81.7%; background: rgba(0,166,226,.04); border: 1px solid rgba(0,166,226,.32); }
.map .r2 { width: 59.7%; height: 59.7%; background: rgba(0,166,226,.07); }
.map .r3 { width: 31.4%; height: 31.6%; background: rgba(0,166,226,.07); }
.map .pin { position: absolute; left: 51.8%; top: 42%; width: 36px; height: 36px; transform: translate(-50%, -50%); }

/* ---------- contact */
.contact-grid { display: grid; grid-template-columns: 492px 1fr; gap: 105px; align-items: start; }
.contact-copy { display: flex; flex-direction: column; gap: 27px; }
.contact-copy .intro { display: flex; flex-direction: column; gap: 20px; padding-bottom: 27px; border-bottom: 1px solid var(--grey-700); }
.contact-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.contact-lines a { display: flex; align-items: center; gap: 16px; color: #fff; font-family: var(--f-head); font-weight: 800; font-size: 22px; }
.contact-lines a:hover { color: var(--blue-100); }
.contact-lines svg { width: 40px; height: 40px; flex: none; }
.form-card { background: #fff; border-radius: 20px; padding: 25px; color: var(--grey-700); }
.form { display: flex; flex-direction: column; gap: 12px; }
.field { position: relative; }
.field label.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.form input, .form select, .form textarea {
  width: 100%; border: 1px solid transparent; background: var(--bg); border-radius: var(--r-input);
  padding: 14px 20px; min-height: 55px; font-size: 16px; line-height: 25px; color: var(--grey-900);
  transition: border-color .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease);
  -webkit-appearance: none; appearance: none;
}
.form select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%2354504D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 18px center; padding-right: 48px; }
.form select:invalid, .form input[type=date]:invalid { color: var(--grey-500); }
.form textarea { min-height: 142px; resize: vertical; }
.form ::placeholder { color: var(--grey-500); opacity: 1; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; background: #fff; border-color: var(--blue-500); box-shadow: 0 0 0 4px rgba(0,166,226,.12); }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form .date-label { position: absolute; left: 21px; top: 15px; pointer-events: none; color: var(--grey-500); }
.form input[type=date]:not(:placeholder-shown), .form input[type=date]:focus { color: var(--grey-900); }
.form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 22px; color: var(--grey-500); }
.consent input { width: 18px; height: 18px; min-height: 0; margin-top: 2px; padding: 0; flex: none; accent-color: var(--blue-500); -webkit-appearance: auto; appearance: auto; }
.consent a { text-decoration: underline; }
.form .btn { margin-top: 18px; }
.form .btn[disabled] { opacity: .7; cursor: progress; transform: none; }
.form-msg { font-size: 15px; min-height: 0; }
.form-msg.err { color: #B3261E; }
.form-msg.ok { color: #0D7A1C; font-weight: 600; }
.field-err { color: #B3261E; font-size: 14px; margin-top: 4px; }
.form-success { text-align: center; padding: 40px 10px; }
.form-success h3 { font-size: 28px; margin: 16px 0 8px; }
.form-success .check { width: 56px; height: 56px; border-radius: 50%; background: var(--blue-50); color: var(--blue-500); display: inline-flex; align-items: center; justify-content: center; }

/* ---------- footer */
/* Fussbereich steht auf dem Blau der alten Seite, das Logo liegt weiss darauf,
   genau wie auf immer-kuehl.de (Flo 25.09). Weisse Logofassung: logo-immer-kuehl-weiss.svg. */
.site-footer { padding: 60px 0 32px; background: var(--blue-footer); color: #fff; }
.foot-grid { display: grid; grid-template-columns: 433px 1fr; gap: 80px; padding-bottom: 60px; border-bottom: 1px solid rgba(255,255,255,.4); }
.foot-brand { display: flex; flex-direction: column; gap: 16px; }

.foot-brand p { font-family: var(--f-head); font-weight: 800; font-size: 22px; line-height: 30px; color: #fff; }
.foot-cols { display: flex; justify-content: flex-end; gap: 110px; }
.foot-cols h2 { font-size: 20px; color: #fff; margin-bottom: 20px; }
.foot-cols ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; color: #fff; }
.foot-cols a:hover { color: #fff; text-decoration: underline; }
.foot-bottom { display: flex; justify-content: space-between; padding-top: 32px; color: #fff; gap: 16px; flex-wrap: wrap; }
.foot-bottom a:hover { color: #fff; text-decoration: underline; }

/* ---------- sticky mobile call bar (brief: one tap from anywhere) */
.callbar { display: none; }

/* ---------- inner pages */
.page-hero { background: var(--bg); padding: 70px 0 80px; position: relative; overflow: hidden; }
.page-hero::after { content: ""; position: absolute; right: -60px; top: -30px; width: 380px; height: 400px; opacity: .05; background: url("../img/snowflake.png") center/contain no-repeat; pointer-events: none; }
.page-hero .container { position: relative; z-index: 1; }
.page-hero .inner { display: grid; grid-template-columns: 1.05fr 1fr; gap: 60px; align-items: center; }
.page-hero .inner.solo { grid-template-columns: 1fr; max-width: 820px; }
.page-hero .copy { display: flex; flex-direction: column; gap: 20px; }
.page-hero h1 { font-size: 60px; line-height: 62px; }
.page-hero .media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-media); }
.crumbs { font-size: 14px; color: var(--grey-500); margin-bottom: 4px; }
.crumbs a:hover { color: var(--blue-500); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.split.flip > :first-child { order: 2; }
.split .media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-card); }
.prose { display: flex; flex-direction: column; gap: 16px; }
.prose h2 { margin-bottom: 4px; }
.ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ticks li { position: relative; padding-left: 30px; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 5px; background: var(--blue-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2300A6E2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.2l2.3 2.3L9.5 3.8'/%3E%3C/svg%3E") center no-repeat; }
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cards4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.gallery.g3 { grid-template-columns: repeat(3, 1fr); }
.gallery figure img { aspect-ratio: 1; }
.cards2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.card { background: var(--bg); border-radius: var(--r-card); padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.section.bg .card { background: #fff; }
.card h3 { font-size: 22px; line-height: 1.25; }
.card .ic { width: 48px; height: 48px; margin-bottom: 12px; }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-card); }

/* trailer comparison page */
.compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-card); background: #fff; }
.compare { width: 100%; border-collapse: collapse; min-width: 760px; font-size: 15px; }
.compare th, .compare td { padding: 14px 20px; text-align: left; border-bottom: 1px solid var(--grey-50); }
.compare thead th { font-family: var(--f-head); font-weight: 800; font-size: 22px; color: var(--grey-900); background: #fff; }
.compare tbody th { color: var(--grey-500); font-weight: 400; white-space: nowrap; }
.compare td { color: var(--grey-900); font-weight: 600; }
.compare tr:last-child > * { border-bottom: 0; }
.size-block { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; padding: 60px 0; border-top: 1px solid var(--grey-100); }
.size-block:first-of-type { border-top: 0; padding-top: 0; }
.size-block .pics { display: flex; flex-direction: column; gap: 16px; }
.size-block .pics .main { border-radius: var(--r-card); background: linear-gradient(180deg, #7FCBEF 0%, #CDEBF8 70%, #fff 100%); overflow: hidden; }
.size-block .pics .main img { width: 100%; aspect-ratio: 5 / 3; object-fit: cover; }
.size-block .pics .extra { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.size-block .pics .extra img { border-radius: 12px; background: #fff; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; border: 1px solid var(--grey-50); }
.size-block .info { display: flex; flex-direction: column; gap: 18px; }
.size-block .info .top { display: flex; align-items: center; gap: 12px; }
.spec-table { background: #fff; border-radius: var(--r-card); border: 1px solid var(--grey-50); }
.spec-table .specs { padding: 6px 20px; }
.spec-table .specs li { font-size: 15px; }
.size-nav { display: flex; gap: 8px; flex-wrap: wrap; }
.size-nav a { background: #fff; border: 1px solid var(--grey-100); border-radius: 52px; padding: 8px 18px; font-weight: 700; color: var(--grey-900); transition: .2s var(--ease); }
.size-nav a:hover { border-color: var(--blue-500); color: var(--blue-500); }
.dl { display: inline-flex; align-items: center; gap: 8px; color: var(--blue-600); font-weight: 700; }
.dl:hover { text-decoration: underline; }
.note { background: var(--blue-50); border-radius: 12px; padding: 16px 20px; color: var(--grey-700); }

/* ---------- Zeitstrahl "Meine Geschichte" (Josefs Text, 01.10.2026)
   Jahr links, Karte rechts, dazwischen die Linie mit dem Punkt. Die Linie laeuft
   von Punkt zu Punkt, deshalb hat die erste Zeile oben und die letzte unten keine. */
.story { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.story li { display: grid; grid-template-columns: 180px 1fr; gap: 44px; align-items: start; position: relative; }
.story li::before {
  content: ""; position: absolute; left: 180px; top: 0; bottom: -20px; width: 2px;
  margin-left: 21px; background: var(--grey-50);
}
.story li:first-child::before { top: 30px; }
.story li:last-child::before { bottom: auto; height: 30px; }
.story li::after {
  content: ""; position: absolute; left: 180px; top: 24px; width: 12px; height: 12px; border-radius: 50%;
  margin-left: 16px; background: var(--blue-500); box-shadow: 0 0 0 5px var(--bg);
}
.story .yr {
  font-family: var(--f-head); font-weight: 800; font-size: 26px; line-height: 1.2;
  color: var(--blue-500); padding-top: 17px; padding-right: 20px; display: block;
}
.story .ev { background: #fff; border-radius: var(--r-card); padding: 22px 26px 24px; }
.story .ev h3 { font-size: 22px; line-height: 1.25; margin-bottom: 8px; }
.story .story-now .yr { color: var(--grey-900); }
.story .story-now::after { background: var(--grey-900); }

/* breites Einzelbild ueber einer Kartenreihe */
.wide-shot { margin: 0 0 32px; }
.wide-shot img { width: 100%; border-radius: var(--r-media); }
.wide-shot figcaption { margin-top: 12px; }

/* legal pages */
.legal { max-width: 820px; }
.legal h2 { font-size: 28px; line-height: 1.25; margin: 40px 0 12px; }
.legal h3 { font-size: 20px; margin: 24px 0 8px; }
.legal p, .legal ul { margin: 0 0 12px; }
.legal a { color: var(--blue-600); text-decoration: underline; }

/* ---------- reveal motion (per Hashir's motion notes) */
.js .rv { opacity: 0; transform: translateY(22px); transition: opacity .45s var(--ease), transform .45s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.js .rv.from-left { transform: translateX(-24px); }
.js .rv.zoom { transform: scale(1.03); }
.js .rv.pop { transform: translate(-50%, -50%) scale(.8); }
.js .rv.in { opacity: 1; transform: none; }
.js .rv.pop.in { transform: translate(-50%, -50%); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rv, .js .rv.pop { opacity: 1; transform: none; transition: none; }
  .js .rv.pop { transform: translate(-50%, -50%); }
  * { transition-duration: 0s !important; }
}

/* ================= responsive ================= */
@media (max-width: 1360px) {
  :root { --gutter: 48px; }
  .nav a + a { margin-left: 12px; padding-left: 12px; }
  .nav a { font-size: 15px; }
  .logo-md { height: 40px; }
}
@media (max-width: 1180px) {
  .nav { display: none; }
  .menu-btn { display: inline-flex; }
  .h1 { font-size: 58px; line-height: 60px; }
  .h2 { font-size: 42px; line-height: 46px; }
  .hero .container { gap: 36px; }
  .about-grid { grid-template-columns: 400px 1fr; }
  .trailers { grid-template-columns: repeat(2, 1fr); }
  .area { grid-template-columns: 1fr 1fr; gap: 40px; }
  .contact-grid { grid-template-columns: 1fr 1fr; gap: 50px; }
  .foot-grid { grid-template-columns: 1fr; gap: 40px; }
  .foot-cols { justify-content: flex-start; gap: 70px; }
  .topbar .hide-md { display: none; }
}
@media (max-width: 960px) {
  :root { --gutter: 32px; --section: 80px; }
  .hero .container, .about-grid, .area, .contact-grid, .split, .page-hero .inner, .size-block { grid-template-columns: 1fr; }
  .split.flip > :first-child { order: 0; }
  .hero-copy { padding-top: 20px; }
  .about-grid .portrait { max-width: 480px; }
  .sec-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .products .row2, .products .row3, .refs, .steps, .cards3, .cards4, .gallery { grid-template-columns: 1fr 1fr; }
  .page-hero h1 { font-size: 46px; line-height: 50px; }
  .story li { grid-template-columns: 120px 1fr; gap: 32px; }
  .story li::before { left: 120px; margin-left: 15px; }
  .story li::after { left: 120px; margin-left: 10px; }
  .story .yr { font-size: 22px; padding-top: 19px; }
}
@media (max-width: 640px) {
  :root { --gutter: 16px; --section: 64px; }
  body { padding-bottom: 76px; }
  .topbar { font-size: 13px; }
  .topbar .container { min-height: 40px; justify-content: flex-start; }
  .topbar .legal-links, .topbar .label { display: none; }
  .topbar a { white-space: nowrap; }
  .topbar-group > * + * { margin-left: 10px; padding-left: 10px; }
  .site-header .container, .site-header.scrolled .container { height: 68px; }
  .logo-md, .site-header.scrolled .logo-md { height: 35px; }
  .h1 { font-size: 44px; line-height: 50px; }
  .h2, .page-hero h1 { font-size: 34px; line-height: 38px; }
  .hero { padding: 8px 0 60px; }
  .hero-copy { gap: 24px; padding-top: 0; }
  .hero .btn { flex: 1 1 auto; }
  .hero-media > picture img { aspect-ratio: 398 / 368; }
  .float-card { left: 12px; bottom: 12px; }
  .float-card strong { font-size: 16px; }
  .checks { gap: 10px 20px; }
  .features { grid-template-columns: 1fr; gap: 24px; }
  .products .row2, .products .row3, .refs, .steps, .cards3, .cards2, .cards4, .gallery { grid-template-columns: 1fr; }
  .gallery.g3 { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .gallery.g3 figcaption { font-size: 12px; line-height: 16px; }
  .product .media img, .products .row3 .product .media img { aspect-ratio: 398 / 250; }
  .product h3, .ref h3 { font-size: 24px; }
  /* Zeitstrahl am Handy: Jahr ueber die Karte, Linie ganz links */
  .story { gap: 16px; }
  .story li { grid-template-columns: 1fr; gap: 6px; padding-left: 28px; }
  .story li::before, .story li:first-child::before { left: 0; top: 10px; bottom: -16px; margin-left: 4px; }
  .story li:last-child::before { bottom: auto; height: 14px; }
  .story li::after { left: 0; top: 7px; margin-left: 0; width: 10px; height: 10px; }
  .story .yr { font-size: 20px; padding-top: 0; }
  .story .ev { padding: 18px 20px 20px; }
  .story .ev h3 { font-size: 20px; }
  /* trailers: swipe instead of stacking (motion notes) */
  .trailers { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 8px; scrollbar-width: none; }
  .trailers::-webkit-scrollbar { display: none; }
  .trailer { flex: 0 0 84%; scroll-snap-align: center; }
  .emergency { flex-direction: column; align-items: stretch; gap: 16px; padding: 20px; }
  .emergency .head { display: flex; gap: 14px; }
  .emergency .btn { width: 100%; }
  .contact-lines a { font-size: 19px; }
  .form .row { grid-template-columns: 1fr; }
  .form-card { padding: 16px; }
  .foot-cols { flex-direction: column; gap: 32px; }
  .foot-brand p { font-size: 19px; line-height: 26px; }
  .page-hero { padding: 40px 0 56px; }
  .callbar {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.97);
    box-shadow: 0 -6px 24px rgba(35,34,32,.12);
  }
  .callbar .btn { min-height: 50px; padding: 10px 12px; font-size: 15px; }
  .callbar .btn-dark { padding-left: 10px; gap: 8px; }
}

/* mobile menu */
.mnav { position: fixed; inset: 0; z-index: 80; background: #fff; display: flex; flex-direction: column; padding: 16px var(--gutter) 32px; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: .25s var(--ease); overflow-y: auto; }
.mnav.open { transform: none; opacity: 1; visibility: visible; }
.mnav .mtop { display: flex; justify-content: space-between; align-items: center; height: 52px; margin-bottom: 20px; }
.mnav .mtop .logo { height: 35px; }
.mnav nav a { display: block; font-family: var(--f-head); font-weight: 800; font-size: 26px; color: var(--grey-800); padding: 12px 0; border-bottom: 1px solid var(--grey-50); }
.mnav nav a[aria-current="page"] { color: var(--blue-500); }
.mnav .btns { margin-top: 28px; }
.mnav .btns .btn { flex: 1 1 100%; }
.no-scroll { overflow: hidden; }

/* ================= 25.09 corrections (Josef call + Sophie's feedback) ================= */
/* Logo: Josefs Originaldatei als Vektor (Flocke + Schriftzug, ohne Untertitel).
   Die Höhe steuert, die Breite folgt dem Seitenverhältnis 459.57 : 97.65. */
.logo { display: block; width: auto; align-self: flex-start; transition: height .25s var(--ease); }
.logo-md { height: 46px; }
.logo-sm { height: 35px; }
.logo-lg { height: 52px; }
.brand { display: inline-flex; }
.site-header.scrolled .logo-md { height: 40px; }
.foot-social { display: flex; gap: 18px; font-size: 16px !important; line-height: 1.4 !important; font-weight: 600 !important; }
.foot-social a { display: inline-flex; align-items: center; gap: 8px; color: #fff; }
.foot-social a:hover { text-decoration: underline; }
.foot-social svg { width: 18px; height: 18px; }
.topbar .social a { display: inline-flex; align-items: center; }

/* hero: Sepp in front, what he rents as circles around him */
.hero-sepp .container { grid-template-columns: 1fr 1fr; align-items: center; }
.sepp-media { padding: 0 56px 40px 0; }
.sepp-media > picture img { aspect-ratio: 4 / 5; object-position: 50% 30%; }
.orbit { position: absolute; inset: 0; pointer-events: none; }
.bubble { position: absolute; pointer-events: auto; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--grey-900); font-family: var(--f-head); font-weight: 800; font-size: 15px; transition: transform .25s var(--ease); }
.bubble picture img { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; border: 5px solid #fff; box-shadow: 0 10px 26px rgba(35,34,32,.16); }
.bubble span { background: #fff; border-radius: 40px; padding: 3px 12px; box-shadow: 0 4px 12px rgba(35,34,32,.08); }
.bubble:hover { transform: translateY(-4px); }
.bubble.b0 { right: 0; top: 6%; }
.bubble.b1 { right: -8px; top: 38%; }
.bubble.b2 { right: 22px; bottom: 0; }
.bubble.b3 { left: -40px; bottom: 12%; }

/* 🔴 Platzhalter an der Stelle des Seitenkopf-Fotos, MUSS VOR GO-LIVE WEG.
   Steht seit 01.10.2026 dort, wo das Kirchen-Porträt war, bis Josefs Isar-Foto da ist
   (OFFEN.md Punkt R). Haelt genau das Seitenverhaeltnis 4/5 des Fotos, damit die Kreise
   drumherum an derselben Stelle bleiben. Das seitliche Innenmass haelt den Text von den
   Kreisen frei, die links und rechts in die Flaeche hineinragen. */
.photo-slot {
  aspect-ratio: 4 / 5; border-radius: var(--r-media);
  background: var(--blue-50); border: 2px dashed var(--blue-100);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: 40px 88px;
}
.photo-slot-flake { width: 54px; height: 54px; opacity: .5; background: url("../img/snowflake.png") center/contain no-repeat; }
.photo-slot-kicker { margin: 6px 0 0; font-family: var(--f-head); font-weight: 800; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--blue-700); }
.photo-slot-text { margin: 0; font-family: var(--f-head); font-weight: 800; font-size: 21px; line-height: 29px; color: var(--grey-800); }
.photo-slot-note { margin: 0; font-size: 15px; line-height: 23px; color: var(--grey-400); }

/* trailer feature grid */
.feat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.feat { background: #fff; border-radius: var(--r-card); overflow: hidden; display: flex; flex-direction: column; }
.feat .media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.feat > div:last-child { padding: 18px 20px 22px; }
.feat h3 { font-size: 20px; line-height: 1.25; margin-bottom: 6px; }
.feat.plain { padding-top: 22px; }
.feat.plain .ic-flake { display: block; width: 40px; height: 40px; margin: 0 20px; background: url("../img/snowflake.png") center/contain no-repeat; }

/* FAQ */
.faq { display: flex; flex-direction: column; gap: 12px; max-width: 900px; }
.faq-item { background: var(--bg); border-radius: 12px; }
.section.bg .faq-item { background: #fff; }
.faq-item summary { cursor: pointer; list-style: none; padding: 18px 56px 18px 22px; position: relative; font-family: var(--f-head); font-weight: 800; font-size: 19px; line-height: 1.35; color: var(--grey-900); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-size: 26px; color: var(--blue-500); transition: transform .2s var(--ease); }
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item p { padding: 0 22px 20px; margin: 0; max-width: 760px; }
.faq-item summary:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 2px; border-radius: 12px; }

/* delivery area map (drawn from real coordinates) */
.map-svg { background: var(--bg); }
.area-map { display: block; width: 100%; height: auto; aspect-ratio: 200 / 176; }
.area-map .ring0 { fill: rgba(0,166,226,.05); stroke: rgba(0,166,226,.35); stroke-width: .4; }
.area-map .ring1, .area-map .ring2 { fill: rgba(0,166,226,.07); }
.area-map .town circle { fill: var(--grey-400); }
.area-map .town text { font: 600 4.2px var(--f-body); fill: var(--grey-500); }
.area-map .town.big circle { fill: var(--blue-600); }
.area-map .town.big text { font: 800 5.6px var(--f-head); fill: var(--grey-800); }
.area-map .home circle { fill: var(--blue-500); stroke: #fff; stroke-width: 1.5; }
.area-map .home text { font: 800 7px var(--f-head); fill: var(--grey-900); }

/* bar planner: the same modules re-arranging, seen from above */
.planner { margin: 0; background: var(--bg); border-radius: var(--r-card); padding: 20px; }
.planner svg { display: block; width: 100%; height: auto; }
.planner .mod { transition: transform .9s var(--ease); transform-box: view-box; }
.planner .mod rect { fill: #E9DCC6; stroke: #B69A6E; stroke-width: 2; }
.planner .mod path { stroke: #fff; stroke-width: 3; stroke-linecap: round; opacity: .9; }
.planner figcaption { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.planner-names { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.planner-names li { border-radius: 40px; padding: 4px 14px; font-family: var(--f-head); font-weight: 800; background: #fff; color: var(--grey-500); transition: background .3s, color .3s; }
.planner-names li.on { background: var(--blue-500); color: #fff; }
.chips-lg li { font-size: 18px; padding: 10px 22px; background: #fff; }
.gallery.g4 { grid-template-columns: repeat(4, 1fr); }
.gallery.g4 figure img { aspect-ratio: 1; }

/* the clips on the site, all muted and looping: the lit stage (Sophie 24.09, portrait) and the
   lit bar (Josef 01.10, landscape — .wide, sonst schneidet 3/4 die lange Bar ab) */
.loop-video { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r-card); background: var(--grey-100, #f2f2f2); }
.loop-video.wide { aspect-ratio: 16 / 9; }
.gal-2 { max-width: 340px; }
.gal-2 picture img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-card); }

@media (max-width: 1180px) {
  .feat-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 960px) {
  .hero-sepp .container { grid-template-columns: 1fr; }
  .feat-grid, .gallery.g4 { grid-template-columns: 1fr 1fr; }
  .sepp-media { padding: 0; }
  /* Kreise stehen hier unter der Flaeche statt darueber, der Text braucht also keinen Rand mehr. */
  .photo-slot { padding: 36px 32px; aspect-ratio: 4 / 3; }
  .orbit { position: static; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 18px; }
  .bubble { position: static; }
  .bubble picture img { width: 88px; height: 88px; border-width: 3px; }
}
@media (max-width: 640px) {
  .logo-md { height: 32px; }
  .site-header.scrolled .logo-md { height: 30px; }
  .logo-lg { height: 44px; }
  .feat-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .feat h3 { font-size: 17px; }
  .feat > div:last-child { padding: 12px 14px 16px; }
  .faq-item summary { font-size: 17px; }
  .orbit { gap: 10px; }
  .bubble { font-size: 13px; }
  .bubble picture img { width: 72px; height: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  .planner .mod { transition: none; }
}
.foot-social svg path { fill: currentColor; }
/* wide delivery map (Figma look, bigger area) */
.map-wide img { aspect-ratio: 1400 / 1233; }
.map-wide .pin { left: 50%; top: 50%; transform: translate(-50%, -100%); }
.map-wide .rings span { max-width: none; }
.mlabels { position: absolute; inset: 0; pointer-events: none; }
.mlabel { position: absolute; transform: translate(-50%, -50%); background: rgba(255,255,255,.92); border-radius: 30px; padding: 2px 9px; font-family: var(--f-head); font-weight: 800; font-size: 13px; color: var(--grey-800); box-shadow: 0 2px 8px rgba(35,34,32,.1); white-space: nowrap; }
.mlabel.home { transform: translate(-50%, 45%); background: var(--grey-900); color: #fff; }
.map-credit { position: absolute; right: 8px; bottom: 6px; font-size: 10px; color: var(--grey-400); background: rgba(255,255,255,.7); padding: 0 5px; border-radius: 4px; }
@media (max-width: 640px) { .mlabel { font-size: 10px; padding: 1px 6px; } }
.bubble.b4 { left: -40px; top: 22%; }
@media (max-width: 960px) { .bubble.b4 { position: static; } }
.speed .card h3 { font-size: clamp(28px, 4vw, 40px); line-height: 1.15; margin-top: 6px; }