/* Eigene Gestaltung – bleibt beim Neu-Erzeugen des Gerüsts erhalten */
/* Startseite D · Variante «persönlich»: Menschen und Werkstatt zuerst, warme Flächen, Stimmen früh, Geschichte als Zweispalter */

/* Hero: Bild links mit überlappender Ansprechpersonen-Karte */
.v-persoenlich .hero{background:var(--color-surface);padding-block:clamp(24px,4vw,64px)}
.v-persoenlich .hero-grid{gap:clamp(32px,5vw,96px);min-height:min(82vh,920px)}
@media(min-width:900px){.v-persoenlich .hero-grid{grid-template-columns:1fr 1.05fr}.v-persoenlich .hero-media{order:0}}
.v-persoenlich .hero-media{padding-bottom:clamp(40px,5vw,72px)}
.v-persoenlich .hero-media .ph{aspect-ratio:4/5;border-radius:calc(var(--radius)*2.4) calc(var(--radius)*2.4) calc(var(--radius)*2.4) 0}
.person-card{position:absolute;right:clamp(-8px,-1vw,-24px);bottom:0;display:flex;gap:14px;align-items:center;background:var(--color-background);border-radius:calc(var(--radius)*1.6);padding:12px 18px 12px 12px;box-shadow:0 18px 40px rgba(52,28,16,.16);max-width:min(92%,340px)}
.person-card .ph{width:72px;flex:none;aspect-ratio:1;border-radius:50%!important;padding:0;font-size:.6rem}
.person-card .ph::before,.person-card .ph .fmt,.person-row .ph::before,.person-row .ph .fmt{display:none}
.person-card b{display:block;font-family:var(--font-heading);font-size:1.15rem;line-height:1.2}
.person-card span,.person-card a{display:block}
.person-card a{font-weight:600;text-decoration:none;margin-top:2px}
@media(max-width:899px){.person-card{right:12px}}
.v-persoenlich .hero h1{font-weight:600}
.values{list-style:none;padding:0;margin:2em 0 0;display:flex;flex-wrap:wrap;gap:10px}
.values li{padding:.45em 1em;border-radius:999px;background:var(--color-background);border:1px solid var(--color-primary-200);font-size:var(--fs-small);font-weight:600;color:var(--color-primary-700)}
.values li::before{content:"✓ ";color:var(--color-secondary)}

/* Kontrast: Zahlen nie in Honiggelb auf heller Fläche (nur 2:1) */
.facts b,.hero-stats b{color:var(--color-primary)}

/* Team: versetzte Porträts wie an einer Werkstattwand */
.team-offset{gap:clamp(16px,2.4vw,40px)}
@media(min-width:720px){.team-offset > figure:nth-child(2){margin-top:clamp(32px,5vw,80px)}.team-offset > figure:nth-child(3){margin-top:clamp(12px,2vw,32px)}}
.team-offset .ph{border-radius:calc(var(--radius)*1.6)}
.team-offset figcaption b{font-family:var(--font-heading);font-size:var(--fs-h3);font-weight:600}
.team-offset figcaption span{display:block}

/* Stimmen früh und gross */
.quote-feature{display:grid;gap:var(--gap);align-items:end}
@media(min-width:1000px){.quote-feature{grid-template-columns:1.6fr 1fr}.quote-feature .kicker{grid-column:1/-1}}
.quote-feature blockquote{margin:0;position:relative}
.quote-feature blockquote p{max-width:none;margin:0}
.quote-big{padding:clamp(24px,3vw,48px) 0 0 clamp(8px,2vw,24px)}
.quote-big::before{content:"«";position:absolute;left:-.05em;top:-.35em;font-family:var(--font-heading);font-size:clamp(6rem,10vw,10rem);line-height:1;color:var(--color-primary-200)}
.quote-big p{position:relative;font-family:var(--font-heading);font-weight:600;font-size:clamp(1.6rem,1.1rem + 1.8vw,3rem);line-height:1.2;color:var(--color-primary-800)}
.quote-small{background:var(--color-background);border-radius:calc(var(--radius)*1.6);padding:clamp(18px,2vw,32px);border-left:4px solid var(--color-secondary)}
.quote-small p{font-family:var(--font-heading);font-size:var(--fs-lead)}
.quote-feature cite{display:block;margin-top:.8em;font-style:normal;font-size:var(--fs-small);color:var(--muted)}

/* Leistungen auf warmer Fläche: Karten heller als die Fläche */
.v-persoenlich #leistungen .card{background:var(--color-background);box-shadow:none;border:1px solid var(--color-neutral-light)}
.v-persoenlich #leistungen .card .ph{border-radius:calc(var(--radius)*1.6) calc(var(--radius)*1.6) 0 0}

/* Warum wir: Icons in Moosgrün */
.why .icon{background:var(--color-secondary);border-radius:50%}
.why h3{margin-top:.6em}

/* Geschichte: Bild mit grosser Jahreszahl */
.story{align-items:center}
.story-media{position:relative;max-width:520px}
.story-media .ph{border-radius:calc(var(--radius)*1.6)}
.story .year{position:absolute;right:clamp(-12px,-2vw,-40px);bottom:clamp(-16px,-2vw,-32px);background:var(--color-primary);color:#FFF9F0;font-family:var(--font-heading);font-weight:700;font-size:clamp(1.2rem,.9rem + 1.2vw,2rem);padding:.5em .8em;border-radius:var(--radius)}
.facts-inline{text-align:left;margin-top:2em;padding-top:1.4em;border-top:1px solid var(--color-primary-200)}
.facts-inline b{font-size:clamp(1.6rem,1rem + 1.6vw,2.8rem)}
.facts-inline span{font-size:var(--fs-small);color:var(--color-neutral-dark)}

/* Kontakt: Ansprechperson */
.person-row{display:flex;gap:16px;align-items:center;margin:1.6em 0 .6em}
.person-row .ph{width:84px;flex:none;aspect-ratio:1;border-radius:50%;padding:0}
.person-row b{display:block;font-family:var(--font-heading);font-size:1.25rem}
.person-row span{display:block}

/* Zitatzeichen über dem Beispiel-Hinweis, nicht darauf */
.quote-big{padding-top:clamp(64px,7vw,112px)}
.quote-big::before{top:-.08em}
.quote-big .sample-tag{position:relative;z-index:1}

/* Referenzen: grosses Projekt links über zwei Zeilen, zwei kleine rechts – keine Lücke */
@media(min-width:1100px){
  .projects.feature{grid-template-columns:1.6fr 1fr}
  .projects.feature > :first-child{grid-column:auto;grid-row:span 2}
  .projects.feature > :first-child .ph{aspect-ratio:auto;height:calc(100% - 7.5em);min-height:420px}
}
/* Zitatzeichen als eigene Zeile über Hinweis und Text */
.quote-big{padding:0}
.quote-big::before{position:static;display:block;height:.5em;line-height:.9;margin-bottom:.15em}