/*
 * Kessler Haustechnik — Beispiel für das Paket „Klein & schnell" (599 €): eine Seite, alles drauf.
 * Bildidee: der Kreislauf. Warmes Wasser läuft vom Kessel durch den Heizkörper und zurück, kaltes
 * Wasser kommt von links dazu — die Anlage arbeitet, solange man hinsieht. Farben: warmes Weiß,
 * tiefes Blau, Orange für alles, was man drücken soll. Maße aus mass.css.
 */
:root {
  --grund: #F6F4EE; --flaeche: #FFFFFF; --tinte: #12233A; --gedaempft: #55627A;
  --akzent: #F05A28; --akzent-text: #FFFFFF; --akzent-tief: #C8461A; --blau: #1F5FA8; --warm: #F28C38;
  --linie: rgba(18, 35, 58, .12); --linie-stark: rgba(18, 35, 58, .26);
}
.marke .zeichen { color: var(--akzent); }

/* Erstes Bild */
.held { padding-block: calc(var(--block) / 2) var(--block); }
.held .zweispalt { align-items: center; }
.held h1 { max-width: 14ch; }
.notdienst { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; border-radius: var(--rund-knopf); background: var(--flaeche); border: 1px solid var(--linie); font-family: var(--display); font-weight: 600; font-size: 14.5px; margin-bottom: 18px; }
.tel-gross { display: inline-flex; align-items: center; gap: 12px; margin-top: calc(var(--luft) * 1.1); min-height: 64px; padding: 0 26px; border-radius: var(--rund-knopf); background: var(--akzent); color: #fff; text-decoration: none; font-family: var(--display); font-weight: 800; font-size: clamp(20px, 2.4vw, 26px); letter-spacing: -0.01em; box-shadow: 0 14px 34px -14px rgba(240, 90, 40, .7); }
.tel-gross small { font-family: var(--text); font-weight: 500; font-size: 13.5px; opacity: .9; letter-spacing: 0; }
@media (hover: hover) and (pointer: fine) { .tel-gross:hover { transform: translateY(-1px); } }

/* Die Weiche: Notfall oder Termin — zwei Wege, zwei Kästen */
.weiche { display: inline-flex; padding: 5px; border-radius: var(--rund-knopf); border: 1px solid var(--linie-stark); background: var(--flaeche); gap: 4px; margin-top: calc(var(--luft) * 1.2); }
.weiche button { min-height: 42px; padding: 0 18px; border-radius: var(--rund-knopf); font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--gedaempft); }
.weiche button[aria-pressed="true"] { background: var(--tinte); color: #fff; }
.weg { display: none; margin-top: var(--luft); }
.weg.da { display: block; }
.schritte { list-style: none; display: grid; gap: 10px; counter-reset: s; }
.schritte li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; counter-increment: s; font-size: 16px; line-height: 1.5; }
.schritte li::before { content: counter(s); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--tinte); color: #fff; font-family: var(--display); font-weight: 700; }
.schritte b { font-family: var(--display); }

/* Der Kreislauf */
.kreislauf { width: 100%; height: auto; }
.kreislauf .rohr { fill: none; stroke: var(--tinte); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; opacity: .18; }
.kreislauf .rohr--warm { stroke: var(--warm); opacity: .5; }
.kreislauf .rohr--kalt { stroke: var(--blau); opacity: .45; }
.kreislauf .kessel { fill: var(--flaeche); stroke: var(--tinte); stroke-width: 2; }
.kreislauf .heizkoerper rect { fill: var(--flaeche); stroke: var(--tinte); stroke-width: 2; }
.kreislauf .flamme { fill: var(--akzent); transform-origin: 50% 100%; transform-box: fill-box; animation: flackern 1.1s ease-in-out infinite alternate; }
.kreislauf .flamme.zwei { animation-delay: -.4s; }
.kreislauf .tropfen { fill: var(--warm); offset-path: path('M 300 118 H 430 A 20 20 0 0 1 450 138 V 234 A 20 20 0 0 1 430 254 H 300'); animation: fliessen 5.2s linear infinite; }
.kreislauf .tropfen.kalt { fill: var(--blau); offset-path: path('M 40 250 H 150 A 12 12 0 0 0 162 238 V 220'); animation: fliessen 3.4s linear infinite; }
.kreislauf .tropfen:nth-child(2) { animation-delay: -1.3s; }
.kreislauf .tropfen:nth-child(3) { animation-delay: -2.6s; }
.kreislauf .tropfen:nth-child(4) { animation-delay: -3.9s; }
.kreislauf .nadel { stroke: var(--akzent); stroke-width: 3; stroke-linecap: round; transform-origin: 232px 96px; animation: zeiger 6s ease-in-out infinite alternate; }
.kreislauf .waerme { fill: none; stroke: var(--warm); stroke-width: 2; stroke-linecap: round; opacity: 0; animation: steigen 2.6s ease-out infinite; }
.kreislauf .waerme:nth-of-type(2) { animation-delay: .9s; }
.kreislauf .waerme:nth-of-type(3) { animation-delay: 1.8s; }
.kreislauf text { font-family: var(--display); font-weight: 600; font-size: 12px; fill: var(--gedaempft); letter-spacing: .06em; text-transform: uppercase; }
@keyframes fliessen { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes flackern { from { transform: scaleY(.85) scaleX(1.05); } to { transform: scaleY(1.1) scaleX(.95); } }
@keyframes zeiger { from { transform: rotate(-52deg); } to { transform: rotate(38deg); } }
@keyframes steigen { 0% { opacity: 0; transform: translateY(6px); } 30% { opacity: .9; } 100% { opacity: 0; transform: translateY(-16px); } }

/* Leistungen */
.leistung h3 { margin-bottom: 8px; }
.leistung p { font-size: 15.5px; color: var(--gedaempft); }
.leistung .ikon { width: 44px; height: 44px; margin-bottom: 14px; color: var(--akzent); }
.nicht { margin-top: var(--luft); padding: 18px 20px; border-radius: var(--rund); border: 1px dashed var(--linie-stark); }
.nicht b { font-family: var(--display); }
.nicht ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; font-size: 15px; color: var(--gedaempft); }
.nicht li::before { content: '– '; }

/* Gebiet */
.gebiet .chips span { background: var(--flaeche); }
.gebiet .stand { margin-top: 14px; }

/* Beweis */
.zahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--luft); }
.zahl b { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(30px, 3.6vw, 44px); letter-spacing: -0.03em; line-height: 1; }
.zahl span { display: block; margin-top: 8px; font-size: 14.5px; color: var(--gedaempft); }
.hersteller { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: var(--luft); font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--gedaempft); }
.gesicht { display: flex; gap: 16px; align-items: center; }
.gesicht i { width: 64px; height: 64px; border-radius: 50%; background: var(--tinte); color: #fff; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 22px; font-style: normal; flex: none; }
.gesicht b { font-family: var(--display); display: block; }
.gesicht small { color: var(--gedaempft); font-size: 14px; }

/* Kontakt */
.kontakt .karte--tel { display: grid; gap: 10px; }
.kontakt .karte--tel a.tel { font-family: var(--display); font-weight: 800; font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -0.02em; text-decoration: none; }
.route { display: grid; gap: 14px; }
.karte-skizze { width: 100%; height: auto; border-radius: var(--rund); }
.karte-skizze .strasse { fill: none; stroke: var(--linie-stark); stroke-width: 6; stroke-linecap: round; }
.karte-skizze .strasse--gross { stroke-width: 10; }
.karte-skizze .bahn { fill: none; stroke: var(--blau); stroke-width: 2; stroke-dasharray: 6 5; }
.karte-skizze .pin { fill: var(--akzent); }
.karte-skizze .puls { fill: none; stroke: var(--akzent); stroke-width: 2; transform-origin: 300px 150px; animation: pulsen 2.2s ease-out infinite; }
.karte-skizze text { font-family: var(--display); font-weight: 600; font-size: 12px; fill: var(--gedaempft); }
@keyframes pulsen { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(1.8); opacity: 0; } }

@media (max-width: 980px) { .zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .weiche { width: 100%; } .weiche button { flex: 1; padding: 0 10px; } .tel-gross { width: 100%; flex-direction: column; gap: 2px; padding: 12px 20px; } }
@media (prefers-reduced-motion: reduce) { .kreislauf .tropfen, .kreislauf .flamme, .kreislauf .nadel, .kreislauf .waerme, .karte-skizze .puls { animation: none; } .kreislauf .tropfen { offset-distance: 50%; } .kreislauf .waerme { opacity: .8; } }