/* ================================================================================================
   BauKompass – gemeinsame Stile für index.html, bauherren.html und fachbetriebe.html
   ================================================================================================
   Herausgelöst am 05.10.2026, als die beiden Unterseiten dazukamen. Vorher standen die Regeln
   direkt in index.html; mit drei Seiten hätte jede Änderung an drei Stellen gepflegt werden müssen
   – und beim ersten Vergessen laufen die Seiten optisch auseinander.
   ================================================================================================ */

  :root{
    --dark:#14201F;
    --dark-soft:#1B2827;
    --dark-border:rgba(255,255,255,0.12);
    --blue:#0068CC;
    --blue-dark:#3B9DF5;
    --gold:#F8B000;
    --ink:#1C2A2A;
    --muted:#6B7A7A;
    --muted-2:#8B9797;
    --line:#E5EAEA;
    --surface:#F3F5F5;
    --page-bg:#FFFFFF;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    font-family:'Sora',sans-serif;
    background:var(--page-bg);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
    line-height:1.5;
  }
  a{color:var(--blue);text-decoration:none;}
  img{max-width:100%;display:block;}
  .wrap{max-width:1120px;margin:0 auto;padding:0 24px;}

  /* header */
  header{background:var(--dark);padding:20px 0;}
  header .wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;row-gap:10px;column-gap:16px;}
  .logo-img{height:88px;width:auto;}
  .header-cta{
    font-size:13px;font-weight:600;color:#F4F7F6;
    border:1px solid var(--dark-border);border-radius:999px;
    padding:9px 18px;white-space:nowrap;
  }
  .header-cta:hover{border-color:rgba(255,255,255,0.28);}
  /* Punkt 516 (13.09.2026, "füge hier eine verlinkung ein Baukompass App / Baukompass Office /
     Baukompass Partnerportal"): schlichte Textlinks links neben dem "App installieren"-Knopf.
     Auf schmalen Bildschirmen rutschen sie in eine eigene Zeile unter das Logo. */
  .header-nav{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-left:auto;}
  .header-link{
    font-size:13px;font-weight:600;color:rgba(244,247,246,0.72);white-space:nowrap;
  }
  .header-link:hover{color:#F4F7F6;text-decoration:underline;}
  @media (max-width:640px){
    .header-nav{margin-left:0;width:100%;gap:14px;}
    .header-link{font-size:12.5px;}
  }

  /* hero */
  /* ==============================================================================================
     Kopfbereich der Startseite (Umbau 05.10.2026 nach Vorlage)
     ==============================================================================================
     Ein Foto über die volle Breite, aus dem der Text links heraustritt. Darüber liegt ein Verlauf von
     Weiß nach durchsichtig – kein Schleier über dem ganzen Bild: So bleibt die rechte Hälfte mit dem
     Sonnenuntergang in voller Farbe, während links genug Weiß steht, dass die Schrift ohne Schatten
     lesbar ist. Das Bild ist ohnehin links hell (Planpapier), der Verlauf muss also wenig leisten.
     Die Höhe kommt vom Text, nicht vom Bild: cover füllt die Fläche, das Bild wird dabei oben und
     unten beschnitten – dort ist nichts Wichtiges. */
  .hero{
    position:relative;overflow:hidden;padding:0;background:#fff;
    /* Höhe am Seitenverhältnis des Bildes orientiert (16:9), damit der Weg vom Plan zum Haus ganz
       zu sehen ist – mit cover allein wäre oben und unten zu viel weggeschnitten. 50vw passt zum
       Bildverhältnis 16:9. Nach oben gedeckelt, damit der Kopf auf großen Bildschirmen nicht die halbe
       Seite einnimmt. Wird ein Bild mit anderem Verhältnis eingesetzt, gehört diese Zahl angepasst. */
    min-height:min(50vw,660px);display:flex;align-items:center;
  }
  .hero .wrap{width:100%;}
  .hero-foto{
    position:absolute;inset:0;z-index:0;
    background-image:url('home-hero.jpg');background-size:cover;background-position:center;
  }
  .hero-schleier{
    position:absolute;inset:0;z-index:1;
    background:linear-gradient(to right,rgba(255,255,255,.9) 0%,rgba(255,255,255,.84) 32%,rgba(255,255,255,.55) 48%,rgba(255,255,255,.15) 64%,rgba(255,255,255,0) 78%);
  }
  .hero .wrap{position:relative;z-index:2;display:block;}
  .hero-copy{max-width:640px;padding:48px 0 56px 0;}
  .kicker{
    font-size:12px;letter-spacing:0.12em;text-transform:uppercase;
    color:var(--blue);font-weight:700;margin-bottom:14px;
  }
  h1{
    font-size:clamp(30px,3.9vw,52px);line-height:1.1;font-weight:800;letter-spacing:-0.025em;
    margin:0 0 20px 0;color:var(--ink);
  }
  h1 span{color:var(--blue);}
  /* Breiter als zuvor (480px): Der Text darf bis kurz vor das Telefon laufen, sonst bricht er
     unnötig früh um und die Spalte wirkt schmal.
     text-wrap:pretty verhindert, dass ein einzelnes Wort allein auf der letzten Zeile landet – der
     Browser verteilt die Zeilen dann so, dass die letzte nicht zum Waisenkind wird. Ältere Browser
     ignorieren die Angabe folgenlos. */
  .hero-sub{font-size:17px;color:var(--muted);max-width:none;margin:0 0 10px 0;text-wrap:pretty;}
  .hero-sub + .hero-sub{margin-top:14px;}
  /* Punkt 1143: Region-Hinweis mit Pin */
  .hero-region{
    display:flex;align-items:center;gap:7px;
    font-size:14px;font-weight:600;color:var(--blue);
    max-width:480px;margin:0 0 10px 0;
  }
  .hero-region svg{width:16px;height:16px;flex:0 0 16px;}
  .hero-note{font-size:13px;color:var(--muted-2);max-width:480px;margin:0 0 32px 0;}
  .hero-visual{flex:0 1 320px;display:flex;justify-content:center;}
  .phone-frame{
    width:280px;border-radius:26px;overflow:hidden;
    box-shadow:0 30px 60px -20px rgba(20,32,31,0.35), 0 0 0 8px #14201F;
  }
  .phone-frame img{display:block;width:100%;}

  /* options */
  /* Einstiegs-Abschnitt (Umbau 05.10.2026 nach Vorlage): zwei große Karten, jede mit einem Foto,
     das von rechts hereinkommt und nach links ausblendet. Die Maske ist der Kern – ohne sie bräuchte
     jedes Foto einen aufgehellten Rand, damit der Text lesbar bleibt. So liegt der Text immer auf der
     ruhigen Kartenfarbe und das Bild trägt nur die Stimmung.
     Die Fotos kommen später: assets/einstieg-bauherr.jpg und assets/einstieg-fachbetrieb.jpg. Fehlen
     sie, bleibt die Karte in ihrer Grundfarbe und ist vollständig benutzbar. */
  .options{padding:48px 0 80px 0;}
  /* Breiter als der Text braucht: Die Überschrift soll auf dem Rechner in EINER Zeile stehen –
     sonst bleibt "sein?" als einzelnes Wort zurück. Schmalere Fenster brechen weiterhin selbst um. */
  .options-head{text-align:center;max-width:980px;margin:0 auto 34px auto;}
  .options-head h2{font-size:34px;font-weight:800;margin:0 0 10px 0;letter-spacing:-0.02em;}
  .options-head h2 span{color:var(--blue);}
  .options-head p{color:var(--muted);margin:0;font-size:16px;}
  .option-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;}
  .option-card{
    position:relative;isolation:isolate;overflow:hidden;
    border-radius:26px;border:1px solid var(--line);
    min-height:400px;padding:34px 32px;display:flex;flex-direction:column;
    background:#F7F9FA;
  }
  .option-card.firma{background:#F2F1EC;}
  .option-foto{
    position:absolute;top:0;right:0;bottom:0;width:58%;z-index:-1;
    background-size:cover;background-position:center;
    /* Die Maske bleibt über dem Textbereich vollständig durchsichtig und blendet erst danach auf.
       Mit einem früheren Verlauf schimmerte das Foto bereits hinter "Behalte von Anfang an …" durch
       und machte die Zeilen unruhig – lesbar bleiben sie nur, wenn dort gar nichts liegt. */
    -webkit-mask-image:linear-gradient(to right,transparent 0%,transparent 40%,#000 84%);
            mask-image:linear-gradient(to right,transparent 0%,transparent 40%,#000 84%);
  }
  .option-icon{
    width:66px;height:66px;border-radius:999px;background:#DCEBFA;color:var(--blue);
    display:flex;align-items:center;justify-content:center;margin-bottom:26px;flex:none;
  }
  .option-card.firma .option-icon{background:#3A4A42;color:#fff;}
  .option-card h3{font-size:33px;line-height:1.14;font-weight:800;letter-spacing:-0.02em;margin:0 0 16px 0;}
  .option-card h3 span{color:var(--blue);}
  .option-card p{color:var(--muted);font-size:15.5px;line-height:1.55;margin:0 0 26px 0;max-width:300px;flex:1;}
  .option-btn{
    display:inline-flex;align-items:center;gap:12px;align-self:flex-start;
    font-family:'Sora',sans-serif;font-size:15px;font-weight:700;
    padding:15px 26px;border-radius:999px;cursor:pointer;text-decoration:none;
  }
  .option-btn svg{flex:none;}
  .option-btn.primary{background:var(--blue);color:#fff;border:1.5px solid var(--blue);}
  .option-btn.primary:hover{background:#0058ad;border-color:#0058ad;}
  .option-btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink);}
  .option-btn.ghost:hover{background:var(--ink);color:#fff;}
  @media (max-width:860px){
    .option-grid{grid-template-columns:1fr;}
    .options-head h2{font-size:27px;}
    .option-card{min-height:0;padding:28px 24px;}
    .option-card h3{font-size:27px;}
    .option-card p{max-width:none;}
    /* Am Handy liegt der Text über der vollen Kartenbreite – das Foto zieht sich darum weiter
       zurück, statt hinter den Zeilen zu stehen. */
    .option-foto{width:78%;-webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.55) 70%);mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.55) 70%);}
  }
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    font-family:'Sora',sans-serif;font-size:14.5px;font-weight:700;
    padding:14px 22px;border-radius:999px;border:none;cursor:pointer;width:100%;
  }
  .btn-primary{background:var(--blue);color:#fff;}
  .btn-primary:hover{background:#0058ad;}
  .btn-outline{background:transparent;color:var(--ink);border:1.5px solid #D3DBDA;}
  .btn-outline:hover{border-color:#B7C4C2;}
  .soon-note{font-size:12.5px;color:var(--muted-2);text-align:center;margin-top:10px;min-height:16px;}

  /* how it works */
  .how{background:var(--surface);padding:64px 0;}
  .how-head{text-align:center;max-width:560px;margin:0 auto 40px auto;}
  .how-head h2{font-size:26px;font-weight:700;margin:0 0 10px 0;letter-spacing:-0.01em;}
  .how-head p{color:var(--muted);margin:0;font-size:15px;}
  .steps{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;}
  .step{
    flex:1 1 180px;max-width:210px;background:#fff;border:1px solid var(--line);
    border-radius:16px;padding:22px 18px;text-align:center;
  }
  .step-num{
    width:30px;height:30px;border-radius:999px;background:var(--dark);color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;
    margin:0 auto 14px auto;
  }
  .step h4{font-size:14.5px;font-weight:700;margin:0 0 6px 0;}
  .step p{font-size:12.5px;color:var(--muted);margin:0;}

  /* footer */
  footer{background:var(--dark);color:#9FB3AC;padding:40px 0;}
  footer .wrap{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;}
  .footer-logo{height:68px;width:auto;opacity:0.95;}
  footer .tagline{font-size:13px;max-width:360px;}
  footer .footer-links{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;font-size:12.5px;}
  footer .footer-links a{color:#9FB3AC;}
  footer .footer-links a:hover{color:#F4F7F6;}
  footer .footer-links span{color:#4B5D58;}
  footer .copyright{font-size:12px;color:#6E837D;}

  @media (max-width:640px){
    h1{font-size:30px;}
    .hero-copy{padding:40px 0 52px 0;max-width:none;}
    /* Am Handy liegt der Text über der ganzen Breite – der Verlauf deckt deshalb weiter nach rechts. */
    .hero-schleier{background:linear-gradient(to right,rgba(255,255,255,.93) 0%,rgba(255,255,255,.88) 60%,rgba(255,255,255,.7) 100%);}
    .options{padding:24px 0 56px 0;}
  }

  /* Baustellen-Gate */
  #gate{
    position:fixed;inset:0;background:#000;z-index:9999;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding:24px;text-align:center;
  }
  #gate .gate-logo{height:96px;width:auto;margin-bottom:28px;}
  #gate .gate-title{font-size:20px;font-weight:700;color:#F4F7F6;margin:0 0 8px 0;}
  #gate .gate-sub{font-size:14px;color:#8B9797;margin:0;max-width:340px;}
  #gate .gate-dev-link{
    margin-top:28px;font-size:12px;color:rgba(255,255,255,0.4);
    text-decoration:underline;letter-spacing:0.02em;cursor:pointer;
  }
  #gate .gate-dev-link:hover{color:rgba(255,255,255,0.75);}
  #gate .gate-form{
    display:none;margin-top:26px;flex-direction:column;align-items:center;gap:10px;
  }
  #gate .gate-form.open{display:flex;}
  #gate .gate-form input{
    font-family:'Sora',sans-serif;font-size:14px;padding:10px 14px;border-radius:999px;
    border:1px solid rgba(255,255,255,0.18);background:rgba(255,255,255,0.06);color:#F4F7F6;
    width:220px;text-align:center;
  }
  #gate .gate-form input:focus{outline:none;border-color:var(--blue-dark);}
  #gate .gate-form button{
    font-family:'Sora',sans-serif;font-size:13px;font-weight:600;color:#fff;
    background:var(--blue);border:none;border-radius:999px;padding:9px 20px;cursor:pointer;
  }
  #gate .gate-form button:hover{background:#0058ad;}
  #gate .gate-error{font-size:12px;color:#F87171;min-height:14px;margin:0;}

  /* Install-Hinweis (iOS u.ä.) */
  #installTip{
    display:none;position:fixed;top:14px;left:50%;transform:translateX(-50%);
    z-index:500;max-width:calc(100% - 32px);width:360px;
    background:var(--dark);color:#F4F7F6;border:1px solid var(--dark-border);
    border-radius:14px;padding:14px 16px;box-shadow:0 20px 40px -12px rgba(0,0,0,0.35);
    font-size:13px;line-height:1.5;
  }
  #installTip.open{display:flex;align-items:flex-start;gap:10px;}
  #installTip .tip-close{
    margin-left:auto;background:none;border:none;color:#8B9797;font-size:15px;
    cursor:pointer;line-height:1;padding:2px 4px;
  }
  #installTip .tip-close:hover{color:#F4F7F6;}


/* ================================================================================================
   "Bauherr sucht. Fachbetrieb findet. BauKompass verbindet." (05.10.2026)
   ================================================================================================
   Der Abschluss der Startseite: drei Schritte, die den Bogen zwischen den beiden Karten darüber
   schlagen. Die Verbindungslinie zwischen den Karten ist der eigentliche Inhalt des Bildes – sie
   zeigt, dass es ein Ablauf ist und nicht drei unabhängige Punkte. Auf schmalen Fenstern stehen die
   Karten untereinander; dort fällt die Linie weg, weil sie waagrecht gedacht ist.
   ================================================================================================ */
.verbindet{background:var(--surface);padding:64px 0 72px 0;}
.verbindet-head{text-align:center;margin:0 auto 42px auto;}
/* Die Überschrift soll in EINER Zeile stehen. Statt auf eine feste Breite zu setzen, wächst und
   schrumpft die Schrift mit dem Fenster – so passt sie sich an, statt umzubrechen und "verbindet."
   allein stehen zu lassen. Die Obergrenze von 32px bleibt, darunter verkleinert sie sich bis 21px.
   text-wrap:balance greift erst, wenn es wirklich nicht mehr reicht (Handy), und verteilt die Zeilen
   dann gleichmäßig. */
.verbindet-head h2{font-size:clamp(21px,2.55vw,32px);font-weight:800;letter-spacing:-0.02em;margin:0 0 10px 0;line-height:1.22;text-wrap:balance;}
.verbindet-head h2 span{color:var(--blue);}
/* Eine Regel statt zwei: Vorher stand weiter unten noch einmal margin:0 und hat die zentrierten
   Seitenabstände wieder aufgehoben – der Absatz saß dadurch links statt mittig unter der
   Überschrift. */
.verbindet-head p{color:var(--muted);font-size:15.5px;line-height:1.6;max-width:760px;margin:0 auto;}
.verbindet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:58px;}
.vb-card{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:22px;
  padding:30px 24px 30px 24px;text-align:center;
}
.vb-num{
  width:34px;height:34px;border-radius:999px;background:var(--ink);color:#fff;
  font-size:14.5px;font-weight:700;display:flex;align-items:center;justify-content:center;
  margin:0 auto 20px auto;
}
.vb-ico{
  width:92px;height:92px;border-radius:999px;background:#EAF2FB;color:var(--blue);
  display:flex;align-items:center;justify-content:center;margin:0 auto 20px auto;
}
.vb-card h3{font-size:18px;font-weight:800;margin:0 0 10px 0;letter-spacing:-0.01em;}
.vb-card p{font-size:14.5px;color:var(--muted);line-height:1.55;margin:0;}
/* Linie und Punkt zwischen den Karten */
.vb-card:not(:last-child)::after{
  content:'';position:absolute;top:50%;right:-58px;width:58px;height:1px;background:#D8DFDF;
}
.vb-card:not(:last-child)::before{
  content:'';position:absolute;top:50%;right:-34px;width:11px;height:11px;border-radius:999px;
  background:var(--blue);transform:translateY(-50%);z-index:1;
}
@media (max-width:860px){
  .verbindet{padding:44px 0 52px 0;}
  .verbindet-head h2{font-size:22px;}
  .verbindet-grid{grid-template-columns:1fr;gap:16px;}
  .vb-card:not(:last-child)::after,.vb-card:not(:last-child)::before{display:none;}
  .vb-ico{width:76px;height:76px;}
}


/* ================================================================================================
   Mitschwebender Knopf (05.10.2026)
   ================================================================================================
   Auf den langen Unterseiten ist der Einstieg sonst erst ganz unten erreichbar. Der Knopf schwebt
   deshalb mit – verschwindet aber, sobald der große Knopf am Seitenende im Bild ist. Zwei gleiche
   Knopfe nebeneinander sehen nach Versehen aus, und der untere ist der eigentliche.
   Am Handy sitzt er mittig über dem unteren Rand, weil dort der Daumen liegt.
   ================================================================================================ */
.schwebe-cta{
  position:fixed;right:24px;bottom:24px;z-index:900;
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Sora',sans-serif;font-size:14.5px;font-weight:700;
  padding:14px 22px;border-radius:999px;text-decoration:none;
  background:var(--blue);color:#fff;border:1.5px solid var(--blue);
  box-shadow:0 10px 26px rgba(0,104,204,.32);
  transition:opacity .22s ease, transform .22s ease;
}
.schwebe-cta:hover{background:#0058ad;border-color:#0058ad;}
.schwebe-cta svg{flex:none;}
.schwebe-cta.weg{opacity:0;transform:translateY(12px);pointer-events:none;}
@media (max-width:860px){
  .schwebe-cta{left:16px;right:16px;bottom:16px;justify-content:center;padding:15px 20px;}
}
@media (prefers-reduced-motion:reduce){
  .schwebe-cta{transition:none;}
}


/* ================================================================================================
   bauherren.html – Umbau nach Vorlage (05.10.2026)
   ================================================================================================
   Der Kern ist der Kopfbereich: ein Foto über die volle Breite, aus dem der Text links heraustritt.
   Dafür liegt ein Verlauf von weiß nach durchsichtig darüber – nicht ein halbtransparenter Schleier
   über dem ganzen Bild. Der Unterschied: So bleibt die rechte Bildhälfte in voller Farbe, während
   links echtes Weiß steht und die Schrift ohne Schatten lesbar ist.
   ================================================================================================ */
.bh-hero{position:relative;overflow:hidden;background:#fff;}
/* ================================================================================================
   Punkt (05.10.2026, "wo ist der Farbverlauf??")
   ================================================================================================
   Vorher lag das Foto als Hintergrund auf einem Element, das die ganze Breite einnahm, und die Maske
   rechnete in Prozent DIESES Elements. Wo das Bild darin tatsächlich beginnt, hängt aber von der
   Fensterhöhe ab (background-size:contain) – in einem schmaleren Fenster rutschte seine Kante nach
   rechts, während die Überblendung weiter links lag und längst fertig war. Ergebnis: harte Kante.
   Jetzt ist es ein echtes <img>. Die Maske liegt damit auf dem BILD selbst, und die Kante blendet
   immer aus – unabhängig von Fenstergröße und Seitenverhältnis.
   ================================================================================================ */
.hero-bild{
  position:absolute;top:0;right:0;height:100%;width:auto;max-width:none;z-index:0;
  /* Bewusst OHNE min-width/object-fit: Beides erzwingt einen Beschnitt, und der trifft hier das Gerät,
     um das es geht – das Telefon wurde oben abgeschnitten. Das Bild behält sein Verhältnis.
     Stattdessen läuft die Überblendung über fast die ganze Bildbreite: ab der linken Kante wird es
     nur ganz allmählich sichtbar, es gibt keine Stelle mehr, an der es sichtbar "anfängt". */
  -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.32) 13%,rgba(0,0,0,.78) 30%,#000 48%);
          mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.32) 13%,rgba(0,0,0,.78) 30%,#000 48%);
}
.bh-hero-schleier{
  position:absolute;inset:0;z-index:1;
  /* Bauherren: Der Text reicht weit nach rechts, deshalb bleibt es bis knapp vor dem Telefon weiß. */
  background:linear-gradient(to right,#fff 0%,#fff 32%,rgba(255,255,255,.5) 44%,rgba(255,255,255,0) 58%);
}
/* Fachbetriebe: Hier steht der Laptop weiter links – ein so weit reichendes Weiß würde ihn aufhellen.
   Seine linke Kante blendet ohnehin über die Maske am Foto aus. */
.bh-hero-schleier.fb{
  background:linear-gradient(to right,#fff 0%,#fff 32%,rgba(255,255,255,.5) 44%,rgba(255,255,255,0) 58%);
}
.bh-hero .wrap{position:relative;z-index:2;}
.bh-hero-grid{display:block;padding:26px 0 52px 0;max-width:620px;min-height:440px;}
.kicker-blau{font-size:11.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--blue);font-weight:700;margin:0 0 12px 0;}
.bh-h1{font-size:clamp(28px,3.6vw,44px);line-height:1.1;font-weight:800;letter-spacing:-0.025em;margin:0 0 18px 0;}
.bh-h1 span{color:var(--blue);}
.bh-lead{font-size:16.5px;color:var(--muted);line-height:1.6;margin:0 0 26px 0;max-width:none;padding-right:18px;text-wrap:pretty;}
.bh-cta-row{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-bottom:26px;}
.btn-text{display:inline-flex;align-items:center;gap:9px;font-family:'Sora',sans-serif;font-size:14.5px;font-weight:700;color:var(--ink);text-decoration:none;}
.btn-text:hover{color:var(--blue);}
.bh-hinweis{
  /* Ohne Kasten (05.10.2026): Rahmen, Fläche und Schatten machten aus einer Randbemerkung eine
     Meldung, die so stark wirkte wie der Knopf darüber. Jetzt steht die Zeile einfach da – das Symbol
     ordnet sie ein, der Rest ist gegenüber dem Fließtext zurückgenommen. */
  display:flex;gap:10px;align-items:flex-start;max-width:none;padding:0;
}
.bh-hinweis .pin{flex:none;color:var(--muted-2,#8B9797);display:inline-flex;margin-top:1px;}
.bh-hinweis p{margin:0;font-size:13px;color:var(--muted-2,#8B9797);line-height:1.5;}
.bh-hinweis strong{display:block;color:var(--muted);font-weight:600;margin-bottom:1px;font-size:13px;}

/* Vorteile */
.vorteile{background:var(--surface);padding:52px 0 58px 0;}
.vorteile h2{font-size:clamp(23px,2.6vw,31px);font-weight:800;letter-spacing:-0.022em;margin:0 0 28px 0;}
.vorteile h2 span{color:var(--blue);}
.vorteil-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.vorteil{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px 20px;}
.vorteil-ico{flex:none;width:52px;height:52px;border-radius:999px;background:#EAF2FB;color:var(--blue);display:flex;align-items:center;justify-content:center;}
.vorteil-txt{flex:1;min-width:0;}
.vorteil h3{font-size:15.5px;font-weight:700;margin:0 0 6px 0;}
.vorteil p{font-size:14px;color:var(--muted);line-height:1.55;margin:0;}
.vorteil-pfeil{flex:none;color:var(--muted3,#A9B4B4);align-self:center;}

/* Fünf Phasen */
.phasen{padding:52px 0 44px 0;}
.phasen h2{font-size:clamp(23px,2.6vw,31px);font-weight:800;letter-spacing:-0.022em;margin:0 0 30px 0;}
.phasen h2 span{color:var(--blue);}
.phasen-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;}
.phase{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;padding:34px 16px 18px 16px;}
.phase-nr{
  position:absolute;top:-15px;left:16px;width:30px;height:30px;border-radius:999px;background:var(--blue);
  color:#fff;font-size:13.5px;font-weight:700;display:flex;align-items:center;justify-content:center;z-index:2;
}
/* Die Linie verbindet die Nummern, nicht die Karten – deshalb liegt sie auf deren Höhe. */
.phase:not(:last-child)::after{content:'';position:absolute;top:0;left:46px;right:-16px;height:1px;background:#D8DFDF;z-index:1;}
.phase-ico{width:34px;height:34px;border-radius:10px;background:#EAF2FB;color:var(--blue);display:flex;align-items:center;justify-content:center;margin-bottom:11px;}
.phase h3{font-size:14.5px;font-weight:700;margin:0 0 6px 0;}
.phase p{font-size:12.5px;color:var(--muted);line-height:1.5;margin:0;}

/* Abschlussband */
.schluss{padding:0 0 76px 0;}
.schluss-band{
  display:flex;align-items:center;gap:28px;flex-wrap:wrap;
  background:#E9F1FB;border:1px solid #D4E4F7;border-radius:22px;padding:28px 32px;
}
.schluss-txt{flex:1;min-width:260px;}
.schluss-band h2{font-size:22px;font-weight:800;letter-spacing:-0.02em;margin:0 0 8px 0;}
.schluss-band p{font-size:14.5px;color:var(--muted);line-height:1.6;margin:0;max-width:560px;}

@media (max-width:1000px){
  .bh-hero-grid{max-width:none;min-height:0;}
  .bh-hero-schleier{background:linear-gradient(to right,#fff 0%,rgba(255,255,255,.92) 62%,rgba(255,255,255,.55) 100%);}
  .vorteil-grid{grid-template-columns:1fr;}
  .phasen-grid{grid-template-columns:1fr 1fr;gap:22px 16px;}
  .phase:not(:last-child)::after{display:none;}
}
@media (max-width:620px){
  .phasen-grid{grid-template-columns:1fr;}
  .schluss-band{padding:24px 22px;}
}


/* ================================================================================================
   fachbetriebe.html – Umbau nach Vorlage (05.10.2026)
   ================================================================================================
   Gleicher Aufbau wie die Bauherren-Seite, zwei Unterschiede: Die Vorteile stehen in einer Reihe zu
   viert statt im Zweierblock, und das Abschlussband trägt ein Foto. Die Bildflächen (Laptop im Kopf,
   Foto im Band) liegen als Hintergrund auf einem eigenen Element – fehlt die Datei, bleibt die
   Fläche einfach leer, statt ein kaputtes Bildsymbol zu zeigen.
   ================================================================================================ */

/* Der Laptop steckt seit 05.10.2026 im Hintergrundfoto selbst – ein eigenes Bildelement daneben
   bräuchte es nur, wenn das Foto ihn nicht zeigt. Der Kopf ist deshalb einspaltig, der Text bekommt
   die linke Hälfte und die rechte bleibt dem Foto. */
.fb-hero-grid{display:block;padding:26px 0 52px 0;max-width:640px;min-height:430px;}

/* Vorteile zu viert */
.vorteil-grid.vier{grid-template-columns:repeat(4,1fr);}
.vorteil-grid.vier .vorteil{flex-direction:column;gap:0;padding:24px 22px 20px 22px;}
.vorteil-grid.vier .vorteil-ico{margin-bottom:16px;}
.vorteil-grid.vier .vorteil-txt{margin-bottom:16px;}
.vorteil-grid.vier .vorteil-pfeil{align-self:flex-start;color:var(--blue);margin-top:auto;}

/* Ablauf in vier Schritten */
.ablauf{padding:52px 0 44px 0;}
.ablauf h2{font-size:clamp(23px,2.6vw,31px);font-weight:800;letter-spacing:-0.022em;margin:0 0 8px 0;}
.ablauf h2 span{color:var(--blue);}
.ablauf .unter{color:var(--muted);font-size:15px;margin:0 0 32px 0;}
.ablauf-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.schritt{position:relative;display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 18px 20px 18px;}
.schritt-nr{
  position:absolute;top:-15px;left:18px;width:30px;height:30px;border-radius:999px;background:var(--blue);
  color:#fff;font-size:13.5px;font-weight:700;display:flex;align-items:center;justify-content:center;z-index:2;
}
.schritt:not(:last-child)::after{content:'';position:absolute;top:0;left:48px;right:-18px;height:1px;background:#D8DFDF;z-index:1;}
.schritt-ico{flex:none;width:44px;height:44px;border-radius:999px;background:#EAF2FB;color:var(--blue);display:flex;align-items:center;justify-content:center;}
.schritt h3{font-size:14.5px;font-weight:700;margin:0 0 5px 0;}
.schritt p{font-size:12.5px;color:var(--muted);line-height:1.5;margin:0;}

/* Abschlussband mit Foto */
/* Text links, Knopf rechts (07.10.2026): Der Knopf stand unter dem Text und ließ die rechte
   Hälfte des Bandes leer. Nebeneinander füllt das Band und der Knopf steht dort, wo der Blick
   nach dem Lesen ohnehin hinwandert. */
.fb-band{position:relative;overflow:hidden;border-radius:22px;background:#E9F1FB;border:1px solid #D4E4F7;
  display:flex;align-items:center;gap:32px;padding:32px 34px;flex-wrap:wrap;}
.fb-band-foto{
  position:absolute;top:0;right:0;bottom:0;width:58%;z-index:0;
  background-image:url('fb-band.jpg');background-size:cover;background-position:center;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,transparent 26%,#000 70%);
          mask-image:linear-gradient(to right,transparent 0%,transparent 26%,#000 70%);
}
.fb-band-txt{position:relative;z-index:1;padding:0;flex:1 1 460px;min-width:0;}
.fb-band .option-btn{position:relative;z-index:1;flex:none;}
.fb-band h2{font-size:clamp(21px,2.3vw,27px);font-weight:800;letter-spacing:-0.02em;margin:0 0 10px 0;}
.fb-band h2 span{color:var(--blue);}
.fb-band p{font-size:14.5px;color:var(--muted);line-height:1.6;margin:0;max-width:620px;}

@media (max-width:1000px){
  .fb-hero-grid{max-width:none;}
  .vorteil-grid.vier{grid-template-columns:1fr 1fr;}
  .ablauf-grid{grid-template-columns:1fr 1fr;gap:26px 18px;}
  .schritt:not(:last-child)::after{display:none;}
  .fb-band-foto{display:none;}
  .fb-band{gap:20px;}
  .fb-band-txt{flex:1 1 100%;}
}
@media (max-width:620px){
  .vorteil-grid.vier{grid-template-columns:1fr;}
  .ablauf-grid{grid-template-columns:1fr;}
  .fb-band{padding:26px 22px;}
}


/* ================================================================================================
   Der BauKompass-Weg als durchgehende Ebene (05.10.2026)
   ================================================================================================
   Die blaue Linie endet nicht mit dem Titelbild, sondern läuft als eigene Ebene weiter und verbindet
   den Kopfbereich mit dem Abschnitt darunter.

   Warum eine eigene Ebene und kein zweites Bild: Eingebrannt müsste die Linie für jede Fensterbreite
   neu passen – sie würde mit dem Bildbeschnitt wandern. Als SVG folgt sie dem Layout.

   Drei Entscheidungen, die das Ganze tragen:

   1. preserveAspectRatio="none" lässt die Kurve sich mit dem Abschnitt dehnen, damit sie immer an
      derselben relativen Stelle ein- und austritt. Weil das die Strichstärke verzerren würde, hält
      vector-effect="non-scaling-stroke" sie konstant.
   2. Die Punkte sind KEINE SVG-Kreise, sondern eigene Elemente – im gedehnten Koordinatensystem
      würden Kreise zu Ellipsen.
   3. Oben läuft die Linie aus dem Nichts an (Verlauf von durchsichtig). Wo genau die Linie IM Bild
      den unteren Rand trifft, hängt vom Beschnitt ab und wandert ein paar Prozent; ein harter Ansatz
      würde diesen Versatz zeigen, ein weicher nicht.
   ================================================================================================ */
.weg-ebene{
  /* Ein schmales Band, das die Abschnittsgrenze überlappt: 70 px reichen in den Kopfbereich hinauf,
     80 px in den Abschnitt hinunter. So läuft der Weg an der Kante entlang, statt in den Textbereich
     abzutauchen – und er darf oben wieder leicht ins Bild zurück. */
  position:absolute;left:0;right:0;top:-70px;height:150px;z-index:4;pointer-events:none;
  /* Das Leuchten kommt über CSS statt über einen SVG-Filter: günstiger und auf allen Browsern gleich. */
  filter:drop-shadow(0 0 5px rgba(30,139,255,.85)) drop-shadow(0 0 16px rgba(30,139,255,.45));
}
.weg-ebene svg{display:block;width:100%;height:100%;}
.weg-punkt{
  position:absolute;width:15px;height:15px;border-radius:999px;
  background:#fff;border:3.5px solid #1E8BFF;transform:translate(-50%,-50%);z-index:2;
  box-shadow:0 0 0 4px rgba(30,139,255,.18), 0 0 14px rgba(30,139,255,.75);
  pointer-events:none;
}
/* Inhalt immer über dem Weg */
.options .wrap,.verbindet .wrap{position:relative;z-index:3;}
.options{position:relative;overflow:visible;}
.verbindet{position:relative;overflow:hidden;}
/* Die Fortsetzung reicht nur ins obere Drittel des grauen Abschnitts – weiter unten stünde sie
   zwischen den drei Schritten und würde mit deren Verbindungslinie konkurrieren. */
.weg-fortsetzung{bottom:auto;height:33%;}

@media (max-width:860px){
  /* Mobil vereinfacht: schwächeres Leuchten, keine Punkte. Am Handy liegen die Karten untereinander,
     der Weg würde sonst quer durch die Texte laufen statt neben ihnen. */
  .weg-ebene{filter:drop-shadow(0 0 4px rgba(30,139,255,.55));opacity:.5;}
  .weg-punkt{display:none;}
  /* Untereinander liegende Karten sind deckend – der Weg verschwände einfach dahinter. Er endet
     deshalb über der ersten Karte, statt hinter ihr abgeschnitten zu werden. */
  .options .weg-ebene{top:-40px;height:90px;}
}
@media (prefers-reduced-motion:no-preference){
  /* Ein einmaliges Aufziehen beim Erscheinen – kein Dauerlauf, der vom Lesen ablenkt. */
  .weg-linie{stroke-dasharray:1400;stroke-dashoffset:1400;animation:wegZiehen 2.2s ease-out .25s forwards;}
  .weg-linie2{stroke-dasharray:600;stroke-dashoffset:600;animation:wegZiehen2 1.4s ease-out 2.1s forwards;}
  @keyframes wegZiehen2{to{stroke-dashoffset:0;}}
  @keyframes wegZiehen{to{stroke-dashoffset:0;}}
}