/* fairnance – Ergänzungen für den statischen Export (IONOS) */

/* ---- Mobiles Navigationsmenü ---- */
.fn-burger{
  display:none; position:relative; z-index:1002;
  width:44px; height:44px; margin-left:auto;
  border:0; background:transparent; cursor:pointer; padding:10px;
  align-items:center; justify-content:center; flex-direction:column; gap:5px;
}
.fn-burger span{
  display:block; width:24px; height:2px; border-radius:2px;
  background:currentColor; transition:transform .25s ease, opacity .2s ease;
}
.fn-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.fn-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.fn-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.fn-mobile-nav{
  position:fixed; inset:0; z-index:1001;
  background:#F4F4EA; color:#111;
  display:flex; flex-direction:column; justify-content:center; gap:4px;
  padding:96px 28px 40px;
  transform:translateX(100%); transition:transform .3s ease;
  overflow-y:auto; visibility:hidden;
}
.fn-mobile-nav.is-open{transform:translateX(0); visibility:visible}
.fn-mobile-nav a{
  font-family:'Golos Text',system-ui,sans-serif; font-size:26px; font-weight:600;
  line-height:1.35; letter-spacing:-.4px; color:#111; text-decoration:none;
  padding:10px 0; border-bottom:1px solid rgba(17,17,17,.10);
}
.fn-mobile-nav a:last-child{border-bottom:0}
.fn-mobile-nav .fn-meta{margin-top:28px; font-size:17px; font-weight:400; border:0}
body.fn-nav-open{overflow:hidden}

@media (max-width:992px){
  .fn-burger{
    display:flex; position:fixed; top:12px; right:12px;
    color:#111; background:rgba(244,244,234,.92);
    border-radius:10px; box-shadow:0 1px 6px rgba(0,0,0,.10);
  }
  .con-kit-atom-menu-v2--device-desktop,
  .con-kit-component-menu-v2-more{display:none !important}
  .con-kit-molecule-header-v2 .con-kit-component-contacts{padding-right:58px}
}
@media (max-width:640px){
  /* Kontaktdaten im Header wuerden mit dem Burger kollidieren –
     sie stehen im mobilen Menue am Ende nochmal.                */
  .con-kit-molecule-header-v2 .con-kit-component-contacts{display:none !important}
}

/* ---- Karte (OpenStreetMap statt MapLibre-Runtime) ---- */
.con-kit-component-map__content{min-height:400px}
.con-kit-component-map__content iframe{border:0;width:100%;height:100%;min-height:400px;display:block}

/* ---- Kleinigkeiten ---- */
img{max-width:100%}
html{scroll-behavior:smooth}

/* ---- Spalten-Layouts responsiv machen ----
   Im Original hat OnePage pro Geraet eine eigene Variante gerendert.
   Der statische Export kennt nur die Desktop-Variante -> hier per
   Media-Query nachgeruestet.                                        */
@media (max-width:992px){
  .con-kit-component-grid-list--columns-3 > *,
  .con-kit-component-grid-list--columns-4 > *,
  .con-kit-component-grid-list--columns-5 > *,
  .con-kit-component-grid-list--columns-6 > *{
    flex:0 0 calc(50% - var(--one-kit-component-grid-list-horizontal-space, 24px)/2) !important;
    max-width:calc(50% - var(--one-kit-component-grid-list-horizontal-space, 24px)/2) !important;
    width:auto !important;
  }
}
@media (max-width:768px){
  .con-kit-component-grid-list > *{
    flex:0 0 100% !important; max-width:100% !important; width:auto !important;
  }
}

/* ---- Textmarker-Effekte ----
   Positionen kamen im Original aus JS. site.js rechnet sie neu;
   bis dahin unsichtbar, damit nichts verrutscht ueberlappt.        */
.highlight-container{opacity:0; transition:opacity .2s ease}
.highlight-container.fn-placed{opacity:1}
.highlight-container > *{left:0 !important; width:100% !important}

.fn-honeypot{
  position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important;
  opacity:0 !important; pointer-events:none !important;
}
.fn-form-status{
  margin:16px 0 0; font-family:'Golos Text',system-ui,sans-serif;
  font-size:16px; line-height:1.4;
}
.fn-form-status--ok{color:#2f6b3a}
.fn-form-status--error{color:#b42318}
.fn-form-status--pending{color:#555}