/* GWH Dormann, Startseite (Entwurf)
   Farben aus dem Logo: Wasser #0DADC5, Feuer #EF2121, Sonne #FFED00.
   Formen: Medien und Kacheln 18px, alles Klickbare als Pille. */

@font-face { font-family: 'Archivo'; src: url(fonts/archivo.woff2) format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url(fonts/cormorant-italic-500.woff2) format('woff2'); font-style: italic; font-weight: 500; font-display: swap; }

:root {
  --kalk: #EEF0EE;
  --kalk-2: #E3E6E4;
  --tinte: #15181B;
  --tinte-2: #3B4148;
  --grau: #5E656C;
  --linie: rgba(21, 24, 27, .13);
  --nacht: #0F1113;
  --wasser: #0DADC5;
  --feuer: #EF2121;
  --sonne: #FFED00;
  --r: 18px;
  --rand: clamp(16px, 4vw, 56px);
  --breite: 1360px;
  --sans: 'Archivo', system-ui, sans-serif;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --weich: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; background: var(--kalk); color: var(--tinte); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, figure, blockquote, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
.i { width: 1.1em; height: 1.1em; flex: none; }

.skip { position: absolute; left: -999px; top: 8px; z-index: 30; background: var(--sonne); padding: 8px 14px; border-radius: 999px; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--tinte); outline-offset: 3px; border-radius: 4px; }

/* Typo */
.mega { font-family: var(--sans); font-weight: 850; font-stretch: 70%; text-transform: uppercase; line-height: .95; letter-spacing: -.005em; padding-bottom: .08em; }
.mega em { font-family: var(--serif); font-style: italic; font-weight: 500; text-transform: none; letter-spacing: -.02em; font-size: 1.1em; }
.gross { font-size: clamp(2.6rem, 5.6vw, 5.4rem); }
.riesig { font-size: clamp(3.2rem, 7.4vw, 7.6rem); }
.lead { font-size: clamp(1.05rem, 1.3vw, 1.2rem); color: var(--tinte-2); max-width: 56ch; margin-top: 20px; }
.dach { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--grau); }

/* Knöpfe */
.knopf { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border: 0; border-radius: 999px; font: 600 15px/1 var(--sans); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .3s, transform .2s; }
.knopf .i { transition: transform .4s var(--weich); }
.knopf:hover .i { transform: rotate(45deg); }
.knopf:active { transform: scale(.98); }
.knopf--gelb { background: var(--sonne); color: var(--tinte); }
.knopf--gelb:hover { background: #F5E200; }
.textlink { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 2px; }
.textlink .i { transition: transform .3s var(--weich); }
.textlink:hover .i { transform: translateX(4px); }

/* Kopf */
#oben { position: absolute; top: 0; height: 40px; }
.kopf { position: fixed; inset: 0 0 auto; z-index: 20; height: 72px; display: flex; align-items: center; gap: 32px; padding: 0 var(--rand); transition: background .3s, box-shadow .3s; }
.gescrollt .kopf { background: rgba(238, 240, 238, .88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--linie); }
.marke { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.marke img { width: 44px; height: 44px; }
.marke__text { display: grid; line-height: 1; }
.marke__text b { font-size: 25px; font-weight: 700; letter-spacing: -.02em; }
.marke__text small { font-size: 11px; color: var(--grau); margin-top: 3px; letter-spacing: .02em; }
.nav { display: flex; gap: 28px; }
.nav a { font-size: 15px; font-weight: 500; text-decoration: none; padding: 6px 0; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size .3s var(--weich); }
.nav a:hover { background-size: 100% 1.5px; }
.menue { display: none; width: 44px; height: 44px; border: 0; border-radius: 999px; background: var(--tinte); color: var(--kalk); align-items: center; justify-content: center; cursor: pointer; }
.menue .i { width: 22px; height: 22px; }

/* 1 Einstieg */
.held { max-width: var(--breite); margin: 0 auto; min-height: 100dvh; padding: 104px var(--rand) 48px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.held__titel { font-size: clamp(3.6rem, min(8.4vw, 15vh), 9rem); margin-top: 18px; }
.zeile { display: block; white-space: nowrap; }
.held__sub { font-size: clamp(1.05rem, 1.35vw, 1.25rem); color: var(--tinte-2); max-width: 36ch; margin-top: 24px; }
.held__aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 32px; }
.tel { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; }
.held__bild { position: relative; height: min(76vh, 700px); }
.duo { position: absolute; width: 49%; height: 82%; border-radius: var(--r); overflow: hidden; background: var(--tinte); }
.duo img { width: 100%; height: 100%; object-fit: cover; }
.duo--feuer { left: 0; bottom: 0; }
.duo--feuer img { object-position: 42% 50%; }
.duo--wasser { right: 0; top: 0; }
.duo--wasser img { object-position: 30% 50%; }
.duo__linie { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.duo__linie path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.siegel { position: absolute; left: 50%; top: 50%; width: clamp(84px, 9vw, 124px); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: var(--kalk); display: grid; place-items: center; box-shadow: 0 18px 40px -18px rgba(21, 24, 27, .45); }
.siegel img { width: 64%; }

/* Laufband */
.band { background: var(--tinte); color: var(--kalk); overflow: hidden; padding: 22px 0; }
.band__spur { display: flex; width: max-content; }
.band ul { display: flex; flex: none; }
.band li { display: flex; align-items: center; font: 700 clamp(1.1rem, 1.8vw, 1.6rem)/1 var(--sans); font-stretch: 75%; text-transform: uppercase; letter-spacing: .01em; white-space: nowrap; }
.band li::after { content: ''; width: 20px; height: 20px; margin: 0 28px; background: url(img/logo-zeichen.svg) center / contain no-repeat; }

/* Abschnitte */
.abschnitt { max-width: var(--breite); margin: 0 auto; padding: clamp(72px, 10vw, 140px) var(--rand); }
.leistungen { position: relative; }
.riese { position: absolute; top: clamp(20px, 4vw, 60px); left: 50%; translate: -50% 0; font: 900 clamp(8rem, 26vw, 24rem)/.8 var(--sans); font-stretch: 62%; text-transform: uppercase; color: rgba(21, 24, 27, .045); pointer-events: none; white-space: nowrap; z-index: 0; }
.kopfzeile { position: relative; margin-bottom: clamp(36px, 5vw, 64px); }

/* Bento */
.bento { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(280px, auto); gap: 16px; }
.kachel { position: relative; isolation: isolate; display: flex; align-items: flex-end; border-radius: var(--r); overflow: hidden; background: var(--tinte); color: #fff; text-decoration: none; }
.kachel > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .9s var(--weich); }
.kachel::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(12, 14, 16, .86) 0%, rgba(12, 14, 16, .35) 42%, rgba(12, 14, 16, 0) 68%); }
a.kachel:hover > img { transform: scale(1.04); }
.kachel__text { padding: clamp(20px, 2.4vw, 32px); }
.kachel h3 { font: 800 clamp(1.6rem, 2.4vw, 2.4rem)/1 var(--sans); font-stretch: 72%; text-transform: uppercase; }
.kachel p { font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .86); max-width: 44ch; margin-top: 10px; }
.kachel__pfeil { position: absolute; top: 18px; right: 18px; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .16); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .3s, color .3s; }
.kachel__pfeil .i { transition: transform .4s var(--weich); }
a.kachel:hover .kachel__pfeil { background: var(--sonne); color: var(--tinte); }
a.kachel:hover .kachel__pfeil .i { transform: rotate(45deg); }
.kachel--a { grid-column: 1 / 3; grid-row: 1 / 3; min-height: 580px; }
.kachel--b { grid-column: 3 / 5; }
.kachel--b > img { object-position: 50% 60%; }
.kachel--c { grid-column: 3; }
.kachel--d { grid-column: 4; }
.kachel--e { grid-column: 1 / 3; }
.kachel--e > img { object-position: 50% 66%; }
.kachel--f { grid-column: 3 / 5; background: var(--tinte); }
.kachel--f::after { display: none; }
.kachel__zeichen { position: absolute; right: -50px; bottom: -70px; width: 320px; filter: brightness(0) invert(1); opacity: .07; z-index: -1; }
.kachel--f .textlink { margin-top: 18px; color: var(--sonne); }

/* Bad mit Hinweisen */
.bad__kopf { margin-bottom: clamp(32px, 4vw, 52px); }
.anno__bild { position: relative; aspect-ratio: 3 / 2; border-radius: var(--r); overflow: hidden; background: var(--kalk-2); }
.anno__bild > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.anno__linien { position: absolute; inset: 0; width: 100%; height: 100%; }
.anno__linien line { stroke: #fff; stroke-width: 1.4; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 2px rgba(0, 0, 0, .35)); }
.anno__punkte { position: absolute; inset: 0; }
.punkt { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--tinte); font: 700 12px/1 var(--sans); box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
.punkt::after { content: ''; position: absolute; inset: -1px; border-radius: 50%; border: 1.5px solid #fff; }
.etikett { position: absolute; left: var(--lx); top: var(--ly); translate: 0 -50%; padding: 9px 16px; border-radius: 999px; background: rgba(255, 255, 255, .88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 14px; font-weight: 600; line-height: 1.2; white-space: nowrap; box-shadow: 0 8px 24px -10px rgba(0, 0, 0, .35); }
.links .etikett { translate: -100% -50%; }
.anno__legende { display: none; }

/* Wärme */
.waerme { position: relative; isolation: isolate; margin: 0 var(--rand); aspect-ratio: 2 / 1; max-height: 820px; width: auto; border-radius: var(--r); overflow: hidden; display: flex; align-items: center; }
.waerme__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.waerme::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(238, 240, 238, .9) 0%, rgba(238, 240, 238, .6) 32%, rgba(238, 240, 238, 0) 55%); }
.waerme__wellen { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.waerme__wellen path { fill: none; stroke: url(#g-waerme); stroke-width: 2.6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.waerme__text { padding: clamp(24px, 5vw, 72px); max-width: 600px; }
.waerme .textlink { margin-top: 28px; }

/* Ablauf */
.ablauf__kopf { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(24px, 4vw, 64px); align-items: end; margin-bottom: clamp(48px, 6vw, 88px); }
.ablauf__bild { border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 3; }
.ablauf__bild img { width: 100%; height: 100%; object-fit: cover; }
.schritte { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; }
.schritte::before { content: ''; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: linear-gradient(90deg, var(--feuer), var(--sonne) 50%, var(--wasser)); transform-origin: left; }
.schritte li { position: relative; padding-top: 40px; }
.schritte li::before { content: ''; position: absolute; top: 0; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--kalk); border: 2px solid var(--tinte); }
.nr { font: 800 2.6rem/1 var(--sans); font-stretch: 70%; color: var(--tinte); }
.schritte h3 { font-size: 19px; font-weight: 700; margin-top: 12px; }
.schritte p { font-size: 15.5px; line-height: 1.55; color: var(--tinte-2); margin-top: 8px; }

/* Projekte */
.projekte__kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(28px, 4vw, 48px); }
.leiste { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(240px, 24vw, 320px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 16px; scrollbar-width: thin; scrollbar-color: var(--tinte) transparent; }
.projekt { scroll-snap-align: start; }
.projekt img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r); background: var(--kalk-2); transition: transform .6s var(--weich); }
.projekt:hover img { transform: translateY(-6px); }
.projekt h3 { font-size: 18px; font-weight: 700; margin-top: 16px; line-height: 1.3; }
.projekt p { font-size: 14px; color: var(--grau); margin-top: 4px; }

/* Team */
.team__kopf { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(24px, 5vw, 80px); align-items: end; margin-bottom: clamp(40px, 5vw, 72px); }
.zitat p { font: italic 500 clamp(1.5rem, 2.2vw, 2rem)/1.25 var(--serif); }
.zitat footer { margin-top: 16px; font-size: 14px; font-weight: 600; color: var(--grau); }
.koepfe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.koepfe li { display: grid; justify-items: start; }
.koepfe img { width: min(100%, 230px); aspect-ratio: 1; object-fit: cover; margin-bottom: 14px; }
.koepfe b { font-size: 18px; }
.koepfe span { font-size: 14.5px; color: var(--grau); }
.crew { margin-top: clamp(36px, 4vw, 56px); padding-top: 24px; border-top: 1px solid var(--linie); color: var(--tinte-2); max-width: 90ch; }
.crew span { font-weight: 700; color: var(--tinte); }

/* Region */
.region { position: relative; isolation: isolate; aspect-ratio: 3 / 2; max-height: 980px; width: 100%; color: #fff; display: flex; align-items: flex-end; overflow: hidden; background: var(--nacht); }
.region__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.region::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(10, 12, 14, .92) 0%, rgba(10, 12, 14, .55) 34%, rgba(10, 12, 14, 0) 62%); }
.region__gipfel { position: absolute; left: 52.2%; top: 27.6%; width: 0; height: 0; }
.region__gipfel::before { content: ''; position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.region__gipfel::after { content: ''; position: absolute; left: 0; bottom: 0; width: 1px; height: 80px; background: linear-gradient(#fff0, #fff); }
.region__gipfel span { position: absolute; left: 12px; bottom: 70px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; opacity: .9; }
.region__inhalt { width: 100%; max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand) clamp(40px, 5vw, 72px); }
.region .lead { color: rgba(255, 255, 255, .82); }
.standorte { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: clamp(28px, 3vw, 44px); max-width: 860px; }
.standorte__weg { position: absolute; left: 12%; right: 12%; top: -14px; width: 76%; height: 28px; overflow: visible; }
.standorte__weg path { fill: none; stroke: rgba(255, 255, 255, .6); stroke-width: 1.4; stroke-dasharray: 4 6; vector-effect: non-scaling-stroke; }
.standort { padding: 22px 24px; border-radius: var(--r); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.standort h3 { font: 800 1.6rem/1 var(--sans); font-stretch: 72%; text-transform: uppercase; }
.standort__art { font-size: 13px; color: var(--sonne); font-weight: 600; margin: 6px 0 12px; }
.standort p:not(.standort__art) { display: flex; align-items: center; gap: 10px; font-size: 15px; color: rgba(255, 255, 255, .88); margin-top: 6px; }
.standort a { text-decoration: none; }

/* Jobs */
.jobs { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 88px); align-items: center; }
.jobs__bild { border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 5; }
.jobs__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 66% 50%; }
.jobs__wege { display: grid; gap: 12px; margin-top: 36px; max-width: 560px; }
.jobkarte { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 16px; padding: 20px 24px; border-radius: var(--r); background: #fff; text-decoration: none; transition: background .3s; }
.jobkarte b { font: 800 1.5rem/1.1 var(--sans); font-stretch: 72%; text-transform: uppercase; }
.jobkarte span { grid-column: 1; font-size: 14.5px; color: var(--grau); }
.jobkarte .i { grid-row: 1 / 3; grid-column: 2; width: 22px; height: 22px; transition: transform .4s var(--weich); }
.jobkarte:hover { background: var(--sonne); }
.jobkarte:hover .i { transform: rotate(45deg); }

/* Kontakt */
.kontakt { background: var(--nacht); color: #fff; padding: clamp(72px, 10vw, 140px) max(var(--rand), calc((100% - var(--breite)) / 2 + var(--rand))); display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(36px, 6vw, 100px); }
.kontakt__tel { display: inline-block; margin-top: 28px; font: 800 clamp(2rem, 4vw, 3.6rem)/1 var(--sans); font-stretch: 72%; color: var(--sonne); text-decoration: none; }
.kontakt__infos { margin-top: 28px; display: grid; gap: 10px; color: rgba(255, 255, 255, .8); }
.kontakt__infos li { display: flex; align-items: center; gap: 10px; }
.formular { display: grid; gap: 18px; align-content: start; }
.feld { display: grid; gap: 8px; }
.feld label { font-size: 14px; font-weight: 600; color: #D3D8DC; }
.feld small { font-weight: 400; color: #A3AAB0; }
.feld input, .feld select, .feld textarea { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06); color: #fff; font: 400 16px/1.4 var(--sans); }
.feld select option { color: var(--tinte); }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: 2px solid var(--sonne); outline-offset: 1px; border-color: transparent; }
.feld [aria-invalid="true"] { border-color: #FF8A80; }
.fehler { color: #FF9C94; font-size: 14px; }
.haken { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: #C7CDD2; }
.haken input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--sonne); flex: none; }
.formular .knopf { justify-self: start; margin-top: 6px; }
.formular :focus-visible { outline-color: var(--sonne); }
.danke { padding: 16px 18px; border-radius: 12px; background: rgba(255, 237, 0, .12); color: var(--sonne); font-weight: 600; }
.danke small { display: block; font-weight: 400; color: #C7CDD2; margin-top: 4px; }

/* Fuß */
.fuss { background: #0A0B0C; color: #A9B0B5; font-size: 14px; padding: 40px max(var(--rand), calc((100% - var(--breite)) / 2 + var(--rand))) 96px; display: grid; grid-template-columns: 2fr 1.4fr 1fr auto; gap: 28px; align-items: start; border-top: 1px solid rgba(255, 255, 255, .08); }
.fuss__marke { display: flex; gap: 14px; align-items: flex-start; }
.fuss b { color: #fff; }
.fuss nav { display: flex; gap: 20px; }
.fuss nav a { text-decoration: none; }
.fuss nav a:hover { color: #fff; }

.anruf { display: none; }

/* Bewegung: nur wenn erlaubt und JS läuft */
@media (prefers-reduced-motion: no-preference) {
  .bewegt .rein { opacity: 0; translate: 0 28px; transition: opacity .9s var(--weich), translate .9s var(--weich); }
  .bewegt .rein.ist-da { opacity: 1; translate: 0 0; }
  .bewegt .schritte.rein { opacity: 1; translate: 0 0; }
  .bewegt .schritte::before { transform: scaleX(0); transition: transform 1.8s var(--weich) .2s; }
  .bewegt .schritte.ist-da::before { transform: scaleX(1); }
  .bewegt .schritte li:nth-child(2) { transition-delay: .12s; }
  .bewegt .schritte li:nth-child(3) { transition-delay: .24s; }
  .bewegt .schritte li:nth-child(4) { transition-delay: .36s; }
  .bewegt .schritte li:nth-child(5) { transition-delay: .48s; }
  .bewegt .bento .rein:nth-child(even) { transition-delay: .1s; }

  .held__text > * { animation: hoch 1s var(--weich) both; }
  .held__text > :nth-child(2) { animation-delay: .08s; }
  .held__text > :nth-child(3) { animation-delay: .18s; }
  .held__text > :nth-child(4) { animation-delay: .26s; }
  .duo { animation: aufdecken 1.3s var(--weich) both .15s; }
  .duo--wasser { animation-delay: .3s; }
  .siegel { animation: hoch 1s var(--weich) both .7s; }
  .duo__linie path { stroke-dasharray: 1100; stroke-dashoffset: 1100; animation: zeichnen 2.2s var(--weich) forwards .8s; }

  .band__spur { animation: laufen 48s linear infinite; }
  .band:hover .band__spur { animation-play-state: paused; }

  .punkt::after { animation: puls 2.6s ease-out infinite; }
  .waerme__wellen path { animation: steigen 4.5s ease-in-out infinite; }
  .waerme__wellen path:nth-child(2) { animation-delay: 1.1s; }
  .waerme__wellen path:nth-child(3) { animation-delay: 2.2s; }
  .waerme__wellen path:nth-child(4) { animation-delay: 3.3s; }
}
@keyframes hoch { from { opacity: 0; translate: 0 24px; } }
@keyframes aufdecken { from { clip-path: inset(100% 0 0 0 round var(--r)); } to { clip-path: inset(0 0 0 0 round var(--r)); } }
@keyframes zeichnen { to { stroke-dashoffset: 0; } }
@keyframes laufen { to { transform: translateX(-50%); } }
@keyframes puls { from { scale: 1; opacity: .9; } to { scale: 2.2; opacity: 0; } }
@keyframes steigen { 0% { translate: 0 6%; opacity: 0; } 35% { opacity: 1; } 100% { translate: 0 -10%; opacity: 0; } }

/* Tablet */
@media (max-width: 1100px) {
  .nav { gap: 20px; }
  .kopf__cta { display: none; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kachel--a { grid-column: 1 / 3; grid-row: auto; min-height: 460px; }
  .kachel--b, .kachel--e, .kachel--f { grid-column: 1 / 3; }
  .kachel--c { grid-column: 1; }
  .kachel--d { grid-column: 2; }
  .schritte { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 40px; }
  .schritte::before { display: none; }
  .koepfe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fuss { grid-template-columns: 1fr 1fr; }
}

/* Handy */
@media (max-width: 760px) {
  body { font-size: 16px; }
  .kopf { height: 64px; gap: 12px; }
  .marke img { width: 38px; height: 38px; }
  .marke__text b { font-size: 21px; }
  .menue { display: inline-flex; }
  .nav { display: none; position: absolute; top: 64px; left: 12px; right: 12px; flex-direction: column; gap: 0; padding: 8px 20px; border-radius: var(--r); background: var(--kalk); box-shadow: 0 20px 40px -20px rgba(21, 24, 27, .5); }
  .nav a { font-size: 19px; padding: 14px 0; border-bottom: 1px solid var(--linie); background: none; }
  .nav a:last-child { border: 0; }
  .nav-offen .nav { display: flex; }

  .held { grid-template-columns: 1fr; min-height: 0; padding-top: 92px; gap: 36px; }
  .held__bild { height: 420px; }
  .bento { grid-template-columns: 1fr; grid-auto-rows: minmax(300px, auto); }
  .kachel--a, .kachel--b, .kachel--c, .kachel--d, .kachel--e, .kachel--f { grid-column: 1; min-height: 340px; }

  .anno__linien, .etikett { display: none; }
  .punkt { width: 24px; height: 24px; font-size: 11px; }
  .anno__legende { display: block; margin-top: 16px; }
  .anno__legende ol { list-style: decimal; padding-left: 22px; display: grid; gap: 6px; font-size: 15px; }

  .waerme { aspect-ratio: auto; flex-direction: column; align-items: stretch; background: #fff; }
  .waerme__bild { position: relative; aspect-ratio: 2 / 1; height: auto; }
  .waerme__wellen { height: auto; aspect-ratio: 2 / 1; bottom: auto; }
  .waerme::before { display: none; }
  .waerme__text { padding: 28px 22px 36px; }

  .ablauf__kopf, .team__kopf, .jobs, .kontakt { grid-template-columns: 1fr; }
  .schritte { grid-template-columns: 1fr; row-gap: 28px; }
  .projekte__kopf { flex-direction: column; align-items: flex-start; }
  .leiste { grid-auto-columns: 72%; }
  .koepfe { gap: 28px 16px; }

  .region { aspect-ratio: auto; flex-direction: column; align-items: stretch; }
  .region__bild { position: relative; aspect-ratio: 3 / 2; height: auto; }
  .region::before { background: linear-gradient(to top, var(--nacht) 0%, var(--nacht) 58%, rgba(10, 12, 14, 0) 72%); }
  .region__gipfel { top: calc(100vw * 2 / 3 * .276); }
  .region__gipfel::after { display: none; }
  .region__gipfel span { bottom: auto; top: -8px; left: 14px; font-size: 11px; }
  .region__inhalt { padding-top: 8px; }
  .standorte { grid-template-columns: 1fr; }
  .standorte__weg { display: none; }

  .fuss { grid-template-columns: 1fr; }
  .anruf { position: fixed; right: 16px; bottom: 16px; z-index: 15; display: inline-flex; align-items: center; gap: 8px; padding: 14px 20px; border-radius: 999px; background: var(--sonne); color: var(--tinte); font-weight: 700; text-decoration: none; box-shadow: 0 12px 30px -10px rgba(21, 24, 27, .55); }
}