/* ==========================================================================
   Helena Soell, Portfolio
   Alle Maße sind im Entwurf auf 760 px Breite gestaltet. Beim Build werden
   px-Werte in rem umgerechnet (1 rem = 16 px bei 760 px Breite). Die Seite
   wächst dadurch proportional bis ca. 1200 px Inhaltsbreite mit.
   ========================================================================== */

@font-face{font-family:"Poppins";font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/poppins-300.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/poppins-400.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/poppins-500.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/poppins-600.woff2") format("woff2")}
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/playfair-display-italic-400.woff2") format("woff2")}

:root{
  --creme:#F5EDE3;
  --orange:#E4835B;
  --pink:#F09CC6;
  --rosa:#F5BCD8;
  --blau:#6E9BC4;
  --ink:#17140F;
  --white:#FFFFFF;
  --line:rgba(23,20,15,.25);
  --line-soft:rgba(23,20,15,.18);
}

*,*::before,*::after{box-sizing:border-box}

html{font-size:clamp(16px,2.1053vw,25.263px);scroll-behavior:smooth;-webkit-text-size-adjust:100%} /*raw*/

body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:0.8125rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

img{display:block;max-width:100%;height:auto}
a{color:inherit}
a:hover{color:var(--orange)}
h1,h2,h3,p{margin:0}
button{font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit}
ul{margin:0;padding:0;list-style:none}

:focus-visible{outline:0.125rem solid var(--blau);outline-offset:0.1875rem}

.skip{position:absolute;left:-624.938rem;top:0;z-index:100;background:var(--white);color:var(--ink);padding:0.625rem 0.875rem;font-size:0.75rem}
.skip:focus{left:0.75rem;top:0.75rem}

/* ---------- Bausteine ---------- */

.serif{font-family:"Playfair Display",Georgia,"Times New Roman",serif;font-style:italic;font-weight:400}
.label{font-size:0.625rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;line-height:1.4}
.wrap{max-width:47.5rem;margin-inline:auto;padding-inline:2.5rem}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:1rem}

.c-1-12{grid-column:1/-1}
.c-1-4{grid-column:1/span 4}
.c-5-4{grid-column:5/span 4}
.c-9-4{grid-column:9/span 4}
.c-1-6{grid-column:1/span 6}
.c-7-6{grid-column:7/span 6}
.c-1-7{grid-column:1/span 7}
.c-8-5{grid-column:8/span 5}
.c-1-8{grid-column:1/span 8}
.c-1-9{grid-column:1/span 9}
.c-5-8{grid-column:5/span 8}
.c-2-10{grid-column:2/span 10}

.copy{font-size:0.6875rem;line-height:1.6;letter-spacing:.01em;text-wrap:pretty;hyphens:auto}
.body-text{font-size:0.8125rem;line-height:1.7;hyphens:auto;text-wrap:pretty}

.hv{display:inline-grid;text-align:inherit}
.hv::after{content:attr(data-t);font-weight:600;height:0;overflow:hidden;visibility:hidden;user-select:none;pointer-events:none}
a:hover .hv,.hv:hover{font-weight:600}

/* ---------- Buttons ---------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--ink);color:var(--ink);background:transparent;
  padding:0.8125rem 1.5rem;border-radius:62.4375rem;
  font-size:0.6875rem;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  text-decoration:none;cursor:pointer;
  transition:background-color .2s ease,color .2s ease;
}
.btn:hover{background:var(--ink);color:var(--white);font-weight:600}
.btn-soft{border-color:rgba(23,20,15,.3);padding:0.6875rem 1.25rem}
.btn-solid{background:var(--ink);color:var(--white);padding:0.6875rem 1.25rem}
.btn-row{display:flex;gap:0.75rem;flex-wrap:wrap}

/* ---------- Kopfzeile ---------- */

.site-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:0.5rem 1rem;padding-top:1.75rem}
.brand{font-size:0.9375rem;font-weight:500;letter-spacing:.06em;text-decoration:none}
.brand:hover{color:var(--ink)}
.nav{display:flex;gap:1.375rem;font-size:0.625rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.nav a{text-decoration:none}
.nav a:hover{color:var(--ink)}
.nav-ico{display:inline-flex;align-items:center}
.nav-ico svg{width:1.25rem;height:1.25rem;stroke-width:1}
.nav-ico:hover svg{stroke-width:1.5}

/* ---------- Startseite: Hero mit weichen Formen ---------- */

.page{position:relative;isolation:isolate;overflow:clip}
.shape{position:absolute;z-index:-1;pointer-events:none;filter:blur(1.625rem)}
.shape-circle{width:26.875rem;height:26.875rem;border-radius:50%;background:var(--orange);opacity:.85;top:-5.625rem;right:-7.5rem}
.shape-square{width:25rem;height:25rem;background:var(--blau);opacity:.8;top:14.375rem;left:-10.625rem}
.shape-tri{width:28.75rem;height:25.625rem;opacity:.85;top:32.5rem;right:-3.75rem}
.shape-tri i{display:block;width:100%;height:100%;background:var(--pink);clip-path:polygon(50% 0%,100% 100%,0% 100%)}

.hero{padding-top:4rem;padding-bottom:2rem}
.hero h1{padding-top:1.125rem;font-size:5.125rem;font-weight:500;line-height:.9;letter-spacing:-.04em}
.hero h1 .serif{letter-spacing:-.02em}
.lead{font-size:1.25rem;font-weight:300;line-height:1.45}
.hero .lead{padding-top:1.75rem}
.hero .btn-row{padding-top:1.75rem}

.quote{background:rgba(245,237,227,.65);text-align:center}
.quote .grid{padding-block:3rem}
.quote-text{font-size:1.375rem;font-weight:300;line-height:1.45}
.quote-by{padding-top:1rem}

/* ---------- Abschnitte ---------- */

.sec{padding-top:3rem}
.sec-label{display:flex;align-items:center;gap:0.625rem}
.sec-label svg{flex:none;width:1.625rem;height:1.625rem}
.h2{padding-top:1.125rem;font-size:2.5rem;font-weight:500;line-height:1.12;letter-spacing:-.02em}
.gap-24{height:1.5rem}

/* Profil */
.profil-img{padding-top:1.5rem}
.profil-img img{width:100%;aspect-ratio:1;object-fit:cover}
.profil-text{align-self:center;margin-top:1.5rem;display:flex;flex-direction:column;gap:1.25rem;border-left:1px solid var(--ink);padding-left:1.25rem}
.profil-text .h1-like{font-size:2.5rem;font-weight:500;line-height:1.12;letter-spacing:-.02em}
.profil-text .lead{font-size:1.125rem;line-height:1.55}
.profil-p{padding-top:2rem}

/* Haltung */
.band-creme{background:var(--creme)}
.haltung{margin-top:3rem}
.haltung .grid{padding-block:3rem}
.haltung-label{align-self:start;display:flex;align-items:center;gap:0.625rem;padding-top:0.25rem}
.haltung-label svg{flex:none;width:1.625rem;height:1.625rem}
.stmt{font-size:1.75rem;font-weight:500;line-height:1.25;letter-spacing:-.01em;border-left:1px solid var(--ink);padding-left:1.25rem}
.pillar{display:flex;flex-direction:column;gap:0.625rem;border-top:1px solid var(--line);padding-top:1rem}
.pillar .copy{letter-spacing:.02em}
.pillar-shape{height:2.375rem;display:flex;align-items:flex-end}
.pillar-shape i{display:block}
.ps-circle{width:2.125rem;height:2.125rem;border-radius:50%;background:var(--orange)}
.ps-square{width:1.9375rem;height:1.9375rem;background:var(--blau)}
.ps-tri{width:2.375rem;height:2.0625rem;background:var(--pink);clip-path:polygon(50% 0%,100% 100%,0% 100%)}

/* Werdegang */
.cv-col{display:flex;flex-direction:column}
.cv-head{display:flex;align-items:center;gap:0.625rem;padding-bottom:0.75rem}
.cv-head svg{flex:none;width:1.5rem;height:1.5rem}
.cv-item{border-top:1px solid var(--line);padding:1rem 0;display:flex;flex-direction:column;gap:0.25rem}
.cv-date{font-size:0.9375rem}
.cv-title{font-size:1.0625rem;font-weight:500;line-height:1.3}
.cv-org{font-size:0.75rem;font-weight:300}

/* Case-Study-Teaser */
.card{display:flex;flex-direction:column;gap:0.75rem;padding-bottom:2.25rem;text-decoration:none;color:inherit}
.card:hover{color:inherit}
.card img{width:100%;height:13.75rem;object-fit:cover}
.card-title{font-size:1.375rem;font-weight:500;line-height:1.2;letter-spacing:-.01em;transition:color .2s ease}
.card-text{font-size:0.8125rem;line-height:1.65}
.card:hover .card-title{color:var(--orange)}
.card:hover .btn{background:var(--ink);color:var(--white);font-weight:600}
.card .btn{align-self:flex-start}


/* CTA und Fußzeile */
.cta{background:var(--creme);padding-block:3.25rem;display:flex;justify-content:center;flex-wrap:wrap;gap:0.75rem}
.foot{background:var(--creme);border-top:1px solid rgba(23,20,15,.12);font-size:0.6875rem}
.foot .grid{padding-block:1.375rem;align-items:center}
.foot-mid{text-align:center;display:flex;justify-content:center;gap:1.125rem}
.foot-mid a{text-decoration:none}
.foot-right{text-align:right}

/* ---------- Projektseiten ---------- */

.ph{padding-top:4rem;padding-bottom:2rem;display:flex;flex-direction:column;gap:1rem}
.ph h1{font-size:5.125rem;font-weight:500;line-height:.9;letter-spacing:-.04em;hyphens:auto;overflow-wrap:break-word}
.ph-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1rem}
.ph-row .btn{flex-shrink:0;margin-bottom:0.375rem}

.ph-grid{grid-template-rows:1fr 1fr;row-gap:1rem;min-height:26rem;margin-bottom:1rem}
.ph-img{grid-column:1/span 8;grid-row:1/span 2;position:relative;min-height:21.25rem}
.ph-img img,.fill img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.box{border:1px solid var(--line-soft);background:var(--white);padding:1rem;display:flex;flex-direction:column;gap:0.625rem}
.ph-case{grid-column:9/span 4}
.ph-exp{grid-column:9/span 4;background:var(--blau);color:var(--white);border:0}
.ph-exp .team{padding-top:0.625rem;margin-top:0.5rem;border-top:1px solid rgba(255,255,255,.4)}
.ph-exp .team .label{display:block;padding-bottom:0.125rem}

/* aufklappbare Kacheln */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.tile{
  position:relative;aspect-ratio:1;overflow:hidden;cursor:pointer;
  display:flex;flex-direction:column;justify-content:flex-start;
  padding:1rem;text-align:left;
  background:var(--white);color:var(--ink);
  border:1px solid var(--line-soft);border-radius:0;
  transition:background-color .3s ease,color .3s ease;
}
.tile-top{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center}
.tile-sign{font-size:1.125rem;font-weight:300;line-height:1}
.tile-title{display:block;margin:0.625rem 0 0.5rem;min-height:2.2em;font-size:1.375rem;font-weight:500;line-height:1.1;letter-spacing:-.02em;hyphens:manual}
.tile-text{display:block;position:relative;font-size:0.6875rem;line-height:1.6;letter-spacing:.01em;text-wrap:pretty;hyphens:auto}
.tile[aria-expanded="true"]{background:var(--ink);color:var(--white)}
.tile-img{background:var(--creme);justify-content:space-between}
.tile-img .tile-top{color:var(--white)}
.tile-img .tile-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .3s ease}
.tile-img::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(rgba(23,20,15,.38),rgba(23,20,15,0) 42%);pointer-events:none}
.tile-img[aria-expanded="true"] .tile-bg{opacity:.35}
.tile-img[aria-expanded="true"]::before{display:none}

.panels{display:block}
.panel{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .3s ease,visibility 0s linear .3s;scroll-margin-top:1.5rem}
.panel.open{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .3s ease,visibility 0s}
.panel-clip{min-height:0;overflow:hidden}
.panel-body{padding-top:3rem}
.pgrid{row-gap:1rem;align-items:start}

.p-head{display:flex;flex-direction:column;gap:0.875rem}
.p-title{font-size:1.75rem;font-weight:500;letter-spacing:-.02em;line-height:1}
.cols2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:1rem;align-items:start}
.stack{display:flex;flex-direction:column;gap:1em}
.half{max-width:calc(50% - 0.5rem)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(8.75rem,1fr));column-gap:1rem;row-gap:1.25rem}
.steps-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:1rem;row-gap:1.25rem;margin-top:0.875rem}
.step{display:flex;flex-direction:column;gap:0.625rem;border-top:1px solid var(--line);padding-top:0.875rem}
.step-n{font-size:1.5rem;line-height:1}
.quote-it{font-size:1.125rem;line-height:1.35}
.pt-6{padding-top:0.375rem}
.pt-10{padding-top:0.625rem}
.pt-14{padding-top:0.875rem}
.pt-16{padding-top:1rem}

.pimg{display:block;width:100%;aspect-ratio:var(--ar);object-fit:cover}
.img-stack{align-self:stretch;position:relative;display:flex;flex-direction:column;gap:1rem;padding-top:1.8125rem}
.img-stack .fill{flex:1 1 0;min-height:0;position:relative}
.fill{position:relative}
.strip{display:flex;gap:1rem;aspect-ratio:680/324.5}
.strip .fill{height:100%}
.strip .fill.grow{flex:1 1 0;min-width:0}
.strip .fill.ar{aspect-ratio:var(--ar)}

/* Learnings */
.learn{margin-top:1rem;padding-bottom:2.5rem}
.learn-box{background:var(--rosa);padding:1.75rem 1rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.learn-box .label{grid-column:1/-1}

/* ---------- Rechtstexte ---------- */

.legal{padding-top:4rem;padding-bottom:4.5rem;max-width:47.5rem}
.legal h1{font-size:2.5rem;font-weight:500;line-height:1.12;letter-spacing:-.02em;padding-bottom:1.5rem}
.legal h2{font-size:1.0625rem;font-weight:500;line-height:1.3;padding-top:1.75rem;padding-bottom:0.375rem}
.legal p,.legal li{font-size:0.8125rem;line-height:1.7;hyphens:auto}
.legal p+p{padding-top:0.625rem}
.legal ul{padding-top:0.375rem;list-style:disc;padding-left:1.25rem}
.todo{background:#FFE98A;padding:0 0.25rem}
.legal a{text-decoration:underline;text-underline-offset:0.1875rem}
.notfound{padding-block:6rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.5rem}
.notfound h1{font-size:5.125rem;font-weight:500;line-height:.9;letter-spacing:-.04em}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .panel,.panel.open,.tile,.btn,.tile-img .tile-bg{transition:none}
}

/* ---------- Mobil ---------- */

@media (max-width:639px){
  .wrap{padding-inline:1.25rem}
  .grid{grid-template-columns:minmax(0,1fr);column-gap:0}
  .c{grid-column:1/-1 !important;grid-row:auto !important}

  .nav{gap:1rem}
  .shape-circle{width:18.75rem;height:18.75rem;top:-3.75rem;right:-6.25rem}
  .shape-square{width:17.5rem;height:17.5rem;top:11.875rem;left:-7.5rem}
  .shape-tri{width:20rem;height:17.8125rem;top:29.375rem;right:-4.375rem}
  .haltung .grid{row-gap:1rem}
  .hero{padding-top:3rem}
  .hero h1,.ph h1,.notfound h1{font-size:3.25rem}
  .hero .lead{font-size:1.125rem}
  .quote-text{font-size:1.1875rem}
  .h2{font-size:2rem}
  .profil-text .h1-like{font-size:2.125rem}
  .profil-p{padding-top:1.25rem}
  .body-text{font-size:0.875rem}
  .copy,.tile-text,.card-text{font-size:0.7812rem}
  .stmt{font-size:1.375rem}
  .pillar{margin-bottom:1.25rem}
  .cv-col+.cv-col{margin-top:2rem}
  .card{padding-bottom:2rem}
  .card img{height:auto;aspect-ratio:3/2}

  .ph{padding-top:2.75rem}
  .ph-row{flex-direction:column;align-items:flex-start;gap:1.25rem}
  .ph-row .btn{margin-bottom:0}
  .ph-grid{grid-template-rows:none;min-height:0}
  .ph-img{min-height:0;aspect-ratio:4/3}
  .tiles{grid-template-columns:minmax(0,1fr)}
  .tile{aspect-ratio:auto}
  .tile-title{min-height:0}
  .tile-img{aspect-ratio:4/3}
  .panel-body{padding-top:2rem}
  .cols2{grid-template-columns:minmax(0,1fr);row-gap:1em}
  .half{max-width:none}
  .img-stack{padding-top:0}
  .img-stack .fill{flex:none;aspect-ratio:var(--ar)}
  .learn-box{grid-template-columns:minmax(0,1fr)}
  .strip{aspect-ratio:680/400}

  .foot .grid{row-gap:0.625rem;text-align:center}
  .foot-mid,.foot-right{text-align:center;justify-content:center}
  .cta{padding-block:2.75rem}
}

@media (max-width:380px){.hero h1,.ph h1,.notfound h1{font-size:44px}}

/* ---------- Satzbild und Abstände ---------- */
p,li,.tile-text,.card-text,.copy,.lead,.body-text{text-wrap:pretty;hyphens:auto;hyphenate-limit-chars:7 3 3}
h1,h2,h3,.lead,.p-title,.h2,.tile-title,.quote-it,.quote-text,.stmt,.h1-like{text-wrap:balance}
.quote-it,.stmt{hyphens:manual}
.img-stack .fill.nat{flex:none;aspect-ratio:var(--ar)}
.steps,.steps-2{margin-top:2rem}
.panel-body{padding-bottom:2rem}
.panel:not(.open) .panel-body{padding-bottom:0}
@media (max-width:639px){
  .steps:has(.step:nth-child(3):last-child){grid-template-columns:minmax(0,1fr)}
  .steps,.steps-2{margin-top:1.5rem}
}

.nav{align-items:center}
.tile-text{text-wrap:balance}


/* ---------- Burger-Menü (mobil) ---------- */
.burger{display:none}
.nav-ico-label{display:none}
@media (max-width:639px){
  .site-head{position:relative;z-index:60;flex-wrap:nowrap}
  .site-head.nav-js .burger{display:flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;margin:-0.625rem -0.625rem -0.625rem 0;padding:0;background:none;border:0;cursor:pointer;color:var(--ink)}
  .burger-lines{position:relative;display:block;width:1.5rem;height:0.875rem}
  .burger-lines i{position:absolute;left:0;width:1.5rem;height:1px;background:var(--ink);transition:transform .25s ease,opacity .2s ease,top .25s ease}
  .burger-lines i:nth-child(1){top:0}
  .burger-lines i:nth-child(2){top:0.4062rem}
  .burger-lines i:nth-child(3){top:0.8125rem}
  .nav-open .burger-lines i:nth-child(1){top:0.4062rem;transform:rotate(45deg)}
  .nav-open .burger-lines i:nth-child(2){opacity:0}
  .nav-open .burger-lines i:nth-child(3){top:0.4062rem;transform:rotate(-45deg)}
  .site-head.nav-js .nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;margin-top:0.5rem;padding:0.375rem 1.25rem 0.625rem;background:var(--white);border-top:1px solid var(--ink);box-shadow:0 0.875rem 1.875rem rgba(23,20,15,.10)}
  .site-head.nav-js.nav-open .nav{display:flex}
  .site-head.nav-js .nav a{display:flex;align-items:center;gap:0.625rem;padding:1rem 0;font-size:0.75rem;border-bottom:1px solid rgba(23,20,15,.12)}
  .site-head.nav-js .nav a:last-child{border-bottom:0}
  .site-head.nav-js .nav-ico-label{display:inline}
  .site-head.nav-js .nav-ico svg{width:1.25rem;height:1.25rem}
}

.btn-next{display:inline-flex;align-items:center;gap:0.75rem}
.btn-next svg{width:1.375rem;height:0.6875rem;flex:none;transition:transform .2s ease}
.btn-next:hover svg{transform:translateX(0.25rem)}


/* ---------- KI-Label auf Bildern ---------- */
.kiw{position:relative;display:block}
.ki{position:absolute;right:0.75rem;bottom:0.75rem;z-index:3;display:flex;align-items:center;justify-content:center;width:2.025rem;height:2.025rem;border-radius:50%;background:#B49C7C;color:#fff;font-size:0.6188rem;font-weight:600;letter-spacing:.04em;line-height:1;text-transform:uppercase;pointer-events:none;user-select:none}
@media (max-width:639px){.ki{right:8px;bottom:8px;width:27px;height:27px;font-size:8.55px}}


/* ---------- Fein & Würzig: Reihe mit drei Bildern ---------- */
.strip3{display:flex;gap:1rem;align-items:flex-start}
.strip3 .fill{flex:var(--r) 1 0;min-width:0;aspect-ratio:var(--ar)}
@media (max-width:639px){
  .strip3{flex-wrap:wrap;gap:0.75rem}
  .strip3 .r3-last{flex:1 1 100%}
}


/* ---------- Foto-Hinweis (vertikal, von unten nach oben) ---------- */
.credit{position:absolute;right:0.5rem;bottom:0.625rem;z-index:3;writing-mode:vertical-rl;transform:rotate(180deg);font-size:0.625rem;font-weight:400;letter-spacing:.08em;line-height:1;color:#fff;text-shadow:0 0 0.3125rem rgba(0,0,0,.5),0 0 0.125rem rgba(0,0,0,.35);pointer-events:none;user-select:none;white-space:nowrap}
@media (max-width:639px){.credit{right:6px;bottom:8px;font-size:9px}}

.short{display:flex;flex-direction:column;min-height:100vh}
.short .wrap{width:100%}
.short .foot{margin-top:auto}
.stack14{display:flex;flex-direction:column;gap:0.875rem}
.stretch{align-self:stretch}
.sp-16{height:1rem}
@media (max-width:639px){
  .stretch{aspect-ratio:var(--ar);align-self:auto}
}