/* Schwan Dental – Seite „aus einem Guss“ (Testfassung 12.11.2026): Startbild mit großem Logo, das beim Scrollen
   verschwimmt; Kopfzeile mit Logo in der Mitte; alle Abschnitte mittig mit gleichem Aufbau. Ergänzt stil.css.
   Gilt nur mit body.mit-intro (Startseite) bzw. body.neu (Unterseiten). */

/* ---------- Kopfzeile: Logo mittig, links Leistungen/Ablauf, rechts Kontakt ---------- */
body.neu header { position: fixed; top: 0; left: 0; right: 0; z-index: 10; background: rgba(255,255,255,.96);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
/* minmax(0, 1fr): sonst drückt die Linkbreite das Logo auf schmalen Handys aus der Mitte (iPhone 12.11.2026) */
body.neu header .breite { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; }
body.neu header nav { display: flex; align-items: center; }
body.neu header nav.links { justify-self: start; }
body.neu header nav.rechts { justify-self: end; }
body.neu header nav a { margin: 0 28px 0 0; }
body.neu header nav.rechts a { margin: 0 0 0 28px; }
body.neu header .brief { display: none; border: 0; color: var(--grau); }
body.neu header .brief svg { display: block; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.2; }
body.neu main, body.neu .recht { padding-top: 84px; }

/* Startseite: Kopfzeile erst nach dem Startbild */
body.mit-intro header { transform: translateY(-100%); opacity: 0; transition: transform .45s ease, opacity .45s ease; }
body.mit-intro header.sichtbar { transform: none; opacity: 1; }
body.neu section, body.neu .held { scroll-margin-top: 84px; }

/* ---------- Startbild ---------- */
.intro { position: sticky; top: 0; z-index: 0; height: 100vh; height: 100svh; display: flex; align-items: center;
  justify-content: center; text-align: center; overflow: hidden; }
.intro .innen { will-change: opacity, transform, filter; }
.intro .gross { width: min(78vw, 560px); height: auto; display: block; margin: 0 auto; }
/* Punkt genau unter der Zahnmitte des Logos: der Zahn liegt bei 52,59 % der Logobreite (vermessen 12.11.2026) */
.intro .ort { position: relative; width: min(78vw, 560px); height: 1.4em; margin: 28px auto 0; font-size: 13px;
  letter-spacing: 4px; text-transform: uppercase; color: var(--gold); white-space: nowrap; }
.intro .ort span { position: absolute; top: 0; }
.intro .ort .l { right: calc(47.41% + 14px); margin-right: -4px; }  /* -4px: Laufweite nach dem letzten Buchstaben */
.intro .ort .p { left: 52.59%; transform: translateX(-50%); letter-spacing: 0; }
.intro .ort .r { left: calc(52.59% + 14px); }
.intro .pfeil { position: absolute; left: 50%; bottom: 34px; width: 28px; height: 28px; margin-left: -14px; border: 0; }
.intro .pfeil svg { display: block; width: 28px; height: 28px; stroke: var(--grau); fill: none; stroke-width: 1.2;
  animation: wippen 2.2s ease-in-out infinite; }
@keyframes wippen { 0%, 100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(7px); opacity: 1; } }

/* Inhalt gleitet über das Startbild */
body.mit-intro .held, body.mit-intro section, body.mit-intro footer, body.mit-intro .schluss { position: relative; z-index: 1; }
body.mit-intro .held { background: linear-gradient(to bottom, rgba(255,255,255,0) 0, var(--weiss) 140px);
  padding: 190px 0 110px; margin-top: -60px; }
body.neu footer, body.neu .schluss { background: var(--weiss); }

/* ---------- Gleicher Aufbau für alle Abschnitte: mittig, Stichwort, goldene Linie, Überschrift ---------- */
body.neu .held, body.neu section { text-align: center; }
body.neu .held h1 { margin: 0 auto 22px; max-width: 760px; }
body.neu .held p { margin: 0 auto; }
body.neu h2 { margin-bottom: 16px; }
body.neu h2::after { content: ""; display: block; width: 36px; height: 1px; background: var(--gold); margin: 16px auto 0; }
body.neu .titel { margin: 0 auto 48px; }
body.neu .kacheln, body.neu .zwei, body.neu .kontakt { text-align: left; }
body.neu .kontakt { text-align: center; }
body.neu .kontakt div { border-top-color: var(--hell); }
body.neu .hinweis { text-align: center; }

/* Abschnitte blenden beim Erreichen sanft ein – nur der Inhalt, der Hintergrund deckt das Startbild immer ab */
/* gleiche Bildsprache wie das Startbild: Inhalt kommt aus der Unschärfe (Nutzer 12.11.2026) */
.einblenden > .breite { opacity: 0; transform: translateY(18px); filter: blur(8px);
  transition: opacity 1s ease, transform 1s ease, filter 1s ease; }
.einblenden.da > .breite { opacity: 1; transform: none; filter: blur(0); }

/* ---------- Feine Details (Nutzer 12.11.2026) ---------- */
/* 1. die goldene Linie unter der Überschrift zieht sich von der Mitte nach außen auf */
.einblenden h2::after { transform: scaleX(0); transition: transform .7s cubic-bezier(.2,.7,.2,1) .35s; }
.einblenden.da h2::after { transform: scaleX(1); }
/* 2. Stichpunkte der Kacheln erscheinen kurz nacheinander */
.einblenden .kachel li { opacity: 0; transform: translateY(6px); transition: opacity .5s ease, transform .5s ease; }
.einblenden.da .kachel li { opacity: 1; transform: none; }
.einblenden.da .kachel li:nth-child(1) { transition-delay: .55s; }
.einblenden.da .kachel li:nth-child(2) { transition-delay: .65s; }
.einblenden.da .kachel li:nth-child(3) { transition-delay: .75s; }
.einblenden.da .kachel li:nth-child(4) { transition-delay: .85s; }
.einblenden.da .kachel li:nth-child(5) { transition-delay: .95s; }
/* 3. Kacheln heben sich am PC unter der Maus leicht an, Rand wird zart gold */
@media (hover: hover) and (pointer: fine) {
  body.neu .kachel { transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; }
  body.neu .kachel:hover { transform: translateY(-4px); border-color: rgba(184,149,90,.55);
    box-shadow: 0 14px 32px -18px rgba(36,39,43,.25); }
}

/* ---------- Abschluss: Logo klein und mittig über der Fußzeile ---------- */
.schluss { padding: 70px 0 36px; text-align: center; }
.schluss img { width: 190px; height: auto; opacity: .85; }
body.neu footer { border-top: 1px solid var(--hell); }
body.neu footer .breite { justify-content: center; text-align: center; flex-direction: column; align-items: center; gap: 8px; }
body.neu footer a { margin: 0 11px; }

/* ---------- Unterseiten (Impressum, Datenschutz) im gleichen Stil ---------- */
body.neu .recht { padding-top: 150px; }
body.neu .recht .breite { max-width: 820px; }
body.neu .recht h1 { text-align: center; }
body.neu .recht h1::after { content: ""; display: block; width: 36px; height: 1px; background: var(--gold); margin: 22px auto 0; }
body.neu .recht h2::after { display: none; }

/* ---------- Handy ---------- */
@media (max-width: 760px) {
  body.neu header nav.links a { display: none; }
  body.neu header nav.rechts a.text { display: none; }
  body.neu header .brief { display: block; margin: 0; padding: 6px; color: var(--dunkel); }
  body.neu header .logo img { height: 22px; }
  body.neu section, body.neu .held { scroll-margin-top: 68px; }
  body.mit-intro .held { padding: 150px 0 72px; }
  /* Handy: Gedankenstrich bleibt am „gefertigt“ (geschütztes Leerzeichen im HTML); Überschrift passt auch auf
     kleine iPhones in drei Zeilen (Aufnahme 12.11.2026) */
  body.neu .held h1 { font-size: clamp(26px, 7.6vw, 31px); }
  body.neu .titel { margin-bottom: 32px; }
  body.neu .recht { padding-top: 110px; }
  .intro .gross { width: 84vw; }
  .intro .ort { width: 84vw; font-size: 12px; letter-spacing: 3px; }
  .intro .ort .l { right: calc(47.41% + 11px); margin-right: -3px; }
  .intro .ort .r { left: calc(52.59% + 11px); }
  .schluss img { width: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  .intro .pfeil svg { animation: none; }
  .einblenden > .breite { opacity: 1; transform: none; filter: none; transition: none; }
  .einblenden h2::after, .einblenden .kachel li { transform: none; opacity: 1; transition: none; }
  body.neu .kachel, body.neu .kachel:hover { transition: none; transform: none; }
  body.mit-intro header { transition: none; }
}