:root{
  --bg:#f1eee7;--paper:#ffffff;--ink:#202725;--muted:#68706d;--line:#b9bfbc;
  --soft:#f7f5f0;--dark:#293532;--warm:#e7ddd2;--cool:#dde4e1
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#ecebe7;color:var(--ink);font-family:Arial,Helvetica,sans-serif;line-height:1.5}
a{color:inherit}
.page{width:min(100%,430px);margin:auto;background:var(--paper);box-shadow:0 0 0 1px #d3d6d4;overflow:hidden}
.inner{padding-inline:20px}
header{min-height:74px;padding:12px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;background:var(--paper)}
.brand strong,.brand span{display:block}
.brand strong{font-size:17px}
.brand span{font-size:12px;color:var(--muted);margin-top:4px}
.menu{min-height:44px;padding:9px 12px;background:transparent;border:1px solid var(--ink)}
main section{border-bottom:1px solid var(--line)}
.section{padding-block:74px}
.compact{padding-block:54px}
.pagehead{position:relative;overflow:hidden;padding-block:88px 74px;background:var(--soft)}
.pagehead:before,.pagehead:after{content:"";position:absolute;pointer-events:none}
.pagehead:before{width:190px;height:235px;right:-75px;bottom:-60px;background:color-mix(in srgb,var(--warm) 75%, transparent);transform:skewY(-10deg)}
.pagehead:after{width:165px;height:190px;right:8px;bottom:-65px;border:1px solid color-mix(in srgb,var(--ink) 25%, transparent);background:color-mix(in srgb,var(--cool) 55%, transparent);transform:rotate(8deg)}
h1{font-size:42px;line-height:1.04;letter-spacing:-.035em;margin:0 0 28px}
h2{font-size:31px;line-height:1.08;letter-spacing:-.025em;margin:0 0 22px}
h3{font-size:25px;line-height:1.12;letter-spacing:-.02em;margin:0 0 14px}
p{font-size:18px;margin:0 0 18px}
.lead{font-size:22px;line-height:1.28}
.small{font-size:15px;color:var(--muted)}
.rule{width:70px;border-top:2px solid var(--ink);margin-bottom:24px}
.rule.shift1{margin-left:18%}.rule.shift2{margin-left:42%}.rule.shift3{margin-left:10%}
.portrait{width:100%;aspect-ratio:4/5;margin:0;background:linear-gradient(135deg,#d7d7d3 0 44%,#bcc7c3 44% 52%,#e8dfd5 52% 100%);border:1px solid var(--line);display:grid;place-items:center}
.sil{width:44%;aspect-ratio:3/4;border-radius:45% 45% 20% 20%;background:#9f9f9b;position:relative}
.sil:before{content:"";position:absolute;width:46%;aspect-ratio:1;border-radius:50%;background:#8b8b87;left:27%;top:-18%}
.quote{font-family:Georgia,serif;font-size:29px;line-height:1.18;margin:0 0 34px}
.soft{background:var(--soft)}
.mix{background:linear-gradient(180deg,color-mix(in srgb,var(--warm) 34%, white),color-mix(in srgb,var(--cool) 34%, white))}
.qualification{border-left:2px solid var(--ink);padding-left:16px;margin-top:30px}
.meta{font-size:16px;font-weight:700;padding-block:14px;border-block:1px solid var(--line);margin:26px 0}
.button{display:inline-block;background:var(--dark);color:#fff;text-decoration:none;padding:15px 18px;min-height:52px;font-weight:700;margin-top:12px}
.form-section{background:#fafafa}
.field{margin-bottom:28px}
label,legend{display:block;font-size:16px;font-weight:700;margin-bottom:9px}
input[type=text],input[type=email],input[type=tel],textarea{
  width:100%;border:1px solid var(--ink);background:#fff;color:var(--ink);
  min-height:52px;padding:13px 12px;font:inherit;border-radius:2px
}
textarea{min-height:150px;resize:vertical}
fieldset{border:0;padding:0;margin:0 0 28px}
.choice-row{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px}
.choice-row input{margin-top:5px}
.help{font-size:15px;color:var(--muted);margin-top:8px}
.notice{border-left:2px solid var(--ink);padding-left:16px;margin:28px 0}
.direct{background:var(--soft)}
footer{background:var(--dark);color:#fff;padding:40px 20px 30px}
.ftop,.fbottom{display:flex;justify-content:space-between;gap:20px;align-items:flex-end}
.fbottom{margin-top:34px;align-items:center}
.flinks{display:flex;gap:14px;flex-wrap:wrap;font-size:14px}
.linkedin{width:44px;height:44px;border:1px solid #fff;display:grid;place-items:center;text-decoration:none;font-weight:700}
.toplink{font-size:14px}
:focus-visible{outline:3px solid #000;outline-offset:4px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.desktop-nav{display:none}

@media (min-width:900px){
  body{background:#e9e9e6}
  .page{
    width:min(100%,1440px);
    box-shadow:0 0 0 1px #d1d1cf;
  }
  .inner{
    width:min(100% - 96px,1180px);
    margin-inline:auto;
    padding-inline:0;
  }
  header{
    min-height:92px;
    padding:0 48px;
    position:relative;
    z-index:5;
    background:var(--paper);
  }
  .brand strong{font-size:19px}
  .brand span{font-size:13px}
  .menu{display:none}
  .desktop-nav{
    display:flex;
    align-items:center;
    gap:30px;
    font-size:14px;
  }
  .desktop-nav a{
    text-decoration:none;
    padding-block:10px;
    border-bottom:1px solid transparent;
  }
  .desktop-nav a:hover,
  .desktop-nav a:focus-visible{border-bottom-color:var(--ink)}

  .section{padding-block:116px}
  h1{font-size:clamp(66px,5.6vw,88px);line-height:.99}
  h2{font-size:44px;line-height:1.06}
  h3{font-size:29px}
  p{font-size:19px;line-height:1.58}
  .small{font-size:16px}

  footer{padding:56px 48px 42px}
  .ftop,.fbottom{
    width:min(100%,1180px);
    margin-inline:auto;
  }
  .fbottom{margin-top:44px}
}
@media (min-width:1180px){
  .desktop-nav{gap:38px;font-size:15px}
}

@media (min-width:900px){
  .pagehead{padding-block:130px 118px}
  .pagehead>.inner{
    display:grid;
    grid-template-columns:minmax(310px,.7fr) minmax(0,1.3fr);
    gap:110px;
    align-items:start;
  }
  .pagehead h1{grid-column:1;margin:0}
  .pagehead .lead,
  .pagehead .lead ~ p{
    grid-column:2;
    max-width:720px;
  }
  .pagehead .lead{
    font-size:31px;
    line-height:1.3;
    margin-top:4px;
  }
  .pagehead:before{
    width:360px;height:410px;right:-100px;bottom:-120px
  }
  .pagehead:after{
    width:310px;height:350px;right:120px;bottom:-150px
  }

  .about-intro-pair{
    display:grid;
    grid-template-columns:minmax(420px,.9fr) minmax(0,1.1fr);
    min-height:760px;
    border-bottom:1px solid var(--line);
  }
  .about-intro-pair>section{border-bottom:0}
  .about-intro-pair .portrait-section{
    min-width:0;
  }
  .about-intro-pair .portrait{
    height:100%;
    min-height:760px;
    aspect-ratio:auto;
    border:0;
    border-right:1px solid var(--line);
  }
  .about-intro-pair .encounter-section{
    display:flex;
    align-items:center;
    padding:90px 0;
  }
  .about-intro-pair .encounter-section>.inner{
    width:min(100% - 80px,620px);
    margin-inline:auto;
  }

  .about-section>.inner{
    display:grid;
    grid-template-columns:minmax(300px,.76fr) minmax(0,1.24fr);
    gap:100px;
    align-items:start;
  }
  .about-heading{
    grid-column:1;
    position:sticky;
    top:120px;
  }
  .about-heading h2{
    max-width:450px;
  }
  .about-body{
    grid-column:2;
    max-width:720px;
  }
  .about-section .quote{
    font-size:42px;
    line-height:1.16;
  }
  .about-section .qualification{
    margin-top:36px;
  }
  .about-closing>.inner{
    display:grid;
    grid-template-columns:minmax(300px,.76fr) minmax(0,1.24fr);
    gap:100px;
    align-items:start;
  }
  .about-closing .about-heading h2{font-size:46px}
}

:root{
  --brand-bg:#F1EEE7;
  --brand-paper:#F8F6F1;
  --brand-ink:#202725;
  --brand-dark:#293532;
  --brand-muted:#67716E;
  --brand-line:rgba(32,39,37,.24);
  --terra:#96523C;
  --terra-soft:#E8D6CB;
  --terra-pale:#F2E8E2;
  --petrol:#486F72;
  --petrol-soft:#D5E1DF;
  --petrol-pale:#E8F0EF;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans",Arial,Helvetica,sans-serif;
}
html,body{
  width:100%;
  min-width:0;
  overflow-x:clip;
  background:var(--brand-bg)!important;
}
body{
  color:var(--brand-ink);
  font-family:var(--sans)!important;
  font-optical-sizing:auto;
}
.page{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  overflow:visible!important;
  box-shadow:none!important;
  background:transparent!important;
  position:relative;
  isolation:isolate;
}
header,main,footer{
  position:relative;
  z-index:2;
}
header{
  background:rgba(248,246,241,.91)!important;
  border-color:var(--brand-line)!important;
  backdrop-filter:blur(12px);
}
h1,h2,h3,p,a,button,label,legend,input,textarea,.brand,.desktop-nav{
  font-family:var(--sans)!important;
}
.quote,.closing .quote{
  font-family:var(--serif)!important;
  font-optical-sizing:auto;
  letter-spacing:-.018em;
}
.small,.brand span{color:var(--brand-muted)!important}
main section{
  position:relative;
  overflow:visible!important;
  border-color:var(--brand-line)!important;
}
main section > *:not(.section-line-fragment){
  position:relative;
  z-index:2;
}
.inner{
  position:relative;
  z-index:2;
}
.button{
  background:var(--brand-dark)!important;
  border:1px solid var(--brand-dark);
  color:#fff!important;
  border-radius:3px;
  transition:transform .2s ease,background-color .2s ease;
}
.button:hover{
  transform:translateY(-1px);
  background:#35433F!important;
}
footer{background:var(--brand-dark)!important}

/* One continuous moving geometric room. */
.ambient-space{
  position:fixed;
  z-index:0;
  inset:0;
  width:100vw;
  height:100vh;
  overflow:hidden;
  pointer-events:none;
  background:
    linear-gradient(132deg,var(--ambient-warm),transparent 39%),
    linear-gradient(312deg,var(--ambient-cool),transparent 43%),
    var(--brand-bg);
}
.ambient-plane,.ambient-line{
  position:absolute;
  display:block;
  will-change:translate,rotate;
}
.ambient-plane{
  border:1px solid rgba(32,39,37,.055);
}
.ambient-line{
  height:1px;
  background:rgba(32,39,37,.18);
  transform-origin:center;
}
.ambient-plane-a{
  width:39vw;height:56vh;right:-13vw;top:14vh;
  background:var(--plane-a);
  transform:skewY(-13deg);
}
.ambient-plane-b{
  width:35vw;height:49vh;left:-12vw;bottom:4vh;
  background:var(--plane-b);
  transform:skewY(11deg);
}
.ambient-plane-c{
  width:34vw;height:52vh;left:10vw;top:-16vh;
  background:var(--plane-c);
  transform:skewY(-11deg) rotate(4deg);
}
.ambient-plane-d{
  width:40vw;height:48vh;right:-12vw;top:49vh;
  background:var(--plane-d);
  transform:skewY(13deg) rotate(-5deg);
}
.ambient-line-a{width:91vw;left:-24vw;top:18vh;transform:rotate(27deg)}
.ambient-line-b{width:86vw;right:-24vw;top:79vh;transform:rotate(-22deg)}
.ambient-line-c{width:1px;height:104vh;left:46%;top:-8vh;transform:rotate(13deg)}
.ambient-line-d{width:78vw;left:10vw;top:53vh;transform:rotate(-32deg)}
.ambient-line-e{width:1px;height:92vh;right:18%;top:11vh;transform:rotate(-16deg)}
.ambient-line-f{width:75vw;left:-19vw;top:68vh;transform:rotate(18deg)}
.ambient-line-g{width:69vw;right:-17vw;top:35vh;transform:rotate(-27deg)}
.ambient-line-h{width:1px;height:86vh;left:24%;top:7vh;transform:rotate(-9deg)}

/* Exactly one thin rotating line per main section. */
.section-line-fragment{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:visible;
}
.section-line-fragment span{
  --motion-angle:0deg;
  position:absolute;
  top:var(--line-y);
  width:var(--line-length);
  height:1px;
  background:var(--section-line);
  transform:rotate(calc(var(--base-angle) + var(--motion-angle)));
  transform-origin:var(--pivot) 50%;
  will-change:transform;
}
.section-line-fragment[style*="--line-left"] span{left:var(--line-left)}
.section-line-fragment[style*="--line-right"] span{right:var(--line-right)}

/* Strong short lines retain the Startseite movement logic. */
.rule{
  will-change:translate;
}

/* Text lives on translucent surfaces, never on a separate page card. */
.pagehead{background:var(--surface-head)!important}
.finder,.form-section{background:var(--surface-main)!important}
.topic,.about-section,.encounter-section,.direct{background:var(--surface-main)!important}
.topic:nth-child(even),.soft{background:var(--surface-alt)!important}
.closing,.fit,.frame,.cta,.mix{background:var(--surface-alt)!important}

/* Finder interactions use one continuous colour field. */
.finder-item{
  transition:background-color .22s ease;
}
.finder-item.is-open{
  background:var(--finder-open)!important;
}
.finder-item.is-open .finder-choice,
.finder-item.is-open .finder-answer,
.finder-choice[aria-expanded="true"]{
  background:transparent!important;
}
.finder-answer[hidden]{display:none!important}
.finder-choice{
  transition:padding .22s ease;
}
.finder-item.is-open .finder-choice{
  padding-inline:16px;
}
.finder-item.is-open .finder-answer{
  padding-inline:16px;
}
.finder-marker{border-color:var(--accent)!important}
.finder-choice[aria-expanded="true"] .finder-marker:after{background:var(--accent)!important}

/* Portrait placeholder uses the established mixed mineral treatment. */
.portrait{
  background:
    linear-gradient(135deg,#D8D4CC 0 43%,#B7C2BE 43% 51%,#E4D9CF 51% 100%)!important;
  border-color:rgba(32,39,37,.20)!important;
  overflow:hidden;
  position:relative;
}
.portrait:after{
  content:"";
  position:absolute;
  inset:auto -14% -10% 34%;
  height:44%;
  border:1px solid rgba(32,39,37,.28);
  transform:rotate(-8deg);
}
.sil{background:#767F7B!important}
.sil:before{background:#646C69!important}

/* Full viewport at every breakpoint; only content width changes. */
@media(min-width:900px){
  body{background:var(--brand-bg)!important}
  .page{width:100%!important}
  .inner{width:min(100% - 96px,1180px)}
}
@media(min-width:600px) and (max-width:899px){
  .inner{
    width:min(100% - 72px,720px);
    margin-inline:auto;
    padding-inline:0;
  }
  header{padding-inline:36px}
}
@media(max-width:599px){
  .ambient-line{background:rgba(32,39,37,.16)}
  .ambient-plane-a{width:73vw;right:-39vw}
  .ambient-plane-b{width:70vw;left:-38vw}
  .ambient-plane-c{width:72vw;left:-28vw}
  .ambient-plane-d{width:78vw;right:-39vw}
  .section-line-fragment span{
    width:calc(var(--line-length) * 1.4);
    background:var(--section-line-mobile);
  }
}
@media(prefers-reduced-motion:reduce){
  .ambient-plane,.ambient-line,.section-line-fragment span,.rule{
    translate:0 0!important;
    rotate:0deg!important;
    transition:none!important;
  }
}

:root{
  --accent:var(--brand-ink);
  --ambient-warm:rgba(150,82,60,.075);
  --ambient-cool:rgba(72,111,114,.085);
  --plane-a:rgba(150,82,60,.085);
  --plane-b:rgba(72,111,114,.095);
  --plane-c:rgba(213,225,223,.075);
  --plane-d:rgba(232,214,203,.072);
  --section-line:rgba(32,39,37,.23);
  --section-line-mobile:rgba(32,39,37,.19);
  --surface-head:rgba(248,246,241,.76);
  --surface-main:rgba(248,246,241,.75);
  --surface-alt:rgba(241,238,231,.70);
  --finder-open:linear-gradient(100deg,rgba(232,214,203,.62),rgba(213,225,223,.52));
}
.pagehead:before{background:rgba(232,214,203,.78)!important}
.pagehead:after{
  border-color:rgba(32,39,37,.18)!important;
  background:rgba(213,225,223,.52)!important;
}

/* Über mich V2: horizontal moving rule between paragraphs 2 and 3. */
.qualification-third{
  border-left:0!important;
  padding-left:0!important;
  margin-top:0!important;
}
.qualification-moving-rule{
  width:82px;
  margin-top:30px;
  margin-bottom:28px;
  margin-left:18%;
  will-change:translate;
}