/* Installateur Pichler (Demo): klar, vertrauenswürdig, Wasser.
   Weiß + Tiefblau + frisches Aqua, Barlow Semi Condensed für Überschriften
   und kleine Versal-Labels, Barlow für Text. Motiv: feine Wellenlinien. */

@font-face { font-family: "Barlow Semi Condensed"; font-weight: 600; font-display: swap; src: url("/demo/fonts/barlow-semi-condensed-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 700; font-display: swap; src: url("/demo/fonts/barlow-semi-condensed-700.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url("/demo/fonts/barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url("/demo/fonts/barlow-600.woff2") format("woff2"); }

:root {
  --bg: #ffffff; --surface: #f0f6fb; --ink: #0d2236; --muted: #4b5f72; --line: #d3e0ea;
  --blue: #0b4f8a; --navy: #06305a; --aqua: #3fd3c9; --aqua-ink: #087873; --aqua-soft: #dcf6f3;
  --sos: #c21f2a; --sos-dark: #9d1620;
  --accent: #0b4f8a; --on-accent: #fff; --accent-soft: #d6e7f5;
  --head: "Barlow Semi Condensed", "Arial Narrow", system-ui, sans-serif; --body: "Barlow", system-ui, sans-serif;
  --r: 10px; --maxw: 76rem;
  --shadow: 0 1px 2px rgb(6 48 90 / .06), 0 8px 24px rgb(6 48 90 / .08);
  --shadow-lg: 0 2px 4px rgb(6 48 90 / .06), 0 18px 40px rgb(6 48 90 / .14);
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='28' viewBox='0 0 160 28'%3E%3Cpath d='M0 14c20-12 60-12 80 0s60 12 80 0' fill='none' stroke='%23ffffff' stroke-opacity='.09' stroke-width='1.6'/%3E%3C/svg%3E");
  --wave-blue: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='28' viewBox='0 0 160 28'%3E%3Cpath d='M0 14c20-12 60-12 80 0s60 12 80 0' fill='none' stroke='%230b4f8a' stroke-opacity='.07' stroke-width='1.6'/%3E%3C/svg%3E");
}
body { font-size: 1.0625rem; line-height: 1.6; }
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -.005em; }
:focus-visible { outline-color: var(--blue); }
.i-wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: 1rem; }
@media (min-width: 40em) { .i-wrap { padding-inline: 2rem; } }

/* ---------- Bausteine */
.btn { border-radius: var(--r); font-family: var(--head); font-weight: 600; font-size: 1.08rem; letter-spacing: .01em; box-shadow: 0 1px 0 rgb(0 0 0 / .05); }
.btn:hover { background: var(--navy); border-color: var(--navy); }
.btn--ghost { background: transparent; color: var(--blue); border-color: var(--blue); }
.btn--ghost:hover { background: var(--blue); color: #fff; }
.btn--aqua { background: var(--aqua); border-color: var(--aqua); color: var(--navy); }
.btn--aqua:hover { background: #6fe2da; border-color: #6fe2da; color: var(--navy); }
.btn--line { background: transparent; border-color: rgb(255 255 255 / .55); color: #fff; }
.btn--line:hover { background: rgb(255 255 255 / .1); border-color: #fff; }
.btn--sos { background: var(--sos); border-color: var(--sos); color: #fff; }
.btn--sos:hover { background: var(--sos-dark); border-color: var(--sos-dark); }
.i-label { font-family: var(--head); font-size: .82rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--aqua-ink); margin-bottom: .7rem; display: flex; align-items: center; gap: .6rem; }
.i-label::before { content: ""; width: 1.6rem; height: 6px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='6' viewBox='0 0 26 6'%3E%3Cpath d='M1 3c3-2.6 5.5-2.6 8 0s5 2.6 8 0 5-2.6 8 0' fill='none' stroke='%233fd3c9' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain; }
.i-label--light { color: var(--aqua); }
.i-h2 { font-size: clamp(1.9rem, 4.6vw, 2.9rem); line-height: 1.05; color: var(--navy); }
.i-h3 { font-size: 1.6rem; color: var(--navy); margin-bottom: 1rem; }
.i-head { max-width: 42rem; margin-bottom: 2.25rem; }
.i-head p:not(.i-label) { margin-top: .8rem; color: var(--muted); }
.i-head--row { max-width: none; display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: end; }
.i-link { font-weight: 600; color: var(--blue); text-underline-offset: .3em; }
.i-small { font-size: .88rem; color: var(--muted); }
.i-section { padding-block: clamp(3.5rem, 8vw, 6rem); }
.i-section--top { padding-top: 2.5rem; }
.i-section--tint { background: var(--surface) var(--wave-blue); }
.i-ticks { list-style: none; padding: 0; display: grid; gap: .45rem; margin: 1.25rem 0 1.5rem; }
.i-ticks li { position: relative; padding-left: 1.8rem; }
.i-ticks li::before { content: ""; position: absolute; left: 0; top: .3em; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--aqua-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23087873' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 80%; }
.i-tag { display: inline-block; padding: .12rem .55rem; border-radius: 4px; background: var(--aqua-soft); color: var(--aqua-ink); font-family: var(--head); font-weight: 600; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }

/* ---------- Notdienst-Leiste: Desktop oben, Handy unten fixiert */
.i-sos { background: var(--navy); color: #e3eef8; font-size: .9rem; }
.i-sos__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: var(--maxw); margin-inline: auto; padding: .45rem 2rem; }
.i-sos__txt strong { color: #fff; font-family: var(--head); font-weight: 600; letter-spacing: .03em; }
.i-sos__btn { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .9rem; border-radius: 99px; background: var(--sos); color: #fff; font-family: var(--head); font-weight: 700; font-size: 1rem; letter-spacing: .02em; text-decoration: none; white-space: nowrap; }
.i-sos__btn:hover { background: var(--sos-dark); }
.i-sos__btn svg { width: 1.05rem; height: 1.05rem; }
.i-sos__btn:focus-visible { outline: 3px solid var(--aqua); outline-offset: 2px; }
.i-sos__short { display: none; }
@media (max-width: 47.99em) {
  .i-sos { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: .5rem .75rem calc(.5rem + env(safe-area-inset-bottom)); background: rgb(6 48 90 / .97); box-shadow: 0 -6px 24px rgb(6 48 90 / .25); }
  .i-sos__in { padding: 0; }
  .i-sos__txt { display: none; }
  .i-sos__btn { width: 100%; justify-content: center; min-height: 3.1rem; border-radius: var(--r); font-size: 1.15rem; }
  .i-sos__num { display: none; }
  .i-sos__short { display: inline; }
  /* Toast des Demo-Kits über die Notdienst-Leiste heben */
  .demo-toast { bottom: 5rem; }
  .sf__legal { padding-bottom: 6.5rem; }
}

/* ---------- Kopf */
.sh { position: relative; background: #fff; border-bottom: 1px solid var(--line); }
.sh__in { padding-inline: 1rem; }
@media (min-width: 40em) { .sh__in { padding-inline: 2rem; } }
.i-mark { width: 2.3rem; height: 2.3rem; flex: none; }
.i-word { display: grid; line-height: 1; }
.i-word__name { font-family: var(--head); font-weight: 700; font-size: 1.55rem; letter-spacing: .04em; text-transform: uppercase; color: var(--navy); }
.i-word__sub { font-family: var(--head); font-weight: 600; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--aqua-ink); margin-top: .2rem; }
.sh__nav li a { font-family: var(--head); font-weight: 600; font-size: 1.1rem; letter-spacing: .02em; }
.sh__nav a[aria-current="page"] { color: var(--blue); text-decoration-color: var(--aqua); }
.sh__cta { min-height: 2.6rem; padding-block: .45em; }
.sh__status { font-size: .82rem; color: var(--muted); }

/* ---------- Hero */
.i-hero { position: relative; background: linear-gradient(160deg, var(--navy) 0%, var(--blue) 70%, #0f62a6 100%); color: #e6f0f9; overflow: hidden; }
.i-hero::before { content: ""; position: absolute; inset: 0; background: var(--wave); pointer-events: none; }
.i-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2.5rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0 22c240-28 480-28 720 0s480 28 720 0v18H0z' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat bottom / 100% 100%; }
.i-hero__in { position: relative; z-index: 1; display: grid; gap: 2.25rem; padding-block: 2.75rem 4.5rem; }
@media (min-width: 60em) { .i-hero__in { grid-template-columns: 1.05fr 1fr; align-items: center; gap: 3.5rem; padding-block: 4.5rem 6rem; } }
.i-hero__h { font-size: clamp(2.6rem, 7.5vw, 4.6rem); line-height: .98; color: #fff; text-transform: uppercase; letter-spacing: .005em; }
.i-hero__h span { display: block; color: var(--aqua); text-transform: none; font-weight: 600; font-size: .62em; line-height: 1.1; margin-top: .5rem; }
.i-hero__lead { margin-top: 1.25rem; font-size: 1.15rem; max-width: 34rem; color: #cfe0ef; }
.i-hero__act { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.i-hero__status { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1.75rem; padding: .45rem .9rem; border-radius: 99px; background: rgb(255 255 255 / .1); font-size: .9rem; }
.i-hero__status .open-status { color: #fff; }
.i-hero__img { position: relative; }
.i-hero__img img, .i-hero__img .ph { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); box-shadow: 0 24px 60px rgb(0 0 0 / .3); }
.i-hero__img figcaption { position: absolute; left: .75rem; bottom: .75rem; right: .75rem; width: fit-content; padding: .45rem .75rem; border-radius: 6px; background: rgb(255 255 255 / .94); color: var(--ink); font-size: .85rem; font-weight: 600; box-shadow: var(--shadow); }

/* ---------- Fakten */
.i-facts { padding-block: 1rem 0; }
.i-facts__in { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 1.5rem; }
@media (min-width: 60em) { .i-facts__in { grid-template-columns: repeat(4, 1fr); } }
.i-facts p { display: grid; gap: .2rem; padding-left: .9rem; border-left: 3px solid var(--aqua); }
.i-facts strong { font-family: var(--head); font-size: 2.1rem; line-height: 1; color: var(--blue); }
.i-facts span { font-size: .9rem; color: var(--muted); }

/* ---------- Leistungskarten */
.i-cards { list-style: none; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.i-card a { display: flex; flex-direction: column; height: 100%; border-radius: var(--r); background: #fff; box-shadow: var(--shadow); text-decoration: none; overflow: hidden; transition: transform .2s, box-shadow .2s; }
.i-card a:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.i-card__img img, .i-card__img .ph { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.i-card__body { display: grid; gap: .45rem; padding: 1.15rem 1.25rem 1.35rem; flex: 1; align-content: start; border-top: 3px solid var(--aqua); }
.i-card h3 { font-size: 1.4rem; color: var(--navy); }
.i-card p { color: var(--muted); font-size: .97rem; }
.i-more { margin-top: .4rem; font-family: var(--head); font-weight: 600; color: var(--blue); }

/* ---------- Text + Bild */
.i-split { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 60em) { .i-split { grid-template-columns: 1fr 1fr; gap: 4rem; } .i-split--rev > :first-child { order: 2; } }
.i-split > div > p:not(.i-label) { margin-top: .9rem; color: var(--muted); max-width: 36rem; }
.i-split .btn { margin-top: 1.25rem; }
.i-split__media img, .i-split__media .ph { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); box-shadow: var(--shadow-lg); }
.i-example { margin-top: 1.5rem; padding: 1rem 1.2rem; border-radius: var(--r); background: #fff; border-left: 4px solid var(--aqua); box-shadow: var(--shadow); }
.i-example__k { font-size: .9rem; color: var(--muted); }
.i-example__v { font-family: var(--head); font-weight: 700; font-size: 1.7rem; color: var(--navy); font-variant-numeric: tabular-nums; }

/* ---------- Notdienst-Block */
.i-sos-block { position: relative; background: var(--navy) var(--wave); color: #d7e5f2; padding-block: clamp(3.5rem, 8vw, 6rem); scroll-margin-top: 1rem; }
.i-sos-block__in { display: grid; gap: 2.5rem; }
@media (min-width: 60em) { .i-sos-block__in { grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; } }
.i-sos-block .i-h2 { color: #fff; }
.i-sos-block__text > p:not(.i-label) { margin-top: .9rem; max-width: 34rem; }
.i-sos-block .i-small { color: #a9c0d6; margin-top: .9rem; }
.i-sos-block .btn--sos { margin-top: 1.5rem; font-size: 1.15rem; }
.i-sos-steps { list-style: none; padding: 0; counter-reset: s; display: grid; gap: .6rem; margin-top: 1.75rem; }
@media (min-width: 40em) { .i-sos-steps { grid-template-columns: 1fr 1fr; } }
.i-sos-steps li { counter-increment: s; display: grid; grid-template-columns: auto 1fr; gap: 0 .8rem; align-items: center; padding: .8rem .9rem; border-radius: var(--r); background: rgb(255 255 255 / .07); border: 1px solid rgb(255 255 255 / .1); }
.i-sos-steps li::before { content: counter(s); grid-row: span 2; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--aqua); color: var(--navy); font-family: var(--head); font-weight: 700; font-size: 1.1rem; }
.i-sos-steps b { font-family: var(--head); font-weight: 600; font-size: 1.1rem; color: #fff; }
.i-sos-steps span { font-size: .88rem; color: #b9cde0; }

.i-check { padding: 1.5rem; border-radius: var(--r); background: #fff; color: var(--ink); box-shadow: 0 24px 60px rgb(0 0 0 / .25); }
.i-check__q { font-family: var(--head); font-weight: 700; font-size: 1.6rem; color: var(--navy); margin-bottom: 1rem; }
.i-check__btns { display: flex; flex-wrap: wrap; gap: .5rem; }
.i-check__btn { min-height: 2.75rem; padding: .5rem 1rem; border: 1.5px solid var(--line); border-radius: 99px; background: #fff; font-weight: 600; font-size: .95rem; transition: border-color .15s, background .15s; }
.i-check__btn:hover { border-color: var(--blue); }
.i-check__btn[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
.i-check__hint { margin-top: 1.25rem; color: var(--muted); font-size: .95rem; }
.i-check__panel { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line); animation: rise .25s ease-out; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
.i-check__badge { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .75rem; border-radius: 6px; font-family: var(--head); font-weight: 700; font-size: .95rem; letter-spacing: .03em; text-transform: uppercase; }
.i-check__badge::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: currentColor; }
[data-lvl="now"] .i-check__badge, [data-lvl="gas"] .i-check__badge { background: #fde8e9; color: var(--sos-dark); }
[data-lvl="soon"] .i-check__badge { background: #fff3d6; color: #7a4b00; }
[data-lvl="later"] .i-check__badge { background: var(--aqua-soft); color: var(--aqua-ink); }
.i-check__panel ol { margin: 1rem 0 1.25rem; padding-left: 1.3rem; display: grid; gap: .45rem; }

/* ---------- Beitragskarten */
.i-posts { list-style: none; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.i-post a { display: flex; flex-direction: column; height: 100%; border-radius: var(--r); background: #fff; box-shadow: var(--shadow); text-decoration: none; overflow: hidden; transition: transform .2s, box-shadow .2s; }
.i-post a:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.i-post a:hover h2, .i-post a:hover h3 { color: var(--blue); text-decoration: underline; text-decoration-color: var(--aqua); text-underline-offset: .2em; }
.i-post__img img, .i-post__img .ph { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.i-post__body { display: grid; gap: .5rem; padding: 1.1rem 1.25rem 1.3rem; align-content: start; flex: 1; }
.i-post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .85rem; color: var(--muted); }
.i-post h2, .i-post h3 { font-size: 1.4rem; line-height: 1.12; color: var(--navy); }
.i-post__body > p:not(.i-post__meta):not(.i-post__date) { color: var(--muted); font-size: .96rem; }
.i-post__date { margin-top: auto; padding-top: .5rem; font-size: .82rem; color: var(--muted); }
@media (min-width: 60em) {
  .i-posts--all { grid-template-columns: repeat(3, 1fr); }
  .i-post--lead { grid-column: 1 / -1; }
  .i-post--lead a { display: grid; grid-template-columns: 1.4fr 1fr; }
  .i-post--lead .i-post__img img, .i-post--lead .i-post__img .ph { height: 100%; aspect-ratio: auto; min-height: 20rem; }
  .i-post--lead .i-post__body { padding: 2rem; align-content: center; }
  .i-post--lead h2 { font-size: 2.1rem; }
}
.blog-tools .search input { border-color: var(--line); }
.blog-tools .search input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--accent-soft); }
.chip { font-family: var(--head); font-weight: 600; font-size: 1rem; letter-spacing: .02em; }
.chip:hover { border-color: var(--blue); }
.chip[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
.blog-count { margin-bottom: 1rem; }
.i-empty { margin-top: 1rem; padding: 2.5rem 1.5rem; border: 2px dashed var(--line); border-radius: var(--r); text-align: center; display: grid; gap: .6rem; justify-items: center; }
.i-empty__h { font-family: var(--head); font-weight: 700; font-size: 1.5rem; color: var(--navy); }
.i-empty p:not(.i-empty__h) { color: var(--muted); }

/* ---------- Unterseiten-Kopf */
.i-page-hero { position: relative; background: linear-gradient(160deg, var(--navy), var(--blue)); color: #d5e5f3; padding: clamp(2.75rem, 7vw, 4.5rem) 0 clamp(3.25rem, 7vw, 5rem); overflow: hidden; }
.i-page-hero::before { content: ""; position: absolute; inset: 0; background: var(--wave); }
.i-page-hero .i-wrap { position: relative; }
.i-page-hero h1 { font-size: clamp(2.2rem, 6vw, 3.8rem); line-height: 1.02; color: #fff; max-width: 52rem; }
.i-page-hero p:not(.i-label) { margin-top: 1rem; max-width: 40rem; font-size: 1.12rem; }
.i-jump { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.75rem; }
.i-jump a { padding: .45rem 1rem; border-radius: 99px; border: 1.5px solid rgb(255 255 255 / .35); color: #fff; text-decoration: none; font-family: var(--head); font-weight: 600; letter-spacing: .02em; }
.i-jump a:hover { background: rgb(255 255 255 / .12); border-color: #fff; }

/* ---------- Leistungen */
.i-area { padding-block: clamp(3.5rem, 8vw, 5.5rem); scroll-margin-top: 1rem; }
.i-area--tint { background: var(--surface) var(--wave-blue); }
.i-prices { width: 100%; border-collapse: collapse; margin-bottom: .5rem; font-size: .97rem; }
.i-prices caption { caption-side: top; text-align: left; font-family: var(--head); font-weight: 600; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-bottom: .4rem; }
.i-prices th, .i-prices td { padding: .6rem 0; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; vertical-align: top; }
.i-prices td { text-align: right; font-family: var(--head); font-weight: 700; font-size: 1.1rem; color: var(--navy); white-space: nowrap; padding-left: 1rem; }
@media (max-width: 39.99em) { .i-prices td { white-space: normal; } }
.i-quiz-sec { background: var(--surface); }
.i-quiz-wrap { max-width: 52rem; }
.i-quiz { padding: clamp(1.25rem, 3vw, 2rem); border-radius: var(--r); background: #fff; box-shadow: var(--shadow-lg); }
.i-result { padding: 1.25rem; border-radius: var(--r); background: var(--aqua-soft); }
.i-result h3 { font-size: 1.5rem; color: var(--navy); margin: .3rem 0 .5rem; }
.i-result__tag { font-family: var(--head); font-weight: 600; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--aqua-ink); }
.i-quiz .wiz-step .btn { justify-self: start; }

/* ---------- Wizard (Badplaner) */
.opt { border-radius: var(--r); background: #fff; }
.opt__icon { font-size: 1.5rem; color: var(--blue); }
.opt__name { font-family: var(--head); font-size: 1.15rem; font-weight: 600; color: var(--navy); }
.wiz-step legend { color: var(--navy); }
.wiz__bar::after { background: linear-gradient(90deg, var(--blue), var(--aqua)); }
.range__val { font-family: var(--head); font-size: 1.3rem; }
.i-planner { display: grid; gap: 2.5rem; padding-top: 2.5rem; }
@media (min-width: 60em) { .i-planner { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 3rem; align-items: start; } .i-planner__aside { position: sticky; top: 1.5rem; } }
.i-wiz { padding: clamp(1.25rem, 3vw, 2rem); border-radius: var(--r); background: #fff; box-shadow: var(--shadow-lg); border-top: 4px solid var(--aqua); }
.i-estimate { background: var(--navy) var(--wave); color: #d5e5f3; }
.i-estimate .estimate__label, .i-estimate .estimate__note { color: #b4cadf; }
.i-estimate .estimate__val { color: #fff; font-size: clamp(1.5rem, 4vw, 2rem); }
.wiz-sum { background: var(--surface); }
.i-planner__aside { display: grid; gap: 1rem; padding: 1.5rem; border-radius: var(--r); background: var(--surface); }
.i-planner__aside h2 { font-size: 1.5rem; color: var(--navy); }
.i-planner__img img, .i-planner__img .ph { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: calc(var(--r) * .7); }
.i-steps-sm { padding-left: 1.3rem; display: grid; gap: .5rem; }
.i-steps-sm b { color: var(--navy); }
.i-aside-status { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; font-size: .92rem; }

/* ---------- Beitrag */
.i-article__head { padding: 2rem 0 1.5rem; background: var(--surface) var(--wave-blue); }
.i-article__head h1 { font-size: clamp(2.1rem, 5.8vw, 3.6rem); line-height: 1.02; color: var(--navy); max-width: 48rem; margin: .75rem 0 1rem; }
.i-article__lead { font-size: 1.18rem; max-width: 44rem; color: var(--ink); }
.i-article__by { margin-top: 1rem; font-size: .9rem; color: var(--muted); }
.i-crumbs ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; font-size: .88rem; color: var(--muted); margin-bottom: 1.25rem; }
.i-crumbs li + li::before { content: "›"; margin-right: .3rem; color: var(--aqua-ink); }
.i-crumbs a { color: var(--blue); }
.i-article__img { margin-top: 1.5rem; }
.i-article__img img, .i-article__img .ph { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--r); }
@media (max-width: 39.99em) { .i-article__img img, .i-article__img .ph { aspect-ratio: 3 / 2; } }
.i-article__grid { display: grid; gap: 2rem; padding-block: 2.5rem 1rem; }
@media (min-width: 60em) { .i-article__grid { grid-template-columns: 16rem minmax(0, 1fr); gap: 4rem; align-items: start; } .i-toc { position: sticky; top: 1.5rem; } }
.i-toc { padding: 1.25rem; border-radius: var(--r); background: var(--surface); border-left: 4px solid var(--aqua); }
.i-toc__h { font-family: var(--head); font-weight: 700; font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: .6rem; }
.i-toc ol { padding-left: 1.2rem; display: grid; gap: .45rem; font-size: .95rem; }
.i-toc a { color: var(--blue); text-decoration: none; }
.i-toc a:hover { text-decoration: underline; }
.i-toc__sos { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--line); font-size: .88rem; color: var(--muted); }
.i-toc__sos a { color: var(--sos-dark); font-weight: 600; }
.i-prose h2 { color: var(--navy); font-size: 1.75rem; }
.i-prose__sec { scroll-margin-top: 1.5rem; }
.i-prose__sec > * + * { margin-top: 1em; }
.i-prose ol, .i-prose ul { padding-left: 1.3em; }
.i-prose li + li { margin-top: .45em; }
.i-prose li::marker { color: var(--blue); font-weight: 700; }
.i-prose blockquote { border-left-color: var(--aqua); background: var(--aqua-soft); }
.i-checklist { margin-top: 2.5rem; padding: 1.5rem; border-radius: var(--r); border: 2px solid var(--aqua); }
.i-checklist__h { font-family: var(--head); font-weight: 700; font-size: 1.35rem; color: var(--navy); margin-bottom: .9rem; }
.i-checklist ul { list-style: none; padding: 0; display: grid; gap: .6rem; }
.i-checklist .chk input { accent-color: var(--aqua-ink); }
.i-checklist .chk:has(input:checked) span { text-decoration: line-through; color: var(--muted); }
.i-checklist__count { margin-top: 1rem; font-weight: 600; color: var(--aqua-ink); }
.i-checklist.is-complete .i-checklist__count::after { content: " · gut vorbereitet!"; }
.i-ctabox { margin-top: 3rem; padding: 1.75rem; border-radius: var(--r); background: var(--navy) var(--wave); color: #d5e5f3; }
.i-prose .i-ctabox h2 { margin-top: 0; color: #fff; font-size: 1.6rem; }
.i-ctabox__act { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; margin-top: 1.25rem; }
.i-ctabox__tel { color: #fff; font-weight: 600; }

/* ---------- Kontakt */
.i-contact { display: grid; gap: 2.5rem; padding-block: 2.5rem 4rem; }
@media (min-width: 60em) { .i-contact { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 3rem; align-items: start; } }
.i-form { display: grid; gap: 1.25rem; padding: clamp(1.25rem, 3vw, 2rem); border-radius: var(--r); background: #fff; box-shadow: var(--shadow-lg); border-top: 4px solid var(--aqua); }
.i-form .btn { justify-self: start; }
.i-topics { border: 0; padding: 0; }
.i-topics legend { font-weight: 600; margin-bottom: .6rem; }
.i-topic { cursor: pointer; }
.i-topic input { position: absolute; opacity: 0; }
.i-topic span { display: inline-flex; align-items: center; min-height: 2.6rem; padding: .4rem 1rem; border: 1.5px solid var(--line); border-radius: 99px; font-weight: 600; font-size: .95rem; }
.i-topic:hover span { border-color: var(--blue); }
.i-topic input:checked + span { background: var(--blue); border-color: var(--blue); color: #fff; }
.i-topic input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }
.i-contact__info { display: grid; gap: 1.25rem; }
.i-office, .i-addr { padding: 1.5rem; border-radius: var(--r); background: var(--surface); }
.i-office__h { font-family: var(--head); font-weight: 700; font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: .6rem; }
.i-office__status { margin-bottom: 1rem; }
.i-office__status .open-status { font-size: 1.05rem; }
.i-office__sos { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--line); font-size: .92rem; }
.i-addr address { font-style: normal; line-height: 1.7; margin-bottom: .75rem; }
.i-addr a { color: var(--blue); font-weight: 600; }
.i-addr .i-small { margin-top: .75rem; }

/* ---------- Fuß */
.sf { margin-top: 0; background: var(--navy) var(--wave); color: #cddcea; }
.sf__name { font-weight: 700; font-size: 1.6rem; color: #fff; text-transform: uppercase; letter-spacing: .03em; }
.sf__tag, .sf__legal { color: #9fb7cd; }
.sf__h { color: var(--aqua); font-family: var(--head); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: .85rem; }
.sf a { color: #fff; }
.sf__legal { border-color: #1d4b78; }
.sf .hours tr.is-today { color: var(--aqua); }
.legal { background: #fff; }
.legal h1 { color: var(--navy); }
.sf { border-top: 4px solid var(--aqua); }

/* ---------- Feinschliff: Sprungziele unter der fixen Weblux-Leiste */
.i-topic { position: relative; }
.i-area, .i-prose__sec, .i-sos-block { scroll-margin-top: 4.5rem; }
.i-prose__sec:first-child h2 { margin-top: 0; }
@media (min-width: 60em) { .i-toc, .i-planner__aside { top: 4rem; } }