* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: #ffffff;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Logo: liegt mittig im Hero-Bereich (siehe .logo-wrap weiter unten).
   Die frühere .site-header-Leiste samt statischem Logo ist entfallen – beide
   Seiten nutzen jetzt .logo-badge oben rechts. */
/* Hero-Logo: liegt mittig IM Hero-Bereich (nicht mehr fixed) und scrollt damit
   in normaler Seitengeschwindigkeit weg, während das Bild im Parallax langsamer
   läuft – dadurch die gewollte leichte Verschiebung gegen das Bild. */
.logo-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 294px;
  height: 250px;
  transform: translate(-50%, -50%);
  z-index: 20;
  pointer-events: none;
}

/* Persistente Logo-Marke oben rechts – ersetzt auf der Startseite die
   Header-Leiste. Fährt von rechts ein, sobald Bild + Logo durch sind.
   Figma: node 58:2936 "logo-header" (162x93, Fläche rgba(0,47,177,0.1)). */
/* Logo oben rechts – nur das Logo selbst, ohne Panel, Flaeche, Balken, Glas
   oder Schatten. Schiebt sich von rechts ein. Ersetzt auf der Startseite und
   auf den Profilseiten die fruehere Header-Leiste. */
.logo-badge {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 30;
  display: block;
  line-height: 0;
  /* Glas genau im Logo-Rahmen: das Element ist exakt so gross wie das Logo,
     also deckt der backdrop-filter genau die Rahmenflaeche ab. Ausdruecklich
     KEIN background – kein Farb-Tint. Kein Blur (Frost 0), nur Verzerrung +
     Farbsaum aus #glassDistort. Sichtbar wird das nur ueber Bild oder Text. */
  -webkit-backdrop-filter: url(#glassDistort);
  backdrop-filter: url(#glassDistort);
  transform: translateX(calc(100% + 24px));
  transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Startseite: per JS gesetzt, sobald Hero-Bild + Logo durchgescrollt sind */
.logo-badge.is-in {
  transform: translateX(0);
}

/* Profilseiten: kein Hero zum Wegscrollen, das Logo faehrt direkt beim Laden
   ein (gleiche Bewegung, ohne JS). */
.logo-badge.is-static {
  animation: logo-badge-in 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
}

@keyframes logo-badge-in {
  to {
    transform: translateX(0);
  }
}

.logo-badge-mark {
  /* Verhaeltnis 200/170 exakt gehalten */
  width: 80px;
  height: 68px;
  display: block;
}

.logo-wrap svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Kasten: Kontur zeichnet sich langsam im Uhrzeigersinn, dann blendet die echte gefüllte Version ein */
.logo-box-draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation:
    logo-box-draw 1.8s ease-in-out forwards,
    logo-box-draw-fade 0.35s ease-in 1.65s forwards;
}

.logo-box-fill {
  opacity: 0;
  animation: logo-box-fill-in 0.35s ease-in 1.65s forwards;
}

/* Buchstaben: Typewriter-Effekt, instantes Erscheinen statt Einblenden.
   Sichtbarkeit wird per JS umgeschaltet (siehe main.js), nicht per CSS-Animation. */
.logo-letter {
  opacity: 0;
}

.logo-cursor {
  pointer-events: none;
}

@keyframes logo-box-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes logo-box-draw-fade {
  to {
    opacity: 0;
  }
}

@keyframes logo-box-fill-in {
  to {
    opacity: 1;
  }
}

.hero-image {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* Parallax-Layer: bekommt nur einen leichten Zoom-Puffer per transform (nicht
   per Höhe/Breite), damit object-fit:cover im Bild selbst nicht mit-vergrößert
   wird. Skalierung + Scroll-Versatz werden zusammen per JS gesetzt. */
.hero-image .parallax-inner {
  position: absolute;
  inset: 0;
  transform-origin: center;
  will-change: transform;
}

.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about {
  background: #fbfaf8;
  padding: 10rem 8vw;
}

.about-inner {
  max-width: 640px;
  margin: 0 auto;
}

/* Gemeinsame Größe für alle Section-Headlines, damit sie immer gleich bleiben */
.about-heading,
.practitioners-heading {
  font-family: "Abhaya Libre", serif;
  font-weight: 500;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  color: #002fb1;
  line-height: 1.15;
}

.about-heading {
  margin: 0 0 2rem;
  /* zentriert, damit sie mit .practitioners-heading auf einer Mittelachse sitzt */
  text-align: center;
}

.about-cursor {
  display: inline-block;
  margin-left: 0.05em;
  color: #002fb1;
  opacity: 0;
}

.about-text {
  margin: 0;
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.7;
  color: #002fb1;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.about-text.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.practitioners {
  background: #ffffff;
  padding: 8rem 8vw;
}

.practitioners-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.practitioners-heading {
  margin: 0 0 3rem;
  text-align: center;
}

.practitioner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 440px));
  justify-content: center;
  gap: 2rem;
}

.practitioner-card {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: center;
  background: #fbfaf8;
  border-radius: 12px;
  /* kein Padding: das Bild sitzt randlos oben; overflow clippt es auf den Radius */
  overflow: hidden;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.practitioner-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Blauer Rahmen "baut sich auf" beim Hovern (Diagonal-Reveal per clip-path) */
.practitioner-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid #002fb1;
  border-radius: inherit;
  clip-path: inset(0 100% 100% 0);
  transition: clip-path 0.5s ease;
  pointer-events: none;
}

.practitioner-card:hover::before {
  clip-path: inset(0 0 0 0);
}

/* Randloses Karten-Bild oben, 4:3 wie die gelieferten Crops (800x600) */
.practitioner-photo {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.practitioner-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.practitioner-body {
  padding: 2rem 2rem 2.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.practitioner-card h3 {
  margin: 0;
  font-family: "Abhaya Libre", serif;
  font-weight: 800;
  font-size: 48px;
  line-height: 1.1;
  color: #002fb1;
}

.practitioner-actions {
  /* Die Orte-Zeile zwischen Name und Buttons ist entfallen – der Abstand
     kompensiert sie, damit der Name nicht auf den Buttons klebt. */
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}

.pract-btn {
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0.7rem 1.15rem;
  border-radius: 8px;
  border: 1px solid #002fb1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.pract-btn--solid {
  background: #002fb1;
  color: #ffffff;
}

.pract-btn--solid:hover {
  background: #001f7a;
  border-color: #001f7a;
}

.pract-btn--outline {
  background: transparent;
  color: #002fb1;
}

/* Beim Hovern nur weich antinten, nicht volldeckend blau. 30% statt 50%:
   optisch fast gleich weich, aber die blaue Schrift bleibt mit 5.5:1 klar
   ueber der Lesbarkeitsschwelle (bei 50% waeren es nur 3.5:1). Schrift bleibt
   deshalb blau – weiss wuerde auf dem hellen Ton absaufen. */
.pract-btn--outline:hover {
  background: rgba(0, 47, 177, 0.3);
  color: #002fb1;
}

@media (max-width: 860px) {
  .practitioner-grid {
    grid-template-columns: 1fr;
  }
}

/* Auf kleinen Displays wuerden 48px die Karte sprengen */
@media (max-width: 420px) {
  .practitioner-card h3 {
    font-size: 38px;
  }
}

/* Einzelne Practitioner-Seite (z.B. alessio.html) */
.profile-hero {
  padding: calc(88px + 5rem) 8vw 4rem;
  background: #ffffff;
}

.profile-hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 4rem;
  align-items: center;
}

.profile-hero-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 16px;
  overflow: hidden;
}

.profile-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.profile-hero-info h1 {
  margin: 0 0 1.25rem;
  font-family: "Abhaya Libre", serif;
  /* ExtraBold wie die Namen auf den Startseiten-Karten; Groesse unveraendert */
  font-weight: 800;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  color: #002fb1;
  line-height: 1.15;
}

.profile-hero-info p {
  margin: 0 0 1.75rem;
  font-family: "Nunito", sans-serif;
  font-size: 1.15rem;
  line-height: 1.7;
  color: #002fb1;
}

.hero-cta-button {
  display: inline-block;
  background: #002fb1;
  color: #ffffff;
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  padding: 0.85rem 1.85rem;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.hero-cta-button:hover {
  background: #001f7a;
}

.practical-info {
  background: #fbfaf8;
  padding: 4rem 8vw 5rem;
}

.practical-info-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.practical-info-2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5rem;
}

.info-column {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.practical-block h3 {
  margin: 0 0 1.25rem;
  font-family: "Abhaya Libre", serif;
  font-weight: 800;
  font-size: 24px;
  color: #002fb1;
}

.practical-block p {
  margin: 0 0 1rem;
  font-family: "Nunito", sans-serif;
  font-size: 1.05rem;
  line-height: 1.7;
  color: #002fb1;
}

.practical-block p:last-child {
  margin-bottom: 0;
}

.practical-block a {
  color: #002fb1;
  font-weight: 700;
}

.practical-block a .material-icons {
  font-size: 1.1rem;
  vertical-align: -0.15em;
  margin-right: 0.2rem;
}

.hours-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hours-list li {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(0, 47, 177, 0.15);
  font-family: "Nunito", sans-serif;
  font-size: 1.05rem;
  font-weight: 400;
  color: #002fb1;
}

.hours-list li:first-child {
  padding-top: 0;
}

/* Umschalter fuer mehrere Session-Typen – sitzt INNERHALB des weissen
   Kalender-Rahmens, damit klar ist, dass er dazugehoert (Vili) */
.booking-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(0, 47, 177, 0.15);
  flex-shrink: 0;
}

.booking-tab {
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0.7rem 1.15rem;
  border-radius: 8px;
  border: 1px solid #002fb1;
  background: transparent;
  color: #002fb1;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.booking-tab:hover {
  background: rgba(0, 47, 177, 0.3);
}

.booking-tab.is-active {
  background: #002fb1;
  color: #ffffff;
}

/* Die Panes fuellen den Rest des Rahmens unter den Tabs aus. */
.booking-panes {
  flex: 1;
  min-height: 0;
}

.booking-pane {
  display: none;
  width: 100%;
  height: 100%;
  overflow: scroll;
}

.booking-pane.is-active {
  display: block;
}

/* Platzhalter im Buchungs-Kasten, solange kein Kalender eingebunden ist */
.booking-placeholder {
  margin: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Nunito", sans-serif;
  font-size: 1.05rem;
  color: #002fb1;
}

.hours-list li:last-child {
  border-bottom: none;
}

.hours-list li span:first-child {
  text-align: left;
}

.hours-list li span:nth-child(2) {
  text-align: center;
  white-space: nowrap;
}

.hours-list li span:last-child {
  text-align: right;
  white-space: nowrap;
}

.fees-list {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
}

.fees-list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(0, 47, 177, 0.15);
  font-family: "Nunito", sans-serif;
  font-size: 1.05rem;
  color: #002fb1;
}

.fees-list li:first-child {
  padding-top: 0;
}

/* Schliesst die Liste den Block ab (Vili), keine haengende Trennlinie. Folgt
   noch Text (Alessio: Zahlungsnotiz), bleibt die Linie als Trenner stehen. */
.fees-list:last-child li:last-child {
  border-bottom: none;
}

.fees-list li span:last-child {
  font-weight: 700;
  white-space: nowrap;
}

.fees-note {
  margin: 0 0 1.25rem;
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.7;
  color: #002fb1;
}

.fees-note:last-child {
  margin-bottom: 0;
}

.cancellation-inline {
  margin: 0 0 1.25rem;
}

.cancellation-inline h4 {
  margin: 0 0 0.35rem;
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: #002fb1;
}

.cancellation-inline p {
  margin: 0;
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.6;
  color: #002fb1;
}

.booking-card-wrap {
  max-width: 1100px;
  margin: 4rem auto 0;
}

.booking-card {
  height: 650px;
  background: #ffffff;
  border: 1px solid rgba(0, 47, 177, 0.15);
  border-radius: 12px;
  overflow: hidden;
  font-family: "Nunito", sans-serif;
  color: #6b6560;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
}

/* Variante mit Umschalter im Rahmen: die Tabs brauchen eigene Hoehe, sonst
   wird der Kalender darunter gestaucht und scrollt intern. */
.booking-card--tabbed {
  height: 712px;
}

@media (max-width: 780px) {
  .practical-info-2col {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

.contact-note {
  background: #ffffff;
  padding: 4rem 8vw 6rem;
}

.contact-note-inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.contact-note-inner p {
  margin: 0;
  font-family: "Nunito", sans-serif;
  font-size: 1rem;
  line-height: 1.8;
  color: #002fb1;
}

.contact-note-inner a {
  color: #002fb1;
  font-weight: 700;
}

@media (max-width: 780px) {
  .profile-hero-inner {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .profile-hero-photo {
    max-width: 260px;
  }
}

/* ---------- Mobil ---------- */
@media (max-width: 560px) {
  /* Das Logo oben rechts kollidierte auf schmalen Screens mit Ueberschriften
     und den Buchungs-Tabs. Kleiner und naeher an den Rand. */
  .logo-badge {
    top: 16px;
    right: 16px;
    transform: translateX(calc(100% + 16px));
  }

  .logo-badge-mark {
    width: 60px;
    height: 51px; /* Verhaeltnis 200/170 beibehalten */
  }

  /* Hero-Logo nahm 78% der Bildschirmbreite ein – etwas Luft zum Rand */
  .logo-wrap {
    width: 240px;
    height: 204px;
  }

  /* Die Tabs brechen hier auf mehrere Zeilen um. Feste Kastenhoehe wuerde dem
     Kalender genau diesen Platz wegnehmen – deshalb waechst der Kasten mit und
     der Kalenderbereich behaelt seine volle Hoehe. */
  .booking-card--tabbed {
    height: auto;
  }

  .booking-card--tabbed .booking-panes {
    min-height: 620px;
  }

  .booking-tabs {
    padding: 0.75rem;
    gap: 0.4rem;
  }

  .booking-tab {
    font-size: 0.85rem;
    padding: 0.6rem 0.8rem;
  }

  /* Preiszeilen linksbuendig: zentriert brechen die langen Bezeichnungen um
     und die Zeile wird schwer lesbar. */
  .fees-list {
    text-align: left;
  }
}

/* ---------- Footer ----------
   Bewusst schlicht: Logo, ein paar Links, Copyright. Weiss mit blauer Schrift,
   feine Oberkante als Trennung zum Inhalt darueber. */
.site-footer {
  background: #ffffff;
  border-top: 1px solid rgba(0, 47, 177, 0.15);
  padding: 3rem 8vw;
  font-family: "Nunito", sans-serif;
}

.site-footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem 2.5rem;
}

.footer-logo {
  display: block;
  width: 56px;
  height: 48px;
  flex-shrink: 0;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
}

.footer-links a {
  color: #002fb1;
  text-decoration: none;
  font-size: 0.95rem;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.footer-links a:hover {
  border-bottom-color: #002fb1;
}

/* schiebt das Copyright ans rechte Ende */
.footer-copy {
  margin: 0 0 0 auto;
  font-size: 0.9rem;
  color: rgba(0, 47, 177, 0.65);
}

@media (max-width: 780px) {
  .site-footer-inner {
    flex-direction: column;
    text-align: center;
    gap: 1.5rem;
  }

  .footer-links {
    justify-content: center;
  }

  .footer-copy {
    margin: 0;
  }
}


/* Rechtsseiten (Impressum / Datenschutz) – schlichter Textrahmen */
.legal-page {
  background: #fbfaf8;
  padding: calc(88px + 5rem) 8vw 6rem;
  min-height: 60vh;
}

.legal-page-inner {
  max-width: 640px;
  margin: 0 auto;
}

.legal-page h1 {
  margin: 0 0 1.5rem;
  font-family: "Abhaya Libre", serif;
  font-weight: 800;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  color: #002fb1;
  line-height: 1.15;
}

.legal-page p {
  margin: 0 0 1rem;
  font-family: "Nunito", sans-serif;
  font-size: 1.05rem;
  line-height: 1.7;
  color: #002fb1;
}

.legal-page h2 {
  margin: 2.25rem 0 0.5rem;
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: #002fb1;
}

.legal-intro {
  font-weight: 600;
  opacity: 0.7;
}

.legal-page a {
  color: #002fb1;
  font-weight: 700;
}

/* Offene Stellen deutlich markieren, damit sie nicht versehentlich live gehen */
.legal-todo {
  background: rgba(0, 47, 177, 0.12);
  border-radius: 4px;
  padding: 0 0.35em;
  font-weight: 700;
}

.legal-todo-block {
  margin-top: 2.5rem;
  padding: 1rem 1.25rem;
  border-left: 3px solid #002fb1;
  background: rgba(0, 47, 177, 0.06);
  font-weight: 600;
}

/* Fuer Screenreader und Suchmaschinen sichtbar, visuell nicht */
.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;
}