/* =========================================================
   Hillco Hausverwaltung — Design Tokens
   ========================================================= */
:root {
  --teal: #053f4b;
  --teal-deep: #032a32;
  --teal-soft: #0d5563;
  --gold: #b3843a;
  --gold-soft: #d8b77c;
  --cream: #f4efe6;
  --paper: #faf8f3;
  --ink: #0b2a31;
  --muted: #5d6f73;
  --line: rgba(5, 63, 75, 0.14);

  --f-sans: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-serif: "Instrument Serif", Georgia, serif;

  --gutter: clamp(16px, 4vw, 56px);
  --radius: 28px;
  --ease: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  font-family: var(--f-sans);
  font-weight: 400;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-loading { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, textarea { font: inherit; color: inherit; }
::selection { background: var(--gold); color: #fff; }

em {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
  letter-spacing: -0.01em;
}

h1, h2, h3 { font-weight: 500; letter-spacing: -0.035em; line-height: 0.98; }
h2 { font-size: clamp(2.6rem, 6.4vw, 6.2rem); }
h3 { font-size: clamp(1.6rem, 2.6vw, 2.4rem); letter-spacing: -0.02em; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 28px;
}
.eyebrow--light { color: var(--gold-soft); }

/* ---------- The window motif (from the logo) ---------- */
.window {
  display: inline-grid; grid-template-columns: 1fr 1fr; gap: 12%;
  width: 22px; aspect-ratio: 1; flex: none;
}
.window i { background: var(--gold); border-radius: 1px; }
.window--xs { width: 12px; }
.window--sm { width: clamp(22px, 3vw, 40px); }
.window--md { width: 38px; }

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--teal); --fg: #fff;
  position: relative; display: inline-flex; align-items: center; gap: 14px;
  padding: 18px 30px; border-radius: 100px;
  background: var(--bg); color: var(--fg);
  font-weight: 500; font-size: 1rem; letter-spacing: 0.01em;
  border: 0; cursor: pointer; overflow: hidden; isolation: isolate;
  transition: color .5s var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--gold); border-radius: inherit;
  transform: translateY(101%); transition: transform .6s var(--ease-out);
}
.btn:hover::before { transform: translateY(0); }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform .5s var(--ease-out); }
.btn:hover svg { transform: translateX(4px); }
.btn--small { padding: 12px 22px; font-size: .92rem; }
.btn--gold { --bg: var(--gold); }
.btn--gold::before { background: var(--cream); }
.btn--gold:hover { color: var(--teal); }

.link-arrow {
  position: relative; font-weight: 500; padding-bottom: 4px;
}
.link-arrow::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform-origin: right; transition: transform .6s var(--ease-out);
}
.link-arrow:hover::after { transform: scaleX(0); }
.link-arrow::before { content: "↓ "; color: var(--gold); }
.link-arrow--up::before { content: "↑ "; }

/* =========================================================
   Preloader
   ========================================================= */
.loader {
  position: fixed; inset: 0; z-index: 100;
  background: var(--teal); display: grid; place-items: center;
}
.loader__inner { display: flex; flex-direction: column; align-items: center; }
.loader__roof { width: clamp(150px, 22vw, 260px); overflow: visible; margin-bottom: -6px; }
.loader__roof path, .wordmark__roof, .footer__roof, .card__roof path, .statement__roof path, .contact__roof path {
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.loader__roof path { stroke: #fff; stroke-width: 9; stroke-dasharray: 260; stroke-dashoffset: 260; }
.loader__word {
  display: flex; overflow: hidden;
  font-size: clamp(4rem, 12vw, 9rem); font-weight: 500; color: #fff;
  letter-spacing: -0.03em; line-height: 1;
  padding-bottom: .08em;
}
.loader__word span { display: inline-block; transform: translateY(110%); }
.loader__window { width: 30px; margin-top: 22px; }
.loader__window i { transform: scale(0); }

/* =========================================================
   Cursor
   ========================================================= */
.cursor {
  position: fixed; top: 0; left: 0; z-index: 90; pointer-events: none;
  width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: var(--gold); display: grid; place-items: center;
  transition: width .45s var(--ease-out), height .45s var(--ease-out), margin .45s var(--ease-out), background .3s;
  opacity: 0;
}
.cursor.is-visible { opacity: 1; }
.cursor.is-hover { width: 56px; height: 56px; margin: -28px 0 0 -28px; background: rgba(179, 132, 58, .18); }
.cursor.has-label { width: 96px; height: 96px; margin: -48px 0 0 -48px; background: var(--gold); }
.cursor__label { font-size: .78rem; font-weight: 500; color: #fff; opacity: 0; transition: opacity .3s; }
.cursor.has-label .cursor__label { opacity: 1; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* =========================================================
   Nav
   ========================================================= */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 18px var(--gutter);
  transition: transform .6s var(--ease-out), background .4s, box-shadow .4s;
}
.nav.is-scrolled { background: rgba(250, 248, 243, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line); }
.nav.is-hidden { transform: translateY(-100%); }
.nav__logo { display: block; width: 104px; }
.wordmark { width: 100%; overflow: visible; }
.wordmark text { font-family: var(--f-sans); font-weight: 500; font-size: 52px; letter-spacing: -1.5px; fill: var(--teal); }
.wordmark__roof { stroke: var(--teal); stroke-width: 4.5; }
.nav__links { display: flex; gap: 36px; font-weight: 400; font-size: .95rem; }
.nav__links a { position: relative; }
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease-out);
}
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__burger { display: none; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; position: relative; }
.nav__burger i { position: absolute; left: 10px; right: 10px; height: 1.5px; background: var(--teal); transition: transform .5s var(--ease-out); }
.nav__burger i:first-child { top: 18px; } .nav__burger i:last-child { top: 25px; }
.nav__burger[aria-expanded="true"] i:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] i:last-child { transform: translateY(-3.5px) rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 45; background: var(--cream);
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
  padding: 0 var(--gutter);
  clip-path: inset(0 0 100% 0); transition: clip-path .8s var(--ease);
}
.menu.is-open { clip-path: inset(0 0 0 0); }
.menu a { font-size: clamp(2.4rem, 11vw, 4rem); font-weight: 500; letter-spacing: -0.03em; color: var(--teal); }

@media (max-width: 860px) {
  .nav__links, .nav > .btn { display: none; }
  .nav__burger { display: block; }
}

/* =========================================================
   Hero
   ========================================================= */
.hero { padding: clamp(120px, 16vh, 180px) var(--gutter) 0; }
.hero__title {
  font-size: clamp(3.2rem, 9.4vw, 10.5rem);
  max-width: 13ch; color: var(--teal);
  letter-spacing: -0.045em; line-height: 0.93;
}
.hero__title em { padding-right: .06em; }
.hero__meta {
  display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 32px;
  margin-top: clamp(32px, 5vw, 64px);
}
.hero__rotator { font-size: clamp(1.15rem, 1.8vw, 1.5rem); color: var(--muted); max-width: 30ch; }
.rotator { display: grid; color: var(--teal); font-weight: 500; overflow: hidden; }
.rotator__item { grid-area: 1 / 1; transform: translateY(110%); transition: transform .9s var(--ease-out); }
.rotator__item.is-active { transform: translateY(0); }
.rotator__item.is-leaving { transform: translateY(-110%); }
.hero__cta { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }

.hero__stage { position: relative; margin-top: clamp(48px, 7vw, 96px); }
.hero__house {
  position: relative; margin: 0 auto; width: 100%;
  aspect-ratio: 16 / 9; overflow: hidden; border-radius: 6px;
  clip-path: polygon(18% 30%, 50% 0%, 82% 30%, 82% 100%, 18% 100%);
  will-change: clip-path;
}
.hero__house img { width: 100%; height: 118%; object-fit: cover; transform: translateY(-8%); }
.hero__badge {
  position: absolute; right: clamp(8px, 6vw, 90px); top: -40px;
  width: clamp(100px, 11vw, 140px); aspect-ratio: 1; display: grid; place-items: center;
  background: var(--paper); border-radius: 50%;
  box-shadow: 0 20px 50px -20px rgba(5, 63, 75, .35);
}
.badge-rotate { position: absolute; inset: 8px; width: calc(100% - 16px); animation: spin 18s linear infinite; }
.badge-rotate text { font-size: 10.5px; letter-spacing: 0; fill: var(--teal); font-weight: 500; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 700px) {
  .hero__house { aspect-ratio: 4 / 5; clip-path: polygon(0% 22%, 50% 0%, 100% 22%, 100% 100%, 0% 100%); }
  .hero__badge { top: -30px; }
}

/* =========================================================
   Marquee
   ========================================================= */
.marquee { overflow: hidden; padding: clamp(48px, 7vw, 96px) 0; border-bottom: 1px solid var(--line); }
.marquee__track {
  display: flex; align-items: center; gap: clamp(28px, 4vw, 64px); width: max-content;
  animation: marquee 28s linear infinite;
  font-size: clamp(3rem, 8vw, 8rem); font-weight: 400; letter-spacing: -0.04em;
  color: var(--teal); line-height: 1;
}
.marquee__track span:nth-of-type(3n+2) { font-family: var(--f-serif); font-style: italic; color: var(--gold); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* =========================================================
   Manifest
   ========================================================= */
.manifest { padding: clamp(96px, 14vw, 200px) var(--gutter); }
.manifest__text {
  font-size: clamp(1.8rem, 4.2vw, 4.2rem); line-height: 1.12; letter-spacing: -0.03em;
  font-weight: 400; color: var(--teal); max-width: 22ch;
  max-width: 1300px;
}
.manifest__text .w { opacity: .14; transition: none; }
.manifest__foot {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 110px);
  align-items: end; margin-top: clamp(64px, 9vw, 140px);
}
.manifest__img { aspect-ratio: 4 / 5; border-radius: var(--radius); }
.manifest__img img { object-position: 30% center; }
.manifest__note { font-size: clamp(1.1rem, 1.6vw, 1.4rem); color: var(--muted); max-width: 34ch; }
@media (max-width: 760px) { .manifest__foot { grid-template-columns: 1fr; } }

.parallax-wrap { overflow: hidden; position: relative; }
.parallax-wrap img { width: 100%; height: 120%; object-fit: cover; position: absolute; top: -10%; left: 0; }

/* =========================================================
   Section heads
   ========================================================= */
.section-head { padding: 0 var(--gutter); margin-bottom: clamp(56px, 8vw, 110px); }
.section-head h2 { color: var(--teal); max-width: 14ch; }
.section-head__sub { margin-top: 28px; font-size: 1.2rem; color: var(--muted); max-width: 44ch; }

/* =========================================================
   Services — sticky stacked cards
   ========================================================= */
.services { padding: clamp(96px, 12vw, 160px) 0 clamp(64px, 8vw, 120px); background: var(--cream); border-radius: 48px 48px 0 0; }
.stack { padding: 0 var(--gutter); display: grid; gap: 28px; }
.card { --dim: 0;
  position: sticky; top: calc(96px + var(--i) * 22px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 32px;
  min-height: min(72vh, 620px); padding: clamp(28px, 4.5vw, 64px);
  background: var(--paper); border-radius: var(--radius);
  border: 1px solid var(--line); overflow: hidden;
  transform-origin: center top;
}
.card::after { content: ""; position: absolute; inset: 0; background: var(--teal-deep); opacity: var(--dim, 0); pointer-events: none; z-index: 2; }
.card__num { font-size: clamp(4rem, 11vw, 11rem); line-height: .8; font-weight: 300; color: var(--gold); letter-spacing: -0.05em; }
.card__body { align-self: end; max-width: 620px; position: relative; z-index: 1; }
.card h3 { font-size: clamp(2.2rem, 4.8vw, 4.4rem); margin-bottom: 24px; color: var(--teal); letter-spacing: -0.035em; hyphens: manual; }
.card p { font-size: clamp(1.02rem, 1.3vw, 1.2rem); color: var(--muted); max-width: 48ch; }
.card ul { margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; }
.card li { display: flex; gap: 12px; align-items: baseline; font-weight: 500; font-size: .98rem; padding-top: 12px; border-top: 1px solid var(--line); }
.card li::before { content: ""; width: 7px; height: 7px; background: var(--gold); flex: none; transform: translateY(-1px); }
.card__roof { position: absolute; right: -4%; top: 8%; width: 44%; opacity: .07; }
.card__roof path { stroke: var(--teal); stroke-width: 14; }

.card--dark { background: var(--teal); border-color: transparent; }
.card--dark h3, .card--dark li { color: #fff; }
.card--dark p { color: rgba(255,255,255,.7); }
.card--dark li { border-color: rgba(255,255,255,.16); }
.card--dark .card__roof path { stroke: #fff; }
.card--gold { background: var(--gold); border-color: transparent; }
.card--gold .card__num, .card--gold h3, .card--gold li { color: #fff; }
.card--gold p { color: rgba(255,255,255,.85); }
.card--gold li { border-color: rgba(255,255,255,.3); }
.card--gold li::before { background: #fff; }
.card--gold .card__roof path { stroke: #fff; }
@media (max-width: 760px) {
  .card { grid-template-columns: 1fr; top: calc(80px + var(--i) * 14px); min-height: 0; }
  .card ul { grid-template-columns: 1fr; }
}

/* =========================================================
   Why — pinned horizontal
   ========================================================= */
.why { background: var(--teal); color: #fff; overflow: hidden; }
.why__pin { padding: clamp(96px, 12vw, 160px) 0; }
.why__head { padding: 0 var(--gutter); margin-bottom: clamp(48px, 6vw, 80px); }
.why__head h2 { max-width: 16ch; }
.why__head em { color: var(--gold-soft); }
.why__track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); padding: 0 var(--gutter); }
.why__item {
  padding: clamp(28px, 3.5vw, 48px);
  border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  display: flex; flex-direction: column;
}
.why__n {
  font-size: clamp(6rem, 12vw, 11rem); font-weight: 300; line-height: .8; color: var(--gold-soft);
  letter-spacing: -0.06em;
}
.why__item h3 { margin: 48px 0 16px; font-size: clamp(2rem, 3.4vw, 3rem); }
.why__item p { color: rgba(255,255,255,.72); font-size: 1.08rem; max-width: 40ch; }
@media (max-width: 760px) {
  .why__track { grid-template-columns: 1fr; }
  .why__item { width: 100%; min-height: 0; }
}

/* =========================================================
   Process
   ========================================================= */
.process { padding: clamp(110px, 14vw, 200px) 0; }
.steps {
  position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px); padding: 0 var(--gutter);
}
.steps__line { position: absolute; left: var(--gutter); right: var(--gutter); top: 7px; height: 1px; background: var(--line); }
.steps__line span { position: absolute; inset: 0; background: var(--gold); transform-origin: left; transform: scaleX(0); }
.step { position: relative; padding-top: 48px; }
.step__dot { position: absolute; top: 0; left: 0; width: 15px; height: 15px; background: var(--paper); border: 1.5px solid var(--gold); transition: background .4s; }
.step.is-on .step__dot { background: var(--gold); }
.step__k { font-size: .76rem; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); font-weight: 500; margin-bottom: 18px; }
.step h3 { color: var(--teal); margin-bottom: 14px; }
.step p { color: var(--muted); }
@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; gap: 48px; padding-left: calc(var(--gutter) + 40px); }
  .steps__line { left: calc(var(--gutter) + 7px); right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .steps__line span { transform-origin: top; transform: scaleY(0); }
  .step { padding-top: 0; }
  .step__dot { left: -40px; top: 4px; }
}

/* =========================================================
   Statement
   ========================================================= */
.statement { position: relative; min-height: 110vh; display: grid; place-items: center; overflow: hidden; color: #fff; }
.statement__img { position: absolute; inset: 0; }
.statement__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3,42,50,.55), rgba(3,42,50,.78)); }
.statement__quote { position: relative; z-index: 1; padding: 0 var(--gutter); text-align: center; display: flex; flex-direction: column; align-items: center; }
.statement__roof { width: clamp(120px, 16vw, 220px); overflow: visible; margin-bottom: 36px; }
.statement__roof path { stroke: var(--gold-soft); stroke-width: 7; stroke-dasharray: 260; stroke-dashoffset: 260; }
.statement__quote p { font-size: clamp(2.4rem, 6vw, 6rem); font-weight: 400; letter-spacing: -0.04em; line-height: 1; max-width: 17ch; }
.statement__quote em { color: var(--gold-soft); }

/* =========================================================
   FAQ
   ========================================================= */
.faq { padding: clamp(110px, 14vw, 200px) 0; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.faq .section-head { margin-bottom: 40px; }
.faq__list { padding: 0 var(--gutter); border-top: 1px solid var(--line); margin-top: 8px; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 30px 0; font-size: clamp(1.15rem, 1.8vw, 1.5rem); font-weight: 500; color: var(--teal); letter-spacing: -0.01em;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary i { position: relative; width: 36px; height: 36px; flex: none; border: 1px solid var(--line); border-radius: 50%; transition: background .4s, border-color .4s; }
.faq__item summary i::before, .faq__item summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: var(--teal); transform: translate(-50%, -50%); transition: transform .5s var(--ease-out), background .4s; }
.faq__item summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item[open] summary i { background: var(--gold); border-color: var(--gold); }
.faq__item[open] summary i::before, .faq__item[open] summary i::after { background: #fff; }
.faq__item[open] summary i::after { transform: translate(-50%, -50%) rotate(0); }
.faq__a { overflow: hidden; }
.faq__a p { padding-bottom: 30px; color: var(--muted); font-size: 1.08rem; max-width: 60ch; }
@media (max-width: 900px) { .faq { grid-template-columns: 1fr; } }

/* =========================================================
   Contact
   ========================================================= */
.contact {
  position: relative; background: var(--teal); color: #fff; overflow: hidden;
  padding: clamp(160px, 20vw, 280px) var(--gutter) clamp(96px, 10vw, 140px);
  border-radius: 48px 48px 0 0;
}
.contact__roof { position: absolute; left: 0; top: 0; width: 100%; height: clamp(90px, 16vw, 240px); }
.contact__roof path { stroke: rgba(255,255,255,.1); stroke-width: 2; vector-effect: non-scaling-stroke; }
.contact__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 7vw, 120px); }
.contact h2 { max-width: 12ch; margin-bottom: 32px; }
.contact h2 em { color: var(--gold-soft); }
.contact__intro > p { color: rgba(255,255,255,.72); font-size: 1.15rem; max-width: 40ch; }
.contact__data { margin-top: 48px; display: grid; gap: 22px; }
.contact__data div { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14); }
.contact__data dt { font-size: .76rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-soft); padding-top: 4px; }
.contact__data dd { font-size: 1.1rem; }
.contact__data a:hover { color: var(--gold-soft); }

.form { background: var(--paper); color: var(--ink); border-radius: var(--radius); padding: clamp(24px, 3.5vw, 48px); display: grid; gap: 22px; align-self: start; }
.form__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.form__tabs input { position: absolute; opacity: 0; pointer-events: none; }
.form__tabs span { display: inline-block; padding: 10px 18px; border-radius: 100px; border: 1px solid var(--line); font-size: .9rem; cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.form__tabs input:checked + span { background: var(--teal); color: #fff; border-color: var(--teal); }
.form__tabs input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.field { position: relative; }
.field input, .field textarea {
  width: 100%; border: 0; border-bottom: 1px solid var(--line); background: none;
  padding: 26px 0 10px; font-size: 1.08rem; outline: none; resize: vertical; border-radius: 0;
  transition: border-color .3s;
}
.field label { position: absolute; left: 0; top: 24px; color: var(--muted); pointer-events: none; transform-origin: left top; transition: transform .45s var(--ease-out), color .3s; }
/* Beschriftung bleibt einzeilig über der Linie (lange Texte werden gekürzt statt umzubrechen) */
.field label { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.field:has(input:focus, input:not(:placeholder-shown)) label { max-width: 128%; }
.field input:focus, .field textarea:focus { border-color: var(--gold); }
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label { transform: translateY(-20px) scale(.78); color: var(--gold); }
.field.is-invalid input, .field.is-invalid textarea { border-color: #b3412f; }
.check { display: flex; gap: 12px; font-size: .88rem; color: var(--muted); align-items: flex-start; }
.check input { accent-color: var(--gold); margin-top: 4px; width: 16px; height: 16px; flex: none; }
.check a { text-decoration: underline; }
.form .btn { justify-self: start; }
.form__status { font-size: .95rem; color: var(--teal); min-height: 1.4em; }
@media (max-width: 900px) { .contact__grid { grid-template-columns: 1fr; } }

/* =========================================================
   Footer
   ========================================================= */
.footer { background: var(--teal-deep); color: #fff; padding: clamp(80px, 10vw, 140px) var(--gutter) 32px; }
.footer__big { display: flex; flex-direction: column; align-items: center; }
.footer__mark { width: min(100%, 880px); overflow: visible; }
.footer__mark text { font-family: var(--f-sans); font-weight: 500; font-size: 212px; letter-spacing: -6px; fill: #fff; }
.footer__roof { stroke: #fff; stroke-width: 15; stroke-dasharray: 420; stroke-dashoffset: 420; }
.footer__rule { width: min(100%, 880px); display: flex; align-items: center; gap: 20px; margin-top: 18px; }
.footer__rule span { flex: 1; height: 2px; background: var(--gold); transform: scaleX(0); }
.footer__rule span:first-child { transform-origin: right; } .footer__rule span:last-child { transform-origin: left; }
.footer__tag { margin-top: 22px; color: var(--gold); letter-spacing: clamp(.3em, 2.4vw, .9em); text-transform: uppercase; font-size: clamp(.9rem, 2.4vw, 1.9rem); font-weight: 500; padding-left: .9em; }
.footer__row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; margin-top: clamp(64px, 8vw, 120px); padding-top: 28px; border-top: 1px solid rgba(255,255,255,.12); font-size: .92rem; color: rgba(255,255,255,.65); }
.footer__row nav { display: flex; gap: 28px; }
.footer__row a:hover { color: #fff; }

/* =========================================================
   Split text / reveals (initial states, set only when JS runs)
   ========================================================= */
.js .split .word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.js .split .word > span { display: inline-block; transform: translateY(110%); }
.js .reveal-up { opacity: 0; transform: translateY(40px); }
.js .reveal-fade { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .loader { display: none; }
  .js .split .word > span { transform: none; }
  .js .reveal-up, .js .reveal-fade { opacity: 1; transform: none; }
  .manifest__text .w { opacity: 1; }
  .hero__house { clip-path: none; }
  .footer__roof, .statement__roof path { stroke-dashoffset: 0; }
  .footer__rule span, .steps__line span { transform: none; }
}

/* =========================================================
   Legal pages
   ========================================================= */
.legal { max-width: 820px; margin: 0 auto; padding: 150px var(--gutter) 120px; }
.legal h1 { font-size: clamp(2.8rem, 7vw, 5rem); color: var(--teal); margin-bottom: 48px; }
.legal h2 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); color: var(--teal); margin: 44px 0 12px; letter-spacing: -0.01em; line-height: 1.2; }
.legal p, .legal li { color: var(--muted); margin-bottom: 12px; }
.legal ul { list-style: disc; padding-left: 20px; }
.legal a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
.legal .todo { background: #fbecc8; color: #6b4a12; padding: 1px 6px; border-radius: 4px; }
.legal-nav { position: fixed; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 18px var(--gutter); background: rgba(250,248,243,.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--line); z-index: 10; }

/* =========================================================
   Logo (SVG rebuild of the Hillco mark)
   ========================================================= */
.logo { display: block; width: 100%; height: auto; overflow: visible; --logo-ink: var(--teal); }
.logo__roof { fill: none; stroke: var(--logo-ink); stroke-width: 34; stroke-linecap: round; stroke-linejoin: round; }
.logo__word { font-family: var(--f-sans); font-weight: 500; font-size: 486px; letter-spacing: 40px; fill: var(--logo-ink); }
.logo__rule { stroke: var(--gold); stroke-width: 6; }
.logo__rule, .logo__win rect { transform-box: fill-box; }
.logo__rule--l { transform-origin: right center; } .logo__rule--r { transform-origin: left center; }
.logo__win rect { fill: var(--gold); transform-origin: center; }
.logo__tag { font-family: var(--f-sans); font-weight: 500; font-size: 88px; fill: var(--gold); }
.logo__claim { font-family: var(--f-sans); font-weight: 400; font-size: 44px; fill: var(--logo-ink); }

.nav__logo { width: clamp(118px, 11vw, 150px); }
.logo--nav .logo__tag { font-weight: 600; }

.logo--loader { width: clamp(240px, 34vw, 460px); --logo-ink: #fff; }
.logo--loader .logo__roof, .logo--footer .logo__roof { stroke-dasharray: 760; stroke-dashoffset: 760; }
.logo--loader .logo__tag, .logo--footer .logo__tag { fill: var(--gold-soft); }
.logo--loader .logo__claim, .logo--footer .logo__claim { fill: rgba(255,255,255,.75); }

.logo--footer { width: min(100%, 880px); --logo-ink: #fff; }
.footer__big { display: flex; justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .logo--footer .logo__roof { stroke-dashoffset: 0; }
}

/* =========================================================
   Trust bar (hero)
   ========================================================= */
.trust {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line);
}
.trust__item {
  display: flex; align-items: center; gap: 14px;
  padding: 22px 20px 4px 0; font-size: .95rem; line-height: 1.3;
}
.trust__item + .trust__item { padding-left: 20px; border-left: 1px solid var(--line); }
.trust__item strong { display: block; font-weight: 500; color: var(--teal); }
.trust__item small { display: block; font-size: .84rem; color: var(--muted); margin-top: 2px; }
.trust__icon { width: 26px; height: 26px; flex: none; fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.trust__seal { width: 46px; height: 46px; flex: none; }
.trust__seal svg { width: 100%; height: 100%; overflow: visible; }
.trust__seal path:first-child { fill: var(--gold); }
.trust__check { fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.trust__item--seal strong { font-size: 1.02rem; }
@media (max-width: 1000px) {
  .trust { grid-template-columns: 1fr 1fr; }
  .trust__item:nth-child(3) { padding-left: 0; border-left: 0; }
  .trust__item:nth-child(n+3) { border-top: 1px solid var(--line); margin-top: 18px; }
}
@media (max-width: 560px) {
  .trust { grid-template-columns: 1fr; }
  .trust__item, .trust__item + .trust__item { padding: 16px 0 0; border-left: 0; }
  .trust__item + .trust__item { border-top: 1px solid var(--line); margin-top: 16px; }
}

/* =========================================================
   Area / Einzugsgebiet
   ========================================================= */
.area { padding: clamp(96px, 12vw, 180px) var(--gutter); background: var(--cream); }
.area__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 100px); align-items: center; }
.area h2 { color: var(--teal); max-width: 11ch; }
.area__sub { margin-top: 28px; font-size: 1.15rem; color: var(--muted); max-width: 44ch; }
.area__list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.area__list li { padding: 8px 16px; border: 1px solid var(--line); border-radius: 100px; font-size: .92rem; color: var(--teal); background: var(--paper); }
.area__list li.is-home { background: var(--teal); color: #fff; border-color: var(--teal); }
.area__note { margin-top: 24px; color: var(--muted); font-size: .95rem; }
.area__note a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }

.area-map { width: 100%; height: auto; overflow: visible; font-family: var(--f-sans); }
.area-map__ring { fill: none; stroke: var(--teal); stroke-opacity: .16; stroke-width: 1; stroke-dasharray: 3 5; }
.area-map__km { font-size: 9px; letter-spacing: .12em; fill: var(--muted); opacity: .7; }
.area-map__dortmund { fill: var(--teal); fill-opacity: .07; stroke: var(--teal); stroke-opacity: .25; stroke-width: 1; }
.area-map__city circle { fill: var(--paper); stroke: var(--gold); stroke-width: 2; }
.area-map__city--big circle { fill: var(--gold); }
.area-map__city text { font-size: 12.5px; font-weight: 500; fill: var(--teal); }
.area-map__city--big text { font-size: 14px; }
.area-map__center { fill: var(--teal); }
.area-map__pulse { fill: var(--gold); opacity: .25; transform-origin: center; animation: pulse 2.6s var(--ease-out) infinite; }
@keyframes pulse { 0% { transform: scale(.7); opacity: .45; } 100% { transform: scale(2.2); opacity: 0; } }
.area-map__roof { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.area-map__win rect { fill: var(--gold); }
.area-map__home-label { font-size: 15px; font-weight: 600; fill: var(--teal); letter-spacing: .02em; }
@media (max-width: 900px) { .area__grid { grid-template-columns: 1fr; } .area__map { max-width: 560px; } }

/* =========================================================
   WhatsApp button
   ========================================================= */
.wa {
  position: fixed; right: clamp(16px, 2.5vw, 32px); bottom: clamp(16px, 2.5vw, 32px); z-index: 40;
  display: flex; align-items: center; gap: 10px; height: 58px; padding: 0 12px;
  border-radius: 100px; background: var(--teal); color: #fff;
  box-shadow: 0 14px 40px -12px rgba(3, 42, 50, .55);
  transition: background .4s, padding .5s var(--ease-out), opacity .5s, transform .5s var(--ease-out);
}
.wa svg { width: 34px; height: 34px; flex: none; }
.wa__bubble { fill: none; stroke: #fff; stroke-width: 2; stroke-linejoin: round; }
.wa__phone { fill: var(--gold-soft); }
.wa__label { max-width: 0; overflow: hidden; white-space: nowrap; font-weight: 500; font-size: .95rem; transition: max-width .5s var(--ease-out); }
.wa:hover { background: var(--gold); padding-right: 22px; }
.wa:hover .wa__phone { fill: #fff; }
.wa:hover .wa__label { max-width: 100px; }
body.is-loading .wa { opacity: 0; transform: translateY(20px); pointer-events: none; }
@media (max-width: 700px) { .wa { height: 54px; padding: 0 10px; } }

/* Honeypot */
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form { position: relative; }
.form.is-sending .btn { opacity: .6; pointer-events: none; }
.form__status.is-error { color: #b3412f; }
.area-map__edge { fill: var(--gold); fill-opacity: .05; stroke: var(--gold); stroke-width: 1.5; stroke-dasharray: 2 6; stroke-linecap: round; }
.area-map__city text { font-size: 11px; }
.area-map__city--big text { font-size: 13.5px; font-weight: 600; }
.area__list li { padding: 6px 14px; font-size: .88rem; }

/* =========================================================
   Schnellzugang: Schaden melden
   ========================================================= */
.nav__actions { display: flex; align-items: center; gap: 18px; }
.nav__alert {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 100px;
  border: 1px solid rgba(179, 132, 58, .45); color: var(--teal); font-size: .9rem; font-weight: 500; white-space: nowrap;
  transition: background .35s, color .35s, border-color .35s;
}
.nav__alert svg { width: 16px; height: 16px; fill: var(--gold); transition: fill .35s; }
.nav__alert:hover { background: var(--gold); border-color: var(--gold); color: #fff; }
.nav__alert:hover svg { fill: #fff; }
.menu__alert { margin-top: 24px; font-size: clamp(1.3rem, 6vw, 1.8rem) !important; color: var(--gold) !important; }
@media (max-width: 860px) {
  .nav__actions .btn { display: none; }
  .nav__actions { gap: 6px; margin-left: auto; }
  .nav__alert { padding: 8px 12px; font-size: .82rem; }
}

.damage-info, .field--damage { display: none; }
.form.is-damage .damage-info { display: block; }
.form.is-damage .field--damage { display: block; }
.damage-info {
  padding: 18px 20px; border-radius: 16px; background: rgba(179, 132, 58, .12); border: 1px solid rgba(179, 132, 58, .35);
  font-size: .95rem; color: var(--ink);
}
.damage-info strong { color: var(--teal); }
.damage-info a { color: var(--teal); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.damage-info__gas { margin-top: 8px; font-size: .85rem; color: var(--muted); }
.field--damage label { font-size: .95rem; }

/* =========================================================
   Wartungsmodus / Coming soon (baustelle.html)
   ========================================================= */
.soon-page { min-height: 100vh; display: flex; flex-direction: column; }
.soon-nav { display: flex; justify-content: space-between; align-items: center; padding: 18px var(--gutter); }
.soon-nav__tel { font-weight: 500; color: var(--teal); border-bottom: 1px solid var(--gold); padding-bottom: 2px; }
.soon {
  flex: 1; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px);
  align-items: center; padding: clamp(24px, 4vw, 48px) var(--gutter) clamp(40px, 5vw, 72px);
}
.soon__title { font-size: clamp(3rem, 7.4vw, 7.6rem); color: var(--teal); letter-spacing: -0.045em; line-height: 0.95; }
.soon-line { display: block; overflow: hidden; padding-bottom: .06em; }
.soon-line > span { display: inline-block; }
.soon__lead { margin-top: clamp(24px, 3vw, 36px); font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: var(--muted); max-width: 46ch; }

.countdown { display: flex; gap: clamp(10px, 2vw, 22px); margin-top: clamp(28px, 3.5vw, 44px); }
.countdown div { min-width: clamp(64px, 7vw, 96px); padding: 14px 10px 12px; border: 1px solid var(--line); border-radius: 18px; text-align: center; background: var(--paper); }
.countdown b { display: block; font-size: clamp(1.7rem, 3vw, 2.6rem); font-weight: 400; color: var(--teal); letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.countdown span { display: block; margin-top: 6px; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }

.soon__contact { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: clamp(28px, 3.5vw, 44px); }
.link-arrow--none::before { content: none; }

.soon__visual { position: relative; }
.soon__house {
  aspect-ratio: 4 / 5; overflow: hidden; border-radius: 6px;
  clip-path: polygon(0% 24%, 50% 0%, 100% 24%, 100% 100%, 0% 100%);
}
.soon__house img { width: 100%; height: 100%; object-fit: cover; object-position: 38% center; }
.soon__badge { top: auto; bottom: -34px; right: auto; left: -34px; }

.soon-foot {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px;
  padding: 22px var(--gutter) 28px; border-top: 1px solid var(--line); font-size: .88rem; color: var(--muted);
}
.soon-foot nav { display: flex; gap: 24px; }
.soon-foot a:hover { color: var(--teal); }

@media (max-width: 900px) {
  .soon { grid-template-columns: 1fr; }
  .soon__visual { order: -1; max-width: 420px; width: 78%; margin: 0 auto; }
  .soon__house { aspect-ratio: 5 / 4; }
  .soon__badge { left: auto; right: -24px; bottom: -24px; }
}
@media (max-width: 560px) {
  .soon-nav__tel { display: none; }
  .countdown div { min-width: 0; flex: 1; }
}
@media (max-width: 560px) { .countdown span { letter-spacing: .08em; font-size: .62rem; } }
.soon__pre { margin-top: clamp(28px, 3.5vw, 40px); color: var(--muted); font-size: 1rem; max-width: 46ch; }
.soon__pre + .soon__contact { margin-top: 18px; }

/* =========================================================
   Eigentümer-Login, Erstgespräch, Download, Toast
   ========================================================= */
.nav__portal { display: inline-flex; align-items: center; gap: 7px; font-size: .88rem; color: var(--muted); padding: 8px 4px; transition: color .3s; white-space: nowrap; }
.nav__portal svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.nav__portal:hover { color: var(--teal); }
.menu__cta { margin-top: 24px; font-size: clamp(1.3rem, 6vw, 1.8rem) !important; color: var(--teal) !important; }
.menu__cta + .menu__alert { margin-top: 0; }
.menu__portal { font-size: 1.05rem !important; color: var(--muted) !important; margin-top: 12px; }
@media (max-width: 1240px) { .nav__portal { display: none; } .nav__links { gap: 26px; } }

.download {
  display: inline-flex; align-items: center; gap: 16px; margin-top: 32px; padding: 16px 22px 16px 16px;
  border: 1px solid var(--line); border-radius: 18px; background: var(--paper);
  transition: border-color .35s, transform .5s var(--ease-out), box-shadow .5s;
}
.download:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 16px 40px -24px rgba(5, 63, 75, .45); }
.download__icon { width: 46px; height: 46px; border-radius: 12px; background: var(--teal); display: grid; place-items: center; flex: none; }
.download__icon svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.download strong { display: block; color: var(--teal); font-weight: 500; }
.download small { display: block; color: var(--muted); font-size: .85rem; margin-top: 2px; }
.step__link { display: inline-block; margin-top: 14px; font-weight: 500; color: var(--gold); font-size: .95rem; }
.step__link:hover { color: var(--teal); }

.termin-info, .termin-fields, .field__hint { display: none; }
.form.is-termin .termin-info, .form.is-termin .field__hint { display: block; }
.form.is-termin .termin-fields { display: grid; }
.termin-info { padding: 16px 20px; border-radius: 16px; background: rgba(5, 63, 75, .06); border: 1px solid var(--line); font-size: .95rem; }
.termin-info strong { color: var(--teal); }
.termin-fields { border: 0; gap: 14px; }
.termin-fields legend { font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips span { display: inline-block; padding: 8px 16px; border-radius: 100px; border: 1px solid var(--line); font-size: .9rem; cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.chips input:checked + span { background: var(--gold); color: #fff; border-color: var(--gold); }
.chips input:focus-visible + span { outline: 2px solid var(--teal); outline-offset: 2px; }
.termin-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mini { display: grid; gap: 6px; font-size: .82rem; color: var(--muted); }
.mini input, .mini select {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff;
  font-size: .95rem; color: var(--ink); appearance: none; -webkit-appearance: none; min-height: 46px;
}
.mini select { background-image: linear-gradient(45deg, transparent 50%, var(--teal) 50%), linear-gradient(135deg, var(--teal) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 32px; }
.mini input:focus, .mini select:focus { outline: none; border-color: var(--gold); }
.field__hint { font-size: .8rem; color: var(--muted); margin-top: 6px; }
.field__note { font-size: .8rem; color: var(--muted); margin-top: 6px; }
@media (max-width: 480px) { .termin-row { grid-template-columns: 1fr; } }

.toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 60; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--teal); color: #fff; padding: 14px 22px; border-radius: 100px; font-size: .95rem;
  box-shadow: 0 16px 40px -16px rgba(3, 42, 50, .6); transition: opacity .4s, transform .5s var(--ease-out); max-width: calc(100vw - 32px); text-align: center;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* =========================================================
   404
   ========================================================= */
.notfound { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px var(--gutter) 64px; }
.notfound__mark svg { width: clamp(180px, 26vw, 280px); overflow: visible; }
.notfound__roof { fill: none; stroke: var(--teal); stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 300; animation: roof-draw 1.6s var(--ease-out) both; }
@keyframes roof-draw { from { stroke-dashoffset: 300; } to { stroke-dashoffset: 0; } }
.notfound__win rect { fill: var(--gold); animation: win-pop .5s var(--ease-out) both; transform-box: fill-box; transform-origin: center; }
.notfound__win rect:nth-child(2) { animation-delay: .1s; } .notfound__win rect:nth-child(3) { animation-delay: .2s; }
.notfound__win rect.is-off { fill: none; stroke: var(--gold); stroke-width: 2; stroke-dasharray: 4 4; animation-delay: .3s; }
@keyframes win-pop { from { transform: scale(0); } to { transform: scale(1); } }
.notfound .eyebrow { margin-top: 28px; }
.notfound__title { font-size: clamp(2.8rem, 7vw, 6rem); color: var(--teal); letter-spacing: -.045em; }
.notfound__lead { margin-top: 20px; color: var(--muted); font-size: 1.1rem; max-width: 44ch; }
.notfound__links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px 28px; margin-top: 32px; }

@media (max-width: 1100px) and (min-width: 761px) { .why__item { min-height: 0; padding: 28px; } .why__item h3 { margin-top: 32px; } }

/* WhatsApp-Button im Footer ausblenden (verdeckt sonst "Nach oben") */
.wa.is-away { opacity: 0; transform: translateY(20px); pointer-events: none; }
.wa { border: 1px solid rgba(255, 255, 255, .22); }

/* =========================================================
   "Warum Hillco" – Karten-Effekte
   ========================================================= */
.why__track { perspective: 1400px; }
.why__item { position: relative; overflow: hidden; transform-style: preserve-3d; will-change: transform; --mx: 50%; --my: 0%; }
.why__item::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .5s;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(216, 183, 124, .18), transparent 60%);
}
.why__item::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .5s;
  padding: 1px; background: radial-gradient(260px circle at var(--mx) var(--my), rgba(216, 183, 124, .75), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.why__item:hover::before, .why__item:hover::after { opacity: 1; }
.why__roof { position: absolute; right: clamp(20px, 3vw, 40px); top: clamp(24px, 3vw, 40px); width: clamp(90px, 9vw, 130px); overflow: visible; }
.why__roof path { fill: none; stroke: var(--gold-soft); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; opacity: .55; }
.why__n-mask { display: block; overflow: hidden; padding-top: .06em; }
.why__n { display: block; }
.why__item > *:not(.why__roof) { position: relative; z-index: 1; }
.wa { gap: 0; } .wa:hover { gap: 10px; }

/* Mobiles Menü: oben unter der Navigation beginnen, bei Bedarf scrollen */
.menu {
  justify-content: flex-start; gap: 2px;
  padding-top: calc(var(--nav-h, 104px) + clamp(16px, 4vh, 40px)); padding-bottom: 40px;
  overflow-y: auto; overscroll-behavior: contain;
}
.menu a { font-size: clamp(1.9rem, 8.5vw, 3rem); line-height: 1.25; }
.menu .menu__cta { margin-top: 28px; }

/* Leistungskarten: Illustrationen */
.card__side { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.card__ill { width: clamp(150px, 17vw, 240px); color: var(--teal); --acc: var(--gold); overflow: visible; }
.card__ill path, .card__ill circle { fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.card__ill .acc { stroke: var(--acc); }
.card__ill .acc-fill rect { fill: var(--acc); stroke: none; transform-box: fill-box; transform-origin: center; }
.card--dark .card__ill { color: #fff; --acc: var(--gold-soft); }
.card--gold .card__ill { color: #fff; --acc: var(--teal); }
@media (max-width: 760px) {
  .card__side { flex-direction: row; align-items: flex-end; }
  .card__ill { width: 110px; }
}

/* =========================================================
   Aktionsleiste (nur Handy)
   ========================================================= */
.actionbar { display: none; }
@media (max-width: 760px) {
  .wa { display: none; }
  .actionbar {
    display: flex; align-items: center; gap: 6px; position: fixed; z-index: 40;
    left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
    padding: 6px; border-radius: 100px;
    background: rgba(250, 248, 243, .88); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--line); box-shadow: 0 16px 40px -18px rgba(3, 42, 50, .5);
    transform: translateY(140%); transition: transform .6s var(--ease-out);
  }
  .actionbar.is-visible { transform: translateY(0); }
  .actionbar__btn {
    display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 0 0 auto; padding: 6px 12px;
    font-size: .68rem; font-weight: 500; color: var(--teal); letter-spacing: .02em;
  }
  .actionbar__btn svg { width: 20px; height: 20px; fill: none; stroke: var(--teal); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
  .actionbar__main {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; border-radius: 100px;
    background: var(--teal); color: #fff; font-weight: 500; font-size: .98rem;
  }
  .actionbar__main svg { width: 17px; height: 17px; fill: none; stroke: #fff; stroke-width: 1.8; }
  .footer { padding-bottom: 96px; }
}

/* =========================================================
   Preise & Preisrechner
   ========================================================= */
.pricing { padding: clamp(110px, 14vw, 200px) 0 clamp(80px, 10vw, 140px); }
.pricing .section-head { margin-bottom: clamp(36px, 5vw, 56px); }
.pricing__disclaimer {
  display: flex; gap: 12px; align-items: flex-start; margin-top: 22px; max-width: 72ch;
  padding: 14px 18px; border-radius: 14px; background: var(--cream); border: 1px solid rgba(179, 132, 58, .35);
  font-size: .92rem; color: var(--ink); line-height: 1.5;
}
.pricing__disclaimer svg { width: 20px; height: 20px; flex: none; margin-top: 1px; fill: none; stroke: var(--gold); stroke-width: 1.8; stroke-linecap: round; }
.pricing__disclaimer strong { color: var(--teal); font-weight: 600; }

.pricing__switch { position: relative; display: inline-flex; margin: 0 var(--gutter) clamp(28px, 4vw, 44px); padding: 5px; border-radius: 100px; background: #fff; border: 1px solid var(--line); }
.pricing__switch button { position: relative; z-index: 1; border: 0; background: none; padding: 12px 22px; border-radius: 100px; font-weight: 500; font-size: .95rem; color: var(--teal); cursor: pointer; transition: color .4s; white-space: nowrap; }
.pricing__switch button.is-active { color: #fff; }
.pricing__pill { position: absolute; top: 5px; bottom: 5px; left: 5px; width: 0; border-radius: 100px; background: var(--teal); transition: left .5s var(--ease-out), width .5s var(--ease-out); }

.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; padding: 12px var(--gutter) 0; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; padding: 30px 26px 26px; border-radius: 24px; background: #fff; border: 1px solid var(--line); transition: transform .5s var(--ease-out), box-shadow .5s; }
.plan:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -30px rgba(5, 63, 75, .45); }
.plan--featured { background: var(--teal); border-color: var(--teal); color: #fff; transform: translateY(-12px); box-shadow: 0 30px 60px -30px rgba(3, 42, 50, .7); }
.plan--featured:hover { transform: translateY(-16px); }
.plan__badge { position: absolute; top: 18px; right: 18px; padding: 5px 12px; border-radius: 100px; background: var(--gold); color: #fff; font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.plan__name { font-size: 1.7rem; letter-spacing: -.02em; color: var(--teal); }
.plan--featured .plan__name { color: #fff; }
.plan__desc { margin-top: 8px; font-size: .92rem; color: var(--muted); min-height: 4.2em; }
.plan--featured .plan__desc { color: rgba(255,255,255,.72); }
.plan__price { margin-top: 20px; color: var(--teal); line-height: 1; }
.plan__price b { font-size: clamp(2.4rem, 3.4vw, 3.2rem); font-weight: 400; letter-spacing: -.03em; }
.plan__from { font-size: .95rem; color: var(--muted); margin-right: 2px; }
.plan--featured .plan__price { color: #fff; } .plan--featured .plan__from { color: rgba(255,255,255,.7); }
.plan__per { margin-top: 8px; font-size: .82rem; color: var(--muted); line-height: 1.45; }
.plan--featured .plan__per { color: rgba(255,255,255,.7); }
.plan__ten { color: var(--gold); font-weight: 500; }
.plan--featured .plan__ten { color: var(--gold-soft); }
.plan__list { margin: 22px 0 26px; display: grid; gap: 10px; padding-top: 20px; border-top: 1px solid var(--line); }
.plan--featured .plan__list { border-color: rgba(255,255,255,.16); }
.plan__list li { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; line-height: 1.4; }
.plan__check { width: 16px; height: 16px; flex: none; margin-top: 2px; fill: none; stroke: var(--gold); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.plan__list li.is-off { opacity: .35; }
.plan__list li.is-off .plan__check { stroke: currentColor; }
.plan__list li.is-off span { text-decoration: line-through; text-decoration-thickness: 1px; }
.plan--featured .plan__check { stroke: var(--gold-soft); }
.plan__btn { margin-top: auto; text-align: center; padding: 13px 18px; border-radius: 100px; border: 1px solid var(--line); font-weight: 500; font-size: .92rem; color: var(--teal); transition: background .35s, color .35s, border-color .35s; }
.plan__btn:hover { background: var(--teal); color: #fff; border-color: var(--teal); }
.plan--featured .plan__btn { background: var(--gold); border-color: var(--gold); color: #fff; }
.plan--featured .plan__btn:hover { background: #fff; color: var(--teal); border-color: #fff; }
.pricing__foot { padding: 22px var(--gutter) 0; font-size: .82rem; color: var(--muted); }

.plan--weg { margin: 0 var(--gutter); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 56px); padding: clamp(28px, 4vw, 48px); }
.plan--weg__main { display: flex; flex-direction: column; align-items: flex-start; }
.plan--weg .plan__badge { position: static; margin-bottom: 18px; }
.plan--weg .plan__btn { margin-top: 26px; align-self: stretch; }
.plan--weg__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.plan--weg h4 { font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); font-weight: 500; }
.plan--weg .plan__list { margin: 14px 0 0; }
.plan__list--extra li::before { content: "+"; color: var(--gold); font-weight: 600; width: 16px; flex: none; text-align: center; }
.plan__note { margin-top: 14px; font-size: .82rem; color: var(--muted); }

.calc {
  margin: clamp(48px, 6vw, 80px) var(--gutter) 0; padding: clamp(28px, 4vw, 56px); border-radius: 32px;
  background: var(--teal); color: #fff; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center;
}
.calc__title { font-size: clamp(2rem, 3.6vw, 3.2rem); margin-bottom: 28px; }
.calc__title em { color: var(--gold-soft); }
.calc__label { display: flex; justify-content: space-between; align-items: baseline; font-size: .76rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-soft); margin: 22px 0 10px; }
.calc__label b { font-size: 1.6rem; letter-spacing: -.02em; color: #fff; font-weight: 400; text-transform: none; }
.calc__select { position: relative; }
.calc__select::after { content: ""; position: absolute; right: 20px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--gold-soft); border-bottom: 2px solid var(--gold-soft); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.calc select { width: 100%; appearance: none; -webkit-appearance: none; padding: 16px 44px 16px 18px; border-radius: 14px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: #fff; font-size: 1rem; }
.calc select option, .calc select optgroup { color: var(--ink); }
.calc input[type="range"] { width: 100%; -webkit-appearance: none; appearance: none; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--gold) var(--fill, 10%), rgba(255,255,255,.2) var(--fill, 10%)); outline: none; }
.calc input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 5px solid var(--gold); cursor: grab; }
.calc input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 5px solid var(--gold); cursor: grab; }
.calc__scale { display: flex; justify-content: space-between; margin-top: 10px; font-size: .78rem; color: rgba(255,255,255,.5); }
.calc__result { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 24px; padding: clamp(24px, 3vw, 36px); }
.calc__result .calc__label { margin-top: 0; }
.calc__total { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.calc__total b { font-size: clamp(2.8rem, 5vw, 4.4rem); font-weight: 400; letter-spacing: -.04em; line-height: 1; }
.calc__total span { color: rgba(255,255,255,.7); }
.calc__detail { margin-top: 10px; color: rgba(255,255,255,.8); font-size: .95rem; }
.calc__hint { margin-top: 6px; color: var(--gold-soft); font-size: .9rem; min-height: 1.4em; }
.calc__result .btn { margin-top: 22px; }
.calc__small { margin-top: 16px; font-size: .78rem; color: rgba(255,255,255,.6); line-height: 1.5; }

@media (max-width: 1100px) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .plan--featured { transform: none; } .plan--featured:hover { transform: translateY(-4px); }
}
@media (max-width: 900px) {
  .plan--weg, .calc { grid-template-columns: 1fr; }
  .plan--weg__cols { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .plans { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; scrollbar-width: none; }
  .plans::-webkit-scrollbar { display: none; }
  .plan { scroll-snap-align: center; }
  .pricing__switch { display: flex; margin-left: var(--gutter); margin-right: var(--gutter); }
  .pricing__switch button { flex: 1; padding: 12px 10px; font-size: .85rem; white-space: normal; line-height: 1.2; }
  .plan__desc { min-height: 0; }
}
.plan__desc { min-height: 4.8em; }
@media (max-width: 640px) { .calc__result .btn { width: 100%; justify-content: center; } }

/* Kombi-Vorteil */
.combo {
  display: flex; align-items: center; gap: 14px; margin: 0 var(--gutter) 22px; padding: 14px 20px; border-radius: 16px;
  background: linear-gradient(90deg, rgba(179,132,58,.16), rgba(179,132,58,.05)); border: 1px solid rgba(179,132,58,.4); font-size: .95rem; color: var(--ink);
}
.combo strong { color: var(--teal); }
.combo__icon { width: 38px; height: 38px; border-radius: 10px; background: var(--gold); display: grid; place-items: center; flex: none; }
.combo__icon svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.calc__toggle { display: flex; align-items: flex-start; gap: 12px; margin-top: 26px; cursor: pointer; font-size: .92rem; color: rgba(255,255,255,.85); line-height: 1.4; }
.calc__toggle[hidden] { display: none; }
.calc__toggle input { position: absolute; opacity: 0; pointer-events: none; }
.calc__toggle b { color: var(--gold-soft); font-weight: 500; }
.calc__switch { position: relative; width: 44px; height: 26px; flex: none; border-radius: 100px; background: rgba(255,255,255,.2); transition: background .3s; }
.calc__switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .35s var(--ease-out); }
.calc__toggle input:checked + .calc__switch { background: var(--gold); }
.calc__toggle input:checked + .calc__switch::after { transform: translateX(18px); }
.calc__toggle input:focus-visible + .calc__switch { outline: 2px solid var(--gold-soft); outline-offset: 2px; }
.calc__was { font-size: .5em; color: rgba(255,255,255,.5); text-decoration: line-through; margin-left: 4px; letter-spacing: 0; }

/* =========================================================
   Unterseiten (Service, Downloads, Ratgeber)
   ========================================================= */
.subpage .nav { background: rgba(250, 248, 243, .9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line); }
.sub { padding-top: clamp(130px, 14vw, 170px); min-height: 70vh; }
.sub-in { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.sub-in.is-in { opacity: 1; transform: none; }
.subhero { padding: 0 var(--gutter) clamp(36px, 5vw, 56px); max-width: 980px; }
.subhero__title { font-size: clamp(2.6rem, 6.4vw, 5.6rem); color: var(--teal); letter-spacing: -.045em; }
.subhero__lead { margin-top: 20px; font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--muted); max-width: 56ch; }
.subhero__lead a, .sub-note a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
.crumbs { font-size: .85rem; color: var(--muted); margin-bottom: 22px; display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs a { color: var(--teal); } .crumbs a:hover { color: var(--gold); }
.sub-note { padding: 32px var(--gutter) 0; font-size: .85rem; color: var(--muted); }

/* Service-Kacheln */
.stiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 0 var(--gutter); }
.stile { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 24px 22px 22px; border-radius: 22px; background: #fff; border: 1px solid var(--line); transition: transform .5s var(--ease-out), box-shadow .5s, border-color .35s; min-height: 170px; }
.stile:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -28px rgba(5, 63, 75, .45); border-color: var(--gold); }
.stile.is-active { border-color: var(--teal); box-shadow: 0 0 0 2px var(--teal) inset; }
.stile__icon { width: 44px; height: 44px; border-radius: 12px; background: var(--cream); display: grid; place-items: center; margin-bottom: 10px; }
.stile__icon svg { width: 22px; height: 22px; fill: none; stroke: var(--gold); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.stile__title { font-weight: 500; font-size: 1.1rem; color: var(--teal); }
.stile__text { font-size: .88rem; color: var(--muted); line-height: 1.45; }
.stile__arrow { position: absolute; right: 20px; top: 22px; color: var(--gold); transition: transform .4s var(--ease-out); }
.stile:hover .stile__arrow { transform: translateX(4px); }
.stile--alert { background: var(--teal); border-color: var(--teal); }
.stile--alert .stile__title { color: #fff; } .stile--alert .stile__text { color: rgba(255,255,255,.75); }
.stile--alert .stile__icon { background: rgba(255,255,255,.1); } .stile--alert .stile__icon svg { stroke: var(--gold-soft); }

.spanels { padding: 0 var(--gutter); }
.spanel { margin-top: 28px; padding: clamp(24px, 4vw, 48px); border-radius: 28px; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 30px 60px -45px rgba(5, 63, 75, .5); scroll-margin-top: 130px; max-width: 900px; }
.spanel__head h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); color: var(--teal); }
.spanel__head p { margin-top: 10px; color: var(--muted); max-width: 60ch; }
.sform { display: grid; gap: 20px; margin-top: 26px; }
.sgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.sform .mini input, .sform .mini select { background: #fff; }
.snote { font-size: .9rem; color: var(--muted); line-height: 1.5; padding: 14px 16px; border-radius: 14px; background: var(--cream); }
.snote a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
.snote strong { color: var(--teal); }
.snote--important { background: rgba(179, 132, 58, .14); border: 1px solid rgba(179, 132, 58, .45); color: var(--ink); }
.upload { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; cursor: pointer; }
.upload input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.upload__btn { padding: 12px 18px; border-radius: 100px; border: 1px dashed var(--gold); color: var(--teal); font-weight: 500; font-size: .92rem; background: #fff; }
.upload:hover .upload__btn { background: var(--cream); }
.upload__name { font-size: .88rem; color: var(--muted); }
.sform .btn { justify-self: start; }
.sform__status { font-size: .95rem; color: var(--teal); min-height: 1.4em; }
.sform__status.is-error { color: #b3412f; }
.sform.is-sending .btn { opacity: .6; pointer-events: none; }
.sfield.is-invalid input, .sfield.is-invalid select { border-color: #b3412f; }
.check.is-invalid span { color: #b3412f; }

/* Downloads */
.dlgroup { padding: 0 var(--gutter); margin-bottom: clamp(36px, 5vw, 56px); }
.dlgroup__title { font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); font-weight: 500; margin-bottom: 16px; }
.dlgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.dlcard { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; padding: 22px; border-radius: 20px; background: #fff; border: 1px solid var(--line); transition: transform .5s var(--ease-out), box-shadow .5s, border-color .35s; }
.dlcard:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: 0 20px 40px -28px rgba(5, 63, 75, .45); }
.dlcard__text strong { display: block; color: var(--teal); font-weight: 500; }
.dlcard__text small { display: block; margin-top: 4px; color: var(--muted); font-size: .88rem; line-height: 1.45; }
.dlcard__meta { grid-column: 2; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }

/* Ratgeber */
.rgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding: 0 var(--gutter); }
.rcard { display: flex; flex-direction: column; gap: 10px; padding: clamp(24px, 3vw, 36px); border-radius: 24px; background: #fff; border: 1px solid var(--line); min-height: 240px; transition: transform .5s var(--ease-out), box-shadow .5s, border-color .35s; }
.rcard:hover { transform: translateY(-4px); border-color: var(--gold); box-shadow: 0 24px 50px -30px rgba(5, 63, 75, .45); }
.rcard__tag { align-self: flex-start; padding: 4px 12px; border-radius: 100px; background: var(--cream); color: var(--gold); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.rcard__title { font-size: clamp(1.4rem, 2.2vw, 1.9rem); font-weight: 500; letter-spacing: -.02em; line-height: 1.15; color: var(--teal); }
.rcard__teaser { color: var(--muted); font-size: .98rem; }
.rcard__meta { margin-top: auto; font-size: .85rem; color: var(--muted); display: flex; justify-content: space-between; }
.rcard__meta b { color: var(--gold); transition: transform .4s var(--ease-out); } .rcard:hover .rcard__meta b { transform: translateX(4px); }

.article { padding: 0 var(--gutter); }
.article__head, .article__body { max-width: 760px; margin: 0 auto; }
.article__title { font-size: clamp(2.3rem, 5vw, 4.2rem); color: var(--teal); letter-spacing: -.04em; line-height: 1.02; }
.article__lead { margin-top: 20px; font-size: 1.2rem; color: var(--muted); }
.article__meta { margin-top: 18px; padding-bottom: 28px; border-bottom: 1px solid var(--line); font-size: .85rem; color: var(--muted); }
.article__body { padding-top: 12px; font-size: 1.08rem; line-height: 1.7; color: var(--ink); }
.article__body h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); color: var(--teal); margin: 44px 0 12px; letter-spacing: -.02em; line-height: 1.15; }
.article__body p { margin: 14px 0; }
.article__body ul { list-style: none; margin: 14px 0; display: grid; gap: 10px; }
.article__body li { position: relative; padding-left: 22px; }
.article__body li::before { content: ""; position: absolute; left: 0; top: .7em; width: 7px; height: 7px; background: var(--gold); }
.article__body strong { color: var(--teal); font-weight: 600; }
.article__box { margin: 28px 0; padding: 18px 22px; border-radius: 16px; background: var(--cream); border-left: 3px solid var(--gold); font-size: 1rem; }
.article__box p { margin: 0; }
.article__cta { margin: 48px 0 0; padding: clamp(24px, 4vw, 40px); border-radius: 24px; background: var(--teal); color: #fff; }
.article__cta-title { font-size: 1.6rem; font-weight: 500; letter-spacing: -.02em; }
.article__cta p { color: rgba(255,255,255,.8); }
.article__cta .btn { margin-top: 10px; }
.article__disclaimer { font-size: .85rem !important; color: var(--muted); margin-top: 28px !important; }
.rmore { max-width: 760px; margin: 56px auto 0; padding-top: 28px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.rmore__link { display: flex; gap: 14px; align-items: baseline; padding: 12px 0; font-weight: 500; color: var(--teal); border-bottom: 1px solid var(--line); }
.rmore__link span { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); min-width: 90px; }
.rmore__link:hover { color: var(--gold); }

/* Footer der Unterseiten */
.subfoot { margin-top: clamp(80px, 10vw, 140px); background: var(--teal-deep); color: #fff; padding: clamp(56px, 8vw, 100px) var(--gutter) 28px; }
.subfoot__title { font-size: clamp(2rem, 4.4vw, 3.6rem); letter-spacing: -.035em; font-weight: 500; line-height: 1.05; }
.subfoot__title em { color: var(--gold-soft); }
.subfoot__links { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; margin-top: 28px; }
.subfoot__links .link-arrow { color: #fff; }
.subfoot .footer__row { margin-top: clamp(48px, 6vw, 80px); }
.subfoot .footer__row nav { flex-wrap: wrap; gap: 16px 24px; }

@media (max-width: 1100px) { .stiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dlgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .stiles, .dlgrid, .rgrid, .sgrid { grid-template-columns: 1fr; }
  .stile { min-height: 0; }
}

/* Paket-Karussell (Handy): Pfeile + Punkte */
.plans-nav { display: none; }
@media (max-width: 640px) {
  .plans-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 14px; }
  .plans-nav__btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: #fff; display: grid; place-items: center; cursor: pointer; transition: opacity .3s, background .3s; }
  .plans-nav__btn svg { width: 18px; height: 18px; fill: none; stroke: var(--teal); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .plans-nav__btn:disabled { opacity: .3; }
  .plans-nav__btn.is-hint { animation: nudge-r 1.4s var(--ease-out) 2; }
  .plans-nav__btn[data-plans-prev].is-hint { animation-name: nudge-l; }
  .plans-nav__dots { display: flex; gap: 8px; }
  .plans-nav__dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 100px; background: rgba(5, 63, 75, .2); cursor: pointer; transition: width .4s var(--ease-out), background .3s; }
  .plans-nav__dots button.is-active { width: 26px; background: var(--gold); }
}
@keyframes nudge-r { 0%, 100% { transform: translateX(0); } 40% { transform: translateX(6px); } }
@keyframes nudge-l { 0%, 100% { transform: translateX(0); } 40% { transform: translateX(-6px); } }

/* =========================================================
   Vergleich, Ratgeber-Teaser, Service-Band, Rückruf
   ========================================================= */
.vs { padding: clamp(110px, 14vw, 180px) 0 0; }
.vs__table { margin: 0 var(--gutter); border-radius: 28px; overflow: hidden; border: 1px solid var(--line); background: #fff; }
.vs__row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 4fr) minmax(0, 5fr); align-items: center; }
.vs__row > span { padding: 20px 24px; font-size: .98rem; line-height: 1.45; }
.vs__row + .vs__row { border-top: 1px solid var(--line); }
.vs__row--head > span { padding-top: 22px; padding-bottom: 22px; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.vs__row--head .vs__brand { color: var(--gold-soft); }
.vs__topic { font-weight: 500; color: var(--teal); }
.vs__them { color: var(--muted); display: flex; gap: 10px; }
.vs__them i { font-style: normal; color: rgba(93, 111, 115, .6); }
.vs__us { background: var(--teal); color: #fff; display: flex; gap: 12px; align-self: stretch; align-items: center; }
.vs__row--head .vs__brand { background: var(--teal); align-self: stretch; }
.vs__us svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--gold-soft); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 760px) {
  .vs__row { grid-template-columns: 1fr; }
  .vs__row--head { display: none; }
  .vs__row > span { padding: 12px 20px; }
  .vs__topic { padding-top: 20px !important; font-size: .78rem !important; letter-spacing: .16em; text-transform: uppercase; color: var(--gold) !important; }
  .vs__them { padding-top: 0 !important; }
  .vs__them::before { content: "Oft:"; font-weight: 500; color: var(--muted); }
  .vs__them i { display: none; }
}

.rteaser { padding: clamp(110px, 14vw, 180px) 0 0; }
.rteaser__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.rteaser__all { color: var(--teal); font-weight: 500; }
.rteaser .rgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rteaser .rcard { min-height: 280px; }
.rteaser .rcard__title { font-size: clamp(1.2rem, 1.6vw, 1.45rem); }
@media (max-width: 1100px) { .rteaser .rgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .rteaser .rgrid { grid-template-columns: 1fr; } .rteaser .rcard { min-height: 0; } }

.sband { padding: clamp(40px, 6vw, 72px) var(--gutter) clamp(90px, 10vw, 140px); }
.sband__inner { display: grid; grid-template-columns: auto 1fr auto; gap: 24px 40px; align-items: center; padding: clamp(24px, 3.5vw, 40px); border-radius: 28px; background: var(--cream); border: 1px solid rgba(179, 132, 58, .3); }
.sband .eyebrow { margin-bottom: 8px; }
.sband__title { font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 500; letter-spacing: -.02em; line-height: 1.1; color: var(--teal); }
.sband__title em { display: block; }
.sband__links { display: flex; flex-wrap: wrap; gap: 8px; }
.sband__links a { padding: 9px 16px; border-radius: 100px; background: #fff; border: 1px solid var(--line); font-size: .9rem; color: var(--teal); transition: border-color .3s, background .3s; }
.sband__links a:hover { border-color: var(--gold); }
@media (max-width: 1000px) { .sband__inner { grid-template-columns: 1fr; } .sband .btn { justify-self: start; } }

.callback { margin-top: 36px; padding: 22px; border-radius: 20px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); display: grid; gap: 14px; }
.callback__title { display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: 1.1rem; }
.callback__title svg { width: 20px; height: 20px; fill: none; stroke: var(--gold-soft); stroke-width: 1.8; stroke-linejoin: round; }
.callback__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.callback__row select { grid-column: 1 / -1; }
.callback input:not([type="checkbox"]), .callback select { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: #fff; font-size: .95rem; appearance: none; -webkit-appearance: none; }
.callback input::placeholder { color: rgba(255,255,255,.55); }
.callback select option { color: var(--ink); }
.callback input:not([type="checkbox"]):focus, .callback select:focus { outline: none; border-color: var(--gold-soft); }
.callback .is-invalid, .callback input:invalid.touched { border-color: #e2a08f; }
.callback__check { color: rgba(255,255,255,.7); font-size: .82rem; }
.callback__check a { color: #fff; }
.callback .btn { justify-self: start; }
.callback .sform__status { color: var(--gold-soft); }
.callback .sform__status.is-error { color: #f0b3a5; }
.callback__check input { width: 16px; height: 16px; flex: none; margin-top: 2px; accent-color: var(--gold); }
.footer__row nav { flex-wrap: wrap; gap: 12px 24px; }
@media (max-width: 640px) { .footer__row { flex-direction: column; align-items: flex-start; } }

/* Kompakter Kopfbereich der Unterseiten: Inhalte sofort sichtbar */
.sub { padding-top: clamp(120px, 11vw, 150px); }
.subhero--split { max-width: none; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 16px 56px; align-items: end; padding-bottom: clamp(28px, 3.5vw, 44px); }
.subhero--split > .crumbs, .subhero--split > .eyebrow { grid-column: 1 / -1; margin-bottom: 0; }
.subhero--split .subhero__title { font-size: clamp(2.4rem, 4.8vw, 4.4rem); }
.subhero--split .subhero__lead { margin-top: 0; padding-bottom: .4em; }
@media (max-width: 900px) { .subhero--split { grid-template-columns: 1fr; } .subhero--split .subhero__lead { margin-top: 8px; } }
/* Unterseiten: noch kompakter */
.sub { padding-top: calc(var(--nav-h, 128px) + 18px); }
.subhero--split { gap: 10px 56px; padding-bottom: clamp(22px, 2.6vw, 32px); }
.subhero--split .eyebrow { margin-bottom: 4px; }
.subhero--split .subhero__title { font-size: clamp(2.2rem, 4.1vw, 3.8rem); line-height: .98; }
@media (max-width: 860px) { .sub { padding-top: calc(var(--nav-h, 102px) + 14px); } }

/* =========================================================
   Anfrage-Assistent (Verwaltungsanfrage)
   ========================================================= */
.wiz { display: none; }
.form.is-anfrage .wiz { display: grid; gap: 18px; }
.form.is-anfrage:not([data-step="5"]) .form__common { display: none; }
.form__common { display: grid; gap: 22px; }
.wiz__top { display: flex; align-items: center; gap: 14px; }
.wiz__progress { flex: 1; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.wiz__progress span { display: block; height: 100%; width: 25%; background: var(--gold); border-radius: 4px; transition: width .6s var(--ease-out); }
.wiz__count { font-size: .8rem; color: var(--muted); white-space: nowrap; }
.wiz__count b { color: var(--teal); }
.wiz__step { display: none; border: 0; gap: 16px; }
.wiz__step.is-active { display: grid; animation: wiz-in .5s var(--ease-out); }
@keyframes wiz-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.wiz__step legend { font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 500; color: var(--teal); letter-spacing: -.01em; margin-bottom: 14px; }
.wiz__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wiz__card input { position: absolute; opacity: 0; pointer-events: none; }
.wiz__card-in { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: #fff; cursor: pointer; height: 100%; transition: border-color .3s, box-shadow .3s, background .3s; }
.wiz__card-in svg { grid-row: span 2; width: 26px; height: 26px; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wiz__card-in b { font-weight: 500; color: var(--teal); font-size: .98rem; }
.wiz__card-in small { color: var(--muted); font-size: .8rem; line-height: 1.35; }
.wiz__card:hover .wiz__card-in { border-color: var(--gold); }
.wiz__card input:checked + .wiz__card-in { border-color: var(--teal); box-shadow: 0 0 0 2px var(--teal) inset; background: rgba(5, 63, 75, .03); }
.wiz__card input:focus-visible + .wiz__card-in { outline: 2px solid var(--gold); outline-offset: 2px; }
.wiz__range { display: grid; gap: 10px; }
.wiz__range span { display: flex; justify-content: space-between; align-items: baseline; font-size: .82rem; color: var(--muted); }
.wiz__range b { font-size: 1.6rem; font-weight: 400; color: var(--teal); }
.wiz__range input { width: 100%; accent-color: var(--gold); }
.wiz__start { margin-top: 4px; }
.wiz__nav { display: flex; justify-content: space-between; align-items: center; }
.wiz__back { border: 0; background: none; color: var(--muted); font-size: .92rem; cursor: pointer; padding: 8px 0; }
.wiz__back:hover { color: var(--teal); }
.wiz__back[hidden] { visibility: hidden; display: block; }
.form[data-step="5"] .wiz__nav [data-wiz-next] { display: none; }
.wiz__step .termin-info { margin-top: 4px; }
.wiz__summary { font-size: .88rem; color: var(--ink); padding: 12px 16px; border-radius: 14px; background: var(--cream); line-height: 1.5; }
.wiz__summary b { color: var(--teal); }
.mini input.is-invalid { border-color: #b3412f; }
@media (max-width: 480px) { .wiz__cards { grid-template-columns: 1fr; } }

/* Fotos bei Schadensmeldung */
.photos { display: none; }
.form.is-damage .photos { display: grid; gap: 12px; }
.photos__list { display: flex; flex-wrap: wrap; gap: 10px; }
.photos__item { position: relative; width: 76px; height: 76px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.photos__item img { width: 100%; height: 100%; object-fit: cover; }
.photos__item button { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(3, 42, 50, .75); color: #fff; font-size: 13px; line-height: 22px; cursor: pointer; }

/* Geschäftszeiten-Hinweis */
.hours-note { font-size: .88rem; line-height: 1.5; padding: 12px 16px; border-radius: 14px; background: rgba(5, 63, 75, .06); color: var(--ink); }
.hours-note b { color: var(--teal); }
.hours-note a { color: var(--teal); font-weight: 600; white-space: nowrap; }
.hours-note--dark { background: rgba(255,255,255,.08); color: rgba(255,255,255,.85); }
.hours-note--dark b, .hours-note--dark a { color: var(--gold-soft); }
.contact__small { display: block; margin-top: 4px; font-size: .82rem; color: rgba(255,255,255,.6); }
.spanels > .hours-note { margin-top: 24px; max-width: 900px; }

/* Notfall-Bestätigung */
.calldlg { border: 0; padding: clamp(28px, 4vw, 40px); border-radius: 28px; width: min(440px, calc(100vw - 32px)); background: var(--paper); color: var(--ink); text-align: center; box-shadow: 0 40px 80px -30px rgba(3, 42, 50, .6); }
.calldlg::backdrop { background: rgba(3, 42, 50, .55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.calldlg[open] { animation: dlg-in .45s var(--ease-out); }
@keyframes dlg-in { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
.calldlg__icon { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%; background: var(--teal); display: grid; place-items: center; animation: ring 1.6s var(--ease-out) .3s 2; }
.calldlg__icon svg { width: 28px; height: 28px; fill: none; stroke: var(--gold-soft); stroke-width: 1.8; stroke-linejoin: round; }
@keyframes ring { 0%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(-12deg); } 20%, 40% { transform: rotate(12deg); } 50% { transform: rotate(0); } }
.calldlg__title { font-size: 1.7rem; color: var(--teal); }
.calldlg__text { margin-top: 10px; color: var(--muted); }
.calldlg__tel { margin-top: 6px; font-size: clamp(1.7rem, 5vw, 2.1rem); font-weight: 500; color: var(--teal); letter-spacing: -.01em; }
.calldlg__gas { margin-top: 18px; padding: 12px 14px; border-radius: 14px; background: var(--cream); font-size: .85rem; line-height: 1.5; text-align: left; }
.calldlg__gas b { color: var(--teal); } .calldlg__gas a { color: var(--teal); font-weight: 600; }
.calldlg__actions { display: grid; gap: 10px; margin-top: 22px; }
.calldlg__actions .btn { justify-content: center; width: 100%; }
.calldlg__cancel { border: 0; background: none; color: var(--muted); font-size: .95rem; padding: 8px; cursor: pointer; }
.calldlg__cancel:hover { color: var(--teal); }
.calldlg { margin: auto; max-height: calc(100dvh - 32px); overflow-y: auto; }

/* Ratgeber: Themenfilter */
.rfilter { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 var(--gutter) 24px; }
.rfilter button { padding: 9px 18px; border-radius: 100px; border: 1px solid var(--line); background: #fff; color: var(--teal); font-weight: 500; font-size: .9rem; cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.rfilter button:hover { border-color: var(--gold); }
.rfilter button.is-active { background: var(--teal); color: #fff; border-color: var(--teal); }
.rcard[hidden] { display: none; }
.rmore__all { color: var(--gold) !important; }

/* Danke-Fenster nach dem Absenden */
.dankdlg__icon { animation: none; background: var(--gold); }
.dankdlg__icon svg { stroke: #fff; stroke-width: 2.4; }
.dankdlg__nr { margin-top: 18px; padding: 14px 16px; border-radius: 16px; background: var(--cream); display: grid; gap: 4px; justify-items: center; }
.dankdlg__nr span { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.dankdlg__nr strong { font: 600 clamp(1.15rem, 6.2vw, 1.9rem)/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--teal); letter-spacing: 0; white-space: nowrap; }
.dankdlg__copy { border: 0; background: none; color: var(--gold); font-size: .85rem; font-weight: 500; cursor: pointer; padding: 2px 6px; }
.dankdlg__info { margin-top: 12px; font-size: .88rem; color: var(--muted); line-height: 1.5; }

/* Status abfragen */
.statusform { display: grid; gap: 20px; margin-top: 26px; }
.statusform .btn { justify-self: start; }
.statusergebnis { padding: 18px 20px; border-radius: 18px; background: var(--cream); color: var(--ink); font-size: .95rem; line-height: 1.5; }
.statusergebnis.is-error { background: #fbeceb; color: #8c2f22; }
.statusergebnis__kopf { color: var(--muted); } .statusergebnis__kopf strong { color: var(--teal); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.statusleiste { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; padding: 0; }
.statusleiste li { padding-top: 10px; font-size: .82rem; color: var(--muted); border-top: 4px solid rgba(5,63,75,.15); }
.statusleiste li.is-done { border-color: var(--gold); color: var(--ink); }
.statusleiste li.is-current { font-weight: 600; color: var(--teal); }
.dankdlg__status { margin-top: 10px; font-size: .9rem; } .dankdlg__status a { color: var(--teal); font-weight: 500; }

.menu__staff { margin-top: 4px; opacity: .75; }

/* Online-Terminbuchung */
.buchung { display: grid; gap: 10px; } .buchung[hidden], .termin-row[hidden] { display: none; }
.buchung select { width: 100%; }
.buchung__wunsch { justify-self: start; border: 0; background: none; padding: 0; font: inherit; font-size: .85rem; color: var(--teal); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.wiz__step .termin-fields legend { font: 500 .78rem var(--f-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin: 0 0 10px; padding: 0; }
.buchung__leer { font-size: .9rem; line-height: 1.5; padding: 12px 14px; border-radius: 12px; background: #fff6e0; color: #6b4a00; margin: 0; } .buchung__leer a { color: inherit; font-weight: 600; }
.anker { display: block; position: relative; top: -110px; height: 0; visibility: hidden; }

/* Wartungsseite: Online-Terminbuchung */
.sb-karte { margin: 28px 0 8px; padding: 24px; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 60px -45px rgba(5, 63, 75, .45); display: grid; gap: 14px; max-width: 620px; }
.sb-karte[hidden] { display: none; }
.sb-karte__kicker { font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin: 0; }
.sb-karte__titel { font-size: clamp(1.4rem, 2.4vw, 1.8rem); line-height: 1.15; margin: 0; color: var(--teal); font-weight: 500; } .sb-karte__titel em { color: var(--gold); }
.sb-karte__text { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.5; }
.sb-chips { display: flex; flex-wrap: wrap; gap: 8px; } .sb-chips input { position: absolute; opacity: 0; pointer-events: none; }
.sb-chips span { display: inline-block; padding: 8px 16px; border-radius: 100px; border: 1px solid var(--line); font-size: .9rem; cursor: pointer; }
.sb-chips input:checked + span { background: var(--gold); color: #fff; border-color: var(--gold); } .sb-chips input:focus-visible + span { outline: 2px solid var(--teal); outline-offset: 2px; }
.sb-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .sb-reihe--3 { grid-template-columns: 1fr 1fr 1fr; }
.sb-reihe label { display: grid; gap: 5px; font-size: .78rem; color: var(--muted); }
.sb-reihe input, .sb-reihe select { font: inherit; font-size: .95rem; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--line); background: #fff; color: var(--ink); width: 100%; min-width: 0; }
.sb-check { display: flex; gap: 10px; align-items: flex-start; font-size: .82rem; color: var(--muted); line-height: 1.45; } .sb-check input { margin-top: 3px; accent-color: var(--teal); }
.sb-hp { position: absolute; left: -9999px; }
.sb-karte .btn { justify-self: start; }
.sb-status { margin: 0; font-size: .88rem; color: var(--teal); } .sb-status:empty { display: none; } .sb-status.is-fehler { color: #b3261e; }
@media (max-width: 700px) { .sb-reihe, .sb-reihe--3 { grid-template-columns: 1fr; } .sb-karte { padding: 18px; } }

/* ============ DIGITAL (Verwaltungssoftware – Nutzen für Eigentümer) ============ */
.digital { padding: clamp(110px, 14vw, 180px) var(--gutter) 0; }
.digital__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; max-width: 1400px; margin: 0 auto; }
.digital__head h2 { color: var(--teal); max-width: 13ch; }
.digital__lead { margin-top: 28px; font-size: 1.15rem; line-height: 1.6; color: var(--muted); max-width: 42ch; }
.digital__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.digital__item { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 26px 26px; }
.digital__item svg { width: 44px; height: 44px; fill: none; stroke: var(--teal); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 18px; }
.digital__item svg .acc { stroke: var(--gold); stroke-width: 2.4; }
.digital__item h3 { font-size: 1.2rem; color: var(--teal); margin-bottom: 8px; }
.digital__item p { color: var(--muted); line-height: 1.55; }
@media (max-width: 900px) { .digital__inner { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .digital__grid { grid-template-columns: 1fr; } .digital__item { padding: 22px 20px; } }

.legal .legal-teil { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-top: 72px; padding-top: 24px; border-top: 1px solid var(--line); scroll-margin-top: 90px; }
.legal h2[id] { scroll-margin-top: 90px; }
.legal-toc li { margin-bottom: 8px; }