/* ueber-mich.css — Panzer IT: seitenspezifische Ergänzungen für "Über mich"
   (Task 11). Baut auf base.css/components.css/inner.css auf, definiert keine
   Tokens neu. Alle Klassen mit "about-" Präfix, um Kollisionen zu vermeiden. */

/* ==========================================================================
   1. Intro — Werkstatt-Foto + persönliche Story
   ========================================================================== */
.about-intro__grid{
  display:grid; grid-template-columns:1fr 1.25fr; gap:var(--sp-6); align-items:center;
}
.about-photo{ position:relative; }
.about-photo__frame{
  position:relative; overflow:hidden; border-radius:var(--radius);
  border:1px solid var(--c-line); background:var(--c-panel);
  aspect-ratio:4/3;
}
.about-photo__frame img{
  position:absolute; inset:-34px 0; width:100%; height:calc(100% + 68px);
  object-fit:cover;
}
.about-badge{
  position:absolute; right:-14px; bottom:-14px; z-index:1;
  width:72px; height:72px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--c-copper); color:#14110c; border:3px solid var(--c-base);
  font-family:var(--font-display); font-weight:700; font-size:1.25rem; letter-spacing:.01em;
  box-shadow:0 10px 24px rgba(0,0,0,.4);
}
.about-story h2{ margin-bottom:var(--sp-2); }
.about-story .prose + .prose{ margin-top:1em; }

/* Porträt-Variante: echtes, quadratisches Foto von Frank (kein Parallax-Overshoot) */
.about-photo__frame--portrait{ aspect-ratio:1/1; max-width:26rem; margin-inline:auto; border-color:rgba(184,115,51,.4); }
.about-photo__frame--portrait img{ position:static; inset:auto; width:100%; height:100%; }

/* Hervorgehobenes Zitat */
.about-quote{
  margin-top:var(--sp-3); padding:.2em 0 .2em var(--sp-3);
  border-left:3px solid var(--c-copper);
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.1rem, 1rem + .4vw, 1.35rem); line-height:1.5; color:var(--c-text);
}

@media (max-width:860px){
  .about-intro__grid{ grid-template-columns:1fr; gap:var(--sp-4); }
  .about-photo{ order:-1; max-width:26rem; margin-inline:auto; width:100%; }
}

/* ==========================================================================
   2. Werte / Prinzipien — Karten-Grid
   ========================================================================== */
.about-values-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  gap:var(--sp-4); margin-top:var(--sp-5);
}
.about-value{ border-top:2px solid var(--c-copper); padding-top:var(--sp-2); }
.about-value p{ color:var(--c-muted); margin-top:.4em; }

/* ==========================================================================
   3. Kennzahlen — kompakte Stat-Leiste
   ========================================================================== */
.about-stats{
  padding-block:var(--sp-5); margin-top:var(--sp-7);
  background:var(--c-panel); border-block:1px solid var(--c-line);
}
.about-stats-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--sp-3);
  text-align:center;
}
.about-stat__num{
  font-family:var(--font-display); font-weight:700; color:var(--c-brass);
  font-size:clamp(1.5rem, 1.2rem + 1.2vw, 2.3rem);
}
.about-stat__label{ color:var(--c-muted); font-size:.9rem; margin-top:.3em; }

@media (max-width:640px){
  .about-stats-grid{ grid-template-columns:1fr; gap:var(--sp-3); }
}