/* veredelung.css, ergaenzt das Design des Prototyps um Einwilligungsbanner,
   Kartenplatzhalter, Formularmeldungen und den Fusslink zu den
   Cookie-Einstellungen. Keine neue Schriftquelle, keine externe Ressource.
   Farben und Formensprache folgen dem Prototyp: Inter, Rundungen 4 bis 7px,
   Glasflaechen wie .map-address, Pillenknoepfe wie .header-actions .nav-cta. */

/* ---------------------------------------------------------------------
   Einwilligungsbanner
   Liegt ueber dem schwebenden WhatsApp-Knopf (z-index 65), aber unter dem
   Menue (.site-menu, z-index 100). Es sperrt niemals das Scrollen, Scrollen
   ist keine Zustimmung.
--------------------------------------------------------------------- */
.einwilligung {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 90;
  display: flex;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}
.einwilligung[hidden] { display: none; }

.einwilligung-karte {
  width: 100%;
  max-width: 640px;
  max-height: calc(100svh - 32px);
  overflow: auto;
  box-sizing: border-box;
  padding: 28px 28px 24px;
  background: #0c1423e3;
  border: 1px solid #b6d2ff40;
  border-radius: 7px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 20px 55px #00122a50;
  color: #f4f5f6;
}
.einwilligung-karte > .eyebrow { color: #9fc8ff; }
.einwilligung-karte h2 {
  font-size: 22px;
  margin: 14px 0 10px;
}
.einwilligung-karte > p {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: #c3cede;
  max-width: 62ch;
}

.einwilligung-kategorien {
  margin: 20px 0 4px;
  border-top: 1px solid #b6d2ff2b;
}
.einwilligung-kategorie {
  border-bottom: 1px solid #b6d2ff2b;
  padding: 16px 0;
}
.einwilligung-kontrollkaestchen {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-size: 14px;
}
.einwilligung-kontrollkaestchen input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex: none;
  accent-color: #0763f3;
}
.einwilligung-kontrollkaestchen strong {
  font-weight: 600;
  color: #f4f5f6;
}
.einwilligung-pflicht {
  font-size: 11px;
  font-weight: 400;
  color: #c3cede;
}
.einwilligung-beschreibung {
  margin: 6px 0 0 30px;
  font-size: 13px;
  line-height: 1.6;
  color: #c3cede;
  max-width: 56ch;
}
.einwilligung-dienste {
  margin: 8px 0 0 30px;
  font-size: 12px;
  color: #c3cede;
}
.einwilligung-dienste summary {
  cursor: pointer;
  color: #9fc8ff;
  list-style: revert;
}
.einwilligung-dienste ul {
  margin: 8px 0 0;
  padding-left: 18px;
  line-height: 1.6;
}
.einwilligung-dienste li { margin-bottom: 6px; }
.einwilligung-dienste a {
  color: #9fc8ff;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}

.einwilligung-datenschutzlink {
  margin: 18px 0 0;
  font-size: 12px;
}
.einwilligung-datenschutzlink a {
  color: #9fc8ff;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

.einwilligung-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}
/* Drei Knoepfe mit identischer Klasse und identischem Aussehen: gleiche
   Ebene, Groesse, Farbe, Kontrast. Keiner ist optisch bevorzugt. */
.einwilligung-knopf {
  flex: 1 1 160px;
  padding: 13px 20px;
  border: 1px solid transparent;
  border-radius: 28px;
  background: #0763f3;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  transition: background 0.2s;
}
.einwilligung-knopf:hover { background: #0550c4; }

@media (max-width: 760px) {
  .einwilligung { padding: 10px; }
  .einwilligung-karte { padding: 22px 18px 18px; border-radius: 6px; }
  .einwilligung-karte h2 { font-size: 20px; }
  .einwilligung-knoepfe { flex-direction: column; }
  .einwilligung-knopf { flex: none; width: 100%; }
}

/* ---------------------------------------------------------------------
   Kartenplatzhalter, ersetzt das Google-Maps-iframe bis zur Zustimmung.
   Steht im bestehenden .map-frame, neben der Glaskarte .map-address, die
   unveraendert bleibt (Desktop: unten links, 310px breit).
--------------------------------------------------------------------- */
.map-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  padding: 40px;
  /* Reserviert unten Platz, damit der Text nicht mit .map-address kollidiert. */
  padding-bottom: 260px;
  box-sizing: border-box;
}
.map-placeholder-inhalt {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 560px;
}
.map-placeholder-adresse {
  margin: 0;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 600;
  color: #eaf1fb;
}
.map-placeholder-hinweis {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: #c7d3e3;
}
.map-placeholder-hinweis a {
  color: #a9cbff;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.map-placeholder-aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 2px;
}
.map-placeholder-laden {
  border: 1px solid #ffffff55;
  border-radius: 28px;
  background: transparent;
  color: #eaf1fb;
  padding: 11px 22px;
  font-size: 13px;
  font-weight: 600;
  transition: background 0.2s;
}
.map-placeholder-laden:hover { background: #ffffff1a; }
.map-placeholder-aktionen > a {
  font-size: 12px;
  color: #a9cbff;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
/* Sobald das iframe eingesetzt ist, tritt der Platzhalterinhalt zurueck.
   Das [hidden]-Attribut setzt einwilligung.js, die Sichtbarkeit regelt
   bereits die globale Regel [hidden]{display:none} aus dem Prototyp. */
.map-placeholder iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 760px) {
  .map-placeholder {
    position: static;
    min-height: 330px;
    padding: 24px;
    border-radius: 4px;
    border: 1px solid #ffffff29;
    background: #24344a;
    align-items: center;
  }
  .map-placeholder-inhalt { max-width: 100%; }
}

/* ---------------------------------------------------------------------
   Formularmeldung (Erfolg / Fehler) und Formularhinweis mit den drei
   direkten Kontaktwegen. Das Kontaktformular steht auf hellem Grund
   (.contact, background #eceef2, Schrift #101113).
--------------------------------------------------------------------- */
.formular-status:empty { display: none; }
.formular-status {
  margin-top: 6px;
  padding: 16px 18px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.65;
}
.formular-status p { margin: 0; color: inherit; }
.formular-status[data-status="erfolg"] {
  background: #e3f6e9;
  border: 1px solid #b7e4c7;
  color: #146c34;
}
.formular-status[data-status="fehler"] {
  background: #fdeceb;
  border: 1px solid #f3c8c4;
  color: #a3241b;
}
.formular-status[data-status="fehler"] a { color: #0550c4; }
.formular-status:focus { outline: 2px solid #0763f3; outline-offset: 3px; }

.formular-hinweis {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.75;
  color: #565b63;
}
.formular-hinweis a {
  color: #0550c4;
  text-decoration: underline;
}
.formular-hinweis .nur-ohne-js {
  margin-top: 8px;
  font-weight: 600;
  color: #101113;
}
/* Der globale Fokusring des Prototyps (#80adff) erreicht auf dem hellen
   Kontakt-Hintergrund nur 1,9:1 und verfehlt damit die geforderten 3:1 fuer
   Fokus-Indikatoren. Betrifft die neuen Links hier und in der
   Formularmeldung, deshalb hier gezielt auf einen dunkleren Ton angehoben. */
.formular-hinweis a:focus-visible,
.formular-status a:focus-visible {
  outline-color: #0550c4;
}
/* site.js setzt die Klasse js auf das html-Element per Inline-Skript, noch
   vor dem Rendern. Ohne JavaScript bleibt der Satz sichtbar. */
.js .nur-ohne-js { display: none; }

/* ---------------------------------------------------------------------
   Fusslink zu den Cookie-Einstellungen, in der Linkgruppe neben Impressum,
   Datenschutz und Alle Seiten. Erbt sonst die Farbe der Nachbarlinks.
--------------------------------------------------------------------- */
.einwilligung-oeffnen { color: #a7abb2; }
.einwilligung-oeffnen:hover,
.einwilligung-oeffnen:focus-visible { color: #83afff; }

/* ---------------------------------------------------------------------
   Herz im Fusszeilentext "Made with ... by dqmedia.de". Sitzt wie ein
   Textzeichen in der Zeile und uebernimmt die Farbe des Linktexts.
--------------------------------------------------------------------- */
.herz {
  width: 0.95em;
  height: 0.95em;
  vertical-align: -0.12em;
  display: inline-block;
}

/* ---------------------------------------------------------------------
   Seitlicher Ueberlauf bei 320 Pixel. Auftrag des Inhabers vom
   24. September 2026, Phase D: punktuelle Aufhebung der Design-Sperre
   (Ablehnung 14 in MASTERPLAN.md) mit der Auflage, dass sich bei 360 Pixel
   und breiter kein Pixel aendert. Deshalb steht alles in einer Media Query
   bis 359 Pixel. Nachweis: build/pixelvergleich.mjs, 114 Fotos bei 360, 390
   und 1280 Pixel vorher und nachher byte-gleich; Messung bei 320 Pixel:
   build/ueberlauf.mjs, Pruefung 21.

   Ursachen im Prototyp (site.css), je Seite in HANDOFF.md:
   1. Tabellen in Fachbeitraegen haben unter 760 Pixel min-width:470px und
      stehen in .tbl ohne Scrollbehaelter. Die Tabelle scrollt jetzt in
      ihrem Kasten, statt die Seite zu verbreitern.
   2. .page-content .grid legt keine Spalten fest. Die eine Spalte waechst
      auf die Mindestbreite ihres Inhalts, auf den Leistungsseiten die
      Tabelle mit 470 Pixel, auf zwei Standortseiten eine Karte. min-width:0
      erlaubt der Spalte, auf die Seitenbreite zu schrumpfen; die Tabelle
      scrollt dann in ihrem vorhandenen .tblwrap.
   3. Lange Woerter duerfen umbrechen: in den grossen Ueberschriften der
      Uebersichtskarten (.route-card h2), in Karten (.page-content .card)
      und in Ueberschriften der Inhaltsseiten, etwa "Suchmaschinenoptimierung",
      "Schaufensterbeschriftung", "Beschriftungsverfahren".
   Nichts wird ausgeblendet, kein Text, keine Farbe, keine Schrift aendert
   sich.
--------------------------------------------------------------------- */
@media (max-width: 359px) {
  .page-content .tbl { max-width: 100%; overflow-x: auto; }
  .page-content .grid > * { min-width: 0; }
  .page-content .card,
  .page-content h1,
  .page-content h2,
  .page-content h3,
  .route-card h2 { overflow-wrap: anywhere; }
}