@import url("portfolio.css");

/* Persönliche Ebene: wärmeres Licht, ruhigere Flächen, erzählende Abschnitte.
   Baut auf den HALVETH-Tokens auf, ersetzt sie nicht. */

:root{
  --warm:#f4d9a0;
  --warm-dim:rgba(244,217,160,.14);
  --lamp:rgba(255,214,10,.055);
  --serif:Georgia,"Iowan Old Style","Palatino Linotype",serif;
  /* Das geerbte --dim liegt bei 3,8 gegen den Hintergrund und damit unter der
     Lesbarkeitsschwelle. Auf der persoenlichen Ebene wird es angehoben, damit
     auch die leisen Zeilen lesbar bleiben. */
  --dim:#8e8f99;
}

body{
  background:
    radial-gradient(ellipse 60rem 34rem at 18% -6%,var(--lamp),transparent 70%),
    radial-gradient(circle at 88% 8%,rgba(85,215,208,.05),transparent 26rem),
    var(--bg);
}

/* Ein einzelner erzählender Satz, der Luft um sich braucht */
.line{
  max-width:34ch;
  margin:0;
  font-family:var(--serif);
  font-size:clamp(23px,3.1vw,38px);
  line-height:1.34;
  letter-spacing:-.015em;
  color:var(--ink);
}
.line.wide{max-width:46ch}
.line em{font-style:italic;color:var(--warm)}

/* Hero der persönlichen Seite */
.entry-hero{padding:clamp(96px,14vw,180px) 0 clamp(60px,8vw,104px)}
.entry-hero h1{
  max-width:26ch;
  margin:0 0 34px;
  font-family:var(--serif);
  font-size:clamp(34px,5.6vw,68px);
  font-weight:400;
  line-height:1.14;
  letter-spacing:-.02em;
}
.entry-hero h1 b{font-weight:400;color:var(--warm)}
.entry-hero .who{max-width:56ch;color:var(--muted);font-size:clamp(16px,1.7vw,19px);line-height:1.7}
.entry-hero .who strong{color:var(--ink);font-weight:600}
.quiet-note{
  margin:44px 0 0;
  padding-left:18px;
  border-left:1px solid var(--warm-dim);
  max-width:52ch;
  color:var(--dim);
  font-size:14px;
  line-height:1.7;
}

/* Kapitel statt Marketingsektionen */
.chapter{padding:clamp(70px,9vw,116px) 0;border-top:1px solid var(--line)}
.chapter-head{margin-bottom:clamp(34px,5vw,58px)}
.chapter-head .eyebrow{margin:0 0 14px}
.chapter-head h2{
  max-width:24ch;
  margin:0;
  font-size:clamp(30px,4.4vw,54px);
  line-height:1.05;
  letter-spacing:-.035em;
}
.chapter-head p{max-width:60ch;margin:20px 0 0;color:var(--muted);line-height:1.75}
.prose{max-width:62ch}
.prose p{color:var(--muted);line-height:1.8;margin:0 0 20px}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--ink);font-weight:600}
.prose .said{
  margin:30px 0;
  padding:0 0 0 22px;
  border-left:2px solid var(--warm-dim);
  font-family:var(--serif);
  font-size:clamp(19px,2.2vw,25px);
  line-height:1.5;
  color:var(--ink);
}

/* Die vier Sätze, die alles zusammenhalten */
.stance{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  margin-top:8px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--line);
  overflow:hidden;
}
.stance div{background:var(--panel);padding:30px 26px 34px}
.stance b{
  display:block;
  margin-bottom:16px;
  font:700 11px/1.3 var(--mono);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--warm);
}
.stance p{margin:0;font-size:15px;line-height:1.7;color:var(--muted)}

/* Projektwelten: erzählt, nicht gelistet */
.worlds{display:grid;gap:16px}
.world{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(28px,4vw,56px);
  padding:clamp(30px,4.4vw,54px);
  border:1px solid var(--line);
  border-radius:18px;
  background:linear-gradient(150deg,var(--panel),rgba(16,17,20,.5));
}
.world.solo{grid-template-columns:1fr;max-width:74ch}
.world-mark{
  font:700 11px/1.3 var(--mono);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--dim);
}
.world h3{
  margin:16px 0 22px;
  font-size:clamp(25px,3.1vw,38px);
  line-height:1.08;
  letter-spacing:-.03em;
}
.world .ask{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(18px,2.1vw,24px);
  line-height:1.52;
  color:var(--ink);
}
.world-side{align-self:end}
.world-side p{margin:0 0 20px;color:var(--muted);font-size:15px;line-height:1.75}
.world-state{
  display:flex;
  gap:10px;
  align-items:baseline;
  margin:0 0 18px;
  font:11px/1.4 var(--mono);
  color:var(--dim);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.world-state i{
  flex:0 0 auto;
  width:6px;height:6px;
  margin-top:5px;
  border-radius:50%;
  background:var(--dim);
}
.world-state.is-open i{background:var(--green)}
.world-state.is-work i{background:var(--accent)}
.world-state.is-ask i{background:var(--p-violet)}

/* Die Familie: fünf Projekte, eine Frage */
.family{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:10px}
.family article{
  padding:28px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(18,19,22,.5);
}
.family h3{margin:0 0 12px;font-size:20px;letter-spacing:-.02em}
.family p{margin:0 0 18px;color:var(--muted);font-size:15px;line-height:1.72}
.family .tiny{
  display:block;
  margin:0;
  font:11px/1.5 var(--mono);
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--dim);
}

/* Ehrlichkeit als eigener Raum, nicht als Kleingedrucktes */
.honest{
  padding:clamp(34px,5vw,64px);
  border:1px solid var(--warm-dim);
  border-radius:18px;
  background:linear-gradient(160deg,rgba(244,217,160,.045),transparent 60%);
}
.honest .line{margin-bottom:28px}
.honest ul{margin:0;padding:0;list-style:none;display:grid;gap:14px;max-width:66ch}
.honest li{
  padding-left:26px;
  position:relative;
  color:var(--muted);
  line-height:1.75;
}
.honest li:before{
  content:"";
  position:absolute;
  left:0;top:.62em;
  width:11px;height:1px;
  background:var(--warm);
  opacity:.6;
}

/* Über mich, bewusst klein gehalten */
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,320px);gap:clamp(30px,5vw,64px)}
.about-aside{
  align-self:start;
  padding:26px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--panel);
}
.about-aside p{margin:0 0 18px;font-size:14px;line-height:1.7;color:var(--muted)}
.about-aside p:last-of-type{margin-bottom:22px}

/* Ausgang */
.outro{padding:clamp(70px,9vw,120px) 0;border-top:1px solid var(--line);text-align:left}
.outro .line{margin:0 auto 34px 0}

@media(max-width:900px){
  .stance{grid-template-columns:repeat(2,1fr)}
  .world,.about{grid-template-columns:1fr}
  .world-side{align-self:start}
}
@media(max-width:640px){
  .stance,.family{grid-template-columns:1fr}
  .entry-hero{padding-top:72px}
}

/* Arbeitsfelder in der Fusszeile. Hier stehen sie zu Recht etwas praesenter als
   auf der Forschungsseite, denn dies ist die persoenliche Ebene. */
.portfolio-footer .wrap{align-items:flex-start}
.foot-fields{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 10px;margin:0 0 10px}
.foot-fields b{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--warm);font-weight:700;margin-right:4px}
.foot-fields span{border:1px solid var(--line);border-radius:999px;padding:3px 10px;color:var(--mut);white-space:nowrap;font-size:12.5px}
.foot-geo{flex-basis:100%;font-size:12.5px;color:var(--dim);margin:0 0 16px}