/* =========================================================
   Rahmen aller Seiten — Präfix fx-
   Navigation, Mobilmenü, Kontaktblock, Footer, Mobile Leiste, Lesefortschritt, Nach oben.
   Tokens hängen an .fx, nicht an :root: Auf den Unterseiten bleibt style.css unberührt.
   Mobile-first, Breakpoints 900 / 1280. Farben nur über Tokens.
   Radien: nur --radius-card, --radius-btn, 50 % (Kreise), --radius-mark (Logo-Motiv, 3 px).
   ========================================================= */

/* Manrope liegt auf dem eigenen Server, es geht keine Verbindung zu Google. Variable Schrift, 400 bis 800. */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(Assets/fonts/manrope-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(Assets/fonts/manrope-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.fx {
  --teal-deep: #0A2E2A;
  --teal-primary: #0B6B63;
  --teal-mid: #0E8A80;
  --teal-accent: #50FFB1;
  --teal-accent-soft: #9FE1CB;
  --cream: #F7F5F0;
  --cream-dark: #E8E4DC;
  --bg: #F0ECE0;
  --white: #FFFFFF;
  --text: #575761;

  --font-heading: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --radius-card: 20px;
  --radius-btn: 100px;
  --radius-mark: 3px; /* Logo-Geometrie (Akzentquadrat), kein Karten-Radius */

  --line: rgba(10, 46, 42, 0.12);
  --line-strong: rgba(10, 46, 42, 0.22);
  --line-dark: rgba(247, 245, 240, 0.16);
  --teal-line: rgba(11, 107, 99, 0.4);
  --teal-tint: rgba(11, 107, 99, 0.1);
  --cream-85: rgba(247, 245, 240, 0.85);
  --cream-70: rgba(247, 245, 240, 0.7);
  --shadow-soft: 0 2px 20px rgba(10, 46, 42, 0.06);
  --shadow-lift: 0 2px 20px rgba(11, 107, 99, 0.14);
  --shadow-bar: 0 -2px 20px rgba(10, 46, 42, 0.1);
  --nav-glass: rgba(255, 255, 255, 0.92);
  --bar-glass: rgba(255, 255, 255, 0.96);
  --hero-shade:
    linear-gradient(100deg, rgba(10, 46, 42, 0.84) 0%, rgba(10, 46, 42, 0.58) 34%, rgba(10, 46, 42, 0.12) 58%, rgba(10, 46, 42, 0) 74%),
    linear-gradient(180deg, rgba(10, 46, 42, 0.5) 0%, rgba(10, 46, 42, 0) 22%, rgba(10, 46, 42, 0) 52%, rgba(10, 46, 42, 0.74) 100%);

  --ground: var(--bg);
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --max: 1280px;
  --col-gap: clamp(1rem, 2.4vw, 2rem);
  --space-sm: clamp(4.5rem, 8vw, 7rem);
  --space-md: clamp(5.5rem, 11vw, 10rem);   /* 88–160 px */
  --space-lg: clamp(6rem, 13vw, 11.5rem);
  --rule-gap: clamp(3.5rem, 7vw, 6rem);
}

/* ---------- Basis: bewusst über :where(), damit Komponentenklassen nie überstimmt werden ---------- */
html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; -webkit-text-size-adjust: 100%; }
html.fx-lock, body.fx-lock { overflow: hidden; }
/* Die alte Seiten-Einblendung nur noch über die Deckkraft: Ein transform am body macht position: fixed wirkungslos */
@keyframes pageFadeIn { from { opacity: 0; } to { opacity: 1; } }
.page-transitioning { transform: none; }
.fx-nav, .fx-menu, .fx-dark, .fx-bar, .fx-skip {
  font-family: var(--font-body); font-size: 1.05rem; font-weight: 400; line-height: 1.7; -webkit-font-smoothing: antialiased;
}
:where(.fx) *, :where(.fx) *::before, :where(.fx) *::after { box-sizing: border-box; }
:where(.fx) :is(h1, h2, h3, p, ul, ol, dl, dd, figure, address, hr) { margin: 0; padding: 0; }
:where(.fx) :is(h1, h2, h3) { font-size: inherit; font-weight: inherit; line-height: inherit; }
:where(.fx) :is(ul, ol) { list-style: none; }
:where(.fx) :is(img, svg) { display: block; max-width: 100%; }
:where(.fx) a { color: inherit; text-decoration: none; }
:where(.fx) button { font: inherit; color: inherit; }
:where(.fx) address { font-style: normal; }
:where(.fx) em { font-style: normal; font-weight: 800; }
:where(.fx) strong { font-weight: 700; }

:where(.fx) :focus-visible { outline: 2px solid var(--teal-primary); outline-offset: 4px; border-radius: var(--radius-mark); }
.fx-dark :focus-visible, .fx-hero :focus-visible, .fx-nav:not(.is-scrolled):not(.is-open) :focus-visible { outline-color: var(--teal-accent-soft); }
.fx-nav :is(.fx-dd__panel) :focus-visible { outline-color: var(--teal-primary); }

.fx-sprite { position: absolute; width: 0; height: 0; }
.fx-skip {
  position: fixed; top: .75rem; left: .75rem; z-index: 200;
  padding: .75rem 1.25rem; border-radius: var(--radius-btn);
  background: var(--cream); color: var(--teal-deep); font-weight: 600;
  transform: translateY(-200%); transition: transform .4s var(--ease);
}
.fx-skip:focus { transform: none; }

/* ---------- Layout ---------- */
.fx-wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.fx-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
.fx-grid > * { grid-column: 1 / -1; min-width: 0; }

/* ---------- Buttons ---------- */
.fx-btn {
  display: inline-flex; align-items: center; gap: 1rem;
  min-height: 56px; padding: .5rem .5rem .5rem 1.7rem; border-radius: var(--radius-btn);
  font-size: 1rem; font-weight: 600; line-height: 1.25;
  transition: background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease), transform .5s var(--ease);
}
.fx-btn:active { transform: scale(.98); }
.fx-btn__ico {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%;
  transition: transform .6s var(--ease), background .5s var(--ease), color .5s var(--ease);
}
.fx-btn:hover .fx-btn__ico { transform: translateX(3px); }
.fx-btn--light { background: var(--cream); color: var(--teal-deep); }
.fx-btn--light .fx-btn__ico { background: var(--teal-deep); color: var(--cream); }
.fx-btn--light:hover { background: var(--white); }
.fx-btn--dark { background: var(--teal-deep); color: var(--cream); }
.fx-btn--dark .fx-btn__ico { background: var(--cream); color: var(--teal-deep); }
.fx-btn--dark:hover { background: var(--teal-primary); }
.fx-btn--line {
  color: var(--teal-primary); border: 1px solid var(--teal-line);
  padding: calc(.5rem - 1px) calc(.5rem - 1px) calc(.5rem - 1px) calc(1.7rem - 1px);
}
.fx-btn--line .fx-btn__ico { background: var(--teal-tint); }
.fx-btn--line:hover { background: var(--teal-primary); border-color: var(--teal-primary); color: var(--white); }
.fx-btn--line:hover .fx-btn__ico { background: var(--line-dark); }
.fx-ico { width: 18px; height: 18px; flex: none; }

/* =========================================================
   NAV (Hauptmenü: führt zu anderen Seiten)
   ========================================================= */
.fx-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.1rem var(--gutter); color: var(--cream);
  transition: background .5s var(--ease), box-shadow .5s var(--ease), padding .5s var(--ease), color .5s var(--ease);
}
.fx-nav.is-scrolled {
  background: var(--nav-glass);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 1px 0 var(--line); padding-block: .65rem; color: var(--teal-deep);
}
.fx-nav.is-open { color: var(--teal-deep); background: var(--bg); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.fx-nav__brand { position: relative; display: inline-flex; line-height: 0; flex: none; }
.fx-logo { height: 52px; width: auto; transition: opacity .5s var(--ease), height .5s var(--ease); }
.fx-logo--dunkel { position: absolute; top: 0; left: 0; opacity: 0; }
.fx-nav.is-scrolled .fx-logo--hell, .fx-nav.is-open .fx-logo--hell { opacity: 0; }
.fx-nav.is-scrolled .fx-logo--dunkel, .fx-nav.is-open .fx-logo--dunkel { opacity: 1; }

.fx-nav__links { display: none; align-items: center; gap: 1.5rem; }
.fx-nav__link { position: relative; display: inline-flex; align-items: center; min-height: 44px; font-size: 1rem; font-weight: 500; white-space: nowrap; }
.fx-nav__link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: .55rem; border-top: 1px solid currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease);
}
.fx-nav__link:hover::after, .fx-nav__link[aria-current="page"]::after, .fx-nav__link.is-current::after { transform: scaleX(1); }
.fx-nav__right { display: flex; align-items: center; gap: 1.5rem; }
.fx-nav__tel { display: none; align-items: center; gap: .5rem; min-height: 44px; font-weight: 600; font-size: 1rem; white-space: nowrap; }
/* Telefon-Symbol vor der Nummer (Kopfzeile Computer, Mobile Leiste). Als Maske in Textfarbe, damit es in allen 19 Seiten ohne Markup-Änderung steht;
   dieselbe Form wie Symbol #i-phone. */
.fx-nav__tel, .fx-bar a.fx-bar__main {
  --fx-phone-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2Z' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.fx-nav__tel::before, .fx-bar a.fx-bar__main::before {
  content: ''; flex: none; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: var(--fx-phone-mask) center / contain no-repeat; mask: var(--fx-phone-mask) center / contain no-repeat;
}
.fx-nav__cta {
  display: none; align-items: center; min-height: 44px; padding: .55rem 1.25rem; border-radius: var(--radius-btn);
  font-size: 1rem; font-weight: 600; white-space: nowrap; border: 1px solid var(--cream-70);
  transition: background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease);
}
.fx-nav__cta:hover { background: var(--cream); color: var(--teal-deep); border-color: var(--cream); }
.fx-nav.is-scrolled .fx-nav__cta { border-color: var(--teal-line); color: var(--teal-primary); }
.fx-nav.is-open .fx-nav__cta { border-color: var(--teal-line); color: var(--teal-primary); }
.fx-nav.is-scrolled .fx-nav__cta:hover { background: var(--teal-primary); border-color: var(--teal-primary); color: var(--white); }

/* Dropdowns Leistungen / Städte */
.fx-dd { position: relative; }
.fx-dd__btn { gap: .4rem; padding: 0; background: none; border: 0; cursor: pointer; }
.fx-dd__chev { width: 10px; height: 6px; flex: none; transition: transform .4s var(--ease); }
.fx-dd.is-open .fx-dd__chev { transform: rotate(180deg); }
.fx-dd__panel {
  position: absolute; top: calc(100% + .5rem); left: -1rem; min-width: 15rem; padding: .5rem;
  background: var(--white); color: var(--teal-deep); border-radius: var(--radius-card); box-shadow: var(--shadow-lift);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility 0s linear .4s;
}
.fx-dd__panel::before { content: ''; position: absolute; left: 0; right: 0; top: -.5rem; height: .5rem; }
.fx-dd.is-open .fx-dd__panel,
html:not(.fx-js) .fx-dd:hover .fx-dd__panel,
html:not(.fx-js) .fx-dd:focus-within .fx-dd__panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.fx-dd__panel--zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 23rem; }
.fx-dd__link {
  display: flex; align-items: center; min-height: 44px; padding: .25rem 1rem; border-radius: var(--radius-btn);
  font-size: 1rem; font-weight: 500; white-space: nowrap; transition: background .4s var(--ease), color .4s var(--ease);
}
.fx-dd__link:hover { background: var(--teal-tint); color: var(--teal-primary); }
.fx-dd__link[aria-current="page"] { color: var(--teal-primary); font-weight: 700; }

.fx-burger { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; width: 44px; height: 44px; background: none; border: 0; cursor: pointer; }
.fx-burger span { display: block; width: 24px; height: 1.5px; background: currentColor; transition: transform .5s var(--ease); }
.fx-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.75px) rotate(45deg); }
.fx-burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.75px) rotate(-45deg); }

/* Mobilmenü */
.fx-menu {
  position: fixed; inset: 0; z-index: 90; background: var(--bg);
  display: flex; flex-direction: column; gap: 1.75rem;
  padding: 6.5rem var(--gutter) 2.5rem; overflow-y: auto; overscroll-behavior: contain; visibility: hidden; opacity: 0;
  transition: opacity .5s var(--ease), visibility 0s linear .5s;
}
.fx-menu.is-open { visibility: visible; opacity: 1; transition-delay: 0s; }
.fx-menu__links { display: flex; flex-direction: column; }
.fx-menu__links > * { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.fx-menu.is-open .fx-menu__links > * { opacity: 1; transform: none; }
.fx-menu.is-open .fx-menu__links > :nth-child(1) { transition-delay: .08s; }
.fx-menu.is-open .fx-menu__links > :nth-child(2) { transition-delay: .13s; }
.fx-menu.is-open .fx-menu__links > :nth-child(3) { transition-delay: .18s; }
.fx-menu.is-open .fx-menu__links > :nth-child(4) { transition-delay: .23s; }
.fx-menu.is-open .fx-menu__links > :nth-child(5) { transition-delay: .28s; }
.fx-menu__link {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; min-height: 44px;
  padding: .4rem 0; background: none; border: 0; text-align: left; cursor: pointer;
  font-size: clamp(1.6rem, 6.5vw, 2.2rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.2;
  color: var(--teal-deep); transition: color .4s var(--ease);
}
.fx-menu__link:hover { color: var(--teal-primary); }
.fx-menu__link[aria-current="page"] { font-weight: 700; }
.fx-menu__chev { width: 14px; height: 9px; flex: none; transition: transform .4s var(--ease); }
.fx-menu__link[aria-expanded="true"] .fx-menu__chev { transform: rotate(180deg); }
.fx-menu__sub { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .5s var(--ease), visibility 0s linear .5s; }
.fx-menu__sub.is-open { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
.fx-menu__subin { min-height: 0; overflow: hidden; }
.fx-menu__subin--zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
.fx-menu__sublink {
  display: flex; align-items: center; min-height: 44px; font-size: 1.1rem; font-weight: 500; color: var(--teal-primary);
}
.fx-menu__sublink[aria-current="page"] { font-weight: 800; }
.fx-menu__here { border-top: 1px solid var(--line); padding-top: 1.25rem; }
.fx-menu__h { font-size: .82rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-primary); margin-bottom: .25rem; }
.fx-menu__herelinks { display: flex; flex-wrap: wrap; column-gap: 1.5rem; }
.fx-menu__herelinks a { display: inline-flex; align-items: center; min-height: 44px; font-size: 1.05rem; color: var(--text); }
.fx-menu__foot { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; border-top: 1px solid var(--line); padding-top: 1.75rem; }
.fx-menu__tel { display: inline-flex; align-items: center; min-height: 44px; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; color: var(--teal-deep); }

/* =========================================================
   KONTAKTBLOCK + FOOTER (dunkel)
   ========================================================= */
.fx-dark { background: var(--teal-deep); color: var(--cream); }
.fx-kontakt { padding-block: clamp(3rem, 6vw, 4.5rem); }
/* Visitenkarte (Marcels Wahl A1 „Porträtkarte“, 04.11.2026; Entwürfe in docs/pitches/fuss/)
   Links die Ansprache mit einem Knopf, rechts eine weiße Karte: großes Porträt mit Logo-Ecke, Name, Anruf, Zeiten,
   WhatsApp und E-Mail. Auf Leistungs- und Städteseiten stehen die drei Fragen in derselben Karte. */
.fx-vkopf { row-gap: 2.5rem; align-items: start; }
.fx-vkopf .fx-cta__title { font-size: clamp(2.1rem, 4.4vw, 3.9rem); max-width: 17ch; }
.fx-vkopf__links .fx-cta__sub { margin-bottom: 2.25rem; }

.fx-vk {
  position: relative; max-width: 36rem; overflow: hidden;
  background: var(--white); color: var(--text); border-radius: var(--radius-card);
  box-shadow: 0 2px 20px rgba(0, 0, 0, .2), 0 2px 8px rgba(10, 46, 42, .1);
}
.fx-vk :focus-visible { outline-color: var(--teal-primary); }
.fx-vk__foto { position: relative; margin: 0; height: clamp(15rem, 60vw, 18rem); background: var(--teal-deep); }
.fx-vk__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
/* Logo-Ecke: ein Stück des Fotos ist ausgeschnitten, das Akzentquadrat steht in der Ecke */
.fx-vk__foto::before { content: ''; position: absolute; right: 0; bottom: 0; width: 76px; height: 76px; background: var(--white); border-top-left-radius: 24px; }
.fx-vk__foto::after { content: ''; position: absolute; right: 0; bottom: 0; width: 36px; height: 36px; background: var(--teal-primary); border-bottom-right-radius: 18px; }
.fx-vk__foto .fx-ki { left: auto; right: .9rem; top: .9rem; }

.fx-vk__body { padding: 1.35rem 1.25rem .75rem; }
.fx-vk__name { font-family: var(--font-heading); font-size: clamp(1.7rem, 2.4vw, 2.1rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.03em; color: var(--teal-deep); }
.fx-vk__rolle { margin-top: .35rem; font-size: 1.02rem; line-height: 1.45; padding-right: 4.5rem; }
.fx-vk .fx-ki-alt { margin-top: .35rem; padding-right: 4.5rem; font-size: .9rem; line-height: 1.3; }

.fx-vk__fragen { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--cream-dark); }
.fx-vk__fragen-titel { font-family: var(--font-heading); font-size: clamp(1.15rem, 1.6vw, 1.3rem); font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; color: var(--teal-deep); margin-bottom: 1rem; }
.fx-vk__liste { display: grid; row-gap: .75rem; }
.fx-vk__liste li { position: relative; padding-left: 1.4rem; font-size: 1.05rem; line-height: 1.5; }
.fx-vk__liste li::before { content: ''; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; background: var(--teal-primary); border-radius: 0 0 50% 0; }
.fx-vk__fragen-fuss { margin-top: 1rem; font-size: 1.02rem; line-height: 1.55; }

.fx-vk__anruf { margin-top: 1.5rem; }
.fx-vk__fragen + .fx-vk__anruf { padding-top: 1.5rem; border-top: 1px solid var(--cream-dark); }
.fx-vk__frage { margin-bottom: .65rem; font-size: 1.02rem; font-weight: 600; color: var(--teal-deep); }
.fx-vk__nr {
  width: 100%; justify-content: space-between; min-height: 64px;
  font-size: clamp(1.45rem, 6.4vw, 1.75rem); font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.fx-vk__zeiten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; margin-top: 1.25rem; font-variant-numeric: tabular-nums; }
.fx-vk__zeiten dt { font-size: 1rem; line-height: 1.4; color: var(--text); }
.fx-vk__zeiten dd { margin: 0; font-size: 1.2rem; font-weight: 700; line-height: 1.35; letter-spacing: -0.015em; color: var(--teal-deep); }

.fx-vk__wege { margin-top: 1.5rem; border-top: 1px solid var(--cream-dark); }
.fx-vk__wege li + li { border-top: 1px solid var(--cream-dark); }
.fx-vk__weg { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 68px; padding-block: .6rem; color: var(--teal-deep); transition: color .4s var(--ease); }
.fx-vk__weg-t { display: grid; min-width: 0; }
.fx-vk__weg-t strong { font-size: 1.1rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
.fx-vk__weg-t small { font-size: 1rem; line-height: 1.4; color: var(--text); overflow-wrap: anywhere; }
.fx-vk__weg .fx-ico { width: 20px; height: 20px; color: var(--teal-primary); transition: transform .6s var(--ease); }
.fx-vk__weg:hover { color: var(--teal-primary); }
.fx-vk__weg:hover .fx-ico { transform: translateX(4px); }
.fx-vk__weg:focus-visible { outline-offset: -3px; }

/* Footer: Claim als Schlusssatz links, rechts Leistungen und Hilfe. Steht kein Kontaktblock darüber
   (Kostenrechner, Kontakt, Impressum, Datenschutz), zeigt er zusätzlich Telefon, E-Mail und Zeiten. */
.fx-footer { padding-block: clamp(3.5rem, 7vw, 5.5rem) 2.5rem; }
.fx-cta ~ .fx-footer { padding-top: 0; }
.fx-footer__top { display: grid; row-gap: 2.5rem; }
.fx-cta ~ .fx-footer .fx-footer__top { border-top: 1px solid var(--line-dark); padding-top: clamp(3rem, 6vw, 5rem); }
.fx-cta ~ .fx-footer .fx-footer__kontakt { display: none; }
.fx-footer__logo { height: 64px; width: auto; margin-bottom: 1.75rem; }
.fx-footer__claim { max-width: 16ch; font-family: var(--font-heading); font-size: clamp(2rem, 8.4vw, 2.4rem); font-weight: 500; line-height: 1.08; letter-spacing: -0.035em; color: var(--cream); text-wrap: balance; }
.fx-footer__claim em { font-style: normal; font-weight: 800; }
.fx-footer__gruppen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; row-gap: 1.5rem; align-content: start; }
.fx-footer__kontakt { grid-column: 1 / -1; }
.fx-footer__h { font-size: .82rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-accent-soft); margin-bottom: .5rem; }
.fx-footer__list a { display: inline-flex; align-items: center; min-height: 48px; font-size: clamp(.95rem, 4.1vw, 1rem); color: var(--cream-85); overflow-wrap: anywhere; transition: color .4s var(--ease); }
.fx-footer__list a:hover { color: var(--white); }
.fx-footer__tel, .fx-footer__mail { display: flex; align-items: center; min-height: 48px; color: var(--cream); font-weight: 600; overflow-wrap: anywhere; transition: color .4s var(--ease); }
.fx-footer__tel { font-size: 1.35rem; letter-spacing: -0.02em; }
.fx-footer__mail { font-size: 1rem; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; text-decoration-color: var(--cream-70); }
.fx-footer__tel:hover, .fx-footer__mail:hover { color: var(--white); }
.fx-footer__zeiten { margin-top: .35rem; font-size: 1rem; line-height: 1.6; color: var(--cream-70); }
.fx-footer__zeile { display: flex; flex-direction: column; margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: .75rem; border-top: 1px solid var(--line-dark); font-size: 1rem; color: var(--cream-70); }
.fx-footer__ort { padding-block: .5rem; }
.fx-footer__recht { display: flex; align-items: center; }
.fx-footer__recht a { display: inline-flex; align-items: center; min-height: 48px; color: var(--cream-85); transition: color .4s var(--ease); }
.fx-footer__recht a:hover { color: var(--white); }
.fx-footer__recht span { margin-inline: .65rem; }

/* =========================================================
   MOBILE-LEISTE (erst nach dem ersten Bildschirm, nicht im Kontaktbereich)
   ========================================================= */
.fx-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: none; gap: .5rem;
  padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom));
  background: var(--bar-glass); box-shadow: var(--shadow-bar);
  transform: translateY(110%); visibility: hidden; transition: transform .6s var(--ease), visibility 0s linear .6s;
}
.fx-bar.is-visible, html:not(.fx-js) .fx-bar { transform: none; visibility: visible; transition-delay: 0s; }
.fx-bar a {
  flex: 1; display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 .5rem;
  border-radius: var(--radius-btn); font-size: 1rem; font-weight: 600; line-height: 1.2; text-align: center;
  color: var(--teal-primary); border: 1px solid var(--teal-line);
  transition: background .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
}
.fx-bar a:active { transform: scale(.97); }
/* Hauptknopf ist der Anruf (Telefon-Symbol aus .fx-nav__tel::before), Anfrage und WhatsApp sind umrandet */
.fx-bar a.fx-bar__main { flex: 1.45; gap: .45rem; background: var(--teal-deep); border-color: var(--teal-deep); color: var(--cream); }

/* =========================================================
   LESEFORTSCHRITT + NACH OBEN (beide erzeugt rahmen.js)
   Beide tragen das kleine Quadrat aus dem Logo: drei scharfe Ecken, unten rechts die halbe Kantenlänge
   als Radius. Im Logo ist es die Last, die abgenommen wird. Abgeleitete Form, nicht das Zeichen selbst.
   ========================================================= */

/* Die Trennlinie des Hauptmenüs füllt sich, das Quadrat läuft an ihrer Spitze mit */
.fx-progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 7px; overflow: hidden; pointer-events: none;
  opacity: 0; transition: opacity .5s var(--ease);
}
.fx-nav.is-scrolled:not(.is-open) .fx-progress { opacity: 1; }
.fx-progress__fill { position: absolute; inset: 0; transform: translateX(-100%); will-change: transform; }
.fx-progress__fill::before { content: ''; position: absolute; left: 0; right: 3px; bottom: 0; height: 2px; background: var(--teal-primary); }
.fx-progress__fill::after { content: ''; position: absolute; right: 0; bottom: 0; width: 7px; height: 7px; background: var(--teal-primary); border-radius: 0 0 50% 0; }

/* Ein Zustand für jeden Grund: Fläche trägt auf hell, der Rand in Cream auf dunkel und auf Fotos.
   Mobil: bündig mit der Leiste .fx-bar (ca. 68 px hoch), 5rem hält sie frei. Unter .fx-bar, über .fx-sub.
   Die Wurzel ist auf den Unterseiten kein Nachkomme von .fx: Reset und Fokus stehen deshalb hier. */
.fx-top {
  position: fixed; z-index: 55;
  right: calc(.75rem + env(safe-area-inset-right)); bottom: calc(5rem + env(safe-area-inset-bottom));
  display: grid; place-items: center; box-sizing: border-box; width: 48px; height: 48px; margin: 0; padding: 0;
  -webkit-appearance: none; appearance: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  border: 2px solid var(--cream); border-radius: 0 0 50% 0;
  background: var(--teal-primary); background-clip: padding-box; color: var(--cream); box-shadow: var(--shadow-lift);
  opacity: 0; visibility: hidden; transform: translateY(18px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), background-color .5s var(--ease), visibility 0s linear .5s;
}
.fx-top.is-visible { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.fx-top.is-visible:active { transform: scale(.98); }
/* Pfeil 1 px nach links oben: optische Mitte, weil unten rechts die Ecke fehlt */
.fx-top svg { display: block; width: 24px; height: 24px; transform: translate(-1px, -1px); transition: transform .5s var(--ease); }
.fx-top:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 2px; box-shadow: 0 0 0 6px var(--cream), var(--shadow-lift); }
@media (hover: hover) and (pointer: fine) {
  .fx-top:hover { background-color: var(--teal-deep); }
  .fx-top:hover svg { transform: translate(-1px, -4px); }
}

/* =========================================================
   BREAKPOINTS
   ========================================================= */
@media (max-width: 899px) {
  .fx-bar { display: flex; }
  /* Platz für Mobile Leiste und Nach-oben-Button, damit am Seitenende nichts die Copyright-Zeile verdeckt */
  .fx-footer { padding-bottom: calc(9rem + env(safe-area-inset-bottom)); }
}

@media (min-width: 900px) {
  /* Oben größer, gescrollt 56 px: An dieser Höhe dockt die Leiste „Auf dieser Seite“ an (top: 4.8rem) */
  .fx-logo { height: 64px; }
  .fx-nav.is-scrolled .fx-logo { height: 56px; }
  .fx-top { right: calc(1.25rem + env(safe-area-inset-right)); bottom: calc(1.25rem + env(safe-area-inset-bottom)); width: 52px; height: 52px; }
  .fx-nav__tel, .fx-nav__cta { display: inline-flex; }
  /* Startseite, erster Bildschirm: Nummer und Button erst nach dem Scrollen (oder im offenen Menü); ohne JS sichtbar */
  .fx-js .fx-nav--ruhig .fx-nav__tel, .fx-js .fx-nav--ruhig .fx-nav__cta { opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility .5s var(--ease), background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease); }
  .fx-js .fx-nav--ruhig.is-scrolled .fx-nav__tel, .fx-js .fx-nav--ruhig.is-scrolled .fx-nav__cta,
  .fx-js .fx-nav--ruhig.is-open .fx-nav__tel, .fx-js .fx-nav--ruhig.is-open .fx-nav__cta { opacity: 1; visibility: visible; }

  .fx-footer__top { grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(3rem, 8vw, 8rem); align-items: start; }
  .fx-footer__claim { font-size: clamp(2.4rem, 4.2vw, 3.9rem); }
  .fx-footer__gruppen { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(10rem, auto); column-gap: clamp(2.5rem, 5vw, 5rem); padding-top: .5rem; }
  .fx-footer__kontakt { grid-column: auto; }
  .fx-footer__zeile { flex-direction: row; justify-content: space-between; align-items: center; column-gap: 2rem; padding-top: 1rem; }
}

@media (min-width: 1000px) {
  .fx-vkopf .fx-vkopf__links { grid-column: 1 / 8; }
  .fx-vkopf .fx-vk { grid-column: 8 / 13; margin-top: 2.5rem; max-width: none; }
  .fx-vk__body { padding: 1.75rem 2rem 1rem; }
}

/* Hauptmenü erst ab 1280 px; bis dahin Burger + Telefon + Button */
@media (min-width: 1280px) {
  .fx-nav__links { display: flex; }
  .fx-burger, .fx-menu { display: none; }
}

/* Sehr schmale Handys: Die drei Knöpfe der Mobilen Leiste passen sonst nicht nebeneinander */
@media (max-width: 359px) {
  .fx-bar { gap: .35rem; padding-inline: .5rem; }
  .fx-bar a { padding: 0 .25rem; font-size: .95rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fx, .fx *, .fx *::before, .fx *::after { transition-duration: .01ms !important; transition-delay: 0s !important; animation-duration: .01ms !important; animation-delay: 0s !important; }
}

/* =========================================================
   KI-KENNZEICHNUNG (Marcel, 03.11.2026): kleines blasses „KI“ in der Ecke, beim Darüberfahren
   oder Antippen klappt „Bild mit KI erstellt“ bzw. „Foto mit KI bearbeitet“ aus. Gesetzt von rahmen.js.
   Ohne JavaScript bleiben die sichtbaren Hinweise unter den Porträts stehen.
   ========================================================= */
.fx-ki {
  position: absolute; z-index: 4; left: .75rem; top: .75rem;
  display: inline-flex; align-items: center; height: 24px; padding: 0 .5rem; border-radius: var(--radius-btn);
  background: rgba(10, 46, 42, .5); color: var(--cream); font-family: var(--font-body); font-size: .7rem; font-weight: 700; line-height: 1; letter-spacing: .08em;
  opacity: .6; cursor: help; pointer-events: auto; user-select: none;
  transition: opacity .4s var(--ease), background .4s var(--ease);
}
.fx-ki--unten { top: 6.25rem; } /* unter Logo und Menü */
.fx-ki__text { max-width: 0; overflow: hidden; white-space: nowrap; font-weight: 600; letter-spacing: 0; transition: max-width .6s var(--ease), margin .6s var(--ease); }
.fx-ki.is-offen, .fx-ki:focus-visible { opacity: 1; background: rgba(10, 46, 42, .85); }
.fx-ki.is-offen .fx-ki__text, .fx-ki:focus-visible .fx-ki__text { max-width: 14rem; margin-left: .45rem; }
.fx-ki:focus-visible { outline: 2px solid var(--teal-accent-soft); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .fx-ki, .fx-ki__text { transition: none; } }
@media print { .fx-ki { display: none; } }
/* Mit JavaScript übernimmt das Zeichen; die festen Hinweise unter den Porträts entfallen dann */
.fx-js :is(.fx-ki-alt, .fq-ki, .kt-ki, .fx-mensch__hinweis, .st-mensch__hinweis) { display: none !important; }