@font-face{font-family:"Outfit";font-weight:800;font-display:swap;src:url(fonts/outfit-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:700;font-display:swap;src:url(fonts/ibm-plex-mono-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Outfit";font-weight:900;font-display:swap;src:url(fonts/outfit-latin-900-normal.woff2) format("woff2")}

:root{
  --gelb:#FFD119; --schwarz:#120317; --rosa:#F8DCDA; --rose:#F4C3C2;
  --flieder:#968DC3; --lila:#734293; --violett:#600DE2;
  --verlauf:linear-gradient(120deg,#F4C3C2 0%,#C99BD6 45%,#9B5BE0 100%);
  --streifen:repeating-linear-gradient(135deg,var(--schwarz) 0 7px,#fff 7px 14px);
  --head:"Outfit",system-ui,sans-serif; --text:"IBM Plex Mono",ui-monospace,monospace; --mono:var(--text);
  --indigo:#4B4395;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{margin:0;font-family:var(--text);font-size:1rem;line-height:1.55;color:var(--schwarz);background:var(--gelb)}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{max-width:1160px;margin:0 auto;padding:0 32px;position:relative}
section{position:relative}

/* Typo-Skala: bold, wenige klare Stufen */
h1,h2,h3{font-family:var(--head);font-weight:900;margin:0;line-height:1.12;letter-spacing:-.01em}
h1{font-size:clamp(2.2rem,4.4vw,3.6rem);text-wrap:balance}
h2{font-size:clamp(2.1rem,4.4vw,3.6rem);margin-bottom:.5em}
h3{font-size:1.15rem;text-transform:uppercase;letter-spacing:.06em;line-height:1.2;margin-bottom:.6em}
.lead{font-family:var(--mono);font-size:clamp(1.05rem,1.6vw,1.2rem);line-height:1.55}
.kicker{font-family:var(--mono);font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.18em;margin:0 0 18px;display:flex;align-items:center;gap:14px}
.kicker::before{content:"";width:44px;height:3px;background:currentColor}
p{margin:0 0 1em}

.btn{display:inline-block;font-family:var(--mono);font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:.14em;text-decoration:none;color:var(--violett);border:3px solid var(--violett);padding:14px 30px;transition:background .15s,color .15s}
.btn:hover{background:var(--violett);color:#fff}
.streifen{background:var(--streifen)}

/* Kopf */
.kopf{padding:28px 0}
.kopf .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px}
.logo{display:block;width:230px;line-height:0}
.logo img{width:100%;height:auto}
nav ul{list-style:none;display:flex;gap:28px;margin:0;padding:0}
nav a{font-family:var(--head);font-weight:900;font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;text-decoration:none}
nav a:hover{color:var(--violett)}

/* Hero */
.hero{padding:40px 0 0}
.hero .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:end}
.hero .text{padding-bottom:0;align-self:center;margin-top:-40px}
.hero h1{margin-bottom:28px}
.hero .lead{max-width:30em;margin-bottom:36px}
.hero figure{margin:0;position:relative}
.hero figure img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 28%}
.hero figure .streifen{position:absolute;left:-26px;top:-26px;width:52px;height:150px}

/* Intro – Verlaufsfläche wie im Brandbook */
.intro{background:var(--verlauf);padding:88px 0}
.intro .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.intro ul{list-style:none;padding:0;margin:24px 0 0}
.intro li{font-family:var(--head);font-weight:900;font-size:clamp(1.3rem,2.2vw,1.75rem);line-height:1.15;padding:12px 0;border-top:3px solid var(--schwarz)}
.intro li:last-child{border-bottom:3px solid var(--schwarz)}
.intro-foto{margin:0;position:relative;width:100%;max-width:400px;justify-self:end;align-self:end;margin-bottom:-24px}
.intro img{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:center}
.intro-foto .streifen{position:absolute;left:-20px;top:-20px;width:110px;height:40px}

/* Stärken */
.staerken{background:var(--indigo);color:var(--gelb);padding:96px 0}
.staerken .wrap{display:grid;grid-template-columns:.82fr 1.18fr;gap:56px;align-items:center}
.staerken .gross{font-family:var(--head);font-weight:900;font-size:clamp(2.2rem,4vw,3.4rem);line-height:1.1;margin:0}
.staerken .gross span{display:block}
.staerken img{width:100%;aspect-ratio:3/2;object-fit:cover}
.staerken .kicker{color:var(--rose)}

/* Leistungen */
.leistungen{background:var(--rosa);padding:104px 0 96px}
.leistungen .liste{display:grid;grid-template-columns:repeat(3,1fr);gap:48px 40px;margin-top:40px}
.leistung h3{font-size:1.2rem}
.leistung{border-top:4px solid var(--schwarz);padding-top:18px}
.leistung p{margin:0;font-size:1rem;line-height:1.5}
.leistungen .cta{margin-top:56px}

/* Über mich */
.ueber{background:#fff;padding:104px 0}
.ueber .wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:center}
.ueber figure{margin:0;position:relative;width:100%;max-width:490px;justify-self:end}
.ueber figure img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:62% 15%}
.ueber figure .streifen{position:absolute;right:-22px;bottom:-22px;width:150px;height:44px}
.ueber .text{max-width:34em}
.ueber .text p{font-size:1.1rem}

/* Stimmen */
.stimmen{background:var(--verlauf);padding:104px 0}
.zitate{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:40px}
.zitate blockquote{margin:0;font-family:var(--head);font-weight:800;font-size:clamp(1.2rem,1.8vw,1.45rem);line-height:1.3}
.zitate blockquote::before{content:"\201C";display:block;font-family:var(--head);font-weight:900;font-size:4rem;line-height:.6;margin-bottom:14px;color:var(--violett)}

/* Referenzen */
.referenzen{background:var(--gelb);padding:104px 0}
.referenzen .wrap{display:block}
.referenzen ul{list-style:none;padding:0;margin:32px 0 0;columns:3;column-gap:40px}
.referenzen li{break-inside:avoid;padding:10px 0;border-top:2px solid var(--schwarz);font-size:1rem;line-height:1.4}
.referenzen li strong{font-family:var(--head);font-weight:900;font-size:1.05rem;display:block}
.referenzen li strong a{text-decoration:none;border-bottom:2px solid var(--violett)}
.referenzen li strong a:hover{color:var(--violett)}
.referenzen img{width:100%;max-width:340px;aspect-ratio:4/5;object-fit:cover;justify-self:end}
.referenzen .agentur{margin-top:28px;font-size:.9rem}

/* Haltung */
.haltung{background:var(--verlauf);color:var(--schwarz);padding:120px 0}
.haltung p{font-family:var(--head);font-weight:900;font-size:clamp(2rem,4.6vw,3.8rem);line-height:1.12;margin:0;max-width:15em}
.haltung{z-index:2}
.haltung .streifen{position:absolute;right:6%;bottom:-28px;width:180px;height:56px;z-index:3}

/* Kontakt */
.kontakt{padding:104px 0 72px}
.kontakt .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.kontakt figure{justify-self:end;width:100%;max-width:380px}
.kontakt img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:42% 28%}
.kontakt .daten{margin:28px 0 36px;font-size:1.05rem}
.kontakt .daten a{font-weight:700}

/* Fuß */
footer{border-top:3px solid var(--schwarz);padding:48px 0 56px;font-size:.82rem;line-height:1.6}
footer .wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px}
footer h2{font-size:1rem;text-transform:uppercase;letter-spacing:.12em;margin-bottom:10px}
footer p{margin:0}
footer .rechts{text-align:right;align-self:end}
footer .rechts a{font-weight:700}

/* Responsiv: eine Spalte, Text immer vor Bild – nie zwei Bilder hintereinander */
@media (max-width:960px){
  .leistungen .liste,.zitate{grid-template-columns:1fr 1fr}
  .referenzen ul{columns:2}
}
@media (max-width:820px){
  .wrap{padding:0 22px}
  .logo{width:190px}
  .kontakt figure{max-width:280px;justify-self:center}
  .hero .wrap,.intro .wrap,.staerken .wrap,.ueber .wrap,.referenzen .wrap,.kontakt .wrap,footer .wrap{grid-template-columns:1fr;gap:40px}
  .hero .text{padding-bottom:0;margin-top:0}
  .hero figure .streifen{left:auto;right:-10px;top:-18px;width:40px;height:110px}
  .intro,.staerken,.leistungen,.ueber,.referenzen,.kontakt{padding:72px 0}
  .haltung{padding:88px 0}
  .leistungen .liste,.zitate{grid-template-columns:1fr;gap:36px}
  .referenzen ul{columns:1}
  .intro-foto{max-width:100%;justify-self:stretch;margin-bottom:0}
  .intro-foto .streifen{left:auto;right:-8px;top:-14px;width:90px;height:32px}
  .referenzen img{max-width:300px;justify-self:center}
  .ueber figure{order:-1}          /* Über mich: Bild zuerst – davor endet Leistungen mit Text */
  .kontakt figure{order:-1}        /* Kontakt: Bild zuerst – davor endet Haltung mit Text */
  .ueber figure .streifen{right:-8px;bottom:-16px;width:110px;height:34px}
  footer .rechts{text-align:left}
}

/* Burger-Menü (nur mobil) */
.burger{display:none;background:none;border:0;padding:8px;cursor:pointer;width:44px;height:44px;position:relative;z-index:30}
.burger span{display:block;height:3px;background:var(--schwarz);margin:6px 0;transition:transform .2s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
nav a[aria-current="page"]{border-bottom:3px solid var(--schwarz)}
@media (max-width:820px){
  .kopf{position:relative;z-index:20}
  .burger{display:block}
  nav{display:none;position:fixed;inset:0;background:var(--gelb);padding:110px 28px 40px;z-index:25}
  nav.offen{display:block}
  nav ul{flex-direction:column;gap:22px}
  nav a{font-size:2rem;letter-spacing:0;text-transform:none}
  body.menue-offen{overflow:hidden}
}

/* Werkzeugkiste */
.wk-hero{padding:48px 0 88px}
.wk-hero h1{margin-bottom:24px}
.wk-hero .lead{max-width:36em}
.wk-sprung{list-style:none;display:flex;flex-wrap:wrap;gap:14px;padding:0;margin:36px 0 0}
.wk-sprung a{display:inline-block;font-family:var(--mono);font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.12em;text-decoration:none;border:3px solid var(--schwarz);padding:10px 18px}
.wk-sprung a:hover{background:var(--schwarz);color:var(--gelb)}
.wk-bereich{padding:96px 0}
.wk-bereich.weiss{background:#fff}
.wk-bereich.verlauf{background:var(--verlauf)}
.wk-bereich.rosa{background:var(--rosa)}
.wk-bereich .kopfzeile{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:48px}
.wk-bereich .kopfzeile p{margin:0;font-size:1.05rem}
.wk-karten{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.wk-karte{background:#fff;border-top:5px solid var(--schwarz);padding:22px 22px 26px;display:flex;flex-direction:column}
.wk-bereich.weiss .wk-karte{background:var(--gelb)}
.wk-format{font-family:var(--mono);font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;margin:0 0 10px;color:var(--violett)}
.wk-karte h3{font-size:1.35rem;text-transform:none;letter-spacing:-.005em;margin-bottom:10px}
.wk-karte p{font-size:.95rem;margin:0 0 22px;flex:1}
.wk-karte .btn{align-self:flex-start;padding:11px 20px;font-size:.75rem}
.wk-karte .btn[aria-disabled="true"]{opacity:.55;cursor:default}
.wk-karte .btn[aria-disabled="true"]:hover{background:none;color:var(--violett)}
.platzhalter{display:inline-block;font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;background:var(--schwarz);color:var(--gelb);padding:3px 8px;margin-left:8px;vertical-align:middle}
.wk-anmeldung{background:var(--indigo);color:var(--gelb);padding:96px 0}
.wk-anmeldung .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.wk-anmeldung .kicker{color:var(--rose)}
.wk-anmeldung p{color:#fff}
.wk-form{display:flex;flex-direction:column;gap:14px}
.wk-form label{font-family:var(--mono);font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.12em}
.wk-form input{font-family:var(--mono);font-size:1rem;padding:14px 16px;border:3px solid var(--gelb);background:#fff;color:var(--schwarz)}
.wk-form .btn{background:var(--gelb);color:var(--schwarz);border-color:var(--gelb);align-self:flex-start}
.wk-form .klein{font-size:.82rem;color:#e9e6ff;margin:0}
.wk-form .klein a{color:#fff}
@media (max-width:960px){.wk-karten{grid-template-columns:1fr 1fr}}
@media (max-width:820px){
  .wk-bereich,.wk-anmeldung{padding:72px 0}
  .wk-bereich .kopfzeile,.wk-anmeldung .wrap{grid-template-columns:1fr;gap:16px}
  .wk-karten{grid-template-columns:1fr;gap:20px}
}
.wk-karte p.wk-format{flex:none}
@media (max-width:820px){.logo{position:relative;z-index:30}}

.wk-foto{width:100%;max-width:520px;aspect-ratio:3/2;object-fit:cover;object-position:50% 40%;margin:0 0 48px auto}
@media (max-width:820px){.wk-foto{margin:0 0 32px}}

h1,h2,h3{hyphens:manual;overflow-wrap:break-word}
@media (max-width:820px){h2{font-size:1.9rem}}

/* Werkzeugkiste-Anreißer in Leistungen */
.wk-teaser{margin-top:64px;background:#fff;border-top:5px solid var(--schwarz);padding:32px 36px;display:flex;justify-content:space-between;align-items:center;gap:32px}
.wk-teaser h3{font-size:1.6rem;text-transform:none;letter-spacing:-.01em;margin-bottom:8px}
.wk-teaser p{margin:0;max-width:36em}
.wk-teaser .kicker{margin-bottom:12px}
.wk-teaser .btn{flex:none}
@media (max-width:820px){.wk-teaser{flex-direction:column;align-items:flex-start;padding:26px 22px;margin-top:48px}}

/* Startbereich: mindestens so hoch wie der folgende Abschnitt */
@media (min-width:821px){
  .hero figure img{aspect-ratio:auto;height:clamp(720px,calc(100vh - 110px),880px)}
}

/* Was ich mache: Foto rechts angeschnitten bis zum Seitenrand */
@media (min-width:821px){
  .intro{overflow:hidden}
  .intro-foto{max-width:none;justify-self:stretch;align-self:center;margin-bottom:0;
    margin-right:calc((min(100vw,1160px) - 100vw)/2 - 32px);width:auto}
  .intro img{aspect-ratio:3/2;min-height:360px}
  .intro-foto .streifen{left:-22px;top:auto;bottom:-22px;width:120px;height:44px}
}

/* Footer */
.fuss{background:var(--indigo);color:#fff;padding:72px 0 28px;position:relative}
.fuss .wrap{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.fuss-logo{display:block;width:260px;height:auto;fill:var(--gelb);margin-bottom:16px}
.fuss-marke p{margin:0;font-size:.9rem;color:#e9e6ff}
.fuss-links ul{list-style:none;margin:0;padding:0;display:flex;gap:28px;flex-wrap:wrap}
.fuss-links a{font-family:var(--head);font-weight:900;font-size:.85rem;text-transform:uppercase;letter-spacing:.12em;text-decoration:none;color:var(--gelb)}
.fuss-links a:hover{color:#fff;text-decoration:underline}
.fuss-copy{display:block !important;margin-top:56px !important;padding-top:20px;border-top:1px solid rgba(255,255,255,.25);font-size:.78rem;color:#cfcaf3}
.fuss-streifen{position:absolute;right:6%;top:-22px;width:150px;height:44px}
/* Rechtstexte */
.rechtstext{padding:56px 0 104px}
.rechtstext .wrap{max-width:820px}
.rechtstext h1{margin-bottom:36px}
.rechtstext h2{font-size:1.2rem;margin:32px 0 8px}
.rechtstext p{max-width:42em}
@media (max-width:820px){
  .fuss{padding:56px 0 24px}
  .fuss .wrap{flex-direction:column;align-items:flex-start}
  .fuss-links ul{flex-direction:column;gap:14px}
  .fuss-logo{width:210px}
}
/* Angeschnittenes Bild bei „Was ich mache" begrenzen */
@media (min-width:821px){
  .intro img{aspect-ratio:auto;height:clamp(360px,28vw,460px);min-height:0}
}
.fuss{border-top:0}
.fuss-streifen{right:auto;left:6%}
@media (max-width:820px){
  nav.fuss-links{display:block;position:static;inset:auto;background:none;padding:0;z-index:auto}
  .fuss-links a{font-size:.85rem;letter-spacing:.12em;text-transform:uppercase}
}

.kontakt h2{margin-bottom:32px}

.btn-eng{word-spacing:-.45em}

@media (max-width:820px){.rechtstext h1{font-size:2.1rem}}