/* =========================================================
   netz-spezialist.de – Portfolio-/Business-Website
   Reines HTML5/CSS3, kein Framework.
   ========================================================= */

:root {
  /* ---------- Modernes Tech-Farbschema (Deep Navy / Slate + Sky-Blue-Akzent) ----------
     --color-teal / --color-teal-light bleiben als Variablennamen bestehen (an sehr
     vielen Stellen im CSS/HTML referenziert), zeigen jetzt aber auf Sky-Blue statt auf
     das frühere Grün - so wirkt der neue Akzent automatisch überall (Buttons, Links,
     aktive Filter, Rahmen), ohne jede einzelne Stelle einzeln anfassen zu müssen.
     --color-emerald ist NEU und bewusst nur für Erfolg/Status/"Verfügbar"-Badges
     reserviert, nicht für allgemeine Interaktionen. ---------- */
  --color-navy: #0f172a;
  --color-navy-dark: #0b1220;
  --color-slate: #1e293b;
  --color-sky: #0284c7;
  --color-sky-light: #38bdf8;
  --color-teal: var(--color-sky);
  --color-teal-light: var(--color-sky-light);
  --color-emerald: #10b981;
  --color-emerald-light: #34d399;
  --color-bg: #f8fafc;
  --color-card: #ffffff;
  --color-text: #0f172a;
  --color-text-light: #55697a;
  --shadow: 0 4px 18px rgba(15, 23, 42, 0.10);
  --radius: 14px;
  --radius-lg: 20px;
  --max-width: 1320px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
}

a { color: var(--color-teal); text-decoration: none; }
a:hover { text-decoration: underline; }

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Sticky-Wrapper: Kontaktleiste + Hauptnavigation bleiben
   GEMEINSAM beim Scrollen oben kleben, damit Telefon/WhatsApp/E-Mail nie
   aus dem Blick verschwinden (das war zuvor NUR bei der Navigation der
   Fall, die Kontaktleiste scrollte weg). Siehe Sticky-Regel weiter unten
   bei "Header / Navigation" (dort zusammen mit dem admin.html-Sonderfall
   definiert). ---------- */

/* ---------- Top-Kontaktleiste (immer sichtbar, damit der Kunde sofort
   abgeholt wird) ---------- */
.top-contact-bar {
  background: var(--color-teal);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 600;
}
.top-contact-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  padding: 7px 24px;
}
.top-contact-lead { opacity: 0.9; font-weight: 700; }
.top-contact-inner a { color: #fff; white-space: nowrap; }
.top-contact-inner a:hover { text-decoration: underline; }
@media (max-width: 620px) {
  .top-contact-inner { justify-content: center; font-size: 0.82rem; gap: 6px 12px; }
  .top-contact-lead { display: none; }
}

/* ---------- Sprachumschalter (🇩🇪/🇬🇧), von i18n.js in die
   Top-Kontaktleiste eingefügt ---------- */
.lang-switch { display: inline-flex; gap: 4px; margin-left: auto; }
.lang-switch-btn {
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 6px;
  padding: 2px 7px;
  font-size: 0.95rem;
  line-height: 1.4;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.15s ease, background 0.15s ease;
}
.lang-switch-btn:hover { opacity: 0.9; }
.lang-switch-btn.active { opacity: 1; background: rgba(255,255,255,0.32); }
@media (max-width: 620px) { .lang-switch { margin-left: 0; } }

/* ---------- Header / Navigation ---------- */
header.site-header {
  position: relative; /* Containing Block fuer das absolut positionierte
                          Mobile-Dropdown-Menue (nav.main-nav ul), bleibt
                          unabhaengig vom Sticky-Verhalten unten erhalten */
  background: var(--color-navy);
  color: #fff;
  box-shadow: var(--shadow);
}
/* Auf Seiten OHNE .sticky-top-wrap (z.B. admin.html) muss der Header
   selbst sticky sein; auf Seiten MIT Wrapper übernimmt der Wrapper das
   Sticky-Verhalten für Kontaktleiste + Header gemeinsam. */
.sticky-top-wrap,
header.site-header.standalone-header {
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  max-width: var(--max-width);
  margin: 0 auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.15rem;
  color: #fff;
}

.brand img { height: 36px; width: 36px; border-radius: 8px; object-fit: cover; }

nav.main-nav ul {
  display: flex;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}

nav.main-nav a { color: #dce6ec; font-weight: 500; }
nav.main-nav a:hover { color: #fff; text-decoration: none; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: #fff;
  font-size: 1.6rem;
  cursor: pointer;
}

@media (max-width: 760px) {
  nav.main-nav ul {
    display: none;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background: var(--color-navy-dark);
    flex-direction: column;
    padding: 16px 24px;
    gap: 16px;
  }
  nav.main-nav ul.open { display: flex; }
  .nav-toggle { display: block; }
}

@media (max-width: 560px) {
  .accordion-body { padding-left: 24px; }
  .float-btn { width: 50px; height: 50px; font-size: 1.3rem; }
}

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-dark) 100%);
  color: #fff;
  padding: 64px 0 72px;
}

.hero-inner { display: flex; align-items: center; gap: 48px; flex-wrap: wrap; }
.hero-text { flex: 1 1 420px; }
.hero-img { flex: 1 1 480px; text-align: center; }
.hero-img img {
  width: 100%;
  max-width: 560px;
  height: auto;
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

.hero h1 { font-size: 2.4rem; margin: 0 0 8px; line-height: 1.2; }
.hero .claim { color: var(--color-teal-light); font-size: 1.2rem; font-weight: 600; margin-bottom: 18px; }
.hero p.lead { color: #cfe0e8; max-width: 600px; margin-bottom: 26px; }

/* Auf dem Handy war die Hero-Überschrift viel zu groß (füllte fast den
   ganzen Bildschirm, kaum lesbar) - hier deutlich verkleinert. */
@media (max-width: 600px) {
  .hero { padding: 40px 0 48px; }
  .hero h1 { font-size: 1.5rem; }
  .hero .claim { font-size: 1rem; }
}
@media (max-width: 400px) {
  .hero h1 { font-size: 1.3rem; }
}

.btn {
  display: inline-block;
  padding: 12px 26px;
  border-radius: 30px;
  font-weight: 600;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-primary { background: var(--color-teal); color: #fff; }
.btn-primary:hover {
  background: var(--color-teal-light);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(2,132,199,0.35);
}

.btn-outline { border: 2px solid #cfe0e8; color: #fff; margin-left: 12px; }
.btn-outline:hover { border-color: #fff; text-decoration: none; }

.btn-outline-dark {
  border: 2px solid var(--color-navy);
  color: var(--color-navy);
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
}
.btn-outline-dark:hover { background: var(--color-navy); color: #fff; text-decoration: none; }
.btn-outline-dark:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
button.btn { cursor: pointer; font-family: inherit; font-size: 1rem; border: none; }

/* ---------- WhatsApp (Grün, wie im Original-Branding) und E-Mail
   (kräftiges Blau statt des unauffälligen weißen Outline-Looks) ---------- */
.btn-whatsapp { background: #25d366; color: #fff; }
.btn-whatsapp:hover {
  background: #1ebe57;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(37,211,102,0.35);
}
.btn-whatsapp:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-email {
  background: var(--color-sky);
  color: #fff;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
}
.btn-email:hover {
  background: var(--color-sky-light);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(2,132,199,0.35);
}
.btn-email:disabled { opacity: 0.6; cursor: not-allowed; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Ihr Problem – meine Lösung ---------- */
.problem-section { background: var(--color-card); }
.problem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
.problem-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--color-bg);
  border: 1px solid #dee7ec;
  border-radius: var(--radius);
  padding: 18px 20px;
  font-weight: 600;
  color: var(--color-navy);
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.problem-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-teal);
  text-decoration: none;
}
.problem-card .icon { font-size: 1.6rem; }

/* ---------- Preishinweis ---------- */
.pricing-note {
  text-align: center;
  color: var(--color-text-light);
  background: var(--color-bg);
  border-radius: var(--radius);
  padding: 16px 22px;
  max-width: 640px;
  margin: 30px auto 0;
}

/* ---------- Sections ---------- */
section { padding: 72px 0; }
section h2 { font-size: 2.1rem; color: var(--color-navy); text-align: center; margin-bottom: 10px; }
section .section-sub {
  text-align: center;
  color: var(--color-text-light);
  max-width: 620px;
  margin: 0 auto 42px;
}

/* ---------- Leistungen: Gruppen aus lauter sichtbaren Einzel-Kacheln ---------- */
.leistungs-gruppe { margin-bottom: 50px; }
.leistungs-gruppe:last-child { margin-bottom: 0; }
.leistungs-gruppe h3.gruppen-titel {
  font-size: 1.45rem;
  color: var(--color-navy);
  margin: 0 0 18px;
  border-left: 4px solid var(--color-teal);
  padding-left: 12px;
}

.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}

.tile-card {
  background: var(--color-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 24px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tile-card:hover { transform: translateY(-3px); box-shadow: 0 8px 26px rgba(15,23,42,0.16); }
/* ---------- Icon links neben der Überschrift: Das Icon "floated" nach
   links, die Überschrift fließt als Text direkt daneben (statt darüber) -
   funktioniert ohne Änderung an jeder einzelnen Kachel im HTML. Absätze
   danach räumen den Float per clear wieder auf, damit sie die volle
   Breite nutzen. ---------- */
.tile-card .icon {
  font-size: 2rem;
  line-height: 1.15;
  float: left;
  margin: 0 12px 8px 0;
}
.tile-card .icon-img {
  float: left;
  margin: 0 12px 8px 0;
}
.tile-card .icon-img picture,
.tile-card .icon-img img {
  display: block;
}
.tile-card .icon-img img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 10px;
}
.tile-card h4 { margin: 0 0 8px; font-size: 1.1rem; color: var(--color-navy); padding-top: 4px; }
.tile-card p { margin: 0; color: var(--color-text-light); font-size: 0.92rem; clear: both; }
.tile-card ul { margin: 6px 0 0; padding-left: 18px; color: var(--color-text-light); font-size: 0.9rem; clear: both; }
.tile-card li { margin-bottom: 4px; }
.tile-card .provider-badges { clear: both; }

/* ---------- Hervorgehobene Kacheln: "Kein/langsames Internet" (Sky-Blue
   Rahmen) und "Jahrelange Erfahrung" (kräftiger, größer, in der freien
   Grid-Ecke) ---------- */
.tile-card--highlight {
  border: 2px solid var(--color-sky);
  background: #eff8ff;
}
.tile-card--erfahrung {
  background: var(--color-navy);
  color: #fff;
}
.tile-card--erfahrung h4 { color: #fff; font-size: 1.3rem; }
.tile-card--erfahrung p { color: #cfe0e8; }

.provider-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.provider-badge {
  display: inline-block;
  background: var(--color-bg);
  border: 1px solid #d5dee4;
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-navy);
}

/* ---------- Leistungen Grid ---------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 22px;
}

.service-card {
  background: var(--color-card);
  border-radius: var(--radius);
  padding: 26px 22px;
  box-shadow: var(--shadow);
  transition: transform 0.15s ease;
}
.service-card:hover { transform: translateY(-4px); }
.service-card .icon { font-size: 2rem; float: left; margin: 0 12px 8px 0; line-height: 1.15; }
.service-card h3 { margin: 0 0 8px; font-size: 1.05rem; color: var(--color-navy); padding-top: 4px; }
.service-card p { margin: 0; color: var(--color-text-light); font-size: 0.92rem; clear: both; }

/* ---------- Fotografie-Galerie ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.gallery-grid img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: block;
  transition: transform 0.2s ease;
}
.gallery-grid img:hover { transform: scale(1.03); }

/* ---------- Mast-Technik-Tooltip (Hover/Touch-Overlay auf dem Funkmast-Bild
   "Technik im Detail": Yagi-/Sektorantennen, Ku-Band-Kopfstation) ---------- */
.mast-tech-card { position: relative; }
.mast-info-btn {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 4;
  background: rgba(15, 23, 42, 0.82);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 6px 13px;
  font-size: 0.76rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease;
}
.mast-info-btn:hover,
.mast-info-btn:focus { background: var(--color-sky); }
.mast-tech-tooltip {
  position: absolute;
  inset: 0;
  background: rgba(11, 18, 32, 0.95);
  color: #e2e8f0;
  border-radius: var(--radius);
  padding: 20px 18px;
  font-size: 0.85rem;
  line-height: 1.55;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 3;
}
.mast-tech-tooltip strong { color: var(--color-sky-light); }
.mast-tech-tooltip ul { margin: 10px 0 0; padding-left: 18px; }
.mast-tech-tooltip li { margin-bottom: 8px; }
/* Bewusst NUR über die Klasse ".open" (per Klick auf den ℹ️-Button
   umgeschaltet, siehe lightbox.js) sichtbar - kein ":hover"/":focus-within"
   mehr: Ein automatisch bei Hover eingeblendetes, das ganze Bild
   überdeckendes Overlay hat vorher den Klick zum Vergrößern abgefangen
   (Klick landete auf dem Tooltip statt auf dem Bild darunter). Jetzt ist
   das Verhalten auf Maus und Touch identisch: Button = Info ein-/ausblenden,
   Klick auf das (ggf. eingeblendete) Bild bzw. den Tooltip-Text selbst =
   vergrößern (die Technik-Details erscheinen dann als Bildunterschrift
   unter dem Großbild, siehe lightbox.js). */
.mast-tech-card.open .mast-tech-tooltip {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  cursor: zoom-in;
}

/* ---------- Lightbox (klickbare Bildvergrößerung) ---------- */
.lightbox-img { cursor: zoom-in; }
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 18, 32, 0.92);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  z-index: 500;
  padding: 24px;
}
.lightbox-overlay.open { display: flex; }
.lightbox-image {
  max-width: min(92vw, 1100px);
  max-height: 82vh;
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  object-fit: contain;
}
.lightbox-caption {
  color: #dce6ec;
  font-size: 0.92rem;
  max-width: 800px;
  text-align: center;
  margin: 0;
}
.lightbox-close {
  position: absolute;
  top: 18px;
  right: 24px;
  background: none;
  border: none;
  color: #fff;
  font-size: 2.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 10px;
}
.lightbox-close:hover { color: var(--color-teal-light); }

/* ---------- E-Mail-Klick-Auswahl: Audio-Nachricht vs. eigenes
   E-Mail-Programm ---------- */
.email-choice-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 18, 32, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
  padding: 20px;
}
.email-choice-overlay[hidden] { display: none; }
.email-choice-box {
  position: relative;
  background: var(--color-card);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  padding: 32px 30px;
  max-width: 460px;
  width: 100%;
  text-align: center;
}
.email-choice-box h3 { margin: 0 0 8px; color: var(--color-navy); }
.email-choice-box p { margin: 0 0 20px; color: var(--color-text-light); }
.email-choice-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: none;
  border: none;
  color: var(--color-text-light);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}
.email-choice-close:hover { color: var(--color-navy); }
.email-choice-options { display: flex; flex-direction: column; gap: 14px; }
.email-choice-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px;
  border-radius: var(--radius);
  font-size: 1.05rem;
  font-weight: 700;
}
.email-choice-option span {
  font-weight: 400;
  font-size: 0.82rem;
  opacity: 0.9;
}

/* ---------- Carrier-/Partner-Logo-Sektion ("Unterstützte Netze &
   Carrier-Erfahrung"): monochrome Wordmark-Badges auf dunklem Navy-Grund,
   mit sanftem Farb-Hover je Marke. Bewusst als CSS-Text-Badges statt
   eingebetteter Fremd-Logo-Grafiken umgesetzt (keine Markenrechte Dritter
   im Repo, trotzdem klar erkennbare Zuordnung). ---------- */
.carrier-section {
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-dark) 100%);
  padding: 56px 0;
}
.carrier-section h2,
.carrier-section .section-sub { color: #fff; }
.carrier-section .section-sub { color: #b7c4d1; }
.carrier-logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
}
.carrier-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius);
  padding: 20px 14px;
  color: #cfe0e8;
  font-weight: 700;
  letter-spacing: 0.01em;
  filter: grayscale(1);
  opacity: 0.85;
  transition: filter 0.2s ease, opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
.carrier-logo:hover {
  filter: grayscale(0);
  opacity: 1;
  transform: translateY(-3px);
  background: rgba(255,255,255,0.1);
}
.carrier-telekom:hover { color: #e60049; }
.carrier-vodafone:hover { color: #e60000; }
.carrier-glasfaser:hover { color: var(--color-emerald-light); }
.carrier-1und1:hover { color: #ff0000; }
.carrier-o2:hover { color: var(--color-sky-light); }
.carrier-mawacon:hover { color: var(--color-sky-light); }
.carrier-knet:hover { color: var(--color-emerald-light); }
.carrier-starlink:hover { color: #fff; }
@media (max-width: 560px) { .carrier-section { padding: 40px 0; } }

/* ---------- Themen-Hubs: 4 themenbasierte Akkordeons (natives <details>,
   kein JS nötig für das Auf-/Zuklappen selbst) mit Zielgruppen-Tabs
   (Privatkunde | KMU/B2B | ISP & Partner) je Thema. ---------- */
.themen-hubs-section { background: var(--color-bg); }
.thub-accordion { display: flex; flex-direction: column; gap: 14px; max-width: 900px; margin: 0 auto; }
.thub-item {
  background: var(--color-card);
  border: 1px solid #e1e8ec;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.thub-item summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 22px;
  font-weight: 700;
  color: var(--color-navy);
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  gap: 10px;
}
.thub-item summary::-webkit-details-marker { display: none; }
.thub-item summary::after {
  content: "+";
  margin-left: auto;
  font-size: 1.3rem;
  color: var(--color-sky);
  transition: transform 0.2s ease;
}
.thub-item[open] summary::after { transform: rotate(45deg); }
/* .thub-body als Grid: Tabs (Reiter) stehen als vertikale Spalte LINKS,
   der zugehörige Text steht rechts DANEBEN in derselben Zeile statt wie
   vorher darunter (das erzeugte große Leerflächen). Da immer nur der
   aktive .thub-panel "display:block" hat, landet automatisch genau der
   sichtbare Text im zweiten Grid-Feld - ganz ohne HTML-Änderung. */
.thub-body {
  padding: 0 22px 22px;
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 8px 26px;
  align-items: start;
}
.thub-tabs { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 8px; margin-bottom: 0; }
@media (max-width: 700px) {
  .thub-body { grid-template-columns: 1fr; }
  .thub-tabs { flex-direction: row; flex-wrap: wrap; margin-bottom: 14px; }
}
.thub-tab {
  border: 1px solid #d5dee4;
  background: var(--color-bg);
  color: var(--color-text);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.thub-tab:hover { border-color: var(--color-sky); }
.thub-tab.active { background: var(--color-sky); border-color: var(--color-sky); color: #fff; }
.thub-panel { display: none; margin: 0; color: var(--color-text-light); }
.thub-panel.active { display: block; }

/* ---------- Hardware & Shop / Ratgeber ---------- */
.hardware-section { background: var(--color-bg); }
.ratgeber-section { background: var(--color-card); }

.ratgeber-themen-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 0 0 30px;
}
.thema-btn {
  border: 2px solid #cfd9e0;
  background: var(--color-bg);
  color: var(--color-navy);
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: 30px;
  padding: 8px 18px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.thema-btn:hover { border-color: var(--color-teal); }
.thema-btn.active { background: var(--color-teal); border-color: var(--color-teal); color: #fff; }

.ratgeber-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}
.ratgeber-card {
  background: var(--color-bg);
  border-radius: var(--radius);
  padding: 24px 26px;
  box-shadow: var(--shadow);
}
.ratgeber-card h3 { margin: 0 0 10px; color: var(--color-navy); font-size: 1.02rem; line-height: 1.35; }
.ratgeber-card p { margin: 0 0 12px; color: var(--color-text-light); font-size: 0.9rem; line-height: 1.7; }
.ratgeber-card p:last-child { margin-bottom: 0; }
.video-embed { position: relative; padding-bottom: 56.25%; height: 0; margin-bottom: 4px; border-radius: 10px; overflow: hidden; }
.video-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.verlinkter-inhalt-hinweis {
  margin: 0 0 12px;
  font-size: 0.78rem;
  color: var(--color-text-light);
  font-style: italic;
}

/* ---------- Wiederkehrende Zwischen-CTAs ("Kostenlose Erstberatung" /
   "Jetzt Problem schildern") ---------- */
.cta-inline { text-align: center; margin-top: 30px; }

/* ---------- Kundenstimmen: echte Google-Bewertungen aus der Mawacon-Zeit ---------- */
.kundenstimmen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-bottom: 10px;
}
.kundenstimmen-card {
  background: var(--color-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 24px;
}
.kundenstimmen-card .sterne { color: #f5a623; font-size: 1.05rem; margin-bottom: 10px; letter-spacing: 2px; }
.kundenstimmen-card p { margin: 0 0 12px; color: var(--color-text); font-size: 0.94rem; font-style: italic; }
.kundenstimmen-card .autor { color: var(--color-text-light); font-size: 0.85rem; font-weight: 600; }

/* ---------- Floating Call/WhatsApp Buttons ---------- */
.floating-buttons {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.float-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  transition: transform 0.15s ease;
}
.float-btn:hover { transform: scale(1.08); text-decoration: none; }
.float-call { background: var(--color-teal); }
.float-whatsapp { background: #25d366; }

/* ---------- Über mich ---------- */
.about { background: var(--color-card); }
.about-inner { display: flex; gap: 40px; align-items: center; flex-wrap: wrap; }
.about-text { flex: 1 1 420px; }
.qualifikation-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.qualifikation-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-slate) 100%);
  color: #fff;
  border-radius: 30px;
  padding: 8px 16px;
  font-size: 0.85rem;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18);
}
.about-facts {
  flex: 1 1 280px;
  background: var(--color-bg);
  border-radius: var(--radius);
  padding: 24px;
}
.about-facts dt { font-weight: 700; color: var(--color-navy); margin-top: 12px; }
.about-facts dt:first-child { margin-top: 0; }
.about-facts dd { margin: 2px 0 0; color: var(--color-text-light); }

/* ---------- Audio-Kontaktformular ---------- */
.kontakt-formular-card {
  background: var(--color-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px 34px;
  margin-bottom: 28px;
}
.audio-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.audio-status { color: var(--color-text-light); font-size: 0.92rem; }
.audio-fallback-note {
  color: var(--color-text-light);
  font-size: 0.92rem;
  font-style: italic;
}
.kontakt-form { margin-top: 20px; }
.kontakt-form label {
  display: block;
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: 6px;
  font-size: 0.92rem;
}
.kontakt-form textarea,
.kontakt-form input[type="text"] {
  width: 100%;
  border: 1px solid #d5dee4;
  border-radius: 10px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 0.98rem;
  margin-bottom: 18px;
  background: var(--color-bg);
  color: var(--color-text);
}
.kontakt-form textarea:focus,
.kontakt-form input[type="text"]:focus {
  outline: 2px solid var(--color-teal);
  outline-offset: 1px;
}
.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}
.versand-row { grid-template-columns: repeat(auto-fit, minmax(200px, auto)); }
.required-mark { color: var(--color-teal, #0f766e); font-weight: 700; }

.datenschutz-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--color-text-light);
  font-weight: 400;
  margin-bottom: 16px;
  cursor: pointer;
}
.datenschutz-checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  cursor: pointer;
}

.kontakt-form input[type="file"] {
  width: 100%;
  border: 1px dashed #b9c6cd;
  border-radius: 10px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 0.92rem;
  margin-bottom: 6px;
  background: var(--color-bg);
  color: var(--color-text);
}
.form-hint {
  background: #eef5f3;
  border: 1px solid #cfe4dd;
  border-radius: 8px;
  padding: 8px 12px;
  margin: 0 0 18px;
  font-size: 0.85rem;
  color: var(--color-text-light);
}

/* ---------- Galerie-Kategorien ---------- */
.galerie-kategorie { margin-bottom: 46px; }
.galerie-kategorie:last-child { margin-bottom: 0; }

/* ---------- Kontakt ---------- */
.contact-card {
  background: var(--color-navy);
  color: #fff;
  border-radius: var(--radius);
  padding: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: space-between;
  align-items: center;
}
.contact-info { display: flex; flex-direction: column; gap: 10px; }
.contact-info a { color: #fff; font-weight: 600; }
.contact-info .label { color: var(--color-teal-light); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.contact-card .btn-outline { border-color: #fff; color: #fff; }
.contact-card .btn-outline:hover { background: #fff; color: var(--color-navy); }

/* ---------- QR-Kontaktkarte ---------- */
.qr-kontakt-card {
  background: var(--color-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px 30px;
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.qr-kontakt-card img { width: 130px; height: 130px; border-radius: 8px; flex-shrink: 0; }
.qr-kontakt-card h3 { margin: 0 0 8px; color: var(--color-navy); }
.qr-kontakt-card p { margin: 0; color: var(--color-text-light); }

/* ---------- Footer ---------- */
footer {
  background: var(--color-navy-dark);
  color: #9fb3c0;
  padding: 28px 0;
  text-align: center;
  font-size: 0.9rem;
}
footer a { color: #cfe0e8; }
footer .footer-links { margin-top: 8px; }
footer .footer-links a { margin: 0 10px; }

/* ---------- Legal Pages (Impressum/Datenschutz) ---------- */
.legal-page main {
  background: var(--color-card);
  max-width: 820px;
  margin: 40px auto 80px;
  padding: 40px 48px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.legal-page h1 { color: var(--color-navy); }
.legal-page h2 { text-align: left; font-size: 1.3rem; margin-top: 32px; }
.legal-page section { padding: 0; }

/* ---------- Mobile-Feinschliff: Auf dem Handy waren Überschriften,
   Innenabstände und Kacheln insgesamt zu groß/breit (Nutzer-Feedback:
   "einfach viel zu groß fürs Handy"). Verkleinert Section-Padding,
   Überschriften und Kachel-Innenabstände gezielt für kleine Screens,
   ohne das Desktop-Layout zu verändern. ---------- */
@media (max-width: 640px) {
  section { padding: 44px 0; }
  section h2 { font-size: 1.5rem; margin-bottom: 8px; }
  section .section-sub { margin-bottom: 26px; font-size: 0.92rem; }
  .leistungs-gruppe h3.gruppen-titel { font-size: 1.15rem; }
  .tile-card, .service-card { padding: 16px 18px; }
  .tile-card .icon, .service-card .icon { font-size: 1.6rem; }
  .tile-card .icon-img img { width: 42px; height: 42px; }
  .tile-card h4 { font-size: 1rem; }
  .thub-item summary { padding: 14px 16px; font-size: 0.96rem; }
  .thub-body { padding: 0 16px 16px; }
  .ratgeber-card { padding: 18px 20px; }
  .kundenstimmen-card { padding: 16px 18px; }
  .contact-card { padding: 26px 22px; }
  .about-inner { gap: 24px; }
}