@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:100 900;
  font-stretch:62% 125%;
  font-display:swap;
  src:url(assets/fonts/archivo-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:100 900;
  font-stretch:62% 125%;
  font-display:swap;
  src:url(assets/fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:100 800;
  font-display:swap;
  src:url(assets/fonts/jetbrainsmono-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:100 800;
  font-display:swap;
  src:url(assets/fonts/jetbrainsmono-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ============================================================
   Tokens — palette pulled from the strawberry / mango / coconut
   smoothie: cream base, mango mid-tone, berry accent, a touch of
   the straws' leaf-green, and a navy tone (sampled from the portrait
   photo) for the contrasting sections.
   ============================================================ */
:root{
  --red:#D96E86;          /* berry accent (was a plain red) */
  --red-bright:#E88CA0;
  --red-deep:#B84F66;

  --leaf:#84A25A;          /* straw/leaf-green, used sparingly */
  --leaf-deep:#5D7A3C;

  --ink:#222E59;           /* navy — sampled from the portrait top; dark text + dark bg base */
  --ink-deep:#171F3D;      /* darkest navy — topbar / footer */
  --paper:#FBF3E4;         /* cream — hero + one alternating section */
  --mango:#F6DA9C;         /* pale mango — the other alternating section */

  --on-dark-2:#E4D8CC;
  --on-dark-3:#B3A297;
  --on-light-1:var(--ink);
  --on-light-2:#4C5772;

  --hair-dark:#F7ECDF26;
  --hair-light:#222E5926;

  --font-display:'Archivo','Arial Black',Arial,sans-serif;
  --font-body:'Archivo',Arial,Helvetica,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --font-script:'Caveat',cursive;

  --ease:cubic-bezier(.16,1,.3,1);
  --pad-x:clamp(22px,6vw,112px);
  --nav-h:72px;
  --content-w:1100px; /* max width of the actual content column */

  color-scheme:light;
}

/* ---------- Basis ---------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0; overflow-x:hidden;
  background:var(--paper); color:var(--on-light-1);
  font-family:var(--font-body);
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%;}
::selection{background:var(--red); color:#fff;}

:where(a,button,summary,[tabindex]):focus-visible{
  outline:2px solid var(--red-bright);
  outline-offset:4px;
}
.light :where(a,button,summary):focus-visible{outline-color:var(--red-deep);}

:where(#inhalt,#top,#courses,#about,#testimonials,#contact){scroll-margin-top:calc(var(--nav-h) + 18px);}

.skip-link{
  position:fixed; top:10px; left:10px; z-index:200;
  transform:translateY(-180%);
  background:var(--red); color:#fff;
  padding:13px 18px;
  font-family:var(--font-mono); font-size:11px; font-weight:600;
  text-transform:uppercase; letter-spacing:.1em;
  transition:transform .3s var(--ease);
}
.skip-link:focus-visible{transform:none;}

/* Section themes: alternate light (cream / mango) and dark (wood) so
   consecutive sections never share the same background. */
.light{background:var(--paper); color:var(--on-light-1);}
.theme-mango{background:var(--mango); color:var(--on-light-1);}
.dark-section{background:var(--ink); color:#fff;}

/* Reusable centered content column. The section itself keeps a full-bleed
   background; this wrapper is what actually gets constrained + centered. */
.container{
  max-width:var(--content-w); margin-inline:auto; width:100%;
  padding-inline:var(--pad-x);
}

/* Papier- und Filmkorn: fixiert, kein Repaint im Scroll-Container */
body::after{
  content:""; position:fixed; inset:0; z-index:60; pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Leseposition, rein per CSS-Scroll-Timeline ---------- */
.read-progress{
  position:fixed; top:0; left:0; z-index:70;
  width:100%; height:2px; background:var(--red);
  transform:scaleX(0); transform-origin:0 50%;
  pointer-events:none;
}
@keyframes read-progress{from{transform:scaleX(0);}to{transform:scaleX(1);}}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .read-progress{animation:read-progress 1ms linear forwards; animation-timeline:scroll(root block);}
  }
}

/* ---------- Scroll-Reveal ---------- */
.scroll-sentinel{position:absolute; top:0; left:0; width:1px; height:64px; pointer-events:none;}
html.js [data-rv]{
  opacity:0; transform:translate3d(0,26px,0);
  transition:opacity .85s var(--ease) var(--rvd,0ms), transform .85s var(--ease) var(--rvd,0ms);
}
html.js [data-rv].rv-in{opacity:1; transform:none;}

/* ---------- Typografie ---------- */
h1,h2,h3,p{margin-top:0;}
h1,h2,h3{font-family:var(--font-display); font-weight:800; text-transform:uppercase;}
h1{
  margin:26px 0;
  font-size:clamp(44px,4.75vw,88px);
  font-stretch:103%;
  line-height:.9; letter-spacing:-.028em;
}
h1 em,.follow h2 em,.service-card h3 em,.nature h2 em,.testimonials h2 em{
  color:var(--red); font-style:normal;
}
.hero h1>span{display:block;}
.hero h1>span:first-child{font-size:.82em;}

/* Handwritten first-name, used once after "I'm" in the hero heading. */
.script{
  display:inline-block;
  font-family:var(--font-script); font-weight:700;
  text-transform:none; font-stretch:normal; letter-spacing:0;
  font-size:1.3em; line-height:1;
  color:var(--red);
}

.eyebrow,.kicker{
  font-family:var(--font-mono);
  font-size:11px; line-height:1.65;
  text-transform:uppercase; letter-spacing:.1em; font-weight:600;
}
.eyebrow{display:flex; gap:14px; align-items:center; color:var(--red-deep);}
.eyebrow>span{width:28px; height:2px; background:var(--red); flex:none;}
.kicker{color:var(--on-light-2);}
.dark-section .kicker,.footer-claim .kicker{color:var(--on-dark-3);}
.kicker.red,.eyebrow.red,.red{color:var(--red-deep);}
.dark-section .kicker.red,.nature .kicker.red,.footer-claim .kicker.red{color:var(--red-bright);}

.lead{
  max-width:60ch; color:var(--on-light-2);
  font-size:clamp(17.5px,1.25vw,21px); line-height:1.65;
}

/* ---------- Kopfzeile ---------- */
/* Solid, high-contrast bar at all times: the hero behind it is now a
   bright/cream section, so a transparent-until-scrolled nav would have
   had almost no contrast at the top of the page. */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:50;
  height:var(--nav-h);
  background:var(--ink-deep);
  border-bottom:1px solid transparent;
  box-shadow:0 0 0 0 rgba(0,0,0,0);
  transition:box-shadow .4s var(--ease);
}
html[data-scrolled] .topbar{
  box-shadow:0 12px 28px -10px rgba(0,0,0,.4);
  border-bottom-color:var(--hair-dark);
}
.topbar-inner{
  height:100%;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
}

.wordmark{
  display:flex; width:max-content;
  font-family:var(--font-display); font-size:14px; font-weight:800; font-stretch:108%;
  letter-spacing:-.01em; line-height:1;
}
.wordmark img{max-height:32px; width:auto;}

nav{display:flex; gap:clamp(18px,2.2vw,32px);}
nav a{
  position:relative; padding:6px 0;
  font-family:var(--font-mono); font-size:11px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:#c6c8ca;
  transition:color .25s var(--ease);
}
nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--red); transform:scaleX(0); transform-origin:right;
  transition:transform .38s var(--ease);
}
nav a:hover,nav a[aria-current]{color:#fff;}
nav a:hover::after,nav a[aria-current]::after{transform:scaleX(1); transform-origin:left;}

.nav-actions{justify-self:end; display:flex; gap:9px; align-items:center;}
.nav-cta{
  justify-self:end; padding:11px 15px;
  border:1px solid #ffffff38;
  font-family:var(--font-mono); font-size:10.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:.06em; color:#fff;
  white-space:nowrap;
  transition:background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.nav-cta:hover{background:var(--red); border-color:var(--red); color:#fff;}
.nav-cta-secondary{color:#c6c8ca; border-color:#ffffff25;}
.nav-cta-secondary:hover{background:#ffffff14; border-color:#ffffff55; color:#fff;}
.mobile-menu{display:none;}

/* ---------- Buttons ---------- */
.button{
  position:relative; padding:16px 18px; min-width:180px;
  display:flex; justify-content:space-between; align-items:center; gap:24px;
  font-family:var(--font-mono); font-size:10.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.07em;
  border:1px solid #ffffff3a; color:#fff;
  white-space:nowrap;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease),
             background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.button>span{display:inline-block; transition:transform .35s var(--ease);}
.button:hover{transform:translate(-3px,-3px);}
.button:hover>span{transform:translateX(4px);}
.button.primary{background:var(--red); border-color:var(--red);}
.button.primary:hover{background:var(--red-bright); border-color:var(--red-bright); box-shadow:6px 6px 0 #ffffff26;}
/* Ghost sits on the light hero, so it needs dark-friendly borders/shadow. */
.light .button.ghost{border-color:#00000030; color:var(--on-light-1);}
.light .button.ghost:hover{border-color:var(--ink); box-shadow:6px 6px 0 var(--red);}
.button.ghost:hover{border-color:#fff; box-shadow:6px 6px 0 var(--red);}
.button.ghost:hover>span{transform:translateY(3px);}

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  padding-top:calc(var(--nav-h) + 34px); padding-bottom:62px;
}
.hero-inner{
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0,1.16fr) minmax(360px,.84fr);
  align-items:start; gap:0 4vw;
}
.hero-grid{
  position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(var(--hair-light) 1px,transparent 1px),linear-gradient(90deg,var(--hair-light) 1px,transparent 1px);
  background-size:100% 168px,8.333% 100%;
  -webkit-mask-image:radial-gradient(125% 92% at 24% 42%,#000 22%,transparent 78%);
  mask-image:radial-gradient(125% 92% at 24% 42%,#000 22%,transparent 78%);
}
.hero::before{
  content:"Michelle"; position:absolute; left:-2.5vw; bottom:-26vh;
  color:transparent; -webkit-text-stroke:1px #222e5914;
  font-family:var(--font-display); font-size:74vw; line-height:.8; font-weight:800;
  pointer-events:none;
}
.hero-copy{position:relative; z-index:1; align-self:start; min-width:0; max-width:820px; padding-top:clamp(28px,5vh,60px);}
.hero-actions{display:flex; gap:12px; margin:34px 0 44px;}

.hero-portrait{
  position:relative; z-index:1; align-self:start;
  display:flex; align-items:flex-end; justify-content:center;
  margin-top:clamp(8px,2vh,24px);
}
/* Kreis + Portraet: der Kreis ist relativ zur Rahmenbreite (%), skaliert also
   automatisch mit, wenn .portrait-frame in den Breakpoints schmaler wird. */
.portrait-frame{width:min(47vw,760px); flex-shrink:0; aspect-ratio:1280/1061; position:relative;}
.portrait-frame img{display:block; width:100%; height:100%; object-fit:contain; object-position:center bottom; position:relative; z-index:1;}
.portrait-frame::before{
  content:""; position:absolute; z-index:0;
  left:54%; bottom:1%;
  width:74%; aspect-ratio:1;
  transform:translateX(-50%);
  border-radius:50%;
  background:var(--red);
}
.portrait-note{
  position:absolute; right:-20px; bottom:46px; z-index:2;
  background:var(--ink-deep); color:#fff;
  padding:15px 18px; margin:0; border-left:5px solid var(--red);
  font-family:var(--font-mono); font-size:10px; line-height:1.7; font-weight:600;
  text-transform:uppercase; letter-spacing:.04em;
  box-shadow:10px 10px 0 #00000024;
}

@keyframes hero-line{
  from{clip-path:inset(0 0 108% 0); transform:translateY(.2em);}
  to{clip-path:inset(-30% -12% -30% -12%); transform:none;}
}
@keyframes hero-rise{from{opacity:0; transform:translateY(18px);}to{opacity:1; transform:none;}}
@keyframes hero-portrait{from{opacity:0; transform:translateY(24px) scale(.985);}to{opacity:1; transform:none;}}
@media (prefers-reduced-motion:no-preference){
  html.js .hero .eyebrow{opacity:0; animation:hero-rise .8s var(--ease) .1s forwards;}
  html.js .hero h1>span{animation:hero-line 1s var(--ease) backwards;}
  html.js .hero h1>span:nth-child(1){animation-delay:.2s;}
  html.js .hero h1>span:nth-child(2){animation-delay:.31s;}
  html.js .hero .lead{opacity:0; animation:hero-rise .85s var(--ease) .56s forwards;}
  html.js .hero-actions{opacity:0; animation:hero-rise .85s var(--ease) .66s forwards;}
  html.js .hero-portrait{opacity:0; animation:hero-portrait 1.1s var(--ease) .26s forwards;}
}

/* ---------- Abschnittsmarke ---------- */
.section-index{
  grid-column:1/-1;
  display:flex; align-items:baseline; gap:18px;
  padding-bottom:26px; margin-bottom:56px;
  border-bottom:1px solid var(--hair-light);
}
.section-index>span{
  font-family:var(--font-display); font-weight:800; font-stretch:104%;
  font-size:clamp(31px,3.5vw,52px); line-height:.85; letter-spacing:-.02em;
  color:transparent; -webkit-text-stroke:1.5px var(--red);
}
.section-index>b{
  font-family:var(--font-mono); font-weight:600;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--on-light-2);
}
.section-index.on-dark{border-color:var(--hair-dark);}
.section-index.on-dark>b{color:var(--on-dark-3);}
/* A small leaf-green accent on the About section, so the palette isn't
   only pink — echoes the smoothie's straws / pineapple leaves. */
.nature .section-index>span{-webkit-text-stroke-color:var(--leaf);}

/* ---------- Services ---------- */
.manifesto{padding:96px 0 118px;}
.manifesto-inner{display:block;}
.services-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:0 8vw;
}
.service-card h3{
  margin:0 0 18px;
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(30px,3.4vw,48px); font-stretch:103%;
  line-height:.95; letter-spacing:-.025em;
}
.service-card .kicker{margin-bottom:14px;}
.service-card p:not(.kicker){max-width:46ch; color:var(--on-light-2); font-size:16.5px; line-height:1.72;}

/* ---------- About Me ---------- */
.nature{position:relative; overflow:hidden; min-height:620px; color:#fff;}
.nature-bg,.nature-overlay{position:absolute; inset:0; width:100%; height:100%;}
.nature-bg{object-fit:cover;}
.nature-overlay{
  background:
    linear-gradient(90deg,#171F3Df7 0%,#171F3De8 40%,#171F3D99 64%,#171F3D2e 100%),
    linear-gradient(0deg,#10162bcc,#10162b00 52%),
    #10162b1f;
}
.nature-content{
  position:relative; z-index:1; min-height:620px;
  max-width:var(--content-w); margin-inline:auto;
  padding:96px var(--pad-x) 104px;
  display:grid; grid-template-columns:1fr .8fr; gap:0 10vw; align-content:start;
}
.nature-content>div:nth-child(2){max-width:700px;}
.nature h2{
  margin:22px 0 34px;
  font-size:clamp(44px,4.65vw,84px); font-stretch:103%;
  line-height:.88; letter-spacing:-.03em;
}
.nature-content p:not(.kicker){max-width:570px; color:var(--on-dark-2); line-height:1.72;}
.nature-button{width:max-content; margin-top:38px; padding:21px 24px; min-width:236px;
  font-size:12px; letter-spacing:.09em; box-shadow:5px 5px 0 #10162b59;}
.nature-button:hover{box-shadow:9px 9px 0 #10162b59;}

/* ---------- Testimonials ---------- */
.testimonials{padding:110px 0;}
.testimonials h2{
  margin:20px 0 0;
  font-size:clamp(34px,4vw,58px); font-stretch:103%;
  line-height:.95; letter-spacing:-.025em;
}
.testimonial-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
  margin-top:52px;
}
.testimonial-card{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column;
  background:var(--paper); padding:34px 30px;
  border-top:3px solid var(--red);
  box-shadow:6px 6px 0 #22283810;
}
.testimonial-card::before{
  content:"“"; position:absolute; top:-6px; right:18px; z-index:0;
  font-family:var(--font-display); font-weight:800; font-size:104px; line-height:1;
  color:var(--red); opacity:.1; pointer-events:none;
}
.testimonial-card q{
  quotes:none; position:relative; z-index:1;
  margin:0 0 26px; flex:1;
  color:var(--on-light-1);
  font-family:var(--font-display); font-weight:500; font-stretch:100%;
  text-transform:none;
  font-size:19px; line-height:1.55; letter-spacing:-.01em;
}
.testimonial-foot{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:14px;
  padding-top:18px; border-top:1px solid var(--hair-light);
}
.testimonial-avatar{
  width:38px; height:38px; flex:none; border-radius:50%;
  background:var(--red); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-weight:700; font-size:13px;
}
.testimonial-name{
  display:block; font-family:var(--font-mono); font-weight:700;
  font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--on-light-1);
}
.testimonial-role{
  display:block; margin-top:3px; font-family:var(--font-mono); font-size:10px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--on-light-2);
}

/* ---------- Contact ---------- */
/* Light section (mirrors the cream hero) so it doesn't sit next to the
   dark About section and the dark footer with no contrast between them. */
.follow{padding:114px 0;}
.follow h2{font-size:clamp(54px,6.8vw,116px);}
.social-grid{display:grid; grid-template-columns:repeat(3,1fr); margin-top:70px;}
.social-grid a{
  position:relative; min-height:128px; padding:28px 0;
  border-top:1px solid var(--hair-light);
  display:grid; grid-template-columns:1fr auto; align-items:center;
  font-family:var(--font-display); font-weight:800; font-stretch:106%;
  font-size:clamp(21px,2.35vw,34px); letter-spacing:-.03em;
  transition:padding-left .45s var(--ease);
}
.social-grid a::before{
  content:""; position:absolute; top:-1px; left:0; width:100%; height:1px;
  background:var(--red); transform:scaleX(0); transform-origin:left;
  transition:transform .55s var(--ease);
}
.social-grid a>span:first-child{display:inline-flex; align-items:center; gap:.3em;}
.social-grid svg{width:.7em; height:.7em; flex:none; fill:currentColor;}
.social-grid a:nth-child(3n+1){padding-right:35px;}
.social-grid a:not(:nth-child(3n+1)){padding-left:35px; border-left:1px solid var(--hair-light);}
.social-grid a:hover{padding-left:52px;}
.social-grid a:nth-child(3n+1):hover{padding-left:17px;}
.social-grid a:hover::before{transform:scaleX(1);}
.social-grid a>span:last-child{transition:transform .4s var(--ease);}
.social-grid a:hover>span:last-child{transform:translate(5px,-5px);}
.social-grid small{
  grid-column:1; margin-top:4px; color:var(--on-light-2);
  font-family:var(--font-mono); font-size:10px; font-weight:500;
  letter-spacing:.11em; text-transform:uppercase;
}
.social-grid a:hover>span:first-child{color:var(--red-deep);}

/* ---------- Fußzeile ---------- */
footer{
  background:var(--leaf-deep); color:#fff;
  padding:84px 0 32px;
}
.footer-inner{display:grid; grid-template-columns:.3fr .7fr; gap:7vw;}
.footer-brand p{
  margin-top:26px; color:#D3DFC4;
  font-family:var(--font-mono); font-size:11px; line-height:1.9;
  text-transform:uppercase; letter-spacing:.07em;
}
.footer-bottom{
  grid-column:1/-1; display:flex; gap:30px; justify-content:space-between;
  border-top:1px solid var(--hair-dark); margin-top:44px; padding-top:26px;
  color:#D3DFC4;
  font-family:var(--font-mono); font-size:10px; font-weight:500;
  text-transform:uppercase; letter-spacing:.08em;
}
.footer-bottom a:hover{color:#fff;}
.footer-inner.compact-footer{grid-template-columns:.55fr .45fr; padding-top:0;}
.footer-claim{max-width:560px; justify-self:end; color:#E3EBD8; font-size:14.5px; line-height:1.75;}
.footer-claim .kicker{margin-bottom:16px;}

/* ============================================================
   Breakpoints
   ============================================================ */
@media (max-width:1000px){
  .topbar-inner{grid-template-columns:1fr auto;} nav{display:none;}
  .nav-actions,.topbar-inner>.nav-cta{display:none;}
  .mobile-menu{display:block; justify-self:end; position:relative;}
  .mobile-menu summary{
    list-style:none; cursor:pointer; color:#f4f2ed;
    border:1px solid #ffffff45; padding:10px 13px;
    font-family:var(--font-mono); font-size:10px; font-weight:600;
    text-transform:uppercase; letter-spacing:.1em;
  }
  .mobile-menu summary::-webkit-details-marker{display:none;}
  .mobile-menu div{
    position:absolute; right:0; top:44px; width:216px; padding:8px 20px;
    background:#171F3Df2;
    -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
    border:1px solid #ffffff30;
    display:flex; flex-direction:column;
  }
  .mobile-menu div a{
    padding:14px 0; color:#f4f2ed; border-bottom:1px solid #ffffff1f;
    font-family:var(--font-mono); font-size:10.5px; font-weight:600;
    text-transform:uppercase; letter-spacing:.06em;
  }
  .mobile-menu div a:last-child{border-bottom:0;}
  .hero-inner{grid-template-columns:1fr;}
  .hero{padding-top:calc(var(--nav-h) + 42px);}
  .hero-copy{padding-top:20px; padding-bottom:400px;}
  .hero-portrait{position:absolute; bottom:55px; right:-12px; opacity:.92;}
  .portrait-frame{width:440px;}
  .services-grid{grid-template-columns:minmax(0,1fr); gap:48px;}
  .testimonial-grid{grid-template-columns:1fr; gap:18px;}
  .social-grid{grid-template-columns:1fr;}
  .social-grid a:nth-child(n){padding:24px 0; border-left:0;}
  .social-grid a:hover{padding-left:14px;}
  .nature-content{grid-template-columns:1fr;}
  /* Hier steht der Text ueber die volle Breite, also auch rechts abdunkeln. */
  .nature-overlay{background:
    linear-gradient(90deg,#171F3Df2 0%,#171F3De0 55%,#171F3Dcf 100%),
    linear-gradient(0deg,#10162bd9,#10162b00 58%),
    #10162b42;}
  .footer-inner{grid-template-columns:1fr;}
  .footer-inner.compact-footer .footer-claim{justify-self:start;}
}

@media (max-width:650px){
  :root{--nav-h:64px; --pad-x:20px;}

  /* Genau ein Bildschirm. Der Text bekommt, was er braucht, das Portraet
     den Rest und wird unten beschnitten. So sieht man immer das Gesicht,
     und der Anschnitt wirkt gewollt statt abgehackt. */
  .hero{
    padding:calc(var(--nav-h) + 26px) 0 0;
    height:100svh; min-height:0;
    display:flex; flex-direction:column;
  }
  .hero-inner{
    flex:1 1 auto; min-height:0;
    display:flex; flex-direction:column;
  }
  .eyebrow{display:block; position:relative; max-width:100%; padding-left:42px; font-size:10px; line-height:1.75;}
  .eyebrow>span{position:absolute; left:0; top:.72em;}
  h1{max-width:100%; font-size:clamp(30px,10.8vw,50px); line-height:.96; letter-spacing:-.025em;}
  .lead{max-width:100%; font-size:15.5px;}
  .hero-actions{flex-direction:column; width:min(230px,100%);}
  .hero-copy{flex:0 0 auto; padding-top:16px; padding-bottom:6px; max-width:100%;}
  .hero-portrait{
    position:relative; right:auto; bottom:auto; margin:0;
    flex:1 1 auto; min-height:0; align-items:flex-start; justify-content:flex-end;
  }
  .portrait-frame{width:min(calc(100vw - 24px),410px); height:100%; aspect-ratio:auto;}
  .portrait-frame img{object-fit:contain; object-position:center bottom;}

  /* Die Notiz ist 64px hoch und lag bei knappem Platz mitten im Gesicht.
     Dieselbe Aussage steht weiter unten im Abschnitt "About Me". */
  .portrait-note{display:none;}

  /* Auf kurzen Bildschirmen bleibt fuer das Portraet zu wenig uebrig.
     Dort traegt die Typografie den Auftakt allein. */
  @media (max-height:730px){
    .hero{height:auto; min-height:100svh;}
    .hero-portrait{display:none;}
    .hero-copy{padding-bottom:0;}
  }

  .section-index{gap:14px; padding-bottom:20px; margin-bottom:38px;}
  .section-index>span{font-size:30px;}
  .manifesto,.follow,.testimonials{padding:70px 0;}
  .testimonial-grid{grid-template-columns:1fr; gap:16px; margin-top:34px;}
  .testimonial-card{padding:28px 24px;}
  .service-card h3{font-size:clamp(28px,9.5vw,36px);}
  .nature,.nature-content{min-height:0;}
  .nature-content{padding:70px 20px 78px;}
  .nature h2{font-size:clamp(32px,11vw,50px); hyphens:manual; -webkit-hyphens:manual; overflow-wrap:break-word;}
  .social-grid{grid-template-columns:1fr;}
  .social-grid a:nth-child(n){padding:24px 0; border-left:0;}
  .social-grid a:hover{padding-left:14px;}
  .follow h2{font-size:clamp(32px,11vw,50px); hyphens:manual; -webkit-hyphens:manual; overflow-wrap:break-word;}
  .footer-bottom{flex-direction:column; gap:12px;}
  .footer-inner.compact-footer{grid-template-columns:minmax(0,1fr); gap:35px;}
  .footer-inner.compact-footer>*{min-width:0;}
  footer{padding:60px 0 26px;}
}

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  html.js [data-rv]{opacity:1; transform:none; transition:none;}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* ---------- Druck ---------- */
@media print{
  body{background:#fff; color:#000;}
  body::after,.read-progress,.topbar,.hero-grid,.nature-overlay{display:none !important;}
  .dark-section,.nature,footer{background:#fff !important; color:#000 !important;}
  h1,h2,h3{page-break-after:avoid;}
  a[href^="http"]::after{content:" (" attr(href) ")"; font-size:9px; word-break:break-all;}
}

@media (min-width:1001px){
  .hero{padding-bottom:0;}
  .hero-portrait{align-self:end; margin-top:0;}
}
@media (min-width:651px) and (max-width:1000px){
  .hero-portrait{bottom:0;}
}