@font-face{
  font-family:'Fraunces'; src:url('fonts/Fraunces.woff2') format('woff2');
  font-weight:300 600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Fraunces'; src:url('fonts/Fraunces-Italic.woff2') format('woff2');
  font-weight:300 600; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'Inter'; src:url('fonts/Inter.woff2') format('woff2');
  font-weight:400 600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'IBM Plex Mono'; src:url('fonts/IBMPlexMono-Regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'IBM Plex Mono'; src:url('fonts/IBMPlexMono-Medium.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Petit Formal Script'; src:url('fonts/PetitFormalScript-Regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}

:root{
  --paper:#EEF0EA;
  --paper-deep:#E4E7DE;
  --ink:#12211F;
  --ink-soft:#4A5B57;
  --brand:#045B65;
  --brand-deep:#033D44;
  --brand-tint:#DCEAEA;
  --brass:#B4822F;
  --line:#C7CDC3;
  --max:1120px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:'Fraunces',serif;
  font-weight:450;
  margin:0 0 .4em;
  letter-spacing:-.01em;
}
a{color:inherit;}
img{max-width:100%;display:block;}
.wrap{max-width:var(--max); margin:0 auto; padding:0 32px;}
.eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--brand);
}
:focus-visible{outline:2px solid var(--brass); outline-offset:3px;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001s !important; animation-delay:0s !important; transition-duration:.001s !important;}
  html{scroll-behavior:auto;}
}

/* ---------- HEADER ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(238,240,234,.88);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 32px;
  max-width:var(--max); margin:0 auto;
}
.logo{display:flex; align-items:center; text-decoration:none;}
.logo img{height:62px; width:auto; display:block;}
nav.links{display:flex; align-items:center; gap:34px;}
nav.links a{
  text-decoration:none; font-size:.92rem; font-weight:500; color:var(--ink-soft);
  transition:color .2s;
}
nav.links a{white-space:nowrap;}
  nav.links a:hover{color:var(--brand);}
.cta-btn{
  display:inline-block;
  background:var(--brand); color:#fff !important;
  font-family:'IBM Plex Mono',monospace;
  font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
  padding:12px 22px; border-radius:2px;
  text-decoration:none;
  transition:background .2s, transform .2s;
  border:1px solid var(--brand);
}
.cta-btn:hover{background:var(--brand-deep); transform:translateY(-1px);}
.cta-btn.outline{background:transparent; color:var(--brand) !important; border-color:var(--brand);}
.cta-btn.outline:hover{background:var(--brand); color:#fff !important;}
.menu-toggle{display:none; background:none; border:none; cursor:pointer; padding:6px;}
.menu-toggle span{display:block; width:24px; height:2px; background:var(--ink); margin:5px 0; transition:.25s;}
.lang-switch{display:flex; align-items:center; gap:6px; font-family:'IBM Plex Mono',monospace; font-size:.74rem; color:var(--ink-soft);}
.lang-switch a{text-decoration:none; color:var(--ink-soft); padding:2px 3px;}
.lang-switch a.active{color:var(--brand); font-weight:600;}
.lang-switch a:hover{color:var(--brand);}
.lang-switch span.sep{color:var(--line);}

/* ---------- HERO ---------- */
.hero{padding:76px 0 40px;}
.hero .wrap{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;}
.hero h1{font-size:clamp(2.3rem,4.4vw,3.6rem); font-weight:450;}
.hero h1 em{font-style:italic; color:var(--brand);}
.hero p.lead{font-size:1.08rem; color:var(--ink-soft); max-width:46ch; margin:18px 0 30px;}
.hero-ctas{display:flex; gap:16px; flex-wrap:wrap;}

.blueprint-frame{
  border:1px solid var(--line); background:#F5F6F1; padding:18px; position:relative;
}
.blueprint-frame::before{
  content:'';
  position:absolute; top:-11px; left:16px; background:var(--paper);
  font-family:'IBM Plex Mono',monospace; font-size:.62rem; letter-spacing:.1em; color:var(--ink-soft); padding:0 8px;
}
.blueprint-frame svg{width:100%; height:auto; display:block;}
.bp-draw{
  stroke-dasharray:1; stroke-dashoffset:1;
  animation:draw 1.4s ease forwards;
}
@keyframes draw{ to{ stroke-dashoffset:0; } }
.bp-fade{ opacity:0; animation:fadein .8s ease forwards; }
@keyframes fadein{ to{opacity:1;} }

/* ---------- STATS BAR ---------- */
.stats{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--brand-tint);
}
.stats .wrap{
  display:grid; grid-template-columns:repeat(3,1fr);
  padding:26px 32px;
}
.stat{padding:0 20px; border-left:1px solid rgba(4,91,101,.22);}
.stat:first-child{border-left:none;}
.stat .num{font-family:'IBM Plex Mono',monospace; font-size:1.5rem; color:var(--brand-deep); font-weight:500;}
.stat .label{font-size:.82rem; color:var(--ink-soft); margin-top:2px;}
.stat-text .label{
  font-family:'IBM Plex Mono',monospace; font-size:1rem; color:var(--brand-deep);
  margin-top:0; line-height:1.4;
}

/* ---------- SECTION GENERIC ---------- */
section{padding:88px 0;}
.section-head{max-width:640px; margin-bottom:52px;}
.section-head h2{font-size:clamp(1.8rem,3vw,2.4rem);}
.section-head p{color:var(--ink-soft); margin-top:10px;}

/* ---------- LEISTUNGEN ---------- */
.services{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.service{background:var(--paper); padding:34px 30px; transition:background .25s;}
.service:hover{background:#F6F7F2;}
.service .tag{font-family:'IBM Plex Mono',monospace; font-size:.68rem; letter-spacing:.09em; color:var(--brass); text-transform:uppercase;}
.service h3{font-size:1.15rem; margin:10px 0 8px; font-weight:600; font-family:'Inter',sans-serif;}
.service h3 a{text-decoration:none;}
.service h3 a:hover{color:var(--brand);}
.service p{color:var(--ink-soft); font-size:.93rem; margin:0;}
.service p a{color:var(--brand); text-decoration:underline; text-decoration-color:rgba(4,91,101,.35);}
.service-wide{grid-column:1 / -1;}
.service-wide p{max-width:70ch;}
.service-link{
  display:block; margin-top:8px; color:var(--brand) !important;
  font-family:'IBM Plex Mono',monospace; font-size:.78rem; text-decoration:none !important;
  border-bottom:1px solid transparent; width:fit-content; transition:border-color .2s;
}
.service-link:hover{border-bottom-color:var(--brand);}

/* ---------- ABOUT ---------- */
.about{background:var(--ink); color:var(--paper);}
.about .wrap{display:grid; grid-template-columns:.85fr 1.15fr; gap:60px; align-items:start;}
.about .eyebrow{color:var(--brass);}
.about h2{color:#fff;}
.about p{color:#CBD3CE;}
.about-figure{
  aspect-ratio:4/5; border:1px solid rgba(255,255,255,.14);
  display:flex; align-items:flex-end; padding:22px;
  position:relative; overflow:hidden; background:var(--brand-deep);
}
.about-figure img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 20%;
}
.about-figure::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(3,61,68,0) 58%, rgba(3,61,68,.88) 100%);
}
.about-figure .name{position:relative; z-index:1; font-family:'IBM Plex Mono',monospace; color:#fff; font-size:.78rem; letter-spacing:.06em;}
.credentials{list-style:none; margin:26px 0 0; padding:0; display:grid; gap:12px;}
.credentials li{
  display:flex; gap:12px; align-items:baseline;
  font-family:'IBM Plex Mono',monospace; font-size:.82rem; color:#AEB8B1;
  border-top:1px solid rgba(255,255,255,.14); padding-top:12px;
}
.credentials li span.k{color:var(--brass); flex:0 0 auto;}
.badge-row{display:flex; gap:14px; margin-top:22px; flex-wrap:wrap; align-items:stretch;}
.badge-chip{background:#fff; border-radius:3px; padding:12px 18px; display:flex; align-items:center; justify-content:center;}
.badge-chip.dark{background:#000; border:1px solid rgba(255,255,255,.25); padding:8px 14px;}
.badge-chip img{height:38px; width:auto; display:block;}
.badge-chip.dark img{height:52px;}
.thesis-box{
  margin-top:26px; padding:20px 22px; border-left:2px solid var(--brass);
  background:rgba(255,255,255,.05);
}
.thesis-box .eyebrow{color:var(--brass); margin-bottom:8px;}
.thesis-box p:last-child{color:#CBD3CE; font-style:italic; font-size:.93rem; margin:0;}

/* ---------- WARUM ---------- */
.why .wrap{display:grid; grid-template-columns:repeat(3,1fr); gap:40px;}
.why-item .num{font-family:'IBM Plex Mono',monospace; color:var(--brass); font-size:.85rem;}
.why-item h3{font-size:1.2rem; margin:10px 0 8px;}
.why-item p{color:var(--ink-soft); font-size:.94rem;}

/* ---------- ABLAUF ---------- */
.ablauf{background:var(--paper-deep);}
.ablauf .steps{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:8px;}
.ablauf .step{background:var(--paper); padding:28px 24px; position:relative;}
.ablauf .step .num{font-family:'IBM Plex Mono',monospace; color:var(--brass); font-size:.85rem;}
.ablauf .step h3{font-size:1.05rem; margin:10px 0 8px; font-family:'Inter',sans-serif; font-weight:600;}
.ablauf .step p{color:var(--ink-soft); font-size:.88rem; margin:0;}
.ablauf .step:not(:last-child)::after{
  content:'→'; position:absolute; right:-13px; top:32px; z-index:2;
  color:var(--brand); font-size:1rem; background:var(--line);
  width:24px; height:24px; line-height:24px; text-align:center; border-radius:50%;
  display:none;
}
@media (min-width:921px){
  .ablauf .step:not(:last-child)::after{display:block;}
}

/* ---------- REFERENZEN ---------- */
.references{background:var(--paper-deep);}
.ref-list{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.ref-item{background:var(--paper); padding:30px 28px;}
.ref-item .tag{font-family:'IBM Plex Mono',monospace; font-size:.68rem; letter-spacing:.09em; color:var(--brand); text-transform:uppercase;}
.ref-item h3{font-size:1.05rem; margin:10px 0 14px; font-family:'Inter',sans-serif; font-weight:600;}
.ref-item .row{display:flex; gap:10px; margin-bottom:9px; font-size:.87rem;}
.ref-item .row span.k{flex:0 0 96px; font-family:'IBM Plex Mono',monospace; font-size:.64rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); padding-top:2px;}
.ref-item .row span.v{color:var(--ink); flex:1;}
.ref-item .result{
  margin-top:14px; padding-top:14px; border-top:1px solid var(--line);
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
}
.ref-item .result .num{font-family:'IBM Plex Mono',monospace; font-size:1.25rem; color:var(--brand-deep); font-weight:500;}
.ref-item .result .label{font-size:.82rem; color:var(--ink-soft);}

/* ---------- FAQ ---------- */
.faq{background:var(--paper-deep);}
.faq-list{border-top:1px solid var(--line);}
.faq-item{border-bottom:1px solid var(--line);}
.faq-item summary{
  list-style:none; cursor:pointer;
  display:flex; justify-content:space-between; align-items:baseline; gap:24px;
  padding:24px 2px;
  font-family:'Fraunces',serif; font-weight:450; font-size:1.08rem;
  color:var(--ink);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:'+'; font-family:'IBM Plex Mono',monospace; font-size:1.15rem;
  color:var(--brand); flex:0 0 auto; transition:transform .2s ease;
}
.faq-item[open] summary::after{content:'–';}
.faq-item[open] summary{color:var(--brand-deep);}
.faq-answer{padding:0 2px 26px; max-width:62ch; color:var(--ink-soft); font-size:.94rem;}
.faq-answer p{margin:0 0 10px;}
.faq-answer ol{margin:0; padding-left:20px;}
.faq-answer li{margin-bottom:6px;}
.faq-answer a{color:var(--brand);}
.faq-note{
  display:inline-block; margin-top:4px; padding:2px 8px;
  background:var(--brand-tint); color:var(--brand-deep);
  font-family:'IBM Plex Mono',monospace; font-size:.66rem; letter-spacing:.04em;
  text-transform:uppercase; border-radius:2px;
}
.faq-cta{margin-top:44px;}

/* ---------- KONTAKT ---------- */
.kontakt{background:var(--brand); color:#fff;}
.kontakt .wrap{display:grid; grid-template-columns:1.2fr .8fr; gap:50px; align-items:center;}
.kontakt h2{color:#fff;}
.kontakt p{color:#D6E7E7; max-width:48ch;}
.kontakt .eyebrow{color:#9FD1D1;}
.kontakt-card{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); padding:30px;}
.kontakt-card .row{margin-bottom:16px; font-size:.94rem;}
.kontakt-card .row span.k{display:block; font-family:'IBM Plex Mono',monospace; font-size:.68rem; letter-spacing:.08em; color:#9FD1D1; text-transform:uppercase; margin-bottom:3px;}
.kontakt-card a{color:#fff; text-decoration:underline; text-decoration-color:rgba(255,255,255,.4);}
.kontakt-form{display:grid; gap:16px;}
.kontakt-form .field{display:grid; gap:6px;}
.kontakt-form label{font-family:'IBM Plex Mono',monospace; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:#9FD1D1;}
.kontakt-form input, .kontakt-form select, .kontakt-form textarea{
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.25); color:#fff;
  padding:11px 12px; font-family:'Inter',sans-serif; font-size:.92rem; border-radius:2px;
  width:100%;
}
.kontakt-form input::placeholder, .kontakt-form textarea::placeholder{color:rgba(255,255,255,.45);}
.kontakt-form select{appearance:none; background-image:linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%); background-position:calc(100% - 18px) center, calc(100% - 13px) center; background-size:5px 5px, 5px 5px; background-repeat:no-repeat;}
.kontakt-form select option{color:var(--ink);}
.kontakt-form textarea{resize:vertical; min-height:92px; font-family:'Inter',sans-serif;}
.kontakt-form .hp{position:absolute; left:-9999px; top:-9999px;}
.kontakt-form button{cursor:pointer; border:1px solid #fff; width:fit-content;}
.form-note{font-size:.8rem; color:#D6E7E7; margin:0;}
.form-status{
  display:none; margin-top:18px; padding:12px 16px; font-size:.88rem;
  background:rgba(255,255,255,.12); border-left:2px solid var(--brass); color:#fff;
}
.form-status.show{display:block;}

/* ---------- FOOTER / IMPRESSUM ---------- */
footer{padding:70px 0 40px; font-size:.88rem; color:var(--ink-soft);}
.foot-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:40px; padding-bottom:50px; border-bottom:1px solid var(--line);}
.foot-grid .logo img{height:38px;}
.foot-grid h4{font-family:'IBM Plex Mono',monospace; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); margin:0 0 14px;}
.foot-grid ul{list-style:none; margin:0; padding:0; display:grid; gap:9px;}
.foot-grid a{text-decoration:none; color:var(--ink-soft);}
.foot-grid a:hover{color:var(--brand);}
.legal{padding-top:40px;}
.legal h3{font-size:1.1rem; font-family:'Inter',sans-serif; font-weight:600; margin-bottom:6px;}
.legal .block{margin-bottom:34px;}
.legal .placeholder{color:var(--brass); font-style:italic;}
.bottom-bar{display:flex; justify-content:space-between; align-items:center; padding-top:26px; font-size:.8rem; flex-wrap:wrap; gap:10px;}

@media (max-width:920px){
  .hero .wrap{grid-template-columns:1fr;}
  .stats .wrap{grid-template-columns:1fr; gap:16px;}
  .stat{border-left:none; border-top:1px solid rgba(4,91,101,.22); padding-top:16px;}
  .stat:first-child{border-top:none; padding-top:0;}
  .services{grid-template-columns:1fr;}
  .ref-list{grid-template-columns:1fr;}
  .about .wrap{grid-template-columns:1fr;}
  .why .wrap{grid-template-columns:1fr; gap:30px;}
  .ablauf .steps{grid-template-columns:1fr;}
  .kontakt .wrap{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr; gap:30px;}
  nav.links{
    position:absolute; top:100%; left:0; right:0; background:var(--paper);
    flex-direction:column; align-items:flex-start; gap:0;
    border-bottom:1px solid var(--line);
    max-height:0; overflow:hidden; transition:max-height .3s ease;
  }
  nav.links.open{max-height:420px;}
  nav.links a{padding:14px 32px; width:100%; border-top:1px solid var(--line);}
  nav.links .cta-btn{margin:14px 32px;}
  .menu-toggle{display:block;}
}

/* ---------- UNTERSEITEN / RATGEBER ---------- */
.page-hero{padding:64px 0 36px; border-bottom:1px solid var(--line);}
.page-hero h1{font-size:clamp(2rem,3.8vw,3rem); max-width:22ch;}
.page-hero h1 em{font-style:italic; color:var(--brand);}
.page-hero p.lead{font-size:1.08rem; color:var(--ink-soft); max-width:60ch; margin:16px 0 28px;}
.crumbs{font-family:'IBM Plex Mono',monospace; font-size:.72rem; color:var(--ink-soft); margin-bottom:18px;}
.crumbs a{color:var(--brand); text-decoration:none;}
.article{padding:64px 0;}
.article .wrap{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:64px; align-items:start;}
.prose{max-width:68ch;}
.prose h2{font-size:clamp(1.5rem,2.4vw,1.9rem); margin-top:1.8em;}
.prose h2:first-child{margin-top:0;}
.prose h3{font-family:'Inter',sans-serif; font-weight:600; font-size:1.08rem; margin-top:1.5em;}
.prose p, .prose li{color:var(--ink-soft);}
.prose strong{color:var(--ink);}
.prose a{color:var(--brand);}
.prose ul, .prose ol{padding-left:22px;}
.prose li{margin-bottom:6px;}
.facts{width:100%; border-collapse:collapse; margin:18px 0 8px; font-size:.92rem;}
.facts th, .facts td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top;}
.facts th{font-family:'IBM Plex Mono',monospace; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); font-weight:500;}
.facts td:first-child{color:var(--ink); font-weight:500;}
.note{border-left:2px solid var(--brass); background:#F5F6F1; padding:16px 20px; margin:22px 0; font-size:.92rem; color:var(--ink-soft);}
.note strong{color:var(--ink);}
.aside{position:sticky; top:110px; display:grid; gap:18px;}
.aside-card{border:1px solid var(--line); background:#F5F6F1; padding:24px;}
.aside-card h3{font-family:'Inter',sans-serif; font-weight:600; font-size:1rem; margin:0 0 8px;}
.aside-card p{font-size:.88rem; color:var(--ink-soft); margin:0 0 14px;}
.aside-card ul{list-style:none; margin:0; padding:0; display:grid; gap:8px; font-size:.88rem;}
.aside-card ul a{color:var(--brand); text-decoration:none;}
.aside-card.dark{background:var(--brand); border-color:var(--brand); color:#fff;}
.aside-card.dark p{color:#D6E7E7;}
.aside-card.dark h3{color:#fff;}
.cta-band{background:var(--brand); color:#fff; padding:56px 0;}
.cta-band .wrap{display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap;}
.cta-band h2{color:#fff; margin:0; font-size:clamp(1.5rem,2.6vw,2rem); max-width:24ch;}
.cta-band p{color:#D6E7E7; margin:8px 0 0;}
.art-list{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.art-item{background:var(--paper); padding:30px 28px; text-decoration:none; display:block; transition:background .2s;}
.art-item:hover{background:#F6F7F2;}
.art-item .tag{font-family:'IBM Plex Mono',monospace; font-size:.68rem; letter-spacing:.09em; color:var(--brass); text-transform:uppercase;}
.art-item h2, .art-item h3{font-family:'Inter',sans-serif; font-weight:600; font-size:1.12rem; margin:10px 0 8px;}
.art-item p{color:var(--ink-soft); font-size:.92rem; margin:0;}
.updated{font-family:'IBM Plex Mono',monospace; font-size:.72rem; color:var(--ink-soft);}
@media (max-width:920px){
  .article .wrap{grid-template-columns:1fr; gap:40px;}
  .aside{position:static;}
  .art-list{grid-template-columns:1fr;}
  .facts{font-size:.85rem;}
}
