/* ============================================================
   bauguru24.css  ·  nur fuer bauguru24.html
   BauGuru-Corporate-Design: Weiss, Orange, Navy, Dunkelnavy.
   Keine Verlaeufe, keine Schatten. Alle Klassen mit bg- praefixiert,
   damit nichts mit styles.css kollidiert.
   ============================================================ */

@font-face{
  font-family:"Jost";
  src:url("fonts/jost-latin-var.woff2") format("woff2-variations");
  font-weight:100 900; font-style:normal; font-display:swap;
}

.bg-seite{
  --bg-weiss:#FFFFFF;
  --bg-orange:#ED9427;
  --bg-navy:#282E68;
  --bg-dunkel:#111645;
  --bg-kraft:#C8B196;
  --bg-kopf:"Anton",Impact,"Arial Black",sans-serif;
  --bg-text:"Jost","Futura","Century Gothic",-apple-system,BlinkMacSystemFont,sans-serif;
  --bg-rand:clamp(20px,5vw,72px);
  --bg-breite:1280px;

  font-family:var(--bg-text);
  font-weight:500;
  font-size:clamp(1rem,1.05vw,1.15rem);
  line-height:1.62;
  color:var(--bg-navy);
  background:var(--bg-weiss);
}
.bg-seite *{box-sizing:border-box}

/* ---------- Baender ---------- */
.bg-band{padding:clamp(44px,5.6vw,92px) var(--bg-rand)}
.bg-band--navy{background:var(--bg-navy);color:var(--bg-weiss)}
.bg-band--weiss{background:var(--bg-weiss);color:var(--bg-navy)}
.bg-band--kraft{background:var(--bg-kraft);color:var(--bg-navy)}
.bg-innen{max-width:var(--bg-breite);margin:0 auto}

/* ---------- Typografie ---------- */
.bg-seite h1,.bg-seite h2,.bg-seite h3{
  font-family:var(--bg-kopf);font-weight:400;text-transform:uppercase;
  letter-spacing:.005em;line-height:.98;margin:0;
}
.bg-seite h1{font-size:clamp(2rem,3.7vw,3.5rem)}
.bg-seite h2{font-size:clamp(1.65rem,3vw,3rem)}
.bg-seite h3{font-size:clamp(1.1rem,1.4vw,1.45rem)}
.bg-wort{color:var(--bg-orange)}
.bg-kicker{
  font-weight:700;font-size:clamp(.69rem,.78vw,.82rem);letter-spacing:.22em;
  text-transform:uppercase;color:var(--bg-orange);margin:0 0 .9rem;
}
.bg-band--kraft .bg-kicker{color:var(--bg-dunkel)}
.bg-signal{display:block;width:74px;height:5px;background:var(--bg-orange);border:0;margin:1.15rem 0 1.4rem}
.bg-seite p{margin:0 0 1rem;max-width:62ch}
.bg-gross{font-size:clamp(1.05rem,1.2vw,1.28rem)}
.bg-seite strong{font-weight:700}
.bg-seite a{color:inherit}

/* ---------- Knoepfe ---------- */
.bg-pille{
  display:inline-block;background:var(--bg-orange);color:var(--bg-dunkel);
  font-family:var(--bg-text);font-weight:700;font-size:clamp(.75rem,.84vw,.88rem);
  letter-spacing:.14em;text-transform:uppercase;padding:14px 28px;border-radius:999px;
  text-decoration:none;border:0;line-height:1.2;
}
.bg-pille:hover,.bg-pille:focus-visible{background:#d9831a;color:var(--bg-dunkel)}
.bg-pille--linie{background:transparent;color:var(--bg-navy);box-shadow:inset 0 0 0 2px rgba(40,46,104,.45)}
.bg-band--navy .bg-pille--linie{color:var(--bg-weiss);box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}
.bg-pille--linie:hover,.bg-pille--linie:focus-visible{background:rgba(40,46,104,.08);color:var(--bg-navy)}
.bg-band--navy .bg-pille--linie:hover{background:rgba(255,255,255,.12);color:var(--bg-weiss)}
.bg-knoepfe{display:flex;flex-wrap:wrap;gap:13px;margin-top:1.6rem}
.bg-seite a:focus-visible{outline:3px solid var(--bg-orange);outline-offset:4px}
.bg-band--kraft a:focus-visible,.bg-band--weiss a:focus-visible{outline-color:var(--bg-navy)}

/* ---------- Buehne ---------- */
.bg-buehne{position:relative;background:var(--bg-kraft);overflow:hidden}
.bg-buehne__bild{display:block;width:100%;height:auto;margin:0}
/* Auf schmalen Schirmen auf das Haus zuschneiden - im vollen 2:1-Panorama
   waere es nur noch briefmarkengross. */
@media(max-width:979px){
  .bg-buehne__bild{aspect-ratio:5/4;object-fit:cover;object-position:76% center}
}
@media(max-width:560px){
  .bg-buehne__bild{aspect-ratio:1/1;object-position:80% center}
}
.bg-buehne__inhalt{padding:clamp(26px,5vw,60px) var(--bg-rand) clamp(32px,5vw,60px)}
.bg-marke{width:clamp(118px,10vw,166px);height:auto;display:block;margin:0 0 1.4rem}
.bg-mark{display:none}
@media(min-width:980px){
  .bg-buehne__inhalt{position:absolute;left:0;top:0;height:100%;width:45%;
    display:flex;flex-direction:column;justify-content:center;padding-right:30px}
  .bg-buehne__inhalt .bg-gewerke{max-width:100%}
  .bg-buehne__inhalt .bg-knoepfe{max-width:100%}
  .bg-mark{display:block;position:absolute;left:var(--x);top:var(--y);
    width:var(--b);height:var(--h);border:4px solid var(--bg-orange);border-radius:10px;
    opacity:0;transition:opacity .28s ease;pointer-events:none}
  .bg-mark.ist-aktiv{opacity:1}
  /* Beschriftung INNEN oben links: ueber dem Dachrahmen waere sie abgeschnitten. */
  .bg-mark i{position:absolute;left:10px;top:10px;
    background:var(--bg-orange);color:var(--bg-dunkel);font-style:normal;font-weight:700;
    font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
    padding:6px 13px;border-radius:999px;white-space:nowrap}
}
@media(prefers-reduced-motion:reduce){.bg-mark{transition:none}}
.bg-gewerke{display:flex;flex-wrap:wrap;gap:8px;margin:1.3rem 0 0;padding:0;list-style:none}
.bg-gewerke button{
  font-family:var(--bg-text);font-weight:700;font-size:.78rem;letter-spacing:.1em;
  text-transform:uppercase;padding:9px 15px;border-radius:999px;cursor:pointer;
  background:transparent;color:var(--bg-navy);border:0;line-height:1.2;
  box-shadow:inset 0 0 0 2px rgba(40,46,104,.38);transition:background .2s,color .2s;
}
.bg-gewerke button[aria-pressed="true"]{background:var(--bg-orange);color:var(--bg-dunkel);box-shadow:none}
.bg-gewerke button:focus-visible{outline:3px solid var(--bg-navy);outline-offset:3px}

/* ---------- Bildtafeln ---------- */
.bg-tafel{border-radius:16px;overflow:hidden;background:var(--bg-kraft);line-height:0;margin:0}
.bg-tafel img{display:block;width:100%;height:auto;border:0;border-radius:0}
.bg-tafel--gleich img{aspect-ratio:3/2;object-fit:cover}
.bg-seite figure{margin:0}
.bg-seite figcaption{font-size:.86rem;opacity:.72;line-height:1.5;margin-top:.6rem;max-width:46ch}

/* ---------- Raster ---------- */
.bg-zwei{display:grid;gap:clamp(22px,3vw,44px);grid-template-columns:minmax(0,1fr)}
@media(min-width:880px){.bg-zwei{grid-template-columns:repeat(2,minmax(0,1fr))}}
.bg-zwei--mitte{align-items:center}
.bg-drei{display:grid;gap:clamp(20px,2.6vw,36px);grid-template-columns:minmax(0,1fr)}
@media(min-width:760px){.bg-drei{grid-template-columns:repeat(3,minmax(0,1fr))}}
.bg-vier{display:grid;gap:clamp(16px,2vw,26px);grid-template-columns:minmax(0,1fr)}
@media(min-width:640px){.bg-vier{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1040px){.bg-vier{grid-template-columns:repeat(4,minmax(0,1fr))}}

.bg-liste{list-style:none;margin:0 0 1rem;padding:0}
.bg-liste li{position:relative;padding-left:26px;margin-bottom:.6rem;max-width:58ch}
.bg-liste li::before{content:"";position:absolute;left:0;top:.62em;width:12px;height:3px;background:var(--bg-orange)}

.bg-punkt img{width:52px;height:52px;display:block;margin:0 0 .75rem;border-radius:0}
.bg-punkt h3{margin-bottom:.45rem}
.bg-punkt p{font-size:.95rem;margin:0;opacity:.94;max-width:40ch}

/* ---------- Gewerkekarten ---------- */
.bg-karte{background:var(--bg-navy);color:var(--bg-weiss);border-radius:14px;padding:22px 24px}
.bg-band--navy .bg-karte{background:var(--bg-dunkel)}
.bg-karte h3{color:var(--bg-orange);margin-bottom:.6rem}
.bg-karte p{font-size:.92rem;margin:0;opacity:.9;max-width:none;line-height:1.55}

/* ---------- Preis / Hinweis ---------- */
.bg-merk{border:3px solid var(--bg-orange);border-radius:14px;padding:22px 26px;margin-top:1.6rem}
.bg-merk p{margin:0;max-width:none}
.bg-merk strong{color:var(--bg-orange)}
.bg-band--kraft .bg-merk strong,.bg-band--weiss .bg-merk strong{color:var(--bg-navy)}

/* ---------- Zahlenzeile ---------- */
.bg-zahlen{display:grid;gap:clamp(18px,2.4vw,34px);grid-template-columns:repeat(2,minmax(0,1fr));margin-top:1.6rem}
@media(min-width:820px){.bg-zahlen{grid-template-columns:repeat(4,minmax(0,1fr))}}
.bg-zahl b{display:block;font-family:var(--bg-kopf);font-weight:400;
  font-size:clamp(1.9rem,3.4vw,3.1rem);line-height:1;color:var(--bg-orange)}
.bg-zahl span{display:block;font-size:.88rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;margin-top:.5rem;opacity:.9}

/* ---------- FAQ ---------- */
.bg-faq{border-top:2px solid rgba(40,46,104,.18);margin-top:1.4rem}
.bg-band--navy .bg-faq{border-top-color:rgba(255,255,255,.22)}
.bg-faq details{border-bottom:2px solid rgba(40,46,104,.18);padding:0}
.bg-band--navy .bg-faq details{border-bottom-color:rgba(255,255,255,.22)}
.bg-faq summary{cursor:pointer;list-style:none;padding:18px 44px 18px 0;position:relative;
  font-weight:700;font-size:clamp(1rem,1.1vw,1.12rem)}
.bg-faq summary::-webkit-details-marker{display:none}
.bg-faq summary::after{content:"";position:absolute;right:10px;top:50%;width:14px;height:14px;
  border-right:3px solid var(--bg-orange);border-bottom:3px solid var(--bg-orange);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s ease}
.bg-faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.bg-faq summary:focus-visible{outline:3px solid var(--bg-orange);outline-offset:-3px}
.bg-faq__a{padding:0 0 18px}
.bg-faq__a p{margin:0;max-width:72ch}

/* ---------- Fussband ---------- */
.bg-fussband{background:var(--bg-dunkel);color:var(--bg-weiss);display:flex;flex-wrap:wrap;
  align-items:center;gap:18px;padding:20px clamp(20px,4vw,38px);border-radius:12px;margin-top:2.2rem}
.bg-fussband b{font-weight:700;font-size:clamp(1rem,1.2vw,1.25rem);letter-spacing:.04em}
.bg-fussband p{margin:0;max-width:46ch;font-size:.92rem;opacity:.86}
.bg-fussband .bg-pille{margin-left:auto}

/* ---------- Abschluss ---------- */
.bg-schluss{background:var(--bg-navy);color:var(--bg-weiss);text-align:left}
.bg-schluss .bg-innen{display:grid;gap:clamp(22px,3vw,40px);align-items:center;
  grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){.bg-schluss .bg-innen{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}}

/* ---------- Fliesstext-Links sichtbar machen ----------
   styles.css setzt global a{color:inherit;text-decoration:none} -
   ohne diese Regel waeren Links im Fliesstext nicht erkennbar. */
.bg-seite p a:not(.bg-pille),
.bg-seite li a:not(.bg-pille){
  text-decoration:underline;
  text-decoration-color:var(--bg-orange);
  text-decoration-thickness:2px;
  text-underline-offset:3px;
}
.bg-seite p a:not(.bg-pille):hover,
.bg-seite li a:not(.bg-pille):hover{color:var(--bg-orange)}