/* ==========================================================================
   hostly.de – Thema „hostly.de“
   Eigene Gestaltung: Schibsted Grotesk (Text und Überschriften), IBM Plex
   Mono (Etiketten, Zahlen). Farbwelt angelehnt an betreuungsbuero-en.de:
   Blau #2c6fad / #245e93, Grau #545454, Flächen #f6f6f4, Linien #e4e4e0,
   dazu ein tiefes Nachtblau für dunkle Abschnitte. Alle Schriften lokal.
   ========================================================================== */

@font-face { font-family: "Schibsted Grotesk"; src: url("../fonts/schibsted.woff2") format("woff2"); font-weight: 400 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Schibsted Grotesk"; src: url("../fonts/schibsted-ext.woff2") format("woff2"); font-weight: 400 800; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C4, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/plexmono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/plexmono-500.woff2") format("woff2"); font-weight: 500 700; font-display: swap; }

:root {
  --blue-900: #17426b;
  --blue-800: #245e93;
  --blue-700: #2c6fad;
  --blue-500: #3d7cb8;
  --blue-300: #a9c6e3;
  --blue-200: #c6d7e8;
  --blue-100: #e6eef6;
  --blue-50:  #f1f5f9;
  --navy:     #173f66;  /* tiefes Blau (wie Vorstart-Seite), statt Fast-Schwarz */
  --navy-2:   #1c4a78;
  --sand:     #f6f6f4;
  --white:    #ffffff;
  --ink:      #2f2f2f;
  --ink-soft: #545454;
  --heading:  #2b2b2b;
  --line:     #e4e4e0;
  --green:    #2f9e6b;
  /* hostly.de-Palette (verbindlich, siehe CLAUDE.md „Gestaltung“): niemals Orange oder Braun */
  --akzent:        #4fd1ae;  /* Türkis-Mint: Handlungsaufforderung, Stempel, Fokus */
  --akzent-hover:  #3bbd9a;
  --akzent-text:   #0d2b45;  /* Schrift auf Türkis-Mint */
  --akzent-dunkel: #0f7d6f;  /* Akzent als Text auf Weiß */
  --beere:         #a8326e;  /* Vergleich, Kosten der Konkurrenz, „Bitte bald angehen“ */
  --beere-dunkel:  #8a2458;
  --beere-hell:    #f7e6ef;
  --beere-rand:    #e9c3d6;
  --violett:       #5a3a9a;  /* zweite Stufe, „Lässt sich verbessern“ */
  --violett-hell:  #ece6fb;
  --gruen:         #1e5a33;  /* Erfolg */
  --gruen-hell:    #f1f8f3;
  --gruen-rand:    #cfe0d4;
  --fehler:        #a3261a;  /* nur Formularfehler */
  --fehler-hell:   #fbe9ec;
  --fehler-rand:   #f3c2cb;

  --band: linear-gradient(100deg, #245e93 0%, #2c6fad 55%, #3a7cb8 100%);

  --font: "Schibsted Grotesk", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --r-s: 8px;
  --r-m: 14px;
  --r-l: 20px;

  --wrap: 1200px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --section: clamp(4.5rem, 9vw, 8rem);

  --shadow: 0 1px 2px rgba(15, 32, 51, .06), 0 12px 32px -14px rgba(15, 32, 51, .28);
  --shadow-l: 0 2px 4px rgba(15, 32, 51, .06), 0 40px 70px -34px rgba(15, 32, 51, .55);
  --focus: 3px solid var(--blue-900);
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 106.25%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
html.text-xl { font-size: 125%; }
@media (min-width: 900px) { html { font-size: 112.5%; } html.text-xl { font-size: 131%; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; } }

body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--font); line-height: 1.6; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: var(--blue-700); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--blue-900); text-decoration-thickness: 2px; }
:focus-visible { outline: var(--focus); outline-offset: 3px; border-radius: 4px; }
.on-dark :focus-visible, .band :focus-visible, .site-footer :focus-visible { outline-color: var(--white); }

h1, h2, h3, h4 { font-family: var(--font); color: var(--heading); line-height: 1.1; letter-spacing: -0.025em; margin: 0 0 .6em; font-weight: 700; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 1.5rem + 4.2vw, 4.4rem); letter-spacing: -0.045em; line-height: 1.02; font-weight: 800; }
h2 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); letter-spacing: -0.04em; line-height: 1.05; font-weight: 800; }
h3 { font-size: clamp(1.1rem, 1.02rem + .35vw, 1.28rem); letter-spacing: -0.015em; }
p { margin: 0 0 1em; max-width: 66ch; }
ul, ol { margin: 0; padding: 0; }

/* Hervorgehobenes Wort: blau mit gezeichnetem Strich */
h1 em, h2 em {
  font-style: normal; color: var(--blue-700); white-space: nowrap;
  padding-bottom: .06em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 10C50 4 130 2 197 6' fill='none' stroke='%23a9c6e3' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E") left bottom / 100% .22em no-repeat;
}
.on-dark h1 em, .on-dark h2 em { color: var(--blue-300); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 10C50 4 130 2 197 6' fill='none' stroke='%232c6fad' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E"); }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--navy); color: var(--white); padding: .7rem 1rem; border-radius: var(--r-s); }
.skip-link:focus { top: 1rem; color: var(--white); }

.lead { font-size: clamp(1.08rem, 1rem + .35vw, 1.24rem); color: var(--ink-soft); max-width: 58ch; }
.lead p { margin-bottom: .6em; }
.section { position: relative; padding-block: var(--section); overflow-x: clip; }
.section-head { max-width: 46rem; margin-bottom: clamp(2.2rem, 5vw, 3.5rem); }
.section-head p { color: var(--ink-soft); font-size: 1.06rem; }

/* Etikett über Überschriften, fortlaufend nummeriert */
main { counter-reset: abschnitt; }
.eyebrow { display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 1.1rem; font-family: var(--mono); font-size: .76rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-700); }
.eyebrow:not(.eyebrow-plain) { counter-increment: abschnitt; }
.eyebrow:not(.eyebrow-plain)::before { content: counter(abschnitt, decimal-leading-zero); display: inline-grid; place-items: center; min-width: 2.1rem; height: 1.6rem; padding-inline: .35rem; border-radius: 6px; background: var(--blue-100); color: var(--blue-800); }
.eyebrow::after { content: ""; width: 2.2rem; height: 1px; background: currentColor; opacity: .45; }
.on-dark .eyebrow { color: var(--blue-300); }
.on-dark .eyebrow:not(.eyebrow-plain)::before { background: rgba(169, 198, 227, .16); color: var(--blue-300); }

.star { position: relative; top: -.15em; font-size: .5em; font-weight: 600; margin-left: .06em; vertical-align: super; line-height: 0; opacity: .75; }

/* ---------- Knöpfe ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 3rem; padding: .7rem 1.3rem;
  border-radius: 10px; border: 1.5px solid transparent;
  font-family: var(--font); font-weight: 650; font-size: 1rem; line-height: 1.2; letter-spacing: -0.01em;
  text-decoration: none; cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.btn svg { width: 1.2em; height: 1.2em; flex: none; }
.btn-lg { min-height: 3.4rem; padding: .85rem 1.6rem; font-size: 1.05rem; }
.btn-primary { background: var(--blue-700); color: var(--white); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 22px -12px rgba(44, 111, 173, .9); }
.btn-primary:hover { background: var(--blue-800); color: var(--white); transform: translateY(-1px); }
.btn-ghost { border-color: var(--line); color: var(--heading); background: var(--white); }
.btn-ghost:hover { border-color: var(--blue-700); color: var(--blue-800); }
.btn-light { background: var(--white); color: var(--blue-800); }
.btn-light:hover { background: var(--blue-100); color: var(--blue-900); transform: translateY(-1px); }
.btn-accent { background: var(--akzent); color: var(--akzent-text); }
.btn-accent:hover { background: var(--akzent-hover); color: var(--akzent-text); transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.5rem; }

/* ---------- Kopfzeile ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: saturate(1.5) blur(12px); -webkit-backdrop-filter: saturate(1.5) blur(12px);
  border-bottom: 1px solid transparent; transition: border-color .25s, box-shadow .25s;
}
.site-header.is-scrolled { border-color: var(--line); box-shadow: 0 8px 24px -18px rgba(15, 32, 51, .5); }
.header-inner { display: flex; align-items: center; gap: 1rem; min-height: 4.4rem; }

.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--heading); margin-right: auto; min-width: 0; }
.brand svg.mark { width: 2.35rem; height: 2.35rem; flex: none; color: var(--blue-700); }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.brand-name { font-weight: 800; font-size: 1.22rem; letter-spacing: -0.04em; color: var(--heading); }
.brand-tag { font-family: var(--mono); font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin-top: .28rem; white-space: nowrap; }

.main-nav { display: none; }
.main-nav ul { list-style: none; display: flex; gap: .3rem; }
.main-nav a { position: relative; display: block; white-space: nowrap; padding: .55rem .7rem; text-decoration: none; color: var(--ink); font-size: .93rem; font-weight: 500; }
.main-nav a::after { content: ""; position: absolute; left: .7rem; right: .7rem; bottom: .3rem; height: 2px; border-radius: 2px; background: var(--blue-700); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.main-nav a:hover { color: var(--blue-800); }
.main-nav a:hover::after, .main-nav a[aria-current="true"]::after { transform: scaleX(1); }
.main-nav a[aria-current="true"] { color: var(--blue-800); }

.header-actions { display: flex; align-items: center; gap: .5rem; }
.icon-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px;
  border-radius: 10px; border: 1.5px solid var(--line); background: var(--white);
  color: var(--heading); cursor: pointer; text-decoration: none; font-family: var(--font); font-weight: 700;
}
.icon-btn:hover { border-color: var(--blue-700); color: var(--blue-800); }
.icon-btn svg { width: 1.25rem; height: 1.25rem; }
.icon-btn[aria-pressed="true"] { background: var(--blue-100); border-color: var(--blue-700); }
.text-size-btn { font-size: .92rem; }
.header-call { display: none; white-space: nowrap; min-height: 2.75rem; padding: .55rem 1.1rem; font-size: .95rem; }
.menu-btn { background: var(--blue-700); border-color: var(--blue-700); color: var(--white); }
.menu-btn:hover { background: var(--blue-800); border-color: var(--blue-800); color: var(--white); }

@media (min-width: 1100px) {
  .main-nav { display: block; }
  .menu-btn, .header-call-icon { display: none; }
  .header-call { display: inline-flex; }
}
@media (min-width: 1100px) and (max-width: 1260px) { .brand-tag { display: none; } .main-nav a { padding-inline: .5rem; } .main-nav a::after { left: .5rem; right: .5rem; } }
@media (min-width: 1100px) and (max-width: 1600px) { .text-xl .main-nav, .text-xl .brand-tag, .text-xl .header-call { display: none; } .text-xl .menu-btn, .text-xl .header-call-icon { display: inline-grid; } }
@media (max-width: 760px) { .brand-tag { white-space: normal; font-size: .6rem; line-height: 1.3; max-width: 12rem; } }
@media (max-width: 400px) { .brand-tag { display: none; } .header-inner { gap: .5rem; } .header-actions { gap: .35rem; } }
@media (max-width: 360px) { .header-actions .text-size-btn { display: none; } .brand svg.mark { width: 2.1rem; height: 2.1rem; } }

/* Mobiles Menü */
.mobile-menu {
  position: fixed; inset: 0; z-index: 60; background: var(--white);
  display: flex; flex-direction: column; padding: 1rem var(--gutter) calc(1.5rem + env(safe-area-inset-bottom)); overflow-y: auto;
  transform: translateY(-1.5rem); opacity: 0; visibility: hidden; transition: opacity .25s, transform .25s, visibility 0s .25s;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu.is-open { opacity: 1; transform: none; visibility: visible; transition: opacity .25s, transform .25s; }
.mobile-menu-top { display: flex; align-items: center; justify-content: space-between; min-height: 3.6rem; margin-bottom: 1rem; }
.mobile-menu nav ul { list-style: none; counter-reset: menue; }
.mobile-menu nav li { counter-increment: menue; }
.mobile-menu nav a { display: flex; align-items: center; gap: 1rem; padding: .9rem .25rem; border-bottom: 1px solid var(--line); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; color: var(--heading); text-decoration: none; }
.mobile-menu nav a::before { content: counter(menue, decimal-leading-zero); font-family: var(--mono); font-size: .72rem; font-weight: 500; color: var(--blue-700); }
.mobile-menu nav a svg { width: 1.1rem; height: 1.1rem; color: var(--blue-500); margin-left: auto; }
.mobile-menu-foot { margin-top: auto; padding-top: 2rem; display: grid; gap: .75rem; }
.mobile-menu-foot .btn { width: 100%; }
.mobile-menu-foot p { margin: .5rem 0 0; color: var(--ink-soft); font-size: .95rem; }
html.menu-open, body.menu-open { overflow: hidden; }
body.menu-open { position: fixed; left: 0; right: 0; width: 100%; }
.mobile-menu { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

/* ---------- Einstieg ---------- */
.hero { position: relative; padding-top: clamp(2rem, 5vw, 4rem); overflow: hidden; isolation: isolate; }
.hero-grid-bg {
  position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 56px 56px; background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 72% 35%, #000 10%, transparent 72%); mask-image: radial-gradient(ellipse 75% 70% at 72% 35%, #000 10%, transparent 72%);
  opacity: .8;
}
.hero::before { content: ""; position: absolute; z-index: -1; width: 46rem; aspect-ratio: 1; right: -12rem; top: -14rem; border-radius: 50%; background: radial-gradient(circle, rgba(169, 198, 227, .45), transparent 65%); }
.hero-grid { display: grid; gap: 3rem; align-items: center; padding-bottom: clamp(3rem, 6vw, 4.5rem); }
.hero-copy h1 { margin-bottom: .45em; }
.h1-kicker { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.1rem; font-family: var(--mono); font-size: clamp(.78rem, .7rem + .25vw, .9rem); font-weight: 500; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-700); }
.h1-kicker::before { content: ""; width: 2.2rem; height: 2px; border-radius: 2px; background: currentColor; flex: none; }
.hero-copy .lead { margin-bottom: 1.8rem; }

.path-choice { display: grid; gap: .7rem; margin-bottom: 1.8rem; max-width: 34rem; }
.path-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem;
  padding: .9rem 1rem; border-radius: var(--r-m); border: 1.5px solid var(--line); background: rgba(255,255,255,.85);
  text-decoration: none; color: var(--ink); transition: border-color .2s, transform .2s, box-shadow .2s;
}
.path-card:hover { border-color: var(--blue-500); color: var(--ink); transform: translateX(3px); box-shadow: var(--shadow); }
.path-icon { width: 2.8rem; height: 2.8rem; border-radius: 10px; background: var(--blue-100); color: var(--blue-700); display: grid; place-items: center; }
.path-icon svg { width: 1.4rem; height: 1.4rem; }
.path-card strong { display: block; font-weight: 700; font-size: 1.06rem; line-height: 1.3; letter-spacing: -0.015em; }
.path-card .sub { display: block; color: var(--ink-soft); font-size: .92rem; line-height: 1.4; margin-top: .1rem; }
.path-card .chev { width: 1.2rem; height: 1.2rem; color: var(--blue-500); }

.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.4rem; }
.hero-mail { display: inline-flex; align-items: center; gap: .45rem; color: var(--ink-soft); font-weight: 500; text-decoration: none; overflow-wrap: anywhere; }
.hero-mail svg { width: 1.1rem; height: 1.1rem; color: var(--blue-500); flex: none; }
.hero-mail:hover { color: var(--blue-800); text-decoration: underline; }

/* Auswahl Kaufen / Mieten im Einstieg */
.choice { list-style: none; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 0 minmax(0, 1fr); max-width: 34rem; margin-bottom: 2rem; border-radius: 18px; background: var(--white); box-shadow: 0 0 0 1.5px var(--line), 0 24px 48px -30px rgba(15, 32, 51, .45); }
.choice > li { min-width: 0; display: flex; }
.choice-opt { position: relative; flex: 1; display: flex; flex-direction: column; padding: 1.2rem 1.3rem 1.25rem; color: var(--ink); text-decoration: none; transition: background-color .25s, box-shadow .25s; }
.choice > li:first-child .choice-opt { border-radius: 18px 0 0 18px; }
.choice > li:last-child .choice-opt { background: linear-gradient(160deg, var(--blue-50), #e9f0f7); border-radius: 0 18px 18px 0; }
.choice-opt:hover { color: var(--ink); box-shadow: inset 0 0 0 2px var(--blue-500); }
.choice-head { display: flex; align-items: center; gap: .55rem; font-family: var(--mono); font-size: .74rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-700); }
.choice-ico { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 8px; background: var(--blue-100); color: var(--blue-700); flex: none; }
.choice > li:last-child .choice-ico { background: var(--blue-700); color: var(--white); }
.choice-ico svg { width: 1rem; height: 1rem; }
.choice-price { margin-top: .9rem; font-weight: 800; font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.5rem); line-height: 1; letter-spacing: -0.05em; color: var(--heading); white-space: nowrap; }
.choice-unit { margin-top: .3rem; font-family: var(--mono); font-size: .74rem; color: var(--ink-soft); }
.choice-sub { margin-top: .7rem; padding-right: 2.2rem; font-size: .9rem; line-height: 1.4; color: var(--ink-soft); }
.choice-go { position: absolute; right: 1rem; bottom: 1rem; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--white); color: var(--blue-700); box-shadow: 0 0 0 1.5px var(--line); transition: transform .25s, background-color .25s, color .25s; }
.choice-go svg { width: 1rem; height: 1rem; }
.choice-opt:hover .choice-go { transform: translateX(3px); background: var(--blue-700); color: var(--white); box-shadow: none; }
.choice > li.choice-or { position: relative; z-index: 1; display: block; }
.choice-or::before { content: ""; position: absolute; top: 1rem; bottom: 1rem; left: 0; border-left: 1.5px dashed var(--line); }
.choice-or span { position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--akzent); color: var(--akzent-text); font-family: var(--mono); font-size: .66rem; font-weight: 500; letter-spacing: .04em; box-shadow: 0 0 0 5px var(--white); }
@media (max-width: 380px) {
  .choice { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 0 auto; }
  .choice > li:first-child .choice-opt { border-radius: 18px 18px 0 0; }
  .choice > li:last-child .choice-opt { border-radius: 0 0 18px 18px; }
  .choice-or::before { top: 0; bottom: auto; left: 1rem; right: 1rem; border-left: 0; border-top: 1.5px dashed var(--line); }
  .choice-or span { left: 50%; top: 0; }
}

/* Website-Ansicht */
.web-visual { position: relative; width: 100%; max-width: 44rem; margin-inline: auto; padding: .5rem 0 2.6rem; perspective: 1800px; }
.web-browser {
  position: relative; background: var(--white); border-radius: 12px; overflow: hidden;
  box-shadow: var(--shadow-l), 0 0 0 1px rgba(15, 32, 51, .08);
  transform: rotateY(var(--ry, -7deg)) rotateX(var(--rx, 2deg)); transform-style: preserve-3d; transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
.wb-bar { display: flex; align-items: center; gap: .7rem; padding: .5rem .8rem; background: var(--sand); border-bottom: 1px solid var(--line); }
.wb-dots { display: flex; gap: .32rem; flex: none; }
.wb-dots i { width: .6rem; height: .6rem; border-radius: 50%; background: #d8d8d4; }
.wb-dots i:first-child { background: #e9a3c4; } .wb-dots i:nth-child(2) { background: #c9b8ef; } .wb-dots i:nth-child(3) { background: #9fd8b4; }
.wb-url { flex: 1; min-width: 0; display: flex; align-items: center; gap: .4rem; justify-content: center; padding: .2rem .8rem; border-radius: 6px; background: var(--white); border: 1px solid var(--line); font-family: var(--mono); font-size: .7rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-url svg { width: .8rem; height: .8rem; flex: none; color: var(--green); }
.wb-screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; container-type: inline-size; background: var(--sand); }
.wb-screen img, .wp-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.web-phone { position: absolute; right: -3%; bottom: 0; width: 26%; aspect-ratio: 9 / 19; z-index: 2; padding: .36rem; border-radius: 1.5rem; background: #15202c; box-shadow: 0 30px 50px -24px rgba(15, 32, 51, .7), inset 0 0 0 1.5px rgba(255,255,255,.14); transform: rotate(5deg) translateZ(40px); }
.web-phone::before { content: ""; position: absolute; top: .55rem; left: 50%; width: 28%; height: .4rem; border-radius: 1rem; background: #15202c; transform: translateX(-50%); z-index: 2; }
.wp-screen { position: relative; width: 100%; height: 100%; border-radius: 1.15rem; overflow: hidden; background: var(--white); container-type: inline-size; }
.web-chip, .web-code { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .85rem; border-radius: 10px; font-size: .8rem; font-weight: 600; white-space: nowrap; }
.web-chip { left: -3%; bottom: 16%; background: var(--white); color: var(--heading); box-shadow: 0 16px 30px -16px rgba(15, 32, 51, .55), 0 0 0 1px var(--line); }
.web-chip i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--green); animation: puls 2.4s infinite; }
.web-code { left: 6%; top: -1.1rem; background: var(--akzent); color: var(--akzent-text); font-family: var(--mono); font-weight: 500; font-size: .72rem; box-shadow: 0 16px 30px -14px rgba(15, 32, 51, .7); }
.web-code svg { width: 1rem; height: 1rem; }
@keyframes puls { 0% { box-shadow: 0 0 0 0 rgba(47, 158, 107, .5); } 70%, 100% { box-shadow: 0 0 0 .55rem rgba(47, 158, 107, 0); } }
.web-caption { position: absolute; left: 0; right: 30%; bottom: 0; margin: 0; font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
@media (max-width: 979px) { .web-browser { transform: none; } .web-phone { right: 2%; width: 25%; transform: rotate(4deg); } .web-chip { left: 2%; } }
@media (max-width: 520px) { .web-chip { display: none; } .web-code { left: 4%; } .web-caption { right: 0; } }
@media (min-width: 980px) { .hero-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 3.5rem; } }
/* Mobil: Preise (Kaufen/Mieten) unter die Website-Ansicht, Rest in der gewohnten Reihenfolge */
@media (max-width: 979px) {
  .hero-grid { gap: 0; }
  .hero-copy { display: contents; }
  .hero-copy h1 { order: 1; }
  .hero-copy .lead { order: 2; }
  .hero-actions { order: 3; margin-bottom: 2.6rem; }
  .web-visual { order: 4; margin-bottom: 1.4rem; }
  .choice { order: 5; margin-bottom: 0; width: 100%; max-width: 40rem; margin-inline: auto; }
}

/* Faktenband */
.band { background: var(--band); color: var(--white); }
.hero-band .band { padding-block: clamp(1.4rem, 3vw, 1.9rem); }
.facts { list-style: none; display: grid; gap: 1.1rem; }
.facts li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .9rem; align-items: center; }
.facts-ico { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 10px; background: rgba(255,255,255,.14); }
.facts svg { width: 1.3rem; height: 1.3rem; color: var(--white); }
.facts strong { display: block; font-weight: 700; font-size: 1.02rem; line-height: 1.3; }
.facts span { display: block; color: rgba(255,255,255,.82); font-size: .92rem; line-height: 1.4; }
.facts div { min-width: 0; }
@media (min-width: 820px) {
  .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .facts li { padding-inline: 1.6rem; }
  .facts li:first-child { padding-left: 0; }
  .facts li + li { border-left: 1px solid rgba(255,255,255,.22); }
}

/* ---------- Kopf mit Grafik ---------- */
.head-split { display: grid; gap: 2.5rem; align-items: center; margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }
.head-split .section-head { margin-bottom: 0; }
.head-split.no-graphic { display: block; }
.head-photo { margin: 0; border-radius: var(--r-l); overflow: hidden; box-shadow: var(--shadow); }
.head-photo img { width: 100%; height: auto; }
@media (min-width: 980px) { .head-split { grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: 4.5rem; } }

/* ---------- Zwei Wege ---------- */
.ways { display: grid; grid-template-columns: minmax(0, 1fr) 4.5rem minmax(0, 1.12fr) 4.5rem minmax(0, 1fr); align-items: center; }
.way-card { background: var(--white); border: 1.5px solid var(--line); border-radius: var(--r-l); padding: clamp(1.3rem, 2.5vw, 1.9rem); min-width: 0; }
.way-ico, .tile-ico { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 10px; background: var(--blue-100); color: var(--blue-700); flex: none; }
.way-ico { margin-bottom: 1rem; }
.way-ico svg, .tile-ico svg { width: 1.35rem; height: 1.35rem; }
.way-card h3 { margin-bottom: .2rem; }
.way-price { font-weight: 800; font-size: clamp(1.8rem, 1.3rem + 1.4vw, 2.4rem); letter-spacing: -0.045em; color: var(--blue-700); margin: 0 0 1rem; line-height: 1.1; }
.way-price small { font-family: var(--mono); font-weight: 400; font-size: .78rem; letter-spacing: .02em; color: var(--ink-soft); }
.way-link { display: grid; place-items: center; color: var(--blue-500); }
.way-link svg { width: 100%; height: auto; overflow: visible; }
.way-line { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-dasharray: 6 7; stroke-linecap: round; animation: fluss 1.4s linear infinite; }
@keyframes fluss { to { stroke-dashoffset: -26; } }
.way-center { position: relative; background: radial-gradient(120% 90% at 100% 0%, #24507d 0%, var(--navy) 60%); color: var(--white); border-radius: var(--r-l); padding: 2.8rem clamp(1.3rem, 2.5vw, 2rem) clamp(1.4rem, 2.5vw, 2rem); box-shadow: 0 30px 60px -30px rgba(15, 32, 51, .8); }
.way-center h3 { color: var(--white); font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); }
.way-center .checklist li { color: var(--white); }
.way-center-bar { position: absolute; top: 1.1rem; left: 1.3rem; display: flex; gap: .3rem; }
.way-center-bar i { width: .55rem; height: .55rem; border-radius: 50%; background: rgba(255,255,255,.3); }
@media (max-width: 939px) {
  .ways { grid-template-columns: minmax(0, 1fr); }
  .way-link { height: 3.5rem; width: 4rem; justify-self: center; }
  .way-link svg { transform: rotate(90deg); }
}
.one-hand-cols { display: grid; gap: 1.5rem; margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--line); }
.one-hand-cols p { color: var(--ink-soft); }
@media (min-width: 860px) { .one-hand-cols { grid-template-columns: 1fr 1fr; gap: 3rem; } }

/* ---------- Checkliste ---------- */
.checklist { list-style: none; display: grid; gap: .55rem; }
.checklist li { position: relative; padding-left: 1.85rem; line-height: 1.45; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: .18em; width: 1.2rem; height: 1.2rem; border-radius: 5px;
  background: var(--blue-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c6fad' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 72% no-repeat;
}
.on-dark .checklist li::before, .way-center .checklist li::before, .price-card.is-hl .checklist li::before { background-color: rgba(255,255,255,.14); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E"); }

/* ---------- Dunkle Abschnitte ---------- */
.section-dark { background: var(--navy); color: rgba(255,255,255,.86); isolation: isolate; overflow: hidden; }
.section-dark::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 20% 0%, #000, transparent 70%); mask-image: radial-gradient(ellipse 80% 60% at 20% 0%, #000, transparent 70%);
}
.section-dark h2, .section-dark h3 { color: var(--white); }
.section-dark .section-head p { color: rgba(255,255,255,.72); }

/* ---------- Vorher-nachher ---------- */
.compare-list { list-style: none; display: grid; gap: 2.5rem 1.8rem; grid-template-columns: minmax(0, 1fr); }
.cmp-text { padding-top: 1.1rem; }
.cmp-text h3 { margin: 0 0 .25rem; font-size: 1.15rem; }
.cmp-text p { margin: 0; color: rgba(255,255,255,.7); font-size: .97rem; }
.compare { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-m); overflow: hidden; container-type: inline-size; --pos: 50%; background: #1b2f45; box-shadow: 0 30px 60px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.08); }
.cmp-layer { position: absolute; inset: 0; }
.cmp-layer img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.cmp-neu { clip-path: inset(0 0 0 var(--pos)); }
.cmp-label { position: absolute; top: .7rem; z-index: 2; padding: .22rem .6rem; border-radius: 6px; font-family: var(--mono); font-size: .68rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; pointer-events: none; }
.cmp-label-alt { left: .7rem; background: rgba(255,255,255,.94); color: var(--ink); }
.cmp-label-neu { right: .7rem; background: var(--blue-700); color: var(--white); }
.cmp-griff { position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 2; width: 3px; background: var(--white); transform: translateX(-50%); pointer-events: none; box-shadow: 0 0 12px rgba(0,0,0,.3); }
.cmp-griff span { position: absolute; top: 50%; left: 50%; width: 2.6rem; height: 2.6rem; border-radius: 10px; background: var(--white); color: var(--blue-700); display: grid; place-items: center; transform: translate(-50%, -50%); box-shadow: 0 6px 18px -6px rgba(15, 32, 51, .6); }
.cmp-griff svg { width: 1.3rem; height: 1.3rem; }
.compare input[type="range"] { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.compare:has(input:focus-visible) { outline: 3px solid var(--white); outline-offset: 3px; }
@media (min-width: 760px) {
  .compare-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compare-list > li:first-child:nth-last-child(odd) { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 1rem 2.8rem; align-items: center; }
  .compare-list > li:first-child:nth-last-child(odd) .cmp-text { padding: 0; }
  .compare-list > li:first-child:nth-last-child(odd) h3 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); margin-bottom: .5rem; }
  .compare-list > li:first-child:nth-last-child(odd) p { font-size: 1.05rem; }
}

/* ---------- Leistungen ---------- */
.pillars { list-style: none; display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .pillars { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pillars li { position: relative; padding: 1.5rem 1.4rem 1.6rem; border-radius: var(--r-l); border: 1.5px solid var(--line); background: var(--white); transition: border-color .25s, transform .25s, box-shadow .25s; min-width: 0; }
.pillars li:hover { border-color: var(--blue-200); transform: translateY(-3px); box-shadow: var(--shadow); }
.pillar-no { position: absolute; top: 1.3rem; right: 1.3rem; font-family: var(--mono); font-size: .72rem; color: #9a9a95; }
.pillars .tile-ico { margin-bottom: 1.1rem; }
.pillars h3 { margin-bottom: .35rem; }
.pillars p { margin: 0; color: var(--ink-soft); font-size: .96rem; }

.more-services { margin-top: clamp(3rem, 6vw, 4rem); }
.more-services > h3 { font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem); margin-bottom: 1.5rem; }
.service-groups { display: grid; gap: 2rem; }
@media (min-width: 640px) { .service-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .service-groups { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.service-groups h4 { font-family: var(--mono); font-size: .78rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-700); padding-bottom: .7rem; border-bottom: 1px solid var(--line); margin-bottom: .9rem; }

.note-box { display: flex; gap: 1rem; align-items: center; margin-top: 2.5rem; padding: 1.2rem 1.4rem; border-radius: var(--r-m); background: var(--white); border: 1.5px solid var(--line); }
.note-box p { margin: 0; }
.note-ico { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 9px; background: var(--blue-100); color: var(--blue-700); flex: none; }
.note-ico svg { width: 1.2rem; height: 1.2rem; }
.note-box > div { align-self: center; min-width: 0; }

/* ---------- Preise ---------- */
.costs { background: var(--sand); }
.price-grid { display: grid; gap: 1.3rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); align-items: stretch; }
.price-card { position: relative; display: flex; flex-direction: column; gap: .3rem; padding: 2rem 1.7rem 1.7rem; border-radius: var(--r-l); background: var(--white); border: 1.5px solid var(--line); min-width: 0; transition: transform .3s, box-shadow .3s; }
.price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.price-card.is-hl { background: radial-gradient(120% 80% at 100% 0%, #24507d 0%, var(--navy) 62%); border-color: var(--navy); color: rgba(255,255,255,.88); box-shadow: 0 30px 60px -30px rgba(15, 32, 51, .8); }
.price-card.is-hl h3, .price-card.is-hl .price-amount { color: var(--white); }
.price-card.is-hl .price-unit, .price-card.is-hl .price-text p { color: rgba(255,255,255,.72); }
.price-card.is-hl .btn-primary { background: var(--akzent); color: var(--akzent-text); box-shadow: none; }
.price-card.is-hl .btn-primary:hover { background: var(--white); }
.price-tag { position: absolute; top: -.8rem; left: 1.6rem; padding: .22rem .65rem; border-radius: 6px; background: var(--blue-700); color: var(--white); font-family: var(--mono); font-size: .7rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.price-card h3 { margin: 0 0 .5rem; font-family: var(--mono); font-size: .8rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-700); }
.price-amount { font-weight: 800; font-size: clamp(2.5rem, 1.8rem + 2.2vw, 3.3rem); letter-spacing: -0.05em; line-height: 1; color: var(--heading); margin: 0; }
.price-unit { font-family: var(--mono); font-size: .78rem; color: var(--ink-soft); margin: .4rem 0 .8rem; }
.price-text p { color: var(--ink-soft); font-size: .97rem; }
.price-card .checklist { margin: .2rem 0 1.5rem; }
.price-card .btn { margin-top: auto; align-self: stretch; }

/* ---------- Zusatzangebot (Shop & mehr) ---------- */
.extra { background: var(--navy); color: rgba(255,255,255,.86); overflow: hidden; isolation: isolate; }
.extra-glow { position: absolute; z-index: -1; width: 60rem; aspect-ratio: 1; left: 55%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(44, 111, 173, .55), transparent 62%); }
.extra::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1.2px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%); mask-image: linear-gradient(90deg, transparent, #000 60%); opacity: .6; }
.extra h2, .extra h3 { color: var(--white); }
.extra-grid { display: grid; gap: 3.5rem; align-items: center; }
@media (min-width: 1000px) { .extra-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4.5rem; } .extra-grid.no-graphic { grid-template-columns: minmax(0, 1fr); } }
.extra .lead { color: rgba(255,255,255,.78); margin-bottom: 1.8rem; }
.extra-list { list-style: none; display: grid; gap: 1.1rem 1.6rem; margin-bottom: 1.8rem; }
@media (min-width: 600px) { .extra-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.extra-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .9rem; align-items: start; }
.extra-list .tile-ico { background: rgba(169, 198, 227, .12); color: var(--blue-300); box-shadow: inset 0 0 0 1px rgba(169, 198, 227, .2); }
.extra-list h3 { font-size: 1.04rem; margin: .1rem 0 .2rem; }
.extra-list p { margin: 0; color: rgba(255,255,255,.7); font-size: .93rem; line-height: 1.5; }
.extra-note { margin-bottom: 1.8rem; padding-left: 1rem; border-left: 3px solid var(--blue-300); color: rgba(255,255,255,.86); }
.extra-note p { margin: 0; }
.extra-note strong { color: var(--white); }

/* ---------- Ablauf ---------- */
.flow { list-style: none; counter-reset: schritt; display: grid; gap: 1.6rem; position: relative; }
.flow li { counter-increment: schritt; position: relative; padding-left: 3.6rem; min-width: 0; }
.flow li::before { content: counter(schritt, decimal-leading-zero); position: absolute; left: 0; top: 0; z-index: 1; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 10px; background: var(--blue-700); color: var(--white); font-family: var(--mono); font-weight: 500; font-size: .85rem; box-shadow: 0 0 0 6px var(--white); }
.flow::before { content: ""; position: absolute; left: 1.25rem; top: .5rem; bottom: .5rem; width: 2px; background: repeating-linear-gradient(var(--blue-200) 0 6px, transparent 6px 11px); }
.flow .day { display: block; font-family: var(--mono); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--blue-700); margin-bottom: .2rem; }
.flow h3 { margin-bottom: .3rem; font-size: 1.15rem; }
.flow p { margin: 0; color: var(--ink-soft); }
@media (min-width: 980px) {
  .flow { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
  .flow::before { left: 1.3rem; right: 1.3rem; top: 1.25rem; bottom: auto; width: auto; height: 2px; background: repeating-linear-gradient(90deg, var(--blue-200) 0 6px, transparent 6px 11px); }
  .flow li { padding-left: 0; padding-top: 3.8rem; }
}

/* ---------- Mietkauf-Band ---------- */
.ro-panel { position: relative; overflow: hidden; isolation: isolate; background: var(--band); color: var(--white); border-radius: 24px; padding: clamp(1.6rem, 5vw, 3.5rem); display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); align-items: center; }
.ro-panel::after { content: ""; position: absolute; z-index: -1; right: -8rem; top: -10rem; width: 30rem; aspect-ratio: 1; border-radius: 50%; border: 60px solid rgba(255,255,255,.06); }
@media (min-width: 940px) { .ro-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; } }
.ro-panel h2 { color: var(--white); font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.5rem); }
.ro-panel p { color: rgba(255,255,255,.88); }
.ro-panel .checklist { margin: 1.4rem 0 1.8rem; }
.ro-panel .checklist li { color: var(--white); }
.ro-panel .eyebrow { color: var(--white); }

/* ---------- Haltung ---------- */
.values-section { background: var(--sand); }
.values { list-style: none; display: grid; gap: 0 2rem; }
@media (min-width: 640px) { .values { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.values li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; padding: 1.2rem 0; border-top: 1px solid #dcdcd6; }
.value-no { font-family: var(--mono); font-size: .76rem; color: var(--blue-700); padding-top: .25rem; }
.values h3 { margin-bottom: .25rem; }
.values p { margin: 0; color: var(--ink-soft); font-size: .97rem; }

.history { display: grid; gap: 2.5rem; margin-top: clamp(3.5rem, 7vw, 5rem); }
@media (min-width: 960px) { .history { grid-template-columns: .8fr 1.2fr; gap: 4rem; } }
.timeline { list-style: none; position: relative; padding-left: 2rem; }
.timeline::before { content: ""; position: absolute; left: .55rem; top: .5rem; bottom: .5rem; width: 2px; background: var(--blue-200); }
.timeline li { position: relative; padding-bottom: 1.6rem; }
.timeline li::before { content: ""; position: absolute; left: -1.95rem; top: .35rem; width: 1.2rem; height: 1.2rem; border-radius: 4px; background: var(--white); border: 4px solid var(--blue-500); }
.timeline .year { font-family: var(--mono); font-weight: 500; color: var(--blue-700); }
.timeline h3 { font-size: 1.08rem; margin: .1rem 0 .3rem; }
.timeline p { margin: 0; color: var(--ink-soft); }

/* ---------- Häufige Fragen ---------- */
.faq-grid { display: grid; gap: 1rem; }
@media (min-width: 980px) { .faq-grid { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 4rem; align-items: start; } .faq-grid .section-head { position: sticky; top: 7rem; } }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 1.2rem .25rem; font-weight: 650; font-size: 1.08rem; letter-spacing: -0.01em; color: var(--heading); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list .plus { width: 2.1rem; height: 2.1rem; border-radius: 8px; background: var(--blue-100); color: var(--blue-700); display: grid; place-items: center; flex: none; transition: transform .25s, background-color .25s, color .25s; }
.faq-list .plus svg { width: 1rem; height: 1rem; }
.faq-list details[open] .plus { transform: rotate(45deg); background: var(--blue-700); color: var(--white); }
.faq-list summary:hover { color: var(--blue-800); }
.faq-list .answer { padding: 0 .25rem 1.4rem; color: var(--ink-soft); max-width: 60ch; }
.faq-list .answer p:last-child { margin-bottom: 0; }

/* ---------- Kontakt ---------- */
.contact { background: var(--sand); }
.contact-grid { display: grid; gap: 2.5rem; }
@media (min-width: 960px) { .contact-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 4rem; } }
.contact-ways { list-style: none; display: grid; gap: .8rem; margin-top: 1.8rem; }
.contact-ways a, .contact-ways div.way { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: center; padding: 1rem 1.1rem; border-radius: var(--r-m); background: var(--white); border: 1.5px solid var(--line); text-decoration: none; color: var(--ink); }
.contact-ways a:hover { border-color: var(--blue-500); }
.contact-ways .ico { width: 2.8rem; height: 2.8rem; border-radius: 10px; background: var(--blue-700); color: var(--white); display: grid; place-items: center; }
.contact-ways .ico svg { width: 1.3rem; height: 1.3rem; }
.contact-ways small { display: block; font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.contact-ways strong { display: block; font-weight: 650; font-size: 1.06rem; overflow-wrap: anywhere; }
.contact-ways a > span, .contact-ways .way > span { min-width: 0; }

.form-card { background: var(--white); border-radius: var(--r-l); padding: clamp(1.4rem, 4vw, 2.4rem); box-shadow: var(--shadow); border: 1px solid var(--line); }
.form-card h3 { font-size: 1.45rem; letter-spacing: -0.03em; }
.form-grid { display: grid; gap: 1.1rem; }
@media (min-width: 640px) { .form-grid .two { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; } }
.field label, .field legend { display: block; font-weight: 600; font-size: .95rem; margin-bottom: .4rem; color: var(--heading); }
.field .opt { font-weight: 400; color: var(--ink-soft); font-size: .88rem; }
.field input, .field textarea { width: 100%; min-height: 3.1rem; padding: .75rem .95rem; border-radius: 10px; border: 1.5px solid var(--line); background: var(--white); color: var(--ink); font: inherit; font-size: 1rem; }
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--blue-700); box-shadow: 0 0 0 4px var(--blue-100); }
.field input[aria-invalid="true"] { border-color: #b3261e; }
.field .error { color: #b3261e; font-size: .9rem; margin-top: .35rem; }
fieldset.field { border: 0; padding: 0; margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chips label { position: relative; margin: 0; }
.chips input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.chips span { display: inline-flex; align-items: center; min-height: 2.7rem; padding: .5rem 1rem; border-radius: 10px; border: 1.5px solid var(--line); cursor: pointer; font-weight: 500; font-size: .95rem; color: var(--ink); }
.chips input:checked + span { background: var(--blue-700); border-color: var(--blue-700); color: var(--white); }
.chips input:focus-visible + span { outline: var(--focus); outline-offset: 2px; }
.form-hint { font-size: .88rem; color: var(--ink-soft); margin: 0; }
.form-status { margin-top: 1rem; padding: 1rem 1.1rem; border-radius: 10px; background: var(--blue-100); color: var(--blue-900); }
.form-status[hidden] { display: none; }
.form-status.is-ok { background: #e3f4ec; color: #1f5f41; }
.form-status.is-fehler { background: #fdecea; color: #8a1f17; }
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
#anfrage-form { position: relative; }
#anfrage-form button[disabled] { opacity: .65; cursor: progress; }

/* ---------- Fußzeile ---------- */
.site-footer { background: #12324f; color: var(--white); padding: clamp(3rem, 7vw, 4.5rem) 0 calc(2rem + env(safe-area-inset-bottom)); }
.footer-grid { display: grid; gap: 2.2rem; }
@media (min-width: 860px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; gap: 3rem; } }
.site-footer a { color: var(--white); }
.site-footer h2 { font-family: var(--mono); font-size: .74rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-300); margin-bottom: .9rem; }
.site-footer ul { list-style: none; display: grid; gap: .45rem; }
.site-footer p { color: rgba(255,255,255,.72); }
.footer-brand svg.mark { width: 3rem; height: 3rem; margin-bottom: .9rem; color: var(--blue-700); }
.footer-brand .brand-name { color: var(--white); font-size: 1.5rem; }
.footer-brand .brand-tag { color: var(--blue-300); }
.footer-bottom { margin-top: 2.5rem; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.14); display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; font-size: .9rem; color: rgba(255,255,255,.65); }
.footer-bottom a { color: rgba(255,255,255,.88); }
.footnote { margin: 1rem 0 0; max-width: none; font-size: .78rem; color: rgba(255,255,255,.5) !important; }

/* ---------- Mobile Schnellleiste ---------- */
.action-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; padding: .7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom)); background: rgba(255,255,255,.96); border-top: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transform: translateY(110%); transition: transform .3s; }
.action-bar.is-visible { transform: none; }
.action-bar .btn { width: 100%; min-height: 3.1rem; padding-inline: .8rem; white-space: nowrap; }
@media (min-width: 1100px) { .action-bar { display: none; } }
@media (max-width: 1099px) { body { padding-bottom: 5.2rem; } }
@media (max-width: 440px) { .action-bar .btn svg { display: none; } }

/* ---------- Unterseiten ---------- */
.legal { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.legal .wrap { max-width: 50rem; }
.legal h2 { font-size: 1.35rem; letter-spacing: -0.02em; margin-top: 2.2rem; }
.legal h3 { font-size: 1.1rem; margin-top: 1.4rem; }
.legal address { font-style: normal; margin-bottom: 1rem; }

/* ---------- Einblenden beim Scrollen ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; } }

/* ---------- Kleine Bildschirme ---------- */
[class*="-grid"] > * { min-width: 0; }
@media (max-width: 600px) { h1, h2, h3, h4, .path-card strong, p, li, summary { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; } }
@media (max-width: 400px) { .checklist li { overflow-wrap: anywhere; } h1 em, h2 em { white-space: normal; } }

@media print { .site-header, .action-bar, .mobile-menu, .web-visual, .form-card, .g { display: none !important; } body { padding: 0; } }

/* ---------- Leistungen als luftige Liste ---------- */
.svc { list-style: none; counter-reset: none; border-top: 1px solid var(--line); }
.svc > li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem 2rem; padding: clamp(1.6rem, 3.5vw, 2.4rem) 0; border-bottom: 1px solid var(--line); transition: background-color .3s; }
.svc-no { font-weight: 800; font-size: clamp(2.6rem, 2rem + 2.4vw, 4.2rem); line-height: .9; letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 1.5px var(--blue-300); transition: color .35s, -webkit-text-stroke-color .35s; }
.svc > li:hover .svc-no { color: var(--blue-700); -webkit-text-stroke-color: var(--blue-700); }
.svc-main h3 { display: flex; align-items: center; gap: .8rem; font-size: clamp(1.3rem, 1.1rem + .7vw, 1.65rem); letter-spacing: -0.03em; margin-bottom: .5rem; }
.svc-main p { margin: 0; color: var(--ink-soft); font-size: 1.04rem; max-width: 34ch; }
.svc-tag { margin: 0 0 .7rem; font-family: var(--mono); font-size: .72rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-700); }
.svc-chips { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; }
.svc-chips li { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .8rem; border-radius: 999px; background: var(--sand); border: 1px solid var(--line); font-size: .92rem; line-height: 1.3; color: var(--ink); transition: background-color .25s, border-color .25s; }
.svc-chips li::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--blue-500); flex: none; }
.svc > li:hover .svc-chips li { background: var(--white); border-color: var(--blue-200); }
@media (min-width: 900px) {
  .svc > li { grid-template-columns: 7rem minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; padding-inline: 1rem; border-radius: 0; }
  .svc > li:hover { background: linear-gradient(90deg, var(--blue-50), transparent 85%); }
}
.svc-main .tile-ico { width: 2.5rem; height: 2.5rem; }
.svc-main .tile-ico svg { width: 1.2rem; height: 1.2rem; }

/* ---------- Wein-Onlineshop (Designbeispiel) ---------- */
.mk-wein { background: #f6f2f6; color: #3B0F1C; font-family: var(--font); }
.mk-wein .mk-top { display: flex; justify-content: space-between; padding: .55em 3.4em; background: #5A1428; color: #f6f2f6; font-size: .78em; letter-spacing: .03em; }
.mk-wein .mk-top span { opacity: .75; }
.mk-wein .mk-nav { padding: 1.2em 3em; }
.mk-wein .mk-logo { font-family: Georgia, "Times New Roman", serif; font-weight: 700; letter-spacing: .02em; }
.mk-wein .mk-logo svg { color: #8E2A3E; }
.mk-cart { display: inline-flex; align-items: center; gap: .45em; padding: .6em 1.1em; border-radius: 99em; background: #3B0F1C; color: #f6f2f6; font-size: .85em; font-weight: 700; }
.mk-cart svg { width: 1.2em; height: 1.2em; }
.mk-cart em { display: grid; place-items: center; width: 1.4em; height: 1.4em; border-radius: 50%; background: #c7ccd6; color: #3B0F1C; font-style: normal; font-size: .8em; }
.mk-wein .mk-hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3em; align-items: start; padding: .6em 3em 0; }
.mk-wein .mk-kick { display: block; font-size: .78em; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: #A3485C; }
.mk-wein .mk-h { display: block; font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 4em; line-height: 1; letter-spacing: -.02em; margin: .25em 0 .3em; }
.mk-wein .mk-h em { font-style: italic; color: #8E2A3E; background: none; padding: 0; white-space: normal; }
.mk-wein .mk-cta { background: #5A1428; color: #f6f2f6; }
.mk-wein .mk-cta2 { box-shadow: inset 0 0 0 .12em #5A1428; }
.mk-cellar { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 1.2em; height: 21em; padding-bottom: 2.2em; border-radius: 50% 50% 1.2em 1.2em / 36% 36% 1.2em 1.2em; background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.55), transparent 55%), linear-gradient(170deg, #e9dde8, #b98aa6 70%, #A3485C); overflow: hidden; }
.mk-cellar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2.2em; background: #4f3344; box-shadow: inset 0 .3em 0 rgba(255,255,255,.15); }
.mk-cellar i { position: relative; z-index: 1; display: block; width: 4em; filter: drop-shadow(0 .6em .6em rgba(59,15,28,.35)); }
.mk-cellar i.b2 { width: 4.5em; } .mk-cellar svg { width: 100%; height: auto; }
.mk-wein .mk-float { position: absolute; left: -5.5em; bottom: 1.4em; display: grid; gap: .15em; padding: .9em 1.1em; border-radius: .9em; background: #fff; box-shadow: 0 1em 2em -.6em rgba(59,15,28,.45); }
.mk-wein .mk-float small { font-size: .6em; letter-spacing: .16em; text-transform: uppercase; color: #A3485C; font-weight: 700; }
.mk-wein .mk-float b { font-size: .95em; font-weight: 700; }
.mk-wein .mk-float span { font-size: .72em; opacity: .7; }
.mk-wein .mk-float em { font-style: normal; font-size: 1.05em; color: #5A1428; font-weight: 800; }
.mk-wein .mk-float .mk-add { margin-top: .4em; padding: .45em .8em; border-radius: 99em; background: #5A1428; color: #f6f2f6; opacity: 1; font-weight: 700; text-align: center; }
.mk-wein .mk-products { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1em; padding: 1.2em 3em 1.4em; background: #efe8ef; }
.mk-wein .mk-products > span { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: .8em; align-items: center; padding: .6em .9em; border-radius: .9em; background: #fff; }
.mk-wein .mk-products i { grid-row: span 3; width: 1.6em; }
.mk-wein .mk-products svg { width: 100%; height: auto; }
.mk-wein .mk-products b { font-size: .88em; font-weight: 700; white-space: nowrap; }
.mk-wein .mk-products small { font-size: .7em; opacity: .7; }
.mk-wein .mk-products em { font-style: normal; font-size: .85em; font-weight: 800; color: #5A1428; }
.mk.mk-alt-wein { background: #f2f2bd; }
.mk-alt-wein .mk-alt-bar { background: linear-gradient(#7A1F33, #4A0F1E); color: #ffff66; }
.mk-alt-wein .mk-alt-side { background: #e3e3a8; border-color: #b8b87c; }
.mk-alt-wein .mk-alt-w { color: #7A1F33; }

/* ---------- Korrekturen ---------- */
.facts .facts-ico { display: grid; place-items: center; }
.facts .facts-ico svg { display: block; margin: 0; }
.note-box p { max-width: none; }

/* ==========================================================================
   Grafiken neben den Überschriften (.g)
   Grundzustand = Endzustand; „.js .g:not(.is-in)“ ist der Ausgangspunkt der
   Bewegung. Ohne JavaScript oder mit reduzierter Bewegung steht alles fertig.
   ========================================================================== */
.g { position: relative; margin: 0; width: 100%; max-width: 32rem; justify-self: center; }

/* Aus einer Hand */
.g-hand { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; padding: .5rem; }
.g-hand::before { content: ""; position: absolute; left: 50%; top: 50%; width: 70%; aspect-ratio: 1; border-radius: 50%; border: 2px dashed var(--blue-200); transform: translate(-50%, -50%); animation: drehen 40s linear infinite; }
@keyframes drehen { to { transform: translate(-50%, -50%) rotate(360deg); } }
.gh-tile { position: relative; z-index: 1; display: flex; flex-direction: column; gap: .7rem; min-height: 10.5rem; padding: 1rem; border-radius: 16px; background: var(--white); border: 1.5px solid var(--line); box-shadow: var(--shadow); overflow: hidden; }
.gh-label { display: flex; align-items: center; gap: .45rem; font-family: var(--mono); font-size: .66rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.gh-label i { font-style: normal; color: var(--blue-700); }
.gh-wire { display: grid; gap: .4rem; padding: .6rem; border-radius: 8px; background: var(--sand); width: 82%; }
.gh-wnav { display: flex; gap: .25rem; align-items: center; }
.gh-wnav b { width: 1.4rem; height: .4rem; border-radius: 2px; background: var(--akzent); margin-right: auto; }
.gh-wnav i { width: .8rem; height: .3rem; border-radius: 2px; background: #cfcfca; }
.gh-aa { font-weight: 800; font-size: 1.6rem; line-height: 1; letter-spacing: -0.05em; color: var(--heading); }
.gh-sw { display: flex; gap: .25rem; }
.gh-sw i { width: .9rem; height: .9rem; border-radius: 4px; background: var(--blue-700); }
.gh-sw i:nth-child(2) { background: var(--blue-300); } .gh-sw i:nth-child(3) { background: var(--navy); } .gh-sw i:nth-child(4) { background: #e4e4e0; }
.gh-ln { height: .3rem; border-radius: 2px; background: #d9d9d4; width: 90%; } .gh-ln.s { width: 60%; }
.gh-pen { position: absolute; right: 12%; top: 38%; width: 1.5rem; height: 1.5rem; color: var(--blue-700); transform: rotate(8deg); animation: stift 4s ease-in-out infinite; }
@keyframes stift { 50% { transform: translate(-.4rem, .3rem) rotate(-4deg); } }
.gh-code { background: var(--navy); border-color: var(--navy); }
.gh-code .gh-label { color: rgba(255,255,255,.6); }
.gh-code .gh-label i { color: var(--blue-300); }
.gh-code pre { margin: 0; font-family: var(--mono); font-size: .64rem; line-height: 1.65; color: #d5e0ea; white-space: pre; overflow: hidden; }
.gh-code .t { color: #8cc2f0; } .gh-code .p { color: #4fd1ae; } .gh-code .k { color: #a9c6e3; } .gh-code .n { color: #9fd8b4; }
.gh-code .caret { display: inline-block; width: .45em; height: 1.1em; margin-left: .15em; vertical-align: -.2em; background: var(--blue-300); animation: blinken 1s steps(1) infinite; }
@keyframes blinken { 50% { opacity: 0; } }
.gh-host { background: linear-gradient(160deg, var(--white), var(--blue-50)); }
.gh-rack { display: grid; gap: .35rem; }
.gh-rack > span { display: flex; align-items: center; gap: .3rem; padding: .4rem .5rem; border-radius: 6px; background: var(--white); border: 1px solid var(--line); }
.gh-rack i { width: .4rem; height: .4rem; border-radius: 50%; background: var(--green); animation: blinken 1.6s steps(1) infinite; }
.gh-rack > span:nth-child(2) i { animation-delay: .5s; } .gh-rack > span:nth-child(3) i { animation-delay: 1.1s; }
.gh-rack b { flex: 1; height: .3rem; margin-left: .3rem; border-radius: 2px; background: repeating-linear-gradient(90deg, #d9d9d4 0 .3rem, transparent .3rem .45rem); }
.gh-badges { display: flex; gap: .35rem; flex-wrap: wrap; }
.gh-badges > span { display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .45rem; border-radius: 5px; font-family: var(--mono); font-size: .62rem; font-weight: 500; }
.gh-on { background: #e3f4ec; color: #1f7a50; } .gh-on i { width: .4rem; height: .4rem; border-radius: 50%; background: var(--green); }
.gh-ssl { background: var(--blue-100); color: var(--blue-800); } .gh-ssl svg { width: .7rem; height: .7rem; }
.gh-talk { justify-content: flex-start; }
.gh-msg { max-width: 88%; padding: .45rem .65rem; font-size: .74rem; line-height: 1.35; border-radius: 10px 10px 10px 3px; background: var(--sand); color: var(--ink); }
.gh-msg.out { align-self: flex-end; display: inline-flex; align-items: center; gap: .3rem; border-radius: 10px 10px 3px 10px; background: var(--blue-700); color: var(--white); font-weight: 600; }
.gh-msg.out svg { width: .85rem; height: .85rem; }
.gh-hub { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: .25rem; width: 6.4rem; padding: .7rem .4rem .6rem; border-radius: 16px; background: var(--white); box-shadow: 0 18px 40px -16px rgba(15, 32, 51, .55), 0 0 0 6px rgba(255,255,255,.8); text-align: center; }
.gh-mark { width: 2rem; height: 2rem; color: var(--blue-700); }
.gh-hub b { font-size: .64rem; line-height: 1.2; letter-spacing: 0; color: var(--heading); }
.gh-design { padding-bottom: 2.2rem; } .gh-talk .gh-label { justify-content: flex-end; } .gh-talk { padding-top: 1rem; }
.js .g-hand:not(.is-in) .gh-tile { opacity: 0; transform: scale(.94); }
.g-hand .gh-tile { transition: opacity .6s, transform .6s cubic-bezier(.2,.7,.2,1); }
.g-hand .gh-tile:nth-child(2) { transition-delay: .12s; } .g-hand .gh-tile:nth-child(3) { transition-delay: .24s; } .g-hand .gh-tile:nth-child(4) { transition-delay: .36s; }
.js .g-hand:not(.is-in) .gh-hub { transform: translate(-50%, -50%) scale(.6); opacity: 0; }
.g-hand .gh-hub { transition: transform .6s .5s cubic-bezier(.3,1.5,.5,1), opacity .4s .5s; }

/* Beleg (Preise) */
.g-bon { display: grid; place-items: center; padding: 1rem 2rem 1.5rem; filter: drop-shadow(0 22px 26px rgba(15, 32, 51, .22)); }
.bon { --z: 9px; position: relative; width: min(100%, 21rem); padding: 1.4rem 1.4rem 2.2rem; background: var(--white); transform: rotate(2.5deg); font-family: var(--mono); font-size: .78rem; color: var(--ink);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--z)) 100%; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--z)) 100%; }
.bon-head { display: flex; align-items: center; gap: .7rem; padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1.5px dashed #cfcfca; }
.bon-mark { width: 2.1rem; height: 2.1rem; color: var(--blue-700); flex: none; }
.bon-head b { display: block; font-family: var(--font); font-weight: 800; font-size: 1.05rem; letter-spacing: -0.03em; }
.bon-head small { display: block; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.bon-rows { list-style: none; display: grid; gap: .65rem; }
.bon-rows li { display: grid; grid-template-columns: auto minmax(1rem, 1fr) auto; gap: .1rem .45rem; align-items: baseline; }
.bon-rows i { border-bottom: 2px dotted #cfcfca; transform: translateY(-.25em); }
.bon-rows b { font-weight: 500; color: var(--heading); white-space: nowrap; }
.bon-rows small { grid-column: 3; text-align: right; font-size: .64rem; color: var(--ink-soft); }
.bon-zero { margin-top: .4rem; padding-top: .8rem; border-top: 1.5px dashed #cfcfca; }
.bon-zero b { color: var(--green); }
.bon-code { display: block; height: 2.2rem; margin-top: 1.4rem; background: repeating-linear-gradient(90deg, var(--heading) 0 2px, transparent 2px 4px, var(--heading) 4px 5px, transparent 5px 8px, var(--heading) 8px 11px, transparent 11px 12px); opacity: .85; }
.bon-stamp { position: absolute; right: 0; top: 7%; padding: .35rem .8rem; border: 3px solid var(--blue-700); border-radius: 8px; color: var(--blue-700); font-family: var(--mono); font-size: .9rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; transform: rotate(-14deg); background: rgba(255,255,255,.7); transition: transform .45s .5s cubic-bezier(.3,1.6,.5,1), opacity .3s .5s; }
.js .g-bon:not(.is-in) .bon-stamp { transform: rotate(-14deg) scale(1.8); opacity: 0; }

/* Projektplan (Ablauf) */
.plan { width: min(100%, 26rem); margin-inline: auto; border-radius: 16px; background: var(--white); border: 1.5px solid var(--line); box-shadow: var(--shadow-l); overflow: hidden; }
.plan-top { display: flex; align-items: center; gap: .7rem; padding: .7rem 1rem; background: var(--sand); border-bottom: 1px solid var(--line); }
.plan-title { font-weight: 700; font-size: .88rem; }
.plan-url { margin-left: auto; font-family: var(--mono); font-size: .68rem; color: var(--ink-soft); }
.plan-progress { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.1rem .4rem; }
.plan-progress > span { flex: 1; height: .5rem; border-radius: 99px; background: var(--blue-100); overflow: hidden; }
.plan-progress i { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue-700), var(--blue-500)); transition: width 2.2s .2s cubic-bezier(.5,0,.3,1); }
.plan-progress b { font-family: var(--mono); font-size: .74rem; font-weight: 500; color: var(--blue-700); }
.js .g-plan:not(.is-in) .plan-progress i { width: 0; }
.plan-steps { list-style: none; padding: .4rem 1.1rem .6rem; }
.plan-steps li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .8rem; align-items: center; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.plan-steps li:last-child { border-bottom: 0; }
.plan-check { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 7px; background: var(--blue-700); color: var(--white); transition: background-color .35s, color .35s; transition-delay: calc(var(--i) * .45s + .5s); }
.plan-check svg { width: 1rem; height: 1rem; }
.plan-name b { display: block; font-size: .9rem; line-height: 1.25; }
.plan-name small { display: block; font-family: var(--mono); font-size: .64rem; color: var(--ink-soft); }
.plan-steps em { font-style: normal; font-family: var(--mono); font-size: .62rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; padding: .18rem .45rem; border-radius: 5px; background: #e3f4ec; color: #1f7a50; transition: opacity .35s, transform .35s; transition-delay: calc(var(--i) * .45s + .55s); }
.js .g-plan:not(.is-in) .plan-check { background: var(--blue-100); color: transparent; }
.js .g-plan:not(.is-in) .plan-steps em { opacity: 0; transform: translateX(6px); }
.plan-live { display: flex; align-items: center; gap: .6rem; margin: 0 1.1rem 1.1rem; padding: .7rem .9rem; border-radius: 10px; background: var(--navy); color: rgba(255,255,255,.85); font-size: .82rem; transition: opacity .5s 2.3s, transform .5s 2.3s; }
.plan-live b { color: var(--white); font-family: var(--mono); font-weight: 500; font-size: .76rem; }
.plan-live i { width: .55rem; height: .55rem; border-radius: 50%; background: #4fd391; animation: puls 2s infinite; flex: none; }
.js .g-plan:not(.is-in) .plan-live { opacity: 0; transform: translateY(8px); }

/* Mietmonate */
.g-months { padding: clamp(1.1rem, 3vw, 1.6rem); border-radius: 18px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); max-width: 34rem; }
.mo-head { display: flex; justify-content: space-between; margin-bottom: .6rem; font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.mo-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .3rem; }
.mo-grid span { display: grid; place-items: center; aspect-ratio: 1; border-radius: 6px; background: var(--white); color: var(--blue-800); font-family: var(--mono); font-size: clamp(.5rem, .4rem + .3vw, .66rem); font-weight: 500; transition: background-color .3s, color .3s, transform .3s; transition-delay: calc(var(--i) * 45ms + .4s); }
.js .ro-panel:not(.is-in) .mo-grid span { background: rgba(255,255,255,.12); color: transparent; transform: scale(.85); }
.mo-key { display: flex; align-items: center; gap: .9rem; margin-top: 1rem; padding: .8rem 1rem; border-radius: 12px; background: var(--navy); transition: opacity .5s 1.6s, transform .5s 1.6s; }
.js .ro-panel:not(.is-in) .mo-key { opacity: 0; transform: translateY(8px); }
.mo-key-ico { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 10px; background: var(--akzent); color: var(--akzent-text); flex: none; }
.mo-key-ico svg { width: 1.3rem; height: 1.3rem; }
.mo-key b { display: block; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.03em; color: var(--white); line-height: 1.1; }
.mo-key small { display: block; font-family: var(--mono); font-size: .66rem; color: rgba(255,255,255,.7); }
.mo-sum { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .55rem; margin-top: 1rem; font-family: var(--mono); font-size: .76rem; color: rgba(255,255,255,.85); }
.mo-sum b { color: var(--white); font-weight: 500; }
.mo-op { color: var(--blue-300); }
.mo-own { padding: .2rem .55rem; border-radius: 6px; background: var(--white); color: var(--blue-800); font-weight: 500; }

/* Visitenkarte (Haltung) */
.g-card { display: grid; place-items: center; padding: 2.5rem 1.5rem 3rem; }
.card-back { position: absolute; width: min(82%, 23rem); aspect-ratio: 1.62; border-radius: 16px; background: var(--band); transform: rotate(6deg) translate(6%, 4%); box-shadow: var(--shadow); }
.card-back::after { content: ""; position: absolute; right: 1.2rem; bottom: 1.1rem; width: 2.4rem; height: 2.4rem; border-radius: 9px; border: 2px solid rgba(255,255,255,.35); }
.card { position: relative; width: min(86%, 24rem); aspect-ratio: 1.62; padding: 1.3rem 1.4rem; border-radius: 16px; background: var(--white); box-shadow: var(--shadow-l), 0 0 0 1px rgba(15, 32, 51, .06); transform: rotate(-3deg); display: flex; flex-direction: column; overflow: hidden; }
.card-top { display: flex; align-items: center; gap: .55rem; }
.card-mark { width: 1.7rem; height: 1.7rem; color: var(--blue-700); flex: none; }
.card-top b { display: block; font-weight: 800; font-size: .95rem; letter-spacing: -0.03em; line-height: 1.1; }
.card-top small { display: block; font-family: var(--mono); font-size: .54rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.card-name { margin: auto 0 .05rem; font-weight: 800; font-size: 1.3rem; letter-spacing: -0.035em; color: var(--heading); line-height: 1.1; }
.card-role { margin: 0 0 .6rem; font-family: var(--mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-700); }
.card-info { list-style: none; display: grid; gap: .2rem; font-size: .74rem; color: var(--ink-soft); }
.card-info li { display: flex; align-items: center; gap: .4rem; min-width: 0; overflow-wrap: anywhere; }
.card-info svg { width: .85rem; height: .85rem; color: var(--blue-700); flex: none; }
.card-sig { position: absolute; right: 1rem; top: 3.6rem; width: 40%; height: auto; }
.card-sig path { fill: none; stroke: var(--blue-700); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.js .g-card.is-in .card-sig path { animation: unterschrift 2.4s .5s ease-in-out both; }
@keyframes unterschrift { from { stroke-dasharray: 500; stroke-dashoffset: 500; } to { stroke-dasharray: 500; stroke-dashoffset: 0; } }
.card-stamp { position: absolute; right: 3%; bottom: 3%; display: grid; place-items: center; width: 5.6rem; height: 5.6rem; border-radius: 50%; border: 2px dashed var(--blue-700); background: rgba(246,246,244,.9); color: var(--blue-700); font-family: var(--mono); font-size: .62rem; font-weight: 500; letter-spacing: .08em; line-height: 1.35; text-align: center; text-transform: uppercase; transform: rotate(-12deg); }

/* Shop (Zusatzangebot) */
.g-shop { max-width: 36rem; padding: 2.2rem 0 3rem 0; }
.shop { width: 86%; border-radius: 14px; overflow: hidden; background: var(--white); color: var(--ink); box-shadow: 0 40px 80px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.1); }
.shop-bar { display: flex; align-items: center; gap: .7rem; padding: .5rem .8rem; background: var(--sand); border-bottom: 1px solid var(--line); }
.shop-url { flex: 1; text-align: center; padding: .15rem .6rem; border-radius: 6px; background: var(--white); border: 1px solid var(--line); font-family: var(--mono); font-size: .66rem; color: var(--ink-soft); }
.shop-body { padding: .9rem 1rem 1.1rem; }
.shop-nav { display: flex; align-items: center; gap: .9rem; font-size: .72rem; color: var(--ink-soft); }
.shop-nav b { display: inline-flex; align-items: center; gap: .35rem; margin-right: auto; font-size: .9rem; font-weight: 800; letter-spacing: -0.03em; color: var(--heading); }
.shop-nav b i { width: .8rem; height: .8rem; border-radius: 4px; background: var(--blue-700); }
.shop-cart { position: relative; color: var(--heading); }
.shop-cart svg { width: 1.15rem; height: 1.15rem; }
.shop-cart em { position: absolute; right: -.45rem; top: -.4rem; display: grid; place-items: center; width: .95rem; height: .95rem; border-radius: 50%; background: #d24f6b; color: var(--white); font-style: normal; font-size: .55rem; font-weight: 700; }
.shop-chips { display: flex; gap: .3rem; margin: .8rem 0; }
.shop-chips i { font-style: normal; padding: .2rem .55rem; border-radius: 6px; font-size: .64rem; border: 1px solid var(--line); color: var(--ink-soft); }
.shop-chips i.on { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-text); }
.shop-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.prod { display: grid; gap: .3rem; min-width: 0; }
.prod-img { display: grid; place-items: center; aspect-ratio: 1; border-radius: 10px; }
.prod-img svg { width: 62%; height: auto; }
.p1 .prod-img { background: linear-gradient(150deg, #3d7cb8, #245e93); }
.p2 .prod-img { background: linear-gradient(150deg, #8a6fc4, #5a3a9a); }
.p3 .prod-img { background: linear-gradient(150deg, #ef8aa0, #c94a66); }
.prod b { font-size: .7rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prod-row { display: flex; align-items: center; justify-content: space-between; }
.prod-row em { font-style: normal; font-family: var(--mono); font-size: .64rem; color: var(--ink-soft); }
.prod-row i { display: grid; place-items: center; width: 1.2rem; height: 1.2rem; border-radius: 5px; background: var(--blue-700); color: var(--white); font-style: normal; font-size: .8rem; font-weight: 700; line-height: 1; }
.shop-cartpanel { position: absolute; right: 0; bottom: 0; width: 46%; padding: 1rem; border-radius: 14px; background: var(--white); color: var(--ink); box-shadow: 0 30px 60px -20px rgba(0,0,0,.7); font-size: .74rem; transition: opacity .6s .3s, transform .6s .3s cubic-bezier(.2,.7,.2,1); }
.shop-cartpanel > b { display: block; font-size: .9rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: .6rem; }
.shop-cartpanel ul { list-style: none; display: grid; gap: .45rem; padding-bottom: .6rem; border-bottom: 1px dashed #cfcfca; }
.shop-cartpanel li { display: flex; align-items: center; gap: .45rem; }
.shop-cartpanel li em { margin-left: auto; font-style: normal; font-family: var(--mono); font-size: .66rem; }
.shop-cartpanel .dot { width: 1.4rem; height: 1.4rem; border-radius: 6px; flex: none; }
.shop-cartpanel .d1 { background: linear-gradient(150deg, #3d7cb8, #245e93); } .shop-cartpanel .d2 { background: linear-gradient(150deg, #8a6fc4, #5a3a9a); }
.shop-cartpanel .sum { display: flex; justify-content: space-between; margin: .6rem 0 .7rem; font-weight: 700; }
.shop-cartpanel .sum b { font-family: var(--mono); }
.checkout { display: block; text-align: center; padding: .5rem; border-radius: 8px; background: var(--blue-700); color: var(--white); font-weight: 700; }
.shop-toast { position: absolute; right: 2%; top: 0; display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; border-radius: 12px; background: var(--white); color: var(--ink); box-shadow: 0 20px 40px -16px rgba(0,0,0,.6); transition: opacity .6s .9s, transform .6s .9s cubic-bezier(.2,.7,.2,1); }
.toast-ico { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 8px; background: #e3f4ec; color: #1f7a50; flex: none; }
.toast-ico svg { width: 1.1rem; height: 1.1rem; }
.shop-toast b { display: block; font-size: .78rem; }
.shop-toast small { display: block; font-family: var(--mono); font-size: .62rem; color: var(--ink-soft); }
.shop-pills { position: absolute; left: 4%; bottom: .4rem; display: flex; gap: .4rem; transition: opacity .6s 1.3s; }
.shop-pills span { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .6rem; border-radius: 7px; background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); color: var(--white); font-family: var(--mono); font-size: .64rem; backdrop-filter: blur(6px); }
.shop-pills i { width: .45rem; height: .45rem; border-radius: 50%; background: #4fd391; }
.js .g-shop:not(.is-in) .shop-cartpanel { opacity: 0; transform: translate(1.5rem, 1rem); }
.js .g-shop:not(.is-in) .shop-toast { opacity: 0; transform: translateY(-1rem); }
.js .g-shop:not(.is-in) .shop-pills { opacity: 0; }
@media (max-width: 520px) { .shop { width: 100%; } .shop-cartpanel { width: 58%; bottom: -1.5rem; } .g-shop { padding-bottom: 4rem; } .shop-pills { display: none; } }

/* ==========================================================================
   Eingebaute Website-Ansichten (1em = Breite / 64, Höhe 40em)
   ========================================================================== */
.mk { position: absolute; inset: 0; font-size: calc(100cqw / 64); line-height: 1.25; overflow: hidden; }
.mk b, .mk strong { font-weight: inherit; }
.mk-nav { display: flex; align-items: center; justify-content: space-between; gap: 2em; padding: 1.5em 3em; }
.mk-logo { display: flex; align-items: center; gap: .45em; font-size: 1.5em; font-weight: 700; }
.mk-logo i { width: .9em; height: .9em; border-radius: 50%; background: currentColor; }
.mk-logo svg { width: 1.2em; height: 1.2em; }
.mk-links { display: flex; gap: 2em; font-size: .92em; opacity: .78; }
.mk-links i { font-style: normal; }
.mk-btn, .mk-cta, .mk-cta2 { display: inline-block; padding: .75em 1.4em; border-radius: 99em; font-size: .9em; font-weight: 700; white-space: nowrap; }
.mk-ctas { display: flex; gap: .8em; margin-top: 1.4em; }
.mk-p { display: block; font-size: 1em; line-height: 1.45; max-width: 25em; opacity: .82; }
.mk-h { display: block; }

/* Bäckerei Kornblume */
.mk-korn { background: #eef2fb; color: #1f2f5c; font-family: var(--font); }
.mk-korn .mk-top { display: flex; justify-content: space-between; padding: .55em 3.4em; background: #1f2f5c; color: #eef2fb; font-size: .78em; letter-spacing: .02em; }
.mk-korn .mk-top span { opacity: .75; }
.mk-korn .mk-nav { padding: 1.2em 3em; }
.mk-korn .mk-logo { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 700; color: #1f2f5c; }
.mk-korn .mk-logo svg { color: #4a6fd1; }
.mk-korn .mk-btn, .mk-korn .mk-cta { background: #1f2f5c; color: #eef2fb; }
.mk-korn .mk-cta2 { box-shadow: inset 0 0 0 .12em #1f2f5c; }
.mk-korn .mk-hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 3em; align-items: start; padding: .8em 3em 0; }
.mk-korn .mk-kick { display: block; font-size: .78em; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: #3c5bb0; }
.mk-korn .mk-h { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 4.2em; line-height: .98; letter-spacing: -.02em; margin: .2em 0 .3em; }
.mk-korn .mk-h em { font-style: italic; color: #4a6fd1; background: none; padding: 0; white-space: normal; }
.mk-rating { display: flex; align-items: center; gap: .6em; margin-top: 1.3em; font-size: .8em; opacity: .85; }
.mk-rating i { font-style: normal; color: #4a6fd1; letter-spacing: .1em; }
.mk-visual { position: relative; }
.mk-arch { position: relative; display: block; height: 21em; border-radius: 50% 50% 1.2em 1.2em / 36% 36% 1.2em 1.2em; overflow: hidden; background: radial-gradient(circle at 30% 22%, rgba(255,255,255,.85), transparent 36%), radial-gradient(circle at 78% 84%, #1f2f5c, transparent 55%), linear-gradient(165deg, #9fb4ea, #4a6fd1 55%, #1f2f5c); }
.mk-loaf { position: absolute; left: 12%; right: 18%; top: 42%; height: 28%; border-radius: 50% 50% 40% 40% / 70% 70% 30% 30%; background: linear-gradient(#c94f8a, #a8326e); box-shadow: inset 0 -.6em 0 rgba(90,20,60,.35), 0 .8em 1.2em rgba(20,30,70,.35); }
.mk-loaf::after { content: ""; position: absolute; left: 20%; right: 20%; top: 26%; height: 18%; border-top: .3em solid rgba(255,255,255,.85); border-radius: 50%; }
.mk-loaf.l2 { left: 44%; right: 6%; top: 62%; height: 22%; background: linear-gradient(#7a5bc0, #5a3a9a); }
.mk-stamp { position: absolute; top: -1em; right: -1em; width: 5.6em; height: 5.6em; border-radius: 50%; background: #4a6fd1; color: #eef2fb; display: grid; place-items: center; text-align: center; font-family: Georgia, serif; font-style: italic; font-size: .9em; line-height: 1.1; transform: rotate(-12deg); box-shadow: 0 .6em 1.2em rgba(31,47,92,.3); }
.mk-float { position: absolute; left: -3.5em; bottom: 1.6em; display: grid; gap: .1em; padding: .8em 1.1em; border-radius: .9em; background: #fff; box-shadow: 0 1em 2em -.6em rgba(31,47,92,.45); }
.mk-float small { font-size: .62em; letter-spacing: .14em; text-transform: uppercase; color: #3c5bb0; font-weight: 700; }
.mk-float b { font-size: .95em; font-weight: 700; }
.mk-float em { font-style: normal; font-size: .85em; color: #4a6fd1; font-weight: 700; }
.mk-products { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1em; padding: 1.2em 3em 1.4em; background: #dde5f6; }
.mk-products > span { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .8em; align-items: center; padding: .6em .8em; border-radius: .9em; background: #f6f8fd; }
.mk-products i { grid-row: span 2; width: 3.4em; height: 3.4em; border-radius: 50%; background: #eef2fb; display: grid; place-items: center; }
.mk-products svg { width: 82%; }
.mk-products b { font-size: .88em; font-weight: 700; align-self: end; white-space: nowrap; }
.mk-products em { font-style: normal; font-size: .82em; color: #3c5bb0; font-weight: 700; align-self: start; }

/* Praxis Bewegungsraum */
.mk-praxis { background: #F6FAF8; color: #0F4C44; font-family: var(--font); }
.mk-praxis .mk-logo { font-weight: 800; letter-spacing: -.03em; }
.mk-praxis .mk-logo i { background: conic-gradient(#FF7A59 0 25%, #0F4C44 0 100%); }
.mk-praxis .mk-btn, .mk-praxis .mk-cta { background: #0F4C44; color: #fff; }
.mk-praxis .mk-cta2 { box-shadow: inset 0 0 0 .12em #0F4C44; }
.mk-praxis .mk-hero { display: grid; grid-template-columns: 1.25fr .75fr; gap: 2.6em; align-items: center; margin: 0 2em; padding: 2.2em 2.6em; border-radius: 2em; background: #DCEFE7; }
.mk-stars { display: inline-block; background: #fff; border-radius: 99em; padding: .4em .9em; font-size: .78em; font-weight: 700; color: #a8326e; }
.mk-praxis .mk-h { font-size: 4em; font-weight: 800; letter-spacing: -.045em; line-height: .98; margin: .3em 0 .35em; }
.mk-praxis .mk-h span { color: #FF7A59; }
.mk-team { display: flex; align-items: center; margin-top: 1.3em; }
.mk-team i { width: 2.1em; height: 2.1em; border-radius: 50%; border: .18em solid #DCEFE7; margin-left: -.5em; background: radial-gradient(circle at 50% 38%, #ffffff 0 26%, transparent 27%), radial-gradient(circle at 50% 100%, #0F4C44 0 45%, transparent 46%), #BFDCD1; }
.mk-team i:first-child { margin-left: 0; }
.mk-team i:nth-child(2) { background-color: #f6d6e6; } .mk-team i:nth-child(3) { background-color: #D6E4F5; } .mk-team i:nth-child(4) { background-color: #e6e0f6; }
.mk-team small { margin-left: .8em; font-size: .75em; opacity: .85; }
.mk-book { background: #fff; border-radius: 1.4em; padding: 1.3em; box-shadow: 0 1.2em 2.4em -1.2em rgba(15,76,68,.4); display: grid; gap: .8em; }
.mk-book strong { font-size: 1.05em; font-weight: 800; }
.mk-sel { font-size: .72em; padding: .55em .8em; border-radius: .6em; background: #F0F6F3; }
.mk-days, .mk-slots { display: grid; gap: .4em; }
.mk-days { grid-template-columns: repeat(5, 1fr); } .mk-slots { grid-template-columns: repeat(3, 1fr); }
.mk-days i, .mk-slots i { font-style: normal; text-align: center; font-size: .66em; border: 1px solid #CFE3DB; border-radius: .7em; padding: .45em 0; }
.mk-days i b { display: block; font-size: 1.5em; font-weight: 800; }
.mk-days i.on { background: #0F4C44; color: #fff; border-color: #0F4C44; }
.mk-slots i.on { background: #FF7A59; border-color: #FF7A59; color: #fff; font-weight: 700; }
.mk-slots i.off { opacity: .35; text-decoration: line-through; }
.mk-book .mk-cta { text-align: center; font-size: .8em; }
.mk-cards { position: absolute; left: 2em; right: 2em; bottom: 1.4em; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2em; }
.mk-cards > span { display: grid; grid-template-columns: auto 1fr; column-gap: .8em; align-items: center; padding: .9em 1.1em; border-radius: 1em; background: #fff; box-shadow: 0 .6em 1.4em -.8em rgba(15,76,68,.35); }
.mk-cards i { grid-row: span 2; width: 2.6em; height: 2.6em; border-radius: .7em; }
.mk-cards .c1 { background: radial-gradient(circle at 50% 50%, #fff 0 18%, transparent 19%), #FF7A59; }
.mk-cards .c2 { background: linear-gradient(135deg, transparent 40%, #fff 40% 60%, transparent 60%), #0F4C44; }
.mk-cards .c3 { background: radial-gradient(circle at 30% 70%, #fff 0 14%, transparent 15%), radial-gradient(circle at 70% 30%, #fff 0 14%, transparent 15%), #7BC4A8; }
.mk-cards b { font-size: .9em; font-weight: 800; align-self: end; }
.mk-cards small { font-size: .72em; opacity: .75; align-self: start; }

/* Zimmerei Holzwerk Nord */
.mk-house { width: 100%; height: auto; }

/* Alte Websites */
.mk-alt { background: #C9C9C9; color: #000; font-family: "Times New Roman", Times, serif; }
.mk-alt-bar { display: flex; align-items: center; gap: .6em; padding: .6em 1em; background: linear-gradient(#5B7DB8, #2D4E8A); color: #FFFF66; font-weight: 700; font-size: 1.7em; text-shadow: .08em .08em 0 #000; }
.mk-alt-clip { width: 1.2em; height: 1.2em; border-radius: 50%; background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red); flex: none; }
.mk-alt-marquee { overflow: hidden; white-space: nowrap; padding: .35em 0; background: #FFFF99; color: #C00000; font-weight: 700; font-size: 1em; border-bottom: .15em solid #999; }
.mk-alt-marquee span { display: inline-block; padding-left: 100%; animation: lauftext 14s linear infinite; }
@keyframes lauftext { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .mk-alt-marquee span { animation: none; padding-left: 1.2em; } }
.mk-alt-foot { position: absolute; left: 1.2em; bottom: 1.3em; display: flex; align-items: center; gap: 1.2em; font-size: .85em; font-style: italic; opacity: .85; }
.mk-alt-gb { padding: .35em .8em; background: #E0E0E0; border: .18em outset #fff; color: #000; font-style: normal; font-family: Arial, sans-serif; font-weight: 700; font-size: .95em; }
.mk-alt-body { display: grid; grid-template-columns: 12em 1fr; gap: 1.2em; padding: 1.2em; }
.mk-alt-side { display: grid; gap: .45em; align-content: start; background: #ECECEC; border: .2em outset #bbb; padding: .9em; }
.mk-alt-side u, .mk-alt-lnk { color: #0000EE; font-size: 1.05em; }
.mk-alt-ie { margin-top: .8em; font-size: .68em; font-style: italic; color: #555; line-height: 1.3; }
.mk-alt-main { display: grid; gap: .9em; align-content: start; }
.mk-alt-w { text-align: center; color: #B00; font-weight: 700; font-size: 2.5em; font-family: "Comic Sans MS", "Comic Sans", cursive; }
.mk-alt-txt { font-size: 1.05em; line-height: 1.35; text-align: center; }
.mk-alt-tbl { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6em; }
.mk-alt-tbl i { position: relative; height: 7.5em; background: #F3F3F3; border: .2em inset #aaa; }
.mk-alt-tbl em { position: absolute; left: .4em; top: .4em; display: grid; place-items: center; width: 1.3em; height: 1.3em; border: 1px solid #999; background: #fff; color: #D00; font-style: normal; font-family: Arial, sans-serif; font-size: .8em; font-weight: 700; }
.mk-alt-lnk { text-align: center; text-decoration: underline; }
.mk-alt-cnt { position: absolute; right: 1.4em; bottom: 1.2em; background: #000; color: #0F0; font-family: "Courier New", monospace; padding: .2em .6em; font-size: 1.05em; border: .15em inset #666; }
.mk-alt-praxis { background: #fff; font-family: Arial, Helvetica, sans-serif; }
.mk-alt-praxis .mk-alt-bar { background: #008080; color: #fff; text-shadow: none; font-size: 1.5em; }
.mk-alt-praxis .mk-alt-side { background: #E0F0F0; border-color: #9cc; }
.mk-alt-praxis .mk-alt-w { font-family: Arial, sans-serif; color: #F00; animation: blinken 1.2s steps(1) infinite; }
.mk-alt-praxis .mk-alt-txt { text-align: left; font-size: .95em; }

/* Handy (1em = Breite / 20) */

/* ---------- Google-Profil (Baustein google_profil, Klassen gp-) ----------
   Die --gp-*-Werte zeigen auf die Farben des Themas. */
.gp {
  --gp-accent: var(--blue-700); --gp-accent-soft: var(--blue-100); --gp-text: var(--heading); --gp-muted: var(--ink-soft);
  --gp-line: var(--line); --gp-card: var(--white); --gp-bg: var(--blue-50); --gp-ok: var(--green); --gp-star: var(--akzent-dunkel);
  background: var(--gp-bg);
}
.gp .section-head { margin-bottom: clamp(1.8rem, 4vw, 2.6rem); }
.gp-grid { display: grid; gap: 2.4rem; align-items: start; }
@media (min-width: 900px) { .gp-grid { grid-template-columns: 1.1fr .9fr; gap: 3rem; } }
.gp-list { list-style: none; display: grid; gap: 1.2rem 1.6rem; }
@media (min-width: 560px) { .gp-list { grid-template-columns: 1fr 1fr; } }
.gp-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .8rem; align-items: start; }
.gp-ico { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 10px; background: var(--gp-accent-soft); color: var(--gp-accent); flex: none; }
.gp-ico svg { width: 1.2rem; height: 1.2rem; }
.gp-list h3 { font-size: 1.02rem; margin: .1rem 0 .25rem; }
.gp-list p { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--gp-muted); }
.gp-note { margin-top: 2.2rem; padding: 1rem 1.2rem; border-left: 3px solid var(--gp-accent); background: var(--gp-card); border-radius: 0 var(--r-s) var(--r-s) 0; font-size: .97rem; color: var(--gp-muted); }
.gp-note p { margin: 0; max-width: none; }
.gp-note strong { color: var(--gp-text); }
.gp-mock { position: relative; max-width: 26rem; width: 100%; justify-self: center; }
.gp-card { background: var(--gp-card); border: 1px solid var(--gp-line); border-radius: var(--r-l); box-shadow: var(--shadow); overflow: hidden; }
.gp-map { height: 6.5rem; position: relative; background:
  linear-gradient(90deg, transparent 48%, #fff 48%, #fff 52%, transparent 52%),
  linear-gradient(0deg, transparent 58%, #fff 58%, #fff 62%, transparent 62%),
  linear-gradient(35deg, transparent 70%, #fff 70%, #fff 73%, transparent 73%), #dfe9df; }
.gp-pin { position: absolute; left: 50%; top: 50%; width: 1.8rem; height: 1.8rem; transform: translate(-50%, -80%); color: var(--gp-accent); }
.gp-body { padding: 1.1rem 1.2rem 1.2rem; }
.gp-name { font-weight: 700; font-size: 1.1rem; margin: 0; color: var(--gp-text); }
.gp-rating { display: flex; align-items: center; gap: .4rem; font-size: .9rem; color: var(--gp-muted); margin: .25rem 0 .1rem; }
.gp-rating strong { color: var(--gp-text); }
.gp-stars { color: var(--gp-star); letter-spacing: 1px; }
.gp-open { font-size: .9rem; margin: 0 0 .9rem; }
.gp-open b { color: var(--gp-ok); }
.gp-actions { display: flex; gap: .5rem; margin-bottom: 1rem; }
.gp-actions span { flex: 1; text-align: center; font-size: .8rem; font-weight: 600; padding: .45rem .2rem; border-radius: 999px; border: 1px solid var(--gp-line); color: var(--gp-accent); }
.gp-review { border-top: 1px solid var(--gp-line); padding-top: .9rem; font-size: .88rem; line-height: 1.45; }
.gp-review .gp-stars { font-size: .8rem; }
.gp-reply { margin-top: .6rem; padding: .6rem .75rem; background: var(--gp-bg); border-radius: var(--r-s); color: var(--gp-muted); }
.gp-reply b { display: block; color: var(--gp-text); font-size: .8rem; margin-bottom: .1rem; }
.gp-toast { position: absolute; right: -.5rem; bottom: -1.1rem; display: flex; gap: .5rem; align-items: center; max-width: 16rem; padding: .6rem .9rem; border-radius: var(--r-m); background: var(--akzent); color: var(--akzent-text); font-size: .85rem; box-shadow: 0 10px 24px rgba(0, 0, 0, .18); }
.gp-toast i { font-style: normal; color: var(--akzent-text); }
@media (max-width: 560px) { .gp-toast { position: static; margin-top: .8rem; max-width: none; } }
.gp-prices { display: grid; gap: 1.3rem; margin-top: 3rem; }
@media (min-width: 760px) { .gp-prices { grid-template-columns: 1fr 1fr; } }
.gp-plan { position: relative; display: flex; flex-direction: column; padding: 1.7rem 1.6rem 1.5rem; background: var(--gp-card); border: 1.5px solid var(--gp-line); border-radius: var(--r-l); min-width: 0; }
.gp-plan--main { border: 2px solid var(--gp-accent); }
.gp-badge { position: absolute; top: -.8rem; left: 1.5rem; padding: .22rem .65rem; border-radius: 6px; background: var(--gp-accent); color: var(--white); font-family: var(--mono); font-size: .7rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.gp-plan h3 { margin: 0 0 .2rem; }
.gp-plan-sub { font-size: .93rem; color: var(--gp-muted); margin: 0 0 1rem; }
.gp-amount { font-weight: 800; font-size: clamp(2.1rem, 1.7rem + 1.4vw, 2.6rem); letter-spacing: -0.04em; line-height: 1; color: var(--gp-text); margin: 0; }
.gp-amount small { font-family: var(--mono); font-size: .78rem; font-weight: 400; letter-spacing: 0; color: var(--gp-muted); margin-left: .5rem; }
.gp-setup { font-size: .95rem; margin: .6rem 0 1.1rem; }
.gp-setup strong { color: var(--gp-accent); }
.gp-terms { margin: 0 0 1.4rem; flex: 1; }
.gp-plan .btn { margin-top: auto; align-self: stretch; }
.gp-fineprint { margin-top: 1.2rem; font-size: .93rem; color: var(--gp-muted); }
.gp-fineprint p, .gp-small p { max-width: none; }
.gp-fineprint strong { color: var(--gp-text); }
.gp-small { margin-top: .6rem; font-size: .85rem; color: var(--gp-muted); }

/* ---------- Zusatzleistungen (Klassen hx-: Extras, Paket-Rechner, Website-Check) ---------- */
.hx-small { font-size: .88rem; color: var(--ink-soft); }
.hx-small p { margin: 0 0 .4em; max-width: none; }
.hx-small p:last-child { margin-bottom: 0; }

/* Einstieg: zweiter, ruhiger Einstieg */
.hx-hero-check { margin: 1.1rem 0 0; }
.hx-hero-check a { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; min-height: 2.75rem; }
.hx-hero-check svg { width: 1.15rem; height: 1.15rem; flex: none; }

/* Preise: Zusatz an einer Karte, Streifen Paket Sichtbar */
.hx-card-note { margin: -.6rem 0 1.3rem; padding-top: .7rem; border-top: 1px dashed var(--line); font-size: .9rem; color: var(--ink-soft); }
.hx-card-note p { margin: 0; }
.price-card.is-hl .hx-card-note { border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.75); }
.price-card.is-hl .hx-card-note a { color: var(--blue-300); }
.hx-bundle { display: grid; gap: 1.2rem 2rem; align-items: center; margin-top: 2rem; padding: clamp(1.3rem, 3.5vw, 2rem); border-radius: var(--r-l); background: var(--band); color: rgba(255,255,255,.9); box-shadow: var(--shadow); }
@media (min-width: 820px) { .hx-bundle { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.hx-bundle h3 { color: var(--white); font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); margin-bottom: .4rem; }
.hx-bundle-text p { margin: 0; color: rgba(255,255,255,.9); }
.hx-bundle-price { display: grid; gap: .5rem; justify-items: start; }
@media (min-width: 820px) { .hx-bundle-price { justify-items: end; text-align: right; } }
.hx-bundle-amount { margin: 0; font-weight: 800; font-size: clamp(2rem, 1.6rem + 1.4vw, 2.6rem); letter-spacing: -0.04em; line-height: 1; color: var(--white); }
.hx-bundle-amount small { font-family: var(--mono); font-size: .78rem; font-weight: 400; letter-spacing: 0; color: rgba(255,255,255,.85); }
.hx-bundle-note { margin: 0; font-size: .9rem; color: rgba(255,255,255,.9); }
.hx-bundle-new { grid-column: 1 / -1; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.25); font-size: .95rem; }
.hx-bundle-new p { margin: 0; max-width: none; }
.hx-bundle a:not(.btn) { color: var(--white); }

/* Extras: Gruppen, Reiter, Karten (auf dunklem Grund) */
.hx-extras .section-head { margin-bottom: clamp(1.6rem, 4vw, 2.4rem); }
.hx-extras .section-head .lead, .hx-extras .section-head p { color: rgba(255,255,255,.82); }
.hx-tablist { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.6rem; padding: .35rem; border-radius: 14px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(169, 198, 227, .18); width: fit-content; max-width: 100%; }
.hx-tablist[hidden] { display: none; }
.hx-tab { min-height: 2.9rem; padding: .55rem 1.15rem; border: 0; border-radius: 10px; background: transparent; color: rgba(255,255,255,.85); font: inherit; font-weight: 650; cursor: pointer; }
.hx-tab:hover { color: var(--white); background: rgba(255,255,255,.08); }
.hx-tab[aria-selected="true"] { background: var(--akzent); color: var(--akzent-text); }
.hx-panel + .hx-panel { margin-top: 2.6rem; }
.hx-tabs.is-tabs .hx-panel + .hx-panel { margin-top: 0; }
.hx-tabs.is-tabs .hx-group-title { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hx-group-title { font-family: var(--mono); font-size: .82rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-300); margin-bottom: 1rem; }
.hx-panel:focus-visible { outline-color: var(--white); }
.hx-panel-grid { display: grid; gap: 2.4rem; align-items: start; }
@media (min-width: 1100px) { .hx-panel-grid.has-graphic { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }
.hx-panel-grid .g-shop { align-self: center; }
.hx-cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr)); }
.hx-card { display: flex; flex-direction: column; gap: .6rem; padding: 1.3rem 1.25rem 1.1rem; border-radius: var(--r-m); background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(169, 198, 227, .2); min-width: 0; }
.hx-card-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .8rem; align-items: center; }
.hx-card-ico { background: rgba(169, 198, 227, .12); color: var(--blue-300); box-shadow: inset 0 0 0 1px rgba(169, 198, 227, .2); }
.hx-card h4 { margin: 0; font-size: 1.06rem; line-height: 1.25; color: var(--white); letter-spacing: -0.01em; }
.hx-card-text p { margin: 0; font-size: .94rem; line-height: 1.5; color: rgba(255,255,255,.78); }
.hx-card-price { margin: 0; font-weight: 700; font-size: .95rem; line-height: 1.45; color: var(--white); }
.hx-details { border-top: 1px solid rgba(169, 198, 227, .2); }
.hx-details summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: .8rem; min-height: 2.8rem; padding: .35rem 0; font-weight: 600; font-size: .93rem; color: var(--blue-300); }
.hx-details summary::-webkit-details-marker { display: none; }
.hx-details .plus { width: 1.7rem; height: 1.7rem; border-radius: 7px; display: grid; place-items: center; background: rgba(169, 198, 227, .14); color: var(--blue-300); flex: none; transition: transform .25s; }
.hx-details .plus svg { width: .85rem; height: .85rem; }
.hx-details[open] .plus { transform: rotate(45deg); }
.hx-details .checklist { margin: .3rem 0 .8rem; font-size: .92rem; color: rgba(255,255,255,.85); }
.hx-details .hx-small { color: rgba(255,255,255,.72); margin-bottom: .8rem; }
.hx-card-links { display: flex; flex-wrap: wrap; gap: .1rem 1.2rem; margin: auto 0 0; font-size: .93rem; font-weight: 600; }
.hx-card-links a { color: var(--white); display: inline-flex; align-items: center; min-height: 2.75rem; }
.hx-card-links a:hover { color: var(--blue-300); }
.hx-extras-end { margin-top: 2.6rem; }
.hx-extras-end .extra-note { margin-bottom: 0; }

/* Paket-Rechner */
.hx-paket { background: var(--white); }
.hx-calc { display: grid; gap: 1.8rem; align-items: start; }
@media (min-width: 1000px) { .hx-calc { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 2.4rem; } .hx-summary { position: sticky; top: 5.6rem; } }
.hx-calc-form { display: grid; gap: 1.6rem; min-width: 0; }
.hx-step { margin: 0; padding: 0; border: 0; min-width: 0; }
.hx-step > legend { display: flex; align-items: center; gap: .7rem; padding: 0; margin-bottom: 1rem; font-weight: 750; font-size: 1.2rem; color: var(--heading); letter-spacing: -0.02em; }
.hx-step-no { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 8px; background: var(--blue-700); color: var(--white); font-family: var(--mono); font-size: .9rem; }
.hx-options { display: grid; gap: .6rem; }
.hx-opt { position: relative; display: block; cursor: pointer; }
.hx-opt input { position: absolute; left: 1.1rem; top: 1.25rem; width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--blue-700); }
.hx-opt-body { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem 1rem; padding: .95rem 1.1rem .95rem 2.9rem; border-radius: var(--r-m); border: 1.5px solid var(--line); background: var(--white); transition: border-color .2s, background-color .2s; }
.hx-opt:hover .hx-opt-body { border-color: var(--blue-500); }
.hx-opt input:checked + .hx-opt-body { border-color: var(--blue-700); background: var(--blue-50); box-shadow: inset 0 0 0 1px var(--blue-700); }
.hx-opt input:focus-visible + .hx-opt-body { outline: var(--focus); outline-offset: 2px; }
.hx-opt-name { font-weight: 650; color: var(--heading); }
.hx-opt-price { color: var(--ink-soft); font-size: .93rem; }
.hx-sub { margin: -.1rem 0 .2rem 2.9rem; }
.hx-sub[hidden] { display: none; }
.hx-group { margin: 0 0 1rem; padding: 1rem 1.1rem .6rem; border: 1.5px solid var(--line); border-radius: var(--r-m); min-width: 0; }
.hx-group > legend { padding: 0 .4rem; font-family: var(--mono); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-700); }
.hx-check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .7rem; align-items: start; padding: .5rem 0; cursor: pointer; line-height: 1.45; }
.hx-check input { width: 1.15rem; height: 1.15rem; margin: .18rem 0 0; accent-color: var(--blue-700); }
.hx-check .hx-opt-price { display: block; }
.hx-check-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .2rem 1.2rem; }
.hx-check-row .hx-check { flex: 1 1 16rem; }
.is-disabled { opacity: .6; }
.is-disabled .hx-check { cursor: not-allowed; }
.hx-opt-hint { display: block; font-size: .85rem; font-weight: 600; color: var(--ink); }
.hx-opt-hint[hidden] { display: none; }
.hx-number { display: inline-flex; align-items: center; gap: .6rem; padding: .35rem 0; font-size: .93rem; color: var(--ink-soft); }
.hx-number input { width: 4.5rem; min-height: 2.75rem; padding: .4rem .6rem; border-radius: 8px; border: 1.5px solid var(--line); font: inherit; color: var(--ink); background: var(--white); }
.hx-number input:disabled { opacity: .6; }
.hx-group-note { margin: .6rem 0 .1rem; font-size: .88rem; color: var(--ink-soft); }
.hx-custom { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 0 1rem; }
.hx-support { margin: .4rem 0 0; padding: .6rem 0 0; border: 0; border-top: 1px dashed var(--line); min-width: 0; }
.hx-support legend { padding: 0; font-weight: 650; font-size: .95rem; color: var(--heading); }
.hx-summary { padding: clamp(1.3rem, 3vw, 1.8rem); border-radius: var(--r-l); background: var(--sand); border: 1.5px solid var(--line); min-width: 0; }
.hx-summary:focus { outline: none; }
.hx-summary:focus-visible { outline: var(--focus); outline-offset: 3px; }
.hx-summary h3 { font-size: 1.25rem; margin-bottom: .9rem; }
.hx-sum-list { list-style: none; display: grid; gap: .55rem; margin-bottom: 1rem; }
.hx-sum-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .1rem 1rem; padding-bottom: .55rem; border-bottom: 1px solid #e2e2dc; font-size: .95rem; }
.hx-sum-list li b { font-weight: 650; color: var(--heading); text-align: right; }
.hx-sum-list li.is-discount b { color: #1f6f4a; }
.hx-sum-list li.is-empty { color: var(--ink-soft); }
.hx-sum-bundle { margin: 0 0 .8rem; padding: .7rem .85rem; border-radius: 10px; background: #e3f4ec; color: #1f5f41; font-size: .9rem; }
.hx-sum-tip { margin: 0 0 .8rem; padding: .7rem .85rem; border-radius: 10px; background: var(--blue-100); color: var(--blue-900); font-size: .9rem; }
.hx-sum-bundle[hidden], .hx-sum-tip[hidden], .hx-sum-custom[hidden] { display: none; }
.hx-sum-totals { display: grid; gap: .5rem; margin: 0 0 .6rem; }
.hx-sum-totals div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.hx-sum-totals dt { font-weight: 650; color: var(--heading); }
.hx-sum-totals dd { margin: 0; font-weight: 800; font-size: 1.5rem; letter-spacing: -0.03em; color: var(--heading); }
.hx-sum-custom { margin: 0 0 .4rem; font-size: .9rem; color: var(--ink-soft); }
.hx-sum-note { font-size: .82rem; color: var(--ink-soft); margin: 0 0 1rem; }
.hx-summary .btn { width: 100%; }
.hx-sum-netto { margin: -.2rem 0 .7rem; text-align: right; font-size: .82rem; font-weight: 600; color: var(--ink-soft); }
/* Preise netto, nur Geschäftskunden */
.hx-zielgruppe { margin: 1.4rem 0 0; font-size: .95rem; font-weight: 600; color: var(--heading); }
.hx-field-geschaeftlich .hx-check { display: grid; margin: 0; padding: 0; font-weight: 500; font-size: .92rem; line-height: 1.45; }
.hx-field-geschaeftlich input[type="checkbox"] { width: 1.15rem; height: 1.15rem; min-height: 0; padding: 0; margin: .18rem 0 0; accent-color: var(--blue-700); }
.hx-field-geschaeftlich input[type="checkbox"]:focus-visible { outline: 3px solid var(--blue-700); outline-offset: 2px; box-shadow: none; }
/* Ohne Symbol: Text über die ganze Breite */
.facts li > div:only-child, .gp-list li > div:only-child, .hx-card-head > h4:only-child { grid-column: 1 / -1; }
/* Kassenbon: Beträge strikt rechtsbündig */
.bon-rows b { justify-self: end; text-align: right; }
.hx-paket-note { margin-top: 1.6rem; max-width: 60rem; }
.hx-sumbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom)); background: rgba(255,255,255,.97); border-top: 1px solid var(--line); box-shadow: 0 -10px 24px -18px rgba(15, 32, 51, .5); }
.hx-sumbar[hidden] { display: none; }
.hx-sumbar b { font-size: 1.2rem; color: var(--heading); }
.hx-sumbar .btn { min-height: 2.9rem; }
body.hx-sumbar-an .action-bar { transform: translateY(110%); }

/* Kontaktformular: unauffälliges Zusatzfeld */
.hx-field-small label { font-weight: 500; font-size: .9rem; }
.hx-field-small input { min-height: 2.75rem; }

/* Empfehlungsprogramm */
.hx-referral { padding-block: clamp(2.5rem, 6vw, 4rem); }
.hx-referral-box { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.1rem; align-items: start; max-width: 52rem; padding: clamp(1.2rem, 3vw, 1.6rem); border-radius: var(--r-l); border: 1.5px solid var(--line); background: var(--white); }
.hx-referral-title { font-size: clamp(1.25rem, 1.1rem + .7vw, 1.6rem); letter-spacing: -0.025em; margin-bottom: .5rem; }
.hx-referral-text p { color: var(--ink-soft); margin-bottom: .6rem; }
.hx-referral-link { margin: .4rem 0 0; }
.hx-referral-link a { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; min-height: 2.75rem; }
.hx-referral-link svg { width: 1.1rem; height: 1.1rem; }

/* Website-Check */
.hx-wcheck { background: var(--sand); min-height: 60vh; }
.hx-check-head { max-width: 46rem; margin-bottom: 2rem; }
.hx-check-head h1 { font-size: clamp(2.2rem, 1.5rem + 3vw, 3.6rem); }
.hx-check-card { max-width: 46rem; }
.hx-check-form { display: grid; gap: 1.1rem; }
.hx-check-form .form-hint { margin-top: .5rem; }
.hx-check-status { display: grid; gap: .6rem; padding: 1rem 1.1rem; border-radius: 10px; background: var(--blue-100); color: var(--blue-900); }
.hx-check-status[hidden] { display: none; }
.hx-check-status.is-fehler { background: #fdecea; color: #8a1f17; }
.hx-check-status.is-fehler .hx-progress { display: none; }
.hx-progress { display: block; height: .4rem; border-radius: 99px; background: rgba(44, 111, 173, .18); overflow: hidden; }
.hx-progress i { display: block; width: 35%; height: 100%; border-radius: inherit; background: var(--blue-700); animation: hx-laden 1.4s ease-in-out infinite; }
@keyframes hx-laden { 0% { transform: translateX(-100%); } 100% { transform: translateX(290%); } }
.hx-result { margin-top: 2.6rem; max-width: 52rem; }
.hx-result[hidden] { display: none; }
.hx-result:focus { outline: none; }
.hx-result h2 { font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem); overflow-wrap: anywhere; }
.hx-result-summary { font-weight: 700; font-size: 1.15rem; color: var(--heading); margin-bottom: .3rem; }
.hx-points { list-style: none; display: grid; gap: .8rem; margin: 1.4rem 0 1.6rem; }
.hx-point { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .9rem; padding: 1.1rem 1.2rem; border-radius: var(--r-m); background: var(--white); border: 1.5px solid var(--line); border-left-width: 5px; }
.hx-point-mark { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; font-weight: 800; color: var(--white); }
.hx-point h3 { font-size: 1.05rem; margin: .15rem 0 .3rem; }
.hx-point-label { display: inline-block; margin-left: .3rem; padding: .1rem .5rem; border-radius: 6px; font-family: var(--mono); font-size: .7rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; }
.hx-point p { margin: 0 0 .35rem; font-size: .96rem; overflow-wrap: anywhere; }
.hx-point.is-ok { border-left-color: var(--gruen); } .hx-point.is-ok .hx-point-mark { background: var(--gruen); } .hx-point.is-ok .hx-point-label { background: var(--gruen-hell); color: var(--gruen); }
.hx-point.is-mittel { border-left-color: var(--violett); } .hx-point.is-mittel .hx-point-mark { background: var(--violett); } .hx-point.is-mittel .hx-point-label { background: var(--violett-hell); color: var(--violett); }
.hx-point.is-hoch { border-left-color: var(--beere); } .hx-point.is-hoch .hx-point-mark { background: var(--beere); } .hx-point.is-hoch .hx-point-label { background: var(--beere-hell); color: var(--beere-dunkel); }
.hx-point.is-unbekannt { border-left-color: #8b8b85; } .hx-point.is-unbekannt .hx-point-mark { background: #6b6b66; } .hx-point.is-unbekannt .hx-point-label { background: #eeeeea; color: #45453f; }
/* Website-Check: Gesamtampel, Hinweis, nächster Schritt */
.hx-ampel { margin: .6rem 0 .4rem; padding: 1rem 1.2rem; border-radius: var(--r-m); border-left: 6px solid var(--gruen); background: var(--gruen-hell); }
.hx-ampel .hx-result-summary { margin: 0 0 .2rem; }
.hx-ampel.is-ok .hx-result-summary { color: var(--gruen); }
.hx-ampel.is-mittel { border-left-color: var(--violett); background: var(--violett-hell); } .hx-ampel.is-mittel .hx-result-summary { color: var(--violett); }
.hx-ampel.is-hoch { border-left-color: var(--beere); background: var(--beere-hell); } .hx-ampel.is-hoch .hx-result-summary { color: var(--beere-dunkel); }
.hx-ampel-stand { margin: 0; font-size: .88rem; color: var(--ink-soft); }
.hx-ampel-zahlen { margin: 0; font-size: .92rem; color: var(--ink-soft); }
.hx-check-hinweis { margin: 0 0 1.4rem; padding: .9rem 1.1rem; border: 1.5px solid var(--line); border-radius: var(--r-m); background: var(--sand); font-size: .92rem; }
.hx-check-hinweis p { margin: 0; }
.hx-check-bericht { padding: clamp(1.2rem, 4vw, 1.6rem); border-radius: var(--r-l); background: var(--blue-50); border: 1.5px solid var(--blue-200); }
.hx-check-bericht h3 { margin-bottom: .4rem; }
.hx-check-bericht p { margin: 0; }
.hx-print-head { display: none; }

@media print {
  .hx-check-head, .hx-check-card, .hx-no-print, .site-footer, .hx-sumbar, .skip-link { display: none !important; }
  .hx-wcheck { background: none; padding: 0; min-height: 0; }
  .hx-result { margin: 0; max-width: none; }
  .hx-print-head { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; padding-bottom: .6rem; border-bottom: 1px solid #ccc; }
  .hx-print-head .mark { width: 1.8rem; height: 1.8rem; color: var(--blue-700); }
  .hx-point { break-inside: avoid; border-color: #ccc; }
  .hx-point-mark, .hx-point-label { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ==========================================================================
   Branchenseiten (/branchen/…): Präfix br-
   Rechner-CSS steht nur auf /branchen/restaurants/bestellen-ohne-provision/.
   ========================================================================== */
.br-seite .section { padding-block: clamp(3rem, 7vw, 5rem); }
.br-seite .section.br-anschluss { padding-top: 0; }
.br-seite .section-head { margin-bottom: clamp(1.6rem, 4vw, 2.4rem); }
.br-seite .section-head h2 { margin-bottom: .3em; }
.br-seite p { max-width: none; }

.br-krumen { padding-top: 1.2rem; font-size: .9rem; color: var(--ink-soft); }
.br-krumen ol { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; }
.br-krumen li + li::before { content: "›"; margin-right: .35rem; color: #8a8a85; }
.br-krumen a { color: var(--ink-soft); }
.br-krumen a:hover { color: var(--blue-800); }
.br-krumen [aria-current] { color: var(--heading); font-weight: 600; }

.br-hero { padding-top: clamp(1.5rem, 4vw, 3rem); }
.br-hero-grid { display: grid; gap: 2.5rem; align-items: center; padding-bottom: clamp(2.5rem, 6vw, 4rem); }
@media (min-width: 960px) { .br-hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 3rem; } }
.br-hero h1 { font-size: clamp(2.1rem, 1.4rem + 3.2vw, 3.6rem); margin-bottom: .5em; }
.br-hero .lead { margin-bottom: 0; }
.br-hero .btn-row { margin-top: 1.8rem; }

/* Handy-Ansicht (Branchenseite) */
.br-handy-buehne { display: flex; justify-content: center; padding: 2.2rem 1.2rem; border-radius: var(--r-l); background: var(--band); }
.br-handy { width: min(100%, 15rem); padding: .6rem; border-radius: 2rem; background: var(--navy); box-shadow: var(--shadow-l); }
.br-handy-screen { overflow: hidden; border-radius: 1.5rem; background: var(--white); }
.br-handy-kopf { display: grid; gap: .15rem; padding: 1rem 1rem .75rem; background: var(--blue-100); }
.br-handy-kopf strong { font-size: .92rem; color: var(--heading); }
.br-handy-kopf span { font-size: .75rem; font-weight: 600; color: var(--gruen); }
.br-handy-body { display: grid; gap: .55rem; padding: .75rem 1rem; }
.br-handy-label { font-family: var(--mono); font-size: .66rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-700); }
.br-gericht { display: flex; justify-content: space-between; gap: .5rem; padding-bottom: .5rem; border-bottom: 1px solid var(--line); font-size: .75rem; line-height: 1.35; }
.br-gericht b { font-weight: 700; color: var(--heading); white-space: nowrap; }
.br-gericht > b { flex: none; }
.br-gericht span b { white-space: normal; }
.br-gericht small { display: block; font-size: .66rem; color: var(--ink-soft); }
.br-handy-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; padding: .25rem 1rem 1rem; }
.br-handy-knoepfe span { padding: .55rem .25rem; border-radius: .6rem; font-size: .7rem; font-weight: 700; line-height: 1.2; text-align: center; }
@media (max-width: 400px) {
  .br-handy-buehne { padding-inline: .6rem; }
  .br-handy-body, .br-handy-knoepfe { padding-inline: .75rem; }
  .br-handy-knoepfe span, .br-gericht span, .br-handy-label { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
}
.br-k-blau { background: var(--blue-100); color: var(--blue-800); }
.br-k-beere { background: var(--beere); color: var(--white); }

/* Raster */
.br-raster { display: grid; gap: 1rem; }
@media (min-width: 700px) { .br-raster-2, .br-raster-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .br-raster-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .br-raster-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.br-kacheln { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }

/* Verlinkte Kacheln (Ausgangslage, Branchen-Übersicht) */
.br-situation { display: flex; flex-direction: column; gap: .6rem; padding: 1.5rem; border: 1.5px solid var(--line); border-radius: var(--r-m); background: var(--white); color: var(--ink); text-decoration: none; transition: border-color .2s, transform .2s; }
.br-situation:hover { border-color: var(--blue-700); color: var(--ink); transform: translateY(-2px); }
.br-situation h2, .br-situation h3 { margin: 0; font-size: clamp(1.1rem, 1.02rem + .35vw, 1.28rem); letter-spacing: -0.015em; line-height: 1.2; }
.br-situation p { margin: 0; font-size: .95rem; color: var(--ink-soft); }
.br-marke { font-family: var(--mono); font-size: .72rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--blue-700); }
.br-weiter { margin-top: auto; padding-top: .4rem; font-weight: 650; color: var(--blue-700); }
.br-situation.is-akzent { background: var(--beere-hell); border-color: var(--beere-rand); }
.br-situation.is-akzent:hover { border-color: var(--beere); }
.br-situation.is-akzent .br-marke, .br-situation.is-akzent .br-weiter { color: var(--beere-dunkel); }

/* Karten */
.br-karte { display: flex; gap: 1rem; padding: 1.4rem; border: 1.5px solid var(--line); border-radius: var(--r-m); background: var(--white); }
.br-karte.is-spalte { flex-direction: column; }
.br-karte h3 { margin: 0 0 .35rem; }
.br-karte p { margin: 0; font-size: .95rem; color: var(--ink-soft); }
.br-karte .checklist { font-size: .95rem; }
.br-ic { flex: none; display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 10px; background: var(--beere-hell); color: var(--beere-dunkel); }
.br-ic.is-blau { background: var(--blue-100); color: var(--blue-700); }
.br-ic svg { width: 1.4rem; height: 1.4rem; }

.br-flaeche { background: var(--blue-50); }
.br-basis { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.2rem 1.5rem; margin-bottom: 1rem; padding: clamp(1.3rem, 4vw, 1.7rem); border-radius: var(--r-m); background: var(--band); color: var(--white); }
.br-basis > div:first-child { flex: 1 1 22rem; min-width: 0; }
.br-basis h3 { margin-bottom: .4rem; font-size: 1.35rem; color: var(--white); }
.br-basis p { margin: 0; font-size: .95rem; color: rgba(255,255,255,.86); }
.br-preis { font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; }
.br-preis small { display: block; font-size: .8rem; font-weight: 600; letter-spacing: 0; color: rgba(255,255,255,.82); }
.br-baustein { display: flex; flex-direction: column; gap: .5rem; padding: 1.25rem; border: 1.5px solid var(--line); border-radius: var(--r-m); background: var(--white); }
.br-baustein-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .3rem .6rem; }
@media (max-width: 680px) { .br-baustein-kopf { flex-direction: column; align-items: flex-start; gap: .2rem; } }
.br-baustein h3 { margin: 0; }
.br-baustein-preis { font-family: var(--mono); font-size: .82rem; font-weight: 500; color: var(--blue-800); white-space: nowrap; }
.br-baustein p { margin: 0; font-size: .95rem; color: var(--ink-soft); }
.br-klein { margin: .9rem 0 0; font-size: .85rem; color: var(--ink-soft); }

.br-paket { display: flex; flex-direction: column; gap: .7rem; padding: 1.5rem; border: 1.5px solid var(--line); border-radius: var(--r-m); background: var(--white); }
.br-paket h3 { margin: 0; }
.br-paket .checklist { font-size: .95rem; }
.br-summe { display: grid; gap: .1rem; margin-top: auto; padding-top: .8rem; border-top: 1px solid var(--line); }
.br-summe b { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.03em; color: var(--heading); }
.br-summe span { font-size: .85rem; color: var(--ink-soft); }

.br-schritt { display: flex; flex-direction: column; gap: .4rem; padding: 1.4rem; border-radius: var(--r-m); background: var(--blue-50); }
.br-schritt h3 { margin: 0; }
.br-schritt p { margin: 0; font-size: .95rem; color: var(--ink-soft); }

/* Bänder */
.br-band { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.5rem; padding: clamp(1.4rem, 4vw, 2rem); border: 2px solid var(--blue-700); border-radius: var(--r-l); }
.br-band > div { flex: 1 1 24rem; min-width: 0; }
.br-band h2 { margin: 0 0 .5rem; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); }
.br-band p { margin: 0; color: var(--ink-soft); max-width: 40rem; }
.br-cta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.5rem; padding: clamp(1.6rem, 5vw, 2.6rem); border-radius: var(--r-l); background: var(--band); color: var(--white); }
.br-cta > div:first-child { flex: 1 1 24rem; min-width: 0; }
.br-cta h2 { max-width: 36rem; margin-bottom: .5rem; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); color: var(--white); }
.br-cta p { margin: 0; color: rgba(255,255,255,.86); }
.br-cta .btn-row { margin-top: 0; }
/* Handy: Knöpfe gleich breit und mittig, auch wenn sie mit größerer Schrift zweizeilig werden */
@media (max-width: 560px) {
  .br-seite .btn-row { width: 100%; }
  .br-seite .btn-row .btn, .br-band > .btn, .br-band .btn-row .btn { width: 100%; justify-content: center; text-align: center; }
}

/* Tabelle */
.br-tabelle { overflow-x: auto; border: 1.5px solid var(--line); border-radius: var(--r-m); }
.br-tabelle table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: .95rem; }
.br-tabelle th { padding: .8rem 1rem; background: var(--blue-700); color: var(--white); font-size: .88rem; font-weight: 650; text-align: left; }
.br-tabelle td { padding: .8rem 1rem; border-top: 1px solid var(--line); color: var(--ink); vertical-align: top; }
.br-tabelle td:first-child { font-weight: 650; color: var(--heading); }
.br-tabelle th:last-child, .br-tabelle td:last-child { text-align: right; white-space: nowrap; }
/* Handy: jede Zeile als eigene Karte statt seitlich scrollender Tabelle */
@media (max-width: 680px) {
  .br-tabelle { overflow: visible; border: 0; border-radius: 0; }
  .br-tabelle table, .br-tabelle tbody, .br-tabelle tr, .br-tabelle td { display: block; min-width: 0; }
  .br-tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .br-tabelle tr { padding: 1.1rem 1.2rem; border: 1.5px solid var(--line); border-radius: var(--r-m); background: var(--white); }
  .br-tabelle tr + tr { margin-top: .75rem; }
  .br-tabelle td { padding: 0; border: 0; }
  .br-tabelle td:first-child { margin-bottom: .3rem; font-size: 1.05rem; }
  .br-tabelle td:nth-child(2) { font-size: .92rem; color: var(--ink-soft); }
  .br-tabelle td:last-child { margin-top: .7rem; padding-top: .6rem; border-top: 1px solid var(--line); font-weight: 650; color: var(--blue-800); text-align: left; white-space: normal; }
}

.br-ehrlich { margin-top: 1.8rem; padding: 1.4rem 1.5rem; border: 1.5px solid var(--gruen-rand); border-radius: var(--r-m); background: var(--gruen-hell); }
.br-ehrlich h3 { color: var(--gruen); }
.br-ehrlich ul { display: grid; gap: .45rem; padding-left: 1.2rem; color: #2c3a33; }
.br-planer { display: grid; gap: 1.6rem; padding: clamp(1.4rem, 4vw, 1.8rem); border: 2px solid var(--blue-700); border-radius: var(--r-l); }
@media (min-width: 760px) { .br-planer { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; } }
.br-planer h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); }
.br-planer ul { display: grid; gap: .5rem; padding-left: 1.2rem; }

.br-quellen { display: grid; gap: .35rem; margin-top: 1.8rem; font-size: .85rem; color: var(--ink-soft); }
.br-quellen p { margin: 0; }
.br-markenhinweis { padding-bottom: 2rem; font-size: .82rem; color: var(--ink-soft); }
.br-markenhinweis p { margin: 0; }

/* Startseite: Hinweis „Für Ihre Branche“ */
.br-teaser-section { padding-block: clamp(2.5rem, 6vw, 4rem) 0; }
.br-teaser { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem 2rem; padding: clamp(1.4rem, 4vw, 2rem); border: 1.5px solid var(--line); border-radius: var(--r-l); background: var(--blue-50); }
.br-teaser > div { flex: 1 1 26rem; min-width: 0; }
.br-teaser h2 { margin-bottom: .4rem; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
.br-teaser p:last-child { margin: 0; color: var(--ink-soft); }
.main-nav a[aria-current="page"] { color: var(--blue-800); }
.main-nav a[aria-current="page"]::after { transform: scaleX(1); }
/* Acht Menüpunkte: Logo nie überdecken; bis 1340 px ohne „Projekt anfragen“ im Kopf (Kontakt steht im Menü) */
.brand { flex-shrink: 0; }
@media (min-width: 1100px) and (max-width: 1340px) { .header-call { display: none; } }

/* Ohne Icons (Vorgabe: nur E-Mail und Standort im Kontaktbereich haben Symbole) */
.icon-btn.menu-btn, .icon-btn[data-menu-close] { width: auto; padding-inline: .9rem; font-size: .92rem; }
.checklist li { padding-left: 1.3rem; }
.checklist li::before, .on-dark .checklist li::before, .way-center .checklist li::before, .price-card.is-hl .checklist li::before {
  top: .6em; left: .3rem; width: .45rem; height: .45rem; border-radius: 50%; background: var(--blue-700); background-image: none;
}
.on-dark .checklist li::before, .way-center .checklist li::before, .price-card.is-hl .checklist li::before { background: var(--akzent); }
.hx-referral-box > :only-child { grid-column: 1 / -1; }
.hx-point { grid-template-columns: minmax(0, 1fr); }
.faq-list .plus, .hx-details .plus { font-size: 1.3rem; font-weight: 500; line-height: 1; }