/*
Theme Name: Southvision Child - Physio Kellner
Template: southvision
Version: 1.2.0
Description: Anpassungen fuer Physiotherapie Claudia Kellner: Schrift wie auf der alten Website (Lato), animierte Wortwolke im Hero. Rueckbaubar durch Loeschen dieses Ordners.
*/

/* Lato 300: die alte Website setzt die meisten Begriffe der Wortwolke in Light.
   Selbst gehostet, kein Aufruf bei Google. */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/lato-300.woff2') format('woff2');
}

/* --- Schrift: die alte Website nutzt durchgehend Lato, auch fuer Ueberschriften --- */
:root {
  --headlineFont: 'Lato', sans-serif !important;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4 {
  font-family: 'Lato', sans-serif;
  letter-spacing: 0;
}

/* --- Hero-Wortwolke (Nachbau des LayerSliders der alten Website) ---
   Wie im Original: das Bild liegt vollbreit dahinter und wird beschnitten,
   die Woerter sitzen auf einer eigenen Buehne im Format 1280:720, die sich
   nach der Hoehe des Heros richtet. Dadurch bleiben sie so gross wie frueher,
   egal wie breit das Fenster ist. */
.pk-hero {
  width: 100%;
  padding: 0;
  margin: 0;
  background: #fdf6ec;
}
.pk-hero__stage {
  position: relative;
  width: 100%;
  /* nie hoeher als die Buehne bei voller Breite, sonst wuerde die Wortwolke verzerren */
  height: min(clamp(264px, 62vh, 720px), 56.25vw);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.pk-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.pk-hero__canvas {
  position: relative;
  height: 100%;
  aspect-ratio: 1280 / 720;
  max-width: 100%;
  container-type: inline-size;
}
.pk-word {
  position: absolute;
  left: var(--l);
  top: var(--t);
  font-family: 'Lato', sans-serif;
  font-size: calc(var(--fs) * 1cqw);
  font-weight: var(--fw, 400);
  color: var(--c, #00376d);
  line-height: 1.1;
  white-space: nowrap;
  opacity: 0;
  transform: rotate(var(--rot, 0deg));
  animation: pk-word-in 1.1s cubic-bezier(.2, .7, .3, 1) forwards;
  animation-delay: calc(var(--d) * 1ms);
  pointer-events: none;
}
@keyframes pk-word-in {
  from {
    opacity: 0;
    transform: rotate(var(--rot, 0deg)) perspective(700px) rotateY(90deg) skewX(20deg);
  }
  to {
    opacity: 1;
    transform: rotate(var(--rot, 0deg));
  }
}
@media (prefers-reduced-motion: reduce) {
  .pk-word { animation: none; opacity: 1; }
}

/* Schmale Fenster: Buehne 30 Prozent hoeher als die volle Bildbreite hergeben wuerde,
   damit Bild und Woerter auf dem Handy nicht zu klein werden. Die Wortbuehne ist dann
   breiter als das Fenster und wird links und rechts leicht beschnitten. */
@media (max-width: 900px) {
  .pk-hero__stage { height: min(clamp(264px, 62vh, 720px), 73vw); }
  .pk-hero__canvas { max-width: none; }
}

/* --- Ueberschriften: Groesse und Abstand (Wunsch Daniel, 25.09.2026) ---
   Theme-Standard war 6,8rem / 5,2rem mit rund 3rem Abstand nach unten. */
:root { --pkH1: 5rem; --pkH2: 4.2rem; }
html body h1, html body .h1 { font-size: var(--pkH1); margin-bottom: 1.8rem; }
html body h2, html body .h2 { font-size: var(--pkH2); margin-bottom: 1.6rem; }
h3, .h3 { margin-bottom: 1.2rem; }
h4, .h4 { margin-bottom: 1rem; }
.subline { margin-bottom: 1.2rem; }
h1 + p, h2 + p, h3 + p, h1 + ul, h2 + ul, h3 + ul { margin-top: 0; }

@media (max-width: 767px) {
  html body h1, html body .h1 { font-size: 32px; margin-bottom: 1.4rem; }
  html body h2, html body .h2 { font-size: 29px; margin-bottom: 1.2rem; }
}

/* Footer: Leistungsliste ohne Links, etwas kompakter */
.footerInner ul { margin: 0; padding-left: 0; }
.footerInner li { margin-bottom: .4rem; }

/* Zahl der Bewertungen neben der Note (Text kommt aus der Theme-Option) */
.footerGoogle { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.footerGoogle::after { content: var(--pkReviewCount, ''); font-size: 1.5rem; opacity: .85; white-space: nowrap; }

/* Sprungmarken stabilisieren (02.10.2026).
   Das Parent-Theme setzt .myAnchor auf position:absolute; top:-15rem. Ein absolut
   positionierter Anker haengt am naechsten positionierten Elternelement und wandert,
   sobald sich darueber etwas aendert (Schriftwechsel, Sticky-Header, nachgeladene Bilder).
   Beim weichen Scrollen landet der Browser dann daneben und korrigiert nach - das sieht
   aus wie Hin- und Herspringen. Hier wird der Anker in den Textfluss zurueckgeholt und der
   gewuenschte Abstand ueber scroll-margin-top erzeugt, den der Browser beim Sprungziel
   selbst beruecksichtigt. */
html body .myAnchor {
  position: static;
  top: auto;
  display: block;
  height: 0;
  scroll-margin-top: 12rem;
}