/* ====================================================================
   bausteine.css

   Hier steht, was vorher als style="..." mitten im Markup klebte.
   Die Datei wird auf JEDER Seite geladen, direkt nach fonts.css und
   vor der seitenspezifischen Gestaltung. Deshalb gilt sie auch auf
   den Rechtsseiten, die nur legal.css laden, aber denselben Kopf,
   denselben Fuss und dasselbe Formular benutzen.

   Reihenfolge: zuerst die allgemeinen Helfer, dann die Bauteile.
   ==================================================================== */


/* --- Allgemeine Helfer ---------------------------------------------- */

/* Weisser Abschnittshintergrund. Stand 5x als style="background:#ffffff"
   an <section class="flow"> und einmal an <section class="grenzen">. */
.weiss{background:#ffffff}

/* Gedaempfter Fliesstext. Die graue Farbe fuer Nebensaetze. */
.gedaempft{color:var(--muted)}

/* Kurze Randbemerkung unter einem Abschnitt: grau, mittig, mit Abstand. */
.notiz{color:var(--muted);margin-top:26px;text-align:center}

/* Quellenangabe am Fuss einer Rechtsseite. */
.quelle{margin-top:26px;font-size:.85rem;color:var(--muted)}

/* Ein Link, der sichtbar unterstrichen sein soll, obwohl die Umgebung
   Links ohne Unterstrich zeigt (Fehlerband, Cookie-Hinweis). */
.unterstrichen{text-decoration:underline}

/* Fuer Augen unsichtbar, fuer Vorleseprogramme und Formularfallen da.
   Nicht display:none: ein verstecktes Feld muss im Formular bleiben. */
.versteckt{position:absolute;left:-9999px}

/* Rueckweg unter einem kurzen Text, z. B. auf der Dankesseite. */
.zurueck{margin-top:26px}

/* Eine Zwischenueberschrift, die weiter unten einen neuen Gedanken
   beginnt und deshalb mehr Luft nach oben braucht. */
.h2-abstand{margin-top:34px}


/* --- Kopf: Band bei fehlgeschlagener Anfrage ------------------------ */

/* Erscheint nur, wenn der Versand nicht geklappt hat. Rot, damit es
   niemand uebersieht, und mit der Telefonnummer als zweitem Weg. */
.fehlerband{
  background:#fdecec;
  border-bottom:1px solid #f2c2c2;
  color:#8a1f1f;
  padding:14px 20px;
  font:500 .95rem/1.5 Inter,sans-serif;
  text-align:center;
}


/* --- Fuss ----------------------------------------------------------- */

/* Zeile unter dem Logo im Fuss. */
.foot-marke{margin-top:6px;font-size:.85rem}

/* Die Kontaktzeilen im Fuss standen einzeln auf 7px und 9px Abstand.
   Ein Wert fuer alle. */
.foot-contact-lines{margin-top:7px}

/* Der Schriftzug springt nur ein, wenn das Logobild nicht laedt.
   Das onerror am Bild setzt ihn dann per style-Attribut sichtbar. */
.brand .fallback{display:none}


/* --- Bewertungen ----------------------------------------------------- */

.reviews h2{margin-bottom:22px}


/* --- Google-Bewertungen (includes/reviews.php) ----------------------- */

/* Sprungziel fuer Links wie https://www.glanzmacher.de/#bewertungen
   Die Kopfzeile bleibt beim Scrollen stehen und ist 79px hoch. Ohne
   diesen Abstand landet die Ueberschrift dahinter. */
#bewertungen{scroll-margin-top:95px}
.gm-bew-hinweis{max-width:560px;margin:0 auto;padding:34px 28px;text-align:center;
  background:#EAF4FB;border:1px solid #d4e6f4;border-radius:18px}
.gm-bew-stern{width:38px;height:38px;margin-bottom:12px;fill:#F5A623}
.gm-bew-titel{margin:0 0 8px;font-weight:700;font-size:1.05rem;color:#222a31}
.gm-bew-text{margin:0 0 18px;font-size:.92rem;line-height:1.6;color:#69737d}
.gm-bew-text a{color:#3B8ED0;font-weight:600;text-decoration:underline}
.gm-bew-knopf{border:none;border-radius:12px;padding:13px 26px;background:#3B8ED0;color:#fff;
  font-family:inherit;font-size:.95rem;font-weight:600;cursor:pointer}
.gm-bew-knopf:hover{background:#2f78b4}
.gm-bew-knopf:disabled{opacity:.6;cursor:default}
.gm-bew-klein{margin:12px 0 0;font-size:.8rem;color:#8a949e}


/* --- Dank-Popup nach dem Absenden (js/danke-popup.js) ----------------
   Feste Farbwerte, damit das Fenster auf jeder Seite gleich aussieht. */

.gm-dank-hg{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(12,40,60,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease}
.gm-dank-hg.auf{opacity:1;visibility:visible}
.gm-dank{position:relative;width:100%;max-width:460px;background:#fff;border-radius:20px;padding:38px 32px 30px;text-align:center;box-shadow:0 40px 80px -30px rgba(12,40,60,.5);transform:translateY(14px) scale(.98);transition:transform .25s ease;font-family:Inter,system-ui,-apple-system,sans-serif;color:#2e353c;line-height:1.65}
.gm-dank-hg.auf .gm-dank{transform:none}
.gm-dank-zu{position:absolute;top:14px;right:16px;width:36px;height:36px;border:none;border-radius:50%;background:#eef3f8;color:#5a6b7b;font-size:1.5rem;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0}
.gm-dank-zu:hover{background:#e0e9f1}
.gm-dank-haken{width:62px;height:62px;margin:0 auto 18px;border-radius:50%;background:#EAF4FB;display:grid;place-items:center}
.gm-dank-haken svg{width:30px;height:30px;stroke:#25b34b;stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.gm-dank h3{margin:0 0 10px;font-family:"Plus Jakarta Sans",Inter,system-ui,sans-serif;font-size:1.35rem;color:#222a31;line-height:1.25;letter-spacing:-.01em}
.gm-dank p{margin:0 0 6px;font-size:.95rem;color:#69737d}
.gm-dank-kontakt{margin-top:16px;padding-top:16px;border-top:1px solid #e5e9ee;font-size:.9rem;color:#69737d}
.gm-dank-kontakt a{color:#3B8ED0;text-decoration:none;font-weight:600}
.gm-dank-kontakt a:hover{text-decoration:underline}
.gm-dank-ok{margin-top:22px;width:100%;padding:13px 20px;border:none;border-radius:12px;background:#3B8ED0;color:#fff;font-size:.95rem;font-weight:600;cursor:pointer;font-family:inherit}
.gm-dank-ok:hover{background:#2f78b4}
.gm-dank-laeuft{opacity:.6;pointer-events:none}
@media (prefers-reduced-motion:reduce){.gm-dank-hg,.gm-dank{transition:none}.gm-dank{transform:none}}

/* --- Kopfzeile am Telefon -------------------------------------------
   Unter 920 px blendet die Grundgestaltung Navigation und Kontakt aus.
   Statt dessen stehen rechts zwei Knoepfe: anrufen und Menue. Sie sind
   gleich gross und gleich geformt, damit der Kopf als ein Element
   wirkt und nicht aus zwei zufaelligen Teilen besteht.

   Der Telefonknopf ist gefuellt, weil Anrufen die haeufigste Absicht
   ist. Das Menue tritt daneben zurueck.                              */

.kopf-aktionen{display:none}

@media(max-width:920px){
  .kopf-aktionen{
    display:flex;align-items:center;gap:8px;
    margin-left:auto;
  }

  header .tel-knopf,
  header .burger{
    width:46px;height:46px;flex:none;
    display:grid;place-items:center;
    border-radius:14px;
    border:1px solid transparent;
    transition:background .18s ease,border-color .18s ease,transform .12s ease;
    -webkit-tap-highlight-color:transparent;
  }

  /* Anrufen: die Hauptabsicht, deshalb gefuellt */
  header .tel-knopf{
    background:var(--blue,#3B8ED0);
    color:#fff;
    box-shadow:0 6px 16px -8px rgba(47,120,180,.9);
  }
  header .tel-knopf svg{width:21px;height:21px}
  header .tel-knopf:active{transform:scale(.94)}

  /* Menue: tritt zurueck, bekommt nur eine feine Kante */
  header .burger{
    background:#fff;
    border-color:var(--line,#e5e9ee);
    color:var(--head,#222a31);
    padding:0;cursor:pointer;
    font-size:0;
  }
  header .burger:active{transform:scale(.94)}
  header .burger:hover{background:#fff}
  header .burger[aria-expanded="true"]{background:var(--blue-soft,#EDF5FC);border-color:#cfe2f2;color:var(--head,#222a31)}

  /* Drei Linien, die sich beim Oeffnen zum Kreuz drehen */
  header .burger-linien{
    position:relative;display:block;width:18px;height:12px;
  }
  header .burger-linien i{
    position:absolute;left:0;right:0;height:2px;border-radius:2px;
    background:currentColor;
    transition:transform .22s ease,opacity .15s ease;
  }
  header .burger-linien i:nth-child(1){top:0}
  header .burger-linien i:nth-child(2){top:5px}
  header .burger-linien i:nth-child(3){top:10px}
  header .burger[aria-expanded="true"] .burger-linien i:nth-child(1){transform:translateY(5px) rotate(45deg)}
  header .burger[aria-expanded="true"] .burger-linien i:nth-child(2){opacity:0}
  header .burger[aria-expanded="true"] .burger-linien i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
}

@media(prefers-reduced-motion:reduce){
  .tel-knopf,.burger,.burger-linien i{transition:none}
}