/* =============================================================================
   assets/css/pages/about.css — Seite „Über mich" (views/about.php)

   Wird nach base.css, layout.css und components.css geladen und ergaenzt diese
   nur dort, wo die Seite eine eigene Anordnung braucht. Alle Klassen dieser
   Datei tragen das Praefix .about; gemeinsame Bausteine (.timeline, .badgeRow,
   .card, .listCheck, .ctaBand) bleiben unveraendert.
   Farben, Abstaende und Kurven stammen ausschliesslich aus den Tokens.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. Auftakt — Portraet im Blob, persoenlicher Text daneben
   -------------------------------------------------------------------------- */
.aboutHero{
  overflow:hidden;                       /* haelt die Deko-Blobs in der Sektion */
  padding-bottom:clamp(3.5rem,8vw,7rem);
}

.aboutHero__grid{
  display:grid;
  gap:clamp(2.25rem,6vw,4.5rem);
  align-items:center;
}

@media (min-width:900px){
  .aboutHero__grid{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr)}
}

.aboutHero__text{
  display:grid;
  justify-items:start;
  gap:var(--s5);
}

.aboutHero__text > *{margin:0}
.aboutHero__text h1{max-width:15ch}

/* Namenszug am Ende des persoenlichen Textes: aufrecht, in Praxisrot. */
.aboutSign{
  font-family:var(--font-display);
  font-weight:500;
  font-size:var(--fs-lg);
  line-height:var(--lh-snug);
  color:var(--clay-800);
}

.aboutHero__visual{position:relative}

/* Das Portraet sitzt in einer weichen Form, die langsam wandert. */
.aboutPortrait{
  position:relative;
  margin:0;
  aspect-ratio:4 / 3;
  overflow:hidden;
  border-radius:var(--blob-a);
  background-color:var(--sand-3);
  box-shadow:var(--sh-lg);
  animation:blobMorph 18s linear infinite alternate;
}

.aboutPortrait__img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:38% center;            /* Katharina steht links der Bildmitte */
  transform:scale(1.06);                 /* keine hellen Kanten in der Blobform */
}

/* Schwebende Notiz ueber dem Portraet: seit wann es die Praxis gibt. */
.aboutHeroCard{
  position:absolute;
  inset-inline-start:-.75rem;
  bottom:clamp(.5rem,3vw,1.75rem);
  z-index:1;
  display:grid;
  gap:.1rem;
  max-width:min(17rem,78%);
  margin:0;
  padding:.85rem 1.25rem;
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  background-color:var(--paper);
  box-shadow:var(--sh-lg);
  animation:floatSoft 7s var(--ease-soft) infinite alternate;
}

.aboutHeroCard__num{
  font-family:var(--font-display);
  font-size:var(--fs-h4);
  font-weight:600;
  line-height:1.1;
  letter-spacing:var(--ls-tight);
  color:var(--clay-700);
  font-variant-numeric:lining-nums;
}

.aboutHeroCard__label{
  font-family:var(--font-sans);
  font-size:var(--fs-2xs);
  font-weight:600;
  letter-spacing:var(--ls-wide);
  line-height:1.4;
  text-transform:uppercase;
  color:var(--ink-soft);
}

@media (max-width:559px){
  .aboutHeroCard{
    inset-inline-start:0;
    max-width:min(17rem,88%);
  }
}


/* -----------------------------------------------------------------------------
   2. Werdegang — Zeitstrahl und Qualifikationen
   -------------------------------------------------------------------------- */
/* Der Zeitstrahl bleibt auf breiten Schirmen lesbar schmal. */
.aboutPath .timeline{max-width:70ch}

.aboutPath__credentials{margin-top:clamp(.5rem,2vw,1.5rem)}

.aboutPath__credTitle{
  margin:0 0 var(--s4);
  font-family:var(--font-display);
  font-size:var(--fs-h4);
  font-weight:600;
  line-height:var(--lh-snug);
  letter-spacing:var(--ls-tight);
  color:var(--ink);
}

.aboutPath__badges{gap:var(--s3)}


/* -----------------------------------------------------------------------------
   3. Praxis — drei echte Aufnahmen im versetzten Raster
   -------------------------------------------------------------------------- */
.aboutPraxis .sectionHead{max-width:54ch}

.aboutPraxis__gallery{align-items:start}

.aboutPraxis__stack{
  display:grid;
  gap:clamp(1.25rem,3vw,2.25rem);
  align-content:start;
}

.aboutPhoto{margin:0}

/* Die Seitenverhaeltnisse folgen den Originaldateien, damit nichts beschnitten
   wird: das Raumfoto ist hochkant, die beiden Wandmotive sind breit. */
.aboutPhoto--tall .card__media{--ar:2 / 3}
.aboutPhoto--wide .card__media{--ar:16 / 7}

@media (min-width:680px){
  .aboutPraxis__gallery{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)}
}

@media (max-width:679px){
  .aboutPhoto--tall .card__media{--ar:3 / 4}
  .aboutPhoto--wide .card__media{--ar:16 / 9}
}


/* -----------------------------------------------------------------------------
   4. Haltung — ruhige Salbeiflaeche
   -------------------------------------------------------------------------- */
.aboutStance .prose{max-width:54ch}

.aboutStance__grid{
  align-items:start;
  gap:clamp(2rem,5vw,3.5rem);
}

.aboutStance__intro{
  display:grid;
  align-content:start;
  gap:var(--s4);
}

.aboutStance__intro > *{margin:0}

.aboutStance__side{
  display:grid;
  align-content:start;
  justify-items:start;
}

.aboutStance__list{max-width:46ch}

.aboutStance__note{
  margin:var(--s5) 0 0;
  font-size:var(--fs-sm);
  line-height:var(--lh-normal);
  color:var(--ink-mute);
}


/* -----------------------------------------------------------------------------
   5. Abschlussband — Welle nimmt die Salbeiflaeche darueber auf
   -------------------------------------------------------------------------- */
.aboutCta{padding-top:calc(var(--section-y) + clamp(16px,3vw,40px))}

.aboutCta__wave{
  position:absolute;
  inset-inline:0;
  top:0;
  z-index:0;
  margin-bottom:0;
  color:var(--stone-800);
}

.aboutCta__grid{
  display:grid;
  gap:clamp(1.5rem,4vw,2.75rem);
  align-items:center;
}

.aboutCta__text{
  display:grid;
  align-content:start;
  gap:var(--s4);
}

.aboutCta__text > *{margin:0}

.aboutCta__actions{
  margin:0;
  gap:var(--s4);
}

@media (min-width:900px){
  .aboutCta__grid{grid-template-columns:minmax(0,1fr) auto}
}


/* -----------------------------------------------------------------------------
   6. Druck — ruhige, flache Darstellung
   -------------------------------------------------------------------------- */
@media print{
  .aboutHero{padding-bottom:1rem}

  .aboutPortrait{
    animation:none;
    border-radius:var(--r-md);
    box-shadow:none;
  }

  .aboutPortrait__img{transform:none}

  .aboutHeroCard{
    position:static;
    max-width:none;
    margin-top:var(--s4);
    animation:none;
    box-shadow:none;
  }

  .aboutCta__wave{display:none}
  .aboutCta{padding-top:1.5rem}
}