:root {
  color-scheme: dark;
  --h4h-navy: #07064f;
  --h4h-cyan: #05a9f4;
  --h4h-magenta: #ff2bb5;
  --h4h-yellow: #ffc914;
  --h4h-gold: #faca18;
  --h4h-gold-deep: #e0b400;
  --h4h-on-gold: #1a1a1a;
  --h4h-accent: var(--h4h-gold);
  --h4h-accent-deep: var(--h4h-gold-deep);
  --h4h-on-accent: var(--h4h-on-gold);
  --h4h-red: #c85141;
  --h4h-pink: #d8457a;
  --h4h-orange: #d8733b;
  --h4h-green: #2f8f5b;
  --h4h-white: #fff;
  --h4h-shadow: 0 16px 42px rgb(4 4 48 / 24%);
  --h4h-font: "Open Sans", "Segoe UI", Arial, sans-serif;
  --h4h-surface: rgb(10 9 62 / 92%);
  --h4h-on-surface: #f4f5f8;
}

*, *::before, *::after { box-sizing: border-box; }

html { min-width: 320px; scroll-behavior: smooth; font-size: 100%; }
html.h4h-font-lg { font-size: 125%; }
html.h4h-font-xl { font-size: 150%; }

body {
  min-height: 100vh;
  margin: 0;
  color: var(--h4h-white);
  font-family: var(--h4h-font);
  background-color: var(--h4h-navy);
  background-image: linear-gradient(rgb(7 6 79 / 28%), rgb(7 6 79 / 46%)), var(--h4h-site-background);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

a { color: inherit; }

.h4h-skip-link {
  position: fixed;
  z-index: 1300;
  top: .75rem;
  left: .75rem;
  padding: .75rem 1rem;
  color: var(--h4h-white);
  background: var(--h4h-navy);
  transform: translateY(-160%);
  transition: transform .16s ease;
}

.h4h-skip-link:focus { transform: translateY(0); }

.page-loader {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: rgb(7 6 79 / 62%);
  backdrop-filter: blur(4px);
  overflow: hidden;
}
.page-loader[hidden] { display: none; }
.page-loader--blocking { pointer-events: auto; }
.page-loader__backdrop { position: absolute; inset: -28px; z-index: 0; }
.page-loader__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 2rem;
  text-align: center;
  max-width: min(28rem, calc(100vw - 2rem));
}
.page-loader__spinner {
  width: 2.75rem;
  height: 2.75rem;
  border: 3px solid color-mix(in srgb, var(--h4h-accent) 22%, transparent);
  border-top-color: var(--h4h-accent);
  border-radius: 999px;
}
.page-loader__text {
  margin: 0;
  font-size: clamp(1.2rem, 2.8vw, 1.55rem);
  font-weight: 700;
  line-height: 1.4;
  color: #f8fafc;
  text-shadow: 0 1px 2px rgb(0 0 0 / 35%);
}
.page-loader__anim--spin { animation: page-loader-spin .75s linear infinite; }
@keyframes page-loader-spin { to { transform: rotate(360deg); } }
html.h4h-accent-gold .page-loader { background: rgb(18 18 18 / 82%); }
html.h4h-accent-gold .page-loader__spinner {
  border-color: rgb(250 202 24 / 22%);
  border-top-color: #faca18;
}

.h4h-header {
  display: grid;
  place-items: center;
  min-height: clamp(19rem, 31vw, 28rem);
  padding: 2rem 1rem 1.5rem;
}

.h4h-brand {
  display: block;
  width: clamp(8.6rem, 14vw, 12rem);
  filter: drop-shadow(0 8px 12px rgb(7 6 79 / 18%));
}

.h4h-brand .h4h-logo { width: 100%; height: auto; }
.h4h-logo--light { display: none; }
.h4h-logo--dark { display: block; }
.h4h-logo--accent { display: none; }
html.h4h-mode-light .h4h-logo--light { display: block; }
html.h4h-mode-light .h4h-logo--dark,
html.h4h-mode-light .h4h-logo--accent { display: none; }
html.h4h-mode-dark .h4h-logo--light { display: none; }
html.h4h-mode-dark .h4h-logo--dark { display: block; }
html.h4h-mode-dark .h4h-site-header .h4h-logo--dark { display: none; }
html.h4h-mode-dark .h4h-site-header .h4h-logo--accent { display: block; }
html.h4h-accent-gold .h4h-brand .h4h-logo--light,
html.h4h-accent-gold .h4h-brand .h4h-logo--dark { display: none; }
html.h4h-accent-gold .h4h-brand .h4h-logo--accent { display: block; }

.h4h-main, .h4h-footer {
  width: min(100% - 2rem, 60rem);
  margin-inline: auto;
}

/* Schwebendes Darstellungsmenü — liegt auf jeder Seite über Header, Kacheln und Inhalt. */
.h4h-a11y {
  position: fixed;
  z-index: 1200;
  top: max(.75rem, env(safe-area-inset-top));
  right: max(.75rem, env(safe-area-inset-right));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .55rem;
  width: min(19.5rem, calc(100vw - 1.5rem));
  pointer-events: none;
}

.h4h-a11y > * { pointer-events: auto; }

.h4h-a11y__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.25rem;
  min-height: 4.25rem;
  margin: 0;
  border: 2px solid var(--h4h-navy);
  border-radius: 999px;
  padding: .45rem;
  color: #1a1a1a;
  background: #faca18;
  box-shadow: 0 10px 28px rgb(0 0 0 / 36%);
  cursor: pointer;
}

.h4h-a11y__toggle svg {
  display: block;
  width: 2.15rem;
  height: 2.15rem;
  fill: currentColor;
}

.h4h-a11y__toggle:focus-visible,
.h4h-a11y__menu button:focus-visible { outline: 3px solid var(--h4h-gold); outline-offset: 2px; }

.h4h-a11y__menu {
  display: grid;
  gap: .7rem;
  width: 100%;
  padding: .85rem;
  color: var(--h4h-white);
  background: rgb(7 6 79 / 96%);
  border: 2px solid var(--h4h-accent);
  box-shadow: 0 16px 40px rgb(0 0 0 / 38%);
}

.h4h-a11y__menu[hidden] { display: none; }

.h4h-a11y__label {
  margin: 0;
  color: var(--h4h-accent);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.h4h-a11y__group { display: grid; gap: .35rem; }
.h4h-a11y__group span { font-size: .78rem; font-weight: 800; }
.h4h-a11y__choices { display: flex; flex-wrap: wrap; gap: .35rem; }
.h4h-a11y__menu button {
  border: 1px solid rgb(255 255 255 / 42%);
  border-radius: .35rem;
  padding: .45rem .55rem;
  color: var(--h4h-white);
  background: transparent;
  font: inherit;
  font-size: .82rem;
  font-weight: 800;
  cursor: pointer;
}
.h4h-a11y__menu button:hover:not(:disabled),
.h4h-a11y__menu button[aria-pressed="true"]:not(:disabled) {
  color: var(--h4h-on-accent);
  background: var(--h4h-accent);
  border-color: var(--h4h-accent);
}
.h4h-a11y__menu button[hidden] { display: none; }
.h4h-a11y__menu button:disabled {
  opacity: .42;
  cursor: not-allowed;
}
.h4h-a11y__menu [data-a11y="font-minus"],
.h4h-a11y__menu [data-a11y="font-plus"] {
  min-width: 2.4rem;
  font-size: 1.15rem;
  line-height: 1;
}
.h4h-visit-choice { position: fixed; z-index: 1800; inset: 0; display: grid; place-items: center; padding: 1rem; background: rgb(7 6 79 / 88%); }
.h4h-visit-choice__panel { width: min(42rem, 100%); overflow: hidden; padding: clamp(1.5rem, 5vw, 3rem); color: var(--h4h-white); background: #07064f; border: 3px solid var(--h4h-gold); border-radius: 1.25rem; box-shadow: 0 24px 80px rgb(0 0 0 / 55%); }
.h4h-visit-choice__panel h1 { margin: .35rem 0 1rem; font-size: clamp(1.8rem, 5vw, 3rem); line-height: 1.05; }
.h4h-visit-choice__panel p:not(.h4h-eyebrow) { line-height: 1.6; }
.h4h-visit-choice__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.75rem; }
.h4h-visit-choice__option { display: grid; grid-template-rows: auto auto auto; place-items: center; gap: .65rem; min-height: 15rem; border: 3px solid var(--h4h-gold); border-radius: .75rem; padding: 1.5rem 1rem; color: #fff; background: #121212; font: inherit; text-align: center; cursor: pointer; transition: transform .16s ease, box-shadow .16s ease; }
.h4h-visit-choice__option svg { width: 4.75rem; height: 4.75rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.h4h-visit-choice__option span { font-size: clamp(1.35rem, 3.5vw, 2rem); font-weight: 900; line-height: 1.05; }
.h4h-visit-choice__option small { max-width: 18rem; font-size: .92rem; line-height: 1.4; }
.h4h-visit-choice__option--accessible { color: #1a1a1a; background: var(--h4h-gold); }
.h4h-visit-choice__option--decorative { color: #fff; background: linear-gradient(135deg, var(--h4h-cyan), var(--h4h-magenta)); border-color: #fff; }
.h4h-visit-choice__option:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgb(0 0 0 / 38%); }
.h4h-visit-choice__option:focus-visible { outline: 4px solid #fff; outline-offset: 4px; }

@media (max-width: 600px) {
  .h4h-visit-choice { align-items: start; overflow-y: auto; padding-block: 1rem; }
  .h4h-visit-choice__panel { margin-block: auto; }
  .h4h-visit-choice__actions { grid-template-columns: 1fr; }
  .h4h-visit-choice__option { min-height: 11rem; grid-template-columns: auto 1fr; grid-template-rows: auto auto; justify-items: start; text-align: left; }
  .h4h-visit-choice__option svg { grid-row: 1 / -1; width: 4rem; height: 4rem; }
}

html.h4h-accent-cyan, body.h4h-accent-cyan {
  --h4h-accent: var(--h4h-cyan);
  --h4h-accent-deep: #0787c6;
  --h4h-on-accent: #07064f;
}

html.h4h-mode-light, body.h4h-mode-light {
  color-scheme: light;
  color: var(--h4h-navy);
  --h4h-surface: rgb(255 255 255 / 96%);
  --h4h-on-surface: #1a1a1a;
}

body.h4h-mode-light {
  background-color: #eef0ee;
  background-image: linear-gradient(rgb(255 255 255 / 42%), rgb(255 255 255 / 58%)), var(--h4h-site-background);
}

body.h4h-mode-light .h4h-a11y__menu { color: var(--h4h-navy); background: rgb(255 255 255 / 96%); }
body.h4h-mode-light .h4h-a11y__menu button { color: var(--h4h-navy); border-color: rgb(7 6 79 / 32%); }
body.h4h-mode-light .h4h-a11y__menu button:hover:not(:disabled),
body.h4h-mode-light .h4h-a11y__menu button[aria-pressed="true"]:not(:disabled) { color: var(--h4h-on-accent); background: var(--h4h-accent); }
body.h4h-mode-light .h4h-site-header { color: var(--h4h-navy); background: rgb(255 255 255 / 96%); }
body.h4h-mode-light .h4h-site-nav a { color: var(--h4h-navy); }
body.h4h-mode-light .h4h-site-nav a:hover,
body.h4h-mode-light .h4h-site-nav a[aria-current="page"] { color: var(--h4h-on-accent); }
body.h4h-mode-light .h4h-menu-button { color: var(--h4h-navy); }
body.h4h-mode-light .h4h-page { background: linear-gradient(rgb(238 240 238 / 78%), rgb(238 240 238 / 92%)), var(--h4h-site-background); }
body.h4h-mode-light .h4h-page h1,
body.h4h-mode-light .h4h-page__lead { color: var(--h4h-navy); }
body.h4h-mode-light .h4h-subpage-footer { color: var(--h4h-navy); background: #fff; }
body.h4h-mode-light .h4h-subpage-footer a,
body.h4h-mode-light .h4h-subpage-footer .h4h-cookie-link { color: #075985; text-decoration-thickness: .14em; }
body.h4h-mode-light .h4h-subpage-footer a:hover,
body.h4h-mode-light .h4h-subpage-footer .h4h-cookie-link:hover { color: #07064f; }
body.h4h-mode-light .h4h-footer { color: var(--h4h-navy); }
body.h4h-mode-light .h4h-footer a,
body.h4h-mode-light .h4h-footer .h4h-cookie-link { color: #075985; text-decoration: underline; text-decoration-thickness: .14em; }
body.h4h-mode-light .h4h-footer a:hover,
body.h4h-mode-light .h4h-footer .h4h-cookie-link:hover { color: #07064f; }
body.h4h-mode-light .h4h-content-card a:not(.h4h-button) { color: #594b00; }

html.h4h-images-hidden body,
body.h4h-images-hidden { background-image: none; background-color: #121212; }
html.h4h-mode-light.h4h-images-hidden body,
body.h4h-mode-light.h4h-images-hidden { background-color: #e8e8e8; }
html.h4h-images-hidden .h4h-tile { background-image: none !important; }
html.h4h-images-hidden .h4h-tile::before { display: none; }
html.h4h-images-hidden img:not(.h4h-logo),
html.h4h-images-hidden .h4h-page-media { display: none !important; }
html.h4h-images-hidden .h4h-split,
html.h4h-images-hidden .h4h-split--story { grid-template-columns: 1fr; }
html.h4h-images-hidden .h4h-page { background-image: none; background-color: #121212; }
html.h4h-mode-light.h4h-images-hidden .h4h-page { background-image: none; background-color: #e8e8e8; }

/* Gold-Kontrast wie Landing/Plattform: dunkle Flächen, Gold-Chrome, keine Dekobilder. */
html.h4h-accent-gold {
  --h4h-surface: #1a1a1a;
  --h4h-on-surface: #f2f4f7;
  --h4h-on-accent: #1a1a1a;
  color-scheme: dark;
  color: #f2f4f7;
  background-color: #121212;
}
html.h4h-accent-gold,
html.h4h-accent-gold body {
  color: #f2f4f7;
  background-color: #121212;
  background-image: none !important;
  font-weight: 700;
}
html.h4h-accent-gold .h4h-page,
html.h4h-accent-gold .h4h-page h1,
html.h4h-accent-gold .h4h-page__lead,
html.h4h-accent-gold .h4h-portrait h2,
html.h4h-accent-gold .h4h-welcome,
html.h4h-accent-gold .h4h-welcome p { color: #f2f4f7; font-weight: 700; }
html.h4h-accent-gold .h4h-page { background: #121212 !important; }
html.h4h-accent-gold .h4h-site-header {
  color: #f2f4f7;
  background: #1a1a1a;
  border-bottom-color: var(--h4h-gold);
}
html.h4h-accent-gold .h4h-site-nav { background: #1a1a1a; }
html.h4h-accent-gold .h4h-site-nav a,
html.h4h-accent-gold .h4h-menu-button,
html.h4h-accent-gold .h4h-site-nav__home { color: #f2f4f7; }
html.h4h-accent-gold .h4h-site-nav a:hover,
html.h4h-accent-gold .h4h-site-nav a[aria-current="page"],
html.h4h-accent-gold .h4h-site-nav__home:hover,
html.h4h-accent-gold .h4h-site-nav__home:focus-visible {
  color: #1a1a1a;
  background: var(--h4h-gold);
}
html.h4h-accent-gold .h4h-a11y__toggle,
html.h4h-accent-gold .h4h-a11y__menu button:hover:not(:disabled),
html.h4h-accent-gold .h4h-a11y__menu button[aria-pressed="true"]:not(:disabled),
html.h4h-accent-gold .h4h-button:not(.h4h-button--secondary) {
  color: #1a1a1a;
  background: var(--h4h-gold);
}
html.h4h-accent-gold .h4h-subpage-footer,
html.h4h-accent-gold .h4h-footer { color: #f2f4f7; background: #1a1a1a; }
html.h4h-accent-gold .h4h-content-card,
html.h4h-accent-gold .h4h-service-card,
html.h4h-accent-gold .h4h-team-card,
html.h4h-accent-gold .h4h-welcome,
html.h4h-accent-gold .h4h-note {
  color: #f2f4f7;
  background: #1a1a1a;
  font-weight: 700;
}
html.h4h-accent-gold .h4h-a11y__menu { color: #f2f4f7; background: #1a1a1a; }
html.h4h-accent-gold .h4h-tile {
  color: #1a1a1a;
  background-image: none !important;
  background-color: #faca18;
  grid-column: 1 / -1;
  grid-row: span 1;
  min-height: 9.3rem;
  outline: 0;
  font-weight: 700;
}
html.h4h-accent-gold .h4h-mosaic { grid-auto-rows: auto; }

@media (max-width: 760px) {
  html.h4h-accent-gold .h4h-tile { min-height: 14rem; }
}
html.h4h-accent-gold .h4h-tile::before { display: none; }
html.h4h-accent-gold .h4h-tile span {
  color: #1a1a1a;
  background: #faca18;
  box-shadow: .75rem 0 0 #faca18, -.1rem 0 0 #faca18;
  font-weight: 700;
}
html.h4h-accent-gold .h4h-tile span::after { content: "+"; float: right; margin-left: 1rem; font-size: 1.35em; font-weight: 900; line-height: .75; }
html.h4h-accent-gold .h4h-tile[aria-expanded="true"] span::after { content: "−"; }
@media (min-width: 761px) {
  html.h4h-accent-gold .h4h-tile:not(.h4h-tile--legal) span { font-size: clamp(2.75rem, 4vw, 4rem); }
}
.h4h-accordion-panel { grid-column: 1 / -1; width: 100%; padding: clamp(1.1rem, 3vw, 2rem); color: #f2f4f7; background: #1a1a1a; border: 3px solid #faca18; border-radius: 1rem; box-shadow: var(--h4h-shadow); }
.h4h-accordion-panel[hidden] { display: none; }
.h4h-accordion-panel > :first-child { margin-top: 0; }
.h4h-accordion-panel > :last-child { margin-bottom: 0; }
.h4h-accordion-panel h1 { margin: 0 0 1rem; color: #f2f4f7; font-size: clamp(1.8rem, 5vw, 3rem); line-height: 1.05; text-transform: uppercase; }
.h4h-accordion-panel h1:focus,
.h4h-accordion-panel h2:focus,
.h4h-accordion-panel h3:focus,
.h4h-accordion-panel .h4h-eyebrow:focus,
.h4h-accordion-panel:focus { outline: 3px solid #faca18; outline-offset: .35rem; scroll-margin-top: 1rem; }
.h4h-accordion-panel .h4h-page__lead { color: #f2f4f7; }
.h4h-accordion-panel__status { margin: 0; color: #faca18; font-weight: 800; }
.h4h-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.h4h-contrast-slider { display: grid; gap: 1rem; }
.h4h-contrast-slider__track { min-width: 0; height: 36rem; }
.h4h-contrast-slider__slide { display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 100%; margin: 0; overflow: hidden; background: #121212; border: 2px solid #faca18; border-radius: 1rem; }
.h4h-contrast-slider__slide[hidden] { display: none; }
.h4h-contrast-slider__slide img, .h4h-contrast-slider__slide video { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; background: #121212; }
.h4h-contrast-slider__slide figcaption { padding: .85rem 1rem; color: #f2f4f7; text-align: center; font-weight: 800; }
html.h4h-images-hidden .h4h-contrast-slider img { display: block !important; }
html.h4h-images-hidden .h4h-contrast-slider video { display: block !important; }
.h4h-contrast-slider__controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .75rem; }
.h4h-contrast-slider__controls [data-slider-prev] { justify-self: start; }
.h4h-contrast-slider__controls [data-slider-next] { justify-self: end; }
.h4h-contrast-slider__controls p { margin: 0; color: #faca18; font-weight: 800; text-align: center; }
.h4h-contrast-slider__controls button[hidden] { display: none; }
.h4h-contrast-slider__controls .h4h-button { min-width: 10rem; min-height: 4.75rem; padding: 1rem 1.5rem; border: 3px solid #faca18; border-radius: .85rem; font-size: clamp(1.3rem, 2.5vw, 1.75rem); }

@media (max-width: 760px) {
  .h4h-contrast-slider__track { height: 28rem; }
}

@media (max-width: 520px) {
  .h4h-contrast-slider__track { height: 22rem; }
  .h4h-contrast-slider__controls { grid-template-columns: 1fr 1fr; }
  .h4h-contrast-slider__controls p { grid-column: 1 / -1; grid-row: 1; }
  .h4h-contrast-slider__controls .h4h-button { width: 100%; min-width: 0; min-height: 4.5rem; }
}
html.h4h-accent-gold .h4h-form input,
html.h4h-accent-gold .h4h-form select,
html.h4h-accent-gold .h4h-form textarea {
  color: #f2f4f7;
  background: #1a1a1a;
  border-color: rgb(255 255 255 / 35%);
}
html.h4h-accent-gold .h4h-button--secondary {
  color: #f2f4f7;
  background: #121212;
  box-shadow: inset 0 0 0 2px var(--h4h-gold);
}

.h4h-mosaic {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: 9.3rem;
  gap: 1.75rem;
}

.h4h-tile {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 1rem;
  display: flex;
  align-items: flex-end;
  min-width: 0;
  color: var(--h4h-white);
  text-decoration: none;
  background-color: var(--tile-color, var(--h4h-navy));
  background-image: var(--tile-image);
  background-position: center;
  background-size: cover;
  box-shadow: var(--h4h-shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}

.h4h-tile::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(to top, rgb(7 6 79 / 35%), transparent 58%);
}

.h4h-tile span {
  width: calc(100% - 1.7rem);
  margin: 0 .85rem .55rem;
  padding: .25rem .3rem .28rem;
  overflow-wrap: anywhere;
  font-size: clamp(1.35rem, 2.7vw, 2.45rem);
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  background: rgb(7 6 79 / 76%);
  box-shadow: .75rem 0 0 rgb(7 6 79 / 76%), -.1rem 0 0 rgb(7 6 79 / 76%);
}

.h4h-tile:hover { transform: translateY(-4px); box-shadow: 0 20px 48px rgb(4 4 48 / 34%); }
.h4h-tile:focus-visible { outline: .35rem solid var(--h4h-gold); outline-offset: .2rem; }

.h4h-tile--vision { grid-column: span 2; grid-row: span 2; --tile-color: var(--h4h-red); --tile-image: url("/assets/h4h/h4h-vision-persoenliche-assistenz.webp"); }
.h4h-tile--accessibility { grid-column: span 4; grid-row: span 2; --tile-color: var(--h4h-gold); --tile-image: url("/assets/h4h/tile-barrierefrei.jpg"); }
.h4h-tile--services, .h4h-tile--team, .h4h-tile--contact { grid-column: span 2; grid-row: span 2; }
.h4h-tile--gallery { grid-column: span 6; grid-row: span 1; --tile-color: var(--h4h-green); --tile-image: none; }
.h4h-tile--gallery::before { display: none; }
.h4h-tile--services { --tile-color: var(--h4h-cyan); --tile-image: url("/assets/h4h/h4h-alltagshilfe-services-graz.webp"); }
.h4h-tile--team { --tile-color: var(--h4h-navy); --tile-image: url("/assets/h4h/h4h-team-persoenliche-assistenz-graz.webp"); }
.h4h-tile--contact { --tile-color: var(--h4h-pink); --tile-image: url("/assets/h4h/h4h-kontakt-assistenz-graz.webp"); }
.h4h-tile--partners { grid-column: span 6; grid-row: span 2; --tile-color: var(--h4h-cyan); --tile-image: url("/assets/h4h/h4h-partner-netzwerk-graz.webp"); }
.h4h-tile--legal { grid-column: span 2; --tile-image: none; }
.h4h-tile--agb { --tile-color: var(--h4h-cyan); }
.h4h-tile--privacy { --tile-color: var(--h4h-pink); }
.h4h-tile--imprint { --tile-color: var(--h4h-orange); }
.h4h-tile--legal span { font-size: clamp(1.05rem, 2.2vw, 1.55rem); }

.h4h-welcome {
  margin: 0;
  padding: 1.15rem 1.35rem;
  color: var(--h4h-white);
  background: rgb(7 6 79 / 87%);
  border-left: .4rem solid var(--h4h-accent);
  box-shadow: var(--h4h-shadow);
  border-radius: .85rem;
}

.h4h-welcome + .h4h-mosaic { margin-top: 3rem; }

@media (max-width: 760px) {
  .h4h-welcome + .h4h-mosaic { margin-top: 2rem; }
}

.h4h-welcome h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.h4h-welcome p { margin: 0; font-size: 1rem; line-height: 1.6; }

.h4h-footer {
  padding: 1.5rem 0 2.5rem;
  color: var(--h4h-white);
  font-weight: 700;
  text-align: center;
}

.h4h-footer nav { display: flex; justify-content: center; gap: 1rem; margin-bottom: .75rem; }
.h4h-social { display: flex; justify-content: center; gap: .65rem; margin: 0 0 1.25rem; }
.h4h-social a { display: inline-grid; place-items: center; width: 3.25rem; height: 3.25rem; border: 2px solid var(--h4h-accent); border-radius: 999px; color: var(--h4h-on-accent); background: var(--h4h-accent); }
.h4h-social svg { width: 1.55rem; height: 1.55rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.h4h-social a:hover { transform: translateY(-3px); }
.h4h-social a:focus-visible { outline: 3px solid var(--h4h-white); outline-offset: 3px; }
.h4h-social a[aria-disabled="true"] { opacity: .58; cursor: not-allowed; }
.h4h-footer a, .h4h-footer .h4h-cookie-link { color: var(--h4h-accent); }
.h4h-footer p { margin: 0; }

/* Gemeinsame Unterseiten — Gold entspricht dem Kontrast-Akzent der Plattform. */
.h4h-site-header {
  position: sticky;
  z-index: 60;
  top: 0;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4.75rem;
  padding: .65rem max(1rem, calc((100% - 70rem) / 2));
  color: var(--h4h-white);
  background: rgb(7 6 79 / 96%);
  border-bottom: 3px solid var(--h4h-accent);
  backdrop-filter: blur(14px);
}

.h4h-site-header__brand { display: inline-flex; align-items: center; gap: .75rem; color: inherit; text-decoration: none; }
.h4h-site-header__brand img { width: 2.3rem; height: 3.75rem; object-fit: contain; }
.h4h-site-header__brand span { display: none; }
.h4h-site-nav__home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.45rem;
  height: 2.45rem;
  margin-right: auto;
  border: 2px solid var(--h4h-accent);
  border-radius: .4rem;
  color: inherit;
  text-decoration: none;
}
.h4h-site-nav__home svg { display: block; width: 1.15rem; height: 1.15rem; fill: currentColor; }
.h4h-site-nav__home:hover,
.h4h-site-nav__home:focus-visible { color: var(--h4h-on-accent); background: var(--h4h-accent); }
.h4h-site-nav { display: flex; align-items: center; gap: .15rem; }
.h4h-site-nav a { padding: .55rem .62rem; border-radius: .4rem; color: var(--h4h-white); font-size: .88rem; font-weight: 700; text-decoration: none; }
.h4h-site-nav a:hover, .h4h-site-nav a[aria-current="page"] { color: var(--h4h-on-accent); background: var(--h4h-accent); }
.h4h-menu-button { display: none; border: 2px solid var(--h4h-accent); border-radius: .45rem; padding: .5rem .7rem; color: var(--h4h-white); background: transparent; font: inherit; font-weight: 800; }

.h4h-page {
  min-height: calc(100vh - 10rem);
  padding: clamp(2rem, 5vw, 4.5rem) 1rem 5rem;
  background: linear-gradient(rgb(7 6 79 / 76%), rgb(7 6 79 / 88%)), var(--h4h-site-background);
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

.h4h-page__inner { width: min(100%, 70rem); margin: 0 auto; }
.h4h-eyebrow { margin: 0 0 .55rem; color: var(--h4h-accent); font-size: .84rem; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.h4h-page h1 { max-width: 18ch; margin: 0 0 1rem; color: var(--h4h-white); font-size: clamp(2.2rem, 6vw, 4.6rem); line-height: .98; text-transform: uppercase; }
.h4h-page__lead { max-width: 52rem; margin: 0 0 2rem; color: var(--h4h-white); font-size: clamp(1.05rem, 2vw, 1.3rem); line-height: 1.65; }
.h4h-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1.25rem; margin-top: 1.25rem; }
.h4h-gallery figure { margin: 0; overflow: hidden; color: var(--h4h-on-surface); background: var(--h4h-surface); border-top: .35rem solid var(--h4h-accent); border-radius: .85rem; box-shadow: var(--h4h-shadow); }
.h4h-gallery img, .h4h-gallery video { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #121212; }
.h4h-gallery figcaption { padding: .85rem 1rem; font-weight: 800; }
.h4h-gallery figure { cursor: zoom-in; }
.h4h-lightbox { position: fixed; z-index: 1500; inset: 0; display: grid; place-items: center; padding: 1rem; background: rgb(0 0 0 / 82%); }
.h4h-lightbox[hidden] { display: none; }
.h4h-lightbox__backdrop { position: absolute; inset: 0; border: 0; background: transparent; cursor: pointer; }
.h4h-lightbox__panel { position: relative; z-index: 1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: 1fr auto; align-items: center; gap: .75rem; width: min(70rem, 100%); max-height: 92vh; overflow: hidden; padding: 1rem; color: #fff; background: #1a1a1a; border: 3px solid var(--h4h-accent); border-radius: 1.25rem; box-shadow: 0 24px 80px rgb(0 0 0 / 60%); }
.h4h-lightbox__panel img { grid-column: 2; max-width: 100%; max-height: 78vh; margin: auto; object-fit: contain; }
.h4h-lightbox__panel button { border: 2px solid var(--h4h-accent); color: #fff; background: #07064f; cursor: pointer; }
.h4h-lightbox__close { position: absolute; top: .45rem; right: .45rem; width: 2.4rem; height: 2.4rem; font-size: 1.7rem; line-height: 1; }
.h4h-lightbox__prev, .h4h-lightbox__next { width: 2.8rem; height: 3.5rem; font-size: 2.4rem; line-height: 1; }
.h4h-lightbox__prev { grid-column: 1; grid-row: 1; }
.h4h-lightbox__next { grid-column: 3; grid-row: 1; }
.h4h-lightbox__panel p { grid-column: 1 / -1; margin: 0; text-align: center; font-weight: 800; }
.h4h-page-media { max-width: 56rem; margin: 0; overflow: hidden; border: 3px solid var(--h4h-accent); border-radius: .85rem; background: var(--h4h-navy); box-shadow: var(--h4h-shadow); }
.h4h-page-media img { display: block; width: 100%; max-height: 32rem; object-fit: cover; }
.h4h-page-media figcaption { padding: .65rem .85rem; color: var(--h4h-white); background: var(--h4h-navy); font-weight: 700; }

.h4h-portrait { display: grid; justify-items: center; gap: .55rem; margin: 0 0 2rem; text-align: center; }
.h4h-portrait__mark { width: 5.5rem; height: auto; }
.h4h-portrait h2 { margin: 0; color: var(--h4h-white); font-size: clamp(1.8rem, 4vw, 2.8rem); }
body.h4h-mode-light .h4h-portrait h2 { color: var(--h4h-navy); }

.h4h-split {
  display: grid;
  grid-template-columns: minmax(12rem, .85fr) minmax(0, 1.25fr);
  gap: 1.25rem;
  align-items: start;
  margin-top: 1.25rem;
}
.h4h-split--story { grid-template-columns: minmax(10rem, .7fr) minmax(0, 1.4fr); }
.h4h-split .h4h-content-card { margin-top: 0; }

.h4h-content-card {
  margin-top: 1.25rem;
  padding: clamp(1.2rem, 3vw, 2.2rem);
  text-align: left;
  color: var(--h4h-on-surface);
  background: var(--h4h-surface);
  border-top: .4rem solid var(--h4h-accent);
  box-shadow: var(--h4h-shadow);
  border-radius: .85rem;
}

.h4h-content-card h2, .h4h-content-card h3 { color: inherit; line-height: 1.2; }
body.h4h-mode-light .h4h-content-card h2,
body.h4h-mode-light .h4h-content-card h3 { color: var(--h4h-navy); }
.h4h-content-card h2 { margin: 0 0 1rem; font-size: clamp(1.45rem, 3vw, 2.1rem); }
.h4h-content-card h3 { margin: 1.2rem 0 .45rem; }
.h4h-content-card p, .h4h-content-card li { line-height: 1.7; }
.h4h-content-card a:not(.h4h-button) { color: var(--h4h-accent); font-weight: 800; text-decoration-thickness: .12em; }
.h4h-content-card ul, .h4h-service-card ul {
  width: 100%;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
.h4h-content-card li, .h4h-service-card li {
  position: relative;
  margin: .65rem 0;
  padding-left: 2rem;
}
.h4h-content-card li::before, .h4h-service-card li::before {
  position: absolute;
  top: .27em;
  left: 0;
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  color: var(--h4h-on-accent);
  background: var(--h4h-accent);
  content: "\2713";
  font-size: .72rem;
  font-weight: 900;
  line-height: 1;
}
.h4h-note { padding: 1rem; color: var(--h4h-white); background: var(--h4h-navy); border-left: .4rem solid var(--h4h-accent); }
.h4h-note strong { color: var(--h4h-accent); }

.h4h-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1.25rem; margin-top: 1.25rem; }
.h4h-service-card, .h4h-team-card { overflow: hidden; color: var(--h4h-on-surface); background: var(--h4h-surface); border-top: .35rem solid var(--h4h-accent); border-radius: .85rem; box-shadow: var(--h4h-shadow); }
.h4h-service-card { padding: 1.4rem; text-align: left; }
.h4h-service-card h2 { margin: 0 0 .8rem; color: inherit; font-size: 1.25rem; }
.h4h-service-card li { margin: .4rem 0; line-height: 1.5; }
.h4h-team-card img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center top; }
.h4h-team-card__body { padding: 1.25rem; }
.h4h-team-card h2 { margin: 0 0 .55rem; color: inherit; }
body.h4h-mode-light .h4h-service-card h2,
body.h4h-mode-light .h4h-team-card h2 { color: var(--h4h-navy); }
.h4h-team-card p { margin: 0; line-height: 1.62; }
a.h4h-team-card--join { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.h4h-team-card__media {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  color: var(--h4h-on-accent);
  background: var(--h4h-accent);
}
.h4h-team-card__media svg {
  display: block;
  width: 46%;
  height: 46%;
  fill: none;
  stroke: currentColor;
}
.h4h-team-card__media i { display:block; font-size:clamp(4rem,9vw,7rem); }
a.h4h-team-card--join:hover { transform: translateY(-3px); }
a.h4h-team-card--join:focus-visible { outline: 3px solid var(--h4h-accent); outline-offset: 3px; }
html.h4h-accent-gold .h4h-team-card__media { color: #1a1a1a; background: #faca18; }

.h4h-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.h4h-form label { display: grid; gap: .35rem; font-weight: 800; }
.h4h-form__wide { grid-column: 1 / -1; }
.h4h-form input, .h4h-form select, .h4h-form textarea { width: 100%; border: 2px solid #9aa3b3; border-radius: .35rem; padding: .75rem; color: #1a1a1a; background: #fff; font: inherit; }
.h4h-form input:focus, .h4h-form select:focus, .h4h-form textarea:focus { border-color: var(--h4h-accent-deep); outline: 3px solid color-mix(in srgb, var(--h4h-accent) 35%, transparent); }
.h4h-check { display: flex !important; grid-column: 1 / -1; grid-template-columns: none !important; align-items: flex-start; gap: .7rem !important; font-weight: 500 !important; }
.h4h-check input { width: 1.25rem; height: 1.25rem; margin-top: .18rem; flex: 0 0 auto; accent-color: var(--h4h-accent-deep); }
.h4h-button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.8rem; border: 0; border-radius: .4rem; padding: .7rem 1.15rem; color: var(--h4h-on-accent); background: var(--h4h-accent); font: inherit; font-weight: 900; text-decoration: none; cursor: pointer; }
.h4h-button:hover { background: var(--h4h-accent-deep); }
.h4h-button--secondary { color: var(--h4h-white); background: var(--h4h-navy); }

.h4h-subpage-footer { padding: 2rem 1rem; color: var(--h4h-white); text-align: center; background: var(--h4h-navy); border-top: 3px solid var(--h4h-accent); }
.h4h-subpage-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem 1.2rem; margin-bottom: .75rem; }
.h4h-subpage-footer a, .h4h-cookie-link { color: var(--h4h-accent); font-weight: 800; }
.h4h-cookie-link { border: 0; padding: 0; background: transparent; font: inherit; text-decoration: underline; cursor: pointer; }

/* Consent bleibt ohne JavaScript sichtbar und wird erst nach gespeicherter Auswahl ausgeblendet. */
.h4h-consent { position: fixed; z-index: 1700; inset: 0; display: grid; place-items: center; width: 100%; padding: 1rem; color: var(--h4h-white); background: rgb(0 0 0 / 76%); backdrop-filter: blur(8px); }
.h4h-consent[hidden] { display: none; }
.h4h-consent__panel { display: grid; grid-template-columns: 1fr; gap: 1.25rem; width: min(42rem, 100%); max-height: calc(100vh - 2rem); overflow-y: auto; padding: clamp(1.35rem, 4vw, 2.25rem); background: #17171a; border: 3px solid var(--h4h-accent); border-radius: 1.25rem; box-shadow: 0 24px 80px rgb(0 0 0 / 62%); }
.h4h-consent__intro { display: grid; justify-items: center; gap: .65rem; text-align: center; }
.h4h-consent__intro svg { width: 4.25rem; height: 4.25rem; color: var(--h4h-accent); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.h4h-consent__intro p { max-width: 34rem; }
.h4h-consent h2 { margin: 0 0 .5rem; color: var(--h4h-accent); font-size: clamp(1.5rem, 4vw, 2rem); }
.h4h-consent p { margin: 0; line-height: 1.5; }
.h4h-consent__actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; }
.h4h-consent__settings { padding-top: 1rem; border-top: 1px solid rgb(255 255 255 / 22%); }
.h4h-consent__settings[hidden] { display: none; }
.h4h-consent__option { display: grid; grid-template-columns: auto 1fr; gap: .15rem .7rem; margin: .75rem 0; }
.h4h-consent__option input { grid-row: span 2; width: 1.2rem; height: 1.2rem; margin-top: .18rem; accent-color: var(--h4h-accent); }
.h4h-consent__option small { color: #d5d7dc; }

.h4h-legal-modal {
  position: fixed;
  z-index: 1400;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
}
.h4h-legal-modal[hidden] { display: none; }
.h4h-legal-modal__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgb(0 0 0 / 62%);
  cursor: pointer;
}
.h4h-legal-modal__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(42rem, 100%);
  max-height: min(82vh, 40rem);
  overflow: hidden;
  color: var(--h4h-white);
  background: #1a1a1a;
  border: 2px solid var(--h4h-accent);
  border-radius: 1.25rem;
  box-shadow: 0 24px 70px rgb(0 0 0 / 48%);
}
.h4h-legal-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .9rem 1rem;
  border-bottom: 1px solid rgb(255 255 255 / 16%);
}
.h4h-legal-modal__head h2 { margin: 0; color: var(--h4h-accent); font-size: 1.15rem; }
.h4h-legal-modal__close {
  display: inline-grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 0;
  padding: 0;
  color: var(--h4h-white);
  background: transparent;
  cursor: pointer;
}
.h4h-legal-modal__close svg { width: 1.35rem; height: 1.35rem; }
.h4h-legal-modal__body {
  overflow: auto;
  padding: 1rem 1.15rem 1.35rem;
  line-height: 1.65;
}
.h4h-legal-modal__body h2 { margin: 1.2rem 0 .45rem; font-size: 1.05rem; }
.h4h-legal-modal__body h2:first-child { margin-top: 0; }
.h4h-legal-modal__body p { margin: 0 0 .85rem; }
body.h4h-mode-light .h4h-legal-modal__panel { color: var(--h4h-navy); background: #fff; }
body.h4h-mode-light .h4h-legal-modal__head h2 { color: var(--h4h-navy); }
body.h4h-mode-light .h4h-legal-modal__close { color: var(--h4h-navy); }

@media (max-width: 900px) {
  .h4h-menu-button { display: inline-flex; }
  .h4h-site-nav { position: absolute; top: 100%; right: 0; left: 0; display: none; flex-direction: column; align-items: stretch; padding: .75rem 1rem 1rem; background: var(--h4h-navy); border-bottom: 3px solid var(--h4h-accent); }
  .h4h-site-nav.is-open { display: flex; }
  .h4h-site-nav a { padding: .75rem; }
}

@media (max-width: 680px) {
  .h4h-page { background-attachment: scroll; }
  .h4h-form { grid-template-columns: 1fr; }
  .h4h-form__wide { grid-column: auto; }
  .h4h-consent__actions { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  body { background-attachment: scroll; }
  .h4h-header { min-height: 17rem; }
  .h4h-main, .h4h-footer { width: min(100% - 1.5rem, 38rem); }
  /* Mobile: jede Kachel bildet eine eigene, vollbreite Zeile. */
  .h4h-mosaic { display: flex; flex-direction: column; gap: 1rem; width: 100%; }
  .h4h-tile--vision, .h4h-tile--services, .h4h-tile--team, .h4h-tile--contact, .h4h-tile--legal { grid-column: span 1; }
  .h4h-tile--gallery { grid-column: span 2; }
  .h4h-tile--accessibility, .h4h-tile--partners { grid-column: span 2; }
  .h4h-tile--imprint { grid-column: auto; }
  .h4h-tile, .h4h-tile--vision, .h4h-tile--accessibility, .h4h-tile--services, .h4h-tile--team, .h4h-tile--gallery, .h4h-tile--contact, .h4h-tile--partners, .h4h-tile--legal { width: 100%; min-height: 14rem; grid-column: auto; grid-row: auto; }
  /* Logo/H4H im unteren Motivbereich bleibt mobil im Fokus. */
  .h4h-tile { background-position: center bottom !important; }
  .h4h-split, .h4h-split--story { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .h4h-header { min-height: 14rem; padding-top: 1.25rem; }
  .h4h-mosaic { display: flex; flex-direction: column; }
  .h4h-tile { width: 100%; min-height: 14rem; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; }
  .h4h-tile--accessibility, .h4h-tile--partners { min-height: 11rem; }
  .h4h-tile--legal { min-height: 5.5rem; }
  .h4h-tile span { font-size: 1.55rem; }
  .h4h-footer nav { flex-direction: column; gap: .4rem; }
  .h4h-a11y { top: max(.55rem, env(safe-area-inset-top)); right: max(.55rem, env(safe-area-inset-right)); width: min(19.5rem, calc(100vw - 1.1rem)); }
}

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

@media (prefers-contrast: more) {
  .h4h-tile span, .h4h-welcome { background: var(--h4h-navy); }
  .h4h-tile { outline: 2px solid var(--h4h-white); }
  html.h4h-accent-gold .h4h-tile { outline: 0; }
  html.h4h-accent-gold .h4h-tile span { background: #faca18; }
}


/* Suite-Seiten verwenden den zentralen tz-Seitenkopf. Im ursprünglichen
   Prototyp existierte dafür nur das h4h-Header-Markup. */
:root {
  --tz-navy: var(--h4h-navy);
  --tz-text: var(--h4h-on-surface);
  --tz-muted: #d8d8ec;
  --tz-border: rgb(250 202 24 / 32%);
  --tz-card-bg: rgb(10 9 62 / 94%);
  --tz-accent: var(--h4h-accent);
  --tz-accent-hover: #ffe166;
}
.tz-header {
  position: sticky; top: 0; z-index: 40;
  display: grid; grid-template-columns: minmax(12rem,1fr) minmax(0,3fr) auto;
  grid-template-rows: auto; align-items: center; gap: .75rem 1.25rem;
  min-height: 5.25rem; padding: .75rem clamp(1rem,3vw,2.5rem);
  color: var(--tz-text); background: rgb(7 6 79 / 96%);
  border-bottom: 2px solid var(--h4h-accent); box-shadow: 0 8px 30px rgb(0 0 0 / 22%);
  backdrop-filter: blur(10px);
}
.tz-header__slot { display:flex; align-items:center; min-width:0; grid-row:1; }
.tz-pos-left { justify-content:flex-start; justify-self:start; }
.tz-pos-center { justify-content:center; justify-self:center; }
.tz-pos-right { justify-content:flex-end; justify-self:end; }
.tz-header__slot--logo.tz-pos-left { grid-column:1; }
.tz-header__slot--logo.tz-pos-center { grid-column:2; }
.tz-header__slot--logo.tz-pos-right { grid-column:3; }
.tz-header__slot--nav-toggle.tz-pos-left { grid-column:1; }
.tz-header__slot--nav-toggle.tz-pos-center { grid-column:2; }
.tz-header__slot--nav-toggle.tz-pos-right { grid-column:3; }
.tz-header__slot--toggle.tz-pos-left { grid-column:1; }
.tz-header__slot--toggle.tz-pos-center { grid-column:2; }
.tz-header__slot--toggle.tz-pos-right { grid-column:3; }
.tz-header__logo { display:inline-flex; align-items:center; color:#fff; text-decoration:none; font-size:1.05rem; font-weight:800; }
.tz-header__logo:hover { color:var(--h4h-accent); }
.tz-header__logo img,.tz-logo { display:block; width:auto; max-height:3.75rem; }
.tz-logo--light { display:none; }
html[data-theme="light"] .tz-logo--dark { display:none; }
html[data-theme="light"] .tz-logo--light { display:block; }
.tz-nav-panel { grid-column:2; grid-row:1; display:flex; justify-content:center; min-width:0; }
.tz-nav { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.35rem .9rem; }
.tz-nav__link { padding:.45rem .55rem; border-radius:.55rem; color:#fff; font-size:.9rem; font-weight:700; text-decoration:none; }
.tz-nav__link:hover,.tz-nav__link--active { color:#171717; background:var(--h4h-accent); }
.tz-nav-toggle,.tz-theme-toggle {
  display:inline-flex; align-items:center; justify-content:center; min-width:2.75rem; min-height:2.75rem;
  padding:.5rem; border:2px solid var(--h4h-accent); border-radius:999px;
  color:#fff; background:rgb(255 255 255 / 8%); cursor:pointer; font-size:1.05rem;
}
.tz-nav-toggle { display:none; }
.tz-nav-toggle__icon--close { display:none; }
.tz-nav-toggle[aria-expanded="true"] .tz-nav-toggle__icon--open { display:none; }
.tz-nav-toggle[aria-expanded="true"] .tz-nav-toggle__icon--close { display:block; }
.tz-theme-toggle:hover,.tz-nav-toggle:hover { color:#171717; background:var(--h4h-accent); }
.tz-footer { padding:2rem 1rem 2.5rem; text-align:center; color:var(--tz-muted); background:rgb(7 6 79 / 96%); border-top:2px solid var(--h4h-accent); }
.tz-footer__brand { margin:0 0 .35rem; font-weight:800; }
.tz-footer__copy { margin:0; font-size:.85rem; }
.tz-legal { display:flex; flex-wrap:wrap; justify-content:center; gap:.75rem 1.25rem; margin-bottom:.9rem; }
.tz-legal a { color:#fff; font-weight:700; }
.tz-legal a:hover { color:var(--h4h-accent); }

/* Der Suite-Seiteneditor umschließt H4H-Inhalte in wp-section. Die allgemeine
   Full-Width-Regel verwendet 100vw und verschiebt schmale Seiten um die
   Scrollleistenbreite. Im H4H-Prototyp bleibt der Inhalt im Seitenraster. */
body[data-h4h-subpage="true"] .page-body,
body[data-h4h-subpage="true"] .wp-section,
body[data-h4h-subpage="true"] .wp-section__inner { width:100%; max-width:none; box-sizing:border-box; }
body[data-h4h-subpage="true"] .wp-section--full {
  width:100%; max-width:100%; margin-left:0; margin-right:0; padding-left:0; padding-right:0;
}
body[data-h4h-subpage="true"] .wp-section--text { max-width:none; margin-left:0; margin-right:0; }

/* Der jeweils erste Inhaltsblock bildet den ruhigen, zentrierten Seitenkopf:
   Eyebrow, H1 und Einleitung bleiben auch bei längeren Texten optisch verbunden. */
body[data-h4h-subpage="true"] .h4h-page__inner .wp-section--text .h4h-eyebrow,
body[data-h4h-subpage="true"] .h4h-page__inner .wp-section--text h1,
body[data-h4h-subpage="true"] .h4h-page__inner .wp-section--text .h4h-page__lead {
  margin-left:auto; margin-right:auto; text-align:center;
}
body[data-h4h-subpage="true"] .h4h-page__inner .wp-section--text .h4h-eyebrow { max-width:52rem; }
body[data-h4h-subpage="true"] .h4h-page__inner .wp-section--text h1 { width:100%; max-width:none; }
body[data-h4h-subpage="true"] .h4h-page__inner .wp-section--text .h4h-page__lead { margin-bottom:clamp(2rem,5vw,3.5rem); }
body[data-h4h-subpage="true"] .h4h-page__inner > .tz-subpage-main > h1,
body[data-h4h-subpage="true"] .h4h-page__inner > .tz-subpage-main > .page-body > .h4h-eyebrow,
body[data-h4h-subpage="true"] .h4h-page__inner > .tz-subpage-main > .page-body > h1,
body[data-h4h-subpage="true"] .h4h-page__inner > .tz-subpage-main > .page-body > .h4h-page__lead {
  display:block; width:100%; max-width:52rem; margin-left:auto; margin-right:auto; text-align:center;
}
body[data-h4h-subpage="true"] .h4h-page__inner > .tz-subpage-main > .page-body > h1 { max-width:none; }

/* Auf Unterseiten schwebt die Darstellungs-Bubble klein unten rechts. Das Menü
   öffnet sich darüber und verdeckt weder Navigation noch Seitentitel. */
body[data-h4h-subpage="true"] .h4h-a11y {
  top:auto; right:max(.85rem,env(safe-area-inset-right));
  bottom:max(.85rem,env(safe-area-inset-bottom));
  flex-direction:column-reverse; width:min(19.5rem,calc(100vw - 1.7rem));
}
body[data-h4h-subpage="true"] .h4h-a11y__toggle { min-width:3.25rem; min-height:3.25rem; padding:.4rem; }
body[data-h4h-subpage="true"] .h4h-a11y__toggle svg { width:1.65rem; height:1.65rem; }
@media (min-width:901px) { .tz-header__slot--nav-toggle { display:none; } }
@media (max-width:900px) {
  .tz-header { display:flex; flex-wrap:wrap; min-height:auto; }
  .tz-header__slot { grid-row:auto; grid-column:auto; flex:0 0 auto; }
  .tz-header__slot--logo { order:1; margin-right:auto; }
  .tz-header__slot--nav-toggle { order:5; margin-left:auto; }
  .tz-header__slot--toggle { order:6; }
  .tz-nav-toggle { display:inline-flex; }
  .tz-nav-panel { display:none; order:99; flex:1 0 100%; width:100%; padding:.75rem 0 .25rem; border-top:1px solid var(--tz-border); }
  .tz-nav-panel--open { display:flex; }
  .tz-nav { flex-direction:column; align-items:stretch; width:100%; }
  .tz-nav__link { width:100%; padding:.7rem .8rem; }
}

/* Suite-Social-Media-Ausgabe: wird über „Im Footer anzeigen“ vollständig ein-/ausgeblendet. */
.h4h-footer .tz-social { display:flex; justify-content:center; gap:.75rem; margin:0 0 1.25rem; }
.h4h-footer .tz-social__link { display:inline-grid; place-items:center; width:3.5rem; height:3.5rem; border:2px solid var(--h4h-accent); border-radius:999px; color:var(--h4h-on-accent); background:var(--h4h-accent); font-size:1.55rem; text-decoration:none; transition:transform .2s ease; }
.h4h-footer .tz-social__link:hover { transform:translateY(-3px); }
.h4h-footer .tz-social__link:focus-visible { outline:3px solid var(--h4h-white); outline-offset:3px; }

/* H4H-Ausprägung des zentralen Suite-Cookie-Modals. */
#tz-cookie-root[data-mode="modal"] .tz-cc-dialog { max-width:42rem; border:2px solid #faca18 !important; border-radius:1.5rem; padding:clamp(1.5rem,4vw,3rem); text-align:center; }
#tz-cookie-root[data-mode="modal"] .tz-cc-title::before { display:block; margin:0 auto 1rem; color:#faca18; font:900 2.75rem/1 "Font Awesome 6 Free"; content:"\f3ed"; }
#tz-cookie-root[data-mode="modal"] .tz-cc-title { font-size:clamp(1.5rem,4vw,2.25rem); }
#tz-cookie-root[data-mode="modal"] .tz-cc-text { max-width:34rem; margin:.75rem auto 0; font-size:1rem; }
#tz-cookie-root[data-mode="modal"] .tz-cc-actions { justify-content:center; }
#tz-cookie-root .tz-cc-btn { min-height:3rem; border-radius:.8rem; }
#tz-cookie-root .tz-cc-btn--primary { background:#faca18 !important; color:#171717 !important; }
#tz-cookie-root .tz-cc-btn--link { color:#faca18 !important; }

/* Kontaktformular: der Suite-Formularbaustein übernimmt vollständig die
   H4H-Flächen, Abstände, Rundungen und gut sichtbaren Fokuszustände. */
body[data-h4h-subpage="true"] .tz-inquiry { padding:0; background:transparent; }
body[data-h4h-subpage="true"] .wp-section--inquiry > .wp-section__inner > h2,
body[data-h4h-subpage="true"] .wp-section--inquiry > .wp-section__inner > .tz-section-intro {
  max-width:46rem; margin-left:auto; margin-right:auto; text-align:center;
}
body[data-h4h-subpage="true"] .wp-section--inquiry > .wp-section__inner > h2 { margin-bottom:.75rem; color:var(--h4h-white); font-size:clamp(1.8rem,4vw,3rem); }
body[data-h4h-subpage="true"] .wp-section--inquiry > .wp-section__inner > h2 em { color:var(--h4h-accent); font-style:normal; }
body[data-h4h-subpage="true"] .wp-section--inquiry > .wp-section__inner > .tz-section-intro { margin-bottom:1.5rem; color:#efeff8; }
body[data-h4h-subpage="true"] .tz-inquiry__card {
  width:min(100%,52rem); margin:0 auto; padding:clamp(1.25rem,4vw,2.5rem);
  border:2px solid var(--h4h-accent); border-radius:1.5rem;
  color:var(--h4h-white); background:#1a1a1a;
  box-shadow:0 18px 48px rgb(0 0 0 / 28%);
}
.tz-inquiry__form-title { margin:0 0 .6rem; font-size:clamp(1.65rem,4vw,2.5rem); line-height:1.1; }
.tz-inquiry__form-intro { margin:0 0 1.5rem; color:#e7e7f3; line-height:1.65; }
.tz-inquiry-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.tz-inquiry-form label:not(.tz-inquiry-consent) { display:grid; gap:.4rem; color:inherit; font-weight:800; }
.tz-inquiry-form label:has(textarea),.tz-inquiry-form label:has(input[name="subject"]),.tz-inquiry-form .tz-inquiry-consent,.tz-inquiry-form .tz-inquiry-quantity,.tz-inquiry-form .tz-inquiry-contact-method,.tz-inquiry-form .tz-inquiry-callback-time,
.tz-inquiry-form .ink-hp,.tz-inquiry-form .tz-btn-primary,.tz-inquiry-form .tz-inquiry-error { grid-column:1 / -1; }
.tz-inquiry-form input:not([type="checkbox"]):not([type="hidden"]):not([type="radio"]),
.tz-inquiry-form textarea,
.tz-inquiry-form select {
  width:100%; min-height:3.25rem; padding:.8rem 1rem; box-sizing:border-box;
  border:2px solid rgb(250 202 24 / 58%); border-radius:.85rem;
  color:#fff; background:#242424; font:inherit;
}
.tz-inquiry-form textarea { min-height:9rem; resize:vertical; }
.tz-inquiry-form input:focus-visible,.tz-inquiry-form textarea:focus-visible,.tz-inquiry-form select:focus-visible {
  outline:3px solid var(--h4h-accent); outline-offset:3px; border-color:var(--h4h-accent);
}
.tz-inquiry-consent {
  display:flex; align-items:flex-start; gap:.75rem; padding:.9rem 1rem;
  border:1px solid rgb(250 202 24 / 42%); border-radius:.85rem;
  color:#efeff8; background:rgb(255 255 255 / 6%); font-size:.92rem; line-height:1.5;
}
.tz-inquiry-consent input[type="checkbox"] { width:1.35rem; height:1.35rem; flex:0 0 auto; margin:.15rem 0 0; accent-color:var(--h4h-accent); }
.tz-inquiry-consent a { color:var(--h4h-accent); font-weight:800; }
.tz-inquiry-contact-method { display:flex; flex-wrap:wrap; gap:.75rem 1.25rem; margin:0; padding:1rem; border:1px solid rgb(250 202 24 / 42%); border-radius:.85rem; }
.tz-inquiry-contact-method legend { padding:0 .35rem; font-weight:900; }
.tz-inquiry-form .tz-inquiry-contact-method label { display:flex; align-items:center; gap:.5rem; font-weight:800; cursor:pointer; }
.tz-inquiry-contact-method input { width:1.25rem; height:1.25rem; accent-color:var(--h4h-accent); }
.tz-inquiry-callback-time[hidden] { display:none; }
.tz-inquiry-quantity { padding:1rem; border-radius:.85rem; background:rgb(255 255 255 / 6%); }
.tz-inquiry-quantity__hint { margin:.25rem 0 .65rem; color:#d8d8ec; }
.tz-inquiry-quantity__row { display:flex; align-items:center; gap:.75rem; }
.tz-inquiry-form .tz-btn-primary {
  justify-self:start; min-height:3.35rem; padding:.85rem 1.4rem;
  border:2px solid var(--h4h-accent); border-radius:.9rem;
  color:#171717; background:var(--h4h-accent); font:inherit; font-weight:900; cursor:pointer;
}
.tz-inquiry-form .tz-btn-primary:hover { filter:brightness(1.08); transform:translateY(-1px); }
.tz-inquiry-success,.tz-inquiry-error { padding:1rem; border-radius:.85rem; font-weight:800; }
.tz-inquiry-success { color:#082e18; background:#b7f5c9; }
.tz-inquiry-error { color:#560d0d; background:#ffd0d0; }
html[data-theme="light"] body[data-h4h-subpage="true"] .tz-inquiry__card { color:#101010; background:rgb(255 255 255 / 96%); }
body.h4h-mode-light[data-h4h-subpage="true"] .tz-inquiry__card { color:var(--h4h-navy); background:rgb(255 255 255 / 96%); }
body.h4h-mode-light[data-h4h-subpage="true"] .tz-inquiry-form input:not([type="checkbox"]):not([type="hidden"]):not([type="radio"]), body.h4h-mode-light[data-h4h-subpage="true"] .tz-inquiry-form textarea, body.h4h-mode-light[data-h4h-subpage="true"] .tz-inquiry-form select { color:#171717; background:#fffdf3; }
body.h4h-mode-light[data-h4h-subpage="true"] .wp-section--inquiry > .wp-section__inner > h2 { color:var(--h4h-navy); }
body.h4h-mode-light[data-h4h-subpage="true"] .wp-section--inquiry > .wp-section__inner > .tz-section-intro { color:#343446; }
body.h4h-mode-light[data-h4h-subpage="true"] .tz-inquiry__form-intro { color:#343446; }
body.h4h-mode-light[data-h4h-subpage="true"] .tz-inquiry-consent { color:#171717; background:#fff9db; }
body.h4h-mode-light[data-h4h-subpage="true"] .tz-inquiry-consent a { color:#075985; }
body.h4h-mode-light[data-h4h-subpage="true"] .tz-inquiry-contact-method { color:#171717; background:#fff9db; }
body[data-h4h-subpage="true"] .wp-section--inquiry h2 em { padding-bottom:0; text-decoration:none; }
body[data-h4h-subpage="true"] .wp-section--inquiry h2 em::after { display:none !important; content:none !important; }
html[data-theme="light"] .tz-inquiry__form-intro,html[data-theme="light"] .tz-inquiry-quantity__hint { color:#343446; }
html[data-theme="light"] .tz-inquiry-form input:not([type="checkbox"]):not([type="hidden"]):not([type="radio"]),
html[data-theme="light"] .tz-inquiry-form textarea,html[data-theme="light"] .tz-inquiry-form select { color:#101010; background:#fffdf3; }
html[data-theme="light"] .tz-inquiry-consent { color:#101010; background:#fff9db; }
html[data-theme="light"] body[data-h4h-subpage="true"] .wp-section--inquiry > .wp-section__inner > h2 { color:var(--h4h-navy); }
html[data-theme="light"] body[data-h4h-subpage="true"] .wp-section--inquiry > .wp-section__inner > .tz-section-intro { color:#343446; }
@media (max-width:640px) { .tz-inquiry-form { grid-template-columns:1fr; } .tz-inquiry-form > * { grid-column:1 !important; } }

/* Seitenkopf und Schnellzugriff bleiben auch in der Suite-Ansicht eindeutig zentriert. */
body[data-h4h-subpage="true"] .wp-section--text { text-align:center; }
body[data-h4h-subpage="true"] .wp-section--text > .wp-section__inner > .h4h-eyebrow,
body[data-h4h-subpage="true"] .wp-section--text > .wp-section__inner > h1,
body[data-h4h-subpage="true"] .wp-section--text > .wp-section__inner > .h4h-page__lead {
  display:block; width:100%; max-width:none; margin-left:auto; margin-right:auto; text-align:center;
}
.h4h-quick-actions { position:fixed; right:5.5rem; bottom:max(1rem,env(safe-area-inset-bottom)); z-index:1200; }
.h4h-quick-actions__toggle { display:grid; place-items:center; width:3.75rem; height:3.75rem; padding:0; border:2px solid #171717; border-radius:50%; color:#171717; background:#faca18; box-shadow:0 8px 22px rgb(0 0 0 / 35%); cursor:pointer; font-size:1.35rem; }
.h4h-quick-actions__toggle:focus-visible,.h4h-quick-actions__link:focus-visible { outline:3px solid var(--h4h-white); outline-offset:3px; }
.h4h-quick-actions__menu { position:absolute; right:0; bottom:4.5rem; display:grid; min-width:12rem; padding:.5rem; border:2px solid #faca18; border-radius:1rem; background:#171642; box-shadow:0 12px 30px rgb(0 0 0 / 35%); }
.h4h-quick-actions__menu[hidden] { display:none; }
.h4h-quick-actions__link { display:flex; align-items:center; gap:.65rem; padding:.7rem .8rem; border-radius:.65rem; color:#fff; text-decoration:none; font-weight:800; }
.h4h-quick-actions__link:hover { background:rgb(250 202 24 / 22%); }
.h4h-quick-actions__call { display:none; }
@media (max-width:900px) { .h4h-quick-actions { right:5rem; bottom:max(1rem,env(safe-area-inset-bottom)); } .h4h-quick-actions__call { display:flex; } }

/* Suite-gesteuerter Platzhalter für noch nicht veröffentlichte Unterseiten. */
.h4h-coming-soon {
  display:grid; place-items:center; align-content:center; min-height:clamp(24rem,58vh,38rem);
  padding:clamp(2rem,7vw,5rem); border:2px solid var(--h4h-accent); border-radius:1.5rem;
  text-align:center; color:var(--h4h-white); background:rgb(7 6 79 / 94%);
  box-shadow:0 18px 48px rgb(0 0 0 / 25%);
}
.h4h-coming-soon__icon { display:grid; place-items:center; width:5.5rem; height:5.5rem; margin-bottom:1.2rem; border-radius:999px; color:#171717; background:var(--h4h-accent); font-size:2.5rem; }
.h4h-coming-soon .h4h-eyebrow { margin:0 0 .65rem; color:var(--h4h-accent); font-weight:900; letter-spacing:.16em; }
.h4h-coming-soon h2 { margin:0; font-size:clamp(2rem,6vw,4.25rem); line-height:1.05; }
.h4h-coming-soon > p:last-of-type { max-width:42rem; margin:1.25rem auto 1.75rem; font-size:clamp(1rem,2vw,1.25rem); line-height:1.65; }
.h4h-coming-soon__home { display:inline-flex; padding:.85rem 1.25rem; border-radius:.8rem; color:#171717; background:var(--h4h-accent); font-weight:900; text-decoration:none; }
html[data-theme="light"] .h4h-coming-soon { color:#101010; background:rgb(255 255 255 / 96%); }

/* Rechtstexte werden wie echte H4H-Inhalte lesbar gesetzt, inklusive der
   aufklappbaren DSGVO-/AGB-Abschnitte. */
body[data-h4h-subpage="true"] .legal-body { width:min(100%,58rem); margin:0 auto; color:var(--h4h-white); font-size:1rem; line-height:1.7; }
body[data-h4h-subpage="true"] .legal-body > h2:first-child { margin:0 0 1rem; color:var(--h4h-accent); font-size:clamp(1.8rem,4vw,2.8rem); }
body[data-h4h-subpage="true"] .legal-body h3 { margin-top:1.7rem; color:var(--h4h-accent); }
body[data-h4h-subpage="true"] .legal-body details { margin:1rem 0; padding:1rem 1.2rem; border:1px solid rgb(250 202 24 / 40%); border-radius:1rem; background:rgb(7 6 79 / 72%); }
body[data-h4h-subpage="true"] .legal-body summary { color:var(--h4h-accent); font-weight:900; cursor:pointer; }
body[data-h4h-subpage="true"] .legal-body dt { margin-top:.7rem; color:var(--h4h-accent); font-weight:900; }
body[data-h4h-subpage="true"] .legal-body dd { margin:0; }
body[data-h4h-subpage="true"] .legal-body a { color:var(--h4h-accent); font-weight:800; }
html[data-theme="light"] body[data-h4h-subpage="true"] .legal-body { color:#171717; }
html[data-theme="light"] body[data-h4h-subpage="true"] .legal-body details { color:#171717; background:rgb(255 255 255 / 94%); }