/*
 * Nur die eigenständigen Komponenten des Selbstfindungsexperiments.
 * Typografie, Header, Navigation, Grundbuttons, Abschnittsüberschriften,
 * Abschlussbereich und Footer kommen direkt aus assets/style.css.
 */
.self-page{
  --self-a:#72d7ff;
  --self-b:#9b8cff;
  --self-c:#8ef0c8;
  background:
    radial-gradient(circle at 80% 8%,rgba(114,215,255,.1),transparent 27%),
    radial-gradient(circle at 10% 30%,rgba(155,140,255,.09),transparent 30%),
    var(--bg);
}

/* Hero: nutzt .hero aus der Hauptseite, nur Komposition und Sondergrafik sind spezifisch. */
.self-hero{
  grid-template-columns:minmax(0,1fr) 340px;
  gap:70px;
  padding-top:150px;
  padding-bottom:110px;
  position:relative;
}
.self-hero-copy{position:relative;z-index:2}
.self-hero h1{max-width:1100px}
.self-hero h1 span{
  color:transparent;
  -webkit-text-stroke:1px rgba(225,237,246,.62);
}
.self-subline{
  font-size:clamp(19px,2vw,27px);
  line-height:1.4;
  font-weight:600;
  color:#e2e8ee;
  margin:0 0 20px;
}
.self-intro{
  max-width:720px;
  color:var(--muted);
  font-size:18px;
  line-height:1.75;
}
.self-primary{margin-top:34px}

.self-status{
  align-self:end;
  margin-bottom:70px;
  padding:24px 25px;
  border:1px solid var(--line);
  border-radius:22px;
  background:rgba(255,255,255,.025);
  backdrop-filter:blur(15px);
  display:flex;
  gap:16px;
  align-items:center;
}
.status-dot{
  width:10px;height:10px;border-radius:50%;
  background:var(--self-c);
  box-shadow:0 0 18px var(--self-c);
  animation:selfpulse 2s infinite;
}
.self-status small{
  display:block;color:#768794;text-transform:uppercase;
  letter-spacing:.14em;font-size:10px;margin-bottom:6px;
}
.self-status strong{font-size:14px;color:#d9e3e9}

.self-orbit{
  position:absolute;width:640px;height:640px;right:-160px;top:90px;
  border:1px solid rgba(114,215,255,.1);border-radius:50%;
  animation:orbitspin 28s linear infinite;
}
.self-orbit:before,.self-orbit:after{
  content:"";position:absolute;border:1px solid rgba(155,140,255,.11);
  border-radius:50%;inset:90px;
}
.self-orbit:after{inset:210px;border-color:rgba(142,240,200,.12)}
.self-orbit span{
  position:absolute;width:10px;height:10px;border-radius:50%;
  background:var(--self-a);box-shadow:0 0 20px var(--self-a);
}
.self-orbit span:nth-child(1){top:48px;left:170px}
.self-orbit span:nth-child(2){right:40px;top:300px;background:var(--self-b)}
.self-orbit span:nth-child(3){bottom:80px;left:120px;background:var(--self-c)}
.self-orbit span:nth-child(4){left:50%;top:50%;width:4px;height:4px}

/* Module: Überschriften stammen aus .section-heading der Hauptseite. */
.self-module{
  padding-top:130px;
  padding-bottom:130px;
  border-top:1px solid var(--line);
}
.self-module-head{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(280px,.65fr);
  gap:60px;
  align-items:end;
  margin-bottom:62px;
}
.self-module-head .eyebrow{grid-column:1/-1}
.self-module-head h2{margin:0}
.self-module-head>p:last-child{
  font-size:18px;
  line-height:1.75;
  color:var(--muted);
  margin:0;
}

.bio-stage,.insight-card,.thought-card{
  border:1px solid var(--line);
  border-radius:30px;
  background:linear-gradient(145deg,rgba(255,255,255,.04),rgba(255,255,255,.012));
  box-shadow:0 35px 100px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.035);
}
.bio-stage{padding:55px}
.bio-label,.thought-card label{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#6f8795;
}
.bio-stage>p{
  font-size:clamp(30px,4vw,58px);
  line-height:1.32;
  font-weight:600;
  letter-spacing:-.04em;
  color:#ecf3f7;
  max-width:1100px;
  margin:35px 0 48px;
}
.bio-meta{
  display:flex;justify-content:space-between;color:#6e7d88;font-size:12px;
  border-top:1px solid var(--line);padding-top:20px;
}
.self-button{border:0;font-family:inherit}
.secondary{border-color:rgba(155,140,255,.35);background:rgba(155,140,255,.07)}

.insight-section{position:relative}
.insight-card{padding:70px 75px;margin:0;position:relative;overflow:hidden}
.insight-card:before{
  content:"";position:absolute;inset:-60% 45% 20% -10%;
  background:radial-gradient(circle,rgba(155,140,255,.17),transparent 66%);
}
.quote-mark{
  font-size:150px;line-height:.6;font-weight:700;
  color:rgba(114,215,255,.17);position:absolute;top:45px;left:48px;
}
.insight-card blockquote{
  position:relative;z-index:1;
  font-size:clamp(34px,5vw,73px);
  line-height:1.18;font-weight:600;letter-spacing:-.05em;
  max-width:1100px;margin:25px 0 38px;
}
.insight-card figcaption{position:relative;z-index:1;color:#7e8f9b}

.thought-card{padding:45px}
.thought-card label{display:block;margin-bottom:20px}
.thought-card textarea{
  width:100%;resize:vertical;min-height:230px;border:0;border-radius:20px;
  padding:27px;background:rgba(0,0,0,.22);color:#edf4f7;
  font:400 19px/1.7 inherit;
  outline:1px solid rgba(255,255,255,.07);transition:.2s;
}
.thought-card textarea:focus{
  outline-color:rgba(114,215,255,.45);
  box-shadow:0 0 0 5px rgba(114,215,255,.055);
}
.thought-tools{
  display:flex;justify-content:space-between;gap:20px;align-items:center;
  margin-top:20px;color:#6f7c86;font-size:12px;
}
.thought-tools button{border:0;background:transparent;color:#a6b4bd;cursor:pointer;font:inherit}
.thought-tools button:hover{color:#fff}

/* Abschluss nutzt .closing aus der Hauptseite. */
.self-result>p:not(.eyebrow){color:var(--muted);font-size:19px}
.self-result a{display:inline-block;margin-top:25px;color:var(--self-a)}

/* Footer nutzt .site-footer; nur die Dreispalten-Anordnung ist spezifisch. */
.self-footer{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  height:auto;
  min-height:110px;
  gap:32px;
}
.self-footer p{margin:0}
.self-footer-left{justify-self:start}
.self-footer-brand{justify-self:center;color:#eef5f8;font-size:18px;font-weight:700;letter-spacing:-.03em}
.self-footer-brand:hover{color:var(--self-a)}
.self-footer-links{justify-self:end;display:flex;align-items:center;gap:22px}
.self-footer-links a{color:#8f9ca5;transition:color .2s ease}
.self-footer-links a:hover{color:#fff}

@keyframes selfpulse{50%{opacity:.45;transform:scale(.75)}}
@keyframes orbitspin{to{transform:rotate(360deg)}}
#bioText{transition:opacity .17s ease,transform .17s ease}
#bioText.is-changing{opacity:.15;transform:translateY(8px)}

@media(max-width:900px){
  .self-hero{grid-template-columns:1fr;min-height:auto}
  .self-status{max-width:420px;margin:0}
  .self-orbit{opacity:.55}
  .self-module-head{grid-template-columns:1fr}
  .self-module-head .eyebrow{grid-column:auto}
}
@media(max-width:700px){
  .self-footer{grid-template-columns:1fr;justify-items:center;text-align:center;gap:16px;padding:30px 0}
  .self-footer-left,.self-footer-brand,.self-footer-links{justify-self:center}
}
@media(max-width:600px){
  .self-hero{padding-top:120px;padding-bottom:80px}
  .self-orbit{width:420px;height:420px;right:-250px}
  .self-module{padding-top:85px;padding-bottom:85px}
  .self-module-head{gap:24px;margin-bottom:40px}
  .bio-stage,.insight-card,.thought-card{padding:28px;border-radius:22px}
  .bio-meta,.thought-tools{align-items:flex-start;flex-direction:column}
  .quote-mark{font-size:90px;left:18px;top:28px}
}
@media(prefers-reduced-motion:reduce){.self-orbit,.status-dot{animation:none}}