/* =========================================================
   KR-M Bau GmbH — Startseite (Entwurf v1)
   Palette: seriöses Rot + seriöses Blau auf warmem, hellem Grund
   Type: Fraunces (Display) · Inter (Text) · Great Vibes (Slogan)
   ========================================================= */

:root{
  --paper:      #F1EDE4;   /* warmer, heller Grund – nicht weiß */
  --paper-2:    #E9E4D8;   /* leicht tiefer, für Wechselflächen */
  --paper-light:#F6F2EA;   /* heller Grund (Willkommen→Qualität) – nicht weiß */
  --card:       #FBFAF6;
  --ink:        #20242B;   /* fast-schwarz, warm */
  --ink-soft:   #565C66;
  --red:        #B01E24;   /* seriöses Markenrot */
  --red-deep:   #8C171C;
  --red-bright: #EE1C22;   /* klares, kräftiges Rot für Text auf dunklen Bildern */
  --blue:       #1C3D5A;   /* seriöses Marineblau */
  --blue-deep:  #142C42;
  --green:      #24B863;   /* geprüft/nachhaltig – klares, aber fröhlich-lebendiges Grün */
  --green-deep: #16A052;
  --line:       rgba(32,36,43,.14);

  --wrap: 1200px;
  --pad: clamp(20px, 5vw, 64px);
  --r: 14px;

  --f-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-script: "Great Vibes", "Segoe Script", cursive;
}

*,*::before,*::after{ box-sizing:border-box; }
/* --head-h wird per JS auf die echte Höhe der fixen Kopfleiste gesetzt (variiert je nach
   Gerät und Notch). So schließt ein Sprungziel bündig an die Leiste an, statt einen
   Streifen des vorherigen Abschnitts stehen zu lassen. */
/* Weiches Scrollen erst NACH dem Laden einschalten (Klasse kommt aus main.js).
   Ist es schon beim Seitenaufbau aktiv, verhindert es, dass der Browser die
   Scroll-Position beim Neuladen wiederherstellt – man landet dann immer oben. */
html{ scroll-behavior:auto; scroll-padding-top:var(--head-h, 70px); }
html.is-loaded{ scroll-behavior:smooth; }
/* Beim Neuladen mitten auf der Seite sollen die Einblend-Animationen nicht erneut
   ablaufen – sonst „leuchtet“ beim Start alles auf. Was schon im Bild ist, wird
   ohne Bewegung direkt in den Endzustand gesetzt (Klasse kommt aus main.js). */
.no-anim, .no-anim *, .no-anim::before, .no-anim::after{
  transition:none !important; animation:none !important; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-body); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; }
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.center{ text-align:center; }

/* ---------- emblem ---------- */
.krm-arc{ font-family:var(--f-body); font-size:13px; font-weight:600; letter-spacing:2.2px; fill:#fff; }
.krm-arc--bot{ font-size:11px; letter-spacing:1.6px; }
.krm-word{ font-family:var(--f-display); font-weight:900; fill:var(--red); font-size:38px; letter-spacing:.5px; }
.krm-word--sm{ font-size:28px; letter-spacing:2px; }

/* ---------- buttons ---------- */
.btn{
  --bg:var(--red); --fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-weight:600; font-size:.98rem; letter-spacing:.2px;
  padding:.86em 1.5em; border-radius:999px; cursor:pointer; border:1.5px solid transparent;
  background:var(--bg); color:var(--fg);
  transition:transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn--red{ background:var(--red); color:#fff; box-shadow:0 10px 24px -12px rgba(176,30,36,.8); }
.btn--red:hover{ background:var(--red-deep); }
.btn--ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.55); }
.btn--ghost:hover{ background:#fff; color:var(--blue-deep); border-color:#fff; }
.btn--outline{ background:transparent; color:var(--blue); border-color:var(--blue); }
.btn--outline:hover{ background:var(--blue); color:#fff; }
.btn--block{ width:100%; }

/* ---------- headings / eyebrows ---------- */
.h2{ font-family:var(--f-display); font-weight:600; line-height:1.05;
  font-size:clamp(1.9rem,4.2vw,3.1rem); letter-spacing:-.01em; }
.h2--center{ text-align:center; }
.h2--light{ color:#fff; }
.eyebrow{ display:flex; align-items:center; gap:.6em; margin:0 0 1rem;
  font-size:.78rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--red); }
.eyebrow span{ width:26px; height:2px; background:currentColor; display:inline-block; }
.eyebrow--center{ justify-content:center; color:var(--red); }
.eyebrow--light{ color:#EBB9A0; }
/* Reveal: erst ein roter Strich, der sich beim Reinscrollen teilt und den Text rausfährt */
.eyebrow--reveal{ gap:0; }
.eyebrow--reveal .eyebrow__word{ width:auto; height:auto; background:none; display:inline-block;
  max-width:0; padding:0; opacity:0; overflow:hidden; white-space:nowrap; text-align:center;
  transition:max-width 1.2s cubic-bezier(.33,0,.2,1), padding 1.2s cubic-bezier(.33,0,.2,1), opacity .8s ease .3s; }
.eyebrow--reveal.is-in .eyebrow__word{ max-width:17rem; padding:0 .55em; opacity:1; }
@media (prefers-reduced-motion:reduce){
  .eyebrow--reveal .eyebrow__word{ transition:none; max-width:17rem; padding:0 .55em; opacity:1; }
}
/* fährt beim Reinscrollen von unten hoch – vorher gar nicht sichtbar.
   Bewusst gemächlich, damit man das Aufkommen mitbekommt. */
.rise{ opacity:0; transform:translateY(22px);
  transition:opacity .85s ease .1s, transform 1s cubic-bezier(.22,.61,.36,1) .1s; }
.rise.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .rise{ transition:none; opacity:1; transform:none; }
}
.section-head{ max-width:640px; margin:0 auto clamp(2rem,4vw,3.4rem); text-align:center; }
.section-lead{ color:var(--ink-soft); margin:.9rem 0 0; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; gap:1.4rem;
  padding:calc(.55rem + env(safe-area-inset-top,0px)) max(var(--pad),env(safe-area-inset-right,0px)) .55rem max(clamp(14px,3vw,34px),env(safe-area-inset-left,0px));
  background:rgba(254,252,249,.93); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
/* solide Füllung nur im Notch-/Statusleisten-Bereich (iPhone), damit das Grau oben nahtlos
   in die Statusleiste läuft — der sichtbare Balken darunter bleibt leicht durchsichtig */
.site-header::before{ content:""; position:absolute; top:0; left:0; right:0;
  height:env(safe-area-inset-top,0px); background:var(--paper); pointer-events:none; }
.brand{ display:flex; align-items:center; gap:.7rem; margin-right:auto; }
.brand__mark{ width:46px; height:46px; flex:0 0 auto; }
.brand__name{ font-family:var(--f-display); font-weight:700; font-size:1.5rem; line-height:1; color:var(--red); white-space:nowrap; display:inline-flex; align-items:baseline; gap:.45em; }
.brand__gmbh{ font-family:var(--f-body); font-weight:700; font-size:.55em; letter-spacing:.16em; color:var(--red); text-transform:uppercase; }
.brand__strokes{ width:22px; height:19px; flex:0 0 auto; align-self:center; margin-left:.2rem; }
.brand__strokes line{ stroke:var(--blue); stroke-width:2.6; stroke-linecap:round; }
.nav{ display:flex; gap:1.7rem; }
.nav a{ font-weight:500; font-size:.98rem; color:var(--ink); position:relative; padding:.3em 0; }
.nav a::after{ content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px; background:var(--red); transition:right .25s ease; }
.nav a:hover{ color:var(--red); }
.nav a:hover::after{ right:0; }
.tel-pill{ display:inline-flex; align-items:center; gap:.5em; background:var(--red); color:#fff;
  padding:.6em 1.1em; border-radius:999px; font-weight:600; font-size:.92rem;
  box-shadow:0 10px 22px -12px rgba(176,30,36,.85); transition:background .18s, transform .18s; }
.tel-pill:hover{ background:var(--red-deep); transform:translateY(-1px); }
.tel-pill svg{ width:17px; height:17px; fill:currentColor; }
.burger{ display:none; background:none; border:0; width:40px; height:40px; padding:8px; cursor:pointer; }
.burger span{ display:block; height:2px; background:var(--ink); margin:5px 0; transition:transform .3s cubic-bezier(.22,.61,.36,1), opacity .2s ease; border-radius:2px; }
.site-header.open .burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.site-header.open .burger span:nth-child(2){ opacity:0; }
.site-header.open .burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* =========================================================
   HERO — Logo & Slogan statisch, nur die Bilder gleiten
   ========================================================= */
/* lvh = GRÖSSTE Höhe des sichtbaren Bereichs, also mit ausgeblendeter Adressleiste.
   - svh (kleinste) war zu kurz: bei ausgeblendeter Leiste lugte der nächste Abschnitt hervor.
   - dvh (dynamisch) passte zwar immer, änderte sich jedoch WÄHREND des Wischens –
     dadurch verschob sich der ganze Inhalt beim Ein-/Ausblenden der Leiste.
   lvh ist ein fester Wert: füllt immer und wackelt nie. */
.hero{ position:relative; height:100vh; height:100svh; height:100lvh; overflow:hidden; color:#fff;
  isolation:isolate; touch-action:pan-y pinch-zoom; user-select:none; -webkit-user-select:none; cursor:grab; }
.hero:active{ cursor:grabbing; }
.hero__track{ position:absolute; inset:0; z-index:-2; display:flex; height:100%;
  transition:transform .8s cubic-bezier(.66,0,.2,1); will-change:transform; }
.hero__slide{ flex:0 0 100%; height:100%; background-size:cover; background-position:center; }
/* Abdunkelung etwas zurückgenommen – die Fotos wirken dadurch heller,
   Logo und Slogan bleiben aber weiterhin gut lesbar. */
.hero__veil{ position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(120% 95% at 50% 34%, rgba(16,36,54,.07), rgba(16,36,54,.34) 74%),
    linear-gradient(180deg, rgba(16,36,54,.22), rgba(16,36,54,.07) 44%, rgba(16,36,54,.44)); }
.hero__inner{ position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; gap:1.6rem; padding:5rem var(--pad); }
.hero__emblem{ width:clamp(150px,20vw,240px); height:auto;
  filter:drop-shadow(0 14px 34px rgba(0,0,0,.55)); }
/* neues Firmenlogo (transparent) – direkt auf dem Hero.
   Hinter dem Logo wird das Foto weichgezeichnet und beruhigt, damit es nicht mit dem
   Logo konkurriert. border-radius klippt die Fläche zur Ellipse (auch ohne Masken-
   Unterstützung, z. B. Safari) – so kann nie ein Viereck sichtbar werden.
   Kein brightness(): der Bereich wird nur ruhig, nicht hell. */
.hero__logo-wrap{ position:relative; display:block; }
.hero__logo-wrap::before{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:112%; height:132%; z-index:0; pointer-events:none;
  border-radius:50%; overflow:hidden;
  -webkit-backdrop-filter:blur(30px) saturate(.42) contrast(.86);
  backdrop-filter:blur(30px) saturate(.42) contrast(.86);
  -webkit-mask-image:radial-gradient(closest-side, #000 0%, #000 42%, rgba(0,0,0,.5) 66%, rgba(0,0,0,0) 92%);
  mask-image:radial-gradient(closest-side, #000 0%, #000 42%, rgba(0,0,0,.5) 66%, rgba(0,0,0,0) 92%); }
/* Logo: weicher Lichtschein rundherum bleibt – aber kein enger heller Saum an den
   Kanten (der wirkte wie Glanz). Der harte, kurze Schatten hält es fest und massiv. */
.hero__logo{ position:relative; z-index:1;
  width:clamp(250px,48vw,470px); height:auto; display:block;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.45))
         drop-shadow(0 0 26px rgba(255,216,164,.34))
         drop-shadow(0 0 52px rgba(255,200,140,.20)); }
.hero__slogan{ margin:0; padding:0; line-height:0; width:min(90vw, 1150px); }
/* Slogan: warmes Cremeweiß, ruhig – kein Leuchten nach außen, nur Schatten für Lesbarkeit */
.hero__slogan svg{ display:block; width:100%; height:auto; overflow:visible;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.58))
         drop-shadow(0 0 24px rgba(0,0,0,.42))
         drop-shadow(0 0 0 rgba(255,220,164,0)); }
.hero__slogan text{ font-family:var(--f-script); font-weight:400; font-size:100px; fill:url(#slogan-sheen); }
.hero__slogan .wave{ fill:none; stroke:#FFF3DF; stroke-width:3; stroke-linecap:round; }
.hero__slogan svg.hero__slogan-2line{ display:none; }

/* Kerzenlicht aus dem Fenster – ein weicher Schein, der einen Bogen schwenkt.
   Die Ebene nimmt keine Berührungen an, damit das Wischen bleibt.
   Farben wie der Slogan darunter: warmes Gold von #FFEFC6 bis #E9B972. */
.hero__lamp{ position:absolute; inset:0; z-index:1; overflow:hidden;
  pointer-events:none; opacity:0; }
/* Die Kerze steht auf der Fensterbank: nach unten scheint sie ins Haus hinein
   und ist von außen nicht zu sehen. Dieser Rahmen endet deshalb genau an der
   Fensterkante und schneidet alles darunter ab – so entsteht die halbe Scheibe.
   Zu den Seiten hin läuft er aus, sonst zöge die Kante als durchgehender Strich
   quer über das ganze Bild. */
.hero__lamp-halb{ position:absolute; overflow:hidden;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #fff 16%, #fff 84%, transparent 100%);
  mask-image:linear-gradient(to right, transparent 0, #fff 16%, #fff 84%, transparent 100%);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%; mask-size:100% 100%; }
/* … und nach unten hin verliert sich der Schein sanft, statt hart abzureißen.
   Die Fensterkante liegt bei 87 % der Höhe (der Rahmen ragt bewusst darüber
   hinaus). Bis dahin nimmt das Licht ab, an der Kante scheint noch ein Rest
   heraus, und darunter verliert es sich vollends – so wie Licht, das gerade
   noch unter dem Fenstersims hervorkommt. */
.hero__lamp-weich{ position:absolute; inset:0;
  -webkit-mask-image:linear-gradient(to bottom, #fff 0, #fff 48%, rgba(255,255,255,.86) 66%, rgba(255,255,255,.58) 79%, rgba(255,255,255,.26) 87%, rgba(255,255,255,.08) 93%, transparent 100%);
  mask-image:linear-gradient(to bottom, #fff 0, #fff 48%, rgba(255,255,255,.86) 66%, rgba(255,255,255,.58) 79%, rgba(255,255,255,.26) 87%, rgba(255,255,255,.08) 93%, transparent 100%);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%; mask-size:100% 100%; }
/* Der Schein ist ein Kegelverlauf: vorne bei 90° am hellsten, dahinter (zu
   kleineren Winkeln hin) ein langer, sehr schwacher Schweif. Er schwenkt im
   Uhrzeigersinn von links über oben nach rechts, der Schweif bleibt also hinter
   der Bewegung zurück und zeichnet die Scheibe nach.
   Keine harte Kante, sondern lauter weiche Übergänge und eine leichte Unschärfe –
   ruhiges Kerzenlicht statt Scheinwerfer.
   Nur „transform" ändert sich je Bild – das bleibt auch auf dem iPhone ruhig. */
.hero__lamp-strahl{ position:absolute; left:0; top:0; border-radius:50%;
  will-change:transform; filter:blur(8px);
  /* Der Schein ist nicht gleichmäßig, sondern wellig gezeichnet: vier hellere
     Strahlen mit dunkleren Lücken dazwischen. Dadurch wirkt es wie mehrere
     Lichtstrahlen nebeneinander statt wie ein breiter Balken – und bewusst nur
     vier, damit es nicht unruhig wird.
     Nach hinten (kleine Winkel) satt bernsteinfarben, vorne hell und warm. */
  background:conic-gradient(from 0deg,
    rgba(230,160,70,0)    0deg,
    rgba(230,160,70,0)   38deg,
    rgba(232,168,78,.28) 46deg,     /* Schweif setzt ein            */
    rgba(238,180,88,.55) 58deg,     /* ── Strahl 1                  */
    rgba(234,172,80,.34) 64deg,     /*    Lücke                     */
    rgba(244,196,108,.72) 70deg,    /* ── Strahl 2                  */
    rgba(240,186,96,.48) 76deg,     /*    Lücke                     */
    rgba(251,216,142,.90) 81deg,    /* ── Strahl 3                  */
    rgba(247,206,126,.62) 86deg,    /*    Lücke                     */
    rgba(255,238,190,1)  90deg,     /* ── Strahl 4, die Vorderkante */
    /* Vor der Vorderkante läuft der Schein weiter aus als früher. Das gibt dem
       Strahl auch dann noch sichtbare Höhe, wenn der Bogen unter die
       Fensterkante greift – sonst schneidet ihn dort das Haus ganz weg. */
    rgba(255,232,176,.72) 96deg,
    rgba(252,214,140,.50) 105deg,
    rgba(245,194,110,.26) 114deg,
    rgba(230,160,70,0)  124deg,
    rgba(230,160,70,0)  360deg);
  /* Die Maske muss WEISS sein: eine schwarze Maske wird hier als Helligkeit
     gelesen und löschte das Licht vollständig aus. */
  -webkit-mask-image:radial-gradient(closest-side, #fff 0%, #fff 26%, rgba(255,255,255,.88) 52%, rgba(255,255,255,.52) 76%, transparent 100%);
  mask-image:radial-gradient(closest-side, #fff 0%, #fff 26%, rgba(255,255,255,.88) 52%, rgba(255,255,255,.52) 76%, transparent 100%); }
/* Die Lichtkugel: klein, aber mit hellem Kern – sie ist der Ursprung des
   Strahls. Solange sie ruhig brennt, ist sie vollständig rund. Erst beim
   Aufgehen am Ende wird sie nach unten hin abgeschnitten und leuchtet als
   Bogen auf – dort steht das Haus, nur ein leichter Rest scheint noch aus dem
   Fenster. Diese Form setzt main.js, weil sie sich weich verändern muss. */
.hero__lamp-punkt{ position:absolute; border-radius:50%; filter:blur(3px);
  background:radial-gradient(closest-side,
    rgba(255,253,247,1)    0%,
    rgba(255,246,220,.96) 17%,
    rgba(253,224,164,.66) 39%,
    rgba(245,198,112,.28) 66%,
    rgba(232,168,78,0)   100%);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%; mask-size:100% 100%; }

.hero__dots{ position:absolute; bottom:calc(1.8rem + env(safe-area-inset-bottom,0px)); left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:.55rem; z-index:2; }
.hero__dots button{ width:10px; height:10px; box-sizing:border-box; border:1.4px solid rgba(255,255,255,.8);
  border-radius:99px; cursor:pointer; padding:0; background:transparent;
  transition:width .4s cubic-bezier(.4,0,.2,1), background .3s; }
.hero__dots button:hover{ background:rgba(255,255,255,.4); }
.hero__dots button.is-active{ width:30px; background:#fff; border-color:#fff; }

/* grauer Trennbalken zwischen Hero und Intro – nur auf dem Telefon */
.sep-mobile{ display:none; }

/* =========================================================
   INTRO
   ========================================================= */
/* gleicher Abstand oben und unten – der Text steht exakt in der Mitte des Abschnitts
   und damit mittig über dem Plan (dessen Auslauf ebenfalls symmetrisch ist) */
.intro{ position:relative; overflow:hidden;
  padding:clamp(4rem,8vw,6.8rem) 0; background:var(--paper-light); }
/* Ausschnitt eines echten Trockenbau-Grundrisses als Hintergrund – schwarz, jedoch sehr
   zurückhaltend, damit Überschrift und Text jederzeit klar im Vordergrund stehen */
.intro__plan{ position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover; object-position:center;
  opacity:.17; pointer-events:none; user-select:none;
  /* oben und unten gleich weich auslaufen lassen: kein harter Schnitt und der Plan
     liegt symmetrisch, sodass der Text genau in seiner Mitte steht */
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%); }
/* warme Aufhellung, die den Text trägt */
.intro::after{ content:""; position:absolute; z-index:0; pointer-events:none;
  left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(1000px,92vw); aspect-ratio:16/9; border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(246,242,234,.82), rgba(246,242,234,0) 70%); }
.intro__inner{ position:relative; z-index:1; max-width:860px; margin:0 auto; text-align:center; }
/* Eckmarken wie auf einem Plan – rahmen den Text, ohne ihn einzusperren.
   Sie ziehen sich beim Reinscrollen auf, als würden sie gezeichnet. */
.intro__inner::before,
.intro__inner::after{ content:""; position:absolute; width:38px; height:38px; pointer-events:none;
  opacity:0; transition:width .9s cubic-bezier(.33,0,.2,1), height .9s cubic-bezier(.33,0,.2,1),
    opacity .5s ease; }
.intro__inner::before{ left:0; top:-.6rem;
  border-left:2px solid rgba(176,30,36,.45); border-top:2px solid rgba(176,30,36,.45); }
.intro__inner::after{ right:0; bottom:-.6rem;
  border-right:2px solid rgba(176,30,36,.45); border-bottom:2px solid rgba(176,30,36,.45); }
/* Ausgangszustand: zusammengezogen und unsichtbar */
.intro__inner:not(.is-in)::before,
.intro__inner:not(.is-in)::after{ width:0; height:0; }
.intro__inner.is-in::before,
.intro__inner.is-in::after{ width:38px; height:38px; opacity:1; transition-delay:.35s; }
@media (prefers-reduced-motion:reduce){
  .intro__inner::before, .intro__inner::after{
    transition:none; width:38px; height:38px; opacity:1; }
}
.intro__lead{ font-family:var(--f-body); font-weight:400; line-height:1.55;
  font-size:clamp(1.08rem,1.9vw,1.34rem); color:var(--ink); margin:.4rem 0 1.1rem; }
.intro__lead strong{ font-weight:700; color:var(--ink); }
.intro__text{ color:var(--ink); font-size:1.06rem; line-height:1.65; margin:0; }
/* „Willkommen bei KR-M Bau“ – wie zuvor (rote Striche + Rausfahr-Animation),
   nur etwas größer als die übrigen Eyebrow-Zeilen. */
.intro .eyebrow--center{ color:var(--red); }

/* =========================================================
   QUALITÄT
   ========================================================= */
.quality{ padding:clamp(1rem,3vw,2rem) 0 clamp(3.4rem,7vw,6rem); background:var(--paper-light); }
.quality__grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(2rem,5vw,4.5rem); align-items:start; }
/* Ruhige Rechteckform – der dezent versetzte Rahmen gibt Tiefe, ohne zu verspielt zu wirken. */
.quality__media{ margin:0; position:relative; text-align:center; }
.quality__media img{ position:relative; z-index:1;
  width:100%; border-radius:var(--r); aspect-ratio:4/3; object-fit:cover;
  box-shadow:0 26px 56px -30px rgba(20,44,66,.5); }
.quality__media::before{ content:""; position:absolute; z-index:0;
  left:0; top:0; width:100%; aspect-ratio:4/3;
  border:1.5px solid rgba(176,30,36,.38); border-radius:var(--r);
  transform:translate(-14px,14px); pointer-events:none; }
.quality__media figcaption{ position:static; background:none; backdrop-filter:none;
  color:var(--ink-soft); font-family:var(--f-display); font-style:italic; font-size:.98rem;
  margin-top:.9rem; padding:0; }
.quality__text p{ color:var(--ink); margin:0 0 1.1rem; }
.quality__text strong{ color:var(--ink); }
.quality__text h2{ margin-bottom:1.2rem; }
.quality__text .eyebrow{ color:var(--red); }

/* =========================================================
   LEISTUNGEN
   ========================================================= */
.services{ padding:clamp(3.4rem,7vw,6rem) 0; background:var(--paper-2); border-block:1px solid var(--line); }
.services__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
/* „Alle anzeigen“-Knopf: nur auf dem Handy nötig, dort werden zunächst 3 Leistungen gezeigt */
.services__more{ display:none; margin:1.6rem auto 0; align-items:center; gap:.5em;
  font:inherit; font-weight:600; font-size:.95rem; color:var(--red);
  background:transparent; border:1.5px solid rgba(176,30,36,.45); border-radius:999px;
  padding:.78em 1.5em; cursor:pointer;
  transition:background .18s ease, border-color .18s ease, color .18s ease; }
.services__more:hover{ background:var(--red); border-color:var(--red); color:#fff; }
.services__more svg{ width:17px; height:17px; transition:transform .3s cubic-bezier(.22,.61,.36,1); }
.services__more[aria-expanded="true"] svg{ transform:rotate(180deg); }
@keyframes serviceCardIn{
  from{ opacity:0; transform:translateY(26px) scale(.97); }
  to{ opacity:1; transform:none; }
}
@keyframes serviceCardOut{
  from{ opacity:1; transform:none; }
  to{ opacity:0; transform:translateY(18px) scale(.97); }
}
.card{ position:relative; border-radius:var(--r); overflow:hidden; background:var(--card);
  border:1px solid var(--line); min-height:230px; display:flex; align-items:flex-end;
  transition:transform .22s ease, box-shadow .22s ease; }
.card:hover{ transform:translateY(-4px); box-shadow:0 24px 44px -26px rgba(20,44,66,.55); }
.card--img{ min-height:290px; color:#fff; }
.card__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.card--img:hover .card__bg{ transform:scale(1.06); }
.card--img::after{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(20,44,66,.05) 20%, rgba(20,44,66,.9)); }
.card__body{ position:relative; z-index:2; padding:1.4rem 1.4rem 1.5rem; }
.card--img .card__body h3{ color:#fff; }
.card--img .card__body p{ color:rgba(255,255,255,.9); }
.card__no{ font-family:var(--f-display); font-size:1.4rem; color:var(--red); font-weight:700; }
.card h3{ font-family:var(--f-display); font-weight:600; font-size:1.3rem; margin:.1rem 0 .4rem; }
.card p{ margin:0; font-size:.96rem; color:var(--ink-soft); line-height:1.5; }

/* =========================================================
   NACHHALTIG
   ========================================================= */
.sustain{ background:var(--blue-deep); color:#fff; padding:clamp(3.4rem,7vw,6rem) 0; }
.sustain__grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.sustain__text p{ color:rgba(255,255,255,.82); margin:0; }
.sustain__text .eyebrow{ margin-bottom:1.4rem; }
.sustain__text h2{ margin-bottom:1.3rem; }
.stats{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.14); border-radius:var(--r); overflow:hidden; }
.stats li{ background:var(--blue-deep); padding:1.6rem 1.4rem; text-align:center; }
.stats__num{ display:block; font-family:var(--f-display); font-weight:700; font-size:2.5rem; line-height:1; color:#fff; }
.stats__label{ display:block; margin:0 0 .5rem; font-size:.82rem; letter-spacing:.04em; color:#EBB9A0; text-transform:uppercase; }

/* Zahlen als wischbares Diagramm-Karussell (ohne Box) */
.statviz{ display:flex; flex-direction:column; gap:1.5rem; min-width:0;
  user-select:none; -webkit-user-select:none; }
.statviz__stage{ display:flex; align-items:center; gap:.6rem; min-width:0; }
.statviz__viewport{ flex:1; min-width:0; overflow:hidden; }
.statviz__track{ display:flex; transition:transform .55s cubic-bezier(.66,0,.2,1); touch-action:pan-y pinch-zoom; cursor:grab; }
.statviz__track:active{ cursor:grabbing; }
.statviz__slide{ flex:0 0 100%; display:flex; flex-direction:column; align-items:center;
  gap:1.4rem; padding:.5rem; text-align:center; }
.statviz__vis{ position:relative; width:min(250px,62vw); aspect-ratio:1; display:grid; place-items:center; }
.statviz__slide[data-anim="count"] .bignum{ display:inline-flex; flex-direction:column; align-items:center; gap:.85rem; }
.statviz__slide[data-anim="count"] .statviz__num{ font-variant-numeric:tabular-nums; }
.statviz__slide[data-anim="count"] .bignum::after{ content:""; width:120px; height:6px; border-radius:99px; background:var(--green);
  transform:scaleX(0); transform-origin:center; transition:transform 1s cubic-bezier(.215,.61,.355,1); }
.statviz__slide[data-anim="count"].is-active .bignum::after{ transform:scaleX(1); }
.statviz__label{ margin:0; color:#EBB9A0; text-transform:uppercase; letter-spacing:.09em; font-size:.92rem; font-weight:700; }
.statviz__num{ font-variant-numeric:tabular-nums; }
.statviz__nav{ flex:0 0 auto; width:40px; height:40px; border:0; border-radius:50%;
  background:rgba(255,255,255,.04); color:rgba(255,255,255,.72); font-size:1.6rem; line-height:1; cursor:pointer;
  transition:background .2s, color .2s, transform .2s; }
.statviz__nav:hover{ background:rgba(255,255,255,.14); color:#fff; transform:scale(1.06); }
.statviz__dots{ display:flex; justify-content:center; align-items:center; gap:.55rem; }
.statviz__dots button{ width:10px; height:10px; box-sizing:border-box; border:1.4px solid rgba(255,255,255,.75);
  border-radius:99px; padding:0; cursor:pointer; background:transparent;
  transition:width .4s cubic-bezier(.4,0,.2,1), background .3s; }
.statviz__dots button.is-active{ width:30px; background:#fff; border-color:#fff; }

/* Kreisdiagramm – füllt sich als volle Torte grün, 100 % weiß in der Mitte */
.donut{ width:100%; height:100%; transform:rotate(-90deg); }
.donut__track{ fill:none; stroke:rgba(255,255,255,.08); stroke-width:60; }
.donut__fill{ fill:none; stroke:url(#pieGrad); stroke-width:60;
  stroke-dasharray:188.5; stroke-dashoffset:188.5; transition:stroke-dashoffset 1.5s cubic-bezier(.3,.7,.2,1); }
.statviz__slide.is-active .donut__fill{ stroke-dashoffset:0; }
.donut__center{ position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--f-display); font-weight:700; color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.3); }
.donut__val{ display:inline-flex; align-items:baseline; gap:.03em; font-size:3.6rem; }
.donut__val i{ font-style:normal; font-size:.52em; color:#fff; }

/* Balkendiagramm – ein grüner Balken fährt hoch und zeigt 9 */
.bars{ position:absolute; inset:24px; display:flex; align-items:flex-end; justify-content:center; }
.bars span{ width:78px; height:0; border-radius:9px 9px 0 0;
  background:linear-gradient(180deg, var(--green), var(--green-deep)); transition:height 1.1s cubic-bezier(.3,.7,.2,1); }
.statviz__slide.is-active .bars span{ height:var(--h); }
.bars__num{ position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--f-display); font-weight:700; color:#fff; font-size:4.2rem; text-shadow:0 3px 16px rgba(0,0,0,.5); }

/* Jahreszahlen */
.bignum{ font-family:var(--f-display); font-weight:700; color:#fff; font-size:4.8rem; line-height:1; text-align:center; }

/* =========================================================
   GALERIE
   ========================================================= */
.gallery{ padding:clamp(3.4rem,7vw,6rem) 0; }
.gallery__grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:200px; gap:12px; margin-bottom:2.4rem; }
.gallery__item{ margin:0; overflow:hidden; border-radius:10px; }
.gallery__item img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.gallery__item:hover img{ transform:scale(1.05); }
.gallery__item--tall{ grid-row:span 2; }
.gallery__item--wide{ grid-column:span 2; }

/* =========================================================
   REFERENZEN
   ========================================================= */
.refs{ padding:clamp(3rem,6vw,5rem) 0; background:var(--paper-2); border-block:1px solid var(--line); }
.refs__list{ list-style:none; margin:0 auto; padding:0; max-width:960px;
  display:flex; flex-wrap:wrap; justify-content:center; gap:.8rem 1rem; }
.refs__list li{ font-family:var(--f-display); font-size:clamp(1.1rem,2.4vw,1.7rem); font-weight:600; color:var(--blue);
  padding:.5rem 1.3rem; border:1px solid var(--line); border-radius:999px; background:var(--card); }
/* „und viele mehr“ – gleiche Schrift wie die Überschrift „Für wen wir bauen“, jedoch
   grau und kleiner, damit es sich den Begriffen darüber unterordnet */
.refs__more{ text-align:center; color:var(--ink-soft); margin:1.4rem 0 0;
  font-family:var(--f-display); font-weight:600; letter-spacing:-.01em;
  font-size:clamp(.95rem,1.7vw,1.15rem); }
.refs__heading{ text-align:center; font-family:var(--f-display); font-weight:600; color:var(--blue);
  font-size:clamp(1.5rem,3vw,2.1rem); margin:2.6rem 0 .4rem; }
.refs__note{ text-align:center; color:var(--ink-soft); font-size:.92rem; margin:2rem auto 0; max-width:52ch; }

/* =========================================================
   KONTAKT CTA
   ========================================================= */
.cta{ background:
    linear-gradient(120deg, rgba(140,23,28,.96), rgba(176,30,36,.9)),
    var(--red); color:#fff; padding:clamp(3.4rem,7vw,6rem) 0; }
.cta__inner{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.cta .eyebrow--light{ color:rgba(255,255,255,.8); }
.cta__lead{ color:rgba(255,255,255,.9); margin:1rem 0 0; max-width:44ch; }
.cta__card{ background:#fff; color:var(--ink); border-radius:var(--r); padding:1.4rem; box-shadow:0 30px 60px -28px rgba(0,0,0,.5); }
.cta__row{ display:flex; align-items:center; gap:1rem; padding:1rem .4rem; border-bottom:1px solid var(--line); }
.cta__row:last-of-type{ border-bottom:0; }
.cta__ico{ width:64px; height:64px; flex:0 0 auto; display:grid; place-items:center; border-radius:14px;
  background:var(--paper); color:var(--red); }
.cta__ico svg{ width:66%; height:66%; display:block; }
.cta__row span span, .cta__row>span:not(.cta__ico){ display:flex; flex-direction:column; font-weight:600; }
.cta__row small{ font-weight:500; color:var(--ink-soft); font-size:.76rem; text-transform:uppercase; letter-spacing:.08em; }
.cta__card .btn{ margin-top:1rem; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background:var(--blue-deep); color:rgba(255,255,255,.75); padding:clamp(3rem,6vw,4.5rem) 0 1.6rem; }
.footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:2rem; }
.footer__brand{ max-width:280px; }
.footer__logo{ display:inline-block; line-height:0; transition:opacity .18s ease; }
.footer__logo:hover{ opacity:.85; }
.brand__mark--footer{ width:66px; height:66px; }
.footer__logo-img{ display:block; width:clamp(160px,62%,200px); height:auto; }
.footer__slogan{ font-family:var(--f-script); font-size:1.5rem; color:#fff; margin:.8rem 0 0; line-height:1.1; }
.footer__col h4{ color:#fff; font-family:var(--f-body); font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; margin:0 0 1rem; }
.footer__col a, .footer__col span{ display:block; padding:.28em 0; font-size:.96rem; color:rgba(255,255,255,.75); }
.footer__col a:hover{ color:#fff; }
.footer__bar{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  margin-top:2.6rem; padding-top:1.4rem; border-top:1px solid rgba(255,255,255,.14); font-size:.85rem; }
.footer__bar a:hover{ color:#fff; }

/* =========================================================
   UNTERSEITEN (Partner · Galerie · Kontakt · Impressum)
   ========================================================= */
.page-hero{ background:var(--blue-deep); color:#fff;
  padding:clamp(6.5rem,11vw,8.5rem) 0 clamp(2.6rem,5vw,3.6rem); }
.page-hero .eyebrow{ color:#EBB9A0; }
.page-title{ font-family:var(--f-display); font-weight:600; line-height:1.02;
  font-size:clamp(2.2rem,5vw,3.6rem); margin:0; }
.page-hero p{ color:rgba(255,255,255,.82); max-width:58ch; margin:1rem 0 0; }
.page-section{ padding:clamp(3rem,6vw,5rem) 0; }
.page-lead{ color:var(--ink-soft); max-width:60ch; margin:0 0 2.4rem; }
.notice{ background:var(--card); border:1px dashed var(--red); border-radius:var(--r);
  padding:1rem 1.2rem; color:var(--ink-soft); font-size:.95rem; margin-top:2rem; }
.notice strong{ color:var(--red); }

/* Galerie-Seite */
.gal-vidview{ margin-bottom:3rem; }
.gal-videos{ display:flex; flex-wrap:wrap; gap:1.6rem; justify-content:center; }
/* Der Schlitten verschwindet am Laptop aus dem Layout – dort bleibt alles wie zuvor */
.gal-slide{ display:contents; }
/* Die Kopie fürs Rundlaufen darf NUR im Karussell mitlaufen – sonst stünde das
   erste Video am Laptop ein zweites Mal da. */
.gal-slide--klon{ display:none; }
/* Punkte nur auf dem Handy sichtbar; Form und Verhalten wie die Punkte auf der Startseite */
.gal-viddots{ display:none; justify-content:center; align-items:center; gap:.55rem; margin-top:1.2rem; }
.gal-viddots button{ width:10px; height:10px; box-sizing:border-box; border:1.4px solid rgba(86,92,102,.5);
  border-radius:99px; padding:0; cursor:pointer; background:transparent;
  transition:width .4s cubic-bezier(.4,0,.2,1), background .3s, border-color .3s; }
.gal-viddots button:hover{ background:rgba(86,92,102,.25); }
.gal-viddots button.is-active{ width:30px; background:var(--ink-soft); border-color:var(--ink-soft); }
.gal-video{ margin:0; width:300px; border-radius:var(--r); overflow:hidden; background:#0d1b28;
  box-shadow:0 22px 44px -26px rgba(20,44,66,.6); }
.gal-video__frame{ position:relative; }
.gal-video video{ width:100%; display:block; aspect-ratio:9/16; object-fit:cover; background:#0d1b28; cursor:pointer; }
/* eigener Play-Overlay statt nativer Steuerung (Safari lässt die Vollbild-Taste sonst nicht ausblenden) */
.gal-video__play{ position:absolute; inset:0; z-index:1; display:grid; place-items:center; border:0; cursor:pointer;
  background:linear-gradient(rgba(13,27,40,.10), rgba(13,27,40,.32)); transition:opacity .25s ease; }
.gal-video__play svg{ width:66px; height:66px; filter:drop-shadow(0 4px 14px rgba(0,0,0,.45)); transition:transform .2s ease; }
.gal-video:hover .gal-video__play svg{ transform:scale(1.07); }
.gal-video.is-playing .gal-video__play{ opacity:0; pointer-events:none; }
.gal-video__zoom{ position:absolute; top:10px; right:10px; z-index:2; width:40px; height:40px; border:0;
  border-radius:10px; background:rgba(16,34,51,.62); color:#fff; cursor:pointer; display:grid;
  place-items:center; -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  transition:background .2s, transform .2s; }
.gal-video__zoom:hover{ background:var(--red); transform:scale(1.06); }
.gal-video__zoom svg{ width:20px; height:20px; }
.gal-video figcaption{ padding:.7rem 1rem; font-size:.86rem; color:#fff; background:var(--blue); }
.gal-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.gal-grid figure{ margin:0; border-radius:10px; overflow:hidden; aspect-ratio:4/3; background:var(--paper-2); cursor:pointer; }
.gal-grid img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.gal-grid figure:hover img{ transform:scale(1.05); }
/* Füllbild NUR im 2-Spalten-Layout (Handy/Tablet), damit dort keine Lücke bleibt;
   im 3-Spalten-Desktop ausgeblendet (15 Bilder = 5 volle Reihen) */
.gal-fill-mobile{ display:none; }

/* Galerie-Lightbox (Bilder vergrößern) */
.glightbox{ position:fixed; inset:0; z-index:130; display:none; }
.glightbox.is-open{ display:block; }
.glightbox__backdrop{ position:absolute; inset:0; background:rgba(10,22,33,.86);
  backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); animation:lmFade .35s ease both; }
.glightbox__stage{ position:absolute; inset:0; display:grid; place-items:center; padding:6vh 5vw;
  box-sizing:border-box; }
.glightbox__inner{ position:relative; z-index:1; }
.glightbox__inner img{ max-width:92vw; max-height:88vh; display:block; border-radius:10px;
  box-shadow:0 40px 90px -20px rgba(0,0,0,.65); }
.glightbox__inner video{ height:84vh; max-width:92vw; width:auto; display:block;
  border-radius:12px; background:#000; box-shadow:0 40px 90px -20px rgba(0,0,0,.65);
  animation:lmFade .3s ease both; }
.glightbox__close{ position:absolute; top:18px; right:20px; z-index:3; width:48px; height:48px; border:0;
  border-radius:50%; background:rgba(255,255,255,.92); color:var(--blue); font-size:2rem; line-height:1;
  cursor:pointer; box-shadow:0 4px 16px rgba(0,0,0,.3); animation:lmFade .4s ease both;
  transition:transform .2s, background .2s; }
.glightbox__close:hover{ transform:scale(1.08); background:#fff; }

/* Kontakt-Seite */
.contact-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
.contact-list{ list-style:none; margin:0 0 1.6rem; padding:0; }
.contact-list li{ display:flex; gap:1rem; align-items:center; padding:1.05rem .2rem; border-bottom:1px solid var(--line); }
.contact-list li:last-child{ border-bottom:0; }
.contact-list small{ display:block; font-size:.74rem; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-soft); }
.contact-list b{ font-family:var(--f-display); font-weight:600; font-size:1.12rem; color:var(--ink); }
.map-embed{ border-radius:var(--r); overflow:hidden; border:1px solid var(--line);
  box-shadow:0 22px 44px -28px rgba(20,44,66,.5); }
.map-embed iframe{ width:100%; height:460px; border:0; display:block; }

/* Kontaktformular */
.form-section{ padding-top:0; }
.contact-form{ max-width:760px; margin:0 auto; display:grid; gap:1.1rem; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.field{ display:flex; flex-direction:column; gap:.45rem; font-weight:600; font-size:.92rem; color:var(--ink); }
.field .req{ color:var(--red); }
.field input, .field textarea{ font:inherit; font-weight:400; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:12px; padding:.85rem 1rem; width:100%;
  transition:border-color .18s ease, box-shadow .18s ease; }
.field textarea{ resize:vertical; min-height:150px; }
.field input::placeholder, .field textarea::placeholder{ color:var(--ink-soft); opacity:.7; }
.field input:focus, .field textarea:focus{ outline:0; border-color:var(--red);
  box-shadow:0 0 0 3px rgba(176,30,36,.14); }
.contact-form .btn{ justify-self:start; margin-top:.3rem; }
.form-note{ margin:.3rem 0 0; font-size:.92rem; color:var(--ink-soft); min-height:1.2em; }
.form-note.is-error{ color:var(--red); }
.form-note.is-ok{ color:var(--green-deep); font-weight:600; }
@media (max-width:560px){ .form-row{ grid-template-columns:1fr; } }

/* Impressum / Text-Seiten */
.legal{ max-width:760px; }
.legal h2{ font-family:var(--f-display); font-weight:600; font-size:1.35rem; color:var(--blue); margin:2.2rem 0 .5rem; }
.legal p{ color:var(--ink); margin:.35rem 0; }
.legal strong{ color:var(--ink); }

/* Partner-Seite */
.partner-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.partner-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:1.6rem; display:flex; flex-direction:column; gap:.55rem; transition:transform .2s ease, box-shadow .2s ease; }
.partner-card:hover{ transform:translateY(-4px); box-shadow:0 24px 44px -26px rgba(20,44,66,.5); }
.partner-card h3{ font-family:var(--f-display); font-weight:600; font-size:1.22rem; color:var(--blue); margin:0; }
.partner-card p{ color:var(--ink-soft); font-size:.94rem; margin:0; flex:1; }
.partner-card a{ color:var(--red); font-weight:600; font-size:.94rem; }

/* =========================================================
   LEISTUNGS-KARTEN (klickbar) + MODAL
   ========================================================= */
.card--action{ cursor:pointer; }
.card__more{ display:inline-flex; align-items:center; gap:.4rem; margin-top:.7rem;
  font-family:var(--f-body); font-weight:600; font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; color:#fff; opacity:.85; transition:gap .25s, opacity .25s; }
.card__more i{ font-style:normal; transition:transform .25s; }
.card--action:hover .card__more{ opacity:1; gap:.62rem; }
.card--action:hover .card__more i{ transform:translateX(3px); }

.lmodal{ position:fixed; inset:0; z-index:120; display:none; }
.lmodal.is-open{ display:block; }
.lmodal__backdrop{ position:absolute; inset:0; background:rgba(16,34,51,.62);
  backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); animation:lmFade .3s ease; }
.lmodal__box{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  /* svh = kleinste Höhe: das Fenster passt dadurch auch mit eingeblendeter
     Adressleiste noch vollständig auf den Schirm */
  width:min(94vw,880px); max-height:90vh; max-height:90svh; overflow:auto; background:var(--card);
  border-radius:calc(var(--r) + 4px); box-shadow:0 50px 90px -30px rgba(0,0,0,.6);
  display:grid; grid-template-columns:1.05fr 1fr; animation:lmPop .35s cubic-bezier(.2,.7,.2,1); }
/* das Fenster erhält beim Öffnen den Fokus – ohne sichtbaren Auswahlrahmen */
.lmodal__box:focus{ outline:none; }
.lmodal__media{ position:relative; min-height:100%; background:var(--blue); }
.lmodal__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.lmodal__content{ padding:clamp(1.5rem,3vw,2.5rem); }
.lmodal__content .eyebrow{ color:var(--red); }
.lmodal__title{ font-family:var(--f-display); font-weight:700; color:var(--blue);
  font-size:clamp(1.5rem,3vw,2rem); margin:.2rem 0 .8rem; }
.lmodal__text{ color:var(--ink-soft); font-size:1.04rem; line-height:1.72; margin:0 0 1.6rem; }
.lmodal__close{ position:absolute; top:12px; right:12px; z-index:3; width:42px; height:42px;
  border:0; border-radius:50%; background:rgba(255,255,255,.92); color:var(--blue);
  font-size:1.7rem; line-height:1; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.2);
  transition:transform .2s, background .2s; }
.lmodal__close:hover{ transform:scale(1.08); background:#fff; }
@keyframes lmPop{ from{ opacity:0; transform:translate(-50%,-50%) scale(.92);} to{ opacity:1; transform:translate(-50%,-50%) scale(1);} }
@keyframes lmFade{ from{opacity:0} to{opacity:1} }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:960px){
  .contact-grid, .partner-grid{ grid-template-columns:1fr; }
  .gal-grid{ grid-template-columns:repeat(2,1fr); }
  .gal-fill-mobile{ display:block; }
  .intro__grid, .quality__grid, .sustain__grid, .cta__inner{ grid-template-columns:1fr; }
  .services__grid{ grid-template-columns:repeat(2,1fr); }
  .quality__grid{ direction:ltr; }
  .quality__media{ order:-1; }
  /* versetzter Rahmen würde auf schmalen Schirmen aus dem Bild laufen */
  .quality__media::before{ transform:translate(-10px,10px); }
  /* schmaler Schirm zeigt nur einen stark vergrößerten Planausschnitt –
     deshalb dort zurückhaltender, damit die Wände nicht durch den Text laufen */
  .intro__plan{ opacity:.11; }
  .intro::after{ width:min(1000px,124vw); aspect-ratio:4/5; }
  .footer__grid{ grid-template-columns:1fr 1fr; }
}
/* Gilt für Handys – im Hochformat über die Breite, im Querformat über die geringe Höhe.
   Sonst bekäme ein quer gehaltenes iPhone (z. B. 844x390) die Laptop-Darstellung. */
@media (max-width:760px), (max-height:520px) and (orientation:landscape){
  .tel-pill{ display:none; }
  .burger{ display:block; }
  /* oberer Balken auf dem Handy weiß statt durchsichtig (nahtlos bis zur Statusleiste, theme-color=#fff) */
  .site-header{ background:#fff; backdrop-filter:none; -webkit-backdrop-filter:none; }
  .site-header::before{ background:#fff; }
  .nav{ display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0;
    background:#fff; border-bottom:1px solid var(--line); padding:0 var(--pad);
    max-height:0; opacity:0; overflow:hidden; pointer-events:none;
    transition:max-height .4s cubic-bezier(.22,.61,.36,1), opacity .3s ease, padding .4s cubic-bezier(.22,.61,.36,1); }
  .site-header.open .nav{ max-height:21rem; opacity:1; padding:.35rem var(--pad) 1.1rem; pointer-events:auto; }
  .nav a{ padding:.9em 0; border-bottom:1px solid var(--line);
    opacity:0; transform:translateY(-6px); transition:opacity .3s ease, transform .3s ease; }
  .nav a:last-child{ border-bottom:0; }
  .site-header.open .nav a{ opacity:1; transform:none; transition-delay:.12s; }
  .gallery__grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:160px; grid-auto-flow:dense; }
  .gallery__item--wide{ grid-column:span 2; }
  .stats{ grid-template-columns:1fr 1fr; }
  .sep-mobile{ display:block; height:4rem;
    background:linear-gradient(180deg, var(--paper) 0%, var(--paper-light) 100%); }
  /* Punkte unten, genau wie am Laptop (Grundwert 1.8rem). Eine Ausgleichsrechnung
     über lvh−svh hat sie zu weit nach oben geschoben. */
  .hero__dots{ bottom:calc(1.8rem + env(safe-area-inset-bottom,0px)); }
  /* Slogan auf dem Handy größer + zweizeilig (Umbruch am Gedankenstrich) */
  .hero__slogan{ width:min(92vw, 560px); }
  .hero__slogan svg.hero__slogan-1line{ display:none; }
  .hero__slogan svg.hero__slogan-2line{ display:block; }
  /* Logo auf dem Handy größer – bleibt zentriert, verschiebt nichts */
  .hero__logo{ width:min(74vw, 352px); }
  /* Willkommen-Text auf dem Handy größer und besser lesbar */
  .intro__lead{ font-size:1.28rem; line-height:1.5; }
  .intro__text{ font-size:1.14rem; }
  /* Planfläche auf dem Handy insgesamt größer – oben wie unten gleichmäßig,
     damit der Text weiterhin genau mittig darauf sitzt */
  .intro{ padding:clamp(4.5rem,13vw,7rem) 0; }
  .intro__plan{
    -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%);
    mask-image:linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%); }
  /* Eckmarken: Höhe bleibt, seitlich nur ein kleines Stück nach innen versetzt */
  .intro__inner::before{ top:-1.9rem; left:14px; }
  .intro__inner::after{ bottom:-1.9rem; right:14px; }
  /* Galerie-Videos auf dem Handy: nebeneinander in einer Reihe, per Wischen bedienbar.
     Der Schlitten ist bildschirmbreit (dadurch stimmt der Wisch-Weg), die Karte darin
     behält jedoch ihre gewohnte Größe. */
  .gal-vidview{ overflow:hidden; }
  .gal-videos{ flex-wrap:nowrap; gap:0; justify-content:flex-start;
    transition:transform .5s cubic-bezier(.66,0,.2,1);
    touch-action:pan-y pinch-zoom; cursor:grab; will-change:transform; }
  .gal-videos:active{ cursor:grabbing; }
  .gal-slide{ display:flex; flex:0 0 100%; justify-content:center; }
  .gal-slide--klon{ display:flex; }   /* Karussell aktiv -> Kopie wird gebraucht */
  .gal-video{ width:min(300px, 76vw); box-shadow:none; }
  /* Punkte liegen – wie im Startbild – weiß auf dem Video statt darunter auf hellem Grund */
  .gal-vidview{ position:relative; }
  /* Punkte stehen unter dem Video auf hellem Grund – deshalb in Grau */
  .gal-viddots{ display:flex; }

  /* Leistungen: zunächst nur die ersten drei, der Rest fährt per Knopf heraus */
  .services__more{ display:inline-flex; }
  .services__grid > .card:nth-child(n+4){ display:none; }
  .services__grid.is-expanded > .card:nth-child(n+4){ display:block;
    animation:serviceCardIn .6s cubic-bezier(.22,.61,.36,1) both; }
  .services__grid.is-expanded > .card:nth-child(4){ animation-delay:.02s; }
  .services__grid.is-expanded > .card:nth-child(5){ animation-delay:.11s; }
  .services__grid.is-expanded > .card:nth-child(6){ animation-delay:.20s; }
  /* Zuklappen: alle drei gleichzeitig ruhig ausblenden (keine Staffelung – die
     wirkte durcheinander), währenddessen zieht sich die Rasterhöhe weich zusammen */
  .services__grid.is-collapsing > .card:nth-child(n+4){ display:block;
    animation:serviceCardOut .42s cubic-bezier(.4,0,.7,.5) both; animation-delay:0s; }
}

/* =========================================================
   HANDY QUER — wenig Höhe, viel Breite
   Startbild füllt genau den Schirm: Leiste oben, darunter Logo und Slogan.
   Erst beim Weiterwischen folgt der nächste Bereich.
   ========================================================= */
@media (max-height:520px) and (orientation:landscape){
  /* Alles an der VERFÜGBAREN HÖHE ausrichten (vh) statt an der Breite. Nur so passt es
     auch, wenn Safari die Adressleiste einblendet und die Höhe weiter schrumpft. */
  .hero__logo{ width:auto; height:min(33vh, 150px); }
  .hero__inner{ gap:1.4vh; padding:calc(var(--head-h, 52px) + 2.5vh) var(--pad) 7vh; justify-content:center; }
  /* einzeilig statt zweizeilig: quer ist genug Breite da und es spart Höhe */
  .hero__slogan{ width:min(78vw, 620px); }
  .hero__slogan svg.hero__slogan-1line{ display:block; }
  .hero__slogan svg.hero__slogan-2line{ display:none; }
  /* Punkte: Höhe wird im gemeinsamen Handy-Block gesetzt (lvh−svh-Ausgleich) */
  /* Abschnitte darunter kompakter, damit beim Wischen nichts zerrissen wirkt */
  .intro{ padding:clamp(2.4rem,7vh,3.6rem) 0; }
  .sep-mobile{ height:2.2rem; }
  /* Text unter dem Startbild kleiner – bei geringer Höhe passt sonst zu wenig aufs Bild */
  .intro__lead{ font-size:1rem; line-height:1.45; }
  .intro__text{ font-size:.92rem; }
  .section-lead{ font-size:.92rem; }
  /* Bild rechts neben dem Text – wie am Laptop. Der 960er-Block stellt es sonst
     übereinander, was quer die Breite verschenkt. */
  .quality__grid{ grid-template-columns:1fr 1.05fr; align-items:center; }
  .quality__media{ order:0; max-width:calc(52vh * 4 / 3); margin-inline:auto; }
  .quality__media figcaption{ font-size:.86rem; }
  /* Bilder nutzen die Breite aus – mehr Spalten, kleinere Kacheln */
  .gallery__grid{ grid-template-columns:repeat(4,1fr); grid-auto-rows:20vh; }
  .gal-grid{ grid-template-columns:repeat(4,1fr); }
  /* Quer ist Platz für beide Videos nebeneinander – kein Wisch-Karussell nötig.
     Damit gilt hier wieder die Anordnung wie am Laptop. */
  .gal-vidview{ overflow:visible; }
  .gal-videos{ flex-wrap:wrap; gap:1.6rem; justify-content:center;
    transition:none; touch-action:auto; cursor:auto; }
  .gal-slide{ display:contents; }
  .gal-slide--klon{ display:none; }   /* nebeneinander -> keine Kopie */
  .gal-viddots{ display:none; }
  .gal-video{ width:min(46vh, 280px); box-shadow:0 22px 44px -26px rgba(20,44,66,.6); }
  /* Partner-Karten: quer nebeneinander statt volle Breite, dadurch etwas kompakter */
  .partner-grid{ grid-template-columns:repeat(3,1fr); gap:1rem; }
  .partner-card{ padding:1.15rem; gap:.4rem; }
  .partner-card h3{ font-size:1.06rem; }
  .partner-card p{ font-size:.9rem; }
  /* Fenster der Leistungen quer kompakter, damit es sicher aufs Bild passt */
  .lmodal__content{ padding:1.1rem 1.3rem; }
  .lmodal__title{ font-size:1.25rem; }
  .lmodal__text{ font-size:.9rem; }
  /* Quer ist genug Platz: alle Leistungen zeigen, der Aufklapp-Knopf entfällt */
  .services__grid{ grid-template-columns:repeat(3,1fr); }
  .services__grid > .card:nth-child(n+4){ display:block; animation:none; }
  .services__more{ display:none; }
}
@media (max-width:640px){
  .lmodal__box{ grid-template-columns:1fr; }
  .lmodal__media{ position:relative; height:210px; min-height:210px; }
  .lmodal__media img{ position:relative; }
}
@media (max-width:480px){
  .services__grid{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr; }
}

/* Barrierefreiheit */
:focus-visible{ outline:3px solid var(--red); outline-offset:2px; border-radius:4px; }
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}