/* Mini-Reset (entspricht dem früheren Tailwind-Preflight) */
@layer base{
*,::after,::before{box-sizing:border-box;margin:0;padding:0;border:0 solid}
html{line-height:1.5;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";-webkit-text-size-adjust:100%;tab-size:4;-webkit-tap-highlight-color:transparent}
hr{height:0;color:inherit;border-top-width:1px}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}
a{color:inherit;text-decoration:inherit}
b,strong{font-weight:bolder}
small{font-size:80%}
img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}
img,video{max-width:100%;height:auto}
button,input,select,optgroup,textarea{font:inherit;letter-spacing:inherit;color:inherit;border-radius:0;background-color:transparent;opacity:1}
ol,ul,menu{list-style:none}
summary{display:list-item}
/*
 * Design philosophy: "Behutsame Bewegung" — editorialer Humanismus für eine moderne Familienpraxis.
 * Warmes Elfenbein, Anthrazit und Original-Bordeaux #991838 tragen Ruhe, Orientierung und Nähe.
 */

@font-face {
  font-family: "DM Serif Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/dm-serif-display-regular.woff2") format("woff2");
}

@font-face {
  font-family: "DM Serif Display";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/dm-serif-display-italic.woff2") format("woff2");
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/manrope-400.woff2") format("woff2");
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/manrope-400.woff2") format("woff2");
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/manrope-700.woff2") format("woff2");
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/manrope-700.woff2") format("woff2");
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("assets/fonts/manrope-800.woff2") format("woff2");
}



:root {
  --background: oklch(0.984 0.008 90);
  --foreground: oklch(0.257 0.012 264);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.257 0.012 264);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.257 0.012 264);
  --primary: #991838;
  --primary-foreground: oklch(1 0 0);
  --secondary: #f3efea;
  --secondary-foreground: oklch(0.257 0.012 264);
  --muted: #f4f0eb;
  --muted-foreground: oklch(0.49 0.014 260);
  --accent: #991838;
  --accent-foreground: oklch(1 0 0);
  --border: #dfdad4;
  --input: #dfdad4;
  --ring: #991838;
  --radius: 1.2rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--background); color: var(--foreground); font-family: "Manrope", Arial, sans-serif; }
button, input, textarea, select { font: inherit; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; }

* { border-color: var(--border); outline-color: color-mix(in oklab, var(--ring) 50%, transparent); }
button:not(:disabled), a[href], summary { cursor: pointer; }

.page-shell { overflow: hidden; }
.serif { font-family: "DM Serif Display", Georgia, serif; }
.eyebrow { color: #991838; font-size: 0.69rem; font-weight: 800; letter-spacing: 0.17em; text-transform: uppercase; }
.section { margin-inline: auto; max-width: 1240px; padding: 4.9rem 1.35rem; }
.section-title { max-width: 720px; font-family: "DM Serif Display", Georgia, serif; font-size: clamp(2.35rem, 5.2vw, 4.8rem); font-weight: 400; letter-spacing: -0.042em; line-height: 0.98; }
.section-copy { max-width: 600px; color: #4e5560; font-size: 1rem; line-height: 1.8; }
.motion-line { background: #991838; height: 1px; opacity: 0.72; }
.section-path { align-items: center; display: flex; gap: 0.65rem; margin-bottom: 1.25rem; max-width: 230px; }
.path-number { color: #991838; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.14em; line-height: 1; }
.section-path .path-squares { display: grid; gap: 2px; grid-template-columns: repeat(3, 5px); transform: translateY(1px); }
.section-path .path-squares i { background: #a9a9ab; display: block; height: 5px; width: 5px; }
.section-path .path-squares i:nth-child(2) { background: #991838; margin-top: -4px; }
.section-path .path-squares i:nth-child(3) { background: #2a303b; margin-top: 4px; }
.section-path svg { height: 14px; overflow: visible; width: 135px; }
.section-path path { fill: none; stroke: #991838; stroke-linecap: round; stroke-width: 1.2; }

.site-header { align-items: center; background: rgb(251 249 243 / 0.91); border-bottom: 1px solid rgb(42 48 59 / 0.08); display: flex; justify-content: space-between; padding: 0.76rem 1.1rem; position: sticky; top: 0; z-index: 30; backdrop-filter: blur(14px); }
.header-brand { align-items: center; display: flex; min-width: 0; text-decoration: none; color: inherit; }
.header-brand .practice-logo { height: 48px; object-fit: contain; width: 84px; }
.desktop-nav { display: none; }
.header-cta, .primary-button, .secondary-button { align-items: center; border: 0; display: inline-flex; font-size: 0.72rem; font-weight: 800; gap: 0.45rem; justify-content: center; letter-spacing: 0.045em; text-decoration: none; text-transform: uppercase; transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), background-color 160ms ease; }
.header-cta { background: #991838; color: white; padding: 0.76rem 0.78rem; white-space: nowrap; }
.primary-button { background: #991838; color: white; min-height: 3.55rem; padding: 0.9rem 1.15rem; }
.secondary-button { background: transparent; border: 1px solid rgb(42 48 59 / 0.22); color: #2a303b; min-height: 3.55rem; padding: 0.9rem 1.15rem; }
.header-cta:hover, .primary-button:hover { background: #991838; transform: translateY(-2px); }
.secondary-button:hover { border-color: #2a303b; transform: translateY(-2px); }
.header-cta:active, .primary-button:active, .secondary-button:active { transform: scale(0.97); }

.hero { background: #f1eee8; min-height: 720px; position: relative; }
.hero-visual { aspect-ratio: 3 / 2; height: auto; overflow: hidden; position: relative; }
.hero-visual img { height: 100%; object-fit: contain; object-position: center; width: 100%; }
.draft-tag { align-items: center; backdrop-filter: blur(10px); background: rgb(31 38 38 / 0.7); color: white; display: inline-flex; font-size: 0.6rem; font-weight: 700; gap: 0.35rem; left: 1rem; letter-spacing: 0.08em; padding: 0.45rem 0.56rem; position: absolute; text-transform: uppercase; top: 1rem; z-index: 1; }
.hero-copy { padding: 2.2rem 1.35rem 3.25rem; position: relative; }
.hero-copy::before { background: #991838; content: ""; height: 108px; left: 0; position: absolute; top: -42px; width: 8px; }
.hero-kicker { color: #991838; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; }
.hero h1 { font-family: "DM Serif Display", Georgia, serif; font-size: clamp(2.65rem, 11.2vw, 6.5rem); font-weight: 400; letter-spacing: -0.055em; line-height: 0.89; margin: 0.75rem 0 1.25rem; max-width: 740px; }
.hero h1 span { color: #991838; display: block; font-family: "Manrope", Arial, sans-serif; font-size: clamp(1.18rem, 4.4vw, 2.25rem); font-weight: 800; letter-spacing: -0.045em; line-height: 1.08; margin-top: 0.7rem; }
.hero p { color: #454c57; font-size: 0.98rem; line-height: 1.75; margin: 0; max-width: 590px; }
.hero-actions { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 1.55rem; }

.reassurance { background: #f7f4ef; border-bottom: 1px solid #dfdad4; color: #2a303b; }
.reassurance-inner { display: grid; gap: 1.8rem; margin: auto; max-width: 1240px; padding: 1.65rem 1.35rem; }
.reassurance-item { align-items: flex-start; display: flex; gap: 0.85rem; }
.reassurance-item svg { color: #991838; flex: none; margin-top: 0.13rem; }
.reassurance-item strong { display: block; font-size: 0.84rem; letter-spacing: -0.02em; }
.reassurance-item span { color: #5b6169; display: block; font-size: 0.72rem; line-height: 1.55; margin-top: 0.2rem; }

.age-stage { background: white; }
.age-intro { display: grid; gap: 1.75rem; }
.age-visual { min-height: 330px; overflow: hidden; position: relative; }
.age-visual img { height: 100%; object-fit: cover; object-position: center; position: absolute; width: 100%; }
.age-visual--baby { aspect-ratio: 4 / 3; background: #f4f0eb; min-height: 0; }
.age-visual--baby img { object-fit: contain; }
.age-steps { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 1.8rem; }
.age-step { border-top: 1px solid #dfdad4; color: #2a303b; font-size: 0.73rem; font-weight: 800; padding: 0.9rem 0.2rem; }
.age-step:nth-child(odd) { padding-right: 0.6rem; }
.age-step:nth-child(even) { padding-left: 0.6rem; }
.age-step span { color: #991838; display: block; font-size: 0.59rem; font-weight: 700; letter-spacing: 0.13em; margin-bottom: 0.25rem; text-transform: uppercase; }

.daily-section { background: #f6f3ee; }
.daily-grid { display: grid; gap: 2rem; }
.word-cloud { align-content: start; display: flex; flex-wrap: wrap; gap: 0.56rem; }
.word-cloud span { background: white; border: 1px solid #dfdad4; color: #2a303b; font-size: 0.76rem; font-weight: 700; padding: 0.58rem 0.76rem; }
.word-cloud span:nth-child(3n), .word-cloud span:nth-child(4n) { background: #f9f7f3; border-color: #dfdad4; }
.daily-note { border-left: 3px solid #991838; color: #505861; font-size: 0.98rem; line-height: 1.76; margin-top: 1.75rem; padding-left: 1.05rem; }

.nervous-section { background: #2b3036; color: white; }
.nervous-section .eyebrow { color: #ead7dc; }
.nervous-section .section-copy { color: #e0e3e2; }
.nervous-section .path-number { color: #ead7dc; }
.nerve-layout { display: block; max-width: 800px; }
.nervous-followup { border-left: 2px solid #991838; color: #e0e3e2; font-size: 1rem; line-height: 1.8; margin: 1.5rem 0 0; max-width: 645px; padding-left: 1rem; }

.gentle-section { background: white; }
.gentle-grid { display: grid; gap: 1.4rem; margin-top: 2.45rem; }
.gentle-card { background: transparent; border-top: 1px solid #dfdad4; padding: 1.2rem 0 0; }
.gentle-card:nth-child(2), .gentle-card:nth-child(3) { border-color: #dfdad4; }
.gentle-card h3 { font-family: "DM Serif Display", Georgia, serif; font-size: 1.52rem; font-weight: 400; margin: 0 0 0.4rem; }
.gentle-card p { color: #545b64; font-size: 0.83rem; line-height: 1.65; margin: 0; }

.faq-section { background: #f3f0eb; }
.faq-list { display: grid; gap: 0.68rem; margin-top: 2.1rem; }
.faq-item { background: transparent; border-top: 1px solid #dfdad4; }
.faq-item summary { align-items: center; display: flex; font-size: 0.92rem; font-weight: 800; justify-content: space-between; list-style: none; padding: 1.15rem 0.15rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary svg { color: #991838; flex: none; transition: transform 180ms ease; }
.faq-item[open] summary svg { transform: rotate(45deg); }
.faq-answer { color: #505863; font-size: 0.86rem; line-height: 1.7; padding: 0 0.15rem 1.2rem; }

.visit-section { background: #fdfcf8; }
.visit-grid { display: grid; margin-top: 2rem; }
.visit-step { border-top: 1px solid #dfdad4; display: grid; gap: 0.78rem; padding: 1.35rem 0; position: relative; }
.visit-step::before { background: #991838; content: ""; height: 4px; left: 0; position: absolute; top: -2px; width: 17px; }
.visit-number { color: #991838; font-size: 0.76rem; font-weight: 800; letter-spacing: 0.1em; }
.visit-step h3 { font-family: "DM Serif Display", Georgia, serif; font-size: 1.55rem; font-weight: 400; margin: 0; }
.visit-step p { color: #59616a; font-size: 0.82rem; line-height: 1.65; margin: 0; max-width: 450px; }

.people-section { background: #f5f2ed; }
.people-grid { display: grid; gap: 1rem; margin-top: 2.15rem; }
.person-card { background: white; }
.person-photo { height: 295px; overflow: hidden; position: relative; }
.person-photo img { height: 100%; object-fit: cover; width: 100%; }
.person-card:nth-child(2) .person-photo img { object-position: center 25%; }
.sharaf-collage-crop { background-image: url("assets/images/sharaf-1536.webp"); background-position: 100% 0%; background-repeat: no-repeat; background-size: 300% auto; height: 100%; width: 100%; }
.person-content { padding: 1.25rem; }
.person-content h3 { font-family: "DM Serif Display", Georgia, serif; font-size: 1.7rem; font-weight: 400; margin: 0; }
.person-role { color: #991838; font-size: 0.68rem; font-weight: 800; line-height: 1.45; margin-top: 0.45rem; text-transform: uppercase; }
.person-subrole { color: #62676b; display: block; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.08em; margin-top: 0.18rem; }
.person-content p { color: #545c64; font-size: 0.82rem; line-height: 1.68; margin: 0.75rem 0 0; }

.family-section { background: #f0ece7; color: #2a303b; position: relative; }
.family-section::before { background: #991838; content: ""; height: 3px; left: 1.35rem; pointer-events: none; position: absolute; top: 2.7rem; width: 32px; }
.family-inner { margin: auto; max-width: 1240px; padding: 4.5rem 1.35rem; position: relative; }
.family-inner .eyebrow { color: #991838; }
.family-inner h2 { font-family: "DM Serif Display", Georgia, serif; font-size: clamp(2.3rem, 6vw, 4.5rem); font-weight: 400; letter-spacing: -0.04em; line-height: 0.96; margin: 0.75rem 0 1.1rem; max-width: 630px; }
.family-inner p { color: #545c64; font-size: 0.96rem; line-height: 1.75; max-width: 580px; }

.final-cta { background: #263136; color: white; position: relative; }
.final-cta .path-number { color: #ead7dc; }
.final-cta::before { background: #991838; content: ""; height: 100%; left: 0; position: absolute; top: 0; width: 9px; }
.final-inner { display: grid; gap: 1.7rem; margin: auto; max-width: 1240px; padding: 5rem 1.35rem; }
.final-inner h2 { font-family: "DM Serif Display", Georgia, serif; font-size: clamp(2.25rem, 5.8vw, 5rem); font-weight: 400; letter-spacing: -0.045em; line-height: 0.98; margin: 0; max-width: 800px; }
.final-inner p { color: #dce6e4; font-size: 0.98rem; line-height: 1.75; max-width: 590px; margin: 0; }
.final-cta .primary-button { background: #991838; color: white; justify-self: start; }
.final-cta .primary-button:hover { background: #991838; }
.final-note { color: #c9d2d1; font-size: 0.7rem; line-height: 1.6; }
.contact-actions { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 1.35rem; }
.final-cta .secondary-button { border-color: rgb(255 255 255 / 0.42); color: white; }
.final-cta .secondary-button:hover { border-color: white; }
.whatsapp-icon { color: #25d366; flex: none; height: 1rem; width: 1rem; }
.whatsapp-note { color: #c9d2d1 !important; font-size: 0.7rem !important; line-height: 1.6 !important; margin-top: 0.9rem !important; }

.site-footer { background: #20272f; color: white; padding: 2.6rem 1.35rem 1.9rem; }
.footer-inner { display: grid; gap: 2.1rem; margin: auto; max-width: 1240px; }
.footer-logo { align-items: center; display: flex; gap: 0.7rem; }
.footer-logo img { background: white; height: 53px; object-fit: contain; padding: 0.35rem; width: 92px; }
.footer-logo span { font-size: 0.75rem; font-weight: 700; line-height: 1.35; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem; }
.footer-links a { color: #e3e1e1; font-size: 0.72rem; text-decoration: none; }
.footer-links a:hover { color: white; text-decoration: underline; }
.footer-small { border-top: 1px solid rgb(255 255 255 / 0.14); color: #bdc5c8; font-size: 0.65rem; line-height: 1.7; padding-top: 1.15rem; }


@media (min-width: 700px) {
  .site-header { padding: 0.84rem 2rem; }
  .header-brand .practice-logo { height: 52px; width: 91px; }
  .hero { align-items: stretch; display: grid; grid-template-columns: minmax(0, 1fr) minmax(460px, 1.06fr); min-height: 720px; }
  .hero-visual { align-self: start; grid-column: 2; height: auto; margin-top: 4.8rem; min-height: 0; order: 2; width: 100%; }
  .hero-copy { align-self: center; padding: 5rem 2.6rem 5rem max(2.6rem, calc((100vw - 1240px) / 2)); }
  .hero-copy::before { height: 152px; top: 13%; }
  .hero-actions { align-items: center; flex-direction: row; }
  .hero-actions .primary-button { min-width: 290px; }
  .reassurance-inner { grid-template-columns: repeat(3, 1fr); padding-inline: 2rem; }
  .section { padding: 7rem 2rem; }
  .age-intro { grid-template-columns: 0.85fr 1.15fr; align-items: start; }
  .age-visual { min-height: 490px; }
  .age-visual--baby { min-height: 0; }
  .daily-grid { grid-template-columns: 0.95fr 1.05fr; align-items: start; }
  .gentle-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .faq-list { grid-template-columns: repeat(2, 1fr); column-gap: 2.5rem; row-gap: 0; }
  .visit-grid { grid-template-columns: repeat(5, 1fr); gap: 1.3rem; }
  .visit-step { display: block; min-height: 260px; padding-top: 1.1rem; }
  .visit-step h3 { margin: 1.25rem 0 0.8rem; }
  .people-grid { grid-template-columns: 1fr 1fr; }
  .family-inner, .final-inner { padding-inline: 2rem; }
  .family-section::before { left: 2rem; }
  .final-inner { grid-template-columns: 1.2fr 0.8fr; align-items: end; }
  .contact-actions { flex-direction: row; flex-wrap: wrap; }
  .site-footer { padding-inline: 2rem; }
  .footer-inner { grid-template-columns: 1fr auto; align-items: start; }
  .footer-small { grid-column: 1 / -1; }
}

@media (min-width: 1000px) {
  .desktop-nav { display: flex; gap: 1.15rem; }
  .desktop-nav a { color: #3f4751; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.035em; text-decoration: none; text-transform: uppercase; }
  .desktop-nav a:hover { color: #991838; }
  .header-cta { padding: 0.78rem 1rem; }
  .header-brand .brand-name { display: none; }
  .hero-copy { padding-right: 4.5rem; }
  .section { padding-top: 8rem; padding-bottom: 8rem; }
  .person-photo { height: 260px; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: rise-in 600ms cubic-bezier(0.23, 1, 0.32, 1) both; }
  .hero-copy > :nth-child(2) { animation-delay: 70ms; }
  .hero-copy > :nth-child(3) { animation-delay: 120ms; }
  .hero-copy > :nth-child(4) { animation-delay: 170ms; }
  @keyframes rise-in { from { opacity: 0; transform: translateY(13px); } to { opacity: 1; transform: translateY(0); } }
}


/* Portable additions: locally supplied responsive media and review block. */
picture { display: contents; }
.hero-followup { margin-top: 0.7rem !important; }
.google-reviews { display: grid; gap: 0.32rem; margin-top: 1rem; max-width: 590px; }
.google-reviews a { align-items: center; color: #454c57; display: inline-flex; font-size: 0.72rem; font-weight: 700; gap: 0.45rem; text-decoration: none; width: fit-content; }
.google-reviews a:hover { color: #991838; text-decoration: underline; }
.google-stars { color: #991838; font-size: 0.86rem; letter-spacing: 0.08em; }
.google-review-cta { color: #991838 !important; font-size: 0.68rem !important; font-weight: 800 !important; letter-spacing: 0.035em; margin-top: 0.1rem; text-transform: uppercase; }
.final-eyebrow { color: #ead7dc !important; }
.not-found { margin: 5rem auto; max-width: 700px; padding: 0 1.35rem; }
.not-found h1 { font-family: "DM Serif Display", Georgia, serif; font-weight: 400; }
.not-found a { color: #991838; font-weight: 700; }

/* --- Umbau auf statisches HTML: Icons --- */
.icon{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}