@font-face{font-family:Poppins;src:url("assets/fonts/Poppins-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Poppins;src:url("assets/fonts/Poppins-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Poppins;src:url("assets/fonts/Poppins-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
:root{--paper:#f2edde;--soft:#fffdf7;--ink:#111318;--blue:#2446d8;--lime:#caff28;--pad:clamp(1.25rem,4.5vw,5rem);--ease:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.6 Poppins,Arial,sans-serif}a{color:inherit;text-decoration:none}button,textarea{font:inherit}button,a,summary{-webkit-tap-highlight-color:transparent}img{display:block;max-width:100%;height:auto}button{color:inherit}h1,h2,h3,p,figure{margin:0}button,summary{cursor:pointer}:focus-visible{outline:3px solid currentColor;outline-offset:5px}.skip-link{position:fixed;z-index:100;left:1rem;top:1rem;padding:.6rem 1rem;background:var(--lime);transform:translateY(-180%)}.skip-link:focus{transform:none}.construction{display:flex;justify-content:space-between;gap:1rem;padding:.5rem var(--pad);background:var(--ink);color:var(--soft);font-size:.68rem}.construction a:hover{color:var(--lime)}
.site-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:2rem;min-height:104px;padding:1.2rem var(--pad);background:var(--soft);border-bottom:1px solid var(--ink)}.brand{display:block;width:clamp(180px,18vw,245px);flex-shrink:0}.brand img{width:100%;height:auto}.site-header #navigation{display:flex;gap:clamp(.8rem,2vw,2rem);align-items:center;font-size:.88rem;font-weight:600}.site-header #navigation a{padding:.45rem .7rem}.site-header #navigation a:hover,.site-header #navigation a:focus-visible{background:var(--lime)}.menu-toggle{min-height:44px;display:none;align-items:center;gap:.6rem;padding:.6rem 0;border:0;background:none;font-size:.85rem;font-weight:600}.triangle{display:inline-block;flex-shrink:0;background:currentColor;width:28px;height:24px;clip-path:polygon(0 0,100% 0,50% 100%)}
.hero{display:grid;grid-template-columns:1.18fr 1fr;min-height:calc(100svh - 140px)}.hero-copy{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(3.5rem,6vw,7.5rem) var(--pad)}h1{font-weight:600;font-size:clamp(3.6rem,6.6vw,7rem);line-height:1.04;letter-spacing:-.045em}.hero-intro{max-width:39ch;margin-top:2rem;font-size:clamp(1rem,1.4vw,1.25rem);line-height:1.65}.direction-link{display:inline-flex;align-items:center;justify-content:space-between;gap:1.8rem;margin-top:2.5rem;padding:.85rem 1.1rem;border:1px solid var(--ink);font-size:.8rem;font-weight:600;transition:background .2s}.direction-link .triangle{width:23px;height:20px;color:var(--blue)}.direction-link:hover,.direction-link:focus-visible{background:var(--lime)}.hero-portrait{position:relative;min-width:0;min-height:600px;background:var(--soft);overflow:hidden}.hero-portrait>img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:center 33%}.hero-portrait figcaption{position:absolute;right:clamp(1.25rem,2.5vw,2.5rem);bottom:clamp(1.25rem,2.5vw,2.5rem);left:clamp(1.25rem,2.5vw,2.5rem);padding:1rem 1.2rem;background:var(--paper);font-size:1rem;font-weight:600;line-height:1.4}.hero-portrait figcaption span{display:block;margin-top:.3rem;font-size:.75rem;font-weight:400;line-height:1.5}
.work-section{padding:clamp(4rem,8vw,8rem) var(--pad);background:var(--soft)}.section-intro{display:flex;justify-content:space-between;gap:3rem;align-items:flex-end;margin-bottom:3rem}.section-intro h2{font-size:clamp(2.9rem,5.6vw,5.5rem);font-weight:600;line-height:1;letter-spacing:-.04em}.section-intro>p{max-width:36ch;font-size:.95rem;line-height:1.65}.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.25rem,3vw,3rem);align-items:start}.work-stack{display:grid;gap:clamp(1.5rem,3vw,3rem)}.project{min-width:0;background:var(--paper)}.project summary{display:block;list-style:none}.project summary::-webkit-details-marker{display:none}.project-visual{display:flex;justify-content:center;align-items:center;overflow:hidden}.project-visual img{width:100%;height:100%;object-fit:contain}.project-visual.empathy{background:#03a0d8;padding:clamp(1rem,3vw,3rem);aspect-ratio:.77}.project-visual.empathy img{height:100%;width:auto;max-width:100%}.project-visual.stickers,.project-visual.type-study{aspect-ratio:2/1}.project-visual.stickers{background:var(--ink)}.project-visual.type-study{background:#000}.project-heading{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.3rem 1.5rem 1.5rem;transition:background .2s,color .2s}.project-kind{display:block;font-size:.69rem;margin-bottom:.55rem}.project-heading h3{font-size:clamp(1.55rem,2.4vw,2.6rem);line-height:1.1;font-weight:600;letter-spacing:-.035em;overflow-wrap:anywhere}.project-toggle{flex-shrink:0;width:23px;height:20px;background:var(--blue);clip-path:polygon(0 0,100% 0,50% 100%);transition:transform .3s var(--ease)}.project:not([open]) summary:hover .project-heading,.project:not([open]) summary:focus-visible .project-heading{background:var(--lime)}.project[open]{background:var(--blue);color:var(--soft)}.project[open] .project-heading{background:var(--blue)}.project[open] .project-toggle{transform:rotate(180deg);background:var(--soft)}.project-content{padding:0 1.5rem 1.8rem;font-size:.95rem;line-height:1.7}.project-content p+p{margin-top:.8rem}.text-link{display:inline-block;margin-top:1.4rem;padding:.6rem .8rem;border:1px solid currentColor;font-size:.75rem;font-weight:600}.text-link:hover,.text-link:focus-visible{background:var(--lime);color:var(--ink);border-color:var(--lime)}.work-footnote{display:flex;justify-content:space-between;gap:2rem;margin-top:2rem;font-size:.78rem}.small-link{font-weight:600}.small-link:hover{background:var(--lime)}
.about{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,6rem);padding:clamp(4.5rem,8vw,8rem) var(--pad);background:var(--blue);color:var(--soft)}.about h2{font-size:clamp(2.9rem,5.1vw,5.4rem);line-height:1.06;letter-spacing:-.04em;font-weight:600}.about-copy>p{max-width:57ch;margin-bottom:1.3rem;font-size:1rem}.about-copy .lead{font-size:clamp(1.15rem,1.7vw,1.5rem);line-height:1.55}.about-contact{display:inline-flex;align-items:center;gap:1.4rem;margin-top:.4rem;padding:.8rem 1rem;border:1px solid currentColor;font-size:.8rem;font-weight:600}.about-contact .triangle{width:21px;height:18px}.about-contact:hover,.about-contact:focus-visible{background:var(--lime);color:var(--ink);border-color:var(--lime)}.background{padding:clamp(3.5rem,6vw,6rem) var(--pad)}.background>h2{font-size:clamp(1.8rem,3vw,3rem);font-weight:600;line-height:1.2;letter-spacing:-.025em;margin-bottom:2.5rem}.background-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,6rem)}.background-grid h3{font-size:1.1rem;font-weight:600;margin-bottom:.75rem}.background-grid p{max-width:54ch;font-size:.95rem;line-height:1.8}
.contact{position:relative;min-height:clamp(320px,48vw,620px);background:var(--paper)}.contact-flap{position:absolute;inset:0;width:100%;border:0;background:none;color:var(--soft);overflow:hidden}.contact-flap-shape{position:absolute;inset:0;background:var(--blue);clip-path:polygon(0 0,100% 0,50% 100%);transition:background .2s}.contact-flap-label{position:absolute;top:20%;left:50%;transform:translateX(-50%);width:70%;font-size:clamp(2.6rem,5.8vw,6rem);line-height:1.04;font-weight:600;letter-spacing:-.04em}.contact-hint{position:absolute;top:61%;left:50%;transform:translateX(-50%);font-size:.73rem;font-weight:600}.contact-flap:hover .contact-flap-shape,.contact-flap:focus-visible .contact-flap-shape{background:var(--lime)}.contact-flap:hover,.contact-flap:focus-visible{color:var(--ink)}.contact-panel{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:clamp(1.5rem,4.5vw,5rem);border:0;background:var(--blue);color:var(--soft);overflow:auto}.contact-panel::backdrop{background:var(--blue)}body:has(.contact-panel[open]){overflow:hidden}.contact-panel-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:3rem;font-size:.8rem}.contact-close{display:flex;align-items:center;gap:.7rem;min-height:44px;padding:.5rem .8rem;border:1px solid var(--soft);background:none;color:var(--soft);font-size:.8rem}.contact-close span{font-size:1.5rem;line-height:1}.contact-close:hover{background:var(--lime);color:var(--ink);border-color:var(--lime)}.contact-panel>h2{font-size:clamp(2.8rem,6.5vw,6.8rem);font-weight:600;line-height:1.1;letter-spacing:-.04em}.contact-intro{margin-top:1rem;font-size:clamp(1rem,1.5vw,1.3rem)}.contact-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(2rem,5vw,6rem);margin-top:3rem}.contact-compose label{display:block;margin-bottom:.7rem;font-size:.85rem;font-weight:600}.contact-compose textarea{width:100%;resize:vertical;border:1px solid var(--soft);border-radius:0;background:none;padding:1rem;color:var(--soft);font-size:1rem}.contact-compose textarea::placeholder{color:var(--soft);opacity:.7}.contact-note{max-width:65ch;margin-top:.85rem;font-size:.75rem;line-height:1.7}.contact-direct{display:grid;align-content:start;gap:.8rem}.contact-button{display:block;padding:1rem 1.2rem;border:1px solid var(--soft);font-size:.9rem;font-weight:600}.contact-button:hover,.contact-button:focus-visible{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.site-footer{display:flex;justify-content:space-between;align-items:center;gap:2rem;padding:2rem var(--pad);background:var(--ink);color:var(--soft)}.footer-logo{display:block;width:190px;flex-shrink:0}.footer-logo img{width:100%;height:auto}.footer-links{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.6rem 1.4rem;font-size:.73rem}.footer-links a:hover{color:var(--lime)}
.legal-page{background:var(--paper)}.legal-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem var(--pad);background:var(--soft)}.legal-header .brand{width:210px}.back-link{font-size:.8rem;font-weight:600}.legal-main{padding:4rem var(--pad)}.legal-intro h1{font-size:clamp(2.8rem,6vw,5rem);overflow-wrap:anywhere}.legal-intro .eyebrow{font-size:.8rem;margin-bottom:1rem}.legal-source{max-width:76ch;margin:3rem auto;font-size:.9rem;line-height:1.8}.legal-source p{margin-bottom:1rem}.legal-source h2{font-size:1.5rem;margin:2rem 0 1rem}.legal-source a{overflow-wrap:anywhere}.retired{min-height:100svh;display:grid;place-items:center;padding:2rem}.retired main{max-width:50rem}.retired h1{font-size:clamp(2.5rem,6vw,5rem);margin-bottom:2rem}.retired a{display:inline-block;padding:.8rem 1rem;border:1px solid currentColor}.retired a:hover{background:var(--lime)}
@media(min-width:1600px){.hero{min-height:880px}.hero-copy{padding-right:clamp(3rem,5vw,6rem)}}
@media(max-width:1000px){.hero{grid-template-columns:1.12fr 1fr;min-height:680px}h1{font-size:clamp(3rem,6.5vw,5rem)}.hero-copy{padding-top:3rem;padding-bottom:3rem}.hero-portrait{min-height:680px}.section-intro{align-items:flex-start}.section-intro>p{max-width:30ch}.about{gap:2.5rem}.about h2{font-size:clamp(2.7rem,5.2vw,4rem)}.project-heading{padding:1.1rem}.project-content{padding:0 1.1rem 1.5rem}}
@media(max-width:740px){html{scroll-padding-top:90px}.construction{font-size:.6rem;padding-top:.55rem;padding-bottom:.55rem}.site-header{min-height:84px;padding-top:1rem;padding-bottom:1rem;gap:1rem}.brand{width:175px}.menu-toggle{display:flex}.menu-toggle .triangle{width:14px;height:12px;transition:transform .2s}.menu-toggle[aria-expanded=true] .triangle{transform:rotate(180deg)}.site-header #navigation{display:none;position:absolute;top:100%;left:0;right:0;background:var(--soft);padding:1rem var(--pad);border-bottom:1px solid var(--ink);gap:.4rem;align-items:stretch}.site-header #navigation.is-open{display:flex;flex-direction:column}.site-header #navigation a{padding:.8rem 0}.hero{grid-template-columns:1fr;min-height:0}.hero-copy{padding:3.5rem var(--pad) 3rem}h1{font-size:clamp(3.1rem,11.7vw,5.3rem);letter-spacing:-.045em;line-height:1.06}.hero-intro{font-size:1rem;max-width:37ch;margin-top:1.5rem}.direction-link{margin-top:1.8rem}.hero-portrait{min-height:0;aspect-ratio:1/.95}.hero-portrait>img{object-position:center 24%}.hero-portrait figcaption{right:1.25rem;left:1.25rem;bottom:1.25rem;padding:.85rem 1rem;font-size:.9rem}.section-intro{flex-direction:column;gap:1.2rem;margin-bottom:2rem}.section-intro h2{font-size:clamp(2.9rem,10vw,4rem)}.section-intro>p{max-width:none;font-size:.85rem}.work-grid{grid-template-columns:1fr;gap:1.5rem}.work-stack{gap:1.5rem}.project-visual.empathy{padding:1.5rem;aspect-ratio:.85}.project-heading h3{font-size:clamp(1.65rem,6vw,2.4rem)}.project-kind{font-size:.67rem}.project-content{font-size:.9rem}.work-footnote{flex-direction:column;gap:.65rem;font-size:.73rem}.about{grid-template-columns:1fr;gap:2rem;padding-top:4rem;padding-bottom:4rem}.about h2{font-size:clamp(2.8rem,10vw,4.5rem)}.about-copy .lead{font-size:1.15rem}.about-copy>p{font-size:.93rem}.background-grid{grid-template-columns:1fr;gap:1.8rem}.background>h2{font-size:2rem;margin-bottom:2rem}.contact{min-height:330px}.contact-flap-label{top:18%;width:86%;font-size:clamp(2rem,8.3vw,3.2rem)}.contact-hint{top:59%;font-size:.65rem}.contact-panel-head{margin-bottom:2rem;font-size:.7rem}.contact-close{font-size:.75rem}.contact-grid{grid-template-columns:1fr;gap:1.6rem;margin-top:2rem}.contact-compose textarea{min-height:150px}.contact-panel>h2{font-size:clamp(2.7rem,10vw,4rem)}.site-footer{align-items:flex-start;flex-direction:column;gap:1.5rem}.footer-logo{width:175px}.footer-links{justify-content:flex-start;font-size:.73rem}.legal-header{gap:1rem}.legal-header .brand{width:160px}.back-link{font-size:.7rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}

@media(max-width:380px){.project-heading h3{font-size:1.2rem}.project-heading{gap:.65rem}}

/* Lebenslauf und Kontakt: Inhalt folgt der geöffneten Fläche. */
.resume-heading{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;list-style:none;padding:1.5rem 0}
.resume-heading::-webkit-details-marker{display:none}
.resume-heading h2{font-size:clamp(1.8rem,3vw,3rem);font-weight:600;line-height:1.15;letter-spacing:-.025em}
.resume-heading p{margin-top:.5rem;font-size:clamp(.8rem,1.3vw,1rem)}
.resume-hint{display:block;font-size:.75rem;margin-top:1rem}
.resume-open{display:none}.resume[open] .resume-closed{display:none}.resume[open] .resume-open{display:inline}
.resume:not([open]) summary:hover{background:var(--lime)}
.resume[open]{background:var(--blue);color:var(--soft)}
.resume[open] .resume-heading,.resume[open] .background-grid{padding-left:clamp(1.25rem,3vw,3rem);padding-right:clamp(1.25rem,3vw,3rem)}
.resume[open] .project-toggle{transform:rotate(180deg);background:var(--soft)}
.resume .background-grid{padding-top:1.5rem;padding-bottom:2rem}
.contact-flap-label{top:12%;width:70%;font-size:clamp(1.5rem,5.8vw,6rem)}
.contact-flap-label>span{display:block;width:max-content;max-width:100%;margin-inline:auto;white-space:nowrap}
.contact-hint{top:66%;white-space:nowrap}

/* Originaldreieck: um 90 Grad gedreht 312.794 × 156.367, also 2:1. */
.contact{min-height:0;aspect-ratio:312.794 / 156.367}
.contact-flap-label{top:10%;font-size:clamp(1rem,6vw,6rem)}
.contact-hint{top:62%}
.triangle,.direction-link .triangle,.about-contact .triangle,.menu-toggle .triangle,.project-toggle{height:auto;aspect-ratio:312.794 / 156.367}

/* Portfolio: prägnanter Einstieg und direkt sichtbare Werk-Auszeichnungen. */
.hero h1{font-size:clamp(2.5rem,5vw,5.5rem);line-height:1.07;letter-spacing:-.04em}
.project-award{display:table;margin-bottom:.8rem;padding:.4rem .65rem;background:var(--blue);color:var(--soft);font-size:.73rem;line-height:1.4;font-weight:600}
.project[open] .project-award{background:var(--soft);color:var(--blue)}
.award-source{display:block;width:fit-content;margin-top:1rem;font-size:.75rem;font-weight:600;padding:.3rem 0}
.award-source:hover,.award-source:focus-visible{background:var(--lime);color:var(--ink)}
.section-intro h2{max-width:11ch}
@media(max-width:740px){.hero h1{font-size:clamp(1.9rem,8.8vw,4.2rem)}}

/* Der Personenname im Portrait führt direkt zum geöffneten Lebenslauf. */
.portrait-profile{display:grid;grid-template-columns:1fr auto;align-items:center;gap:0 1rem;padding:.4rem 0;min-height:44px}
.portrait-profile strong{font-weight:600}
.hero-portrait figcaption .profile-arrow{width:24px;margin:0;color:var(--blue)}
.hero-portrait figcaption .profile-more{grid-column:1 / -1;font-size:.7rem;font-weight:400;margin-top:.25rem}
.portrait-profile:hover,.portrait-profile:focus-visible{background:var(--lime)}
