/* ═════════════════════════════════════════════════════════════════════
   SEITE «ÜBER UNS» – seitenspezifische Ergänzungen zu css/style.css
   Header, Footer, Design-Tokens und der kompakte Hero (.hero--compact)
   kommen unverändert aus css/style.css und werden hier nicht wiederholt.
   ═════════════════════════════════════════════════════════════════════ */

/* 0. ABSCHNITT «GESCHICHTE» + «TEAM» --------------------------------------
   Seite jetzt mit weissem Grundhintergrund (kein seitenweites
   .section--tint-solid mehr, siehe ueber-uns.html): «Unsere Geschichte» hebt
   sich stattdessen als eigens gestalteter Block ab (.about__panel, siehe
   unten), «Unser Team» folgt direkt danach auf reinem Weiss. */
.about-team { padding-block: calc(var(--section) * .6); }

/* 1. UNSERE GESCHICHTE ---------------------------------------------------
   Eigens gestalteter Block statt einer schlichten weissen Fläche: dieselbe
   dezente Hellblau-Tönung + sehr feines Lamellen-Wasserzeichen wie
   .story__panel/.intro__panel (Startseite) – derselbe wiederkehrende
   Gestaltungszug, nur auf hellem statt dunklem Grund. Ab Desktop steht das
   gemeinsame Foto von Manuel und Nicole direkt als dritte, schmale Spalte in
   derselben Karte (rund ein Viertel der Kartenbreite) statt als eigene,
   grosse Bildfläche darunter – Text bleibt klar das dominante Element. */
.about__panel {
  position: relative;
  padding: clamp(2.25rem, 5vw, 3.75rem);
  border-radius: var(--radius-l);
  /* Minimal wärmerer/weicherer Ton als zuvor, plus ein sehr dezenter Hauch Pink im Verlauf --
     dieselbe Massnahme wie bei den übrigen getönten Flächen der Website. */
  background-color: #F8FAFE !important;
  background-image: linear-gradient(155deg, rgba(66, 165, 245, .1), rgba(233, 30, 99, .016) 60%, rgba(66, 165, 245, .03));
  border: 1px solid rgba(66, 165, 245, .18);
  color-scheme: light only;
  overflow: hidden;
}
/* Sehr dezentes, lamellenartiges Linienmuster als Wasserzeichen – dieselbe Machart wie bei
   .intro__panel::after auf der Startseite, hier unten rechts statt oben rechts platziert.
   Liegt bewusst HINTER dem gemeinsamen Foto (siehe z-index unten) und ist zusätzlich per
   Mask so ausgeblendet, dass es gar nicht erst bis in den Fotobereich hineinreicht – das
   Foto bleibt dadurch eine vollständig ruhige, musterfreie Fläche. */
.about__panel::after {
  content: "";
  position: absolute;
  z-index: 0;
  bottom: -14%; right: -6%;
  width: 42%; height: 90%;
  background: repeating-linear-gradient(
    100deg,
    rgba(33, 43, 91, .05) 0, rgba(33, 43, 91, .05) 6px,
    transparent 6px, transparent 20px
  );
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 45%, transparent 72%);
          mask-image: linear-gradient(90deg, #000 0%, #000 45%, transparent 72%);
  pointer-events: none;
}

.about__heading,
.about__body,
.about__photo { position: relative; z-index: 1; }

.about__accents {
  display: flex;
  gap: .5rem;
  margin-bottom: 1.25rem;
}
.about__accent {
  display: block;
  width: 2rem;
  height: 4px;
  border-radius: 2px;
}
.about__accent--dark  { background: var(--blue-dark); background-color: #212B5B !important; }
.about__accent--light { background: var(--blue-light); background-color: #42A5F5 !important; }
.about__accent--pink  { width: .875rem; background: var(--pink); background-color: #E91E63 !important; }

/* Eigene, zurückhaltendere Schriftgrösse als die generische .display-Klasse: in der
   schmalen linken Spalte (ab 900px, siehe Grid unten) würde die grosse Display-Grösse
   "Geschichte" breiter als die Spalte selbst machen und sichtbar in den Fliesstext daneben
   hineinlaufen. Zusätzlich Worttrennung als Sicherheitsnetz für lange Wörter. */
.about__title {
  display: flex;
  flex-direction: column;
  font-size: clamp(1.625rem, 2.6vw, 2.5rem);
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.about__title span { display: block; }

/* Etwas mehr eigener Atem zwischen der Überschrift und dem Fliesstext darunter --
   vorher sass "Unsere Geschichte" optisch zu dicht auf dem Text (besonders dort, wo
   Überschrift und Text direkt übereinander stehen, also bis zur Desktop-Spaltenbreite). */
.about__heading { margin-bottom: clamp(1.5rem, 4.5vw, 2.25rem); }

.about__body { font-size: 1rem; }
.about__body p + p { margin-top: 1em; }
@media (min-width: 900px) {
  .about__body { font-size: 1.0625rem; }
}

/* Gemeinsames Foto: bewusst klein und als persönliche Ergänzung zur Geschichte gedacht, nicht
   als eigenständiges grosses Bild. Auf Mobile/Tablet kompakt unterhalb des Texts, innerhalb
   derselben Karte (kein zweiter, loser Bildblock mehr). */
.about__photo {
  margin: clamp(1.75rem, 4vw, 2.25rem) 0 0;
  max-width: 22rem;
}
.about__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 50%;
  border-radius: var(--radius-m);
  box-shadow: 0 20px 40px -28px rgba(33, 43, 91, .35);
}

@media (min-width: 900px) {
  /* Ab Desktop: Titel links, Text in der Mitte (deutlich breiter/dominant), Foto rechts
     schmal (~25–30% der Kartenbreite) – alles in derselben Karte, kein Foto mehr darunter. */
  .about__panel {
    display: grid;
    grid-template-columns: minmax(11.5rem, 20%) 1fr minmax(11rem, 27%);
    column-gap: clamp(2rem, 4vw, 3rem);
    align-items: start;
  }
  .about__photo {
    grid-column: 3;
    grid-row: 1;
    margin-top: .25rem;
    max-width: none;
  }
}


/* 2. UNSER TEAM -----------------------------------------------------------
   Zwei grosse, präsente Foto-Karten statt einer Tabelle: echte Portraitfotos
   stehen bewusst im Mittelpunkt der Karte (oben, volle Kartenbreite, deutlich
   grösser als frühere Avatar-Piktogramme), Name/Funktion/Text darunter.
   Folgt direkt im Anschluss an «Unsere Geschichte», jetzt auf weissem statt
   getöntem Grund. */
.team { margin-top: clamp(2.5rem, 6vw, 4rem); }
/* Gleicher linker Einzug wie die Überschrift «Unsere Geschichte» (dort durch das Innenpolster
   des .about__panel erzeugt) – ohne diesen Ausgleich stünde «Unser Team» sichtbar weiter links. */
.team__head {
  margin-bottom: clamp(1.5rem, 4vw, 2.25rem);
  padding-left: clamp(2.25rem, 5vw, 3.75rem);
}
.team__grid {
  display: grid;
  gap: clamp(1.25rem, 3vw, 1.75rem);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .team__grid { grid-template-columns: repeat(2, 1fr); }
}

/* Karten: das Foto ist bewusst deutlich kompakter als zuvor -- es stellt die Person vor,
   ist aber nicht mehr die dominante Flaeche der Karte. Mehr Weissraum rundherum, der Text
   (Name/Rolle/Beschreibung) ist jetzt das optisch groessere, besser lesbare Element. Beide
   Karten sind durch dasselbe Seitenverhaeltnis/denselben Bildausschnitt exakt gleich
   aufgebaut, auch wenn der Textinhalt unterschiedlich lang ist. */
/* Dezentes Hellblau statt reinem Weiss -- dieselbe Formsprache wie die Dienstleistungskarten
   (.service in css/dienstleistungen.css: helle Blau-Tönung, Konturfarbe, Rundung), aber bewusst
   NICHT identisch kopiert: etwas heller/zurückhaltender in der Tönung und mit einem weicheren,
   dezenteren Schatten statt kräftiger Kontur, damit die Teamkarten persönlicher/leichter wirken
   als die Dienstleistungskarten. Der Seitenhintergrund selbst bleibt weiss (siehe ueber-uns.html
   / css/style.css) -- nur die beiden Karten bekommen die Tönung. */
.team__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(1.75rem, 4vw, 2.5rem) clamp(1.5rem, 4vw, 2rem);
  border: 1px solid rgba(66, 165, 245, .26);
  border-radius: var(--radius-l);
  /* Minimal wärmer/weicher im Ton (Hue leicht Richtung Indigo, etwas entsättigt) und einen
     Hauch kräftiger als zuvor, plus ein sehr dezenter Hauch Pink im Verlauf -- dieselbe
     Massnahme wie bei den Produkt-/Dienstleistungskarten, siehe dort. */
  background-color: #E8EFFD !important;
  background-image: linear-gradient(165deg, rgba(66, 165, 245, .13), rgba(233, 30, 99, .025) 55%, rgba(66, 165, 245, .025) 85%);
  color-scheme: light only;
  text-align: center;
  box-shadow: 0 22px 46px -36px rgba(33, 43, 91, .22);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
/* Dezenter Akzentstrich oben (Pink → Hellblau) -- dieselbe Formsprache wie bei den Produkt-
   und Dienstleistungskarten: verbindet die drei Kartentypen optisch zu einer gemeinsamen
   Familie, ohne die Karten sonst anzugleichen. */
.team__card::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 2.5rem;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--pink), var(--blue-light));
  background-color: var(--blue-light) !important;
  color-scheme: light only;
  opacity: .5;
  pointer-events: none;
}
@media (hover: hover) {
  .team__card:hover {
    transform: translateY(-3px);
    border-color: rgba(66, 165, 245, .34);
    box-shadow: 0 28px 56px -32px rgba(33, 43, 91, .26);
  }
}

/* Foto: bewusst klein und zentriert -- ein Portrait zur Vorstellung der Person, kein
   grossformatiges Werbebild. Festes Seitenverhaeltnis (identisch bei beiden Karten), dezenter
   Zoom beim Hover ueber die ganze Karte (siehe .team__card:hover). */
.team__photo {
  position: relative;
  overflow: hidden;
  width: clamp(9.25rem, 30vw, 11.5rem);
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-m);
  background-color: #ECF2FD !important;
  color-scheme: light only;
  box-shadow: 0 14px 30px -20px rgba(33, 43, 91, .4);
}
.team__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
  transition: transform .5s var(--ease);
}
@media (hover: hover) {
  .team__card:hover .team__photo img { transform: scale(1.035); }
}
@media (prefers-reduced-motion: reduce) {
  .team__photo img { transition: none; }
}

.team__info {
  min-width: 0;
  max-width: 24rem;
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
}
/* Im Gegensatz zum jetzt kompakteren Foto ist der Text deutlich groesser/praesenter als
   zuvor -- Name, Rolle und Beschreibung sollen auf Anhieb gut lesbar sein. */
.team__name { font-family: var(--font-head); font-weight: 400; font-size: clamp(1.75rem, 3.2vw, 2.125rem); }
.team__role { margin-top: .3rem; font-size: 1.0625rem; font-weight: 700; color: var(--pink); }
.team__text { margin-top: .65rem; font-size: 1.0625rem; line-height: 1.65; color: var(--ink-soft); }