/* ==========================================================================
   site.css – gemeinsames Responsive-System der Hauptwebsite (Stand 14.09.2026)
   Eingebunden auf Startseite, Impressum, Datenschutz, AGB (nach dem Tailwind-CSS).
   Grundsätze:
   - Alles skaliert fließend (clamp, rem, Container-Einheiten) statt vieler Sonderfälle.
   - Unter 1600 px Breite bleibt die Grundschrift 16 px; darüber wächst sie bis 20 px
     mit (27-Zoll-Monitore), und mit ihr alle rem-Werte – Inhalte wirken nicht verloren.
   - Kein pauschales overflow-x:hidden: Überläufe werden an ihrer Quelle behoben.
   ========================================================================== */

/* 1 Grundschrift, Sprungziele unter dem festen Kopf ------------------------ */
html {
  /* 16 px bis ~1600 px Breite, dann stufenlos bis 20 px; die Höhe begrenzt mit,
     damit niedrige Breitbild-Monitore nicht überskalieren. rem statt px:
     eine größere Standardschrift im Browser bleibt wirksam. */
  font-size: clamp(1rem, min(0.5833rem + 0.4167vw, 0.5833rem + 0.7407vh), 1.25rem);
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body { overflow-x: visible; }

:root {
  /* Vertikaler Abschnittsabstand: 52 px (Handy) … 96 px (ab 1280 px) */
  --sec-y: clamp(3.25rem, 2.11rem + 4.86vw, 6rem);
  --brand: #0A6EBD;
  --brand-2: #3A9FE8;
  --focus: #0A6EBD;
}

/* 2 Typografie: keine einzelnen Wörter in eigener Zeile, lange Wörter trennen */
h1, h2, h3, h4, .h-xl, .h-lg, .h-md, .plan-card-title, .kpi-label, .orb-title, .faq-q > span:first-child {
  text-wrap: balance;
}
p, li { text-wrap: pretty; }
h1, h2, h3, h4 { overflow-wrap: break-word; }
@media (max-width: 30em) {
  h1, h2, h3, h4, .faq-q > span:first-child {
    -webkit-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: 10 4 4;
  }
}

/* 3 Fokusrahmen – sichtbar auf hellen und dunklen Flächen (mind. 3:1) ------ */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
footer :focus-visible, #cookie-banner :focus-visible, #recruiting :focus-visible { outline-color: #9BD1FF; }
a, button { -webkit-tap-highlight-color: rgba(10, 110, 189, .12); }

/* 4 Kopf und Navigation ------------------------------------------------------ */
#site-header .site-logo { min-height: 2.75rem; min-width: 2.75rem; }
#site-header .site-logo img { width: 2.25rem; height: 2.25rem; }
/* Desktop-Navigation erst ab 1024 px; darunter kompakte Variante (Logo, Button, Menü) */
#site-header .site-nav { gap: .75rem; }
#site-header .site-nav a { position: relative; padding: .75rem .5rem; border-radius: .5rem; min-width: 2.75rem; text-align: center; }
#site-header .site-nav a.is-active { color: #111827; }
#site-header .site-nav a.is-active::after {
  content: ""; position: absolute; left: .5rem; right: .5rem; bottom: .35rem; height: 2px; border-radius: 2px;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
}
@media (max-width: 1023.98px) {
  #site-header .site-nav { display: none !important; }
}
/* Menü-Taste: vollständig hier definiert (die Rechtsseiten haben eigene, kleinere Tailwind-Dateien) */
#menu-btn {
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: .75rem; background: transparent; cursor: pointer;
  transition: background-color .2s ease;
}
#menu-btn:hover { background: rgba(0, 0, 0, .04); }
@media (max-width: 1023.98px) { #menu-btn { display: flex !important; } }
@media (min-width: 1024px) { #menu-btn { display: none !important; } }
#menu-btn .bar { display: block; width: 1.25rem; height: 2px; border-radius: 9999px; background: #1f2937; transition: transform .3s ease, opacity .3s ease; transform-origin: center; }
#menu-btn[aria-expanded="true"] .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#menu-btn[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; }
#menu-btn[aria-expanded="true"] .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
#site-header .header-cta { min-height: 2.75rem; }

/* Mobiles Menü: beginnt unter dem Kopf (Kopf mit X bleibt bedienbar), scrollt bei wenig Höhe.
   Zustand über .is-open (site.js). */
#mobile-menu {
  position: fixed; left: 0; right: 0; bottom: 0; top: 4rem; z-index: 40;
  overflow: hidden; opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
#mobile-menu.is-open { opacity: 1; pointer-events: auto; }
#mobile-menu .menu-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .4); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
#menu-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(18rem, 86vw);
  display: flex; flex-direction: column;
  background: #fff; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateX(100%); transition: transform .3s ease-out;
}
#mobile-menu.is-open #menu-panel { transform: none; }
#menu-panel nav { display: flex; flex-direction: column; gap: .25rem; padding: 1rem 1rem 0; flex: 1 0 auto; }
#menu-panel nav a {
  display: flex; align-items: center; gap: .75rem; min-height: 3.25rem; padding: .875rem 1rem;
  border-radius: .75rem; font-weight: 600; color: #1f2937; text-decoration: none; transition: background-color .2s ease;
}
#menu-panel nav a:hover { background: #f9fafb; }
#menu-panel nav a .material-symbols-outlined { color: var(--brand); font-size: 1.25rem; }
#menu-panel nav a.is-active { background: #EBF4FC; color: var(--brand); }
#menu-panel .menu-actions { display: flex; flex-direction: column; gap: .75rem; padding: 1rem 1rem 2rem; border-top: 1px solid #f3f4f6; }
#menu-panel .menu-actions a {
  display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3rem; padding: .75rem 1.25rem;
  border-radius: .75rem; font-size: .875rem; font-weight: 700; text-decoration: none;
}
#menu-panel .menu-actions .material-symbols-outlined { font-size: 1rem; }
#menu-panel .menu-cta { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%); color: #fff; box-shadow: 0 10px 15px -3px rgba(10, 110, 189, .2); }
#menu-panel .menu-tel { border: 1px solid #e5e7eb; background: #fff; color: #374151; font-weight: 600 !important; }
#menu-panel .menu-tel .material-symbols-outlined { color: var(--brand); }
.menu-open-lock { position: fixed; left: 0; right: 0; overflow: hidden; }

/* Tailwind-Ergänzungen für den gemeinsamen Kopf (fehlen in tw-datenschutz.css; Werte wie Tailwind) */
.flex-shrink-0 { flex-shrink: 0; }
.z-10 { z-index: 10; }
.tracking-tight { letter-spacing: -0.025em; }
.text-\[13px\] { font-size: .8125rem; }
@media (min-width: 768px) { .md\:text-sm { font-size: .875rem; line-height: 1.25rem; } }

/* 5 Footer ------------------------------------------------------------------- */
.site-footer { padding-bottom: env(safe-area-inset-bottom); }
/* Touch-Geräte und schmale Fenster: Tippflächen mind. 44 px */
@media (pointer: coarse), (max-width: 1023.98px) {
  .site-footer .footer-icons { gap: .5rem; }
  .site-footer .footer-icons a { width: 2.75rem; height: 2.75rem; flex-shrink: 0; }
  .site-footer .footer-nav { row-gap: 0; }
  .site-footer .footer-nav a { display: flex; align-items: center; min-height: 2.75rem; min-width: 2.75rem; }
  .site-footer .footer-legal { gap: .25rem; flex-shrink: 0; }
  .site-footer .footer-legal a { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; min-width: 2.75rem; padding: 0 .5rem; }
  .site-footer .footer-cta { min-height: 2.75rem; }
}
/* Handy: Footer-Links zweispaltig statt einer langen Liste; Rechtslinks dürfen umbrechen */
@media (max-width: 767.98px) {
  .site-footer .footer-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
  .site-footer .footer-nav > p { grid-column: 1 / -1; margin-bottom: .25rem; }
  .site-footer .footer-nav a { width: auto; }
  .site-footer .footer-legal { flex-wrap: wrap; justify-content: center; }
}

/* 6 Cookie-Hinweise: Tasten mind. 44 px, Abstand zur Geste-Leiste (iPhone) */
#cookie-banner { padding-bottom: max(1rem, env(safe-area-inset-bottom)) !important; }
#cookie-banner button, #mww-cookie-banner button { min-height: 2.75rem; }
#mww-cookie-banner { padding-bottom: max(1.125rem, env(safe-area-inset-bottom)) !important; }

/* 7 Rechtsseiten: angenehme Zeilenlänge, fließende Überschrift ---------------- */
.legal-page h1 { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.25rem); line-height: 1.15; -webkit-hyphens: manual; hyphens: manual; }
/* ca. 75–80 Zeichen pro Zeile (ch ist bei Manrope zu breit, deshalb em) */
.legal-page .legal p, .legal-page .legal li, .legal-page .legal-section p, .legal-page .prose p, .legal-page .prose li { max-width: 36em; }
@media (min-width: 768px) {
  .legal-page .legal p, .legal-page .legal ul li { font-size: .9375rem; }
  .legal-page .legal-section p { font-size: .9375rem; }
  .legal-page .prose p, .legal-page .prose ul li { font-size: .9375rem; }
}
.legal-page .prose a, .legal-page .legal a, .legal-page .legal-section a { overflow-wrap: anywhere; word-break: normal; }
.legal-page .back-link { min-height: 2.75rem; }

/* 8 Hover-Effekte nur mit echter Maus (auf Touch bleibt sonst der Zustand hängen) */
@media (hover: none) {
  html .ma-card:hover { transform: none; }
  html .buero-slide:hover img { transform: none; }
  html .plan-circle:hover { transform: none; }
}

/* 9 Ruhige Darstellung bei „Bewegung reduzieren“ ------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .float-a, .float-b, .pulse-dot, .sfn-avatar { animation: none !important; }
  #mobile-menu, #menu-panel, #menu-btn .bar { transition: none !important; }
}

/* 10 Sprunglink für Tastatur ----------------------------------------------------- */
.skip-link {
  position: fixed; left: 1rem; top: .75rem; z-index: 100000;
  padding: .75rem 1rem; border-radius: .75rem; background: #fff; color: #0A6EBD; font-weight: 700;
  box-shadow: 0 8px 24px rgba(0,0,0,.15); transform: translateY(-200%); transition: transform .2s ease;
}
.skip-link:focus { transform: none; }

/* 11 Hero (Startseite) ------------------------------------------------------------ */
/* Tablet hochkant (768–1023 px): Text über die volle Breite, Grafik mittig darunter –
   statt zweier gequetschter Spalten, in denen die Karte über ihre Spalte hinausragte. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 3.5rem !important; }
  .hero-visual { padding-bottom: 2.5rem; }
}
/* Buttons so breit wie der Einleitungstext statt über die ganze Spalte */
@media (min-width: 768px) { .hero-ctas { max-width: 28rem; } }
/* Handy quer / niedrige Fenster: weniger Luft über der Überschrift */
@media (max-height: 540px) and (orientation: landscape) {
  section.hero { padding-top: 5.5rem; padding-bottom: 2.5rem; }
}

/* 12 Startseite: kleine Korrekturen einzelner Abschnitte ------------------------ */
/* Vorher/Nachher-Karten: Abstand zwischen Liste und Kalendergrafik auch bei langer Liste */
#results ul { margin-bottom: 1.25rem; }
/* Buttons mit längerem Text: auf schmalen Handys weniger Innenabstand, Umbruch ausgewogen */
.cta-btn, .cta-btn-sm { text-wrap: balance; }
@media (max-width: 30em) { .cta-btn { padding-left: 1.25rem !important; padding-right: 1.25rem !important; } }

/* 13 Mindestschriftgröße (Prüfstand 16.09.2026, Checkliste LC13) -----------------
   Kein sichtbarer Text unter 12 px: Etiketten, Badges und Footer-Überschriften. */
.text-\[11px\] { font-size: .75rem; }
.font-label { font-size: .75rem; }

/* 14 Fußzeile der Rechtsseiten (Prüfstand 16.09.2026, Checkliste E6) -------------
   Seit die Links „Websites“ und „Referenzen“ dazugekommen sind, passt die Reihe auf
   Handys nicht mehr in eine Zeile. Sie bricht deshalb mittig um; die Trennpunkte
   entfallen dort, damit keine einzelne Waise am Zeilenende steht. */
.footer-legal { flex-wrap: wrap; justify-content: center; }
/* Ab Tablet steht die Reihe neben dem Copyright: die Links schrumpfen nicht, der Satz bricht um (18.09.2026) */
@media (min-width: 48.0625em) { .footer-legal { flex-shrink: 0; flex-wrap: nowrap; } }
@media (max-width: 48em) {
  /* Drei Links oben, zwei darunter – ohne einzelne Waise am Zeilenende. */
  .footer-legal { display: grid; grid-template-columns: repeat(3, auto); gap: .25rem 1rem;
                  justify-content: center; justify-items: center; }
  .footer-legal > span { display: none; }
}

/* 15 Teamfoto im <picture> (18.09.2026): Bild füllt die 3:4-Karte wie vorher das nackte <img> */
.team-card-img picture { display: block; width: 100%; height: 100%; }

/* 16 Kundenstimme Praxis-Shooting (18.09.2026) ------------------------------------
   Video Dr. Keil (Wistia i18gwd2r9u) unter „Echte Praxen. Echte Shootings.“ Links Vorschaubild mit
   Abspielknopf, rechts Zitat; unter 56.25em untereinander. Bis zum Klick keine Verbindung zu Wistia
   (site.js, Block „Kundenvideo“). Gleiche Gestaltung wie auf /webseiten/, Werte hier fest eingetragen. */
.kv { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 2.5rem; align-items: center; max-width: 62.5rem; margin: 0 auto; }
.kv-video { position: relative; aspect-ratio: 16 / 9; border-radius: 1.125rem; overflow: hidden; background: #0b0f14; box-shadow: 0 24px 60px -24px rgba(10, 37, 64, .45); }
.kv-start { position: absolute; inset: 0; display: block; color: #fff; }
.kv-start img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
.kv-start::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 30, 60, 0) 55%, rgba(10, 30, 60, .35) 100%); pointer-events: none; }
.kv-play { position: absolute; left: 50%; top: 50%; z-index: 1; display: grid; place-items: center; width: 4.75rem; height: 4.75rem; border-radius: 50%; background: linear-gradient(135deg, #0A6EBD, #3A9FE8); box-shadow: 0 14px 34px -10px rgba(10, 110, 189, .8), 0 0 0 8px rgba(255, 255, 255, .28); transform: translate(-50%, -50%); transition: transform .25s ease, box-shadow .25s; }
.kv-play svg { width: 1.875rem; height: 1.875rem; margin-left: .25rem; fill: currentColor; }
.kv-dauer { position: absolute; right: .875rem; bottom: .75rem; z-index: 1; padding: .25rem .625rem; border-radius: 999px; background: rgba(17, 24, 39, .66); font-size: .75rem; font-weight: 800; letter-spacing: .04em; }
.kv-start:hover img { transform: scale(1.03); }
.kv-start:hover .kv-play, .kv-start:focus-visible .kv-play { transform: translate(-50%, -50%) scale(1.08); }
.kv-start:focus-visible { outline: 3px solid #0A6EBD; outline-offset: -3px; }
.kv-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.kv-zitat { margin: 0; }
.kv-zitat p { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem); font-weight: 800; line-height: 1.3; letter-spacing: -.01em; color: #111827; text-wrap: balance; }
.kv-name { display: flex; flex-direction: column; gap: .125rem; margin-top: 1.125rem; font-size: .92rem; color: #111827; }
.kv-name span { color: #6b7280; font-size: .85rem; }
.kv-transkript { margin-top: 1.125rem; border-top: 1px solid #e5e7eb; padding-top: .75rem; }
.kv-transkript summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 700; font-size: .9rem; color: #0A6EBD; }
.kv-transkript p { margin-top: .375rem; font-size: .9rem; line-height: 1.65; color: #6b7280; }
.kv-hinweis { margin-top: .75rem; font-size: .78rem; line-height: 1.5; color: #6b7280; }
.kv-hinweis a { color: inherit; text-decoration: underline; }
@media (max-width: 56.25em) { .kv { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; max-width: 40rem; } }
@media (max-width: 37.5em) { .kv-video { border-radius: .75rem; } .kv-play { width: 4rem; height: 4rem; } .kv-play svg { width: 1.625rem; height: 1.625rem; } }
@media (prefers-reduced-motion: reduce) { .kv-start img, .kv-play { transition: none; } .kv-start:hover img { transform: none; } }
/* Unsichtbare Überschrift für Screenreader (im kompilierten Tailwind nicht enthalten) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* 17 Shooting-Seite und Verweise (19.09.2026) --------------------------------------
   Aktiver Menüpunkt auf Unterseiten (aria-current), Link unter „Echte Praxen. Echte Shootings.“
   und der dezente Verweis auf die Leistungsseite Websites am Ende der Leistungen. */
#site-header .site-nav a[aria-current="page"] { color: #111827; }
#site-header .site-nav a[aria-current="page"]::after { content: ""; position: absolute; left: .5rem; right: .5rem; bottom: .35rem; height: 2px; border-radius: 2px; background: var(--brand, #0A6EBD); }
#menu-panel nav a[aria-current="page"] { background: #EBF4FC; color: var(--brand, #0A6EBD); }
.mehr-link { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; margin-top: .5rem; font-size: .95rem; font-weight: 700; color: #0A6EBD; text-decoration: none; }
.mehr-link span { transition: transform .2s ease; }
.mehr-link:hover span, .mehr-link:focus-visible span { transform: translateX(3px); }
.web-hinweis { margin: clamp(2rem, 1.5rem + 2vw, 3rem) auto 0; max-width: 40rem; text-align: center; font-size: .92rem; line-height: 1.6; color: #6B7280; }
.web-hinweis a { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.75rem; margin-left: .25rem; font-weight: 700; color: #0A6EBD; text-decoration: none; }
.web-hinweis a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .mehr-link span { transition: none; } }

/* 18 Startseite: Teaser Shooting-Seite unter „Einblicke“ und Sektion „Websites“ (19.09.2026) ------------ */
.sh-teaser { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); align-items: center;
  max-width: 62rem; margin: 0 auto; padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); border-radius: 1.75rem;
  background: linear-gradient(135deg, #f5f9fe, #eef5fc); border: 1px solid rgba(10, 110, 189, .12); }

.sh-teaser-bild { position: relative; margin: 0; overflow: hidden; border-radius: 1.25rem; aspect-ratio: 4 / 5; box-shadow: 0 30px 60px -30px rgba(10, 37, 64, .5); }
.sh-teaser-bild img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; transition: transform .8s cubic-bezier(.22, 1, .36, 1); }
.sh-teaser:hover .sh-teaser-bild img { transform: scale(1.04); }
.sh-teaser-rec { position: absolute; left: .875rem; top: .875rem; display: flex; align-items: center; gap: .4rem; padding: .3rem .65rem; border-radius: 999px;
  background: rgba(17, 24, 39, .6); color: #fff; font-size: .75rem; font-weight: 800; letter-spacing: .08em; }
.sh-teaser-rec::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: #ef4444; animation: tzBlink 1.2s steps(1) infinite; }
@keyframes tzBlink { 50% { opacity: 0; } }
.sh-teaser-h { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.2rem); font-weight: 900; line-height: 1.15; letter-spacing: -.02em; color: #111827; text-wrap: balance; }
.sh-teaser-lead { margin: .75rem 0 0; font-size: 1rem; line-height: 1.65; color: #6B7280; }
.sh-teaser-liste { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: .75rem; }
.sh-teaser-liste li { display: flex; align-items: flex-start; gap: .75rem; font-size: .95rem; font-weight: 600; line-height: 1.5; color: #374151; }
.sh-teaser-liste span { flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: linear-gradient(135deg, #0A6EBD, #3A9FE8); color: #fff; font-size: .8rem; font-weight: 800; }
.sh-teaser-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3rem; margin-top: 1.75rem; padding: .8rem 1.6rem; border-radius: .875rem;
  background: linear-gradient(135deg, #0A6EBD, #3A9FE8); color: #fff; font-weight: 700; text-decoration: none; box-shadow: 0 14px 30px -12px rgba(10, 110, 189, .7); transition: transform .2s, box-shadow .2s; }
.sh-teaser-btn:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -12px rgba(10, 110, 189, .8); }
.sh-teaser-btn span { transition: transform .2s; } .sh-teaser-btn:hover span { transform: translateX(3px); }
.sh-teaser-btn:focus-visible { outline: 3px solid #3A9FE8; outline-offset: 3px; }
@media (max-width: 47.99em) {
  .sh-teaser { grid-template-columns: minmax(0, 1fr); }
  .sh-teaser-bild { aspect-ratio: 4 / 3; }
  .sh-teaser-btn { width: 100%; }
}

.web-liste { list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; gap: .75rem; }
.web-liste li { display: flex; align-items: center; gap: .75rem; color: #fff; font-weight: 500; font-size: clamp(.875rem, .85rem + .15vw, 1rem); }
.web-liste svg { flex: none; width: 1.5rem; height: 1.5rem; fill: #bfdbfe; stroke: #0A6EBD; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.web-liste svg circle { stroke: none; }
.web-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.web-ctas > a:first-child span { transition: transform .2s; } .web-ctas > a:first-child:hover span { transform: translateX(3px); }
.web-ref { display: inline-flex; align-items: center; min-height: 2.75rem; color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255, 255, 255, .5); }
.web-ref:hover { text-decoration-color: #fff; }
@media (max-width: 47.99em) { .web-ctas { justify-content: center; } .web-ctas > a:first-child { width: 100%; } }
.web-browser { border-radius: 1.25rem; overflow: hidden; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); box-shadow: 0 30px 60px -30px rgba(0, 20, 60, .5); }
.web-bar { display: flex; align-items: center; gap: .35rem; padding: .7rem .9rem; background: rgba(255, 255, 255, .12); }
.web-bar i { width: .55rem; height: .55rem; border-radius: 50%; background: rgba(255, 255, 255, .45); }
.web-bar span { margin-left: .6rem; padding: .2rem .7rem; border-radius: .5rem; background: rgba(255, 255, 255, .9); color: #0A6EBD; font-size: .75rem; font-weight: 700; }
.web-seite { display: grid; gap: .75rem; padding: 1rem; }
.web-hero { display: grid; gap: .45rem; padding: 1rem; border-radius: .875rem; background: rgba(255, 255, 255, .14); }
.web-hero b { height: .7rem; border-radius: .35rem; background: rgba(255, 255, 255, .7); width: 70%; }
.web-hero b + b { width: 45%; background: rgba(255, 255, 255, .4); }
.web-hero em { width: 6rem; height: 1.6rem; margin-top: .35rem; border-radius: .5rem; background: #fff; }
.web-karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.web-karten span { height: 3.2rem; border-radius: .75rem; background: rgba(255, 255, 255, .14); }
.web-google { position: relative; display: grid; gap: .15rem; padding: .75rem .9rem; border-radius: .875rem; background: #fff; }
.web-google strong { font-size: .85rem; color: #1a0dab; }
.web-google small { font-size: .75rem; color: #188038; }
.web-rang { position: absolute; right: .75rem; top: 50%; transform: translateY(-50%); padding: .2rem .6rem; border-radius: 999px; background: #ecfdf5; color: #16a34a; font-size: .75rem; font-weight: 800; }
@media (prefers-reduced-motion: reduce) { .sh-teaser-bild img, .sh-teaser-btn, .sh-teaser-btn span { transition: none; } .sh-teaser-rec::before { animation: none; } }

/* 19 Einblicke als Bento-Raster (20.09.2026) ---------------------------------------
   Ersetzt die durchlaufende Bilderleiste: ruhiges Raster im Stil der übrigen Abschnitte.
   Zwei Hochformate über zwei Reihen, vier Querformate – zusammen 8 Felder (4 × 2). */
.ein-galerie { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(8rem, 5rem + 8vw, 13rem);
  grid-auto-flow: dense; gap: clamp(.65rem, .4rem + .8vw, 1rem); max-width: 72rem; margin: 0 auto; }
.ein-galerie figure { position: relative; margin: 0; overflow: hidden; border-radius: 1.25rem; background: #e9edf2; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.ein-galerie .ein-hoch { grid-row: span 2; }
.ein-galerie img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.22, 1, .36, 1); }
.ein-galerie img.fokus-oben { object-position: 50% 18%; }
.ein-galerie figure::after { content: ""; position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(180deg, rgba(10,30,60,0), rgba(10,30,60,.55)); opacity: .85; pointer-events: none; }
.ein-galerie figcaption { position: absolute; left: .75rem; bottom: .7rem; z-index: 1; padding: .25rem .6rem; border-radius: 999px;
  background: rgba(255,255,255,.92); color: #111827; font-size: .75rem; font-weight: 700; }
.ein-galerie figure:hover img { transform: scale(1.05); }
@media (max-width: 64em) { .ein-galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(8rem, 4rem + 14vw, 12rem); } }
@media (max-width: 40em) { .ein-galerie figure { border-radius: 1rem; } .ein-galerie figcaption { font-size: .75rem; left: .5rem; bottom: .5rem; } }
@media (prefers-reduced-motion: reduce) { .ein-galerie img { transition: none; } .ein-galerie figure:hover img { transform: none; } }

/* 20 Mitarbeiterfotos auf der Startseite (20.09.2026) -------------------------------
   Neun Beispielbilder nebeneinander, darunter die drei Punkte „alles aus einer Hand“. */
.mf-lead { max-width: 46rem; margin: .75rem auto 0; font-size: 1rem; line-height: 1.7; color: #6B7280; text-wrap: pretty; }
/* Alle neun Bilder in EINER Reihe nebeneinander (Wunsch Nevio 20.09.2026).
   Die Reihe nutzt die volle Fensterbreite, damit auf dem Desktop alle gleichzeitig zu sehen sind;
   reicht der Platz nicht (Tablet, Handy), lässt sie sich seitlich schieben. */
.mf-bilder { display: flex; flex-wrap: nowrap; justify-content: center; gap: clamp(.35rem, .2rem + .45vw, .75rem);
  width: 100vw; margin-left: calc(50% - 50vw); padding: 0 clamp(.75rem, .4rem + 1.4vw, 2rem) .5rem;
  overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.mf-bilder figure { margin: 0; flex: 0 0 clamp(6.5rem, 8vw, 10rem); scroll-snap-align: center; }
@media (max-width: 75em) { .mf-bilder { justify-content: flex-start; } }
.mf-bilder img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 15%; border-radius: 1.25rem; background: #eef1f4; }
.mf-liste { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem 2rem; margin: clamp(1.5rem, 1.2rem + 1vw, 2.25rem) 0 0; padding: 0; }
/* Tablet: enger setzen, damit die drei Punkte in einer Zeile bleiben und keiner allein umbricht */
@media (max-width: 64em) { .mf-liste { gap: .75rem 1.25rem; font-size: .92rem; } }
@media (max-width: 48em) { .mf-liste { flex-direction: column; align-items: center; gap: .625rem; } }
.mf-liste li { display: flex; align-items: center; gap: .5rem; font-size: .95rem; font-weight: 600; color: #374151; }
.mf-liste .material-symbols-outlined { font-size: 1.25rem; color: #16a34a; font-variation-settings: 'FILL' 1; }
.mf-cta { margin: 1.5rem 0 0; text-align: center; }
.mf-cta a { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; font-weight: 700; color: #0A6EBD; text-decoration: none; }
.mf-cta a span { transition: transform .2s; }
.mf-cta a:hover span { transform: translateX(3px); }
@media (max-width: 34em) {
  /* Links und rechts Luft lassen, wie auf der Shooting-Seite – sonst kleben die Bilder am Rand */
  .mf-bilder { scroll-snap-type: x mandatory; width: auto; margin-left: 0; padding-left: 0; padding-right: 0; }
  .mf-bilder figure { flex: 0 0 62%; scroll-snap-align: start; }
  .mf-liste { flex-direction: column; align-items: flex-start; gap: .625rem; }
}
@media (prefers-reduced-motion: reduce) { .mf-cta a span { transition: none; } }
/* Textlinks in der Mitarbeiterfoto-Sektion */
.mf-lead a { color: #0A6EBD; text-decoration: underline; text-underline-offset: 3px; }

/* 21 Kopfzeile mit sieben Menüpunkten (20.09.2026, neue SEO-Seiten) ----------------
   „Praxismarketing“ ist dazugekommen. Damit nichts zweizeilig umbricht, stehen die Punkte
   etwas enger; Reihenfolge, Texte und Aussehen bleiben unverändert. */
#site-header .site-nav { white-space: nowrap; }
@media (max-width: 1340px) {
  #site-header .site-nav { gap: 1.25rem; }
  #site-header .site-nav a { font-size: 13px; }
}
/* Unter 1100 px reicht der Platz für sieben Punkte nicht mehr: dort übernimmt das Menü,
   genau wie bisher schon unterhalb von 1024 px. */
@media (max-width: 1099.98px) {
  #site-header .site-nav { display: none !important; }
  #menu-btn { display: flex !important; }
}

/* 22 – Navigation mit dem achten Punkt „Print“ (21.09.2026)
   Zwischen 1100 und 1340 px lief die Leiste sonst ins Logo. */
@media (max-width: 1339.98px) { #site-header .site-nav { gap: 1rem; } }
@media (max-width: 1239.98px) { #site-header .site-nav { gap: .75rem; } #site-header .site-nav a { font-size: 12.5px; } }

/* 23 – Standort-Sektion (21.09.2026)
   Zentrale Lage in Hessen, Arbeit im ganzen Land. Karte rechts, Anschrift als Karte davor. */
.ort-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; }
.ort-eyebrow { display: inline-block; margin-bottom: .875rem; font-size: .75rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #0A6EBD; }
.ort-eyebrow::before { content: ""; display: inline-block; width: 1.5rem; height: 2px; margin: 0 .625rem .25rem 0; vertical-align: middle;
  background: linear-gradient(135deg, #0A6EBD 0%, #3A9FE8 100%); }
.ort-liste { list-style: none; margin: 0 0 2rem; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.ort-liste li { display: flex; align-items: flex-start; gap: .75rem; font-size: .95rem; line-height: 1.6; color: #4B5563; }
.ort-liste .ort-ic { flex: none; width: 1.25rem; height: 1.25rem; color: #3A9FE8; margin-top: .15rem; }

.ort-karte { position: relative; display: flex; justify-content: center; }
.ort-karte img { display: block; width: 100%; max-width: 26rem; height: auto; }
.ort-adresse { position: absolute; right: 0; bottom: 8%; max-width: 15rem; display: flex; flex-direction: column; gap: .5rem; font-style: normal;
  padding: 1.25rem 1.375rem; border-radius: 1.125rem; background: #fff; border: 1px solid #EDF0F4;
  box-shadow: 0 26px 52px -28px rgba(10, 37, 64, .45); }
.ort-adresse strong { font-size: .95rem; font-weight: 800; color: #111827; margin-bottom: .15rem; }
.ort-adresse span { display: flex; align-items: center; gap: .55rem; font-size: .875rem; color: #6B7280; }
.ort-adresse .ort-ic { flex: none; width: 1.05rem; height: 1.05rem; color: #3A9FE8; }

@media (max-width: 56.25em) {
  .ort-grid { grid-template-columns: minmax(0, 1fr); }
  .ort-karte { flex-direction: column; align-items: center; gap: 1rem; }
  .ort-karte img { max-width: 17rem; }
  .ort-adresse { position: static; width: 100%; max-width: 20rem; }
}

/* Menüpunkte, deren Symbol nicht in der reduzierten Icon-Schrift steckt */
#menu-panel nav a .men-ic { flex: none; width: 1.375rem; height: 1.375rem; color: inherit; }