/* aus kunden/dermatologie/taste/index.html */
:root {
  /* Palette three-stones (Steinboden, gedämpftes Oliv) mit dem Grün des Logos; Grund weiß, Fläche Stein */
  --p-bg: #ffffff; --p-surface: #eeecea; --p-ink: #333231; --p-muted: #625f5b;
  --p-accent: #52700f; --p-accent-ink: #ffffff; --p-action: #52700f; --p-action-ink: #ffffff;
  --p-inv-bg: #2f3a1c; --p-inv-surface: #3a4624; --p-inv-ink: #ffffff; --p-inv-muted: #c9cdbf;
  --p-inv-accent: #b5d36a; --p-inv-accent-ink: #2f3a1c; --p-inv-action: #b5d36a; --p-inv-action-ink: #2f3a1c;
  --font-display: "Red Hat Display", system-ui, sans-serif;
  --font-text: "Red Hat Text", system-ui, sans-serif;
  --display-weight: 400;
  --display-tracking: -0.025em;
  --display-tracking-xl: -0.035em;
  --logo-green: #88af27;                 /* das Grün der Logo-Plakette, nur als Fläche oder Linie, nie für Text */
}

/* ---------- Abschnitte so hoch wie ihr Inhalt (Ablauf: keine Bildschirm-Leerflächen) ---------- */
html { scroll-padding-top: var(--nav); }
html main > :is(section, .section):not(.hero), html footer.closing {
  height: auto; min-height: 0;
  padding: clamp(64px, 7vw, 104px) 0 calc(clamp(64px, 7vw, 104px) + var(--bar));
}
html main > :is(section, .section):not(.hero) > .wrap, html footer.closing > .wrap { height: auto; }

/* ---------- Logo: die grüne Plakette der Praxis, groß ---------- */
.nav__logo img { height: 54px; width: auto; display: block; border-radius: 6px; }
@media (max-width: 639px) { .nav__logo img { height: 42px; } }
.footer__brand img { height: 84px; width: auto; display: block; border-radius: 8px; }

/* ---------- Individuell: die Etagen des Gebäude-Signets als Linienmotiv ---------- */
.floors { display: block; width: var(--floors-w, 120px); height: auto; color: var(--logo-green); margin-bottom: var(--s-5); }
.floors path { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }

/* ---------- Hero: der Empfang, die Worte in der Box auf der ruhigen linken Seite ---------- */
@media (min-width: 1024px) { .hero--photo .hero__text { width: min(560px, calc(50% - var(--gutter) / 2)); } }
.hero--photo h1 { font-size: clamp(40px, 3.8vw + 8px, 64px); line-height: 1.04; max-width: 12ch; }
.hero__who { font-family: var(--font-display); font-size: var(--t-lead); line-height: 1.35; margin: var(--s-5) 0 0; }
.hero__who span { display: block; color: var(--p-muted); font-family: var(--font-text); font-size: var(--t-body); margin-top: var(--s-2); }

/* ---------- Praxis: der Claim und der Brief der Inhaberinnen ---------- */
.claim { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(40px, 4.4vw + 6px, 76px); line-height: 1.02; letter-spacing: var(--display-tracking-xl); }
.claim span { display: block; }
.claim span:nth-child(2) { color: var(--p-accent); }
.letter p { font-size: var(--t-body); line-height: 1.7; }
.letter p + p { margin-top: var(--s-4); }
.letter__sign { font-family: var(--font-display); font-size: var(--t-lead); }
.owners { margin: var(--s-7) 0 0; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 600 / 417; }
.owners img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Leistungen: Bildkarten mit den Fotos der Praxis ---------- */
.svcs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: var(--s-8) 0 0; padding: 0; list-style: none; }
.svc { display: grid; grid-template-rows: auto 1fr; height: 100%; border-radius: var(--r-lg); overflow: hidden; background: var(--p-bg); color: inherit; text-decoration: none; border: 1px solid color-mix(in oklab, var(--p-ink) 8%, transparent); transition: transform .18s ease, border-color .18s ease; }
.svc:hover { transform: translateY(-3px); border-color: var(--p-action); }
.svc:active { transform: translateY(-1px); }
.svc__pic { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: color-mix(in oklab, var(--logo-green) 16%, var(--p-bg)); }
.svc__pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.svc:hover .svc__pic img { transform: scale(1.03); }
.svc__mark { display: grid; place-items: center; height: 100%; }
.svc__mark .floors { --floors-w: 38%; margin: 0; }
.svc__body { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5) var(--s-6) var(--s-6); }
.svc__name { font-family: var(--font-display); font-size: var(--t-h3); line-height: 1.15; }
.svc__desc { color: var(--p-muted); hyphens: auto; overflow-wrap: break-word; }
.svc__go { margin-top: auto; padding-top: var(--s-3); color: var(--p-action); font-weight: 500; }
.svc__go::after { content: " →"; display: inline-block; transition: transform .15s ease; }
.svc:hover .svc__go::after { transform: translateX(3px); }
@media (max-width: 1023px) { .svcs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .svcs { grid-template-columns: minmax(0, 1fr); gap: 12px; } .svc { grid-template-columns: 112px minmax(0, 1fr); grid-template-rows: none; } .svc__pic { aspect-ratio: auto; height: 100%; min-height: 112px; } .svc__body { padding: var(--s-4); } .svc__name { font-size: var(--t-lead); } .svc__go { display: none; } }
@media (prefers-reduced-motion: reduce) { .svc, .svc__pic img, .svc__go::after { transition: none; } .svc:hover, .svc:hover .svc__pic img { transform: none; } }

/* ---------- Team ---------- */
.teamphoto { margin: var(--s-8) 0 0; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 2435 / 1335; }
.teamphoto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6) 48px; margin-top: var(--s-8); }
.people h3 { margin: 0 0 var(--s-3); font: 600 var(--t-small)/1.4 var(--font-text); color: var(--p-muted); }
.people ul { list-style: none; margin: 0; padding: 0; }
.people li { padding: var(--s-2) 0; border-top: 1px solid color-mix(in oklab, var(--p-ink) 10%, transparent); }
.people li strong { display: block; font-weight: 500; }
.people li span { color: var(--p-muted); font-size: var(--t-small); }
@media (max-width: 1023px) { .people { grid-template-columns: 1fr 1fr; } }
@media (max-width: 639px) { .people { grid-template-columns: 1fr; } }

/* ---------- jameda: eine Karte ---------- */
.rating { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-7); margin-top: var(--s-8); padding: var(--s-6) var(--s-7); border-radius: var(--r-lg); border: 1px solid color-mix(in oklab, var(--p-ink) 12%, transparent); color: inherit; text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.rating:hover { border-color: var(--p-action); transform: translateY(-2px); }
.rating img { height: 44px; width: auto; }
.rating__stars { color: var(--logo-green); font-size: 22px; letter-spacing: 2px; }
.rating__part { opacity: .35; }
.rating__score { font-family: var(--font-display); font-size: var(--t-h3); }
.rating__count { color: var(--p-muted); }
.rating .link { margin-left: auto; }
@media (max-width: 639px) { .rating .link { margin-left: 0; } }

/* ---------- Sprechzeiten und Formular ---------- */
.hours dd { font-variant-numeric: tabular-nums; }
a[href^="tel:"] { white-space: nowrap; }
.visit__address { font-style: normal; margin-top: var(--s-6); line-height: 1.6; font-size: var(--t-body); }
.contact-form > h3, .contact-form > .btn-row, .contact-form > p { grid-column: 1 / -1; }
.contact-form { background: var(--p-bg); border-radius: var(--r-lg); padding: clamp(24px, 4vw, 48px); }
.contact-form textarea { min-height: 128px; resize: vertical; }
.contact-form .field:has(textarea) { grid-column: 1 / -1; }
.contact-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.booking { margin-top: var(--s-6); padding: var(--s-5); border-radius: var(--r-md); background: var(--p-bg); }
.booking p { margin: 0 0 var(--s-4); }