/* ============================================================
   v16 — GEMEINSAME BASIS fuer r15a (Werkstatt) und r15b (Aufmass)

   Aufsetzend auf v15, aber mit den Konsequenzen aus Rubens
   Kritik an r14:

   1. Die blaue Flaeche hinter den Fotos (.media::before) ist
      RAUS. Ersatz ist das Rezept der Startseite: weisses
      Passepartout + echter tiefer Schatten (.fr).
   2. --soft war #f4f6f9 — 4 % Unterschied zu Weiss, ohne Kante.
      Jetzt #e8edf4 MIT sichtbarer Kante oben und unten.
   3. Der Ablauf ist kein Kaesten-Raster mehr, sondern ein
      Navy-Panel mit Foto und einem ECHTEN Button.

   Themenbezug kommt aus drei Quellen, alle drei sind in beiden
   Varianten drin:
     .fr    — Foto-Fassung (echte Fotos, echtes Material)
     .rast  — Bauplan-Raster (abstrakte Haarlinien, kein Bild)
     .mat   — echtes Materialfoto als Sektionsgrund

   v15.css bleibt unangetastet, daran haengen r13a/b/c und r14.
   ============================================================ */

:root{
  --navy:#0a1a30;
  --navy-2:#0e2340;
  --blue:#1c4c9c;
  --blue-700:#143a7d;
  --sky:#8fb6e8;
  --gold:#f2b230;
  --ink:#14202c;
  --ink-80:#2e3b52;
  --ink-65:#2e3b52;
  --line:rgba(20,32,44,.12);
  --soft:#e9eaee;                    /* neutralgrau. #e8edf4 hatte einen Blaustich und wirkte schwach */
  --soft-edge:rgba(10,26,48,.10);    /* die Kante, die vorher fehlte */
  --w-92:#fff;
  --w-72:#fff;
  --wrap:1200px;
  --ease:cubic-bezier(.2,.75,.2,1);
}

*{box-sizing:border-box}
body{margin:0;font:400 17px/1.65 Inter,system-ui,-apple-system,sans-serif;color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;font-optical-sizing:none}
img{max-width:100%}
h1,h2,h3,h4{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:800;letter-spacing:-.03em;text-wrap:balance;margin:0}
p{text-wrap:pretty}
a{color:inherit;text-decoration:none}

.wr{max-width:var(--wrap);margin:0 auto;padding:0 26px}

/* ---------- Flaechen ---------- */
.s-white{background:#fff}
.s-soft{background:var(--soft);border-top:1px solid var(--soft-edge);border-bottom:1px solid var(--soft-edge)}
.s-navy{background:var(--navy);color:#fff;position:relative}
.s-navy h2,.s-navy h3,.s-navy h4{color:#fff}
.pad{padding:clamp(72px,8vw,118px) 0}

/* ---------- Kicker ---------- */
.kick{display:inline-flex;align-items:center;gap:12px;font:700 11.5px/1 Inter,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--blue)}
.kick::before{content:"";width:30px;height:2px;background:var(--blue)}
.s-navy .kick,.on-navy .kick{color:var(--sky)}
.s-navy .kick::before,.on-navy .kick::before{background:var(--sky)}

/* ---------- Buttons: spitz (Radius 0), wie die Startseite ---------- */
.btn{display:inline-flex;align-items:center;gap:11px;background:var(--blue);color:#fff;font:700 15.5px/1 Inter,sans-serif;padding:18px 26px;border:0;cursor:pointer;transition:background .22s var(--ease)}
.btn:hover{background:var(--blue-700)}
.btn-dark{background:var(--navy)}
.btn-dark:hover{background:var(--blue)}
.btn-w{background:#fff;color:var(--navy)}
.btn-w:hover{background:var(--sky);color:var(--navy)}
.btn .ar{transition:transform .25s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}

/* ---------- Scroll-Reveal, dreifach abgesichert ---------- */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none}
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.s-navy :focus-visible{outline-color:var(--sky)}

/* ============================================================
   HERO — von Ruben freigegeben, unveraendert aus v15
   ============================================================ */
.hero{position:relative;min-height:clamp(500px,68vh,660px);display:flex;align-items:center;color:#fff;overflow:hidden;background:var(--navy)}
.hero .bg{position:absolute;inset:0}
.hero .bg img{width:100%;height:100%;object-fit:cover;object-position:65% 50%}
.hero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,var(--navy) 0%,rgba(10,26,48,.94) 34%,rgba(10,26,48,.62) 58%,rgba(10,26,48,.35) 100%)}
.hero .wr{position:relative;z-index:2;width:100%;padding-top:54px;padding-bottom:64px}
.hero .in{max-width:640px}
.hero .kick{color:#fff;opacity:.9}
.hero .kick::before{background:var(--sky)}
.hero h1{font-size:clamp(2.3rem,5.4vw,4rem);line-height:1;color:#fff;margin:20px 0 0}
/* Die Unterstreichung lag als absolute Linie unter dem GANZEN
   Inline-Block. Sobald der Text umbrach, stand sie unter der
   letzten Zeile, war aber so breit wie die laengste, lief also
   rechts ins Leere. Jetzt zeichnet sie ein Hintergrund-Verlauf
   pro Zeilenfragment (box-decoration-break:clone) und ist damit
   immer genau so breit wie der Text darueber. */
.hero h1 .u{display:inline;padding-bottom:.12em;
  background-image:linear-gradient(var(--sky),var(--sky));
  background-repeat:no-repeat;background-size:100% 5px;background-position:0 100%;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.hero .lead{margin-top:24px;font-size:clamp(1.04rem,1.55vw,1.2rem);line-height:1.6;color:#fff;max-width:50ch}
.hero .acts{margin-top:32px;display:flex;flex-wrap:wrap;gap:20px;align-items:center}
.hero .tel:hover{border-color:#fff}

/* Fakten-Leiste, ueberlappt die Hero-Kante */
.hfoot{position:relative;z-index:3;margin-top:-58px}
.hfoot .panel{background:var(--navy-2);color:#fff;padding:26px 34px;display:flex;flex-wrap:wrap;gap:0 46px;align-items:center;box-shadow:0 26px 60px -34px rgba(10,26,48,.7)}
.hfoot .f{display:flex;flex-direction:column;gap:4px;padding:8px 0}
.hfoot .f b{font:800 17px/1.2 'Bricolage Grotesque',sans-serif;color:#fff;white-space:nowrap}
.hfoot .f span{font-size:13.5px;color:var(--w-72);white-space:nowrap}
.hfoot .f .stars{color:var(--gold);letter-spacing:1px;font-size:13px}
.hfoot .sep{width:1px;align-self:stretch;background:rgba(255,255,255,.18)}

/* ============================================================
   MECHANIK 1 — FOTO-FASSUNG
   Weisses Passepartout + echter tiefer Schatten. Genau das
   Rezept, mit dem die Foto-Collagen der Startseite tragen.
   Ersetzt die blaue Flaeche, die Ruben als kindisch bezeichnet hat.
   ============================================================ */
.fr{position:relative;display:block;background:#fff;padding:12px;box-shadow:0 34px 64px -30px rgba(10,26,48,.45);transition:box-shadow .45s var(--ease)}
.fr .ph{display:block;overflow:hidden;background:var(--navy);position:relative}
.fr .ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--ease)}
.fr:hover{box-shadow:0 46px 84px -30px rgba(10,26,48,.55)}
.fr:hover .ph img{transform:scale(1.03)}
.fr .tag{position:absolute;left:12px;top:12px;z-index:3;background:var(--blue);color:#fff;font:700 11px/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;padding:10px 13px}
/* Auf Navy steht die Fassung als dunkle Karte, sonst blitzt Weiss */
.on-navy .fr,.s-navy .fr{background:#fff;box-shadow:0 34px 64px -28px rgba(0,0,0,.85)}

/* Winkel-Marker: zwei blaue Haarlinien an der Fassungsecke.
   Aufmass-Zeichen, rein geometrisch — kein Bildchen. */
.fr.mk::before,.fr.mk::after{content:"";position:absolute;background:var(--blue);pointer-events:none}
.fr.mk::before{left:-14px;top:-14px;width:64px;height:1.5px}
.fr.mk::after{left:-14px;top:-14px;width:1.5px;height:64px}
.fr.mk-r::before{left:auto;right:-14px}
.fr.mk-r::after{left:auto;right:-14px}
.on-navy .fr.mk::before,.on-navy .fr.mk::after,.s-navy .fr.mk::before,.s-navy .fr.mk::after{background:var(--sky)}

/* ============================================================
   MECHANIK 2 — BAUPLAN-RASTER
   Haarlinien alle 46 px, knapp 5 % sichtbar, faedt nach unten
   aus. Gibt der leeren Flaeche Textur, ohne etwas zu zeichnen.
   ============================================================ */
.rast{position:relative;isolation:isolate}
.rast::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(to right,rgba(10,26,48,.055) 1px,transparent 1px),
                   linear-gradient(to bottom,rgba(10,26,48,.055) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 38%,transparent 88%);
          mask-image:linear-gradient(180deg,#000 0%,#000 38%,transparent 88%)}
.rast > *{position:relative;z-index:1}

/* ============================================================
   MECHANIK 3 — MATERIALFOTO ALS SEKTIONSGRUND
   Echtes Foto einer Rohflaeche, stark in Navy gelegt. Material
   statt Grafik. Die Sektion traegt zusaetzlich .s-navy/.on-navy,
   sonst greifen die Hell-auf-Dunkel-Regeln nicht (das hat auf
   r14 drei Stellen unsichtbar gemacht).
   ============================================================ */
.mat{position:relative;overflow:hidden}

/* ---------- Sektionskopf ----------
   .mid stellt Kicker, Headline und Subline mittig. Nicht ueberall,
   sondern im Wechsel — sonst liest sich die Seite von oben bis
   unten in derselben Kante herunter. */
.shead h2{font-size:clamp(1.9rem,4vw,3rem);line-height:1.04;margin-top:14px;max-width:18ch}
.shead p{margin:18px 0 0;max-width:58ch;font-size:17px;color:var(--ink-80)}
.shead.mid{text-align:center}
.shead.mid h2{margin-left:auto;margin-right:auto;max-width:22ch}
.shead.mid p{margin-left:auto;margin-right:auto}
.s-navy .shead p,.on-navy .shead p{color:var(--w-92)}
.shead p b{color:var(--navy)}
.s-navy .shead p b,.on-navy .shead p b{color:var(--sky)}

/* 🔴 Der Fallstudien-Baustein faerbt ueber .fall.is-dark um, nicht
   ueber .s-navy. Steht ein Seiten-Element (Sektionskopf, Kicker) in
   einer dunklen Fallstudie, bekommt es sonst keine Umfaerbung:
   gemessen Kicker 2.13 und Subline 1.06, also praktisch unsichtbar.
   Dasselbe Muster wie frueher bei .reihe und .endcta. */
.fall.is-dark .shead h2{color:#fff}
.fall.is-dark .shead p{color:var(--w-92)}
.fall.is-dark .shead p b{color:var(--sky)}
.fall.is-dark .kick{color:var(--sky)}
.fall.is-dark .kick::before{background:var(--sky)}

/* ---------- Outline-Nummer (Startseiten-Signatur, kleine Groesse) ---------- */
.onum{display:block;font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:800;
  font-size:clamp(2.4rem,3.6vw,3.9rem);line-height:.86;letter-spacing:-.02em;
  color:transparent;-webkit-text-stroke:2px rgba(28,76,156,.30);margin-bottom:16px}
.s-navy .onum,.on-navy .onum{-webkit-text-stroke-color:rgba(143,182,232,.5)}

/* ---------- Haken-Liste (blaue Haken wie auf der Startseite) ---------- */
.checks{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:13px 28px}
.checks li{position:relative;padding-left:24px;font:500 15px/1.45 Inter,sans-serif;color:var(--ink)}
.checks li::before{content:"";position:absolute;left:2px;top:4px;width:7px;height:12px;border:solid var(--blue);border-width:0 2px 2px 0;transform:rotate(45deg)}
.s-navy .checks li,.on-navy .checks li{color:#fff}
.s-navy .checks li::before,.on-navy .checks li::before{border-color:var(--sky)}

/* ---------- Handwerks-Hinweis: schmaler Navy-Streifen ---------- */
.hint{margin-top:28px;background:var(--navy);color:#fff;border-left:4px solid var(--sky);
  padding:18px 22px;font:500 15.5px/1.55 Inter,sans-serif}

/* ============================================================
   ABLAUF — Navy-Panel mit Foto und ECHTEM Button.
   r14 hatte hier acht Kaesten auf Hellgrau und einen Textlink
   als CTA. Beides war Rubens Kritikpunkt.
   ============================================================ */
.abl .panel{position:relative;background:var(--navy);color:#fff;display:grid;
  grid-template-columns:minmax(0,37fr) minmax(0,63fr);
  box-shadow:0 46px 92px -44px rgba(10,26,48,.75)}
/* Das Foto fuellt die Panel-Hoehe aus, sonst bleibt unter ihm eine
   navyfarbene Leerstelle, sobald die Schritt-Spalte hoeher wird. */
.abl .pfoto{padding:clamp(20px,2.2vw,28px);display:flex}
.abl .pfoto .fr{box-shadow:0 28px 54px -26px rgba(0,0,0,.9);width:100%;display:flex;flex-direction:column}
.abl .pfoto .fr .ph{flex:1;min-height:340px}
.abl .pfoto .fr .ph img{height:100%}
.abl .steps{padding:clamp(28px,3.4vw,46px) clamp(24px,3vw,40px) clamp(20px,2.4vw,30px)}
/* Spaltenweise lesen: links 01–04 untereinander, dann rechts 05–07.
   Ohne grid-auto-flow:column laeuft das Raster zeilenweise, dann
   springt das Auge 01 → 02 quer und wieder zurueck. */
.abl .grid7{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(4,auto);
  grid-auto-flow:column;gap:0 clamp(24px,3vw,42px)}
/* align-content:start ist Pflicht — ohne das verteilt der Grid die
   ueberschuessige Hoehe auf die Zeilen und reisst Titel und Text
   auseinander, sobald die Nachbarzelle hoeher ist. */
.abl .st{display:grid;grid-template-columns:42px minmax(0,1fr);gap:0 16px;
  align-items:start;align-content:start;
  padding:15px 0;border-top:1px solid rgba(255,255,255,.16)}
.abl .st i{grid-row:1/3;font-style:normal;display:grid;place-items:center;width:42px;height:42px;
  border:1.5px solid rgba(143,182,232,.55);color:var(--sky);
  font:800 14px/1 'Bricolage Grotesque',system-ui,sans-serif}
.abl .st > b{font:700 16.5px/1.25 Inter,sans-serif;color:#fff;padding-top:2px}
.abl .st > p{margin:6px 0 0;font-size:14.5px;line-height:1.5;color:var(--w-92)}
.abl .st > p b{font-weight:700;color:var(--sky)}
.abl .pcta .tel:hover{border-color:#fff}

/* ============================================================
   REIHENFOLGE — die vier Stufen als gefasste Karten.
   Rezept aus der Startseite (.on-dark .area): Innenverlauf +
   Haarlinie + echter Schatten. Vorher stand hier nackter Text.
   ============================================================ */
.stack{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2.4vw,30px);margin-top:clamp(34px,4.4vw,54px)}
/* ---------- Vorher/Nachher-Slider (Baustein der Startseite) ---------- */
.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,28px)}
.ba{position:relative;overflow:hidden;aspect-ratio:16/10;user-select:none;margin:0}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba .ba-before{clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0)}
.ba-line{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:3px;background:#fff;transform:translateX(-50%);z-index:2;pointer-events:none;box-shadow:0 0 12px rgba(0,0,0,.35)}
.ba-grip{position:absolute;top:50%;left:var(--pos,50%);transform:translate(-50%,-50%);z-index:3;width:44px;height:44px;border-radius:50%;background:#fff;color:var(--blue);display:grid;place-items:center;pointer-events:none;box-shadow:0 8px 20px rgba(0,0,0,.35)}
.ba-lbl{position:absolute;top:14px;z-index:2;padding:7px 12px;font-weight:700;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;pointer-events:none}
.ba-lbl.vorher{left:14px;background:rgba(10,26,48,.78);color:#fff}
.ba-lbl.nachher{right:14px;background:var(--blue);color:#fff}
.ba input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:4;margin:0;-webkit-appearance:none}
.ba figcaption{position:absolute;left:0;bottom:0;z-index:2;color:#fff;font-weight:700;font-size:14.5px;background:rgba(10,26,48,.82);padding:9px 14px;pointer-events:none}

/* ---------- Vorher/Nachher als KACHELPAAR ----------
   Fuer Aufnahmen, die NICHT deckungsgleich sind. Ein Wischer
   behauptet dort eine Ausrichtung, die es nicht gibt.
   Gemessen: beim Buero-Paar steht Hochformat (0.75) gegen
   Querformat (1.36) — im 16:10-Rahmen fielen 53 % des
   Vorher-Bildes weg, das Motiv war nicht mehr erkennbar.
   Zwei Kacheln nebeneinander zeigen beide Bilder vollstaendig
   genug und sind ehrlicher als ein Schieberegler, der nicht
   ausrichtet. --bp-ar setzt das gemeinsame Fenster: 1/1 ist der
   fairste Kompromiss, wenn Hoch- gegen Querformat steht. */
/* align-self:start ist noetig: sonst streckt der Grid die Box auf die
   Zeilenhoehe des danebenstehenden 16:10-Sliders und die absolut
   positionierte Bildunterschrift rutscht unter das Foto ins Leere. */
.bapair{margin:0;position:relative;align-self:start}
.bapair .bp-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bapair .bp{position:relative;overflow:hidden;aspect-ratio:var(--bp-ar,1/1);background:var(--navy)}
.bapair .bp img{width:100%;height:100%;object-fit:cover;display:block}
.bapair figcaption{position:absolute;left:0;bottom:0;z-index:2;color:#fff;font-weight:700;font-size:14.5px;background:rgba(10,26,48,.82);padding:9px 14px;pointer-events:none}
@media (max-width:560px){
  .bapair .bp-row{gap:6px}
  .bapair .bp{aspect-ratio:1/1}
}

/* ---------- Stimmen: weisse Karten auf Navy ---------- */
.revcards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px)}
.revcard{background:#fff;padding:clamp(24px,2.6vw,32px);box-shadow:0 24px 50px -30px rgba(0,0,0,.6);display:flex;flex-direction:column}
.revcard .stars{color:var(--gold);letter-spacing:2px;font-size:15px}
.revcard > p{margin:16px 0 0;font-size:16px;line-height:1.6;color:var(--ink-80);flex:1}
.revcard .rc-who{margin-top:22px;display:flex;align-items:center;gap:11px}
.revcard .av{width:36px;height:36px;flex:0 0 36px;display:grid;place-items:center;background:var(--blue);color:#fff;font:700 15px/1 Inter,sans-serif}
.revcard .rc-who b{display:block;font:700 14.5px/1.25 Inter,sans-serif;color:var(--ink)}
.revcard .rc-who small{display:block;font-size:13px;color:var(--ink-65);margin-top:2px}

/* ---------- Google-Badge ---------- */
.gbadge{display:inline-flex;align-items:center;gap:18px;margin-top:22px;background:#fff;color:var(--ink);padding:16px 24px;box-shadow:0 16px 34px rgba(10,26,48,.24);flex-wrap:wrap}
.gbadge .val{font:800 1.9rem/1 'Bricolage Grotesque',system-ui,sans-serif;color:var(--ink)}
.gbadge .st{color:var(--gold);font-size:20px;letter-spacing:1.5px}
.gbadge small{font-size:14px;color:#2e3b52;font-weight:600}
.gbadge small b{color:var(--ink)}
.gbadge .go{font-weight:700;font-size:14px;color:var(--blue);white-space:nowrap}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin:0 auto}
.qa{border-bottom:1px solid var(--line)}
.qa button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;background:none;border:0;padding:24px 0;text-align:left;font:700 17.5px/1.4 Inter,sans-serif;color:var(--ink);cursor:pointer}
.qa .pm{position:relative;width:16px;height:16px;flex:0 0 16px}
.qa .pm::before,.qa .pm::after{content:"";position:absolute;background:var(--blue);transition:transform .3s var(--ease)}
.qa .pm::before{left:0;right:0;top:7px;height:2px}
.qa .pm::after{top:0;bottom:0;left:7px;width:2px}
.qa.open .pm::after{transform:scaleY(0)}
.qa .a{max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
.qa .a p{margin:0 0 24px;font-size:16.5px;line-height:1.65;color:var(--ink-80);max-width:70ch}

/* ---------- Schluss-CTA ---------- */
.endcta{position:relative;overflow:hidden;background:var(--navy);color:#fff;text-align:center}
.endcta .bg{position:absolute;inset:0}
.endcta .bg img{width:100%;height:100%;object-fit:cover;opacity:.34}
.endcta .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,26,48,.86),rgba(10,26,48,.94))}
.endcta .wr{position:relative;z-index:2;padding-top:clamp(74px,8vw,116px);padding-bottom:clamp(74px,8vw,116px)}
.endcta .kick{color:var(--sky)}
.endcta .kick::before{background:var(--sky)}
.endcta h2{font-size:clamp(1.85rem,3.9vw,3rem);line-height:1.06;color:#fff;max-width:19ch;margin:18px auto 0}
.endcta p{margin:20px auto 0;max-width:56ch;color:var(--w-92);font-size:17px}
.endcta .acts{margin-top:34px;display:flex;flex-wrap:wrap;gap:18px;justify-content:center;align-items:center}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width:960px){
  .abl .panel{grid-template-columns:1fr}
  /* Spaltenfluss muss hier zurueckgesetzt werden, sonst legt der Grid
     trotz einer Spalte implizite Spalten an und die Schritte stehen
     wieder nebeneinander. */
  .abl .grid7{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row}
}
@media (max-width:860px){
  .revcards{grid-template-columns:1fr}
  .hfoot{margin-top:-34px}
  .hfoot .panel{gap:0 26px;padding:22px}
  .hfoot .sep{display:none}
  .hfoot .f{flex:1 1 44%}
}
@media (max-width:760px){
  .ba-grid{grid-template-columns:1fr}
  .checks{grid-template-columns:1fr}
}
/* ============================================================
   HANDY-UMBAU 17.08.2026 (Ruben): wie auf der Startseite. Der Text stand
   ueber dem Foto, alles war zu gross. Jetzt Foto oben, Text darunter,
   Typo eine Stufe kleiner. Breakpoint 700px wie im Startseiten-Inline-CSS.
   ============================================================ */
@media (max-width:700px){
  .hero{display:block;min-height:0;align-items:stretch}
  .hero .bg{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:4/3}
  .hero .bg img{object-position:60% 50%}
  /* Verlauf laeuft nach unten aus, damit die Kante zum Navy-Textteil weich ist */
  .hero .bg::after{background:linear-gradient(0deg,var(--navy) 0%,
    rgba(10,26,48,.72) 14%,rgba(10,26,48,.28) 34%,transparent 62%)}
  .hero .wr{position:relative;z-index:2;padding-top:22px;padding-bottom:34px}
  .hero .in{max-width:none}
  .hero h1{font-size:1.875rem;letter-spacing:-.03em;margin-top:14px}
  .hero .lead{margin-top:16px;font-size:15.5px;line-height:1.55;max-width:none}
  .hero .acts{margin-top:24px}
}

@media (max-width:640px){
  /* Typo eine Stufe kleiner, wie auf der Startseite */
  .shead h2{font-size:1.5rem}
  .job h2{font-size:1.375rem}
  .desc{font-size:15px;line-height:1.55}
  .checks li{font-size:14.5px}
  .offer > b{font-size:1.05rem}
  .offer li{font-size:14.5px}
  .offer .note{font-size:13.5px}
  .endcta h2{font-size:1.5rem}
  .bcard h3{font-size:1.05rem}
  .bcard p{font-size:13.5px}
  .fall .f-h{font-size:1.375rem}
  .hero .bg::after{background:linear-gradient(180deg,rgba(10,26,48,.72) 0%,rgba(10,26,48,.9) 60%,var(--navy) 100%)}
  .hero .in{max-width:none}
  .hero .acts{gap:16px}
  .hero .acts .btn{width:100%;justify-content:center}
  .fr.mk::before,.fr.mk::after{display:none}
}

/* ============================================================
   MITGLIEDSCHAFTEN IM FUSS
   Echte Logos, abgegriffen von der Kundenwebsite maraumgestaltung.de.
   Damit ist die Mitgliedschaft gleichzeitig belegt, der Betrieb
   fuehrt die Zeichen selbst. Keine Nachbauten, keine Text-Chips.

   Sie standen erst als eigene Sektion mitten in der Seite. Dort
   wirkten sie zusammenhanglos ("random"), deshalb sitzen sie jetzt
   im Fuss, wo Mitgliedschaften hingehoeren.

   Der Fuss ist Navy, die beiden Kammer-Logos liegen aber auf weissem
   Grund. Deshalb eine weisse Platte darunter: die Logos behalten ihre
   Originalfarben, was bei Kammerzeichen ohnehin Pflicht ist.
   Die Dateien sind 120 px hoch, angezeigt werden rund 58 px.
   ============================================================ */
.ft-mem{margin:clamp(34px,4vw,52px) 0 0}
.ft-mem .tk{display:flex;align-items:center;justify-content:center;gap:13px;margin:0 0 16px;
  font:700 11.5px/1.4 Inter,system-ui,sans-serif;letter-spacing:.15em;text-transform:uppercase;
  color:#fff}
.ft-mem .tk::before,.ft-mem .tk::after{content:"";width:26px;height:1px;background:rgba(255,255,255,.28)}
.ft-mem .row{background:#fff;padding:clamp(24px,2.8vw,36px) clamp(24px,3.4vw,48px);
  display:flex;align-items:center;justify-content:center;
  gap:clamp(36px,7vw,96px);flex-wrap:wrap}
.ft-mem img{height:clamp(40px,4.4vw,58px);width:auto;display:block}
/* SOKA-BAU ist fast quadratisch, die beiden anderen sind lange Zeilen.
   Bei gleicher Hoehe wirkt es deutlich kleiner, deshalb angeglichen. */
.ft-mem img[src*="soka"]{height:clamp(52px,5.8vw,76px)}
@media (max-width:560px){
  .ft-mem .row{gap:26px;padding:22px 18px}
  .ft-mem img{height:36px}
  .ft-mem img[src*="soka"]{height:46px}
}

/* ============================================================
   MERKMALE ALS BENTO
   Loest die vier Textzeilen ab, die frueher als schmale Liste in
   der Anlass-Sektion standen ("langweilig hingeklatscht").
   Machart wie das Trust-Bento der Startseite: 12er-Raster,
   unterschiedlich grosse Kacheln, eine davon mit echtem Foto und
   Navy-Verlauf darueber. Radius bleibt 0, das ist Hausstil.

   Sitzt bewusst NICHT mehr direkt unter dem Hero, sondern zwischen
   den Fallstudien und den Kundenstimmen: erst zeigen was man kann,
   dann warum man es bei uns machen laesst, dann was andere sagen.
   ============================================================ */
.bento{display:grid;grid-template-columns:repeat(12,1fr);
  grid-auto-rows:minmax(196px,auto);gap:14px}
.bcard{position:relative;overflow:hidden;display:flex;flex-direction:column;
  justify-content:flex-end;padding:26px;color:#fff;background:var(--navy);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.bcard:hover{transform:translateY(-4px);box-shadow:0 22px 42px rgba(10,26,48,.30)}

/* Foto-Kachel: Bild plus Verlauf, damit der Text immer traegt */
.bcard.foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;transition:transform .6s var(--ease)}
.bcard.foto:hover img{transform:scale(1.05)}
.bcard.foto::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(0deg,rgba(10,26,48,.94) 14%,rgba(10,26,48,.30) 76%)}
.bcard.foto > *{position:relative;z-index:2}

/* Text-Kachel: leichter Lichtschein aus der Ecke, sonst flach */
/* Vier verschiedene Gruende, damit das Bento nicht viermal
   dieselbe blaue Flaeche ist. Alle vier stammen aus dem, was auf
   der Seite ohnehin schon vorkommt: echtes Foto, Materialfoto,
   Bauplan-Raster, tiefes Navy. Nichts Gemaltes. */

/* a) Materialfoto: echtes Foto, entsaettigt und tief abgedunkelt.
      Man erkennt Struktur, liest aber muehelos darauf. */
.bcard.mat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;filter:grayscale(.4) contrast(1.06)}
.bcard.mat::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(160deg,rgba(10,26,48,.90),rgba(10,26,48,.96))}
.bcard.mat > *:not(img){position:relative;z-index:2}

/* b) Bauplan-Raster: dieselben Haarlinien wie .rast auf den
      Sektionsflaechen, hier hell auf Navy. */
.bcard.plan{background:var(--navy-2)}
.bcard.plan::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(to right,rgba(255,255,255,.075) 1px,transparent 1px),
                   linear-gradient(to bottom,rgba(255,255,255,.075) 1px,transparent 1px);
  background-size:38px 38px}
/* Winkel sitzt RECHTS oben, links steht das Icon. */
.bcard.plan::after{content:"";position:absolute;right:24px;top:24px;width:56px;height:56px;z-index:1;
  border-right:2px solid var(--sky);border-top:2px solid var(--sky);opacity:.5;pointer-events:none}
.bcard.plan > *{position:relative;z-index:2}

/* c) Tiefes Navy mit Lichtschein aus der Ecke. */
.bcard.text{background:linear-gradient(155deg,var(--navy-2),var(--navy) 62%)}
.bcard.text::before{content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(78% 68% at 74% -12%,rgba(255,255,255,.09),transparent 62%)}
.bcard.text > *{position:relative;z-index:1}

.bcard .ic{width:30px;height:30px;color:var(--sky);margin-bottom:auto}
.bcard h3{font:800 1.18rem/1.2 'Bricolage Grotesque',system-ui,sans-serif;
  letter-spacing:-.02em;color:#fff;margin:16px 0 6px}
.bcard p{margin:0;font-size:14.5px;line-height:1.55;color:#fff}
.bcard .gr{font:800 clamp(2.4rem,3.4vw,3.4rem)/.9 'Bricolage Grotesque',system-ui,sans-serif;
  letter-spacing:-.02em;color:#fff;margin-bottom:10px}

/* Das Raster: eine hohe Foto-Kachel links, daneben eine breite und
   darunter zwei gleich grosse. Bewusst ungleich, sonst ist es ein
   Kaesten-Raster und kein Bento. */
.bento .bcard:nth-child(1){grid-column:span 5;grid-row:span 2}
.bento .bcard:nth-child(2){grid-column:span 7}
.bento .bcard:nth-child(3){grid-column:span 4}
.bento .bcard:nth-child(4){grid-column:span 3}

@media (max-width:900px){
  .bento{grid-template-columns:1fr 1fr;grid-auto-rows:minmax(180px,auto)}
  .bento .bcard{grid-column:auto !important;grid-row:auto !important}
  .bento .bcard:nth-child(1){grid-column:1 / -1 !important}
}
@media (max-width:560px){ .bento{grid-template-columns:1fr} }

/* ============================================================
   BILDER LIEGEN NIE NACKT AUF DER FLAECHE   (19.08.2026)

   Ruben: "die Bilder duerfen nicht direkt auf dem Weissen liegen,
   da muss aussen rum auch nochmal was Blaues sein. Vorher/Nachher
   genauso, die brauchen noch so eine kleine Umrandung aussen rum,
   sonst passt das vom Design-Auge nicht."

   Er hat recht, und der Grund ist messbar: .fr traegt seit v15 ein
   Passepartout in WEISS (background:#fff, padding:12px). Auf einer
   weissen Sektion ist das unsichtbar — vom Rahmen bleibt nur der
   Schatten, das Foto steht also faktisch ohne Fassung da.

   Regel ab hier: auf HELLEM Grund ist die Fassung navy, auf
   DUNKLEM Grund bleibt sie weiss. Weiss auf Navy traegt schon,
   Weiss auf Weiss nicht.
   ============================================================ */
/* 🔴 ZURUECKGENOMMEN 19.08. — Ruben: "warum hast du die Umrandung
   bei den Leistungen auf einmal dunkelblau gemacht? Davor sah es
   nicht so aus, das ist echt schlimm."
   Die Navy-Fassung um die Leistungsblock-Fotos ist damit wieder
   raus, .fr behaelt sein weisses Passepartout aus _v16.css:126.
   NICHT erneut vorschlagen. Die Vorher/Nachher-Regler behalten
   ihre Fassung (siehe unten) — die hatten vorher gar keine und
   sassen nackt auf der Flaeche. */

/* Vorher/Nachher: die Regler haben gar keine Fassung, die Bilder
   sitzen direkt auf der Sektion. Als border statt padding, weil die
   Bildebenen mit inset:0 absolut liegen — die beziehen sich auf die
   Polsterkante, ein padding wuerde sie mit ueberdecken. */
.ba{border:11px solid var(--navy);box-shadow:0 30px 58px -28px rgba(10,26,48,.45)}
.s-navy .ba,.on-navy .ba{border-color:#fff;box-shadow:0 30px 58px -26px rgba(0,0,0,.7)}
/* Die Beschriftungen sassen 14px vom Rand, jetzt vom Bildrand. */
.ba .ba-lbl{top:12px}
@media (max-width:640px){ .ba{border-width:8px} }