/* Lisa Ohneberger · lisaohneberger.de */

@font-face{font-family:"Fraunces";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/fraunces-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/fraunces-latin-400-italic.woff2") format("woff2")}
@font-face{font-family:"Work Sans";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/work-sans-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Work Sans";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/work-sans-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Work Sans";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/work-sans-latin-600-normal.woff2") format("woff2")}

:root{
  --creme:#F4EFE8;
  --creme-2:#EAE3D8;
  --tinte:#1A1A1A;
  --grau:#4A4641;
  --grau-hell:#CFCAC2;
  --cognac:#8A4F26;
  --chambray:#AFC3E3;
  --marine:#2F3B52;
  --rot:#C8102E;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Work Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--creme);color:var(--tinte);font-family:var(--sans);font-size:18px;line-height:1.6;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
a:hover{color:var(--cognac)}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
em{font-style:italic}
:focus-visible{outline:2px solid var(--rot);outline-offset:3px}

main{position:relative;overflow:hidden}

.wrap{
  width:calc(100% - 2 * clamp(4px, 2.5vw, 80px));
  max-width:1180px;
  margin-inline:auto;
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
  position:relative;z-index:2;
}

/* Typo-Bausteine */
.label{font-size:14px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--grau)}
.label-cognac{color:var(--cognac)}
.label-blau{color:var(--marine)}
.titel{font-family:var(--serif);font-weight:400;font-size:clamp(38px,5.4vw,72px);line-height:1.05;letter-spacing:-.02em;text-wrap:balance}
.riesig{font-family:var(--serif);font-weight:400;font-size:clamp(48px,8.6vw,128px);line-height:1.02;letter-spacing:-.03em;text-wrap:balance}
.rot{color:var(--rot)}
.platzhalter{background:#FFE58A;padding:0 4px}

/* Knöpfe */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 26px;border-radius:999px;text-decoration:none;font-weight:600;font-size:16px;line-height:1.2;transition:transform .2s ease, background-color .2s ease, color .2s ease}
.btn:hover{transform:translateY(-2px)}
.btn-rot{background:var(--rot);color:#fff}
.btn-rot:hover{background:#A50D26;color:#fff}
.btn-ink{background:var(--tinte);color:var(--creme)}
.btn-ink:hover{color:var(--creme);background:var(--cognac)}
.btn-line{border:1.5px solid var(--tinte);font-weight:500}
.btn-hell{border:1.5px solid var(--creme);color:var(--creme);font-weight:500}
.btn-hell:hover{background:var(--creme);color:var(--tinte)}
.knoepfe{display:flex;flex-wrap:wrap;gap:14px}

/* Faden */
.faden{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:visible}
.faden path,.knoten path{fill:none;stroke:var(--rot);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
#punkte circle{fill:var(--rot);transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
#punkte circle.an{transform:scale(1)}
#burst line{stroke:var(--rot);stroke-width:3;stroke-linecap:round;opacity:0;transition:opacity .4s ease}
#burst.an line{opacity:1}
.funke{position:absolute;left:0;top:0;z-index:4;pointer-events:none;font-size:34px;line-height:1;color:var(--rot);
  text-shadow:0 0 14px rgba(200,16,46,.75),0 0 28px rgba(255,170,90,.6);transform:translate(-50%,-52%);will-change:transform;opacity:0}
.funke.da{opacity:1;animation:glimm 1.6s ease-in-out infinite}
@keyframes glimm{0%,100%{filter:brightness(1)}50%{filter:brightness(1.5)}}
.wp{display:block;height:0;width:0}

/* Navigation */
.kopf{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:28px;padding-bottom:20px}
.logo{display:flex;align-items:baseline;gap:10px;text-decoration:none}
.logo-vor{font-family:var(--serif);font-style:italic;font-size:30px;line-height:1}
.logo-nach{font-size:14px;letter-spacing:4px;font-weight:600}
.stern{color:var(--rot);letter-spacing:0;margin:0 4px;font-size:16px}
.nav{display:flex;gap:30px;align-items:center;font-size:14px;font-weight:600;letter-spacing:2px;text-transform:uppercase}
.nav a{text-decoration:none}
.nav .btn{letter-spacing:1px;font-size:14px;min-height:44px;padding:10px 22px;white-space:nowrap}

/* Hero */
.hero{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);column-gap:24px;padding-top:48px}
.hero-kopf{grid-column:1 / -1;display:flex;flex-direction:column;gap:22px;min-width:0}
.hero-text{display:flex;flex-direction:column;gap:26px;padding-top:30px;padding-bottom:40px;min-width:0}
.statement{font-family:var(--serif);font-weight:400;font-size:clamp(40px,7.2vw,92px);line-height:1.2;letter-spacing:-.025em;display:flex;gap:.25em;white-space:nowrap}
.aw-fix{display:flex;flex-direction:column}
.aw-fix span{height:1.2em}
.aw{display:none}
.paare{display:grid;overflow:hidden;height:2.4em}
.paar{grid-area:1/1;display:flex;flex-direction:column;transform:translateY(115%);animation:paar 15s cubic-bezier(.6,0,.3,1) infinite}
.paar:nth-child(1){animation-delay:-.6s}
.paar:nth-child(2){animation-delay:2.4s}
.paar:nth-child(3){animation-delay:5.4s}
.paar:nth-child(4){animation-delay:8.4s}
.paar:nth-child(5){animation-delay:11.4s}
.w1{color:var(--cognac);display:block;min-height:1.2em}
.w2{font-style:italic;display:block;min-height:1.2em}
@keyframes paar{
  0%{transform:translateY(115%)}
  4%,20%{transform:translateY(0)}
  24%,100%{transform:translateY(-115%)}
}
.sub{color:var(--grau);max-width:600px;font-size:19px}
.beweis{display:flex;flex-direction:column;gap:8px;margin-top:auto;padding-top:22px}
.beweis .label{font-size:13px}
.namen{font-family:var(--serif);font-size:22px;color:var(--grau);line-height:1.35}
.hero-bild{position:relative;align-self:end;justify-self:end;width:100%;max-width:400px}
.hero-bild img{width:100%}
.knoten{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.knoten path{stroke-dasharray:var(--len,1000);stroke-dashoffset:var(--len,1000);animation:zeichne 1.6s .4s ease-out forwards}
@keyframes zeichne{to{stroke-dashoffset:0}}
.wp-start{position:absolute;left:78%;top:106%}
.ki-hinweis{margin-top:14px;font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--cognac)}

/* Ticker */
.ticker{position:relative;z-index:5;background:var(--tinte);height:84px;display:flex;align-items:center;overflow:hidden}
.lauf{display:flex;gap:36px;white-space:nowrap;width:max-content;padding-left:36px;color:var(--creme);font-family:var(--serif);font-style:italic;font-size:32px;animation:lauf 40s linear infinite}
.lauf b{color:var(--rot);font-weight:400;font-style:normal}
@keyframes lauf{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes laufr{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* Sektionen */
.sektion{position:relative;padding-top:120px;padding-bottom:120px}
.sektion > .wp:first-child{position:absolute;top:40px}
.sektion > .wp-ende{position:absolute;bottom:40px}
.band-blau{background:var(--chambray)}
.band-dunkel{background:var(--tinte);color:var(--creme);padding-bottom:40px}
.band-dunkel a:hover{color:var(--creme)}

/* Moment */
.momente{display:flex;flex-direction:column;gap:64px;margin-top:56px}
.momente li{max-width:680px;display:flex;flex-direction:column;gap:12px}
.momente li:nth-child(2){margin-left:auto;max-width:560px}
.momente li:nth-child(3){margin-left:9%}
.momente li:nth-child(4){margin-left:auto;max-width:600px}
.zitat{font-family:var(--serif);font-style:italic;font-size:clamp(30px,3.6vw,48px);line-height:1.12;letter-spacing:-.01em;text-wrap:balance}
.antwort{color:var(--grau);font-size:17px;line-height:1.5;max-width:460px}

/* Formate */
.formate{display:flex;flex-direction:column;margin-top:48px;border-top:1px solid var(--grau-hell)}
.format{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:32px;padding-top:34px;padding-bottom:34px;border-bottom:1px solid var(--grau-hell)}
.format h3{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3vw,40px);line-height:1.1}
.format p{font-size:18px;max-width:560px}
.beratungen{margin-top:56px;background:var(--creme-2);padding:40px clamp(22px,4vw,56px);display:flex;flex-direction:column;gap:14px;border-left:4px solid var(--cognac)}
.beratungen-text{font-family:var(--serif);font-size:clamp(24px,2.6vw,34px);line-height:1.25;max-width:880px;text-wrap:pretty}
.beratungen p:not(.label):not(.beratungen-text){color:var(--grau);max-width:640px}
.beratungen p.beratungen-cta{padding-top:6px}
.beratungen-cta a{font-weight:600;color:var(--cognac);text-underline-offset:3px;white-space:nowrap}
.beratungen-cta a:hover{color:var(--rot)}

/* Versprechen */
.band-blau .riesig{margin-top:28px}
.versprechen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;margin-top:64px}
.versprechen li{display:flex;gap:16px}
.versprechen .nr{font-family:var(--serif);font-size:34px;line-height:1;color:var(--marine)}
.versprechen h3{font-family:var(--serif);font-weight:400;font-size:29px;line-height:1.15;margin-bottom:8px}
.versprechen p{font-size:17px;line-height:1.55}

/* Referenzen */
.laufband{position:relative;z-index:5;margin-top:48px;display:flex;flex-direction:column;gap:6px;background:var(--creme);overflow:hidden}
.reihe{display:flex;gap:56px;width:max-content;white-space:nowrap;padding-block:14px;animation:lauf 90s linear infinite;font-family:var(--serif);font-size:clamp(28px,3.4vw,44px);line-height:1.2}
.reihe.rueckwaerts{animation-name:laufr}
.reihe.kursiv{font-style:italic;color:var(--grau)}
.reihe sup{font-family:var(--sans);font-style:normal;font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--cognac);margin-left:8px;vertical-align:1.6em}
.laufband:hover .reihe{animation-play-state:paused}

/* Projekte */
#projekte .titel{margin-top:14px}
.faelle{margin-top:48px;border-top:1.5px solid var(--tinte)}
.faelle details{border-bottom:1px solid var(--grau-hell)}
.faelle summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr) minmax(0,1.5fr) 44px;gap:24px;align-items:baseline;padding-top:28px;padding-bottom:28px}
.faelle summary::-webkit-details-marker{display:none}
.kunde{font-family:var(--serif);font-size:clamp(24px,2.4vw,32px);line-height:1.15}
.art{font-size:13px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--cognac)}
.kurz{color:var(--grau);font-size:17px}
.zeichen{justify-self:end;align-self:center;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--tinte);position:relative;transition:background-color .2s, transform .3s}
.zeichen::before,.zeichen::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.5px;background:currentColor;transform:translate(-50%,-50%)}
.zeichen::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .3s}
details[open] .zeichen{background:var(--tinte);color:var(--creme)}
details[open] .zeichen::after{transform:translate(-50%,-50%) rotate(0)}
summary:hover .kunde{color:var(--cognac)}
.fall{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;padding-bottom:36px}
.fall.mit-bild{grid-template-columns:minmax(0,1.1fr) repeat(3,minmax(0,1fr))}
.fall.mit-bild img{width:100%;aspect-ratio:420/356;object-fit:cover}
.fall h4{font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--grau);margin-bottom:8px}
.fall p{font-size:17px;line-height:1.55}
.ergebnis{border-left:3px solid var(--rot);padding-left:18px}
.ergebnis p{font-family:var(--serif);font-size:21px;line-height:1.35}

/* Stimmen */
.band-hell{background:var(--creme-2)}
.stimmen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:48px}
.stimme{background:var(--creme);padding:32px 28px 28px;display:flex;flex-direction:column;justify-content:space-between;gap:28px;border-top:3px solid var(--rot)}
.stimme blockquote{margin:0;font-family:var(--serif);font-style:italic;font-size:clamp(21px,1.9vw,25px);line-height:1.35;text-wrap:pretty}
.stimme figcaption{display:flex;flex-direction:column;gap:4px;font-size:14px;line-height:1.4;color:var(--grau)}
.stimme figcaption b{font-weight:600;color:var(--tinte);font-size:15px}

/* In Aktion */
.film{position:relative;z-index:5;margin-top:40px;background:var(--creme);overflow:hidden;border-top:3px solid var(--rot);border-bottom:3px solid var(--rot);padding-block:26px}
.filmspur{display:flex;gap:28px;width:max-content;animation:lauf 70s linear infinite}
.film:hover .filmspur{animation-play-state:paused}
.filmspur figure{display:flex;flex-direction:column;gap:10px;flex:none}
.filmspur img,.foto-folgt{height:clamp(220px,28vw,380px);width:auto;aspect-ratio:3/2;object-fit:cover;object-position:40% 25%}
.filmspur .breit .foto-folgt{aspect-ratio:16/9}
.filmspur .hoch img{aspect-ratio:4/5;object-position:50% 50%}
.foto-folgt{background:var(--creme-2);border:1.5px dashed var(--grau-hell);display:flex;align-items:center;justify-content:center;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--grau)}
.filmspur figcaption{font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--grau)}

/* Über mich */
.ueber{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:48px}
.ueber-text{display:flex;flex-direction:column;gap:18px;font-size:20px;line-height:1.6;max-width:680px}
.name-spiel{font-family:var(--serif);font-style:italic;font-size:clamp(24px,2.4vw,30px);line-height:1.3;color:var(--cognac)}

/* Kontakt */
#kontakt .riesig em{color:var(--creme)}
.kontakt-knoepfe{margin-top:48px}
.wp-fast{margin-top:44px}
.fuss{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:110px;padding-top:20px;border-top:1px solid #3A3632;font-size:14px;color:var(--grau-hell)}
.fuss a{text-decoration:none}
.fuss a:hover{text-decoration:underline}

/* Rechtliches */
.recht{max-width:760px;padding-top:40px;padding-bottom:96px;display:flex;flex-direction:column;gap:14px}
.recht h1{font-family:var(--serif);font-weight:400;font-size:clamp(40px,6vw,64px);line-height:1.05;margin-bottom:12px}
.recht h2{font-size:14px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--grau);margin-top:22px}
.recht p,.recht li{font-size:17px}

/* Tablet */
@media (max-width:1020px){
  .hero{grid-template-columns:1fr;gap:0}
  .hero-text{padding-bottom:24px}
  .hero-bild{max-width:380px;margin-right:4%;margin-top:0}
  .versprechen{grid-template-columns:1fr;gap:32px;max-width:640px}
  .faelle summary{grid-template-columns:minmax(0,1fr) 44px;gap:6px 16px}
  .kunde{grid-column:1}
  .art{grid-column:1;grid-row:2}
  .kurz{grid-column:1;grid-row:3}
  .zeichen{grid-column:2;grid-row:1 / span 3}
  .fall,.fall.mit-bild{grid-template-columns:1fr;gap:22px}
  .fall.mit-bild img{max-width:520px}
  .ueber{grid-template-columns:1fr;gap:24px}
  .stimmen{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Handy */
@media (max-width:760px){
  body{font-size:17px}
  .nav a:not(.btn){display:none}
  .logo-vor{font-size:26px}
  .logo-nach{font-size:12px;letter-spacing:3px}
  .hero{padding-top:28px}
  .hero-text{gap:22px}
  .statement{white-space:normal;font-size:clamp(36px,10.4vw,56px);line-height:1.12}
  .aw-fix{display:none}
  .aw{display:inline;color:var(--tinte);font-style:normal}
  .paare{height:auto;width:100%}
  .paar{gap:.06em}
  .w1,.w2{min-height:0}
  .namen{font-size:19px}
  .ticker{height:64px}
  .lauf{font-size:24px;gap:24px}
  .sektion{padding-top:88px;padding-bottom:88px}
  .sektion > .wp:first-child{top:28px}
  .sektion > .wp-ende{bottom:28px}
  .momente{gap:44px;margin-top:36px}
  .momente li,.momente li:nth-child(n){margin-left:0;max-width:none}
  .format{grid-template-columns:1fr;gap:10px;padding-top:26px;padding-bottom:26px}
  .beratungen{padding:28px 22px}
  .band-dunkel{padding-bottom:28px}
  .fuss{margin-top:80px}
  .stimmen{grid-template-columns:1fr;gap:16px}
  .stimme{padding:26px 22px 22px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .paar{animation:none;transform:none}
  .paar:not(:first-child){display:none}
  .lauf,.reihe,.filmspur{animation:none}
  .laufband,.film{overflow-x:auto}
  .knoten path{animation:none;stroke-dashoffset:0}
  .funke.da{animation:none}
  .btn{transition:none}
}