/* =========================================================
   digitalgrafik24 – Online Marketing Agentur Berlin
   Design: Solar-Berlin-Blaupause (Apple-Look, Systemschrift, keine externen Fonts)
   Grundlage: vorlage/solar-berlin/assets/site.css (Tokens, Typo, Buttons, Navigation, Sektionen)
   ========================================================= */

:root {
  --bg: #ffffff;
  --bg-alt: #f5f5f7;
  --ink: #1d1d1f;
  --ink-2: #6e6e73;
  --ink-3: #86868b;
  --line: #d2d2d7;
  --line-soft: #e8e8ed;
  --blue: #0071e3;
  --blue-h: #0077ed;
  --link: #0066cc;
  --link-dark: #2997ff;
  --marke-rot: #c8102e;    /* Rot aus dem Logo: nur Marke (Logo, Akzent auf Dunkel) */
  --gelb: #ffb81b;         /* Gelb aus Solar Berlin: nur „Platz 1 prüfen“ im Hero */
  --dark: #000000;
  --dark-2: #101011;
  --dark-ink: #f5f5f7;
  --dark-ink-2: #a1a1a6;
  --r: 18px;
  --r-lg: 28px;
  --shadow: 0 2px 6px rgba(0,0,0,.04), 0 12px 40px rgba(0,0,0,.08);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --ease: cubic-bezier(.25,.1,.25,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --wrap: 1024px;
  --wrap-wide: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -.022em;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
picture { display: block; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid rgba(0,113,227,.6); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute !important; left: 0; top: 0; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: min(var(--wrap), 100% - 44px); margin-inline: auto; }
.wrap-wide { width: min(var(--wrap-wide), 100% - 44px); margin-inline: auto; }

/* ---------- Typografie ---------- */
.eyebrow { font-size: 21px; line-height: 1.19; font-weight: 600; letter-spacing: .011em; margin: 0 0 8px; }
.h-hero { font-size: clamp(48px, 8.4vw, 96px); line-height: 1.04; font-weight: 700; letter-spacing: -.035em; margin: 0; }
.h-xl { font-size: clamp(40px, 6vw, 72px); line-height: 1.05; font-weight: 700; letter-spacing: -.03em; margin: 0; }
.h-l { font-size: clamp(32px, 4.6vw, 56px); line-height: 1.07; font-weight: 700; letter-spacing: -.028em; margin: 0; }
.h-m { font-size: clamp(26px, 3vw, 40px); line-height: 1.1; font-weight: 700; letter-spacing: -.022em; margin: 0; }
.h-s { font-size: 24px; line-height: 1.17; font-weight: 600; letter-spacing: -.015em; margin: 0; }
.lead { font-size: clamp(19px, 1.8vw, 24px); line-height: 1.35; font-weight: 500; letter-spacing: -.01em; color: var(--ink-2); margin: 0; }
.dark .lead, .dark-2 .lead { color: var(--dark-ink-2); }
.muted { color: var(--ink-2); }
.center { text-align: center; }
sup.fn { font-size: .55em; vertical-align: super; line-height: 0; margin-left: 1px; }
sup.fn a { color: inherit; }
.br-mobil { display: none; }
@media (max-width: 700px) { .br-mobil { display: inline; } .br-desk { display: none; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 26px;
  border: 0; border-radius: 980px;
  background: var(--blue); color: #fff;
  font-size: 17px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap;
  cursor: pointer; text-decoration: none !important;
  transition: background .2s var(--ease), transform .2s var(--ease), box-shadow .3s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { background: var(--blue-h); }
.btn:active { transform: scale(.97); }
/* Eine Größe für alle Aktions-Buttons (Hero, Sektionen, Karten, Abschluss): gleich hoch, gleich breit */
.btn-l { min-height: 54px; min-width: 240px; padding: 0 30px; font-size: 18px; }
.btn-s { min-height: 30px; padding: 0 14px; font-size: 13px; }
.btn-white { background: #fff; color: var(--ink); }
.btn-white:hover { background: #f0f0f2; }
/* Gelb wie bei Solar Berlin (#FFB81B, dunkle Schrift): einzige gelbe Fläche der Seite, „Platz 1 prüfen“ im Hero */
.btn-gelb { background: var(--gelb); color: #1d1d1f; box-shadow: inset 0 0 0 1px rgba(120,80,0,.18), 0 1px 3px rgba(60,40,0,.18); }
.btn-gelb:hover { background: #ffc53d; }
.link-arrow { font-size: 19px; display: inline-flex; align-items: center; gap: 4px; }
.link-arrow::after { content: "›"; font-size: 1.25em; line-height: 1; transform: translateY(-1px); transition: transform .25s var(--ease); }
.link-arrow:hover { text-decoration: underline; }
.link-arrow:hover::after { transform: translate(3px,-1px); }
.dark .link-arrow, .dark-2 .link-arrow { color: var(--link-dark); }
.links { display: flex; flex-wrap: wrap; gap: 10px 30px; margin-top: 26px; }

/* ---------- Glas-Navigation (schwebt über dem Hero) ---------- */
.glass-nav { position: absolute; top: 18px; left: 0; right: 0; z-index: 80; pointer-events: none; }
.gn-inner {
  pointer-events: auto;
  width: min(var(--wrap-wide), 100% - 44px); height: 60px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  color: #fff;
}
.logo { display: inline-flex; flex: none; align-items: center; text-decoration: none !important; }
/* Logos nie verzerren: Höhe fest, Breite folgt dem Seitenverhältnis */
.logo-img { display: block; height: 52px; width: auto; object-fit: contain; filter: drop-shadow(0 1px 8px rgba(0,0,0,.28)); }
.nav-links { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; font-size: 16px; letter-spacing: -.01em; }
.nav-links a { color: inherit; opacity: .85; transition: opacity .2s; text-shadow: 0 1px 10px rgba(0,0,0,.25); }
.nav-links a:hover { opacity: 1; text-decoration: none; }
.nav-right { display: flex; align-items: center; gap: 12px; }
.gn-inner .btn-s { white-space: nowrap; gap: 0; min-height: 40px; padding: 0 20px; font-size: 15px; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(10,58,122,.45), 0 1px 3px rgba(0,30,80,.18); }
@media (max-width: 1180px) { .nav-links { gap: 20px; font-size: 15px; } }
@media (max-width: 1100px) { .nav-links { display: none; } }
/* Menü für schmale Bildschirme */
.nav-menu-btn { display: none; position: relative; flex: none; width: 40px; height: 40px; margin: 0 -8px 0 -2px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; filter: drop-shadow(0 1px 6px rgba(0,0,0,.3)); -webkit-tap-highlight-color: transparent; }
.nav-menu-btn span, .nm-zu span { position: absolute; left: 11px; right: 11px; height: 1.7px; border-radius: 2px; background: currentColor; }
.nav-menu-btn span:first-child { top: 16px; } .nav-menu-btn span:last-child { top: 23px; }
@media (max-width: 1100px) { .nav-menu-btn { display: block; } }
.nav-menu { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; padding: 14px 22px calc(26px + env(safe-area-inset-bottom)); background: rgba(0,0,0,.94); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); color: #f5f5f7; overflow-y: auto; opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility 0s .3s; }
.nav-menu.auf { opacity: 1; visibility: visible; transition: opacity .3s var(--ease); }
.nm-kopf { display: flex; align-items: center; justify-content: space-between; min-height: 52px; }
.nm-kopf .logo-img { height: 40px; filter: none; }
.nm-zu { position: relative; flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.1); color: #f5f5f7; cursor: pointer; }
.nm-zu span { top: 19px; } .nm-zu span:first-child { transform: rotate(45deg); } .nm-zu span:last-child { transform: rotate(-45deg); }
.nm-links { list-style: none; margin: 30px 0 0; padding: 0; }
.nm-links a { display: block; padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,.12); font-size: 28px; font-weight: 600; letter-spacing: -.025em; color: #f5f5f7; text-decoration: none; opacity: 0; transform: translateY(10px); transition: opacity .4s var(--ease), transform .5s var(--ease-out); }
.nav-menu.auf .nm-links a { opacity: 1; transform: none; transition-delay: calc(var(--i) * 45ms + 60ms); }
.nm-aktionen { display: grid; gap: 12px; margin-top: auto; padding-top: 34px; }
.nm-aktionen .btn { width: 100%; min-height: 54px; font-size: 17px; }
@media (min-width: 1101px) { .nav-menu { display: none; } }
@media (max-width: 900px) { .glass-nav { top: 14px; } .gn-inner { height: 52px; } }
@media (max-width: 560px) { .logo-img { height: 38px; } .gn-inner { gap: 12px; } .nav-right { gap: 8px; } .gn-inner .btn-s { min-height: 38px; padding: 0 17px; } }
@media (max-width: 350px) { .logo-img { height: 32px; } .gn-inner .btn-s { padding: 0 12px; font-size: 14px; } }

/* ---------- Sektionen ---------- */
section { position: relative; }
.sec { padding: clamp(80px, 11vw, 140px) 0; }
.alt { background: var(--bg-alt); }
.dark { background: var(--dark); color: var(--dark-ink); }
.dark-2 { background: var(--dark-2); color: var(--dark-ink); }
.sec-head { text-align: center; max-width: 860px; margin: 0 auto clamp(40px, 6vw, 72px); }
.sec-head .lead { margin-top: 18px; }
.sec-head .eyebrow { color: var(--ink-2); }
.dark .sec-head .eyebrow, .dark-2 .sec-head .eyebrow { color: var(--dark-ink-2); }
/* Überschriften aus dem Jimdo-Bestand: H3 als graue Unterzeile */
h3.lead { margin-top: 18px; }

/* Scroll-Reveal */
.rv { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out); }
.rv.in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: .08s; } .rv-d2 { transition-delay: .16s; } .rv-d3 { transition-delay: .24s; }
@media (scripting: none) { .rv { opacity: 1; transform: none; } }

/* ---------- Hero mit Video ---------- */
.hero-video {
  position: relative; overflow: hidden;
  min-height: max(780px, 100svh);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 0 clamp(64px, 9vh, 104px);
  background: #02070c; color: var(--dark-ink);
}
.hero-media { position: absolute; inset: 0; }
.hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.hero-media::before { content: ""; position: absolute; inset: 0; animation: heroIn 2.6s var(--ease-out) both; background: #02070c; pointer-events: none; z-index: 1; }
@keyframes heroIn { from { opacity: 1; } to { opacity: 0; } }
/* Abdunklung als Licht: links dunkel für die Schrift, unten weicher Auslauf */
.hero-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(2,7,12,.88) 0%, rgba(2,7,12,.74) 22%, rgba(2,7,12,.42) 44%, rgba(2,7,12,.08) 66%, rgba(2,7,12,0) 100%),
    linear-gradient(to top, rgba(2,7,12,.72) 0%, rgba(2,7,12,0) 34%); }
.hero-content { position: relative; z-index: 3; }
/* Unterzeile im Stil der Solar-Berlin-Hero-Unterzeile, hier als Einleitung über der Headline */
.hero-sub { margin: 0 0 16px; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.2; font-weight: 600; letter-spacing: -.02em; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.18), 0 2px 18px rgba(0,0,0,.2); }
/* Headline-Größe wie der Solar-Berlin-Hero */
.hero-video .h-hero { font-size: clamp(50px, 7.4vw, 108px); line-height: .96; letter-spacing: -.048em; max-width: 900px; margin: 0; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.16), 0 4px 32px rgba(0,0,0,.22); }
.hero-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(28px, 3vw, 40px); }
.hero-btns .btn:not(.btn-gelb) { box-shadow: inset 0 0 0 1px rgba(10,58,122,.45), 0 1px 3px rgba(0,30,80,.18); }
/* Valera-Logo oben rechts, auf Höhe der oberen Kennzahl-Karte */
.hero-kunde { position: absolute; z-index: 3; top: 132px; right: max(22px, calc((100vw - var(--wrap-wide)) / 2)); width: clamp(128px, 10.5vw, 160px); height: auto; object-fit: contain; opacity: .96; filter: drop-shadow(0 1px 10px rgba(0,0,0,.3)); }

/* ---------- Kennzahl-Karten im Hero (Sichtbarkeit / Ranking) ---------- */
/* Glas nur hier: Labels über bewegtem Bild */
.kpis { position: absolute; z-index: 3; top: 118px; left: max(22px, calc((100vw - var(--wrap-wide)) / 2)); width: 540px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; pointer-events: none; }
@media (max-width: 1100px) and (min-width: 761px) { .kpis { width: min(480px, 56vw); } .kpi-body { grid-template-columns: 1fr; gap: 8px; } .kpi-chart { height: 46px; } }
/* Blurred Glass, Helvetica Neue, neutral Weiß/Grau; Signal (aktueller Stand) in Marken-Gelb */
.kpi { position: relative; overflow: hidden; border-radius: 18px; padding: 13px 14px 12px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: rgba(255,255,255,.07); -webkit-backdrop-filter: blur(28px) saturate(140%); backdrop-filter: blur(28px) saturate(140%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), inset 0 1px 0 rgba(255,255,255,.14), 0 16px 44px rgba(0,0,0,.26); }
.kpi::after { content: ""; position: absolute; top: -40%; left: 0; width: 46%; height: 180%; pointer-events: none; background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.10), rgba(255,255,255,0)); transform: translateX(-160%) rotate(8deg); animation: kpiGlanz 9s ease-in-out infinite; }
.kpi + .kpi::after { animation-delay: 2.4s; }
@keyframes kpiGlanz { 0% { transform: translateX(-160%) rotate(8deg); } 55%, 100% { transform: translateX(340%) rotate(8deg); } }
.kpi-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.kpi-icon { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.kpi-icon svg { width: 12px; height: 12px; }
.kpi-body { display: grid; grid-template-columns: 96px 1fr; align-items: end; gap: 10px; }
.kpi-wert b { display: block; margin-bottom: 5px; font-size: 28px; line-height: .95; font-weight: 500; letter-spacing: -.03em; color: #fff; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kpi-wert span { display: block; font-size: 9px; font-weight: 400; letter-spacing: .08em; line-height: 1.4; text-transform: uppercase; color: rgba(255,255,255,.55); }
.kpi-chart { height: 56px; overflow: hidden; border-radius: 10px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.kpi-chart svg { width: 100%; height: 100%; }
.kpi-balken rect.an { fill: #ffb81b; }

/* ---------- Einstieg (H1) ---------- */
.intro .sec-head { margin-bottom: clamp(36px, 5vw, 60px); }
.intro-bild { max-width: 1100px; margin: 0 auto; }
.intro-bild img { width: 100%; height: auto; }
/* ---------- Kennzahlen + Manifest ---------- */
.stats-band { background: #000; color: var(--dark-ink); padding: clamp(90px, 11vw, 150px) 0 clamp(40px, 5vw, 70px); }
/* Desktop: gleich große Abstände zwischen den Kennzahlen (Inhalte unterschiedlich breit, daher verteilt statt gleiche Spalten) */
.stats { display: flex; justify-content: space-between; gap: 48px 32px; }
.stat { flex: none; }
/* Spaltenbreite = sichtbarer Inhalt (Unterzeilen fest umbrochen), so sind alle Abstände gleich */
@media (min-width: 1001px) { .stat-cap { max-width: none; white-space: nowrap; } }
.stat-num .bis { margin: 0 .04em; font-weight: 600; }
.stat { display: flex; flex-direction: column; }
.stat-pre { font-size: 19px; font-weight: 600; letter-spacing: -.01em; color: #a1a1a6; min-height: 1.3em; }
.stat-num { display: flex; align-items: baseline; margin: 6px 0 10px; font-size: clamp(64px, 7vw, 108px); line-height: .95; font-weight: 700; letter-spacing: -.055em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat-num small { font-size: .42em; font-weight: 700; letter-spacing: -.03em; margin-left: .08em; }
.stat-key { display: block; margin: 2px 0 10px; font-size: clamp(28px, 2.8vw, 40px); line-height: 1.05; font-weight: 700; letter-spacing: -.03em; color: #2997ff; }
.stat-cap { max-width: 230px; font-size: 17px; line-height: 1.4; color: #a1a1a6; }
/* Zweier-Raster: Faktor 5,4–5,6 = Breite der breitesten Zahl („2004“) je Schriftgröße, mit Luft */
@media (max-width: 1000px) { .stat { max-width: none; } .stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px 24px; } .stat-num { font-size: min(calc((100vw - 68px) / 5.6), 150px); } .stat-cap { max-width: none; } }
@media (max-width: 560px) { .stats { gap: 52px 18px; } .stat-pre { font-size: 15px; } .stat-num { font-size: calc((100vw - 62px) / 5.4); margin: 2px 0 8px; } .stat-cap { font-size: 14px; } .stat-key { font-size: 21px; margin: 0 0 8px; } }
.stats-fn { margin: clamp(36px, 4vw, 52px) 0 0; max-width: none; font-size: 12px; color: #6e6e73; }
.stats-fn a { color: inherit; text-decoration: underline; }
.manifest { padding: clamp(30px, 3.8vw, 55px) 0 clamp(100px, 14vw, 180px); background: #000; color: #f5f5f7; }
.manifest-linie { height: 1px; background: rgba(255,255,255,.26); margin-bottom: clamp(70px, 10.2vw, 125px); }
.manifest p { font-size: clamp(30px, 4.6vw, 56px); line-height: 1.12; font-weight: 700; letter-spacing: -.028em; margin: 0; max-width: 980px; }
.manifest .w { color: #3a3a3c; transition: color .35s var(--ease); }
.manifest .w.on { color: #f5f5f7; }

/* ---------- Sichtbar in KI-Suchen: drei iPhones ---------- */
.ki-reihe { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2.4vw, 32px); max-width: 1000px; margin: 0 auto; }
.ki-reihe figure { margin: 0; }
.ki-reihe img { width: 100%; height: auto; border-radius: clamp(14px, 1.8vw, 24px); }
.ki-reihe figcaption { margin-top: 16px; text-align: center; font-size: 15px; color: var(--ink-2); }
.ki-reihe figcaption b { display: block; font-size: 19px; color: var(--ink); font-weight: 600; letter-spacing: -.015em; }
.ki-reihe figure:nth-child(2) { transform: translateY(clamp(16px, 3vw, 40px)); }
@media (max-width: 700px) {
  /* iPhone: Wischreihe statt drei winziger Telefone */
  .ki-reihe { display: flex; overflow-x: auto; gap: 14px; margin: 0 -22px; padding: 0 22px 8px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .ki-reihe::-webkit-scrollbar { display: none; }
  .ki-reihe figure { flex: 0 0 62%; scroll-snap-align: center; }
  .ki-reihe figure:nth-child(2) { transform: none; }
}

/* ---------- Portal ---------- */
.portal-bild { max-width: 1100px; margin: 0 auto; }
.portal-bild img { width: 100%; height: auto; }
.portal-unter { max-width: 760px; margin: clamp(24px, 3vw, 36px) auto 0; text-align: center; }
.portal-unter p { margin: 0 0 22px; font-size: 19px; font-weight: 600; letter-spacing: -.015em; color: var(--ink); }
.portal-unter { max-width: none; text-align: left; }
.portal-unter .fakten { margin-top: 0; }
.portal-unter .link-arrow, .portal-unter .btn { display: flex; width: max-content; margin: clamp(32px, 4vw, 48px) auto 0; }

/* ---------- Video-Band (Border Collie) ---------- */
.video-band { position: relative; overflow: hidden; min-height: clamp(520px, 90vh, 900px); display: flex; align-items: center; background: #0b1520; color: #fff; }
.video-band video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.video-band::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(4,10,18,.7) 0%, rgba(4,10,18,.35) 38%, rgba(4,10,18,0) 60%); pointer-events: none; }
.video-band .wrap-wide { position: relative; z-index: 2; }
.video-band h4 { margin: 0; font-size: clamp(44px, 6.4vw, 92px); line-height: .98; font-weight: 700; letter-spacing: -.045em; }
.video-band h5 { margin: 18px 0 0; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.2; font-weight: 600; letter-spacing: -.02em; color: rgba(255,255,255,.72); }
.video-band .badge { width: clamp(84px, 8vw, 120px); height: auto; margin-top: clamp(28px, 4vw, 48px); }

/* Galerien: Bilder fluchten, Ränder rund */
.galerie { display: grid; gap: clamp(12px, 1.6vw, 20px); margin-top: clamp(40px, 5vw, 64px); }
.galerie img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r); }
.galerie picture { height: 100%; }
.g-2 { grid-template-columns: var(--a, 1fr) var(--b, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-kawai { grid-template-columns: .8fr 1.2fr; align-items: stretch; }
.g-kawai .rechts { display: grid; gap: clamp(12px, 1.6vw, 20px); grid-template-rows: auto 1fr; }
.g-kawai .rechts picture { height: auto; }
.g-kawai .rechts img { height: auto; }
@media (max-width: 760px) { .g-2, .g-kawai { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .g-3 { display: flex; overflow-x: auto; margin: clamp(40px, 5vw, 64px) -22px 0; padding: 0 22px 6px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .g-3::-webkit-scrollbar { display: none; }
  .g-3 > * { flex: 0 0 72%; scroll-snap-align: center; }
}


/* ---------- Leistungen ---------- */
.leistungen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.leistung { display: flex; flex-direction: column; padding: clamp(28px, 2.6vw, 36px); border-radius: var(--r-lg); background: var(--bg-alt); }
.karte-titel { margin: 0 0 10px; font-size: 22px; line-height: 1.17; font-weight: 700; letter-spacing: -.02em; }
.leistung p { margin: 0; font-size: 17px; color: var(--ink-2); }
.leistung p.karte-titel { font-size: 22px; color: var(--ink); }
.leistung .btn { align-self: flex-start; margin-top: auto; }
.leistung p:not(.karte-titel) { margin-bottom: 20px; }
.leistung-bilder { display: grid; grid-template-columns: var(--a, 1fr) var(--b, 1fr); gap: 20px; margin-top: 20px; }
.leistung-bilder img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-lg); }
@media (max-width: 960px) { .leistungen { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .leistungen, .leistung-bilder { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin: 0 auto; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 0; font-size: clamp(17px, 1.7vw, 21px); font-weight: 600; letter-spacing: -.02em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 14px; height: 14px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(45deg) translate(-3px,-3px); transition: transform .35s var(--ease-out); }
.faq details[open] summary::after { transform: rotate(-135deg) translate(-3px,-3px); }
.faq .ans { padding: 0 0 26px; color: var(--ink-2); font-size: 17px; max-width: 700px; }
.faq .ans p { margin: 0; }

/* ---------- Abschluss ---------- */
.final { text-align: center; }
.final-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; }

/* ---------- Schlank wie Solar Berlin: kurze Zeile, Zahlen, Bilder, Buttons; Langtext im Aufklapper ---------- */
.knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(36px, 4vw, 52px); }
/* iPhone: gestapelte Buttons gleich breit */
@media (max-width: 560px) { .knoepfe, .final-btns { flex-direction: column; align-items: center; } .knoepfe .btn, .final-btns .btn { width: min(100%, 300px); } }
.btn-grau { background: #e8e8ed; color: var(--ink); }
.btn-grau:hover { background: #dcdce1; }
.dark .btn-grau, .dark-2 .btn-grau { background: rgba(255,255,255,.14); color: #fff; }
/* Themen als Pillen (interne Links mit den bisherigen Ankertexten) */
.themen { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 900px; margin: clamp(36px, 4vw, 52px) auto 0; padding: 0; list-style: none; }
.themen a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 980px; background: var(--bg-alt); color: var(--ink); font-size: 15px; font-weight: 500; text-decoration: none; transition: background .2s; }
.themen a:hover { background: #e8e8ed; }
.kundenlogos { width: min(460px, 100%); height: auto; margin: 30px auto 0; border-radius: 10px; }
/* Aufklapper: Originaltext bleibt im HTML (Google liest ihn), sichtbar nur auf Wunsch */
.mehr { max-width: 760px; margin: clamp(28px, 3vw, 40px) auto 0; }
.mehr summary { list-style: none; display: flex; justify-content: center; }
.mehr summary::-webkit-details-marker { display: none; }
.mehr summary { cursor: pointer; width: max-content; margin: 0 auto; align-items: center; gap: 8px; min-height: 40px; padding: 0 20px; border-radius: 980px; font-size: 15px; font-weight: 500; color: var(--ink-2); transition: color .2s, background .2s; }
.mehr summary:hover { color: var(--ink); background: var(--bg-alt); }
.alt .mehr summary:hover { background: #fff; }
.dark .mehr summary { color: var(--dark-ink-2); } .dark .mehr summary:hover { color: #fff; background: rgba(255,255,255,.08); }
.mehr summary::after { content: ""; width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform .3s var(--ease-out); }
.mehr[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.mehr-text { padding: 18px 0 0; font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.mehr-text p { margin: 0 0 14px; }
.mehr-text ul { margin: 0 0 14px; padding-left: 20px; }
.mehr-text strong { color: var(--ink); font-weight: 600; }
.dark .mehr-text { color: var(--dark-ink-2); } .dark .mehr-text strong { color: var(--dark-ink); } .dark .mehr-text a { color: var(--link-dark); }

/* Gerät in der Mitte, Kennzahlen links und rechts (wie „Neu am Netz“ bei Solar Berlin) */
.schau { display: grid; grid-template-columns: 1fr minmax(0, 420px) 1fr; align-items: center; gap: clamp(24px, 4vw, 64px); }
.schau-bild { margin: 0; }
.schau-bild img { width: 100%; height: auto; }
.werte { display: grid; gap: clamp(36px, 5vw, 64px); }
.werte.links { text-align: right; }
.werte b { display: flex; align-items: baseline; gap: 6px; font-size: clamp(44px, 4.6vw, 64px); line-height: 1; font-weight: 700; letter-spacing: -.045em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.werte.links b { justify-content: flex-end; }
.werte b small { font-size: .38em; letter-spacing: -.02em; color: var(--ink-2); }
.werte div > span { display: block; margin-top: 8px; font-size: 15px; line-height: 1.4; color: var(--ink-2); }
@media (max-width: 760px) {
  .schau { grid-template-columns: 1fr 1fr; gap: 30px 18px; }
  .schau-bild { grid-column: 1 / -1; grid-row: 1; width: 78%; justify-self: center; }
  .werte, .werte.links { text-align: left; gap: 26px; }
  .werte.links b { justify-content: flex-start; }
  .werte b { font-size: 40px; }
}
/* Fakten-Zeile: fett mit Punkt, darunter grau */
.fakten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 24px; margin: clamp(56px, 7vw, 96px) 0 0; padding: 0; list-style: none; }
.fakten.f-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(40px, 5vw, 64px); }
.fakten li { padding-top: 18px; border-top: 1px solid var(--line); }
.fakten b { display: block; font-size: clamp(22px, 2vw, 28px); line-height: 1.1; font-weight: 700; letter-spacing: -.025em; }
.fakten span { display: block; margin-top: 6px; font-size: 15px; line-height: 1.4; color: var(--ink-2); }
.fakten.f-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fakten.f-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.fakten.f-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .fakten.f-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .fakten, .fakten.f-3, .fakten.f-5, .fakten.f-6 { grid-template-columns: 1fr 1fr; gap: 26px 18px; } }

/* Foto-Laufband (Solar Berlin): läuft langsam durch, pausiert bei Interaktion; feste Höhe, damit Hoch- und Querformate ohne Beschnitt nebeneinander stehen */
.karussell { margin-top: clamp(48px, 6vw, 80px); }
.kar-spur { --rand: calc((100% - min(var(--wrap-wide), 100% - 44px)) / 2); display: flex; gap: 20px; overflow-x: auto; overscroll-behavior-x: contain; padding: 0 var(--rand); scrollbar-width: none; outline: 0; }
.kar-spur::-webkit-scrollbar { display: none; }
/* Laufband: ohne Rahmen, alle Bilder gleich hoch und groß, Motiv vollständig (Breite folgt dem Format) */
.kar-slide { flex: none; margin: 0; }
.kar-slide picture { display: block; }
.kar-slide img, .kar-slide.breit img { display: block; height: clamp(320px, 38vw, 560px); width: auto; max-width: none; border-radius: var(--r); background: none; }
.kar-spur { align-items: flex-start; }
.kar-slide figcaption { margin-top: 14px; }
.kar-slide figcaption b { display: block; font-size: 19px; letter-spacing: -.02em; }
.kar-slide figcaption span { font-size: 15px; color: var(--ink-2); }
.kar-nav { display: flex; justify-content: flex-end; gap: 12px; margin-top: 4px; }
.kar-btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: #e3e3e8; color: var(--ink); cursor: pointer; transition: background .2s; }
.kar-btn:hover { background: #d8d8de; }
.alt .kar-btn { background: #fff; }
.kar-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Motiv über die volle Breite, Ergebnisse blenden nacheinander als Glas-Karten ein (Glas: Labels über Foto) */
.vollbild { position: relative; overflow: hidden; height: clamp(440px, 50vw, 760px); background: #1d1d1f; }
.vollbild picture, .vollbild img { position: absolute; inset: 0; width: 100%; height: 100%; }
.vollbild img { object-fit: cover; object-position: 50% 50%; }
.vollbild::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(8,12,10,.62) 0%, rgba(8,12,10,.28) 30%, rgba(8,12,10,0) 48%); }
.vb-karten { position: absolute; z-index: 2; left: 0; right: 0; top: 50%; transform: translateY(-50%); display: grid; gap: 12px; justify-items: start; }
.vb-k { width: 280px; padding: 15px 18px 16px; border-radius: 20px; color: #fff;
  background: rgba(22,22,24,.38); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), 0 14px 40px rgba(0,0,0,.25); }
.vb-k.rv { transform: translateX(-24px); }
.vb-k.rv.in { transform: none; }
.vb-kopf { display: block; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.vb-k b { display: flex; align-items: baseline; gap: 6px; margin: 6px 0 4px; font-size: 34px; line-height: 1; font-weight: 700; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.vb-k b small { font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: rgba(255,255,255,.8); }
.vb-k > span:last-child { display: block; font-size: 14px; line-height: 1.35; color: rgba(255,255,255,.82); }
.rv-d3 { transition-delay: .24s; }
.vb-k.rv-d2 { transition-delay: .7s; } .vb-k.rv-d3 { transition-delay: 1.3s; }
@media (max-width: 700px) {
  /* iPhone: Motiv als eigene Fläche, Karten darunter überlappend auf Schwarz-Weiß-Grenze */
  .vollbild { height: auto; overflow: visible; background: none; }
  .vollbild picture, .vollbild img { position: static; height: auto; }
  .vollbild img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 55% 50%; }
  .vollbild::after { display: none; }
  .vb-karten { position: static; transform: none; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: -54px; }
  .vb-k { width: auto; padding: 12px 13px 13px; border-radius: 16px; background: rgba(29,29,31,.86); }
  .vb-k:first-child { grid-column: 1 / -1; }
  .vb-k b { font-size: 28px; }
  .kar-slide img, .kar-slide.breit img { height: 300px; }
}

/* ---------- Footer: Schwarz wie der Abschluss, Logo in der Mitte ---------- */
.final { padding-bottom: clamp(70px, 8vw, 110px); }
.final .eyebrow { color: var(--dark-ink-2); }
.foot { background: #000; color: var(--dark-ink-2); font-size: 12px; line-height: 1.5; padding: 0 0 30px; }
.foot .wrap-wide { border-top: 1px solid rgba(255,255,255,.14); padding-top: clamp(48px, 5vw, 64px); }
.foot-marke { display: block; width: max-content; margin: 0 auto clamp(36px, 4vw, 48px); }
.foot-logo { display: block; height: 56px; width: auto; object-fit: contain; }
.foot-cols { display: grid; grid-template-columns: 1fr 1.15fr .85fr 1.3fr; gap: 28px; padding-bottom: 22px; border-bottom: 1px solid rgba(255,255,255,.14); }
.foot-cols h2, .foot-titel { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--dark-ink); }
.foot-cols h3, .foot-unter { margin: 0 0 10px; font-size: 12px; font-weight: 400; color: #86868b; }
.foot-cols p { margin: 0 0 8px; }
.foot-cols ul { list-style: none; margin: 0; padding: 0; }
.foot-cols li { margin-bottom: 6px; }
.foot-cols a { color: var(--dark-ink-2); }
.foot-cols a:hover { color: #fff; }
.foot-zeiten { display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; margin: 0; }
.foot-zeiten dt { color: #86868b; } .foot-zeiten dd { margin: 0; font-variant-numeric: tabular-nums; }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px 24px; padding-top: 16px; color: #86868b; }
.foot-bottom nav { display: flex; gap: 16px; flex-wrap: wrap; }
.foot-bottom a { color: var(--dark-ink-2); }
@media (max-width: 960px) { .foot-cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot-cols { grid-template-columns: 1fr; gap: 24px; } }

/* ---------- Unterseiten ---------- */
/* Header-Bild der Jimdo-Seite (Schrift ist im Motiv): volle Breite, nie beschnitten */
/* Bild beginnt unter der Glas-Navigation: die Schrift im Motiv liegt sonst hinter den Menüpunkten */
.hero-bild { background: #02070c; padding-top: 84px; }
.hero-bild img { display: block; width: 100%; height: auto; }
@media (max-width: 900px) { .hero-bild { padding-top: 76px; } }
.unterseite .intro { padding-top: clamp(64px, 8vw, 110px); }
/* kurze sichtbare Zeile unter der Headline */
.kurz { max-width: 760px; margin: calc(-1 * clamp(16px, 2vw, 28px)) auto clamp(36px, 4vw, 52px); text-align: center; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.45; color: var(--ink-2); }
.dark .kurz { color: var(--dark-ink-2); }
.kurz strong { color: var(--ink); font-weight: 600; }
/* Stichpunkte als ruhige Pillen */
.punkte { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 900px; margin: 0 auto clamp(40px, 5vw, 60px); padding: 0; list-style: none; }
.punkte li { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 18px; border-radius: 980px; background: var(--bg-alt); font-size: 15px; line-height: 1.3; color: var(--ink); }
.alt .punkte li { background: #fff; }
.punkte li::before { content: ""; flex: none; width: 10px; height: 5px; border-left: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: rotate(-45deg) translateY(-2px); }
.bewertung { width: min(300px, 80%); margin: calc(-1 * clamp(10px, 1.5vw, 20px)) auto clamp(30px, 3vw, 44px); }
.bewertung img { width: 100%; height: auto; }
.bild-link { display: block; }
/* Einzelbild */
.seiten-bild { max-width: 1100px; margin: 0 auto; }
.seiten-bild img { width: 100%; height: auto; border-radius: var(--r-lg); }
.seiten-bild.hoch { max-width: 520px; }
.seiten-bild.logo-bild { max-width: 420px; margin-bottom: clamp(28px, 3vw, 40px); }
.seiten-bild.logo-bild img { border-radius: 10px; }
/* Karten (Referenzen, Preise, Leistungen) */
.karten { display: grid; gap: 20px; margin: clamp(32px, 4vw, 48px) 0 0; }
.karten.k-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.karten.k-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.karten.k-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.karte { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-lg); background: var(--bg-alt); }
.alt .karte { background: #fff; }
.karte-bild img { display: block; width: 100%; height: auto; }
.karte-inhalt { display: flex; flex-direction: column; flex: 1; padding: clamp(24px, 2.4vw, 32px); }
.karte-inhalt p { margin: 0 0 12px; font-size: 16px; line-height: 1.45; color: var(--ink-2); }
.karte .karte-titel { margin: 0 0 6px; font-size: 24px; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.karte-unter { margin: 0 0 14px; font-size: 16px; font-weight: 500; color: var(--ink-2); }
.karte-liste { margin: 4px 0 16px; padding: 0; list-style: none; font-size: 15px; line-height: 1.4; color: var(--ink-2); }
.karte-liste li { position: relative; padding: 5px 0 5px 22px; border-top: 1px solid var(--line-soft); }
.karte-liste li::before { content: ""; position: absolute; left: 2px; top: .8em; width: 9px; height: 4.5px; border-left: 1.8px solid var(--blue); border-bottom: 1.8px solid var(--blue); transform: rotate(-45deg); }
.karte-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 8px; }
.karte-btns .btn-l { min-width: 0; width: 100%; white-space: normal; text-align: center; line-height: 1.2; padding: 10px 18px; }
@media (max-width: 1100px) { .karten.k-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .karten.k-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .karten.k-2, .karten.k-3, .karten.k-4 { grid-template-columns: 1fr; } }
/* Anfrage-Formular (web3forms) */
.anfrage { position: relative; max-width: 640px; margin: 0 auto clamp(40px, 5vw, 64px); padding: clamp(26px, 3vw, 40px); border-radius: var(--r-lg); background: var(--bg-alt); }
.alt .anfrage { background: #fff; }
.anfrage-titel { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -.025em; }
.anfrage-unter { margin: 4px 0 22px; font-size: 17px; color: var(--ink-2); }
.anfrage-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.anfrage label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.anfrage label:first-child, .anfrage label.breit { grid-column: 1 / -1; }
.anfrage input, .anfrage select, .anfrage textarea { width: 100%; min-height: 50px; padding: 12px 16px; border: 0; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font: inherit; font-size: 17px; color: var(--ink); outline: 0; transition: box-shadow .2s; }
.alt .anfrage input, .alt .anfrage select, .alt .anfrage textarea { background: var(--bg-alt); }
.anfrage textarea { resize: vertical; }
.anfrage input:focus, .anfrage select:focus, .anfrage textarea:focus { box-shadow: inset 0 0 0 1.5px var(--blue), 0 0 0 4px rgba(0,113,227,.15); }
.anfrage .btn { width: 100%; margin-top: 20px; }
.anfrage-hinweis { margin: 12px 0 0; text-align: center; font-size: 14px; color: var(--ink-2); }
.anfrage-hinweis.ok { color: #1aa053; } .anfrage-hinweis.err { color: #d70015; }
@media (max-width: 560px) { .anfrage-felder { grid-template-columns: 1fr; } }
.zeiten-tabelle { border-collapse: collapse; margin: 6px 0 16px; } .zeiten-tabelle td { padding: 3px 18px 3px 0; }
/* Kontakt: Formular neben den Kontaktdaten */
.kontakt-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 20px; align-items: start; }
.kontakt-grid .anfrage { max-width: none; margin: 0; }
.anfrage-text { margin: 0 0 10px; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.anfrage-text strong { color: var(--ink); font-weight: 600; }
h3.anfrage-unter { font-weight: 400; }
.kontakt-karte { position: relative; padding: clamp(26px, 3vw, 40px); border-radius: var(--r-lg); background: var(--bg-alt); font-size: 16px; line-height: 1.5; }
.kontakt-karte p { margin: 0 0 4px; color: var(--ink-2); }
.kontakt-karte strong { color: var(--ink); }
.kk-titel { font-size: 28px !important; font-weight: 700; letter-spacing: -.025em; color: var(--ink) !important; }
.kk-unter { margin: 4px 0 18px; font-size: 17px; font-weight: 400; color: var(--ink-2); }
.kk-wa { margin: 20px 0 14px !important; } .kk-wa .btn { width: 100%; }
.kk-hinweis { font-size: 14px; }
.kontakt-karte .zeiten-tabelle { margin-top: 14px; font-size: 15px; color: var(--ink-2); }
.kk-logos { margin-top: 22px; max-width: 280px; } .kk-logos img { width: 100%; height: auto; border-radius: 8px; }
.neu { align-self: flex-start; display: inline-block; margin: 0 0 10px !important; padding: 3px 10px; border-radius: 980px; background: #e8f1fd; color: var(--blue) !important; font-size: 12px !important; font-weight: 700; letter-spacing: .06em; }
@media (max-width: 900px) { .kontakt-grid { grid-template-columns: 1fr; } }
.leistung-karten .karte-titel { font-size: 20px !important; }
/* Rechtstexte */
.recht { padding: clamp(64px, 8vw, 110px) 0; }
.recht .h-xl { font-size: clamp(36px, 5vw, 56px); margin-bottom: 8px; }
.recht .eyebrow { color: var(--ink-2); }
.recht-text { margin-top: 30px; font-size: 16px; line-height: 1.6; color: #424245; overflow-wrap: anywhere; }
.recht-text h2 { margin: 36px 0 8px; font-size: 22px; letter-spacing: -.02em; color: var(--ink); }
.recht-text h3, .recht-text h4 { margin: 26px 0 6px; font-size: 18px; color: var(--ink); }
.recht-text p { margin: 0 0 12px; }

/* Lange deutsche Wörter (z. B. „Zahnarztmarketing“) auf dem iPhone trennen statt überlaufen */
@media (max-width: 600px) { .h-xl, .karte-titel, .kk-titel, .anfrage-titel { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; } }

/* ---------- iPhone: Hero ---------- */
@media (max-width: 760px) {
  .hero-video { min-height: max(700px, 100svh); padding-bottom: calc(34px + env(safe-area-inset-bottom)); }
  .hero-media video { object-position: 74% 50%; }
  .hero-shade { background: linear-gradient(180deg, rgba(2,7,12,.86) 0%, rgba(2,7,12,.5) 24%, rgba(2,7,12,.08) 44%, rgba(2,7,12,.55) 66%, rgba(2,7,12,.94) 100%); }
  .kpis { top: 82px; left: 22px; right: 22px; width: auto; grid-template-columns: 1fr 1fr; gap: 8px; }
  .kpi { padding: 10px 10px 9px; border-radius: 14px; }
  .kpi-kopf { margin-bottom: 7px; font-size: 9.5px; letter-spacing: .07em; }
  .kpi-icon { width: 20px; height: 20px; border-radius: 6px; }
  .kpi-icon svg { width: 11px; height: 11px; }
  .kpi-body { grid-template-columns: 1fr; gap: 7px; }
  .kpi-wert b { font-size: 21px; margin-bottom: 3px; }
  .kpi-wert span { font-size: 7.5px; letter-spacing: .06em; }
  .kpi-chart { height: 34px; border-radius: 8px; }
  .hero-kunde { top: auto; bottom: calc(300px + env(safe-area-inset-bottom)); right: 22px; width: 96px; }
  .hero-sub { font-size: 21px; margin-bottom: 12px; text-shadow: none; }
  /* Headline füllt die Breite: Faktor = gemessene Breite von „Berlins größte“ geteilt durch Schriftgröße (5,77) */
  .hero-video .h-hero { font-size: calc((100vw - 44px) / 5.78); line-height: .94; white-space: nowrap; text-shadow: none; }
  .hero-btns { flex-wrap: nowrap; gap: 8px; margin-top: 24px; }
  .hero-btns .btn-l { flex: 1 1 0; min-width: 0; min-height: 52px; padding: 0 8px; font-size: 17px; }
}
@media (max-width: 560px) { .t-lang { display: none; } }
/* Chat-Widget (claude/widget.js) verdeckt auf dem iPhone sonst „Platz 1 prüfen“: solange die Hero-Buttons sichtbar sind, ausgeblendet */
@media (max-width: 760px) {
  html body #dg24cr .dg24-fab { transition: opacity .35s var(--ease), transform .35s var(--ease) !important; }
  html body.hero-btns-sichtbar #dg24cr .dg24-fab { opacity: 0 !important; transform: translateY(16px) !important; pointer-events: none !important; }
}
/* Lange Headlines auf dem iPhone: Schrift füllt die Breite, statt zu überlaufen (Faktor = Zeilenbreite / Schriftgröße, gemessen) */
@media (max-width: 600px) {
  .h-intro { font-size: calc((100vw - 44px) / 9.4); white-space: nowrap; }
  .h-lang { font-size: calc((100vw - 44px) / 9.2); }
  .h-final { font-size: calc((100vw - 44px) / 9.6); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .rv { opacity: 1; transform: none; }
  .hero-media::before { opacity: 0; }
}

/* Logos, Siegel, Absenderleisten in Originalgröße der Jimdo-Seite */
.klein-reihe { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 24px 40px; margin: 0 auto clamp(36px, 4vw, 52px); }
.klein-reihe > div { flex: 0 1 auto; width: 100%; }
.klein-reihe img { display: block; width: 100%; height: auto; border-radius: 8px; }
/* Kampagnen-Band über die volle Breite (bei Jimdo Hintergrundmotiv), nie beschnitten */
.band { margin: clamp(40px, 5vw, 64px) 0; }
.band img { display: block; width: 100%; height: auto; }
.sec > .band:last-child { margin-bottom: 0; }

/* ---------- Preise (wie Solar Berlin, fuer-fachbetriebe #preise) ---------- */
/* Zwei Schritte statt Grafik: graue Karten, große Ziffer, Plus dazwischen */
.schritte { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 16px; max-width: 900px; margin: 0 auto; padding: 0; list-style: none; }
.schritte > li:not(.schritt-plus) { display: flex; flex-direction: column; padding: 30px 28px 28px; border-radius: var(--r-lg); background: var(--bg-alt); }
.schritt-n { display: block; font-size: 56px; font-weight: 700; letter-spacing: -.05em; line-height: 1; }
.schritt-titel { margin: 20px 0 8px; font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.schritte p { margin: 0; color: var(--ink-2); font-size: 16px; }
.schritte .schritt-titel { margin: 20px 0 8px; font-size: 24px; color: var(--ink); }
.schritt-link { margin-top: auto; padding-top: 18px; font-size: 16px; }
.schritt-link::after { content: " ›"; }
.schritt-plus { display: grid; place-items: center; font-size: 40px; font-weight: 300; color: var(--ink-3); }
.hinweise { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 900px; margin: 16px auto 0; }
.hinweise p { margin: 0; padding: 18px 22px; border-radius: var(--r); background: var(--bg-alt); font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.hinweise strong { color: var(--ink); }
@media (max-width: 700px) { .schritte { grid-template-columns: 1fr; } .schritt-plus { font-size: 32px; } .hinweise { grid-template-columns: 1fr; } }

/* Gemeinsames Zeilenraster (Subgrid): Name, Preis, Text, Liste, Motto und Button fluchten über alle Karten */
.preise { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 16px; row-gap: 0; align-items: stretch; }
.preis { position: relative; display: grid; grid-row: span 7; grid-template-rows: subgrid; row-gap: 0; padding: 34px 26px 26px; border-radius: var(--r-lg); background: #fff; }
@supports not (grid-template-rows: subgrid) { .preis { display: flex; flex-direction: column; } }
.preise-sec:not(.alt) .preis { background: var(--bg-alt); }
/* empfohlen: hellblau mit zarter Kontur, wie die beste Wahl bei Solar Berlin */
.preis.empfohlen, .preise-sec:not(.alt) .preis.empfohlen { background: #e8f1fd; box-shadow: inset 0 0 0 1px rgba(81,81,84,.5); }
.preis-tag { position: absolute; z-index: 1; top: -13px; left: 26px; padding: 5px 12px; border-radius: 980px; background: var(--blue); color: #fff; font-size: 12px; font-weight: 600; }
.preis-name { margin: 0; font-size: 24px; line-height: 1.15; letter-spacing: -.02em; }
.preis-unter { margin: 4px 0 0; font-size: 15px; font-weight: 500; color: var(--ink-2); }
.preis-betrag { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; margin: 20px 0 12px; }
.preis-betrag b { font-size: clamp(34px, 3vw, 44px); font-weight: 700; letter-spacing: -.045em; line-height: 1; white-space: nowrap; }
.preis-betrag span { font-size: 15px; color: var(--ink-2); }
/* Zeiteinheit immer in eigener Zeile unter der Zahl, „ab“ davor */
.preis-betrag span:last-child { flex-basis: 100%; margin-top: 6px; }
.preis-desc { margin: 0 0 20px; color: var(--ink-2); font-size: 15px; line-height: 1.45; }
.preis ul { list-style: none; margin: 0 0 18px; padding: 18px 0 0; border-top: 1px solid var(--line-soft); display: grid; gap: 10px; align-content: start; }
.preis.empfohlen ul { border-top-color: rgba(81,81,84,.2); }
.preis li { display: flex; gap: 10px; font-size: 15px; line-height: 1.35; }
.preis li svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--blue); }
.preis-motto { margin: 0 0 22px; font-size: 14px; color: var(--ink-2); }
.preis .btn { align-self: end; margin-top: auto; width: 100%; min-width: 0; }
.btn-ghost { background: transparent; color: var(--blue); box-shadow: inset 0 0 0 1.5px currentColor; }
.btn-ghost:hover { background: rgba(0,113,227,.06); }
@media (max-width: 1100px) { .preise { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; } }
@media (max-width: 640px) { .preise { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }

/* ---------- Preise: Einstieg, drei Entwürfe zur Auswahl ---------- */
.entwurf-tag { display: block; width: max-content; margin: 0 auto clamp(28px, 3vw, 40px); padding: 4px 12px; border-radius: 980px; background: #e8f1fd; color: var(--blue); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.dark .entwurf-tag { background: rgba(41,151,255,.16); color: var(--link-dark); }

/* Entwurf A: Gleichung auf Schwarz, Glas-Kacheln, Ergebnis mit gelbem Signalpunkt */
.gl-reihe { display: grid; grid-template-columns: 1fr auto 1fr auto 1.1fr; align-items: stretch; gap: clamp(10px, 1.6vw, 22px); }
.gl-kachel { position: relative; display: flex; flex-direction: column; padding: clamp(24px, 2.6vw, 36px); border-radius: var(--r-lg); color: #fff; text-decoration: none !important;
  background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); transition: background .3s var(--ease), transform .3s var(--ease); }
a.gl-kachel:hover { background: rgba(255,255,255,.1); transform: translateY(-3px); }
.gl-schritt { font-size: 15px; font-weight: 600; color: var(--dark-ink-2); }
.gl-zahl { display: flex; align-items: baseline; gap: 6px; margin: 18px 0 12px; font-size: clamp(48px, 5.4vw, 80px); line-height: .95; font-weight: 700; letter-spacing: -.05em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gl-zahl small { font-size: .32em; font-weight: 600; letter-spacing: -.01em; color: var(--dark-ink-2); }
.gl-text { font-size: 15px; line-height: 1.45; color: var(--dark-ink-2); }
.gl-mehr { margin-top: auto; padding-top: 22px; font-size: 15px; color: var(--link-dark); }
.gl-mehr::after { content: " ›"; }
.gl-op { display: grid; place-items: center; font-size: clamp(36px, 3.6vw, 56px); font-weight: 200; color: rgba(255,255,255,.55); }
.gl-ziel { background: linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.04) 60%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.26), 0 30px 80px rgba(0,0,0,.4); }
.gl-ziel .gl-zahl { color: #fff; }
.gl-punkt { position: absolute; top: clamp(24px, 2.6vw, 36px); right: clamp(24px, 2.6vw, 36px); width: 12px; height: 12px; border-radius: 50%; background: var(--gelb); box-shadow: 0 0 0 0 rgba(255,184,27,.6); animation: glPuls 2.4s var(--ease) infinite; }
@keyframes glPuls { 0% { box-shadow: 0 0 0 0 rgba(255,184,27,.55); } 80%, 100% { box-shadow: 0 0 0 14px rgba(255,184,27,0); } }
.gl-fuss { margin: clamp(28px, 3vw, 40px) 0 0; text-align: center; font-size: 15px; color: var(--dark-ink-2); }
@media (max-width: 960px) { .gl-reihe { grid-template-columns: 1fr; } .gl-op { padding: 2px 0; } }

/* Entwurf B: zwei Bühnen, hell = Website, dunkel = Wachstum, Plus auf der Naht */
.duo { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.duo-hell, .duo-dunkel { display: flex; flex-direction: column; overflow: hidden; padding: clamp(30px, 3.4vw, 48px) clamp(26px, 3vw, 44px) clamp(28px, 3vw, 40px); border-radius: var(--r-lg); }
.duo-hell { background: var(--bg-alt); }
.duo-dunkel { background: #000; color: #fff; }
.duo-n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 18px; font-weight: 700; }
.duo-dunkel .duo-n { background: #fff; color: var(--ink); }
.duo-titel { margin: 22px 0 8px; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.05; font-weight: 700; letter-spacing: -.03em; }
.duo-text { margin: 0; max-width: 420px; font-size: 17px; line-height: 1.45; color: var(--ink-2); }
.duo-dunkel .duo-text { color: var(--dark-ink-2); }
.duo-preis { margin: 18px 0 0; font-size: clamp(28px, 2.6vw, 36px); font-weight: 700; letter-spacing: -.03em; }
.duo-preis small { font-size: .5em; font-weight: 600; color: var(--ink-2); }
.duo-dunkel .duo-preis small { color: var(--dark-ink-2); }
.duo-bild { margin: 24px -8% 24px 0; } .duo-bild img { width: 100%; height: auto; }
.duo-kurve { width: 100%; height: auto; margin: 24px 0; }
.duo-raster line { stroke: rgba(255,255,255,.1); stroke-width: 1; }
.duo-linie { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.6s var(--ease-out) .3s; }
.duo-flaeche { opacity: 0; transition: opacity 1.2s var(--ease) 1.6s; }
.duo-punkt { fill: var(--gelb); opacity: 0; transform-origin: 560px 26px; transition: opacity .4s 2.6s; }
.duo-dunkel.in .duo-linie { stroke-dashoffset: 0; } .duo-dunkel.in .duo-flaeche, .duo-dunkel.in .duo-punkt { opacity: 1; }
.duo .btn { align-self: flex-start; margin-top: auto; }
.duo-plus { position: absolute; z-index: 2; left: 50%; top: 50%; display: grid; place-items: center; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.18), inset 0 0 0 1px var(--line-soft); font-size: 34px; font-weight: 300; color: var(--ink); }
@media (max-width: 860px) { .duo { grid-template-columns: 1fr; } .duo-plus { position: relative; left: auto; top: auto; margin: -38px auto; } }

/* Entwurf C: Wahl oben, darunter der Weg nach oben auf dem MacBook-Bildschirm (Bild + Bildschirmmaße aus Solar Berlin) */
.weg-mac { position: relative; max-width: 1000px; margin: clamp(48px, 6vw, 80px) auto 0; }
.weg-mac img { display: block; width: 100%; height: auto; }
.weg-screen { position: absolute; left: 10.05%; top: 6.5%; width: 79.85%; height: 84.9%; overflow: hidden; border-radius: .6% / .9%; }
.ws { display: block; width: 100%; height: 100%; font-family: var(--font); }
.ws-label { font-size: 26px; font-weight: 600; letter-spacing: .12em; fill: rgba(255,255,255,.62); }
.ws-wert { font-size: 92px; font-weight: 700; letter-spacing: -3px; fill: #fff; }
.ws-klein { font-size: 26px; fill: rgba(255,255,255,.55); }
.ws-raster line { stroke: rgba(255,255,255,.1); stroke-width: 2; }
.ws-linie { fill: none; stroke: #fff; stroke-width: 7; stroke-linecap: round; }
.ws-puls { fill: none; stroke: #fff; stroke-width: 9; stroke-linecap: round; stroke-dasharray: 10 90; stroke-dashoffset: 10; opacity: 0; filter: drop-shadow(0 0 10px rgba(255,255,255,.9)); }
.ws-dot { fill: #0b2a5a; stroke: #fff; stroke-width: 6; }
.ws-dot.ziel { stroke: var(--gelb); }
.ws-b { font-size: 46px; font-weight: 700; letter-spacing: -1px; fill: #fff; }
.ws-s { font-size: 28px; fill: rgba(255,255,255,.7); }
.ws-halo { fill: rgba(255,184,27,.25); }
.ws-kern { fill: var(--gelb); }
.ws-tag rect { fill: rgba(255,255,255,.16); stroke: rgba(255,255,255,.35); stroke-width: 2; }
.ws-tag text { font-size: 30px; font-weight: 600; fill: #fff; }
/* Aufbau beim ersten Erscheinen: Kurve zeichnet sich (Maske), Fläche und Meilensteine folgen nacheinander */
.ws-linie, .ws-flaeche { clip-path: inset(0 100% 0 0); transition: clip-path 6s cubic-bezier(.45,.05,.25,1) .4s; }
.ws-meilen { opacity: 0; transition: opacity .6s var(--ease); transition-delay: calc(.6s + var(--i) * 1.75s); }
.ws-laeufer, .ws-kopf { opacity: 0; transition: opacity .6s var(--ease) .3s; }
.weg-mac.in .ws-linie, .weg-mac.in .ws-flaeche { clip-path: inset(0 0 0 0); }
.weg-mac.in .ws-meilen, .weg-mac.in .ws-laeufer, .weg-mac.in .ws-kopf { opacity: 1; }
/* danach lebt die Kurve leise weiter: Lichtimpuls läuft hinauf, Etikett schwebt */
.weg-mac.fertig .ws-puls { opacity: .9; animation: wsPuls 5.5s cubic-bezier(.45,.05,.35,1) infinite; }
@keyframes wsPuls { 0% { stroke-dashoffset: 10; opacity: 0; } 10% { opacity: .9; } 70% { stroke-dashoffset: -90; opacity: .9; } 80%, 100% { stroke-dashoffset: -90; opacity: 0; } }
/* am Ziel übernimmt das Meilenstein-Etikett „Platz 1.“, die Plakette des Läufers blendet aus */
.ws-tag { transition: opacity .6s var(--ease); }
.weg-mac.fertig .ws-tag { opacity: 0; }
.weg-mac.fertig .ws-halo { animation: wsHalo 2.4s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes wsHalo { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(2); opacity: 0; } }
@media (max-width: 700px) {
  .weg-mac { margin-left: -12px; margin-right: -12px; }
  /* iPhone: nur die fetten Meilensteine, groß genug zum Lesen */
  .ws-b { font-size: 66px; } .ws-s, .ws-klein { display: none; } .ws-label { font-size: 27px; letter-spacing: .06em; } .ws-wert { font-size: 112px; }
}
.weg-wahl { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.weg-karte { display: flex; align-items: center; gap: 18px; padding: 22px 26px; border-radius: var(--r-lg); background: #fff; color: var(--ink); text-decoration: none !important; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.weg-karte:hover { transform: translateY(-3px); box-shadow: 0 14px 40px rgba(0,0,0,.08); }
.weg-karte > span:nth-child(2) { display: flex; flex-direction: column; } .weg-karte b { font-size: 22px; letter-spacing: -.02em; } .weg-karte small { font-size: 15px; color: var(--ink-2); }
.weg-karte em { margin-left: auto; font-style: normal; font-size: clamp(22px, 2.2vw, 30px); font-weight: 700; letter-spacing: -.03em; white-space: nowrap; }
.weg-karte em::after { content: " ›"; color: var(--blue); }
@media (max-width: 760px) {
  .weg-buehne { height: auto; }
  .weg-kurve { display: none; }
  .weg-punkte { position: relative; inset: auto; top: auto; bottom: auto; height: auto; margin-left: 10px; border-left: 2px dashed var(--line); }
  .weg-punkte li { position: relative; left: 0 !important; top: 0 !important; width: auto; height: 96px; }
  .weg-punkte li:last-child { height: 60px; }
  .weg-punkte i { left: -11px; top: 0; }
  .weg-punkte li b, .weg-punkte li span, .weg-punkte li:nth-child(3) b, .weg-punkte li:nth-child(3) span, .weg-punkte li.ziel b, .weg-punkte li.ziel span { left: 26px; right: auto; bottom: auto; text-align: left; }
  .weg-punkte li b, .weg-punkte li:nth-child(3) b, .weg-punkte li.ziel b { top: -4px; font-size: 22px; }
  .weg-punkte li span, .weg-punkte li:nth-child(3) span, .weg-punkte li.ziel span { top: 26px; }
  .weg-wahl { grid-template-columns: 1fr; }
  .weg-karte { flex-wrap: wrap; row-gap: 12px; }
  .weg-karte em { flex-basis: 100%; margin-left: 58px; font-size: 26px; }
}

/* ---------- Unterseiten-Aufbau (Feinschliff 1.11.2026): Bilder groß, Headlines schlanker, Schwarz vollflächig im Wechsel ---------- */
.unterseite .sec { padding: clamp(64px, 8vw, 112px) 0; }
.unterseite .sec-head { margin-bottom: clamp(28px, 3.4vw, 44px); }
.unterseite .sec-head .h-l { font-size: clamp(30px, 3.8vw, 48px); }
.unterseite .kurz { margin-top: calc(-1 * clamp(8px, 1vw, 16px)); margin-bottom: clamp(28px, 3vw, 40px); }
.unterseite .seiten-bild { max-width: 1200px; }
.unterseite .seiten-bild.hoch { max-width: 640px; }
.unterseite .galerie { margin-top: 0; }

.unterseite .knoepfe { margin-top: clamp(28px, 3vw, 40px); }
/* Schwarze Abschnitte */
.dark .sec-head .eyebrow { color: var(--dark-ink-2); }
.dark .lead { color: var(--dark-ink-2); }
.dark .punkte li { background: rgba(255,255,255,.08); color: var(--dark-ink); }
.dark .punkte li::before { border-color: var(--link-dark); }
.dark .karte { background: #1d1d1f; } .dark .karte .karte-titel { color: #fff; } .dark .karte-inhalt p, .dark .karte-unter, .dark .karte-liste { color: var(--dark-ink-2); }
.dark .karte-liste li { border-top-color: rgba(255,255,255,.12); }
.dark .fakten li { border-top-color: rgba(255,255,255,.2); } .dark .fakten span { color: var(--dark-ink-2); }
.dark .faq, .dark .faq details { border-color: rgba(255,255,255,.18); } .dark .faq .ans { color: var(--dark-ink-2); } .dark .faq summary::after { border-color: var(--dark-ink-2); }
.dark .kar-btn { background: rgba(255,255,255,.14); color: #fff; }
.dark .seiten-bild img, .dark .galerie img { box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.dark .btn-ghost { color: var(--link-dark); }
.dark .mehr-text a { color: var(--link-dark); }

/* Referenz Solar Berlin: animierter Hero von solar-berlin.com im MacBook (Bild und Bildschirmmaße aus Solar Berlin) */
.solar-ref { max-width: 1060px; margin: 0 auto; }
.sr-mac { position: relative; }
.sr-mac img { display: block; width: 100%; height: auto; }
.sr-screen { position: absolute; left: 10.05%; top: 6.5%; width: 79.85%; height: 84.9%; overflow: hidden; background: #0b1520; }
.sr-screen video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.dark .solar-ref img { filter: drop-shadow(0 40px 60px rgba(0,0,0,.5)); }

/* Leistungen: vollflächig auf Schwarz, große Kacheln */
.seite-leistungen .intro { background: #000; color: var(--dark-ink); }
.seite-leistungen .intro .eyebrow, .seite-leistungen .intro .lead, .seite-leistungen .intro .kurz { color: var(--dark-ink-2); }
.seite-leistungen .intro .karten { gap: 16px; }
.seite-leistungen .intro .karte { background: #1d1d1f; transition: background .3s var(--ease), transform .3s var(--ease); }
.seite-leistungen .intro .karte:hover { background: #262628; transform: translateY(-3px); }
.seite-leistungen .intro .karte-inhalt { padding: clamp(28px, 3vw, 44px); }
.seite-leistungen .intro .karte .karte-titel { font-size: clamp(24px, 2.2vw, 32px); color: #fff; }
.seite-leistungen .intro .karte-inhalt p { font-size: 17px; color: var(--dark-ink-2); }
.seite-leistungen .intro .karte-btns { padding-top: 22px; }
.seite-leistungen .intro .karte-btns .btn-l { width: auto; align-self: flex-start; }
.karte-btns { flex-direction: column; align-items: flex-start; }
.karte-btns .link-arrow { font-size: 16px; }
.dark .karte-btns .link-arrow, .seite-leistungen .intro .link-arrow { color: var(--link-dark); }

/* KI-Karten (Startseite): schweben sanft versetzt, gelegentlich wandert ein Lichtstreifen über das Display */
.ki-reihe figure > picture { position: relative; display: block; overflow: hidden; border-radius: clamp(14px, 1.8vw, 24px); }
.ki-reihe figure > picture::after { content: ""; position: absolute; inset: -20% auto -20% 0; width: 40%; pointer-events: none; background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.22), rgba(255,255,255,0)); transform: translateX(-180%) skewX(-12deg); }
.ki-reihe.lebt figure > picture { animation: kiSchweben 7s ease-in-out infinite; }
.ki-reihe.lebt figure:nth-child(2) > picture { animation-delay: -2.3s; }
.ki-reihe.lebt figure:nth-child(3) > picture { animation-delay: -4.6s; }
.ki-reihe.lebt figure > picture::after { animation: kiGlanz 9s ease-in-out infinite; }
.ki-reihe.lebt figure:nth-child(2) > picture::after { animation-delay: 3s; }
.ki-reihe.lebt figure:nth-child(3) > picture::after { animation-delay: 6s; }
@keyframes kiSchweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes kiGlanz { 0%, 70% { transform: translateX(-180%) skewX(-12deg); } 85%, 100% { transform: translateX(380%) skewX(-12deg); } }
/* Antwort „tippt“ sich ein: die Karte schärft sich beim ersten Erscheinen nacheinander auf */
.ki-reihe figure.rv img { filter: blur(6px) saturate(.6); transition: filter 1.4s var(--ease-out); }
.ki-reihe figure.rv.in img { filter: none; }
.ki-reihe figure.rv-d1.in img { transition-delay: .35s; } .ki-reihe figure.rv-d2.in img { transition-delay: .7s; }
@media (max-width: 700px) { .ki-reihe.lebt figure > picture { animation: none; } }

/* Bilder sofort zeigen (kein verzögertes Einblenden, damit nie eine leere Fläche neben einem Bild steht) */
.galerie .rv, .leistung-bilder .rv, .karussell.rv, .seiten-bild.rv, .band.rv { opacity: 1; transform: none; transition: none; }
.dark a:not(.btn):not(.link-arrow):not(.bild-link) { color: var(--link-dark); }
.dark .kurz strong, .dark .mehr-text strong { color: var(--dark-ink); }

/* Entwurf B v2: beide Bühnen schwarz und groß, links Website (Solar Berlin animiert im MacBook), rechts Wachstum */
.duo-sec .wrap-wide { width: min(1400px, 100% - 44px); }
.duo { gap: 20px; }
.duo-hell.duo-schwarz { background: #000; color: #fff; }
.duo-hell, .duo-dunkel { min-height: clamp(640px, 62vw, 860px); padding: clamp(36px, 4vw, 64px) clamp(30px, 3.6vw, 56px); }
.duo-schwarz .duo-n { background: #fff; color: var(--ink); }
.duo-schwarz .duo-text { color: var(--dark-ink-2); }
.duo-schwarz .duo-preis small { color: var(--dark-ink-2); }
.duo-titel { font-size: clamp(36px, 4vw, 60px); }
.duo-preis { font-size: clamp(32px, 3.2vw, 46px); }
.duo-mac { margin: clamp(28px, 3vw, 44px) -4% clamp(28px, 3vw, 44px); }
.duo-mac .sr-mac img { filter: drop-shadow(0 30px 50px rgba(0,0,0,.6)); }
.duo-kurve { margin: clamp(28px, 3vw, 44px) 0; }
.duo-plus { background: #fff; box-shadow: 0 10px 40px rgba(0,0,0,.45); }
/* Paketkarten: Basis = Blau, Wachstum = Gelb */
.preis-gelb.empfohlen, .preise-sec:not(.alt) .preis-gelb.empfohlen { background: #fff6e0; box-shadow: inset 0 0 0 1px rgba(120,80,0,.35); }
.preis-gelb .preis-tag { background: var(--gelb); color: #1d1d1f; }
.preis-gelb li svg { color: #c98a00; }
.preis-gelb.empfohlen ul { border-top-color: rgba(120,80,0,.18); }
@media (max-width: 860px) { .duo-hell, .duo-dunkel { min-height: 0; } .duo .btn { margin-top: 8px; } }
/* Wachstum-Kachel: animiertes MacBook mit Kurve (statt der einfachen Linie) */
.duo-dunkel .weg-mac { max-width: none; margin: clamp(28px, 3vw, 44px) -4%; }
.duo-dunkel .weg-mac img { filter: drop-shadow(0 30px 50px rgba(0,0,0,.6)); }
@media (min-width: 861px) { .duo-text { min-height: 2.9em; } }

/* Preise: Basis + Wachstum über die volle Breite, große Zahl-Kugeln mittig auf der oberen Kante */
.duo-sec { padding-top: clamp(90px, 9vw, 130px); }
.duo-breit { width: calc(100% - 32px); margin: 0 auto; }
.duo { gap: 16px; }
.duo-hell, .duo-dunkel { position: relative; overflow: visible; align-items: center; text-align: center; padding-top: clamp(72px, 6vw, 96px); }
.duo .duo-n { position: absolute; top: 0; left: 50%; width: clamp(76px, 6.4vw, 104px); height: clamp(76px, 6.4vw, 104px); transform: translate(-50%, -50%); font-size: clamp(32px, 2.8vw, 46px); font-weight: 700; letter-spacing: -.03em; background: #fff; color: var(--ink); box-shadow: 0 0 0 8px #fff, 0 18px 40px rgba(0,0,0,.25); }
.duo-titel { margin-top: 0; }
.duo-text { margin-left: auto; margin-right: auto; }
.duo .btn { align-self: center; }
.duo-mac, .duo-dunkel .weg-mac { width: 100%; max-width: 860px; margin-left: auto; margin-right: auto; }
.duo-plus { display: none; }
@media (max-width: 860px) { .duo { gap: 70px; } .duo-breit { width: calc(100% - 24px); } }
@media (max-width: 700px) { .duo .weg-mac, .duo .duo-mac { margin-left: 0; margin-right: 0; width: 100%; } }

/* Preise-Einstieg: Auswahlkarten direkt unter der Headline, Hinweise im gleichen Raster darunter */
.preis-wahl { max-width: 1200px; margin: 0 auto; }
.intro .weg-karte { background: var(--bg-alt); }
.intro .weg-karte:hover { box-shadow: 0 14px 40px rgba(0,0,0,.06); }
.weg-karte .duo-n { width: 44px; height: 44px; flex: none; }
.preis-hinweise { max-width: 1200px; margin-top: 16px; }
.preis-hinweise p { padding: 22px 26px; border-radius: var(--r-lg); background: #fff; box-shadow: inset 0 0 0 1px var(--line-soft); font-size: 15px; }
.preis-hinweise a { white-space: nowrap; }
.seite-preise .intro .mehr { margin-top: 28px; }
/* Farbsystem Preise: 1 = Basis = Blau, 2 = Wachstum = Gelb */
.preis-wahl .weg-karte:first-child .duo-n { background: var(--blue); color: #fff; }
.preis-wahl .weg-karte:last-child .duo-n { background: var(--gelb); color: #1d1d1f; }
.preis-wahl .weg-karte:last-child em::after { color: #c98a00; }

/* Preise-Hero: Solar Berlin (Motiv ohne deren Text) vollflächig, eigene Headline */
.hero-solar .hero-media video { object-position: 60% 60%; }
/* Abdunklung bewusst leicht (Michas Vorgabe): nur so viel, dass die Schrift trägt */
.hero-solar .hero-shade { background: linear-gradient(90deg, rgba(4,12,26,.55) 0%, rgba(4,12,26,.38) 26%, rgba(4,12,26,.08) 50%, rgba(4,12,26,0) 66%), linear-gradient(to top, rgba(4,12,26,.45) 0%, rgba(4,12,26,0) 30%); }
.hero-solar .h-hero { text-shadow: 0 2px 6px rgba(0,0,0,.18), 0 6px 40px rgba(0,0,0,.3); }
.hero-solar .hero-unter { text-shadow: 0 1px 3px rgba(0,0,0,.3), 0 2px 18px rgba(0,0,0,.35); }
@media (max-width: 760px) { .hero-solar .hero-shade { background: linear-gradient(to top, rgba(4,12,26,.62) 0%, rgba(4,12,26,.25) 45%, rgba(4,12,26,0) 70%); } }
.hero-unter { margin: 18px 0 0; max-width: 520px; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.4; color: rgba(255,255,255,.86); text-shadow: 0 1px 14px rgba(0,0,0,.3); }
/* Glas-Etikett: echte Seite, ein Klick */
.hero-chip { position: absolute; z-index: 3; right: max(22px, calc((100vw - var(--wrap-wide)) / 2)); top: 118px; display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 980px; color: #fff; font-size: 15px; font-weight: 600; text-decoration: none !important;
  background: rgba(22,22,24,.38); -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 10px 30px rgba(0,0,0,.22); }
.hero-chip-punkt { width: 8px; height: 8px; border-radius: 50%; background: #34c759; box-shadow: 0 0 0 0 rgba(52,199,89,.6); animation: chipPuls 2.2s ease-out infinite; }
@keyframes chipPuls { 0% { box-shadow: 0 0 0 0 rgba(52,199,89,.55); } 80%, 100% { box-shadow: 0 0 0 9px rgba(52,199,89,0); } }
@media (max-width: 760px) {
  /* Ausschnitt so, dass keine Hotspot-Etiketten am Rand angeschnitten werden (Etiketten liegen im Video rechts) */
  .hero-solar .hero-media video { object-position: 30% 50%; }
  .hero-solar .hero-video .h-hero, .hero-solar .h-hero { font-size: calc((100vw - 44px) / 4.6); }
  .hero-chip { top: 82px; bottom: auto; right: 22px; font-size: 13px; padding: 8px 14px; }
  .hero-unter { font-size: 16px; }
}
/* Solar-Berlin-Logo über der Preise-Headline (Logo nie verzerren) */
.hero-logo { display: inline-block; margin: 0 0 clamp(18px, 2vw, 28px); }
.hero-logo img { display: block; height: clamp(46px, 4.4vw, 64px); width: auto; object-fit: contain; filter: drop-shadow(0 1px 8px rgba(0,0,0,.3)); }
@media (max-width: 760px) { .hero-solar .h-hero { font-size: calc((100vw - 44px) / 6.0) !important; white-space: nowrap; } .hero-logo img { height: 42px; } }

/* dg24-Logo zentriert unter dem Hero der Unterseiten (Logo nie verzerren) */
.sec-logo { display: block; height: 64px; width: auto; object-fit: contain; flex: none; }
.sec-logo.mitte { margin: 0 auto clamp(28px, 3vw, 40px); }
.recht .sec-logo.mitte { margin-left: 0; }
@media (max-width: 600px) { .sec-logo { height: 50px; } }
/* Preise: weniger Luft zwischen „Mehr erfahren“ und den großen Kacheln */
.seite-preise .intro { padding-bottom: clamp(24px, 3vw, 40px); }
.seite-preise .duo-sec { padding-top: clamp(76px, 7vw, 96px); }
/* Solar-Berlin-Logo auf Höhe der Dachoberkante (Position per JS aus dem Video-Ausschnitt berechnet) */
.hero-logo-lage { position: absolute; z-index: 3; left: 0; right: 0; top: 0; pointer-events: none; }
.hero-logo-lage .hero-logo { position: absolute; left: 0; top: var(--dach, 260px); transform: translateY(-50%); margin: 0; pointer-events: auto; opacity: 0; transition: opacity .8s var(--ease) .4s; }
.hero-logo-lage .hero-logo.da { opacity: 1; }
/* Preise: noch weniger Luft zwischen „Mehr erfahren“ und den Kacheln */
.seite-preise .intro { padding-bottom: 8px; }
.seite-preise .intro .mehr { margin-top: 20px; }
.seite-preise .duo-sec { padding-top: clamp(58px, 5vw, 70px); }
/* dg24-Logo unter dem Hero: halb so groß, höher, mehr Luft zur Headline (Micha 1.11.2026) */
.sec-logo { height: 32px; }
.unterseite main > section:not(.hero-video):not(.hero-bild):not(.jimdo-hero) .sec-logo.mitte { margin: calc(-1 * clamp(24px, 3.5vw, 52px)) auto clamp(44px, 5vw, 68px); }
.recht .sec-logo.mitte { margin-left: 0 !important; }
@media (max-width: 600px) { .sec-logo { height: 26px; } }
/* dg24-Logo: Mittelweg zwischen 64 und 32 px */
.sec-logo { height: 46px; }
@media (max-width: 600px) { .sec-logo { height: 36px; } }

/* Abschluss: leuchtendes MacBook (aus solar-berlin.com, „Partner werden“) schiebt sich beim Erscheinen von oben ins Schwarz */
.final { overflow: hidden; padding-top: 0; }
.p-tastatur { position: relative; overflow: hidden; display: block; width: min(1100px, 100%); margin: 0 auto clamp(10px, 2vw, 24px);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%), linear-gradient(to right, transparent, #000 5%, #000 95%, transparent); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent, #000 14%), linear-gradient(to right, transparent, #000 5%, #000 95%, transparent); mask-composite: intersect; }
.p-tastatur img { display: block; width: 100%; height: auto; }
.p-tastatur::after { content: ""; position: absolute; inset: 0 0 35% 0; pointer-events: none; background: radial-gradient(ellipse 40% 26% at 50% 14%, rgba(200,228,255,.9), transparent 70%), radial-gradient(ellipse 58% 75% at 50% 16%, rgba(110,175,255,.75), transparent 72%); mix-blend-mode: screen; opacity: .3; animation: deckelAtmen 4.5s ease-in-out infinite alternate; }
@keyframes deckelAtmen { from { opacity: .18; } to { opacity: .42; } }
.p-tastatur.rv { transform: translateY(-140px); transition: opacity 2.4s ease-out, transform 4s cubic-bezier(.22, .61, .36, 1); }
.p-tastatur.rv.in { transform: none; }
@media (prefers-reduced-motion: reduce) { .p-tastatur::after { animation: none; opacity: 0; } }
@keyframes deckelAtmen { to { opacity: 1; } }   /* wie solar-berlin.com */
/* Abschluss-Headline: nie trennen, jede Zeile passt auf das iPhone */
.h-final { hyphens: manual !important; -webkit-hyphens: manual !important; }
@media (max-width: 600px) { .h-final { font-size: calc((100vw - 44px) / 11.6) !important; white-space: nowrap; } }

/* ---------- SEO Agentur Berlin (Neuaufbau 1.11.2026) ---------- */
/* Live-Suche: tippt die Suchbegriffe der Kunden, Kunde erscheint auf Platz 1 */
.suche { max-width: 760px; margin: 0 auto clamp(48px, 6vw, 72px); padding: clamp(18px, 2vw, 26px); border-radius: var(--r-lg); background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.04), 0 30px 80px rgba(0,0,0,.10), inset 0 0 0 1px var(--line-soft); text-align: left; }
.such-feld { display: flex; align-items: center; gap: 12px; height: 58px; padding: 0 22px; border-radius: 980px; box-shadow: inset 0 0 0 1px var(--line); font-size: clamp(18px, 1.8vw, 22px); font-weight: 500; letter-spacing: -.01em; }
.such-feld svg { width: 20px; height: 20px; flex: none; color: var(--ink-3); }
.such-cursor { width: 2px; height: 1.1em; margin-left: -10px; background: var(--blue); animation: cursorBlink 1s steps(1) infinite; }
@keyframes cursorBlink { 50% { opacity: 0; } }
.such-treffer { margin-top: 14px; }
.treffer { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-radius: 16px; transition: opacity .5s var(--ease), transform .6s var(--ease-out); }
.treffer + .treffer { opacity: .38; }
.treffer-nr { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--bg-alt); font-size: 14px; font-weight: 700; color: var(--ink-2); }
.treffer > div { flex: 1; min-width: 0; }
.treffer-url { margin: 0; font-size: 13px; color: var(--ink-3); }
.treffer-titel { margin: 2px 0 0; font-size: 18px; font-weight: 600; letter-spacing: -.015em; color: var(--blue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.treffer + .treffer .treffer-titel { height: 10px; margin-top: 8px; border-radius: 5px; background: var(--line-soft); }
.treffer.erster { background: #fff8e6; box-shadow: inset 0 0 0 1px rgba(255,184,27,.55); }
.treffer.erster .treffer-nr { background: var(--gelb); color: #1d1d1f; }
.treffer-platz { flex: none; padding: 5px 12px; border-radius: 980px; background: var(--gelb); color: #1d1d1f; font-size: 13px; font-weight: 700; }
.suche.wechsel .treffer.erster { opacity: 0; transform: translateY(10px); }
@media (max-width: 600px) { .such-feld { height: 50px; padding: 0 16px; } .treffer { padding: 12px; gap: 12px; } .treffer-titel { font-size: 16px; } .treffer-platz { display: none; } }

/* Ergebnisse zum Googeln: große Hochformat-Motive auf Schwarz, Website blau, Platz 1 prüfen gelb */
.rk-reihe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.rk { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-lg); background: #1d1d1f; transition: transform .4s var(--ease); }
.rk:hover { transform: translateY(-4px); }
.rk-bild { position: relative; aspect-ratio: 1080 / 1957; overflow: hidden; background: #000; }
.rk-bild img, .rk-bild video { display: block; width: 100%; height: 100%; object-fit: cover; }
.rk-video video { object-position: 64% 50%; }
.rk-logo { position: absolute; left: 8%; top: 7%; width: 64% !important; height: auto !important; object-fit: contain !important; filter: drop-shadow(0 1px 8px rgba(0,0,0,.35)); }
.rk-text { display: flex; flex-direction: column; flex: 1; padding: 22px 22px 24px; }
.rk-pre { margin: 0; font-size: 14px; font-weight: 600; color: var(--dark-ink-2); }
.rk-platz { display: inline-block; margin-left: 4px; padding: 2px 9px; border-radius: 980px; background: var(--gelb); color: #1d1d1f; font-size: 12px; font-weight: 700; }
.rk-begriff { margin: 10px 0 4px; font-size: clamp(22px, 1.8vw, 26px); line-height: 1.12; font-weight: 700; letter-spacing: -.025em; color: #fff; }
.rk-kunde { margin: 0; font-size: 14px; color: var(--dark-ink-2); }
.rk-knoepfe { display: grid; gap: 8px; margin-top: auto; padding-top: 20px; }
.rk-knoepfe .btn-l { min-width: 0; width: 100%; min-height: 46px; font-size: 16px; padding: 0 12px; }
@media (max-width: 1100px) { .rk-reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .rk-reihe { display: flex; overflow-x: auto; margin: 0 -22px; padding: 0 22px 6px; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 12px; }
  .rk-reihe::-webkit-scrollbar { display: none; }
  .rk { flex: 0 0 78%; scroll-snap-align: center; }
}
.ki-bild { max-width: 1200px; }
.ki-bild img { border-radius: 0; }

/* Fallstudien: Zahlen links, großes Bild rechts, darunter Bilder, Langtext im Aufklapper */
.fall-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: clamp(28px, 4vw, 64px); align-items: center; margin-bottom: clamp(28px, 3vw, 44px); }
.fall-zahlen { display: grid; gap: clamp(22px, 2.6vw, 34px); }
.fall-zahlen > div:not(.fall-siegel):not(.fall-knoepfe) { padding-top: 16px; border-top: 1px solid var(--line); }
.dark .fall-zahlen > div:not(.fall-siegel):not(.fall-knoepfe) { border-top-color: rgba(255,255,255,.2); }
.fall-zahlen span { display: block; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.fall-zahlen b { display: block; margin: 4px 0 2px; font-size: clamp(40px, 4.4vw, 64px); line-height: 1; font-weight: 700; letter-spacing: -.045em; }
.fall-zahlen em { display: block; font-style: normal; font-size: 16px; font-weight: 600; color: var(--blue); }
.dark .fall-zahlen span { color: var(--dark-ink-2); } .dark .fall-zahlen em { color: var(--link-dark); }
.fall-siegel img { width: auto; height: 72px; object-fit: contain; border-radius: 8px; }
.fall-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
.fall-knoepfe .btn-l { min-width: 0; flex: 1 1 160px; }
.fall-gross img { display: block; width: 100%; height: auto; border-radius: var(--r-lg); }
.seo-fall .galerie img { border-radius: var(--r); }
@media (max-width: 900px) { .fall-grid { grid-template-columns: 1fr; } .fall-gross { order: -1; } .fall-zahlen { grid-template-columns: 1fr 1fr; } .fall-siegel, .fall-knoepfe { grid-column: 1 / -1; } }
.seo-fall .seiten-bild.hoch { max-width: 440px; margin-top: clamp(28px, 3vw, 44px); }
/* Live-Suche: Treffer 1 als blauer Balken, weiße Schrift, hellblaue Abzeichen (Micha 1.11.2026) */
.treffer.erster { background: var(--blue); box-shadow: 0 10px 30px rgba(0,113,227,.28); }
.treffer.erster .treffer-url { color: rgba(255,255,255,.78); }
.treffer.erster .treffer-titel { color: #fff; }
.treffer.erster .treffer-nr, .treffer.erster .treffer-platz { background: rgba(255,255,255,.24); color: #fff; }

/* Bänder zwischen zwei Sektionen bündig ohne Weißraum (Micha 1.11.2026); Bänder innerhalb einer Sektion behalten ihren Abstand zum Inhalt */
body > .band, main > .band { margin: 0; }

/* Valera auf der SEO-Seite: zwei große Boxen wie bei Preise, je Bild + ein Button */
.fall-duo .duo-hell { min-height: 0; padding-top: clamp(44px, 4.6vw, 68px); }
.fd-pre { margin: 0; font-size: 17px; font-weight: 600; color: var(--ink-2); }
.fd-zahl { margin: 6px 0 10px; font-size: clamp(56px, 6.4vw, 100px); line-height: .95; font-weight: 700; letter-spacing: -.05em; }
.fall-duo .duo-text { min-height: 0; font-size: clamp(17px, 1.6vw, 21px); color: var(--blue); font-weight: 600; }
.fd-bild { width: 100%; margin: clamp(28px, 3vw, 44px) 0; }
.fd-bild img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.fd-banner { max-width: none; margin-top: clamp(16px, 2vw, 24px); }
@media (max-width: 860px) { .fall-duo { gap: 16px; } }

/* Videobänder (nicht Heroes): Text mehr zur Mitte, Badge größer (Micha 1.11.2026) */
@media (min-width: 761px) { .video-band .wrap-wide { padding-left: clamp(0px, 8vw, 150px); } }
.video-band .badge { width: clamp(120px, 11.5vw, 176px); }

/* KI-Karten als drehendes Karussell: vorn scharf, hinten unscharf, weicher Bodenschatten (Micha 1.11.2026) */
.ki-karussell { --b: min(1000px, 100vw - 44px); --k: .32; --x: 84%; position: relative; display: block; max-width: none; height: calc(var(--b) * var(--k) * 2.314 + 96px); margin: 0 auto; overflow: hidden; overflow: clip; }
.ki-karussell figure { position: absolute; top: 0; left: 50%; width: calc(var(--b) * var(--k)); margin: 0 0 0 calc(var(--b) * var(--k) / -2); cursor: pointer; transform: none !important;
  transition: translate 1.1s cubic-bezier(.22,.8,.2,1), scale 1.1s cubic-bezier(.22,.8,.2,1), opacity 1.1s var(--ease); }
.ki-karussell figure > picture { animation: none !important; transition: filter 1.1s var(--ease); }
.ki-karussell figure[data-pos="0"] { z-index: 3; cursor: default; }
.ki-karussell figure[data-pos="1"] { z-index: 2; translate: var(--x) 0; scale: .8; opacity: .8; }
.ki-karussell figure[data-pos="2"] { z-index: 1; translate: calc(var(--x) * -1) 0; scale: .8; opacity: .8; }
.ki-karussell figure:not([data-pos="0"]) > picture { filter: blur(5px) saturate(.85); }
.ki-karussell figure:not([data-pos="0"]) > picture::after { animation: none !important; }
.ki-schatten { position: absolute; left: 6%; right: 6%; top: calc(100% - 22px); height: 50px; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.34), rgba(0,0,0,.12) 55%, rgba(0,0,0,0)); filter: blur(6px); }
.ki-karussell figcaption { position: absolute; left: 0; right: 0; top: 100%; margin-top: 36px; transition: opacity .6s var(--ease); }
.ki-karussell figure:not([data-pos="0"]) figcaption { opacity: 0; }
@media (max-width: 700px) {
  .ki-karussell { --k: .56; --x: 66%; display: block; margin: 0 -22px; padding: 0; overflow: hidden; overflow: clip; }
  .ki-karussell figure { flex: none; }
}

/* Preise: Leitsatz unter dem Hero so groß wie die Hero-Headline (Micha 1.11.2026, H2 vorher „Markenlook. Spitzenplatz.“) */
.h-xl.h-wie-hero { font-size: clamp(50px, 7.4vw, 108px); line-height: .96; letter-spacing: -.048em; }
@media (max-width: 760px) { .h-xl.h-wie-hero { font-size: calc((100vw - 44px) / 9.4); } }
.fd-bild { flex: 1; display: flex; align-items: center; }
#ki .h-xl { -webkit-hyphens: manual; hyphens: manual; }

/* Versprechen-Band unter dem Startseiten-Hero: 1 : 1 aus solar-berlin.com (Abstände, Ausrichtung, Gummi-Animation), neue Reihenfolge und Texte (Micha 1.11.2026) */
:root { --dark-2: #101011; }
.marken { background: var(--dark-2); color: #a1a1a6; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.marken-in { padding: clamp(44px, 5vw, 68px) 0 clamp(52px, 6vw, 84px); }
.marken-trust { display: flex; justify-content: center; margin: 0; padding: 0; list-style: none; }
.marken-trust li { display: flex; align-items: center; gap: .75em; padding: 0 clamp(16px, 3.4vw, 56px); font-size: clamp(24px, 2.6vw, 37px); line-height: 1.08; font-weight: 700; letter-spacing: -.025em; color: #f5f5f7; white-space: nowrap; }  /* wie die Schritt-Headlines („Konfigurieren“) */
.marken-trust li + li { border-left: 1px solid rgba(255, 255, 255, .18); }
.marken-trust svg { flex: none; width: 30px; height: 30px; color: #fff; }
.marken-trust .tz { font-size: .6em; font-weight: 400; letter-spacing: -.01em; color: #a1a1a6; }  /* obere Zeile klein und regular, untere groß und bold */
.marken-trust .ti { flex: none; width: auto; height: clamp(80px, 7.8vw, 112px); margin: -14px 0; }
.marken-trust .ti-pin { height: clamp(88px, 8.58vw, 123px); margin: -19px 0; } /* Pin 10 % größer, Zeilenhöhe bleibt gleich */  /* Breite folgt dem Motiv (Pin ist schmaler) */  /* 3D-Icons (Michas Icon-Familie) */
/* Aufbau-Story: je Vorteil ploppt erst das Icon wie Gummi auf, dann fliegt der Text von links herein; die drei nacheinander von links nach rechts */
.marken-trust.wartet .ti { opacity: 0; transform: scale(.2); }
.marken-trust.wartet li > span { opacity: 0; transform: translateX(-28px); }
.marken-trust.ploppt .ti { transform-origin: 50% 85%; animation: gummi 1.15s linear .15s both; will-change: transform; }
.marken-trust.ploppt li > span { animation: reinfliegen .7s cubic-bezier(.16,1,.3,1) .4s both; }
.marken-trust.ploppt li:nth-child(2) .ti { animation-delay: .6s; }
.marken-trust.ploppt li:nth-child(2) > span { animation-delay: .85s; }
.marken-trust.ploppt li:nth-child(3) .ti { animation-delay: 1.05s; }
.marken-trust.ploppt li:nth-child(3) > span { animation-delay: 1.3s; }
@keyframes reinfliegen { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes gummi { /* aus einer gedämpften Feder berechnet: viele Zwischenbilder, linear abgespielt = flüssig wie ein Video */
  0.0% { opacity: 0; transform: scale(0.169, 0.131); }
  2.2% { opacity: 0.18; transform: scale(0.346, 0.237); }
  4.3% { opacity: 0.36; transform: scale(0.526, 0.343); }
  6.5% { opacity: 0.54; transform: scale(0.683, 0.455); }
  8.7% { opacity: 0.72; transform: scale(0.801, 0.580); }
  10.9% { opacity: 0.91; transform: scale(0.877, 0.715); }
  13.0% { transform: scale(0.917, 0.851); }
  15.2% { transform: scale(0.932, 0.975); }
  17.4% { transform: scale(0.937, 1.077); }
  19.6% { transform: scale(0.941, 1.148); }
  21.7% { transform: scale(0.953, 1.186); }
  23.9% { transform: scale(0.975, 1.192); }
  26.1% { transform: scale(1.004, 1.174); }
  28.3% { transform: scale(1.036, 1.140); }
  30.4% { transform: scale(1.067, 1.098); }
  32.6% { transform: scale(1.090, 1.057); }
  34.8% { transform: scale(1.104, 1.022); }
  37.0% { transform: scale(1.107, 0.997); }
  39.1% { transform: scale(1.099, 0.983); }
  41.3% { transform: scale(1.082, 0.979); }
  43.5% { transform: scale(1.060, 0.983); }
  45.7% { transform: scale(1.036, 0.992); }
  47.8% { transform: scale(1.012, 1.002); }
  50.0% { transform: scale(0.992, 1.012); }
  52.2% { transform: scale(0.977, 1.020); }
  54.3% { transform: scale(0.969, 1.023); }
  56.5% { transform: scale(0.966, 1.022); }
  58.7% { transform: scale(0.968, 1.018); }
  60.9% { transform: scale(0.975, 1.011); }
  63.0% { transform: scale(0.983, 1.003); }
  65.2% { transform: scale(0.992, 0.995); }
  67.4% { transform: scale(1.001, 0.988); }
  69.6% { transform: scale(1.007, 0.984); }
  71.7% { transform: scale(1.010, 0.982); }
  73.9% { transform: scale(1.011, 0.983); }
  76.1% { transform: scale(1.010, 0.985); }
  78.3% { transform: scale(1.007, 0.990); }
  80.4% { transform: scale(1.004, 0.995); }
  82.6% { transform: scale(1.000, 0.999); }
  84.8% { transform: scale(0.996, 1.004); }
  87.0% { transform: scale(0.994, 1.006); }
  89.1% { transform: scale(0.993, 1.008); }
  91.3% { transform: scale(0.993, 1.008); }
  93.5% { transform: scale(0.994, 1.007); }
  95.7% { transform: scale(0.996, 1.005); }
  97.8% { transform: scale(0.999, 1.002); }
  100% { opacity: 1; transform: none; }
}
@media (max-width: 960px) {
  .marken-trust { display: grid; grid-template-columns: repeat(3, 1fr); }
  .marken-trust li { flex-direction: column; gap: 8px; padding: 0 2px; font-size: clamp(15px, 2.8vw, 26px); letter-spacing: -.025em; line-height: 1.15; text-align: center; white-space: normal; }
  .marken-trust .tz { font-size: .8em; letter-spacing: -.01em; }
  .marken-trust .ti { width: auto; height: 88px; margin: -10px 0 -6px; }
  .marken-trust .ti-pin { height: 97px; margin: -14.5px 0 -10.5px; }
}
@media (max-width: 700px) { .marken-in { padding: 30px 0 40px; } }
/* unsere Texte sind länger als bei Solar Berlin: Band etwas breiter, Innenabstand etwas kleiner, damit nichts unter die Trennlinien läuft */
.marken .marken-in { width: min(1360px, 100% - 44px); }
@media (min-width: 961px) { .marken-trust li { flex: none; padding: 0 clamp(16px, 2.6vw, 40px); } }
/* Startseiten-Hero läuft unten weich in das Icon-Band (#101011) aus, ohne Kante (Micha 1.11.2026) */
.hero-start .hero-media::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 34%; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(16,16,17,0) 0%, rgba(16,16,17,.08) 18%, rgba(16,16,17,.26) 38%, rgba(16,16,17,.52) 58%, rgba(16,16,17,.8) 78%, #101011 100%); }
@media (max-width: 760px) { .hero-start .hero-media::after { height: 26%; } }
/* Icon-Band: kleiner und edler in Helvetica Neue (Micha 1.11.2026) */
.marken-trust li { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: clamp(20px, 2vw, 29px); font-weight: 500; letter-spacing: -.012em; line-height: 1.12; }
.marken-trust .tz { font-size: .66em; font-weight: 300; letter-spacing: 0; color: #a1a1a6; }
.marken-trust .ti { height: clamp(68px, 6.6vw, 96px); margin: -10px 0; }
.marken-trust .ti-pin { height: clamp(75px, 7.26vw, 106px); margin: -13px 0; }
@media (max-width: 960px) {
  .marken-trust li { font-size: clamp(14px, 2.5vw, 22px); }
  .marken-trust .tz { font-size: .82em; }
  .marken-trust .ti { height: 76px; margin: -8px 0 -4px; }
  .marken-trust .ti-pin { height: 84px; margin: -12px 0 -8px; }
}
@media (max-width: 960px) { .marken-trust .tz { font-weight: 400; } }
/* Icon-Band: weniger Schwarzraum über und unter den Icons (Micha 1.11.2026) */
.marken-in { padding: clamp(22px, 2.6vw, 38px) 0 clamp(30px, 3.4vw, 48px); }
@media (max-width: 700px) { .marken-in { padding: 14px 0 26px; } }
/* Hero-Kacheln: Kurve und Balken gleich hoch und auf gleicher Höhe, egal wie viele Zeilen die Beschriftung hat (Micha 1.11.2026) */
.kpi { display: flex; flex-direction: column; }
.kpi-body { margin-top: auto; }
@media (min-width: 1101px) { .kpi-body { grid-template-columns: 124px 1fr; } }  /* Beschriftung zweizeilig wie rechts, große Zahlen auf gleicher Höhe */
.band + .wrap-wide > :first-child { margin-top: 0; }
.wrap-wide:has(+ .band) > :last-child { margin-bottom: 0; }
/* KI-Karussell: alle Karten zart dunkel umrandet, Bodenschatten deutlicher (Micha 1.11.2026) */
.ki-karussell figure > picture { box-shadow: 0 0 0 1px rgba(0,0,0,.16), 0 22px 44px -18px rgba(0,0,0,.34); }
.ki-schatten { left: 2%; right: 2%; top: calc(100% - 18px); height: 64px; background: radial-gradient(closest-side, rgba(0,0,0,.5), rgba(0,0,0,.2) 55%, rgba(0,0,0,0)); filter: blur(8px); }
/* Valera (Startseite): Tablet so groß wie möglich, Kennzahlen am linken und rechten Rand im Stil der Fakten-Leiste (Micha 1.11.2026) */
.schau { grid-template-columns: minmax(0, 230px) minmax(0, 1fr) minmax(0, 230px); gap: clamp(24px, 3vw, 48px); }
.schau-bild { justify-self: center; width: 100%; max-width: 720px; }
.werte { gap: clamp(28px, 3.4vw, 44px); }
.werte.links, .werte.rechts { text-align: left; }
.werte > div { padding-top: 18px; border-top: 1px solid var(--line); }
.werte b, .werte.links b { display: block; font-size: clamp(22px, 2vw, 28px); line-height: 1.1; font-weight: 700; letter-spacing: -.025em; white-space: nowrap; }
.werte div > span { margin-top: 6px; font-size: 15px; line-height: 1.4; }
@media (max-width: 760px) {
  .schau { grid-template-columns: 1fr 1fr; gap: 28px 18px; }
  .schau-bild { grid-column: 1 / -1; grid-row: 1; width: 100%; }
  .werte b, .werte.links b { font-size: 22px; }
}
@media (min-width: 761px) {
  .schau { width: min(1400px, 100vw - 44px); margin-left: 50%; transform: translateX(-50%); }
  .schau-bild { max-width: 780px; }
}
.schau-bild img { mix-blend-mode: multiply; }
@media (min-width: 761px) { .schau { width: min(1360px, 100vw - 2 * clamp(22px, 4vw, 60px)); } }
.werte > div { min-height: 100px; }   /* gleich hohe Kennzahlen: linke und rechte Spalte fluchten oben */
@media (max-width: 760px) { .schau { align-items: start; } .werte > div { min-height: 92px; } }
.werte.links { margin-top: 0; }   /* allgemeine .links-Klasse (Linkliste) gab der linken Spalte 26 px Versatz */
@media (max-width: 760px) { .werte > div { min-height: 100px; } }
@media (max-width: 760px) { .werte > div { min-height: 104px; } .werte b, .werte.links b { font-size: 21px; } }
.werte, .werte.links, .werte.rechts { row-gap: clamp(26px, 3.4vw, 44px); }   /* beide Spalten gleicher Zeilenabstand */
/* Apoversum-Band: höher und enger angeschnitten, weniger leeres Orange (Micha 1.11.2026) */
.band-zoom picture { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.band-zoom img { height: 100%; object-fit: cover; object-position: 52% 50%; }
@media (max-width: 760px) { .band-zoom picture { aspect-ratio: 4 / 3; } }
/* Leistungen: Geräte-Bilder groß, ohne Beschnitt, gleich hoch, über die volle Breite (auch in Safari: kein height:100% auf Bildern ohne feste Höhe) */
.leistung-bilder { align-items: end; gap: clamp(16px, 2vw, 32px); margin-top: clamp(32px, 4vw, 56px); }
.leistung-bilder picture { display: block; }
.leistung-bilder img { height: auto; object-fit: contain; border-radius: 0; mix-blend-mode: multiply; }
@media (min-width: 641px) { .leistung-bilder { width: min(1400px, 100vw - 2 * clamp(22px, 4vw, 60px)); margin-left: 50%; transform: translateX(-50%); } }
/* KI-Karussell: dreht selbstständig, hintere Karten weniger unscharf und wie auf einer Trommel eingedreht (Micha 1.11.2026) */
.ki-karussell { perspective: 1500px; }
.ki-karussell figure { transition: translate 1.1s cubic-bezier(.22,.8,.2,1), scale 1.1s cubic-bezier(.22,.8,.2,1), rotate 1.1s cubic-bezier(.22,.8,.2,1), opacity 1.1s var(--ease); }
.ki-karussell figure[data-pos="1"] { rotate: y 24deg; }
.ki-karussell figure[data-pos="2"] { rotate: y -24deg; }
.ki-karussell figure:not([data-pos="0"]) > picture { filter: blur(2px) saturate(.9); }
/* KI-Karussell: hintere Karten zur Mitte eingedreht (Innenkante nach hinten) und räumlich hinter der vorderen, damit sich nichts schneidet */
.ki-karussell figure[data-pos="1"] { translate: var(--x) 0 -160px; rotate: y -26deg; scale: .86; }
.ki-karussell figure[data-pos="2"] { translate: calc(var(--x) * -1) 0 -160px; rotate: y 26deg; scale: .86; }
.ki-karussell figure[data-pos="0"] { translate: 0 0 0; }
/* Valera (Startseite): Fakten-Leiste genauso breit wie die Kennzahlen darüber, bündig mit deren Außenkanten */
@media (min-width: 761px) {
  #valera .fakten { --w: min(1360px, 100vw - 2 * clamp(22px, 4vw, 60px)); width: var(--w); margin-left: calc((100% - var(--w)) / 2); margin-right: calc((100% - var(--w)) / 2); }
}
.ki-karussell figure[data-pos="1"], .ki-karussell figure[data-pos="2"] { opacity: 1; }
.ki-karussell figure[data-pos="3"] { z-index: 0; translate: 0 0 -420px; scale: .7; opacity: 0; }
.ki-karussell figure[data-pos="3"] figcaption { opacity: 0; }
.ki-karussell figure[data-pos="3"] > picture { filter: blur(4px); }
#valera .schau + .knoepfe { margin-top: clamp(40px, 5vw, 64px); }
@media (max-width: 760px) { #valera .werte { display: contents; } #valera .werte > div { min-height: 0; } }   /* iPhone: alle Kennzahlen in einem 2-Spalten-Raster, Zeilen fluchten automatisch */
/* Karte, die hinten herum wechselt: kurz und nur halb abgetaucht, damit sie schnell wieder sichtbar ist (Micha 1.11.2026) */
.ki-karussell figure[data-pos="3"] { translate: 0 0 -300px; scale: .76; opacity: .25; transition-duration: .34s; transition-timing-function: cubic-bezier(.4,0,.6,1); }
.ki-karussell figure[data-pos="1"], .ki-karussell figure[data-pos="2"] { transition: translate .9s cubic-bezier(.22,.8,.2,1), scale .9s cubic-bezier(.22,.8,.2,1), rotate .9s cubic-bezier(.22,.8,.2,1), opacity .5s var(--ease); }

/* Startseite: Laptop + iPhone (Valera) rutscht von rechts mit Gummi-Federung rein und wackelt aus, einmal beim Sichtbarwerden (Micha 1.11.2026) */
.rutsch { transform-origin: 50% 100%; will-change: transform; }
.rutsch.wartet { opacity: 0; transform: translateX(30%); }
.rutsch.los { animation: reinRutschen 2.7s linear both; }
@keyframes reinRutschen { /* gedämpfte Feder (ζ 0,40, 0,95 Hz), 91 Zwischenbilder, linear abgespielt: rutscht langsam von rechts rein, wackelt aus */
  0.0% { opacity: 0.00; transform: translateX(30.00%) skewX(-5.01deg) scale(1.039, 0.981); }
  1.1% { opacity: 0.08; transform: translateX(27.55%) skewX(-6.00deg) scale(1.050, 0.976); }
  2.2% { opacity: 0.16; transform: translateX(24.61%) skewX(-6.00deg) scale(1.050, 0.976); }
  3.3% { opacity: 0.24; transform: translateX(21.32%) skewX(-6.00deg) scale(1.050, 0.976); }
  4.4% { opacity: 0.32; transform: translateX(17.84%) skewX(-6.00deg) scale(1.050, 0.976); }
  5.6% { opacity: 0.40; transform: translateX(14.30%) skewX(-6.00deg) scale(1.050, 0.976); }
  6.7% { opacity: 0.48; transform: translateX(10.80%) skewX(-6.00deg) scale(1.050, 0.976); }
  7.8% { opacity: 0.56; transform: translateX(7.44%) skewX(-6.00deg) scale(1.050, 0.976); }
  8.9% { opacity: 0.63; transform: translateX(4.31%) skewX(-6.00deg) scale(1.050, 0.976); }
  10.0% { opacity: 0.71; transform: translateX(1.47%) skewX(-6.00deg) scale(1.049, 0.976); }
  11.1% { opacity: 0.79; transform: translateX(-1.03%) skewX(-5.43deg) scale(1.043, 0.979); }
  12.2% { opacity: 0.87; transform: translateX(-3.17%) skewX(-4.55deg) scale(1.036, 0.983); }
  13.3% { opacity: 0.95; transform: translateX(-4.93%) skewX(-3.66deg) scale(1.029, 0.986); }
  14.4% { opacity: 1.00; transform: translateX(-6.31%) skewX(-2.78deg) scale(1.022, 0.989); }
  15.6% { opacity: 1.00; transform: translateX(-7.31%) skewX(-1.93deg) scale(1.015, 0.993); }
  16.7% { opacity: 1.00; transform: translateX(-7.97%) skewX(-1.13deg) scale(1.009, 0.996); }
  17.8% { opacity: 1.00; transform: translateX(-8.30%) skewX(-0.41deg) scale(1.003, 0.998); }
  18.9% { opacity: 1.00; transform: translateX(-8.33%) skewX(0.22deg) scale(1.002, 0.999); }
  20.0% { opacity: 1.00; transform: translateX(-8.12%) skewX(0.77deg) scale(1.006, 0.997); }
  21.1% { opacity: 1.00; transform: translateX(-7.69%) skewX(1.22deg) scale(1.010, 0.995); }
  22.2% { opacity: 1.00; transform: translateX(-7.09%) skewX(1.57deg) scale(1.012, 0.994); }
  23.3% { opacity: 1.00; transform: translateX(-6.36%) skewX(1.83deg) scale(1.014, 0.993); }
  24.4% { opacity: 1.00; transform: translateX(-5.53%) skewX(2.00deg) scale(1.016, 0.992); }
  25.6% { opacity: 1.00; transform: translateX(-4.66%) skewX(2.09deg) scale(1.016, 0.992); }
  26.7% { opacity: 1.00; transform: translateX(-3.76%) skewX(2.10deg) scale(1.017, 0.992); }
  27.8% { opacity: 1.00; transform: translateX(-2.86%) skewX(2.05deg) scale(1.016, 0.992); }
  28.9% { opacity: 1.00; transform: translateX(-2.01%) skewX(1.95deg) scale(1.015, 0.992); }
  30.0% { opacity: 1.00; transform: translateX(-1.20%) skewX(1.80deg) scale(1.014, 0.993); }
  31.1% { opacity: 1.00; transform: translateX(-0.47%) skewX(1.61deg) scale(1.013, 0.994); }
  32.2% { opacity: 1.00; transform: translateX(0.18%) skewX(1.41deg) scale(1.011, 0.995); }
  33.3% { opacity: 1.00; transform: translateX(0.73%) skewX(1.19deg) scale(1.009, 0.995); }
  34.4% { opacity: 1.00; transform: translateX(1.19%) skewX(0.96deg) scale(1.008, 0.996); }
  35.6% { opacity: 1.00; transform: translateX(1.56%) skewX(0.74deg) scale(1.006, 0.997); }
  36.7% { opacity: 1.00; transform: translateX(1.83%) skewX(0.52deg) scale(1.004, 0.998); }
  37.8% { opacity: 1.00; transform: translateX(2.00%) skewX(0.32deg) scale(1.002, 0.999); }
  38.9% { opacity: 1.00; transform: translateX(2.10%) skewX(0.13deg) scale(1.001, 0.999); }
  40.0% { opacity: 1.00; transform: translateX(2.12%) skewX(-0.03deg) scale(1.000, 1.000); }
  41.1% { opacity: 1.00; transform: translateX(2.07%) skewX(-0.18deg) scale(1.001, 0.999); }
  42.2% { opacity: 1.00; transform: translateX(1.97%) skewX(-0.29deg) scale(1.002, 0.999); }
  43.3% { opacity: 1.00; transform: translateX(1.82%) skewX(-0.39deg) scale(1.003, 0.998); }
  44.4% { opacity: 1.00; transform: translateX(1.64%) skewX(-0.46deg) scale(1.004, 0.998); }
  45.6% { opacity: 1.00; transform: translateX(1.44%) skewX(-0.50deg) scale(1.004, 0.998); }
  46.7% { opacity: 1.00; transform: translateX(1.21%) skewX(-0.53deg) scale(1.004, 0.998); }
  47.8% { opacity: 1.00; transform: translateX(0.99%) skewX(-0.53deg) scale(1.004, 0.998); }
  48.9% { opacity: 1.00; transform: translateX(0.76%) skewX(-0.52deg) scale(1.004, 0.998); }
  50.0% { opacity: 1.00; transform: translateX(0.54%) skewX(-0.50deg) scale(1.004, 0.998); }
  51.1% { opacity: 1.00; transform: translateX(0.33%) skewX(-0.46deg) scale(1.004, 0.998); }
  52.2% { opacity: 1.00; transform: translateX(0.14%) skewX(-0.42deg) scale(1.003, 0.998); }
  53.3% { opacity: 1.00; transform: translateX(-0.02%) skewX(-0.37deg) scale(1.003, 0.999); }
  54.4% { opacity: 1.00; transform: translateX(-0.17%) skewX(-0.31deg) scale(1.002, 0.999); }
  55.6% { opacity: 1.00; transform: translateX(-0.29%) skewX(-0.25deg) scale(1.002, 0.999); }
  56.7% { opacity: 1.00; transform: translateX(-0.38%) skewX(-0.19deg) scale(1.002, 0.999); }
  57.8% { opacity: 1.00; transform: translateX(-0.46%) skewX(-0.14deg) scale(1.001, 0.999); }
  58.9% { opacity: 1.00; transform: translateX(-0.50%) skewX(-0.09deg) scale(1.001, 1.000); }
  60.0% { opacity: 1.00; transform: translateX(-0.53%) skewX(-0.04deg) scale(1.000, 1.000); }
  61.1% { opacity: 1.00; transform: translateX(-0.54%) skewX(0.00deg) scale(1.000, 1.000); }
  62.2% { opacity: 1.00; transform: translateX(-0.53%) skewX(0.04deg) scale(1.000, 1.000); }
  63.3% { opacity: 1.00; transform: translateX(-0.50%) skewX(0.07deg) scale(1.001, 1.000); }
  64.4% { opacity: 1.00; transform: translateX(-0.47%) skewX(0.10deg) scale(1.001, 1.000); }
  65.6% { opacity: 1.00; transform: translateX(-0.42%) skewX(0.11deg) scale(1.001, 1.000); }
  66.7% { opacity: 1.00; transform: translateX(-0.37%) skewX(0.13deg) scale(1.001, 1.000); }
  67.8% { opacity: 1.00; transform: translateX(-0.32%) skewX(0.13deg) scale(1.001, 0.999); }
  68.9% { opacity: 1.00; transform: translateX(-0.26%) skewX(0.14deg) scale(1.001, 0.999); }
  70.0% { opacity: 1.00; transform: translateX(-0.20%) skewX(0.13deg) scale(1.001, 0.999); }
  71.1% { opacity: 1.00; transform: translateX(-0.14%) skewX(0.13deg) scale(1.001, 0.999); }
  72.2% { opacity: 1.00; transform: translateX(-0.09%) skewX(0.12deg) scale(1.001, 1.000); }
  73.3% { opacity: 1.00; transform: translateX(-0.04%) skewX(0.11deg) scale(1.001, 1.000); }
  74.4% { opacity: 1.00; transform: translateX(0.00%) skewX(0.09deg) scale(1.001, 1.000); }
  75.6% { opacity: 1.00; transform: translateX(0.04%) skewX(0.08deg) scale(1.001, 1.000); }
  76.7% { opacity: 1.00; transform: translateX(0.07%) skewX(0.07deg) scale(1.001, 1.000); }
  77.8% { opacity: 1.00; transform: translateX(0.09%) skewX(0.05deg) scale(1.000, 1.000); }
  78.9% { opacity: 1.00; transform: translateX(0.11%) skewX(0.04deg) scale(1.000, 1.000); }
  80.0% { opacity: 1.00; transform: translateX(0.13%) skewX(0.02deg) scale(1.000, 1.000); }
  81.1% { opacity: 1.00; transform: translateX(0.13%) skewX(0.01deg) scale(1.000, 1.000); }
  82.2% { opacity: 1.00; transform: translateX(0.14%) skewX(0.00deg) scale(1.000, 1.000); }
  83.3% { opacity: 1.00; transform: translateX(0.13%) skewX(-0.01deg) scale(1.000, 1.000); }
  84.4% { opacity: 1.00; transform: translateX(0.13%) skewX(-0.02deg) scale(1.000, 1.000); }
  85.6% { opacity: 1.00; transform: translateX(0.12%) skewX(-0.02deg) scale(1.000, 1.000); }
  86.7% { opacity: 1.00; transform: translateX(0.11%) skewX(-0.03deg) scale(1.000, 1.000); }
  87.8% { opacity: 1.00; transform: translateX(0.10%) skewX(-0.03deg) scale(1.000, 1.000); }
  88.9% { opacity: 1.00; transform: translateX(0.08%) skewX(-0.03deg) scale(1.000, 1.000); }
  90.0% { opacity: 1.00; transform: translateX(0.07%) skewX(-0.03deg) scale(1.000, 1.000); }
  91.1% { opacity: 1.00; transform: translateX(0.05%) skewX(-0.03deg) scale(1.000, 1.000); }
  92.2% { opacity: 1.00; transform: translateX(0.04%) skewX(-0.03deg) scale(1.000, 1.000); }
  93.3% { opacity: 1.00; transform: translateX(0.03%) skewX(-0.03deg) scale(1.000, 1.000); }
  94.4% { opacity: 1.00; transform: translateX(0.01%) skewX(-0.03deg) scale(1.000, 1.000); }
  95.6% { opacity: 1.00; transform: translateX(0.00%) skewX(-0.02deg) scale(1.000, 1.000); }
  96.7% { opacity: 1.00; transform: translateX(-0.01%) skewX(-0.02deg) scale(1.000, 1.000); }
  97.8% { opacity: 1.00; transform: translateX(-0.02%) skewX(-0.02deg) scale(1.000, 1.000); }
  98.9% { opacity: 1.00; transform: translateX(-0.02%) skewX(-0.01deg) scale(1.000, 1.000); }
  100.0% { opacity: 1.00; transform: translateX(0.00%) skewX(0.00deg) scale(1.000, 1.000); }
}
#agentur { overflow-x: hidden; overflow-x: clip; }   /* das reinrutschende Bild darf die Seite nicht kurz verbreitern (iPhone: seitliches Wackeln) */
/* Referenzen: MAVIE-Bilderpaar an der Stelle eines Bands, gleicher Abstand wie ein Band (64 px) */
.band-ersatz { margin-top: clamp(40px, 5vw, 64px); margin-bottom: clamp(40px, 5vw, 64px); }
.band-ersatz .galerie { margin-top: 0; }
/* Startseite MAVIE (Micha 1.11.2026): links Headline + Text, rechts Produkte; darunter drei Anzeigen, Onlineshop auf Tablets, Band „The Art of Youth“ bündig zur nächsten Sektion */
#mavie { padding-bottom: 0; }
#mavie > .band { margin: clamp(56px, 7vw, 104px) 0 0; }
.mavie-kopf { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.mavie-text { text-align: left; }
.mavie-text .eyebrow { margin: 0 0 12px; }
.mavie-text .h-xl { margin: 0; text-align: left; }
.mavie-text .lead { margin: 18px 0 0; text-align: left; }
.mavie-p { max-width: 470px; margin: 22px 0 0; font-size: 17px; line-height: 1.5; color: var(--ink-2); }
.mavie-produkte, .mavie-tablets { margin: 0; }
.mavie-produkte img, .mavie-tablets img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
#mavie .galerie.g-3 { margin-top: clamp(32px, 4vw, 56px); }
.mavie-tablets { max-width: 1000px; margin: clamp(48px, 6vw, 88px) auto 0; }
@media (max-width: 760px) { .mavie-kopf { grid-template-columns: 1fr; gap: 28px; } .mavie-p { font-size: 16px; } }
.mavie-text .eyebrow { color: var(--ink-2); }
/* Zaunbau: oberer Teil schwarz, Werbemittel-Karussell auf Weiß (Micha 1.11.2026) */
#zaun { padding-bottom: clamp(64px, 7vw, 104px); }
.zaun-arbeiten { padding-top: clamp(56px, 6vw, 96px); }
.zaun-arbeiten > .karussell { margin-top: 0; }
/* Apoversum: Bilder über die volle Breite; „Starkes Wissen“ und die drei Kacheln gleich hoch nebeneinander (Micha 1.11.2026) */
@media (min-width: 761px) {
  #apoversum .apo-breit { --w: min(1360px, 100vw - 2 * clamp(22px, 4vw, 60px)); width: var(--w); margin-left: calc((100% - var(--w)) / 2); margin-right: calc((100% - var(--w)) / 2); }
}
.apo-paar img { display: block; width: 100%; height: auto; }
.apo-paar picture { height: auto; }
.apo-paar { align-items: start; }
/* Apoversum: Projekttext sichtbar über dem gelben Button, Band schließt die Sektion bündig ab (Micha 1.11.2026) */
.apo-text { max-width: 760px; margin: clamp(40px, 5vw, 64px) auto 0; text-align: center; font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.apo-text + .knoepfe { margin-top: 28px; }
#apoversum { padding-bottom: 0; }
#apoversum > .band { margin: clamp(56px, 7vw, 104px) 0 0; }
/* Leistungen (Startseite): ohne graue Kästen, feine Linie oben wie die Fakten, Buttons grau (Micha 1.11.2026) */
#leistungen .leistungen { gap: clamp(36px, 4vw, 52px) clamp(24px, 3vw, 40px); }
#leistungen .leistung { padding: 22px 0 0; border-radius: 0; background: none; border-top: 1px solid var(--line); }
/* Doppelpille FAQ | Leistungen (Micha 1.11.2026): blau umrandete Pille, aktive Hälfte blau gefüllt mit weißer Schrift, gleitet beim Umschalten */
.pille { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: fit-content; margin: 0 auto clamp(48px, 6vw, 80px); padding: 4px; border-radius: 980px; box-shadow: inset 0 0 0 1.5px var(--blue); }
.pille::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 980px; background: var(--blue); transition: transform .45s cubic-bezier(.22,.8,.2,1); }
.pille[data-aktiv="1"]::before { transform: translateX(100%); }
.pille button { position: relative; z-index: 1; min-width: 150px; height: 46px; padding: 0 26px; border: 0; border-radius: 980px; background: none; font: inherit; font-size: 17px; font-weight: 500; color: var(--blue); cursor: pointer; transition: color .3s; }
.pille button[aria-selected="true"] { color: #fff; }
.pille button:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.tab-panel.tab-ein { animation: tabEin .5s var(--ease-out) both; }
@keyframes tabEin { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
#panel-faq.wrap { width: auto; max-width: var(--wrap, 980px); }
@media (max-width: 600px) { .pille button { min-width: 0; width: 42vw; max-width: 170px; height: 44px; padding: 0 12px; font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .pille::before { transition: none; } .tab-panel.tab-ein { animation: none; } }
/* MAVIE: Fließtext kleiner, führt zum gelben Button „Unsere Preise“ (Micha 1.11.2026) */
.mavie-p { max-width: 440px; font-size: 15px; line-height: 1.55; }
.mavie-btn { margin-top: 26px; }
@media (max-width: 760px) { .mavie-p { font-size: 15px; } }
/* Abschluss: leuchtendes MacBook nie an der Sektionskante, Abstand wie jede Sektion (Micha 1.11.2026) */
.final { padding-top: clamp(64px, 8vw, 112px); }
@media (max-width: 1144px) { .p-tastatur { width: calc(100% - 44px); border-radius: 0 0 18px 18px; } }
/* Doppelpille: hellblauer Grund statt blauer Umrandung, inaktive Hälfte dunkelgrau (Micha 1.11.2026) */
.pille { background: #e8f1fd; box-shadow: none; }
.pille button { color: #424245; }
.pille button[aria-selected="true"] { color: #fff; }
/* Zaun-Vollbild: immer das ganze Motiv zeigen (Seitenverhältnis des Bildes statt fester Höhe), oben nie angeschnitten (Micha 1.11.2026) */
@media (min-width: 761px) { .vollbild { height: auto; aspect-ratio: 1600 / 812; } .vollbild img { object-position: 50% 0; } }
.pille { box-shadow: inset 0 0 0 1px rgba(29,29,31,.22); }   /* zarte dunkelgraue Outline (Micha 1.11.2026) */
/* SEO-Seite, Ergebnis-Karten nur als Text, Textblock wie vorher (Micha 1.11.2026) */
.rk-text { padding: clamp(26px, 2.4vw, 32px) clamp(22px, 2vw, 28px) clamp(24px, 2.2vw, 28px); }
/* SEO-Seite, Ergebnis-Karten 2 × 2 mit MacBook (Micha 1.11.2026) */
.rk-reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.rk-mac { margin: clamp(28px, 3vw, 44px) clamp(28px, 3.4vw, 52px) 0; }
.rk-mac img { mix-blend-mode: multiply; filter: none; }
.rk .sr-screen.leer { background: #050607; }
.rk .rk-text { padding: clamp(22px, 2.4vw, 32px) clamp(28px, 3.4vw, 52px) clamp(28px, 3vw, 44px); }
.rk-begriff { font-size: clamp(24px, 2.2vw, 32px); }
.rk-knoepfe { grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 700px) {
  .rk-reihe { display: grid; grid-template-columns: 1fr; overflow: visible; margin: 0; padding: 0; gap: 16px; }
  .rk { flex: none; }
  .rk-mac { margin: 22px 18px 0; }
  .rk .rk-text { padding: 18px 22px 24px; }
  .rk-knoepfe { grid-template-columns: 1fr; }
}
/* Ergebnis-Karten: Buttons nur so breit wie ihr Text, nebeneinander (Micha 1.11.2026) */
.rk-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
.rk-knoepfe .btn-l { width: auto; min-width: 0; padding: 0 24px; }
@media (max-width: 700px) { .rk-knoepfe { grid-template-columns: none; } }
.rk .sr-screen picture, .rk .sr-screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 0 50%; mix-blend-mode: normal; }
/* SEO-Ergebnisse: ohne graue Kästen, auf #F5F5F7 – das MacBook-Foto hat genau diesen Grund und wirkt hell statt düster (Micha 1.11.2026) */
.seo-ergebnisse .rk { overflow: visible; border-radius: 0; background: none; }
.seo-ergebnisse .rk:hover { transform: none; }
.seo-ergebnisse .rk-mac { margin: 0; }
.seo-ergebnisse .rk-mac img { mix-blend-mode: normal; }
.seo-ergebnisse .rk .rk-text { padding: 26px 0 0; }
.seo-ergebnisse .rk-begriff { color: var(--ink); }
.seo-ergebnisse .rk-pre, .seo-ergebnisse .rk-kunde { color: var(--ink-2); }
.seo-ergebnisse .rk-reihe { gap: clamp(56px, 6vw, 88px) clamp(28px, 4vw, 64px); }
@media (max-width: 700px) { .seo-ergebnisse .rk-reihe { gap: 56px; } .seo-ergebnisse .rk .rk-text { padding: 18px 0 0; } }
/* SEO-Ergebnisse wieder auf Schwarz, ohne Kästen; MacBook freigestellt (kein Abdunkeln), leere Bildschirme zeigen das MacBook-Hintergrundbild (Micha 1.11.2026) */
.seo-ergebnisse .rk-begriff { color: #fff; }
.seo-ergebnisse .rk-pre, .seo-ergebnisse .rk-kunde { color: var(--dark-ink-2); }
.seo-ergebnisse .rk-mac img { mix-blend-mode: normal; filter: drop-shadow(0 24px 40px rgba(255,255,255,.06)); }
.band-maler img { object-position: 52% 50%; }   /* Malerband höher: Deine Farbe, Farbkarte und Schöneberg-Badge bleiben drin (Micha 1.11.2026) */
/* SEO-Ergebnisse auf Schwarz: „Platz 1 prüfen“ weiß statt gelb (Micha 1.11.2026) */
.seo-ergebnisse .rk-knoepfe .btn-gelb { background: #fff; color: #1d1d1f; box-shadow: none; }
.seo-ergebnisse .rk-knoepfe .btn-gelb:hover { background: #e8e8ed; }
/* Internetagentur „Ich bin Micha“: Porträt klein neben dem Text, Laptops groß darunter, ohne weiße Kästen (Micha 1.11.2026) */
.micha-kopf { display: flex; align-items: center; justify-content: center; gap: clamp(24px, 3vw, 44px); max-width: 860px; margin: 0 auto; }
.micha-bild { flex: none; width: clamp(150px, 15vw, 210px); }
.micha-bild img, .micha-laptops img { display: block; width: 100%; height: auto; border-radius: 0; mix-blend-mode: multiply; }
.micha-kopf .kurz { margin: 0; text-align: left; }
.micha-laptops { max-width: 1100px; margin: clamp(40px, 5vw, 64px) auto 0; }
@media (max-width: 640px) { .micha-kopf { flex-direction: column; text-align: center; } .micha-kopf .kurz { text-align: center; } .micha-bild { width: 150px; } }
/* Referenzen: Zwei-Spalten-Aufbau wie auf der alten Seite, Texte sichtbar (Micha 1.11.2026) */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.split.bild-links { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split.split-kopf { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
.split.split-oben { align-items: start; }
.split-text { text-align: left; }
.split-text .eyebrow { color: var(--ink-2); }
.split-text .lead { margin: 14px 0 0; }
.split-text .h-l + p, .split-text .lead + p, .split-text .split-bewertung + p { margin-top: 24px; }
.split-text p { margin: 0 0 14px; font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.split-text p strong { color: var(--ink); }
.dark .split-text p, .dark .split-text .eyebrow { color: var(--dark-ink-2); }
.dark .split-text p strong { color: #fff; }
.split-bewertung { max-width: 300px; margin-top: 22px; }
.split-bewertung img { display: block; width: 100%; height: auto; }
.split-knoepfe { justify-content: flex-start; margin-top: 26px; }
.split-bilder { display: grid; gap: clamp(16px, 2vw, 24px); }
.split-bild img, .split-breit img { display: block; width: 100%; height: auto; border-radius: var(--r); }
.split-text .split-bild { margin-top: clamp(28px, 3vw, 44px); }
.split-breit { margin-top: clamp(40px, 5vw, 64px); }
@media (max-width: 860px) {
  .split, .split.bild-links, .split.split-kopf { grid-template-columns: 1fr; gap: 32px; }
  .split-knoepfe { flex-direction: row; }
}
.split-bild img, .split-breit img { mix-blend-mode: multiply; }   /* weiße Bildränder verschmelzen mit dem Grund, keine weißen Kästen */
.sec:has(> .band:last-child) { padding-bottom: 0; }
.sec > .band:last-child { margin-top: clamp(56px, 7vw, 104px); }
/* Zaun-Werbemittel auf Dunkelgrau, Button gelb (Micha 1.11.2026) */
.zaun-arbeiten { background: #1d1d1f; color: var(--dark-ink); }
.zaun-arbeiten figcaption b { color: #fff; } .zaun-arbeiten figcaption span, .zaun-arbeiten .mehr summary { color: var(--dark-ink-2); }
.zaun-arbeiten .kar-btn { background: rgba(255,255,255,.14); color: #fff; }
.zaun-arbeiten .mehr-text { color: var(--dark-ink-2); }
/* Untermenü „Leistungen“ (wie auf der alten Seite), dunkle Glas-Karte, öffnet bei Hover und Tastatur-Fokus (Micha 1.11.2026) */
.nav-links .hat-unter { position: relative; }
.nav-links .hat-unter > a { display: inline-flex; align-items: center; gap: 5px; }
.unter-pfeil { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
.nav-links .unter { position: absolute; left: 50%; top: 100%; min-width: 220px; margin: 0; padding: 8px; list-style: none; border-radius: 16px;
  background: rgba(22,22,24,.82); -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 18px 40px rgba(0,0,0,.35);
  opacity: 0; visibility: hidden; transform: translate(-50%, 6px); transition: opacity .2s var(--ease), transform .25s var(--ease), visibility 0s .25s; }
.nav-links .hat-unter::after { content: ""; position: absolute; left: -10px; right: -10px; top: 100%; height: 14px; }   /* Brücke, damit das Menü beim Hinüberfahren offen bleibt */
.nav-links .unter { margin-top: 12px; }
.nav-links .hat-unter:hover .unter, .nav-links .hat-unter:focus-within .unter { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.nav-links .hat-unter:hover .unter-pfeil, .nav-links .hat-unter:focus-within .unter-pfeil { transform: rotate(180deg); }
.nav-links .unter a { display: block; padding: 10px 14px; border-radius: 10px; font-size: 15px; white-space: nowrap; opacity: .9; text-shadow: none; }
.nav-links .unter a:hover, .nav-links .unter a:focus-visible { background: rgba(255,255,255,.1); opacity: 1; }
/* Leistungs-Unterseiten im alten Aufbau (Micha 1.11.2026) */
.unter-nav { border-bottom: 1px solid var(--line-soft); background: #fff; }
.unter-nav .wrap-wide { display: flex; align-items: center; gap: 18px; min-height: 58px; overflow-x: auto; scrollbar-width: none; }
.unter-nav .wrap-wide::-webkit-scrollbar { display: none; }
.un-eltern { flex: none; font-size: 15px; font-weight: 600; color: var(--ink); }
.un-eltern::after { content: "›"; margin-left: 14px; color: var(--ink-3); font-weight: 400; }
.unter-nav ul { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.unter-nav ul a { display: block; padding: 7px 14px; border-radius: 980px; font-size: 15px; color: var(--ink-2); white-space: nowrap; }
.unter-nav ul a:hover { color: var(--ink); text-decoration: none; background: var(--bg-alt); }
.unter-nav ul a[aria-current="page"] { background: var(--ink); color: #fff; }
.split + .split, .split-raster + .split, .klein-reihe + .split { margin-top: clamp(64px, 8vw, 112px); }
.split.nur-text { grid-template-columns: minmax(0, 760px); justify-content: start; }
.split-bilder.zwei { grid-template-columns: 1fr; }
.split-raster { display: grid; gap: clamp(16px, 2vw, 24px); margin-top: clamp(24px, 3vw, 40px); align-items: start; }
.split-raster.s2 { grid-template-columns: 1fr 1fr; } .split-raster.s3 { grid-template-columns: repeat(3, 1fr); }
.split-text .zw-h { margin: 28px 0 0; font-size: 21px; }
.split-text .punkte { margin: 0 0 16px; }
.mehr-links { text-align: left; margin-top: 18px; }
.mehr-links summary { justify-content: flex-start; }
.split .solar-ref { margin: 0; }
@media (max-width: 860px) { .split-raster.s3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .split-raster.s2, .split-raster.s3 { grid-template-columns: 1fr; } }
.dark .split-bild img, .dark .split-breit img { mix-blend-mode: normal; }   /* auf Schwarz würde multiply die Bilder schwärzen */
.split-bilder.drei { grid-template-columns: repeat(3, 1fr); align-items: start; }
.split > * { min-width: 0; }   /* Formular & lange Wörter sprengen die Spalte nicht (iPhone) */
/* Leistungsseiten ohne Leerräume (Micha 1.11.2026): Spaltenbreiten so, dass Bild- und Textspalte gleich hoch sind; Bilder ohne Einblend-Verzögerung; Restbilder lückenlos in gleich hohen Reihen */
.split { grid-template-columns: minmax(0, var(--t, 5fr)) minmax(0, var(--b, 7fr)); }
.split.bild-links { grid-template-columns: minmax(0, var(--b, 7fr)) minmax(0, var(--t, 5fr)); }
.split-bilder, .split-bild, .split-reihen .rv { opacity: 1 !important; transform: none !important; }
.split-reihen { display: grid; gap: clamp(14px, 1.6vw, 20px); margin-top: clamp(20px, 2.4vw, 32px); }
.split-reihe { display: flex; gap: clamp(14px, 1.6vw, 20px); align-items: flex-start; }
.split-reihe .split-bild { min-width: 0; }
.split-reihe.einzel { max-width: 900px; margin: 0 auto; width: 100%; }
@media (max-width: 860px) {
  .split, .split.bild-links { grid-template-columns: 1fr; }
  .split.bild-links .split-bilder { order: 1; }
}
@media (max-width: 560px) { .split-reihe { flex-direction: column; } .split-reihe .split-bild { flex: none !important; } }
.split-form .anfrage { margin: 0; }
.split[data-passt] { align-items: center; }
.split-bilder.zuschnitt { overflow: hidden; border-radius: var(--r); }
.split-bilder.zuschnitt .split-bild, .split-bilder.zuschnitt picture { height: 100%; }
.split-bilder.zuschnitt img { height: 100%; object-fit: cover; object-position: 50% 0; }
.split-bilder.mitlaufen { position: sticky; top: 110px; align-self: start; }
.split:has(.mitlaufen) { align-items: start; }
/* Unterseiten-Header wie die Startseite (Micha 1.11.2026): gleiche Höhe, Motiv vollflächig unter der Navigation, Text als echte Headline */
.hero-unterseite .hero-media picture, .hero-unterseite .hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.hero-unterseite .hero-media::before { animation-duration: 1.4s; }
.hero-header-werbeagentur-berlin .hero-media img { object-position: 70% 50%; }
.hero-header-kontakt .hero-media img { object-position: 50% 50%; }
@media (max-width: 760px) {
  .hero-unterseite .hero-media img { object-position: 72% 50%; }
  .hero-unterseite .h-hero { font-size: calc((100vw - 44px) / 6.6); white-space: normal; }
}
.hero-header-werbeagentur-berlin .hero-media img { object-position: 12% 50%; }
/* Zahnarzt-Header: Geräte stehen unten links, deshalb Text oben */
.hero-header-zahnarztmarketing { justify-content: flex-start; padding-top: clamp(130px, 17vh, 190px); }
.hero-header-zahnarztmarketing .hero-media img { object-position: 70% 100%; }
.hero-header-zahnarztmarketing .hero-shade { background: linear-gradient(180deg, rgba(2,7,12,.75) 0%, rgba(2,7,12,.45) 35%, rgba(2,7,12,0) 60%), linear-gradient(90deg, rgba(2,7,12,.55) 0%, rgba(2,7,12,0) 55%); }
@media (max-width: 760px) { .hero-header-werbeagentur-berlin .hero-media img { object-position: 60% 50%; } }
@media (min-width: 761px) {
  .hero-header-zahnarztmarketing .hero-media img { transform: translateY(16%); }
  .hero-header-zahnarztmarketing .hero-shade { background: linear-gradient(180deg, #02070c 0%, rgba(2,7,12,.9) 14%, rgba(2,7,12,.5) 34%, rgba(2,7,12,0) 55%), linear-gradient(90deg, rgba(2,7,12,.5) 0%, rgba(2,7,12,0) 55%); }
}
@media (max-width: 760px) { .hero-header-werbeagentur-berlin .hero-media img { object-position: 6% 50%; } }
@media (min-width: 761px) {
  /* Bild nach unten versetzt: oberer Rand läuft weich in die Bildfarbe aus, keine Kante, keine schwarze Leiste */
  .hero-header-zahnarztmarketing { background: linear-gradient(90deg, #0f2847 0%, #06102e 45%, #040a24 100%); }
  .hero-header-zahnarztmarketing .hero-media img { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%); mask-image: linear-gradient(180deg, transparent 0, #000 12%); }
  .hero-header-zahnarztmarketing .hero-shade { background: linear-gradient(180deg, rgba(2,7,12,.35) 0%, rgba(2,7,12,.3) 30%, rgba(2,7,12,0) 55%), linear-gradient(90deg, rgba(2,7,12,.45) 0%, rgba(2,7,12,0) 55%); }
}
/* Kino-Prinzip (Micha 1.11.2026): Kopf mittig und knapp, ein kurzer Satz, Bilder groß, Rest gefaltet */
.kino + .kino { margin-top: clamp(80px, 10vw, 140px); }
.kino-kopf { margin-bottom: clamp(32px, 4vw, 52px); }
.kino-kurz { max-width: 620px; margin: 18px auto 0; font-size: 17px; line-height: 1.5; color: var(--ink-2); }
.dark .kino-kurz { color: var(--dark-ink-2); }
.kino-kopf .bewertung { margin: 22px auto 0; max-width: 300px; }
.kino-bilder { display: grid; gap: clamp(14px, 1.6vw, 20px); }
.kino-voll img, .kino-bilder .split-bild img { display: block; width: 100%; height: auto; border-radius: var(--r-lg); }
.kino-voll { display: flex; justify-content: center; }
.kino-voll picture { display: block; max-width: 100%; }
.kino-voll img { max-height: min(78vh, 760px); width: auto; max-width: 100%; }
.kino-bilder .split-bild img { border-radius: var(--r); }
.kino-fuss { margin-top: clamp(28px, 3.4vw, 44px); text-align: center; }
.kino-fuss .knoepfe { margin-top: 0; }
.kino-fuss .mehr { margin-top: 18px; }
.kino-form { max-width: 720px; margin: clamp(32px, 4vw, 48px) auto 0; }
.kino .solar-ref { margin-bottom: clamp(20px, 2.4vw, 32px); }
.dark .kino-bilder img, .dark .kino-voll img { mix-blend-mode: normal; }
.kino-bilder img { mix-blend-mode: multiply; }
@media (max-width: 560px) { .kino-bilder .split-reihe { flex-direction: column; } .kino-bilder .split-reihe .split-bild { flex: none !important; } }
.kino-fenster picture { width: min(1000px, 100%); aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-lg); box-shadow: 0 30px 70px -30px rgba(0,0,0,.35); }
.kino-fenster img { width: 100%; height: 100%; max-height: none; object-fit: cover; object-position: 50% 0; border-radius: 0; }
/* unten angeschnittenes Motiv steht bündig auf der Sektionskante */
.sec.bis-unten { padding-bottom: 0; }
.kino-boden { margin-top: clamp(28px, 3.4vw, 48px); display: flex; justify-content: center; }
.kino-boden img { display: block; width: auto; max-width: 100%; max-height: min(82vh, 780px); border-radius: 0; }
/* Unterseiten-Header (Micha 1.11.2026): Motiv nicht hochzoomen und anschneiden – in voller Breite unten verankert, oben weich in die Bildgrundfarbe */
@media (min-width: 761px) {
  .hero-unterseite { background: var(--grund); justify-content: flex-end; padding-top: 0; }
  .hero-unterseite .hero-media picture, .hero-unterseite .hero-media img { inset: auto 0 0 0; top: auto; height: auto; width: 100%; object-fit: contain; transform: none; }
  .hero-unterseite .hero-media img { position: absolute; bottom: 0; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%); mask-image: linear-gradient(180deg, transparent 0, #000 22%); }
  .hero-unterseite .hero-media picture { position: absolute; inset: 0; }
  /* Bild nie höher als der Header: dann eben in der Höhe einpassen, rechts verankert */
  .hero-unterseite .hero-media img { max-height: 100%; width: auto; max-width: 100%; left: auto; right: 0; }
  .hero-unterseite .hero-shade { background: linear-gradient(90deg, rgba(2,7,12,.55) 0%, rgba(2,7,12,.3) 30%, rgba(2,7,12,0) 55%); }
  .hero-header-zahnarztmarketing { justify-content: flex-start; padding-top: clamp(130px, 17vh, 190px); background: var(--grund); }
  .hero-header-zahnarztmarketing .hero-media img { transform: none; }
}
/* MAVIE-Header: Plakate rechts, Headline links daneben – nichts überlappt */
@media (min-width: 761px) { .hero-header-werbeagentur-berlin .hero-media img { width: 64%; max-width: 64%; } }
/* MAVIE: nur die Plakate, groß rechts neben der Headline, Ränder weich in den Grund */
@media (min-width: 761px) {
  .hero-header-werbeagentur-berlin .hero-media img { width: auto; max-width: 58%; height: 80%; max-height: 80%; bottom: 7%; right: max(22px, calc((100vw - var(--wrap-wide)) / 2 - 40px));
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 96%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 96%, transparent 100%); }
}
/* iPhone: Ausschnitt aufs Motiv legen */
@media (max-width: 760px) {
  .hero-header-werbeagentur-berlin .hero-media img { object-position: 50% 30%; }
  .hero-header-webdesign .hero-media img { object-position: 57% 50%; }
  .hero-header-werbeagentur-online-marketing-berlin .hero-media img { object-position: 54% 50%; }
  .hero-image-bb6cee .hero-media img, .hero-image-7ca8c6 .hero-media img { object-position: 52% 50%; }
}
@media (min-width: 761px) {
  .hero-header-werbeagentur-berlin .hero-media img { height: auto; max-height: 82%; width: min(52vw, calc(100vw - 790px)); max-width: none; bottom: 50%; transform: translateY(50%); }
}
@media (min-width: 761px) and (max-width: 1150px) { .hero-header-werbeagentur-berlin .hero-media img { width: 42vw; bottom: auto; top: 110px; transform: none; } }
@media (min-width: 1151px) { .hero-header-werbeagentur-berlin .hero-media img { width: min(52vw, calc(100vw - 790px), calc(var(--wrap-wide) * .52)); } }
/* MAVIE-Header neu (Micha 1.11.2026): Plakate groß wie ein Filmplakat, rechts aus dem Bild laufend, unter der Navigation beginnend, links weich in den Grund */
@media (min-width: 761px) {
  .hero-header-werbeagentur-berlin .hero-media img { top: 118px; bottom: auto; left: max(calc(50vw - 20px), 640px); right: auto; height: calc(100% - 118px); max-height: none; width: auto; max-width: none; transform: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%); mask-image: linear-gradient(90deg, transparent 0, #000 9%); }
  .hero-header-werbeagentur-berlin .hero-shade { background: linear-gradient(90deg, rgba(10,4,18,.7) 0%, rgba(10,4,18,.35) 40%, rgba(10,4,18,0) 60%), linear-gradient(to top, rgba(10,4,18,.55) 0%, rgba(10,4,18,0) 30%); }
}
/* Kino-Bilder nutzen die volle Breite (bis 1400 px), keine Briefmarken (Micha 1.11.2026) */
@media (min-width: 761px) {
  .kino-bilder { --w: min(1400px, 100vw - 2 * clamp(22px, 4vw, 60px)); width: var(--w); margin-left: calc((100% - var(--w)) / 2); }
  .kino-voll img { max-height: min(86vh, 900px); }
}
/* MAVIE: beide Plakate komplett sichtbar, nach links geschoben bis zum rechten Inhaltsrand; links unter der Headline weich abgedunkelt */
@media (min-width: 761px) {
  .hero-header-werbeagentur-berlin .hero-media img { top: 118px; bottom: auto; height: calc(100% - 118px - 40px); width: auto; max-width: none; left: auto; right: max(22px, calc((100vw - var(--wrap-wide)) / 2)); transform: none;
    -webkit-mask-image: none; mask-image: none; border-radius: 6px; box-shadow: 0 40px 90px -30px rgba(0,0,0,.6); }
  .hero-header-werbeagentur-berlin .hero-shade { z-index: 2; background: linear-gradient(90deg, rgba(10,4,18,.92) 0%, rgba(10,4,18,.82) 30%, rgba(10,4,18,.45) 46%, rgba(10,4,18,0) 60%); }
  .hero-header-werbeagentur-berlin .hero-content { z-index: 3; }
}
.hero-header-werbeagentur-berlin { background: linear-gradient(120deg, #120a1a 0%, #1c1029 55%, #2a1838 100%) !important; }   /* Grundfarbe nicht aus dem Plakatrand (zu hell), sondern dunkles Violett */
@media (min-width: 761px) { .hero-header-werbeagentur-berlin .hero-media img { max-width: calc(var(--wrap-wide) * .94); height: auto; max-height: calc(100% - 158px); } }
/* MAVIE (Micha 1.11.2026): Plakate nicht als ausgeschnittenes Rechteck – Ränder laufen weich in den Hintergrund, nur leichte Abdunklung hinter der Schrift */
@media (min-width: 761px) {
  .hero-header-werbeagentur-berlin .hero-media img { box-shadow: none; border-radius: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 94%, transparent 100%), linear-gradient(180deg, transparent 0, #000 7%, #000 90%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 94%, transparent 100%), linear-gradient(180deg, transparent 0, #000 7%, #000 90%, transparent 100%);
    -webkit-mask-composite: source-in; mask-composite: intersect; }
  .hero-header-werbeagentur-berlin .hero-shade { background: linear-gradient(90deg, rgba(14,8,22,.55) 0%, rgba(14,8,22,.35) 32%, rgba(14,8,22,0) 52%); }
  .hero-header-werbeagentur-berlin .h-hero, .hero-header-werbeagentur-berlin .hero-sub, .hero-header-werbeagentur-berlin .hero-unter { text-shadow: 0 2px 30px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.4); }
}
@media (min-width: 761px) { .hero-header-werbeagentur-berlin .hero-media img {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%), linear-gradient(180deg, transparent 0, #000 6%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 22%), linear-gradient(180deg, transparent 0, #000 6%, #000 92%, transparent 100%); } }
/* MAVIE: rechte untere Bildecke sitzt auf der rechten unteren Ecke des Headers, Bild so groß wie möglich (Micha 1.11.2026) */
@media (min-width: 761px) {
  .hero-header-werbeagentur-berlin .hero-media img { top: auto; bottom: 0; right: 0; left: auto; height: calc(100% - 96px); max-height: none; width: auto; max-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20%), linear-gradient(180deg, transparent 0, #000 6%);
    mask-image: linear-gradient(90deg, transparent 0, #000 20%), linear-gradient(180deg, transparent 0, #000 6%); }
}
/* Spannungs-Aufbau (Micha 1.11.2026): Thema klein und grau, Aussage groß mit Punkt, darunter ein kurzer Satz */
.kino-thema { display: block; margin: 0 0 10px; color: var(--ink-2); }
.dark .kino-thema { color: var(--dark-ink-2); }
.kino-aussage { margin: 0; text-wrap: balance; }
.kino-kopf .kino-aussage + .kino-kurz, .kino-kopf .kino-aussage + .bewertung { margin-top: 22px; }
.kino-kurz { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.45; max-width: 760px; }
/* MAVIE: Bild etwas kleiner, oben längerer Fadingbereich – Headline besser lesbar (Micha 1.11.2026) */
@media (min-width: 761px) {
  .hero-header-werbeagentur-berlin .hero-media img { height: calc(100% - 170px);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24%), linear-gradient(180deg, transparent 0, #000 24%);
    mask-image: linear-gradient(90deg, transparent 0, #000 24%), linear-gradient(180deg, transparent 0, #000 24%); }
}
.kino-kopf .kino-aussage + .lead { margin-top: 18px; }
.kino-aussage { font-size: clamp(44px, 6.4vw, 84px); line-height: 1.02; letter-spacing: -.035em; }
/* Große Aussagen höchstens zweizeilig (Micha 1.11.2026): Schriftgröße folgt der längsten Zeile (--z Zeichen) */
.kino-aussage.zweizeilig { font-size: min(84px, calc(min(100vw - 44px, 1100px) / (var(--z) * .54))); white-space: nowrap; }
.kino-aussage.zweizeilig.frei { white-space: normal; text-wrap: balance; }
@media (max-width: 760px) { .kino-aussage.zweizeilig { font-size: min(46px, calc((100vw - 44px) / (var(--z) * .54))); } }
/* Keine Oldschool-Köpfe (Micha 1.11.2026): Headline groß und als Block (bis zwei Zeilen, ausbalanciert), Unterzeile und Satz schmaler als die Headline – eine visuelle Einheit */
.sec-head > .h-xl:not(.zweizeilig), .sec-head > .h-l, .kino-kopf > .h-xl:not(.zweizeilig), .kino-kopf > .h-l { font-size: clamp(44px, 6.4vw, 84px); line-height: 1.02; letter-spacing: -.035em; max-width: 12.5em; margin-left: auto; margin-right: auto; text-wrap: balance; }
.sec-head > .lead, .kino-kopf > .lead { max-width: 30em; margin-left: auto; margin-right: auto; font-size: clamp(18px, 1.6vw, 22px); text-wrap: balance; }
.sec-head > p:not([class]), .kino-kurz, .sec-head > .kurz { max-width: 34em; margin-left: auto; margin-right: auto; text-wrap: balance; }
.split-text > .h-l, .split-text > .h-xl, .mavie-text > .h-xl { font-size: clamp(40px, 5vw, 72px); line-height: 1.02; letter-spacing: -.035em; text-wrap: balance; }
@media (max-width: 760px) { .sec-head > .h-xl:not(.zweizeilig), .sec-head > .h-l, .kino-kopf > .h-xl:not(.zweizeilig), .kino-kopf > .h-l { font-size: clamp(34px, 9.6vw, 46px); } }
/* Unterseiten-Header (Micha 1.11.2026): Bühne voll nutzen – Motiv auf volle Header-Höhe skaliert, Hauptmotiv rechts neben der Headline (--fx = Lage des Motivs im Bild), links und oben weich in die Grundfarbe */
@media (min-width: 761px) {
  .hero-unterseite:not(.hero-header-werbeagentur-berlin):not(.hero-header-zahnarztmarketing):not(.hero-header-kontakt) .hero-media img {
    top: 96px; bottom: auto; right: auto; height: calc(100% - 96px); max-height: none; width: auto; max-width: none;
    left: var(--zx, 70vw); transform: translateX(calc(var(--fx, .5) * -100%));
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%), linear-gradient(180deg, transparent 0, #000 18%);
    mask-image: linear-gradient(90deg, transparent 0, #000 22%), linear-gradient(180deg, transparent 0, #000 18%);
    -webkit-mask-composite: source-in; mask-composite: intersect; }
  .hero-header-webdesign { --fx: .58; }
  .hero-header-werbeagentur-online-marketing-berlin { --fx: .57; }
  .hero-image-7ca8c6, .hero-image-bb6cee { --fx: .55; }
  /* Tunnel: symmetrisches Motiv, füllt die ganze Bühne */
  .hero-header-kontakt .hero-media img { inset: 0; top: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; object-position: 50% 50%; -webkit-mask-image: none; mask-image: none; }
}
.sec-head > .h-lang, .kino-kopf > .h-lang { font-size: clamp(30px, 3.8vw, 52px) !important; max-width: none; }
/* Foto-Header (Micha 1.11.2026, „eher so“): Motiv groß über die ganze Bühne, Hauptmotiv bis unter die Navigation, Text davor */
@media (min-width: 761px) {
  .hero-header-webdesign .hero-media img, .hero-header-werbeagentur-online-marketing-berlin .hero-media img, .hero-image-7ca8c6 .hero-media img, .hero-image-bb6cee .hero-media img {
    top: auto; bottom: 0; height: var(--gross, 132%); left: var(--zx, 56vw);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%); mask-image: linear-gradient(90deg, transparent 0, #000 16%); }
  .hero-header-webdesign { --gross: 138%; --zx: 54vw; --fx: .58; }
  .hero-header-werbeagentur-online-marketing-berlin, .hero-image-7ca8c6, .hero-image-bb6cee { --gross: 122%; --zx: 62vw; }
  .hero-unterseite .hero-shade { background: linear-gradient(90deg, rgba(2,7,12,.62) 0%, rgba(2,7,12,.4) 30%, rgba(2,7,12,0) 55%), linear-gradient(to top, rgba(2,7,12,.45) 0%, rgba(2,7,12,0) 26%); }
}
.kino-boden img { filter: saturate(.9); }   /* Läufer 10 % entsättigt (Micha 1.11.2026) */
/* Ärztin mit Katze: Bild unten verankert und so hoch, dass der Kopf (17,9 % von oben im Bild) immer ca. 100px unter der Oberkante steht, knapp unter der Navigation */
@media (min-width: 761px) { section.hero-unterseite.hero-header-werbeagentur-online-marketing-berlin:not(.hero-header-werbeagentur-berlin):not(.hero-header-zahnarztmarketing):not(.hero-header-kontakt) .hero-media img {
  top: auto; bottom: 0; height: calc((100% - 100px) * 1.218); left: 60vw; } }
/* Köpfe: gleiche Größe auch auf Unterseiten (ältere .unterseite-Regel war stärker und machte z. B. „Online Marketing Berlin“ klein) */
.unterseite .sec-head > .h-xl:not(.zweizeilig):not(.h-lang), .unterseite .sec-head > .h-l:not(.h-lang), .unterseite .kino-kopf > .h-xl:not(.zweizeilig):not(.h-lang), .unterseite .kino-kopf > .h-l:not(.h-lang) { font-size: clamp(44px, 6.4vw, 84px); line-height: 1.02; letter-spacing: -.035em; }
@media (max-width: 760px) { .unterseite .sec-head > .h-xl:not(.zweizeilig):not(.h-lang), .unterseite .sec-head > .h-l:not(.h-lang), .unterseite .kino-kopf > .h-xl:not(.zweizeilig):not(.h-lang), .unterseite .kino-kopf > .h-l:not(.h-lang) { font-size: clamp(34px, 9.6vw, 46px); } }
.final .lead { margin: 18px auto 0; color: var(--dark-ink-2); }
/* Abschluss: kurze Aussage in Standardgröße .h-xl (Micha 2.11.2026) */
.final .h-final { font-size: clamp(40px, 6vw, 72px) !important; white-space: normal !important; }

/* ======================================================================
   Handgebaute Unterseiten (body.hand, seit 2.11.2026): Maße exakt wie solar-berlin.com, keine Sonderregeln
   ====================================================================== */
.hand .sec { padding: clamp(80px, 11vw, 140px) 0; }
.hand .sec-head { max-width: 860px; margin: 0 auto clamp(40px, 6vw, 72px); text-align: center; }
.hand .sec-head > .h-xl { font-size: clamp(40px, 6vw, 72px); line-height: 1.05; letter-spacing: -.03em; max-width: none; text-wrap: balance; }
.hand .sec-head > .lead { font-size: clamp(19px, 1.8vw, 24px); margin: 18px auto 0; max-width: 34em; }
.hand .sec-head > .eyebrow { font-size: 21px; margin: 0 0 8px; color: var(--ink-2); }
.hand .dark .sec-head > .eyebrow, .hand .dark .sec-head > .lead { color: var(--dark-ink-2); }
.hand .sec-logo.mitte { display: block; height: 46px; width: auto; margin: 0 auto clamp(40px, 6vw, 72px); }
.hand .knoepfe { margin-top: clamp(32px, 4vw, 48px); }
.hand .sec-head + .knoepfe { margin-top: 0; }
/* Hero: Motiv füllt die ganze Bühne; oben sanfter Verlauf für die Navigation, links unten dunkel hinter dem Text */
.hero-motiv { background: #0d0a08; }
.hero-motiv .hero-media .hero-motiv-bild { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 62% 30%; }
.hero-motiv .hero-shade { background:
  linear-gradient(180deg, rgba(13,10,8,.82) 0, rgba(13,10,8,.5) 100px, rgba(13,10,8,0) 240px),
  radial-gradient(125% 130% at 0% 100%, rgba(13,10,8,.97) 0%, rgba(13,10,8,.93) 38%, rgba(13,10,8,.6) 56%, rgba(13,10,8,0) 74%); }
@media (max-width: 760px) {
  .hero-motiv .hero-media .hero-motiv-bild { object-position: 96% 0; }
  .hero-motiv .hero-shade { background:
    linear-gradient(180deg, rgba(13,10,8,.8) 0, rgba(13,10,8,0) 150px),
    linear-gradient(to top, rgba(13,10,8,.98) 0%, rgba(13,10,8,.9) 36%, rgba(13,10,8,.3) 56%, rgba(13,10,8,0) 68%); }
}
.hero-motiv .hero-unter { margin: 22px 0 0; max-width: 560px; font-size: clamp(19px, 1.8vw, 24px); line-height: 1.35; font-weight: 500; color: rgba(255,255,255,.86); }
/* Bilderpaar: gleich hoch, Breite nach Seitenverhältnis; nutzt die ganze Bühne (breiter als der Textrahmen, Rand 22–48px) */
.bilder-paar { display: flex; gap: clamp(16px, 2vw, 32px); align-items: flex-start; width: min(100vw - 2 * clamp(22px, 3vw, 48px), 1760px); margin-inline: calc(50% - min(50vw - clamp(22px, 3vw, 48px), 880px)); }
.bilder-paar > div { min-width: 0; }
.bilder-paar img { display: block; width: 100%; height: auto; border-radius: var(--r); mix-blend-mode: multiply; }
/* Drei Schritte + Anfrage nebeneinander */
.schritte-anfrage { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.flyer-schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(24px, 3vw, 36px); }
.flyer-schritte li { display: flex; gap: 20px; align-items: flex-start; padding-top: 22px; border-top: 1px solid var(--line); }
.fs-n { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 21px; font-weight: 700; }
.flyer-schritte b { display: block; font-size: clamp(22px, 2vw, 28px); line-height: 1.15; letter-spacing: -.02em; }
.flyer-schritte li span:not(.fs-n) { display: block; margin-top: 6px; font-size: 17px; line-height: 1.45; color: var(--ink-2); }
.schritte-anfrage .anfrage { margin: 0; }
/* Läufer steht unten auf der Sektionskante */
.sec-boden { padding-bottom: 0; }
.boden-motiv { display: flex; justify-content: center; margin-top: clamp(32px, 4vw, 56px); }
.boden-motiv img { display: block; width: min(1100px, 100%); height: auto; filter: saturate(.9); }
@media (max-width: 760px) {
  .schritte-anfrage { grid-template-columns: 1fr; }
  .bilder-paar { flex-direction: column; } .bilder-paar > div { flex: none !important; }
}
.hand .sec.sec-boden { padding-bottom: 0; }
/* Unternavigation zentriert; auto-Ränder statt justify-content, damit sie auf dem iPhone weiter von links wischbar bleibt */
.unter-nav .wrap-wide > :first-child { margin-left: auto; }
.unter-nav .wrap-wide > :last-child { margin-right: auto; }
/* Regel (Micha 2.11.2026): nie weiße Boxen oder weiß gerahmte Bilder auf grauem Grund. Karten stehen frei auf der Fläche,
   getrennt nur durch eine zarte Linie; Bilder mit weißem Grund verschmelzen per multiply mit dem Grau */
.alt .karte { background: transparent; border-radius: 0; overflow: visible; }
.alt .karte > .karte-inhalt { padding: 22px 0 0; }
.alt .karte > .karte-inhalt:first-child { border-top: 1px solid var(--line); }
.alt img { mix-blend-mode: multiply; }   /* alle Bilder auf Grau: Weiß wird zum Grau der Fläche, Farben bleiben (Grau 245 dunkelt nur um 4 %) */
.alt .punkte li { background: transparent; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
.alt .anfrage { background: transparent; padding: 0; border-radius: 0; }
.alt .preis-hinweise p { background: transparent; box-shadow: none; padding: 18px 0 0; border-radius: 0; border-top: 1px solid var(--line); }
/* Preise auf Grau: keine weiße Box, Karte als zarte dunkelgraue Kontur (wie der Umschalter); „Beste Wahl“ bleibt hellblau */
.alt .preis:not(.empfohlen) { background: transparent; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }

/* ================= Kontakt (von Hand, 2.11.2026) ================= */
/* Hero: Katzenvideo füllt die Bühne; oben mit 60px Vorlauf in den Videogrund, damit die Ohren unter der Navigation stehen */
.hero-katze { background: #0d1727; }
.hero-katze .hero-media video { top: 60px; height: calc(100% - 60px); object-position: 66% 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 70px); mask-image: linear-gradient(180deg, transparent 0, #000 70px); }
.hero-katze .hero-shade { background:
  linear-gradient(180deg, rgba(13,23,39,.75) 0, rgba(13,23,39,0) 160px),
  radial-gradient(120% 110% at 0% 100%, rgba(10,18,31,.92) 0%, rgba(10,18,31,.75) 34%, rgba(10,18,31,.25) 56%, rgba(10,18,31,0) 70%); }
.hero-katze .hero-unter { margin: 22px 0 0; max-width: 560px; font-size: clamp(19px, 1.8vw, 24px); line-height: 1.35; font-weight: 500; color: rgba(255,255,255,.86); }
@media (max-width: 760px) {
  .hero-katze .hero-media video { top: 48px; height: calc(100% - 48px); object-position: 63% 0; }
  .hero-katze .hero-shade { background:
    linear-gradient(180deg, rgba(13,23,39,.75) 0, rgba(13,23,39,0) 130px),
    linear-gradient(to top, rgba(10,18,31,.97) 0%, rgba(10,18,31,.86) 34%, rgba(10,18,31,.2) 54%, rgba(10,18,31,0) 64%); }
}
/* Vertrauen: Bewertungsgrafik in Jimdo-Originalgröße (626px, iPhone volle Breite), nie aufgeblasen, nie zerschnitten (Micha 2.11.2026) */
.vertrauen { width: min(626px, 100%); margin: 0 auto; }
.vertrauen img { display: block; width: 100%; height: auto; }
/* Erstgespräch-Fenster: hellblau mit zarter Kontur wie die „Beste Wahl“, Plakette „Kostenlos“ */
.anfrage.fenster { position: relative; padding: clamp(28px, 3vw, 44px); border-radius: var(--r-lg); background: #e8f1fd; box-shadow: inset 0 0 0 1px rgba(81,81,84,.5); }
.fenster-plakette { position: absolute; top: -13px; right: 26px; padding: 5px 12px; border-radius: 980px; background: var(--blue); color: #fff; font-size: 12px; font-weight: 600; }
.fenster .anfrage-titel { margin-bottom: 10px; }
.feld-hinweis { font-weight: 400; color: var(--ink-3, #86868b); }
/* Label-Zusatz steht hinter dem Label in derselben Zeile; Felder strecken sich nie, alle Eingabefelder gleich hoch */
.anfrage label { align-content: start; }
.anfrage input, .anfrage select { height: 50px; }
.wunschzeit { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 0; padding: 0; border: 0; min-width: 0; }
.wunschzeit legend { width: 100%; margin-bottom: 8px; padding: 0; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.wunschzeit label { display: block; position: relative; cursor: pointer; }
.wunschzeit input { position: absolute; opacity: 0; pointer-events: none; }
.wunschzeit span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 980px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); font-size: 15px; font-weight: 500; color: var(--ink); transition: background .2s, box-shadow .2s, color .2s; }
.wunschzeit input:checked + span { background: var(--ink); color: #fff; box-shadow: none; }
.wunschzeit input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.anfrage-recht { margin: 16px 0 14px; font-size: 14px; color: var(--ink-2); }
.anfrage-recht a { color: var(--blue); }
.seite-kontakt .kontakt-karte { background: transparent; padding: 8px 0 0 clamp(0px, 2vw, 24px); }
.vertrauen + .kontakt-grid { margin-top: clamp(48px, 5vw, 72px); }   /* Fenster direkt unter der Bewertungsgrafik (Micha: „ranziehen“) */
.kk-wa .btn small { margin-left: 6px; font-size: .78em; font-weight: 400; opacity: .75; }
.kk-logos { max-width: 296px; margin-top: 26px; }   /* Kundenlogos genau so groß wie auf der Jimdo-Seite (296 × 425), nie verkleinert */
.kk-logos img { border-radius: 0; }
/* Sechs Leistungen: frei auf Weiß, getrennt durch zarte Linien */
.sechs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 40px) clamp(24px, 3vw, 48px); margin: 0; padding: 0; list-style: none; }
.sechs li { padding-top: 22px; border-top: 1px solid var(--line); }
.sechs h3 { margin: 0 0 6px; font-size: clamp(20px, 1.8vw, 24px); line-height: 1.2; letter-spacing: -.02em; }
.sechs p { margin: 0; font-size: 17px; line-height: 1.45; color: var(--ink-2); }
@media (max-width: 860px) { .sechs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sechs { grid-template-columns: 1fr; } }
/* Projekte auf Schwarz: Hund als Vollbild schließt bündig mit der Sektion ab */
.boden-band { margin: clamp(40px, 5vw, 64px) 0 0; }
/* Mustermappe: Mappe groß links, Text rechts */
.mappe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.mappe-bild { display: flex; justify-content: center; }
.mappe-bild img { display: block; width: auto; height: auto; max-width: 100%; max-height: min(78vh, 720px); }
.mappe-text .eyebrow { margin: 0 0 8px; font-size: 21px; color: var(--ink-2); }
.mappe-text .h-xl { margin: 0; font-size: clamp(40px, 6vw, 72px); line-height: 1.05; letter-spacing: -.03em; }
.mappe-text .lead { margin: 18px 0 0; font-size: clamp(19px, 1.8vw, 24px); }
.mappe-satz { margin: 18px 0 0; max-width: 30em; font-size: 17px; line-height: 1.5; color: var(--ink-2); }
.mappe-text .knoepfe { justify-content: flex-start; }
.mappe-text .mehr { margin-left: 0; }
.mappe-text .mehr summary { margin-left: -20px; }
@media (max-width: 760px) {
  .mappe { grid-template-columns: 1fr; }
  .mappe-bild img { max-height: 520px; }
}
/* Vertrauensgrafik (Google-Bewertungen, Siegel, Awards): überall gleich groß, 626px wie auf der Jimdo-Kontaktseite, iPhone volle Breite (Micha 2.11.2026: „zu winzig“, „extrem wichtig für Vertrauen“) */
.bewertung, .kino-kopf .bewertung, .split-bewertung { width: min(626px, 100%); max-width: 100%; }
.bewertung { margin-left: auto; margin-right: auto; }
/* Full-Width-Bilder (alle Bänder): viel mehr Höhe, 16:9 wie das Malerband (Micha 2.11.2026); Motiv per object-position je Band gesichert */
.band picture { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.band img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
/* Ausschnitt je Band, damit Logos und Schrift drin bleiben */
.band img[src*="kawai-band"] { object-position: 74% 50%; }             /* Valera-Hund: Text links, Valera-Logo rechts */
.band img[src*="praxismarketing-2-band"] { object-position: 72% 50%; }  /* Zahnkult: „Online“ links, Logo rechts unten */
.band img[src*="preise-marketing0-band"] { object-position: 0% 50%; }   /* MAVIE: 2026-Plakette am linken Rand */
.band picture:has(img[src*="water-band"]) { aspect-ratio: 2.3; }        /* Frische: sehr breit, HYAM-Logo rechts */
.band img[src*="water-band"] { object-position: 62% 50%; }
.band picture:has(img[src*="kosmetikstudio-website-gesichtsbehandlung"]) { aspect-ratio: 1600 / 567; }   /* Wellart: Text bis an beide Ränder, kein Anschnitt */

/* ================= Erstgespräch im Look des Solar-Berlin-Konfigurators (Micha 2.11.2026: „edler, Look & Feel wie Solar Berlin“) =================
   Weiße Fläche, Karten #F5F5F7 (Umkehrung von Solar Berlin, damit nie Weiß auf Grau steht), Doppelpillen, Kontaktzeilen mit Icon-Kacheln */
.eg { display: grid; grid-template-columns: 1.15fr .85fr; gap: 24px; align-items: start; }
.vertrauen + .eg-svg, .vertrauen ~ .eg { margin-top: clamp(48px, 5vw, 72px); }
.eg-form { display: grid; gap: 12px; }
.eg-karte { position: relative; padding: clamp(22px, 2.4vw, 30px); border-radius: var(--r-lg); background: #f5f5f7; }
.eg-karte h3 { margin: 0 0 4px; font-size: 21px; line-height: 1.2; letter-spacing: -.02em; }
.eg-sub { margin: 0 0 16px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.eg-start h3 { font-size: clamp(26px, 2.4vw, 32px); letter-spacing: -.025em; margin-bottom: 10px; padding-right: 110px; }
.eg-start .eg-sub { margin-bottom: 18px; font-size: 16px; }
.eg-preis { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0; padding-top: 16px; border-top: 1px solid var(--line-soft); font-size: 15px; color: var(--ink-2); }
.eg-preis b { font-size: 19px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.eg-preis > span { white-space: nowrap; }
.eg-preis > span + span::before { content: "·"; margin: 0 10px 0 2px; color: #a1a1a6; }
@media (max-width: 560px) { .eg-preis { flex-direction: column; gap: 2px; } .eg-preis > span + span::before { content: none; } }
.eg-plakette { position: absolute; top: clamp(22px, 2.4vw, 30px); right: clamp(22px, 2.4vw, 30px); padding: 6px 12px; border-radius: 980px; background: var(--blue); color: #fff; font-size: 13px; font-weight: 600; }
/* Doppelpillen: Spur hellgrau-dunkler auf der Karte, aktive Pille weiß mit weichem Schatten */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; padding: 4px; border-radius: 14px; background: #e8e8ed; }
.seg button { min-height: 44px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; font: inherit; font-size: 15px; font-weight: 500; color: var(--ink); transition: background .25s var(--ease), box-shadow .25s var(--ease); }
.seg button[aria-pressed="true"] { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.04); font-weight: 600; }
.seg button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* Felder: weiß auf der grauen Karte, ohne Kontur, Fokus blau */
.eg-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.eg-feld { display: grid; gap: 6px; align-content: start; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.eg-feld i { font-style: normal; font-weight: 400; color: #86868b; }
.eg-weit { grid-column: 1 / -1; }
.eg-feld input, .eg-feld textarea { width: 100%; height: 50px; padding: 0 16px; border: 0; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.04); font: inherit; font-size: 17px; font-weight: 400; color: var(--ink); outline: 0; transition: box-shadow .2s; }
.eg-feld textarea { height: auto; min-height: 96px; padding: 13px 16px; resize: vertical; line-height: 1.4; }
.eg-feld input:focus, .eg-feld textarea:focus { box-shadow: 0 0 0 2px var(--blue), 0 0 0 6px rgba(0,113,227,.15); }
.eg-feld ::placeholder { color: #a1a1a6; }
.eg-seg + input + .eg-feld { margin-top: 14px; }
.eg-unter { margin: 18px 0 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.eg-senden { display: grid; gap: 0; margin-top: 8px; }
.eg-senden .btn { width: 100%; }
.eg-senden .anfrage-hinweis { margin-top: 12px; }
.eg-recht { margin: 4px 0 0; text-align: center; font-size: 13px; color: #86868b; }
.eg-recht a { color: var(--blue); }
/* Kontaktkarte: Zeilen mit Icon-Kacheln wie die Extras im Konfigurator */
.eg-kontakt { display: grid; gap: 28px; position: sticky; top: 96px; }
.eg-kontakt .kk-titel { margin: 0; }
.eg-kontakt .kk-unter { margin: 4px 0 10px; }
.eg-weg { display: flex; align-items: center; gap: 14px; padding: 13px 2px; border-bottom: 1px solid var(--line-soft); color: var(--ink); text-decoration: none !important; }
.eg-weg:last-of-type { border-bottom: 0; }
.eg-ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #e8e8ed; color: var(--ink); }
.eg-ico svg { width: 21px; height: 21px; }
.eg-ico-wa { background: #25d366; color: #fff; }
.eg-txt { flex: 1; min-width: 0; }
.eg-txt b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.01em; overflow-wrap: anywhere; }
.eg-txt span { display: block; font-size: 13px; line-height: 1.35; color: var(--ink-2); }
.eg-pfeil { flex: none; width: 16px; height: 16px; color: #a1a1a6; transition: transform .25s var(--ease), color .25s; }
a.eg-weg:hover .eg-pfeil { transform: translateX(3px); color: var(--blue); }
a.eg-weg:hover b { color: var(--blue); }
.eg-kontakt .kk-logos { margin: 0 auto; }
@media (max-width: 900px) {
  .eg { grid-template-columns: 1fr; }
  .eg-kontakt { position: static; }
}
@media (max-width: 560px) {
  .eg-felder { grid-template-columns: 1fr; }
  .eg-start h3 { padding-right: 0; padding-top: 34px; }
  .eg-plakette { top: 18px; right: auto; left: clamp(22px, 2.4vw, 30px); }
  .seg button { font-size: 13.5px; padding: 0 4px; }
}
/* Kontaktbox mit Leistungen: so lang wie die Anfrage-Spalte (Micha 2.11.2026); Kundenlogos halb so groß zentriert darunter */
.eg { align-items: stretch; }
.eg-kontakt { display: flex; flex-direction: column; position: static; }
.eg-kontakt > .eg-karte { flex: 1; display: flex; flex-direction: column; }
.eg-leistungen { margin-top: 28px; padding-top: 26px; border-top: 1px solid var(--line); }
.eg-liste { margin: 6px 0 0; padding: 0; list-style: none; }
.eg-liste li { padding: 13px 2px; border-bottom: 1px solid var(--line-soft); }
.eg-liste li:last-child { border-bottom: 0; }
.eg-liste h3 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.eg-liste p { margin: 2px 0 0; font-size: 13px; line-height: 1.35; color: var(--ink-2); }
.eg-leistungen .mehr { margin: 10px 0 0; }
.eg-leistungen .mehr summary { margin-left: -20px; }
.kk-logos.eg-logos { max-width: 148px; margin: clamp(48px, 5vw, 72px) auto 0; }
.eg-weg.eg-zeiten { border-bottom: 0; }
@media (max-width: 560px) { .eg-seg[data-seg-feld="thema"] { grid-auto-flow: row; grid-template-columns: 1fr 1fr; } }   /* iPhone: Thema als 2 × 2, „Praxis / Klinik“ passt in eine Zeile */
/* Beide grauen Boxen enden unten bündig: Formular-Karten und Kontaktbox teilen sich ein Raster, der Senden-Knopf steht darunter (Micha 2.11.2026) */
.eg { row-gap: 12px; }
.eg-form { display: contents; }
.eg-form > .eg-karte { grid-column: 1; }
.eg-form > .eg-senden { grid-column: 1; }
.eg-kontakt { grid-column: 2; grid-row: 1 / span 3; }
.eg-liste li { padding: 8px 2px; }
@media (max-width: 900px) {
  .eg-kontakt { grid-column: 1; grid-row: auto; }
}
/* Kundenlogos eng neben der Bewertungsgrafik, beide als Paar zentriert und dicht unter der Subheadline (Micha 2.11.2026) */
.vertrauen-reihe { display: flex; justify-content: center; align-items: center; gap: clamp(32px, 3.5vw, 48px); margin-top: calc(-1 * clamp(8px, 3vw, 40px)); }
.vertrauen-reihe .vertrauen { margin: 0; flex: 0 1 626px; }
.vertrauen-reihe .kk-logos.eg-logos { order: -1; flex: none; width: 148px; margin: 0; }
@media (max-width: 760px) {
  .vertrauen-reihe { flex-direction: column; gap: 32px; }
  .vertrauen-reihe .vertrauen { flex: none; width: 100%; }
  .vertrauen-reihe .kk-logos.eg-logos { order: 0; }
}
.vertrauen-reihe ~ .eg { margin-top: clamp(48px, 5vw, 72px); }
/* iPhone: Kundenlogos als waagerechte Leiste (ca. 55px hoch) statt als Stapel, damit das Formular nicht weit nach unten rutscht */
.eg-logos-mobil { display: none; }
@media (max-width: 760px) {
  .vertrauen-reihe .kk-logos.eg-logos { display: none; }
  .vertrauen-reihe .eg-logos-mobil { display: block; width: 100%; max-width: 420px; margin: 0 auto; }
  .eg-logos-mobil img { display: block; width: 100%; height: auto; }
}
/* Kontakt · Neueste Seite: Solar-Berlin-Hero als Vollbild-Video über die ganze Breite, Logo im Himmel, Button darunter */
.neu-solar-band { position: relative; margin: 0; aspect-ratio: 16 / 9; max-height: 92vh; overflow: hidden; background: #0b1a2e; }
.neu-solar-band video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.neu-solar-logo { position: absolute; z-index: 1; top: clamp(18px, 3.5vw, 56px); left: max(22px, calc((100vw - var(--wrap-wide)) / 2)); width: clamp(150px, 18vw, 300px); }
.neu-solar-logo img { display: block; width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 2px 14px rgba(0,0,0,.25)); }
.neu-solar .knoepfe { justify-content: center; margin-top: clamp(32px, 4vw, 48px); }
@media (max-width: 760px) { .neu-solar-band { aspect-ratio: 4 / 3; } .neu-solar-band video { object-position: 62% 60%; } }
.neu-solar .wrap-wide:has(+ .band) > .sec-head { margin-bottom: clamp(40px, 6vw, 72px); }
.neu-solar .band + .wrap-wide > .knoepfe { margin-top: clamp(32px, 4vw, 48px); }
/* Startseite, Kawai bis Senat: Bilder im Laufband viel größer (Micha 2.11.2026: „verschwendet viel Platz“) */
#kunden .kar-slide img { height: clamp(400px, 50vw, 720px); }   /* Bild + Unterschrift passen in den Bildschirm */
#kunden .karussell { margin-top: clamp(40px, 5vw, 64px); }
@media (max-width: 760px) { #kunden .kar-slide img { height: 440px; } }
/* Solar-Berlin-Hero komplett (Aufnahme der Startseite, 16:10) auf Grau, ohne schwarzen Grund */
.neu-solar-band { aspect-ratio: 16 / 10; max-height: none; background: transparent; }
.neu-solar-band video { object-position: 50% 50%; }
@media (max-width: 760px) { .neu-solar-band { aspect-ratio: 16 / 10; } .neu-solar-band video { object-position: 50% 50%; } }

/* ================= Solar-Berlin-Hero 1:1 (Originaldaten und Maße aus solar-berlin.com, alles mit sb- vorangestellt) ================= */
.sb-buehne { position: relative; overflow: hidden; min-height: max(700px, 100svh); padding: clamp(128px, 19vh, 190px) 0 clamp(60px, 8vh, 100px); background: #18293d; color: #fff; text-align: left; isolation: isolate; }
.sb-media { position: absolute; inset: 0; }
.sb-inner { position: absolute; inset: 0; transform-origin: 66% 60%; }
.sb-buehne.an .sb-inner { animation: sbIn 2.6s var(--ease-out) both; }
@keyframes sbIn { from { transform: scale(1.12); filter: brightness(.7); } to { transform: none; filter: none; } }
.sb-media picture, .sb-foto { position: absolute; inset: 0; width: 100%; height: 100%; }
.sb-foto { object-fit: cover; object-position: var(--ox, 60%) var(--oy, 100%); }
.sb-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(10,20,36,.5) 0%, rgba(10,20,36,.3) 32%, rgba(10,20,36,0) 58%); }
.sb-ebene { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; }
.sb-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sb-strahl { opacity: 0; fill: none; }
.sb-spots { position: absolute; inset: 0; }
.sb-blinker { position: absolute; left: 88.83%; top: 82.53%; width: 2.89%; pointer-events: none; mix-blend-mode: screen; animation: sbBlink 1s steps(1, end) infinite; }
.sb-blinker img { display: block; width: 100%; height: auto; }
@keyframes sbBlink { 0% { opacity: 1; } 50% { opacity: 0; } }
.sb-lade { position: absolute; left: 72.37%; top: 73.10%; width: .57%; height: 4.68%; border-radius: 99px; background: #111214; box-shadow: inset 0 0 0 .5px rgba(255,255,255,.06), 0 0 10px 2px rgba(41,151,255,.28); overflow: hidden; pointer-events: none; }
.sb-lade i { position: absolute; left: 13.7%; right: 13.7%; bottom: 2.33%; height: 95.35%; border-radius: 99px; overflow: hidden; }
.sb-lade i::before { content: ""; position: absolute; inset: 0; border-radius: 99px; background: linear-gradient(90deg, #1450c8 0%, #2f7ff0 26%, #4d9fff 37%, #5cf0ff 42%, #4d9fff 47%, #2f7ff0 62%, #1450c8 100%); box-shadow: 0 0 2px rgba(90,174,255,.6); animation: sbLaden 3.2s ease-in-out infinite; }
@keyframes sbLaden { 0% { transform: translateY(84%); opacity: 0; } 8% { transform: translateY(84%); opacity: 1; } 72% { transform: translateY(0); } 88% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(0); opacity: 0; } }
.sb-laub { position: absolute; left: 0; top: 57.16%; width: 35.16%; height: auto; pointer-events: none; transform-origin: 0% 100%; animation: sbLaub 7s ease-in-out infinite; }
@keyframes sbLaub { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 30% { transform: translate(6px, -2px) rotate(.5deg); } 60% { transform: translate(-3px, 1px) rotate(-.3deg); } }
.sb-laub.sb-baum { left: 89.06%; top: 39.2%; width: 10.94%; transform-origin: 100% 72%; animation: sbBaum 6s ease-in-out -2s infinite; }
@keyframes sbBaum { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 35% { transform: translate(-4px, 1px) rotate(-1deg); } 70% { transform: translate(2.5px, -1px) rotate(.6deg); } }
/* Hotspots */
.sb-hs { position: absolute; left: 0; top: 0; width: 0; height: 0; color: #fff; text-decoration: none !important; -webkit-tap-highlight-color: transparent; }
.sb-hs[hidden] { display: none; }
.sb-dot { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.25), 0 2px 10px rgba(0,0,0,.4); transform: scale(0); transition: transform .45s var(--ease-out); }
.sb-linie { position: absolute; left: -.5px; bottom: 10px; width: 1px; height: 64px; background: rgba(255,255,255,.9); box-shadow: 0 0 6px rgba(0,0,0,.35); transform: scaleY(0); transform-origin: bottom; transition: transform .5s var(--ease-out); }
.sb-txt { position: absolute; left: -22px; bottom: 74px; display: block; text-align: left; white-space: nowrap; padding: 12px 20px 13px; border-radius: 18px; background: rgba(22,22,24,.42); -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), 0 10px 30px rgba(0,0,0,.22); opacity: 0; transform: translateY(8px); transition: opacity .45s var(--ease), transform .55s var(--ease-out); }
.sb-txt b { display: block; font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.sb-txt small { display: block; margin-top: 2px; font-size: 17px; color: rgba(255,255,255,.85); }
.sb-hs.links .sb-txt { left: auto; right: -22px; text-align: right; }
.sb-hs.hoch .sb-linie { height: 74px; } .sb-hs.hoch .sb-txt { bottom: 84px; }
.sb-hs.open .sb-dot { transform: scale(1); }
.sb-hs.open .sb-linie { transform: scaleY(1); transition-delay: .2s; }
.sb-hs.open .sb-txt { opacity: 1; transform: none; transition-delay: .5s, .5s; }
.sb-hs:not(.open) .sb-dot, .sb-hs:not(.open) .sb-linie, .sb-hs:not(.open) .sb-txt { transition-duration: .3s; transition-delay: 0s; }
.sb-hs.open .sb-dot::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.7); animation: sbPuls 2.4s .4s var(--ease) infinite; }
@keyframes sbPuls { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } }
/* Navigation der Solar-Berlin-Seite, oben auf dem Foto */
.sb-nav { position: absolute; z-index: 4; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 24px; width: min(var(--wrap-wide), 100% - 44px); height: 84px; margin: 0 auto; }
.sb-logo { flex: none; display: block; width: 170px; }
.sb-logo img { display: block; width: 100%; height: auto; object-fit: contain; }
.sb-links { display: flex; gap: 30px; margin: 0 auto; padding: 0; list-style: none; font-size: 16px; letter-spacing: -.01em; }
.sb-links a { color: #fff; opacity: .85; text-shadow: 0 1px 10px rgba(0,0,0,.25); text-decoration: none !important; }
.sb-links a:hover { opacity: 1; }
.sb-rechts { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.sb-links + .sb-rechts { margin-left: 0; }
.sb-b2b { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 980px; background: #ffb81b; color: #1d1d1f; font-size: 15px; font-weight: 600; white-space: nowrap; text-decoration: none !important; box-shadow: inset 0 0 0 1px rgba(120,80,0,.18), 0 1px 3px rgba(60,40,0,.18); }
.sb-cta { min-height: 40px; min-width: 0; padding: 0 18px; font-size: 15px; font-weight: 600; }
/* Text und PLZ-Formular */
.sb-inhalt { position: relative; z-index: 3; pointer-events: none; }
.sb-inhalt > * { pointer-events: auto; }
.sb-eyebrow { margin: 0 0 18px; font-size: 19px; font-weight: 600; letter-spacing: -.01em; color: rgba(255,255,255,.88); text-shadow: 0 1px 14px rgba(0,0,0,.3); }
.sb-headline { margin: 0; max-width: 900px; font-size: clamp(50px, 7.4vw, 108px); line-height: .96; font-weight: 700; letter-spacing: -.048em; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.16), 0 4px 32px rgba(0,0,0,.22); }
.sb-sub { margin: 22px 0 0; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.2; font-weight: 600; letter-spacing: -.02em; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.18), 0 2px 18px rgba(0,0,0,.2); }
.sb-plz { display: flex; align-items: center; gap: 8px; width: min(520px, 100%); margin: 30px 0 0; padding: 6px; border-radius: 980px; background: rgba(255,255,255,.12); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.24); transition: box-shadow .3s; }
.sb-plz:focus-within { box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), 0 0 0 6px rgba(0,113,227,.25); }
.sb-plz label { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding-left: 18px; }
.sb-plz svg { width: 20px; height: 20px; flex: none; opacity: .7; }
.sb-plz input { flex: 1; min-width: 0; height: 48px; border: 0; outline: 0; background: transparent; font: inherit; font-size: 19px; color: #fff; letter-spacing: .02em; }
.sb-plz input::placeholder { color: rgba(255,255,255,.55); letter-spacing: -.01em; }
.sb-plz .btn { flex: none; min-width: 0; box-shadow: inset 0 0 0 1px rgba(10,58,122,.45), 0 1px 3px rgba(0,30,80,.18); }
.sb-hint { margin: 10px 0 4px; font-size: 14px; color: #fff; }
@media (max-width: 1240px) { .sb-links { gap: 20px; font-size: 15px; } }
@media (max-width: 1100px) { .sb-links { display: none; } }
@media (max-width: 760px) {
  .sb-buehne { min-height: 0; padding: 96px 0 0; display: flex; flex-direction: column; }
  .sb-nav { height: 64px; }
  .sb-logo { width: 130px; }
  .sb-b2b { display: none; }
  .sb-cta { padding: 0 14px; font-size: 14px; }
  .sb-inhalt { order: 0; }
  .sb-media { position: relative; order: 1; inset: auto; height: max(400px, 118vw); margin-top: 18px; overflow: hidden; }
  .sb-foto { --ox: 72%; --oy: 0%; }
  .sb-shade { display: none; }
  .sb-eyebrow { font-size: 15px; margin-bottom: 14px; }
  .sb-mehr { display: none; }
  .sb-headline { font-size: calc((100vw - 44px) / 6.92); line-height: .94; white-space: nowrap; text-shadow: none; }
  .sb-sub { font-size: 21px; text-shadow: none; }
  .sb-plz { flex-direction: column; border-radius: 24px; padding: 8px; background: rgba(255,255,255,.1); }
  .sb-plz label { width: 100%; padding: 0 10px; }
  .sb-plz .btn { width: 100%; }
  .sb-linie { height: 46px; } .sb-hs.hoch .sb-linie { height: 56px; } .sb-hs.hoch .sb-txt { bottom: 66px; }
  .sb-txt { bottom: 56px; padding: 10px 15px 11px; border-radius: 15px; } .sb-txt b { font-size: 19px; } .sb-txt small { font-size: 15px; }
}
@media (max-width: 600px) { .sb-blinker { display: none; } }
@media (prefers-reduced-motion: reduce) { .sb-blinker { animation: none; opacity: 0; } .sb-lade i::before { animation: none; transform: translateY(30%); } .sb-laub { animation: none; } .sb-strahl { display: none; } .sb-buehne.an .sb-inner { animation: none; } }
.neu-solar .sb-buehne + .wrap-wide > .knoepfe { margin-top: clamp(32px, 4vw, 48px); }
.neu-solar .wrap-wide:has(+ .sb-buehne) > .sec-head { margin-bottom: clamp(40px, 6vw, 72px); }
.kino-boden img { height: auto; }   /* nie verzerren: Breite und Höhe nur gemeinsam begrenzen */
/* iPhone: Kennzahl-Karten im Start-Hero lesbar (vorher 7,5 px) */
@media (max-width: 760px) {
  .kpi-kopf { font-size: 10.5px; }
  .kpi-wert span { font-size: 9.5px; letter-spacing: .04em; }
}
/* Preise: drei MAVIE-Anzeigen zwischen den beiden MAVIE-Vollbildern, gleicher Abstand oben und unten */
/* volle Breite, nur schmale Fugen (12px) zu den Vollbildern und untereinander (Micha 2.11.2026) */
.mavie-drei.galerie { width: 100vw; margin: 12px calc(50% - 50vw); padding: 0 12px; gap: 12px; }
.mavie-drei.galerie img { border-radius: 14px; }
@media (max-width: 700px) { .mavie-drei.galerie { margin: 12px calc(50% - 50vw); padding: 0 12px; gap: 12px; scroll-padding: 0 12px; } .mavie-drei.galerie > * { flex-basis: 78%; } }
/* Preise: MacBook unter den Fragen mit Luft nach oben und weichem Schatten unter dem Gerät (Micha 2.11.2026) */
.faq + .solar-ref, details + .solar-ref, .fragen + .solar-ref, .preise-faq + .solar-ref { margin-top: clamp(72px, 9vw, 120px); }
.alt .solar-ref .sr-mac::after, .sec:not(.dark) .solar-ref .sr-mac::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: -2.5%; height: 9%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.28), rgba(0,0,0,.12) 55%, rgba(0,0,0,0)); filter: blur(14px); z-index: -1; pointer-events: none; }
.solar-ref .sr-mac { isolation: isolate; }
.band:has(+ .wrap-wide > .mavie-drei) { margin-bottom: 0; }
.wrap-wide:has(> .mavie-drei) ~ .band { margin-top: 0; }
.wrap-wide:has(> .mavie-drei) + .wrap-wide:empty { display: none; }
.wrap-wide:has(> .mavie-drei) { padding: 12px 0; }
.mavie-drei.galerie { margin-top: 0; margin-bottom: 0; }
/* Preise: MAVIE „The Art of Youth“ schließt bündig mit der Sektion ab, danach folgt nur unsichtbarer SEO-Text */
.sec:has(> .band img[src*="agentur0-band"]) { padding-bottom: 0; }
.band:has(img[src*="agentur0-band"]) { margin-bottom: 0; }
.band:has(img[src*="agentur0-band"]) ~ .wrap-wide { display: contents; }