/* =========================================================
 HNO Praxis Dr. med. Nehlsen, zentrales Designsystem
 Mobile first, ohne Frameworks und externe Dienste.
 ========================================================= */

/* ---------- 1. Lokale Schriften ---------- */
@font-face {
 font-family: "Cormorant Garamond";
 font-style: normal;
 font-weight: 400;
 font-display: swap;
 src: url("../assets/fonts/cormorant-garamond-400.ttf") format("truetype");
}

@font-face {
 font-family: "Cormorant Garamond";
 font-style: normal;
 font-weight: 500;
 font-display: swap;
 src: url("../assets/fonts/cormorant-garamond-500.ttf") format("truetype");
}

@font-face {
 font-family: "Cormorant Garamond";
 font-style: normal;
 font-weight: 600;
 font-display: swap;
 src: url("../assets/fonts/cormorant-garamond-600.ttf") format("truetype");
}

@font-face {
 font-family: "Jost";
 font-style: normal;
 font-weight: 300;
 font-display: swap;
 src: url("../assets/fonts/jost-300.ttf") format("truetype");
}

@font-face {
 font-family: "Jost";
 font-style: normal;
 font-weight: 400;
 font-display: swap;
 src: url("../assets/fonts/jost-400.ttf") format("truetype");
}

@font-face {
 font-family: "Jost";
 font-style: normal;
 font-weight: 500;
 font-display: swap;
 src: url("../assets/fonts/jost-500.ttf") format("truetype");
}

@font-face {
 font-family: "Jost";
 font-style: normal;
 font-weight: 600;
 font-display: swap;
 src: url("../assets/fonts/jost-600.ttf") format("truetype");
}

/* ---------- 2. Design-Tokens ---------- */:root {
 --background: #f7faf8;
 --foreground: #29332f;
 --card: #ffffff;
 --primary: #46523f;
 --primary-hover: #354132;
 --primary-foreground: #f8fbf9;
 --secondary: #eaf2ee;
 --muted-foreground: #5e6964;
 --accent: #557f6b;
 --accent-hover: #476d5b;
 --accent-text: #527563;
 --accent-foreground: #24332c;
 --accent-soft: #e7f1ec;
 --border: #d3dfd9;
 --focus: #5f9079;
 --danger: #a0342d;

 --radius-sm: 0.45rem;
 --radius: 0.75rem;
 --radius-lg: 1rem;
 --shadow-card: 0 0.5rem 1.75rem rgb(41 51 47 / 0.08);
 --shadow-elevated: 0 1.25rem 3.5rem rgb(41 51 47 / 0.16);

 --font-heading: "Cormorant Garamond", Georgia, serif;
 --font-body: "Jost", "Helvetica Neue", Arial, sans-serif;

 --content-width: 76rem;
 --text-width: 46rem;
 --header-height: 5rem;
 --section-space: clamp(3.5rem, 7vw, 6.5rem);
}

/* ---------- 3. Basis ---------- */
*,
*::before,
*::after {
 box-sizing: border-box;
}

html {
 font-size: 100%;
 scroll-behavior: smooth;
 scroll-padding-top: calc(var(--header-height) + 1rem);
}

body {
 min-width: 20rem;
 min-height: 100svh;
 margin: 0;
 display: flex;
 flex-direction: column;
 overflow-x: hidden;
 background: var(--background);
 color: var(--foreground);
 font-family: var(--font-body);
 font-size: clamp(1rem, 0.97rem + 0.14vw, 1.075rem);
 font-weight: 400;
 line-height: 1.7;
 letter-spacing: 0.006em;
 -webkit-font-smoothing: antialiased;
 text-rendering: optimizeLegibility;
}

main {
 display: block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
 margin: 0 0 1rem;
 color: var(--primary);
 font-family: var(--font-heading);
 font-weight: 500;
 line-height: 1.12;
 letter-spacing: -0.012em;
 text-wrap: balance;
 overflow-wrap: anywhere;
}

h1 {
 font-size: clamp(2.35rem, 6vw, 4.25rem);
}

h2 {
 font-size: clamp(2rem, 4.2vw, 3rem);
 font-weight: 600;
 line-height: 1.16;
 letter-spacing: -0.006em;
}

h3 {
 font-size: clamp(1.4rem, 2.5vw, 1.75rem);
}

p {
 margin: 0 0 1.15rem;
}

a {
 color: inherit;
 text-decoration: none;
 text-underline-offset: 0.18em;
}

a:hover {
 text-decoration: underline;
}

img {
 display: block;
 max-width: 100%;
 height: auto;
}

button,
input,
textarea,
select {
 font: inherit;
}

ul {
 margin: 0;
 padding: 0;
 list-style: none;
}::selection {
 background: var(--accent-soft);
 color: var(--foreground);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
 outline: 3px solid var(--focus);
 outline-offset: 3px;
}.skip-link {
 position: fixed;
 z-index: 1000;
 top: 0.75rem;
 left: 0.75rem;
 padding: 0.75rem 1rem;
 transform: translateY(-150%);
 border-radius: var(--radius-sm);
 background: var(--primary);
 color: var(--primary-foreground);
 text-decoration: none;
}.skip-link:focus {
 transform: translateY(0);
}.visually-hidden {
 position: absolute;
 width: 1px;
 height: 1px;
 margin: -1px;
 padding: 0;
 overflow: hidden;
 clip: rect(0 0 0 0);
 white-space: nowrap;
 border: 0;
}

/* ---------- 4. Layout und Hilfsklassen ---------- */.container {
 width: min(100% - 2rem, var(--content-width));
 margin-inline: auto;
}.main-content {
 flex: 1;
}.section {
 padding-block: var(--section-space);
}.section--bg-background {
 background: var(--background);
}.section--bg-secondary {
 background: var(--secondary);
}.section__intro {
 max-width: var(--text-width);
 margin-bottom: clamp(2rem, 4vw, 3.25rem);
}.section__intro--center {
 margin-inline: auto;
}.content-narrow {
 max-width: var(--text-width);
 margin-inline: auto;
}.flow-space-md {
 margin-top: 2rem;
}.flow-space-lg {
 margin-top: 3rem;
}.eyebrow {
 margin-bottom: 0.8rem;
 color: var(--accent-text);
 font-size: 0.84rem;
 font-weight: 600;
 line-height: 1.4;
 letter-spacing: 0.16em;
 text-transform: uppercase;
}.text-muted {
 color: var(--muted-foreground);
}.text-center {
 text-align: center;
}.grid {
 display: grid;
 grid-template-columns: minmax(0, 1fr);
 gap: clamp(1rem, 2.4vw, 1.75rem);
}

/* ---------- 5. Buttons und Icons ---------- */.btn {
 min-height: 2.75rem;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 0.55rem;
 padding: 0.78rem 1.35rem;
 border: 1px solid transparent;
 border-radius: var(--radius-sm);
 cursor: pointer;
 font-family: var(--font-body);
 font-size: 0.98rem;
 font-weight: 600;
 line-height: 1.25;
 text-align: center;
 text-decoration: none;
 transition: background-color 180ms ease, border-color 180ms ease,
 color 180ms ease, transform 180ms ease;
}.btn:hover {
 transform: translateY(-1px);
}
/* Buttons, Navigation und verlinkte Karten bleiben auch beim Hover ohne Unterstreichung. */.btn:hover,.main-nav a:hover,.mobile-nav a:hover,
a.service-card:hover {
 text-decoration: none;
}.btn--primary {
 background: var(--accent);
 color: #fff;
}.btn--primary:hover {
 background: var(--accent-hover);
 color: #fff;
}.btn--outline {
 border-color: var(--accent);
 background: var(--accent);
 color: #fff;
}.btn--outline:hover {
 border-color: var(--accent-hover);
 background: var(--accent-hover);
 color: #fff;
}.btn--outline-light {
 border-color: rgb(255 255 255 / 0.82);
 background: rgb(41 51 47 / 0.18);
 color: #fff;
}.btn--outline-light:hover {
 border-color: var(--accent-hover);
 background: var(--accent-hover);
 color: #fff;
}.btn.icon {
 color: inherit;
}.btn-group {
 display: flex;
 flex-wrap: wrap;
 gap: 0.8rem;
}.btn-group--center {
 justify-content: center;
}.icon {
 width: 1.1rem;
 height: 1.1rem;
 flex: 0 0 auto;
 fill: none;
 stroke: currentColor;
 stroke-width: 1.8;
 stroke-linecap: round;
 stroke-linejoin: round;
}.icon--lg {
 width: 1.4rem;
 height: 1.4rem;
}

/* ---------- 6. Header und Navigation ---------- */.site-header {
 position: sticky;
 z-index: 50;
 top: 0;
 border-bottom: 1px solid var(--border);
 background: rgb(247 250 248 / 0.97);
 box-shadow: 0 0.25rem 1rem rgb(41 51 47 / 0.05);
 backdrop-filter: blur(0.75rem);
}.site-header__inner {
 min-height: var(--header-height);
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 0.75rem;
}.site-header__logo {
 min-width: 0;
 display: block;
}.site-header__logo img {
 width: clamp(10.5rem, 60vw, 15.5rem);
 max-height: 3.9rem;
 object-fit: contain;
 object-position: left center;
}.main-nav {
 display: none;
 align-items: center;
 gap: clamp(0.85rem, 1.6vw, 1.5rem);
}.main-nav a:not(.btn) {
 position: relative;
 padding-block: 0.55rem;
 color: var(--primary);
 font-size: 0.98rem;
 font-weight: 600;
 text-decoration: none;
 white-space: nowrap;
}.main-nav a:not(.btn)::after {
 content: "";
 position: absolute;
 right: 0;
 bottom: 0.25rem;
 left: 0;
 height: 2px;
 transform: scaleX(0);
 background: var(--accent);
 transition: transform 180ms ease;
}.main-nav a:hover::after,.main-nav a.is-active::after {
 transform: scaleX(1);
}.main-nav a.is-active {
 color: var(--accent-text);
}.nav-toggle {
 width: 2.75rem;
 height: 2.75rem;
 flex: 0 0 auto;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 padding: 0;
 border: 1px solid var(--border);
 border-radius: var(--radius-sm);
 background: var(--card);
 color: var(--primary);
 cursor: pointer;
}.nav-toggle.icon {
 width: 1.55rem;
 height: 1.55rem;
}.mobile-nav {
 display: none;
 border-top: 1px solid var(--border);
 background: var(--background);
}.mobile-nav.is-open {
 display: block;
}.mobile-nav__inner {
 display: grid;
 gap: 0.25rem;
 padding-block: 0.75rem 1.25rem;
}.mobile-nav a:not(.btn) {
 min-height: 2.75rem;
 display: flex;
 align-items: center;
 padding-inline: 0.75rem;
 border-radius: var(--radius-sm);
 color: var(--primary);
 font-weight: 600;
 text-decoration: none;
}.mobile-nav a:not(.btn):hover,.mobile-nav a.is-active {
 background: var(--secondary);
 color: var(--accent-text);
}.mobile-nav.btn {
 margin-top: 0.5rem;
}

/* ---------- 7. Hero und Seitenkopf ---------- */.hero {
 position: relative;
 min-height: min(46rem, calc(100svh - var(--header-height)));
 display: flex;
 align-items: center;
 overflow: hidden;
 background: var(--primary);
}.hero__media,.hero__overlay {
 position: absolute;
 inset: 0;
}.hero__media img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: 58% center;
}.hero__media picture {
 width: 100%;
 height: 100%;
 display: block;
}.hero__overlay {
 /* Heller Lesbarkeitsverlauf: Das Foto bleibt im Fokus, ohne dunkle Abdunklung. */
 background: linear-gradient(
 90deg,
 rgb(247 250 248 / 0.88) 0%,
 rgb(247 250 248 / 0.62) 34%,
 rgb(247 250 248 / 0.18) 52%,
 rgb(247 250 248 / 0) 70%
 );
}.hero__content {
 position: relative;
 z-index: 1;
 max-width: 43rem;
 padding-block: clamp(4rem, 10vw, 7rem);
}.hero__kicker {
 max-width: 36rem;
 margin-bottom: 0.9rem;
 color: var(--foreground);
 font-size: clamp(1rem, 2vw, 1.12rem);
 font-weight: 500;
}.hero h1 {
 margin-bottom: 1.35rem;
 color: var(--foreground);
 text-shadow: 0 1px 1px rgb(255 255 255 / 0.45);
 font-size: clamp(2.25rem, 9.5vw, 5rem);
}.hero__title {
 max-width: none;
 white-space: nowrap;
}.hero__text {
 max-width: 36rem;
 margin-bottom: 2rem;
 color: var(--foreground);
 font-size: clamp(1.02rem, 2vw, 1.16rem);
 font-weight: 500;
}

/* Sekundärer Hero-Button für die helle Bilddarstellung. */.hero.btn--outline-light {
 border-color: rgb(41 51 47 / 0.72);
 background: rgb(247 250 248 / 0.58);
 color: var(--foreground);
 backdrop-filter: blur(0.2rem);
}.hero.btn--outline-light:hover {
 border-color: var(--accent-hover);
 background: var(--accent-hover);
 color: #fff;
}.page-header {
 padding-block: clamp(3.25rem, 7vw, 5.5rem);
 border-bottom: 1px solid var(--border);
 background:
 radial-gradient(circle at 92% 12%, rgb(146 189 169 / 0.18), transparent 26rem),
 var(--secondary);
}.page-header__inner {
 max-width: var(--text-width);
}.page-header h1 {
 margin-bottom: 1.15rem;
}.page-header p:last-child {
 margin-bottom: 0;
 color: var(--muted-foreground);
 font-size: clamp(1.02rem, 2vw, 1.14rem);
}

/* ---------- 8. Karten ---------- */.card,.service-card {
 height: 100%;
 border: 1px solid var(--border);
 border-radius: var(--radius);
}.card {
 padding: clamp(1.4rem, 3vw, 2.15rem);
 background: var(--card);
 box-shadow: var(--shadow-card);
}.card h2,.card h3 {
 font-size: clamp(1.45rem, 2.5vw, 1.8rem);
}.card__icon {
 width: 3rem;
 height: 3rem;
 display: flex;
 align-items: center;
 justify-content: center;
 margin-bottom: 1.2rem;
 border-radius: 50%;
 background: var(--accent-soft);
 color: var(--accent-text);
}.card p,.service-card p {
 color: var(--muted-foreground);
}.card p:last-child,.service-card p:last-child {
 margin-bottom: 0;
}.card__link {
 display: inline-block;
 margin-top: 0.55rem;
 color: var(--accent-text);
 font-weight: 600;
 text-decoration: none;
 text-decoration-thickness: 1px;
}.card__link:hover {
 text-decoration: underline;
}.service-card {
 display: block;
 padding: clamp(1.4rem, 3vw, 2.25rem);
 background: var(--secondary);
 text-decoration: none;
 transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

a.service-card:hover {
 transform: translateY(-3px);
 border-color: var(--accent-hover);
 box-shadow: var(--shadow-elevated);
}.service-card__no {
 display: block;
 margin-bottom: 1rem;
 color: var(--accent-text);
 font-size: 0.9rem;
 font-weight: 600;
 letter-spacing: 0.1em;
}.service-card h2,.service-card h3 {
 margin-bottom: 0.7rem;
 font-size: clamp(1.4rem, 2.4vw, 1.75rem);
 transition: color 180ms ease;
}

a.service-card:hover h2,
a.service-card:hover h3 {
 color: var(--accent-text);
}

/* ---------- 9. Bild-Text-Sektionen ---------- */.split {
 display: grid;
 grid-template-columns: minmax(0, 1fr);
 gap: clamp(2rem, 5vw, 4.5rem);
 align-items: center;
}.split__body {
 min-width: 0;
}.split__media {
 overflow: hidden;
 border-radius: var(--radius-lg);
 box-shadow: var(--shadow-elevated);
}.split__media img {
 width: 100%;
 aspect-ratio: 4 / 3;
 object-fit: cover;
}.split__media picture {
 display: block;
}.split p {
 color: var(--muted-foreground);
}.dot-list {
 display: grid;
 gap: 0.65rem;
 margin-bottom: 2rem;
}.dot-list li {
 min-width: 0;
 display: flex;
 gap: 0.7rem;
 color: var(--primary);
 font-weight: 500;
}.dot-list li::before {
 content: "";
 width: 0.42rem;
 height: 0.42rem;
 flex: 0 0 auto;
 margin-top: 0.67rem;
 border-radius: 50%;
 background: var(--accent);
}

/* Ruhigere Typografie im Audiologie-Schwerpunkt */.audiology-focus.split__body {
 max-width: 36rem;
}.audiology-focus.eyebrow {
 margin-bottom: 1.15rem;
}.audiology-focus h2 {
 max-width: 12ch;
 margin-bottom: 1.35rem;
 font-size: clamp(2.15rem, 3.7vw, 3.35rem);
 font-weight: 500;
 line-height: 1.08;
 letter-spacing: -0.018em;
}.audiology-focus__lead {
 max-width: 34rem;
 margin-bottom: 2.25rem;
 font-size: clamp(1.03rem, 1.4vw, 1.15rem);
 line-height: 1.65;
}.audiology-focus h3 {
 margin-bottom: 1.15rem;
 font-size: clamp(1.2rem, 1.8vw, 1.45rem);
 font-weight: 500;
 line-height: 1.3;
 letter-spacing: -0.004em;
}.audiology-focus__list {
 grid-template-columns: minmax(0, 1fr);
 gap: 0.85rem;
 margin-bottom: 2.25rem;
}.audiology-focus__list li {
 gap: 0.75rem;
 font-weight: 400;
 line-height: 1.55;
}.audiology-focus__list li::before {
 width: 0.36rem;
 height: 0.36rem;
 margin-top: 0.66rem;
}.region__media {
 position: relative;
 overflow: visible;
 box-shadow: none;
}.region__frame {
 position: relative;
 overflow: hidden;
 border-radius: var(--radius-lg);
 box-shadow: var(--shadow-elevated);
}.region__gradient {
 position: absolute;
 inset: 0;
 background: linear-gradient(to top, rgb(31 39 35 / 0.65), transparent 66%);
}.region__caption {
 position: absolute;
 right: 1rem;
 bottom: 1rem;
 left: 1rem;
 display: flex;
 align-items: center;
 gap: 0.5rem;
 margin: 0;
 color: rgb(248 251 249 / 0.96);
 font-size: 0.94rem;
 font-weight: 600;
}.region__inset {
 display: none;
}.tag-list {
 display: flex;
 flex-wrap: wrap;
 gap: 0.5rem;
 margin-bottom: 2rem;
}.tag-list li {
 padding: 0.35rem 0.85rem;
 border: 1px solid var(--border);
 border-radius: 999px;
 background: var(--card);
 color: var(--primary);
 font-size: 0.94rem;
 font-weight: 500;
}

/* ---------- 10. Kontaktformular ---------- */.contact-form {
 max-width: 44rem;
 margin-inline: auto;
 padding: clamp(1.25rem, 4vw, 2.35rem);
 border: 1px solid var(--border);
 border-radius: var(--radius-lg);
 background: var(--card);
 box-shadow: var(--shadow-card);
}.form-field {
 margin-bottom: 1.2rem;
}.form-field label {
 display: block;
 margin-bottom: 0.4rem;
 color: var(--primary);
 font-weight: 600;
}.form-field input,.form-field textarea {
 width: 100%;
 padding: 0.75rem 0.85rem;
 border: 1px solid var(--border);
 border-radius: var(--radius-sm);
 background: #ffffff;
 color: var(--foreground);
 transition: border-color 180ms ease, box-shadow 180ms ease;
}.form-field input:hover,.form-field textarea:hover {
 border-color: #9dafa6;
}.form-field input:focus,.form-field textarea:focus {
 border-color: var(--focus);
 box-shadow: 0 0 0 3px rgb(95 144 121 / 0.18);
}.form-field textarea {
 min-height: 10rem;
 resize: vertical;
}.form-field input:invalid.is-touched,.form-field textarea:invalid.is-touched {
 border-color: var(--danger);
}.form-error {
 display: none;
 margin-top: 0.35rem;
 color: var(--danger);
 font-size: 0.9rem;
 font-weight: 500;
}.form-error.is-visible {
 display: block;
}.form-hint {
 margin-top: 0.45rem;
 color: var(--muted-foreground);
 font-size: 0.9rem;
}.form-status {
 display: none;
 margin: 1.25rem 0 0;
 padding: 1rem 1.15rem;
 border-left: 4px solid var(--accent);
 border-radius: var(--radius-sm);
 background: var(--secondary);
 color: var(--primary);
 font-weight: 500;
}.form-status.is-visible {
 display: block;
}.form-check {
 display: flex;
 align-items: flex-start;
 gap: 0.7rem;
 margin-bottom: 1rem;
}.form-check input {
 width: 1.15rem;
 height: 1.15rem;
 flex: 0 0 auto;
 margin-top: 0.3rem;
 accent-color: var(--accent);
}.form-check label {
 color: var(--muted-foreground);
}.form-check +.form-error {
 margin-top: -0.65rem;
 margin-bottom: 1rem;
}

/* ---------- 11. Footer ---------- */.site-footer {
 padding-block: clamp(3rem, 6vw, 4.25rem);
 background: #466b58;
 color: #fff;
}.site-footer h2 {
 margin-bottom: 0.7rem;
 color: #fff;
 font-size: 1.35rem;
}.site-footer__heading-spacer {
 height: calc(1.35rem * 1.12);
 margin-bottom: 0.7rem;
}.site-footer p:last-child {
 margin-bottom: 0;
}.site-footer a {
 color: inherit;
 text-decoration-color: transparent;
 transition: color 180ms ease, text-decoration-color 180ms ease;
}.site-footer a:hover {
 color: #fff;
 text-decoration-color: currentColor;
}.site-footer__grid {
 display: grid;
 grid-template-columns: minmax(0, 1fr);
 gap: 2rem;
 margin-bottom: 2.5rem;
}.site-footer__links {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 gap: 0.4rem;
}.site-footer__bottom {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 gap: 0.2rem;
 padding-top: 1.4rem;
 border-top: 1px solid rgb(248 251 249 / 0.2);
 font-size: 0.92rem;
}

/* ---------- 12. Animationen ---------- */
@keyframes fade-in-up {
 from {
 opacity: 0;
 transform: translateY(1.25rem);
 }
 to {
 opacity: 1;
 transform: translateY(0);
 }
}.animate-fade-in-up {
 animation: fade-in-up 600ms ease-out both;
}.reveal {
 opacity: 0;
 transform: translateY(1.25rem);
 transition: opacity 600ms ease-out, transform 600ms ease-out;
}.reveal.is-visible {
 opacity: 1;
 transform: translateY(0);
}

/* ---------- 13. Responsive Layouts ---------- */
@media (max-width: 39.999rem) {.btn-group.btn {
 width: 100%;
 }.hero {
 min-height: max(38rem, calc(100svh - var(--header-height)));
 }.hero__media img {
 /* Ärztin im mobilen Hochformat bewusst oben rechts im Bild halten. */
 object-position: 46% center;
 }.hero__overlay {
 /* Auf kleinen Displays liegt die Aufhellung nur hinter dem unteren Textbereich. */
 background: linear-gradient(
 to top,
 rgb(247 250 248 / 0.94) 0%,
 rgb(247 250 248 / 0.76) 38%,
 rgb(247 250 248 / 0.22) 64%,
 rgb(247 250 248 / 0) 82%
 );
 }
}

@media (min-width: 40rem) {.container {
 width: min(100% - 3rem, var(--content-width));
 }.grid--2,.grid--3,.grid--4 {
 grid-template-columns: repeat(2, minmax(0, 1fr));
 }.dot-list,.site-footer__grid {
 grid-template-columns: repeat(2, minmax(0, 1fr));
 }.region__caption {
 right: auto;
 left: 1.4rem;
 bottom: 1.4rem;
 }.region__inset {
 position: absolute;
 right: -1rem;
 bottom: -2rem;
 width: clamp(8rem, 20vw, 10rem);
 display: block;
 overflow: hidden;
 border: 4px solid var(--background);
 border-radius: var(--radius);
 background: var(--card);
 box-shadow: var(--shadow-elevated);
 }.section--bg-secondary.region__inset {
 border-color: var(--secondary);
 }.region__inset img {
 width: 100%;
 aspect-ratio: 3 / 4;
 object-fit: cover;
 }
}

@media (min-width: 68rem) {:root {
 --header-height: 6.25rem;
 }.site-header__logo img {
 width: 18rem;
 max-height: 4.75rem;
 }.main-nav {
 display: flex;
 }.nav-toggle,.mobile-nav {
 display: none!important;
 }.grid--3 {
 grid-template-columns: repeat(3, minmax(0, 1fr));
 }.grid--4 {
 grid-template-columns: repeat(4, minmax(0, 1fr));
 }.split {
 grid-template-columns: repeat(2, minmax(0, 1fr));
 }.split--reverse.split__media {
 order: 2;
 }.split--reverse.split__body {
 order: 1;
 }.site-footer__grid {
 grid-template-columns: 1.4fr 1fr 1fr 1fr;
 }.hero__media img {
 object-position: center;
 }
}

@media (prefers-reduced-motion: reduce) {
 html {
 scroll-behavior: auto;
 }

 *,
 *::before,
 *::after {
 scroll-behavior: auto!important;
 animation-duration: 0.01ms!important;
 animation-iteration-count: 1!important;
 transition-duration: 0.01ms!important;
 }.animate-fade-in-up,.reveal {
 opacity: 1;
 transform: none;
 }
}

@media (forced-colors: active) {.btn,.card,.service-card,.nav-toggle,.contact-form {
 border: 1px solid CanvasText;
 }
}


/* ---------- Rechtliche Seiten ---------- */.legal-content {
 max-width: 52rem;
}.legal-content section + section {
 margin-top: clamp(2.5rem, 5vw, 4rem);
 padding-top: clamp(2rem, 4vw, 3rem);
 border-top: 1px solid var(--border);
}.legal-content h2 {
 margin-bottom: 1.1rem;
 font-size: clamp(1.65rem, 3vw, 2.15rem);
}.legal-content h3 {
 margin-top: 1.8rem;
 margin-bottom:.65rem;
 font-family: var(--font-sans);
 font-size: 1.05rem;
 font-weight: 600;
}.legal-content p,.legal-content li {
 max-width: 72ch;
}.legal-content p + p,.legal-content ul + p {
 margin-top: 1rem;
}.legal-content ul {
 margin:.75rem 0 0 1.2rem;
}.legal-content a {
 overflow-wrap: anywhere;
}.legal-notice {
 padding: 1rem 1.15rem;
 border-left:.25rem solid var(--accent);
 background: var(--secondary);
 border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* ---------- Responsive Typografie und saubere Umbrüche ---------- */
/* Überschriften werden nicht mitten im Wort getrennt. */
h1,
h2,
h3,
h4,
h5,
h6,.card h2,.card h3,.service-card h2,.service-card h3,.eyebrow,.hero__kicker {
 -webkit-hyphens: none;
 hyphens: none;
 overflow-wrap: normal;
 word-break: normal;
}

/* Fließtext darf nur bei technisch langen Zeichenfolgen umbrechen. */
p,
li {
 overflow-wrap: break-word;
 word-break: normal;
}

/* Lange Leistungsbezeichnungen bleiben auch in mehrspaltigen Karten ruhig. */.service-card h2,.service-card h3 {
 font-size: clamp(1.3rem, 2.1vw, 1.68rem);
 line-height: 1.18;
 text-wrap: pretty;
}

/* Etwas mehr nutzbare Breite in schmalen Kartenansichten. */
@media (min-width: 68rem) and (max-width: 79.99rem) {.grid--4 {
 grid-template-columns: repeat(2, minmax(0, 1fr));
 }
}

@media (max-width: 39.99rem) {
 h1 {
 font-size: clamp(2.1rem, 11vw, 3rem);
 }

 h2 {
 font-size: clamp(1.75rem, 9vw, 2.35rem);
 }.card,.service-card {
 padding-inline: clamp(1.25rem, 6vw, 1.7rem);
 }
}
/* Namen der Fachärzte: je Name eine feste, responsive Zeile */.doctor-heading {
 font-size: clamp(1.28rem, 5.8vw, 2.75rem);
 line-height: 1.13;
 text-wrap: initial;
}.doctor-heading__name,.doctor-heading__claim {
 display: block;
}.doctor-heading__name {
 white-space: nowrap;
}.doctor-heading__claim {
 margin-top: 0.3em;
}

@media (min-width: 64rem) {.doctor-heading {
 font-size: clamp(2rem, 2.55vw, 2.75rem);
 }
}

@media (max-width: 23rem) {.doctor-heading {
 font-size: clamp(1.12rem, 5.6vw, 1.28rem);
 }
}


/* Mobile Hero: Bildausschnitt und Aktionsbereich optimiert */
@media (max-width: 39.999rem) {.hero {
 min-height: max(38rem, calc(100svh - var(--header-height)));
 align-items: stretch;
 }.hero__media img {
 /* Mobile Feinjustierung: gegenüber der vorherigen Version etwa 1 cm nach unten. */
 height: calc(100% + 7rem);
 transform: translateY(-6.7rem);
 object-position: 46% center;
 }.hero >.container {
 min-height: inherit;
 display: flex;
 }.hero__content {
 width: 100%;
 min-height: inherit;
 display: flex;
 flex-direction: column;
 padding-top: clamp(3.25rem, 9svh, 5.25rem);
 padding-bottom: max(1rem, env(safe-area-inset-bottom));
 }.hero__content.btn-group {
 margin-top: auto;
 padding-top: 1.5rem;
 gap: 0.75rem;
 }
}

/* Mobile Hero: Text und Aktionen als zusammenhängender Block am unteren Rand */
@media (max-width: 39.999rem) {.hero__content {
 justify-content: flex-end;
 padding-top: clamp(4rem, 12svh, 8rem);
 }.hero__copy {
 margin-top: auto;
 /* Den Textblock etwa 2 cm nach oben setzen; die Buttons bleiben unten verankert. */
 transform: translateY(-2.4rem);
 }.hero__kicker {
 margin-bottom: clamp(0.55rem, 1.5svh, 0.85rem);
 }.hero h1 {
 margin-bottom: clamp(0.85rem, 2svh, 1.2rem);
 font-size: clamp(2.55rem, 13.5vw, 4.25rem);
 line-height: 0.98;
 }.hero__text {
 margin-bottom: 0;
 font-size: clamp(0.98rem, 4.4vw, 1.12rem);
 line-height: 1.55;
 }.hero__content.btn-group {
 margin-top: clamp(0.9rem, 2.2svh, 1.35rem);
 padding-top: 0;
 flex: 0 0 auto;
 }
}

/* Auf sehr niedrigen Mobil-Displays bleibt der gesamte Inhaltsblock sichtbar. */
@media (max-width: 39.999rem) and (max-height: 43rem) {.hero__content {
 padding-top: 5.5rem;
 }.hero__copy {
 /* Auf niedrigen Displays etwas weniger Versatz, damit nichts kollidiert. */
 transform: translateY(-1.8rem);
 }.hero h1 {
 font-size: clamp(2.35rem, 12vw, 3.35rem);
 }.hero__text {
 font-size: 0.96rem;
 line-height: 1.42;
 }.hero__content.btn-group {
 margin-top: 0.75rem;
 gap: 0.6rem;
 }.hero__content.btn {
 padding-block: 0.68rem;
 }
}


/* Mobile hero fine tuning */
@media (max-width: 768px){.hero__media img{
 object-position:center 46%!important;
 }.hero__actions{
 bottom: calc(env(safe-area-inset-bottom,0px) + 0.5rem + 0.5cm)!important;
 }
}

/* Finale typografische Anpassungen */.doctor-names-heading {
 font-size: clamp(1.45rem, 3.15vw, 3.15rem);
 line-height: 1.16;
}.doctor-names-heading span {
 display: block;
 white-space: nowrap;
}.audiology-focus__list {
 grid-template-columns: minmax(0, 1fr);
}.audiology-focus__list li {
 white-space: nowrap;
 font-size: clamp(0.78rem, 3.6vw, 1rem);
}.allergology-heading {
 white-space: nowrap;
 font-size: clamp(1.35rem, 4.9vw, 3.35rem);
 letter-spacing: -0.02em;
}

@media (max-width: 30rem) {.doctor-names-heading {
 font-size: clamp(1.2rem, 6.15vw, 1.55rem);
 letter-spacing: -0.02em;
 }.audiology-focus__list li {
 gap: 0.5rem;
 font-size: clamp(0.72rem, 3.65vw, 0.9rem);
 letter-spacing: -0.012em;
 }.allergology-heading {
 font-size: clamp(1.22rem, 6.35vw, 1.55rem);
 }
}

/* ---------- Footer-Optimierung ---------- */.site-footer__phone {
 width: fit-content;
 border: 2px solid #fff;
 background: transparent;
 color: #fff;
 box-shadow: none;
}.site-footer a.site-footer__phone:hover {
 border-color: #fff;
 background: var(--accent-hover);
 color: #fff;
 text-decoration: none;
}

@media (max-width: 39.999rem) {.site-footer {
 padding-block: 2.5rem 3.25rem;
 }.site-footer__grid {
 grid-template-columns: repeat(2, minmax(0, 1fr));
 column-gap: 1.25rem;
 row-gap: 1.75rem;
 margin-bottom: 0;
 }.site-footer__address,.site-footer__contact {
 grid-column: 1 / -1;
 }.site-footer__heading-spacer {
 display: none;
 }.site-footer h2 {
 margin-bottom: 0.55rem;
 }.site-footer__phone {
 width: 100%;
 min-height: 3.2rem;
 justify-content: flex-start;
 padding-inline: 1rem;
 }.site-footer__links {
 gap: 0.55rem;
 }.site-footer__links a {
 line-height: 1.4;
 }
}


/* Praxisstatus-Popup */
body.has-open-modal { overflow: hidden; }
.practice-modal[hidden] { display: none; }
.practice-modal { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 1rem; }
.practice-modal__backdrop { position: absolute; inset: 0; background: rgb(20 31 26 / 0.62); backdrop-filter: blur(4px); }
.practice-modal__dialog {
 position: relative;
 width: min(58rem, 100%);
 max-height: calc(100vh - 2rem);
 overflow: hidden;
 display: grid;
 grid-template-columns: minmax(14rem, .78fr) minmax(22rem, 1.22fr);
 border: 1px solid rgb(255 255 255 / .5);
 border-radius: 1rem;
 background: #f8faf8;
 box-shadow: 0 1.6rem 4.5rem rgb(0 0 0 / .28);
 color: #26332d;
 outline: none;
}
.practice-modal__visual {
 min-height: 100%;
 overflow: hidden;
 display: grid;
 place-items: center;
 background: #f4f6f4;
}
.practice-modal__visual picture {
 display: grid;
 place-items: center;
 width: 100%;
 height: 100%;
}
.practice-modal__visual img {
 display: block;
 width: 100%;
 height: 100%;
 max-width: 100%;
 max-height: calc(100vh - 2rem);
 object-fit: contain;
 object-position: center;
}
.practice-modal__content { min-width: 0; max-height: calc(100vh - 2rem); overflow: auto; padding: clamp(2rem, 4vw, 3.25rem); }
.practice-modal__dialog h2 { margin: .65rem 2rem .85rem 0; font-family: 'Cormorant Garamond', serif; font-size: clamp(2.15rem, 4vw, 3.2rem); line-height: 1; }
.practice-modal__dialog p { margin: 0 0 .8rem; line-height: 1.65; }
.practice-modal__close { position: absolute; z-index: 2; top: .75rem; right: .85rem; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 1px solid rgb(41 51 47 / .12); border-radius: 50%; background: rgb(248 250 248 / .92); color: inherit; box-shadow: 0 .2rem .7rem rgb(0 0 0 / .08); cursor: pointer; }
.practice-modal__close svg { display: block; width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; }
.practice-modal__close:hover { background: #fff; }
.practice-modal__status { display: inline-flex; align-items: center; gap: .55rem; margin: 0 2.5rem 1rem 0; font-weight: 700; font-size: clamp(.85rem, 1.5vw, 1rem); letter-spacing: .06em; text-transform: uppercase; }
.practice-modal__dot { width: .62rem; height: .62rem; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 .25rem rgb(70 107 88 / .1); }
.practice-modal__status--open { color: #356b50; }
.practice-modal__status--closed { color: #7b594a; }
.practice-modal__next { font-weight: 600; }
.practice-modal__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.practice-modal__actions .btn { justify-content: center; }
.practice-modal__continue { border: 1px solid #466b58; background: transparent; color: #334d40; }
.practice-modal__continue:hover { background: rgb(70 107 88 / .08); }
@media (max-width: 47.999rem) {
 .practice-modal { align-items: end; padding: .65rem; }
 .practice-modal__dialog { width: min(38rem, 100%); max-height: calc(100svh - 1.3rem); grid-template-columns: 1fr; overflow: auto; border-radius: 1rem 1rem .75rem .75rem; }
 .practice-modal__visual {
  min-height: 15rem;
  max-height: min(40svh, 24rem);
  padding: .35rem;
 }
 .practice-modal__visual picture { height: min(40svh, 24rem); }
 .practice-modal__visual img {
  width: 100%;
  height: 100%;
  max-height: min(40svh, 24rem);
  object-fit: contain;
  object-position: center;
 }
 .practice-modal__content { max-height: none; overflow: visible; padding: 1.5rem 1.25rem 1.35rem; }
 .practice-modal__dialog h2 { margin-right: 1.7rem; font-size: clamp(2rem, 9vw, 2.7rem); }
 .practice-modal__actions { flex-direction: column; }
 .practice-modal__actions .btn { width: 100%; }
}

@media (min-width: 48rem) and (max-width: 68rem) {
 .practice-modal__dialog {
  width: min(54rem, 100%);
  grid-template-columns: minmax(15rem, .82fr) minmax(21rem, 1.18fr);
 }
 .practice-modal__content { padding: clamp(1.65rem, 3vw, 2.4rem); }
}

/* Vertretungsinformationen im Praxisstatus-Pop-up */.practice-modal__representatives{margin:1rem 0;padding:1rem;border:1px solid rgb(70 107 88 /.2);border-radius:12px;background:rgb(70 107 88 /.06)}.practice-modal__representatives h3{margin:0 0.65rem;font-size:1rem;color:var(--text, #29332f)}.practice-modal__representatives address{display:grid;gap:.18rem;font-style:normal;margin:0 0.8rem}.practice-modal__representatives address:last-child{margin-bottom:0}.practice-modal__representatives address span,.practice-modal__representatives address a{display:block}.practice-modal__representatives a{color:var(--accent, #466b58);font-weight:600}

/* Notfallsprechstunde im Praxisstatus-Pop-up */.practice-modal__emergency {
 display: block;
 margin: 1rem 0;
 padding: .9rem 1rem;
 border: 1px solid rgb(70 107 88 /.22);
 border-radius:.8rem;
 background: rgb(70 107 88 /.045);
}.practice-modal__emergency-icon {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 2.65rem;
 height: 2.65rem;
 border-radius: 50%;
 background: #466b58;
 color: #fff;
}.practice-modal__emergency-icon svg {
 width: 1.35rem;
 height: 1.35rem;
 fill: none;
 stroke: currentColor;
 stroke-width: 1.9;
 stroke-linecap: round;
 stroke-linejoin: round;
}.practice-modal__emergency h3 {
 margin: 0 0.3rem;
 font-size: 1.05rem;
 color: #29332f;
}.practice-modal__emergency p { margin: 0 0.25rem; line-height: 1.5; }.practice-modal__emergency p:last-child { margin-bottom: 0; }
@media (max-width: 30rem) { .practice-modal__emergency { padding: .85rem; } }


/* ---------- Footer Layout mit drei Bereichen ---------- */
.site-footer {
 padding-block: clamp(2.75rem, 5vw, 3.75rem);
}
.site-footer__grid {
 align-items: center;
 gap: clamp(2rem, 4vw, 4rem);
 margin-bottom: 0;
}
.site-footer__contact {
 display: flex;
 align-items: center;
 justify-content: center;
}
.site-footer__phone {
 width: 100%;
 max-width: 23rem;
 min-height: 3.75rem;
 justify-content: center;
 padding-inline: 1.35rem;
 white-space: nowrap;
}
.site-footer__navigation {
 display: grid;
 grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
 gap: clamp(1.5rem, 3vw, 3rem);
 align-items: start;
}

@media (min-width: 68rem) {
 .site-footer__grid {
  grid-template-columns: minmax(17rem, 1fr) minmax(20rem, 1.15fr) minmax(24rem, 1.35fr);
 }
}

@media (min-width: 40rem) and (max-width: 67.999rem) {
 .site-footer__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 .site-footer__navigation {
  grid-column: 1 / -1;
 }
 .site-footer__contact {
  justify-content: flex-end;
 }
}

@media (max-width: 39.999rem) {
 .site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.75rem;
 }
 .site-footer__address,
 .site-footer__contact,
 .site-footer__navigation {
  grid-column: auto;
 }
 .site-footer__contact {
  justify-content: stretch;
 }
 .site-footer__phone {
  max-width: none;
  justify-content: center;
  white-space: normal;
  text-align: center;
 }
 .site-footer__navigation {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
 }
}


/* Kompakter Praxisstatus ohne Überlagerung des Seiteninhalts */
.practice-status-trigger {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: .5rem;
 min-height: 2.35rem;
 padding: .48rem .72rem;
 border: 1px solid currentColor;
 border-radius: var(--radius-sm);
 background: transparent;
 font: inherit;
 font-size: .82rem;
 font-weight: 600;
 line-height: 1.2;
 cursor: pointer;
 transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.practice-status-trigger--open { color: #356b50; }
.practice-status-trigger--closed { color: #8a4a43; }
.practice-status-trigger:hover { background: rgb(70 107 88 / .08); }
.practice-status-trigger:focus-visible { outline: 3px solid rgb(70 107 88 / .32); outline-offset: 3px; }
.practice-status-trigger__dot { width: .58rem; height: .58rem; flex: 0 0 auto; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgb(70 107 88 / .1); }
.practice-status-trigger--header { display: none; flex: 0 0 auto; white-space: nowrap; }
.practice-status-trigger--hero { display: none; margin-top: 1rem; width: fit-content; color: var(--foreground); border-color: rgb(41 51 47 / .35); background: rgb(247 250 248 / .55); backdrop-filter: blur(.25rem); }
.practice-status-trigger--hero:hover { background: rgb(247 250 248 / .78); }
.practice-status-mobilebar { display: none; border-bottom: 1px solid var(--border); background: var(--background); }
.practice-status-trigger--mobilebar { width: 100%; justify-content: flex-start; border: 0; border-radius: 0; padding: .7rem 0; }
body.has-open-modal .practice-status-trigger { visibility: hidden; }
@media (min-width: 68rem) {
 .practice-status-trigger--header { display: inline-flex; }
}
@media (max-width: 67.999rem) {
 .page-index .practice-status-trigger--hero { display: inline-flex; }
 body:not(.page-index) .practice-status-mobilebar { display: block; }
}
@media (max-width: 39.999rem) {
 .practice-status-trigger--hero { width: 100%; justify-content: flex-start; padding: .62rem .1rem; border-width: 0; border-top: 1px solid rgb(41 51 47 / .22); border-radius: 0; background: transparent; backdrop-filter: none; font-size: .88rem; }
 .practice-status-trigger--hero:hover { background: transparent; }
}
@media (prefers-reduced-motion: reduce) { .practice-status-trigger { transition: none; } }

/* Hinweis vor einem Anruf außerhalb der Öffnungszeiten */
.call-hours-modal[hidden] { display: none; }
.call-hours-modal {
 position: fixed;
 inset: 0;
 z-index: 2100;
 display: grid;
 place-items: center;
 padding: 1rem;
}
.call-hours-modal__backdrop {
 position: absolute;
 inset: 0;
 background: rgb(20 31 26 / 0.62);
 backdrop-filter: blur(3px);
}
.call-hours-modal__dialog {
 position: relative;
 width: min(32rem, 100%);
 max-height: calc(100vh - 2rem);
 overflow: auto;
 padding: clamp(1.75rem, 5vw, 2.75rem);
 border-radius: var(--radius, 0.75rem);
 background: #f8faf8;
 box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 0.25);
 color: #26332d;
 text-align: center;
 outline: none;
}
.call-hours-modal__close {
 position: absolute;
 top: 0.75rem;
 right: 0.85rem;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 2.5rem;
 height: 2.5rem;
 padding: 0;
 border: 0;
 border-radius: 50%;
 background: transparent;
 color: inherit;
 cursor: pointer;
}
.call-hours-modal__close:hover { background: rgb(70 107 88 / 0.1); }
.call-hours-modal__close svg {
 display: block;
 width: 1.35rem;
 height: 1.35rem;
 fill: none;
 stroke: currentColor;
 stroke-width: 2.25;
 stroke-linecap: round;
}
.call-hours-modal__icon {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 3.5rem;
 height: 3.5rem;
 margin-bottom: 1rem;
 border-radius: 50%;
 background: rgb(123 89 74 / 0.1);
 color: #7b594a;
}
.call-hours-modal__icon svg {
 width: 1.75rem;
 height: 1.75rem;
 fill: none;
 stroke: currentColor;
 stroke-width: 1.8;
 stroke-linecap: round;
 stroke-linejoin: round;
}
.call-hours-modal__eyebrow {
 margin: 0 0 0.5rem;
 color: #7b594a;
 font-size: 0.85rem;
 font-weight: 700;
 letter-spacing: 0.06em;
 text-transform: uppercase;
}
.call-hours-modal__dialog h2 {
 margin: 0 1.75rem 0.85rem;
 font-family: 'Cormorant Garamond', serif;
 font-size: clamp(2rem, 6vw, 2.75rem);
 line-height: 1.05;
}
.call-hours-modal__dialog p { line-height: 1.6; }
.call-hours-modal__next { margin: 1rem 0 0.35rem; font-weight: 600; }
.call-hours-modal__countdown {
 margin: 1rem 0 1.4rem;
 padding: 1rem;
 border: 1px solid rgb(70 107 88 / 0.2);
 border-radius: var(--radius, 0.75rem);
 background: rgb(70 107 88 / 0.06);
 font-size: clamp(1.05rem, 3vw, 1.3rem);
 font-weight: 700;
 font-variant-numeric: tabular-nums;
}
.call-hours-modal__actions {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: 0.75rem;
}
.call-hours-modal__actions .btn { justify-content: center; }
.call-hours-modal__call {
 border: 1px solid #466b58;
 background: transparent;
 color: #334d40;
}
.call-hours-modal__call:hover { background: rgb(70 107 88 / 0.08); }
@media (max-width: 39.999rem) {
 .call-hours-modal { align-items: end; padding: 0.65rem; }
 .call-hours-modal__dialog { border-radius: var(--radius, 0.75rem); }
 .call-hours-modal__actions { flex-direction: column; }
 .call-hours-modal__actions .btn { width: 100%; }
}



/* Mobiles Praxisstatus-Pop-up: immer bildschirmfüllend, ohne Scrollcontainer */
@media (max-width: 47.999rem) {
 .practice-modal {
  width: 100dvw;
  height: 100dvh;
  min-height: 100dvh;
  padding: 0;
  align-items: stretch;
  overflow: hidden;
 }
 .practice-modal__dialog {
  width: 100dvw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  border-radius: 0;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0, 32dvh) minmax(0, 1fr);
  overflow: hidden;
 }
 .practice-modal__visual {
  min-height: 0;
  max-height: none;
  height: 100%;
  padding: .25rem;
 }
 .practice-modal__visual picture,
 .practice-modal__visual img {
  width: 100%;
  height: 100%;
  max-height: none;
 }
 .practice-modal__content {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: none;
  overflow: hidden;
  padding: clamp(.8rem, 2.5dvh, 1.25rem) 1rem max(.8rem, env(safe-area-inset-bottom));
 }
 .practice-modal__status { margin: 0 2.5rem .45rem 0; font-size: clamp(.76rem, 3.3vw, .92rem); }
 .practice-modal__dialog p { margin-bottom: .45rem; font-size: clamp(.82rem, 3.35vw, .96rem); line-height: 1.42; }
 .practice-modal__emergency { margin: .35rem 0; padding: .55rem .7rem; }
 .practice-modal__emergency p { font-size: clamp(.74rem, 3vw, .88rem); line-height: 1.35; }
 .practice-modal__representatives { margin: .35rem 0; padding: .55rem .7rem; font-size: .78rem; }
 .practice-modal__next { margin-top: .1rem !important; }
 .practice-modal__actions { margin-top: auto; padding-top: .45rem; gap: .45rem; }
 .practice-modal__actions .btn { min-height: 2.65rem; padding: .55rem .8rem; font-size: .88rem; }
 .practice-modal__close { top: max(.55rem, env(safe-area-inset-top)); right: .6rem; }
}
@media (max-width: 47.999rem) and (orientation: landscape) {
 .practice-modal__dialog {
  grid-template-columns: minmax(0, 38%) minmax(0, 62%);
  grid-template-rows: 1fr;
 }
 .practice-modal__content { padding: .75rem 1rem max(.55rem, env(safe-area-inset-bottom)); }
 .practice-modal__dialog p { font-size: clamp(.72rem, 1.7vw, .88rem); }
 .practice-modal__emergency { padding: .4rem .6rem; }
 .practice-modal__actions { flex-direction: row; }
 .practice-modal__actions .btn { width: auto; flex: 1; }
}
@media (max-width: 23rem), (max-height: 39rem) and (max-width: 47.999rem) {
 .practice-modal__dialog { grid-template-rows: minmax(0, 25dvh) minmax(0, 1fr); }
 .practice-modal__content { padding-top: .65rem; }
 .practice-modal__dialog p { font-size: .78rem; line-height: 1.32; }
 .practice-modal__emergency p { font-size: .7rem; }
 .practice-modal__actions .btn { min-height: 2.35rem; padding-block: .42rem; font-size: .8rem; }
}


/* SEO-Inhalte und FAQ */
.seo-intro p { font-size: 1.05rem; line-height: 1.8; }
.seo-intro a, .faq-item a { color: var(--color-primary, #466b58); text-decoration-thickness: .08em; text-underline-offset: .18em; }
.faq-list { display: grid; gap: .8rem; margin-top: 2rem; }
.faq-item { border: 1px solid rgb(70 107 88 / .2); border-radius: var(--radius-sm, .65rem); background: var(--color-background, #fff); overflow: clip; }
.faq-item summary { position: relative; padding: 1.15rem 3.25rem 1.15rem 1.25rem; cursor: pointer; list-style: none; font-weight: 600; color: var(--color-text, #26362e); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; position: absolute; right: 1.25rem; top: 50%; translate: 0 -50%; font-size: 1.5rem; font-weight: 400; color: var(--color-primary, #466b58); }
.faq-item[open] summary::after { content: '−'; }
.faq-item__answer { padding: 0 1.25rem 1.2rem; }
.faq-item__answer p { margin: 0; line-height: 1.7; }
@media (max-width: 39.999rem) { .seo-intro p { font-size: 1rem; } .faq-item summary { padding-inline-start: 1rem; } .faq-item__answer { padding-inline: 1rem; } }

/* Startseiten-Hero: klare zweizeilige H1 innerhalb des linken Textbereichs */
.hero__title {
 max-width: 39rem;
 white-space: normal;
 line-height: .98;
 text-wrap: balance;
}
.hero__title > span {
 display: block;
}
@media (min-width: 68rem) {
 .hero__content {
  max-width: 42rem;
 }
 .hero h1 {
  font-size: clamp(3.35rem, 5.1vw, 5rem);
 }
}
@media (min-width: 40rem) and (max-width: 67.999rem) {
 .hero__content {
  max-width: min(36rem, 58vw);
 }
 .hero h1 {
  font-size: clamp(2.8rem, 6vw, 4.25rem);
 }
}
@media (max-width: 39.999rem) {
 .hero__title {
  max-width: 100%;
 }
 .hero__title > span {
  display: block;
 }
}