/* ==========================================================================
   patrickwoessner.com
   No frameworks, no webfonts, no external requests.
   ========================================================================== */

:root{
  --bg:#fbfbfa;
  --surface:#ffffff;
  --surface-2:#f4f6f9;
  --ink:#111a26;
  --body:#39434f;
  --muted:#6c7787;
  --rule:#e3e7ee;
  --rule-soft:#eef1f5;
  --accent:#1c5ea8;
  --accent-ink:#164a85;
  --accent-soft:#e9f1fa;
  --good:#0f7357;
  --good-soft:#e6f4ef;
  --shadow:0 1px 2px rgba(16,24,40,.05), 0 8px 24px -12px rgba(16,24,40,.12);
  --radius:12px;
  --measure:38rem;
  --wide:60rem;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0d1116;
    --surface:#141a21;
    --surface-2:#1a222b;
    --ink:#eef2f7;
    --body:#b6c1ce;
    --muted:#8593a3;
    --rule:#232c37;
    --rule-soft:#1c242d;
    --accent:#7db2ec;
    --accent-ink:#a3caf5;
    --accent-soft:#152538;
    --good:#5cc9a4;
    --good-soft:#12291f;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  }
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:5rem;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--body);
  font:17px/1.68 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  font-feature-settings:"kern" 1,"liga" 1;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

a{color:var(--accent);text-underline-offset:.18em;text-decoration-thickness:.06em}
a:hover{color:var(--accent-ink)}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:3px;
}

/* Only horizontal: a shorthand here would override the vertical padding of
   every section it is combined with. */
.wrap{max-width:var(--measure);margin:0 auto;padding-inline:1.5rem}
.small{font-size:.86rem}
.muted{color:var(--muted)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--accent);color:#fff;padding:.7rem 1.1rem;border-radius:0 0 8px 0;
}
.skip:focus{left:0}

/* ------------------------------------------------------------- topbar -- */

.topbar{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter:saturate(180%) blur(10px);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease;
}
.topbar.is-stuck{border-bottom-color:var(--rule)}

.topbar__in{
  max-width:var(--wide);margin:0 auto;padding:.7rem 1.5rem;
  display:flex;align-items:center;gap:1.25rem;
}

.topbar__name{
  font-weight:650;color:var(--ink);text-decoration:none;
  font-size:.94rem;letter-spacing:-.01em;white-space:nowrap;
}

.topbar__nav{display:flex;gap:1.15rem;margin-left:auto;font-size:.88rem}
.topbar__nav a{color:var(--muted);text-decoration:none;white-space:nowrap;transition:color .15s}
.topbar__nav a:hover,.topbar__nav a.is-active{color:var(--ink)}

.langsw{display:flex;gap:.15rem;align-items:center}
.langsw a{
  display:block;padding:.28rem .48rem;font-size:.74rem;font-weight:600;
  letter-spacing:.05em;color:var(--muted);text-decoration:none;border-radius:6px;
  transition:background .15s,color .15s;
}
.langsw a:hover{background:var(--surface-2);color:var(--ink)}
.langsw a.is-on{background:var(--accent-soft);color:var(--accent-ink)}

/* --------------------------------------------------------------- hero -- */

.hero{padding:4.5rem 1.5rem .5rem}
.hero__portrait{
  width:88px;height:88px;border-radius:50%;object-fit:cover;
  display:block;margin-bottom:1.6rem;
  border:1px solid var(--rule);
}

.kicker{
  font-size:.73rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin:0 0 .7rem;
}

h1{
  font-size:clamp(2rem,5.2vw,2.6rem);line-height:1.08;margin:0 0 .7rem;
  letter-spacing:-.028em;color:var(--ink);font-weight:680;
}

.hero__tag{font-size:1.14rem;line-height:1.5;color:var(--ink);margin:0 0 .55rem;max-width:32rem}
.hero__loc{color:var(--muted);font-size:.92rem;margin:0 0 1.9rem}

.hero__cta{display:flex;flex-wrap:wrap;gap:.6rem;margin:0}

/* ------------------------------------------------------------ buttons -- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.62rem 1.15rem;border-radius:9px;border:1px solid var(--rule);
  background:var(--surface);color:var(--ink);
  font:inherit;font-size:.93rem;font-weight:550;line-height:1.3;
  text-decoration:none;cursor:pointer;
  transition:background .15s,border-color .15s,transform .08s,color .15s;
}
.btn:hover{background:var(--surface-2);border-color:var(--muted);color:var(--ink)}
.btn:active{transform:translateY(1px)}

.btn--primary{
  background:var(--accent);border-color:var(--accent);color:#fff;
  box-shadow:var(--shadow);
}
.btn--primary:hover{background:var(--accent-ink);border-color:var(--accent-ink);color:#fff}
.btn--small{padding:.44rem .85rem;font-size:.86rem}
.btn[disabled]{opacity:.55;cursor:progress}

/* ------------------------------------------------------------ metrics -- */

/* Not a .wrap: the hairline grid needs its background flush with the cells,
   so it carries its own width instead of inheriting .wrap's padding. */
.metrics{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  width:calc(100% - 3rem);max-width:var(--wide);
  margin:2.6rem auto 1rem;padding:0;
  background:var(--rule);border:1px solid var(--rule);border-radius:var(--radius);
  overflow:hidden;
}
.metric{background:var(--surface);padding:1.15rem 1.1rem}
.metric__v{
  display:block;font-size:1.42rem;font-weight:660;color:var(--ink);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.15;
}
.metric__l{display:block;font-size:.78rem;line-height:1.4;color:var(--muted);margin-top:.3rem}

/* -------------------------------------------------------- section base -- */

section{padding:3.1rem 1.5rem}

h2{
  font-size:.74rem;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);
  margin:0 0 1.1rem;font-weight:700;
}

h3{font-size:1.12rem;line-height:1.35;color:var(--ink);margin:0 0 .55rem;letter-spacing:-.012em;font-weight:640}
h4{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:1.1rem 0 .4rem;font-weight:700}

p{margin:0 0 1rem}
p:last-child{margin-bottom:0}
strong,b{color:var(--ink);font-weight:640}

.lede{color:var(--muted);margin-bottom:1.5rem}

/* Deliberately restrained: a short fade, no movement. The content should
   arrive, not perform. */
.reveal{opacity:0;transition:opacity .35s ease}
.reveal.is-in{opacity:1}
.no-js .reveal{opacity:1}

/* ---------------------------------------------------------------- now -- */

.now{margin:0;padding-left:1.15rem}
.now li{margin-bottom:.55rem}
.now li::marker{color:var(--accent)}

/* --------------------------------------------------------------- quiz -- */

.linklike{
  appearance:none;background:none;border:0;padding:0;
  font:inherit;font-size:.9rem;color:var(--accent);
  text-decoration:underline;text-underline-offset:.18em;cursor:pointer;
}
.linklike:hover{color:var(--accent-ink)}

.quiz__skip{margin:-.75rem 0 1.2rem}
.no-js .quiz__skip{display:none}

/* Reading mode: every case visible, resolutions open, no quiz chrome. */
.quiz--open .case{display:block}
.quiz--open .reveal-box__nav{display:none}
.reveal-box__verdict:empty{display:none}

.quiz{margin-top:.5rem}

.case{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
  padding:1.45rem 1.5rem;margin-bottom:1rem;box-shadow:var(--shadow);
}
.js .case{display:none}
.js .case.is-current{display:block}

.case__step{
  font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin:0 0 .5rem;
}
.case__sit{margin-bottom:1.1rem}

.opts{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}

.opt{
  display:flex;gap:.75rem;align-items:flex-start;width:100%;text-align:left;
  padding:.72rem .9rem;border:1px solid var(--rule);border-radius:9px;
  background:var(--bg);color:var(--body);font:inherit;font-size:.94rem;line-height:1.5;
  cursor:pointer;transition:border-color .15s,background .15s;
}
.opt:hover{border-color:var(--accent);background:var(--accent-soft)}
[data-answered] .opt{cursor:default}
[data-answered] .opt:not(.is-picked):not(.is-answer):hover{border-color:var(--rule);background:var(--bg)}
.reveal-box:focus{outline:none}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

.opt__k{
  flex:0 0 1.35rem;height:1.35rem;border-radius:5px;background:var(--surface-2);
  display:grid;place-items:center;font-size:.72rem;font-weight:700;color:var(--muted);
  margin-top:.1rem;
}
.opt.is-picked{border-color:var(--accent);background:var(--accent-soft)}
.opt.is-picked .opt__k{background:var(--accent);color:#fff}
.opt.is-answer{border-color:var(--good);background:var(--good-soft)}
.opt.is-answer .opt__k{background:var(--good);color:#fff}

.reveal-box{
  margin-top:1.15rem;padding-top:1.15rem;border-top:1px solid var(--rule-soft);
  animation:fade .25s ease;
}
@keyframes fade{from{opacity:0}to{opacity:1}}

.reveal-box__verdict{
  font-size:.74rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  margin:0 0 .35rem;
}
.reveal-box__verdict.is-match{color:var(--good)}
.reveal-box__verdict.is-diff{color:var(--muted)}

.reveal-box__out{
  margin-top:.9rem;padding:.75rem .95rem;background:var(--surface-2);
  border-radius:9px;font-size:.93rem;
}
.tagline{
  font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);margin-right:.4rem;
}
/* Citation line: the claim above is verifiable in public. */
.src{margin:.7rem 0 0;font-size:.82rem;line-height:1.5}
.src__k{
  font-size:.68rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin-right:.5rem;
}
.src a::after,.card__src::after{content:" \2197";font-size:.9em}

.card__src{display:block;margin-top:.45rem;font-size:.84rem}

.reveal-box__nav{margin:1.1rem 0 0}

.score{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
  padding:1.6rem 1.5rem;text-align:center;box-shadow:var(--shadow);
}
.score__n{
  font-size:1.25rem;font-weight:660;color:var(--ink);margin:0 0 .5rem;letter-spacing:-.015em;
}
.score__t{color:var(--muted);max-width:28rem;margin:0 auto 1.1rem}

/* ----------------------------------------------------------- outcomes -- */

.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.15rem}
.chip{
  padding:.36rem .78rem;border-radius:99px;border:1px solid var(--rule);
  background:var(--surface);color:var(--muted);
  font:inherit;font-size:.82rem;font-weight:550;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
}
.chip:hover{border-color:var(--accent);color:var(--ink)}
.chip.is-on{background:var(--accent);border-color:var(--accent);color:#fff}
.no-js .chips{display:none}

.cards{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.card{
  display:grid;grid-template-columns:7.5rem 1fr;gap:1rem;align-items:baseline;
  padding:.85rem 1.05rem;background:var(--surface);
  border:1px solid var(--rule);border-radius:10px;
  transition:opacity .25s ease,border-color .15s;
}
.card:hover{border-color:var(--muted)}
.card[hidden]{display:none}
.card__m{
  font-weight:680;color:var(--ink);font-size:1rem;letter-spacing:-.015em;
  font-variant-numeric:tabular-nums;
  /* German compounds like "Attributionskontrolle" have no natural break and
     would otherwise overflow the fixed label column. */
  hyphens:auto;
  overflow-wrap:anywhere;
}
.card__t{font-size:.93rem;line-height:1.55}

/* ---------------------------------------------------------------- how -- */

.how div{margin-bottom:1.05rem}
.how div:last-child{margin-bottom:0}

/* ------------------------------------------------------------- career -- */

.cvlist{list-style:none;margin:0;padding:0}
.cvlist li{
  display:flex;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--rule-soft);
  font-size:.94rem;align-items:baseline;
}
.cvlist li:last-child{border-bottom:none}
.cvlist .yr{flex:0 0 6.5rem;color:var(--muted);font-variant-numeric:tabular-nums;font-size:.86rem}
.cvlist .ro{color:var(--ink)}
.cvlist .ro span{color:var(--muted)}
.langs{margin-top:1.2rem;font-size:.9rem;color:var(--muted)}

/* --------------------------------------------------------------- tabs -- */

/* Offset anchor target for the CV tab, so #cv lands below the sticky bar. */
.anchor{display:block;height:0;scroll-margin-top:5rem}

.tabs{
  display:flex;gap:.25rem;margin-bottom:1.35rem;
  border-bottom:1px solid var(--rule);
}
.no-js .tabs{display:none}

.tab{
  appearance:none;background:none;border:0;
  border-bottom:2px solid transparent;margin-bottom:-1px;
  padding:.6rem .9rem;
  font:inherit;font-size:.94rem;font-weight:550;color:var(--muted);
  cursor:pointer;transition:color .15s,border-color .15s;
}
.tab:hover{color:var(--ink)}
.tab.is-on{color:var(--ink);border-bottom-color:var(--accent)}
.tab:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:6px 6px 0 0}

.panel:focus{outline:none}
.panel + .panel{margin-top:2.4rem}
.js .panel + .panel{margin-top:0}

/* The heading is the tab label once tabs exist, so it only needs to stay
   available to screen readers. Without JS it is the visible heading. */
.panel__h{font-size:1.05rem;margin:0 0 .6rem}
.js .panel__h{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

@media (max-width:560px){
  .tabs{gap:0}
  .tab{padding:.6rem .7rem;font-size:.9rem;flex:1 1 auto}
}

/* --------------------------------------------------------------- box --- */

.box{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
  padding:1.5rem;box-shadow:var(--shadow);
}

.note{
  padding:.8rem 1rem;border-radius:9px;font-size:.93rem;margin:0 0 1.15rem;
  border:1px solid;
}
.note--ok{background:var(--good-soft);border-color:var(--good);color:var(--ink)}
.note--bad{background:var(--accent-soft);border-color:var(--accent);color:var(--ink)}

/* -------------------------------------------------------------- forms -- */

.form{margin:0}
.row{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.f{margin:0 0 .95rem}
.f--third{max-width:16rem}

.f label{
  display:block;font-size:.82rem;font-weight:600;color:var(--ink);margin-bottom:.3rem;
}
.opt-tag{font-weight:400;color:var(--muted);font-size:.78rem}

.f input,.f select,.f textarea{
  width:100%;padding:.6rem .75rem;
  border:1px solid var(--rule);border-radius:9px;
  background:var(--bg);color:var(--ink);
  font:inherit;font-size:.95rem;
  transition:border-color .15s,box-shadow .15s;
}
.f textarea{resize:vertical;min-height:5rem;line-height:1.55}
.f input:focus,.f select:focus,.f textarea:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.f input:user-invalid,.f textarea:user-invalid{border-color:#c0392b}

.f select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 1.1rem) 55%,calc(100% - .75rem) 55%;
  background-size:.35rem .35rem,.35rem .35rem;
  background-repeat:no-repeat;
  padding-right:2.2rem;
}

.consent{margin:.3rem 0 1.15rem}
.consent label{display:flex;gap:.6rem;align-items:flex-start;font-size:.86rem;line-height:1.5;color:var(--muted);cursor:pointer}
.consent input{margin-top:.22rem;accent-color:var(--accent);flex:0 0 auto;width:1rem;height:1rem}

.submit{margin:0}

/* The line under the form is a footnote, not part of it. */
.box form + p{
  margin-top:1.5rem;padding-top:1.2rem;
  border-top:1px solid var(--rule-soft);
}

.form__msg{margin:.9rem 0 0;font-size:.92rem}
.form__msg:empty{display:none}
.form__msg.is-ok{color:var(--good)}
.form__msg.is-bad{color:#c0392b}
@media (prefers-color-scheme: dark){.form__msg.is-bad{color:#f08a7d}}

/* Honeypot — off-screen, never focusable, invisible to assistive tech. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* -------------------------------------------------------- legal pages -- */

.legal{max-width:var(--measure);margin:0 auto;padding:3rem 1.5rem 4rem}
.legal h1{font-size:1.55rem;margin-bottom:1.5rem}
.legal h2{font-size:.74rem;margin-top:2rem}
.legal .addr{line-height:1.65}
.legal ul{padding-left:1.15rem;margin:0 0 1rem}
.legal li{margin-bottom:.4rem}
.legal code{
  font:.86em ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:var(--surface-2);padding:.1em .38em;border-radius:4px;
}
.legal .back{display:inline-block;margin-bottom:1.75rem;font-size:.9rem}
.legal__switch{margin-top:2.5rem}
.langsw--right{margin-left:auto}

@media (max-width:560px){
  .legal{padding:2rem 1.25rem 3rem}
}

/* ------------------------------------------------------------- footer -- */

footer{
  border-top:1px solid var(--rule);margin-top:3.5rem;
  padding:2.2rem 1.5rem 4.5rem;font-size:.85rem;color:var(--muted);
  max-width:var(--measure);
}
footer a{color:var(--muted)}
footer a:hover{color:var(--ink)}
footer p{margin:0 0 .6rem}
footer p:last-child{margin-bottom:0}

/* ------------------------------------------------------------ responsive */

@media (max-width:760px){
  .topbar__nav{display:none}
  .topbar__in{gap:.75rem}
  .langsw{margin-left:auto}
  .metrics{grid-template-columns:1fr}
  .row{grid-template-columns:1fr}
}

@media (max-width:560px){
  body{font-size:16px}
  .hero{padding-top:2.75rem}
  section{padding:2.5rem 1.25rem}
  .wrap{padding:0 1.25rem}
  .metrics{width:calc(100% - 2.5rem)}
  .card{grid-template-columns:1fr;gap:.2rem}
  .cvlist li{flex-direction:column;gap:.1rem}
  .cvlist .yr{flex:none}
  .box{padding:1.2rem}
  .case{padding:1.2rem}
}

/* ---------------------------------------------------------- preferences */

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{opacity:1;transform:none}
}

@media print{
  .topbar,.hero__cta,.chips,.skip,#cv,#contact form,.reveal-box__nav,.score{display:none}
  body{background:#fff;color:#000;font-size:11pt}
  .js .case{display:block}
  .card,.case,.box{border-color:#ccc;box-shadow:none;break-inside:avoid}
  a{color:#000;text-decoration:underline}
  .reveal{opacity:1;transform:none}
}