/* ===================================================================
   im FOKUS – Anpassungen auf der Tauerndach-Basis
   Wird NACH style.css geladen. Alle Farben kommen aus den Tokens,
   die das Template aus den Globalen Einstellungen berechnet.

   Farbrollen und ihre Kontraste (geprueft gegen WCAG 2.1 AA):
     Navileiste  weiss           + Text neutral-900   17,6:1
     Footer      green-800       + Text weiss          9,0:1
     Links       accent (g-700)  auf weiss             6,1:1
=================================================================== */

/* --- Navileiste: weiss, damit das dunkle Logo darauf lesbar ist --- */
.site-menu{
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 6px 18px rgba(0,0,0,.05);
}
.site-menu.is-stuck{
  box-shadow: 0 12px 30px rgba(0,0,0,.09);
}
/* Kompaktes Logo (ohne Unterzeile, Seitenverhaeltnis 4,05:1 statt 3,09:1)
   vertraegt mehr Hoehe, ohne dass die Navileiste waechst. */
.site-menu-logo{
  height: clamp(40px, 5.2vw, 64px);
  width: auto;
  max-width: 100%;
}
.site-menu-nav{
  display: flex;
  gap: clamp(.9rem, 2.4vw, 2rem);
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
/* Menuepunkte: Marker-Effekt wie auf mav-holding.gmbh – ein farbiger
   Balken hinterlegt die unteren 42% des Textes und faehrt von links ein.
   style.css bringt bereits eine animierte Unterstreichung ueber ::after
   mit (dort sogar zweimal deklariert). Zusammen mit einem border-bottom
   ergab das die doppelte Linie – beides wird hier ersetzt.
   isolation:isolate macht den Link zum eigenen Stapelkontext, sonst
   verschwindet der Balken mit z-index:-1 hinter dem Navi-Hintergrund. */
.site-menu-link{
  color: var(--color-text);
  text-decoration: none;
  letter-spacing: .02em;
  padding: .35rem 0;
  border-bottom: 0;
  position: relative;
  isolation: isolate;
  transition: color .18s ease;
}

.site-menu-nav a.site-menu-link::after{
  content: "";
  position: absolute;
  left: -3px;
  right: -3px;
  bottom: 0;
  top: auto;
  height: 42%;
  border-radius: 0;
  background: var(--green-500);
  z-index: -1;
  opacity: 1;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .45s cubic-bezier(.25,.46,.45,.94);
}

.site-menu-nav a.site-menu-link:hover::after,
.site-menu-nav a.site-menu-link:focus-visible::after,
.site-menu-nav a.site-menu-link[aria-current="page"]::after{
  transform: scaleX(1);
  opacity: 1;
}

/* Textfarbe bleibt dunkel – auf dem gruenen Balken sind das 5,92:1 */
.site-menu-nav a.site-menu-link:hover,
.site-menu-nav a.site-menu-link:focus-visible{
  color: var(--color-text);
}

/* --- Footer: dunkles Gruen, damit weisses Logo und weisser Text tragen --- */
.site-footer{
  background: var(--green-800);
  color: #fff;
}
.site-footer__logo img{
  height: clamp(52px, 7vw, 84px);
  width: auto;
}
.site-footer__coltitle{
  color: #fff;
  opacity: .72;
  font-family: var(--font-body, system-ui, sans-serif);
  font-weight: 600;
  letter-spacing: .08em;
  font-size: .8rem;
}
.site-footer__brand,
.site-footer__addr,
.site-footer__copy{
  color: #fff;
}
.site-footer__copy{
  opacity: .72;
}
.site-footer__link{
  color: #fff;
  text-transform: none;
  font-weight: 400;
  letter-spacing: 0;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.35);
  transition: border-color .18s ease, opacity .18s ease;
}
.site-footer__link:hover,
.site-footer__link:focus-visible{
  color: #fff;
  border-bottom-color: #fff;
}
.site-footer__links--social .site-footer__link,
.site-footer__links--legal .site-footer__link{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}
.site-footer__hours .site-footer__addr{
  opacity: .92;
}

/* --- Typografie ------------------------------------------------- */
body{
  font-family: var(--font-body, system-ui, sans-serif);
  color: var(--color-text);
}
h1,h2,h3,h4,h5,h6{
  font-family: var(--font-heading, Georgia, serif);
  font-weight: 600;
  letter-spacing: .005em;
}
a{ color: var(--color-accent); }
a:hover{ color: var(--green-800); }

/* --- Sichtbarer Fokus, sonst ist die Seite per Tastatur unbenutzbar --- */
:where(a, button, input, textarea, select, summary):focus-visible{
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}
.site-footer :where(a):focus-visible{
  outline-color: #fff;
}

/* --- Inline-Icons statt Font Awesome ---------------------------- */
.ico{
  width: 1em;
  height: 1em;
  vertical-align: -.125em;
  flex: none;
}

/* --- Abschnitte ------------------------------------------------- */
.section{ scroll-margin-top: calc(var(--menu-h, 64px) + 12px); }
.section--muted{ background: var(--color-surface-muted); }

/* Bootstrap .text-muted wuerde im dunklen Footer untergehen – abfangen,
   falls die Klasse irgendwo im Content auftaucht. */
.site-footer .text-muted{
  color: rgba(255,255,255,.78) !important;
}

/* --- Leistungskacheln ------------------------------------------- */
/* Selektor muss die Spezifitaet von style.css treffen (0,3,0),
   sonst gewinnt dort das fest eingetragene #e2e2e2. */
.services.services--grid .service-card{
  background: var(--green-50);
  border: 1px solid var(--green-200);
}
.services.services--grid .service-card:hover{
  background: var(--green-100);
}
/* Lange Fachbegriffe wie "Fasziendistorsionsmodell" sonst ueber den
   Rand hinaus oder mitten im Wort umgebrochen. lang="de" steht im <html>. */
.service-title{
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
  font-size: clamp(1.15rem, 1.5vw + .6rem, 1.5rem);
  line-height: 1.2;
  text-wrap: balance;
}
.service-card .btn{
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}
.service-card .btn:hover,
.service-card .btn:focus-visible{
  background: var(--green-800);
  border-color: var(--green-800);
  color: #fff;
}

/* ===================================================================
   Typografie nach der Wix-Vorlage
   Gemessen am Original (www.imfokus-physio.at, 25.08.2026):
     Hero H1        Cormorant Garamond Semibold  88px / lh 105,6 / zentriert
     Hero Subline   Cormorant Garamond Bold      40px / lh 54    / zentriert
     Abschnitt H2   Cormorant Garamond Semibold  88px / lh 105,6 / links / #6F7670
     Fließtext      Cormorant Garamond Semibold  22px / lh 31,02 / #181818
     Navigation     Proxima Nova                 14px / #181818
   Wix setzt also auch den Fließtext in der Serifenschrift; die Sans wird
   nur für die Navigation und kleine UI-Elemente verwendet.
   Die Groessen sind hier als clamp() gefasst, damit sie auf kleinen
   Schirmen nicht sprengen – der obere Wert entspricht dem Original.
=================================================================== */

/* --- Fließtext: Serifenschrift wie im Original -------------------- */
.richtext,
.imgtext-split__text,
.image-text__text,
.section--text .richtext{
  font-family: var(--font-heading, Georgia, serif);
  font-weight: 600;
  font-size: clamp(1.125rem, .35vw + 1.05rem, 1.375rem);   /* 18 – 22px */
  line-height: 1.41;
  color: var(--neutral-900);
  text-align: left;
}
.richtext p{ margin-bottom: 1.1em; }
.richtext p:last-child{ margin-bottom: 0; }

/* --- Hero --------------------------------------------------------- */
.hero .hero-title,
#start .hero-title{
  font-size: clamp(2.75rem, 6.5vw, 5.5rem);                /* 44 – 88px */
  line-height: 1.2;
  font-weight: 600;
  text-align: center;
}
.hero .hero-sub,
#start .hero-sub{
  font-family: var(--font-heading, Georgia, serif);
  font-weight: 700;
  font-size: clamp(1.375rem, 2.6vw, 2.5rem);               /* 22 – 40px */
  line-height: 1.35;
  text-align: center;
}
.hero .hero-inner,
#start .hero-inner{ text-align: center; }

/* --- Abschnittsüberschriften -------------------------------------- */
.section .imgtext-split__title,
.section .image-text__title,
.section .services__title,
.section > .container > .row > * > h2,
.section h2{
  font-size: clamp(2.25rem, 5.5vw, 5.5rem);                /* 36 – 88px */
  line-height: 1.2;
  font-weight: 600;
  color: var(--neutral-500);
}
/* Über einem Bild steht die Überschrift weiß – dort Kontrast halten. */
.section[data-header-theme="dark"] h2,
.hero h2{ color: #fff; }

/* --- Navigation: 14px wie im Original -----------------------------
   Selektor muss .site-menu-nav a aus style.css treffen (0,2,1). */
.site-menu-nav a.site-menu-link{
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: .875rem;                                       /* 14px */
  font-weight: 400;
  color: var(--neutral-900);
}


/* --- Kachel-Titel an die Überschriften angleichen ------------------
   style.css setzt hier weight 800 mit (0,3,0). */
.services.services--grid .service-title{
  font-weight: 600;
  color: var(--neutral-900);
}

/* Hero-Caption mittig im Fenster.
   Zwei Dinge standen dem im Weg:
   1) .hero-inner ist ein Flex-Container mit align-items:stretch – die Row
      darin fuellt die ganze Hoehe, der Text klebt dadurch oben.
   2) .hero-inner hat in style.css selbst min-height:100vh, die Section
      aber zusaetzlich 80px Innenabstand oben und unten. Der Hero wurde
      dadurch 100vh + 160px hoch, also hoeher als das Fenster – "mittig
      im Hero" war damit nicht mehr "mittig im Fenster".
   Die Section traegt min-vh-100 und zentriert selbst; .hero-inner darf
   deshalb auf Inhaltshoehe zusammenfallen. */
.hero-inner{
  justify-content: center;
  align-items: center;
  min-height: 0;
}
.hero-inner > .row{ width: 100%; }
.hero-content{ margin-inline: auto; }
/* Der mb-3-Abstand unter dem letzten Element zaehlt zur Spaltenhoehe,
   der sichtbare Text sitzt dadurch um die halbe Randbreite zu hoch.
   .mb-3 ist eine Bootstrap-Utility mit !important – hier ist das
   Gegenstueck deshalb ausnahmsweise auch noetig. */
.hero-content > :last-child{ margin-bottom: 0 !important; }

/* Bootstraps .min-vh-100 rechnet mit 100vh. Auf Mobilgeraeten ist das die
   Hoehe OHNE eingeblendete Adressleiste – der Hero ragt dann unten aus dem
   sichtbaren Bereich und die Caption sitzt gefuehlt zu tief. 100svh nimmt
   die tatsaechlich sichtbare Hoehe. */
@supports (height: 100svh){
  .hero.min-vh-100{ min-height: 100svh !important; }
}

/* Grid-Abschnitt (Behandlungen) nutzt eigene Klassen ----------------
   style.css adressiert sie mit .services.services--grid (0,3,0) –
   der Selektor hier muss das treffen, sonst gewinnt die Basis. */
.services.services--grid .section-title{
  font-family: var(--font-heading, Georgia, serif);
  font-size: clamp(2.25rem, 5.5vw, 5.5rem);
  line-height: 1.2;
  font-weight: 600;
  color: var(--neutral-500);
}
.services.services--grid .section-lead{
  font-family: var(--font-heading, Georgia, serif);
  font-weight: 600;
  font-size: clamp(1.125rem, .35vw + 1.05rem, 1.375rem);
  line-height: 1.41;
  color: var(--neutral-900);
}
/* Teaser in den Kacheln ebenfalls in der Serifenschrift */
.services.services--grid .service-card__body p,
.services.services--grid .service-teaser{
  font-family: var(--font-heading, Georgia, serif);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.45;
  color: var(--neutral-900);
}

/* ===================================================================
   Einstiegstext (Modul 6): Hintergrundvarianten
   Gesteuert über data-bg-style, gesetzt aus REX_VALUE[11].
   "dark" nutzt das Markengrau #6F7670 – weißer Text darauf: 4,67:1 (AA).
=================================================================== */
.imgtext-split[data-bg-style="dark"]{
  background: var(--neutral-500);
}
.imgtext-split[data-bg-style="dark"] .imgtext-split__title,
.imgtext-split[data-bg-style="dark"] .imgtext-split__sub,
.imgtext-split[data-bg-style="dark"] .imgtext-split__text,
.imgtext-split[data-bg-style="dark"] .imgtext-split__content{
  color: #fff;
}
.imgtext-split[data-bg-style="dark"] a{ color: #fff; }
.imgtext-split[data-bg-style="dark"] a:hover{ color: var(--green-100); }

.imgtext-split[data-bg-style="muted"]{
  background: var(--color-surface-muted);
}

/* Bild sitzt jetzt im Container und in einer schmaleren Spalte.
   style.css gibt ihm width:45vw bzw. 95vw – viewport-bezogen, damit
   laeuft es aus dem Container heraus. Auf Spaltenbreite umstellen. */
.imgtext-split__image--masked{
  width: 100%;
  margin: 0;
}
@media (max-width: 991px){
  .imgtext-split__image--masked{ width: 100%; }
}
/* Bild vertikal neben dem Text zentriert: die Zeile steht auf
   align-items-center, also braucht das Bild eine eigene Hoehe –
   height:100% wuerde in einer nicht gestreckten Spalte zu auto. */
.imgtext-split .imgtext-split__image{
  height: clamp(240px, 26vw, 420px);
  min-height: 0;
  max-height: none;
  align-self: center;
}
.imgtext-split[data-bg-style="dark"] .imgtext-split__mask-bg{
  background: transparent;
}

/* ===================================================================
   Scroll-Container korrigieren
   style.css setzt `html, body { height:100%; overflow-x:hidden }`.
   overflow-x:hidden erzeugt einen Scroll-Container – zusammen mit
   height:100% scrollt dadurch der BODY statt des Dokuments. Folgen:
     - window.scrollY bleibt 0, Scroll-Events erreichen window nie.
       Alle drei Handler in scripts.js (Sticky-Menu, Header-Theme,
       Overlay-Animation) liefen dadurch ins Leere.
     - der weiße body-Hintergrund deckt nur 100vh ab, darunter zeigt
       sich der grüne html-Hintergrund.
   `overflow-x: clip` unterbindet horizontales Scrollen, ohne einen
   Scroll-Container zu erzeugen.
=================================================================== */
html, body{
  height: auto;
  overflow-x: clip;
  overflow-y: visible;
}
body{ min-height: 100%; }

/* ===================================================================
   Bildergalerie (Modul 16, Swiper)
=================================================================== */
.lm-gallery-section{
  padding-block: clamp(3rem, 6vw, 5.5rem);
}
.lm-gallery{
  /* zentrale Bildhoehe – Pfeile und Bullets richten sich danach */
  --gal-h: clamp(240px, 26vw, 420px);
  position: relative;
}
.lm-gallery__item{
  margin: 0;
}
.lm-gallery__item img{
  display: block;
  width: 100%;
  /* Der Slider steht auf Desktop in einer halben Spalte – feste Hoehe
     statt aspect-ratio, sonst richtet sie sich nach der Spaltenbreite. */
  height: var(--gal-h);
  object-fit: cover;
  border-radius: var(--radius-base, 1.1rem);
  background: var(--neutral-100);
}
.lm-gallery__caption{
  margin-top: .65rem;
  font-family: var(--font-heading, Georgia, serif);
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-text-muted);
  text-align: center;
}
.lm-gallery__lead{
  max-width: 60ch;
}
/* Ueberschrift im zweispaltigen Layout linksbuendig, nicht zentriert */
.lm-gallery-section .section-title{
  text-align: left;
}
.lm-gallery-col--media{
  min-width: 0;   /* sonst sprengt der Swiper die Flex-Spalte */
}

/* Bedienelemente nach der Wix-Vorlage: schlanker weisser Chevron ohne
   Flaeche, buendig am Bildrand. Gemessen am Original: Button 15x32,
   SVG weiss, Hintergrund transparent, kein Rahmen, kein Radius. */
.lm-gallery .swiper-button-prev,
.lm-gallery .swiper-button-next{
  width: 15px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: #fff;
  box-shadow: none;
  /* Chevron-Pfad aus dem Wix-Template */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 41'%3E%3Cpath d='M20.3 40.8 0 20.5 20.3.2l.7.7L1.3 20.5 21 40.1z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 41'%3E%3Cpath d='M20.3 40.8 0 20.5 20.3.2l.7.7L1.3 20.5 21 40.1z'/%3E%3C/svg%3E") center / contain no-repeat;
  /* auf hellen Fotos sonst kaum zu sehen */
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
  /* mittig zum BILD, nicht zum Slider inkl. Bildunterschrift */
  top: calc(var(--gal-h) / 2);
  transform: translateY(-50%);
  transition: opacity .18s ease;
}
.lm-gallery .swiper-button-prev{ left: 14px; }
.lm-gallery .swiper-button-next{ right: 14px; transform: translateY(-50%) scaleX(-1); }

/* Swiper 12 legt ein eigenes <svg class="swiper-navigation-icon"> IN den
   Button (frueher war es ein ::after). Das muss weg, sonst liegen zwei
   Pfeile uebereinander – und da das SVG ein Kind ist, dreht das
   scaleX(-1) des Next-Buttons es mit, sodass es nach links zeigt. */
.lm-gallery .swiper-button-prev .swiper-navigation-icon,
.lm-gallery .swiper-button-next .swiper-navigation-icon{ display: none; }

.lm-gallery .swiper-button-prev::after,
.lm-gallery .swiper-button-next::after{ content: none; }

.lm-gallery .swiper-button-prev:hover,
.lm-gallery .swiper-button-next:hover{ opacity: .72; }

.lm-gallery .swiper-button-prev:focus-visible,
.lm-gallery .swiper-button-next:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 6px;
}

/* Bullets im Bild, unten mittig – wie im Wix-Template.
   6px weiss gefuellt, aktiv 9px als weisser Ring. */
.lm-gallery .swiper-pagination{
  position: absolute;
  top: calc(var(--gal-h) - 26px);
  bottom: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
}
.lm-gallery .swiper-pagination-bullet{
  width: 6px;
  height: 6px;
  margin: 0;
  background: #fff;
  border: 0;
  opacity: 1;
  transition: width .18s ease, height .18s ease;
}
.lm-gallery .swiper-pagination-bullet-active{
  width: 9px;
  height: 9px;
  background: transparent;
  border: 2px solid #fff;
}


/* ===================================================================
   Sticky-Menue auf schmalen Schirmen
   Vier Menuepunkte (ÜBER UNS, BEHANDLUNGEN, RÄUMLICHKEITEN, TEAM) sind
   zusammen rund 353px breit und brachen bei 375px in vier Zeilen um –
   die Navi wurde 172px hoch, die Leiste blieb bei 68px und der Inhalt
   verschwand darunter. Statt umzubrechen laeuft die Navi jetzt in einer
   Zeile und laesst sich seitlich wischen.
=================================================================== */
@media (max-width: 767.98px){
  .site-menu-logo{ height: 34px; }
  .site-menu-row{ gap: .5rem; }

  /* Die Menuepunkte wandern ins Burger-Panel */
  .site-menu-nav{ display: none; }
  .site-menu-contact{ margin-left: auto; }
}

/* --- Burger --------------------------------------------------------
   Drei Balken, die sich beim Oeffnen zum X drehen. Unter 768px sichtbar. */
.site-burger{
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  flex: 0 0 auto;
}
.site-burger span{
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--neutral-900);
  transition: transform .25s ease, opacity .2s ease;
}
.site-burger.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.site-burger.is-open span:nth-child(2){ opacity: 0; }
.site-burger.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
.site-burger:focus-visible{
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- Panel unter der Leiste ---------------------------------------- */
.site-menu-mobile{
  /* .site-menu ist display:flex mit fester Hoehe – als Flex-Element wuerde
     das Panel neben der Leiste landen und abgeschnitten. Deshalb absolut
     unter die Leiste haengen (.site-menu ist position:sticky, also
     positionierter Vorfahr). */
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  /* Deckend, kein backdrop-filter: .site-menu hat selbst eines und spannt
     damit einen Backdrop-Root auf – ein verschachteltes Filter samplet dort
     ins Leere und der Hintergrund des Panels blieb durchsichtig. */
  background: #fff;
  border-top: 1px solid var(--color-border);
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
  max-height: calc(100svh - var(--menu-h, 64px));
  overflow-y: auto;
}
.site-menu-mobile[hidden]{ display: none; }
.site-menu-mobile ul{
  list-style: none;
  margin: 0;
  padding: .5rem 0 1rem;
}
.site-menu-mobile li{ margin: 0; }
.site-menu-mobile a{
  display: block;
  padding: .85rem 1.25rem;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 1rem;
  color: var(--neutral-900);
  text-decoration: none;
}
.site-menu-mobile a:hover,
.site-menu-mobile a:focus-visible{
  background: var(--green-50);
  color: var(--neutral-900);
}

/* Sichtbarkeit erst HIER, nach der Basisregel display:none – sonst
   gewinnt bei gleicher Spezifitaet die spaeter notierte Regel. */
@media (max-width: 767.98px){
  .site-burger{ display: inline-flex; }
}

@media (min-width: 768px){
  /* Panel darf auf Desktop nie auftauchen, auch wenn es offen stehen blieb */
  .site-menu-mobile{ display: none !important; }
}

/* ===================================================================
   Sticky-Menue: Direktkontakt rechts
   Die Zeile bleibt der bestehende Flex-Container – die Icons haengen
   sich einfach hinter die Navigation.
=================================================================== */
.site-menu-contact{
  display: flex;
  align-items: center;
  gap: .35rem;
  flex: 0 0 auto;
}
.site-menu-contact__link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;          /* Mindestgroesse fuer Touch */
  border-radius: 50%;
  color: var(--color-accent);
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease;
}
.site-menu-contact__link .ico{
  width: 1.15rem;
  height: 1.15rem;
}
.site-menu-contact__link:hover,
.site-menu-contact__link:focus-visible{
  background: var(--green-100);
  color: var(--green-800);
}

@media (max-width: 767.98px){
  /* Auf schmalen Schirmen ist Tap-to-Call besonders nuetzlich – Icons
     bleiben, dafuer enger gesetzt. */
  .site-menu-contact{ gap: .1rem; }
  .site-menu-contact__link{ width: 36px; height: 36px; }
}