@font-face{font-family:"Source Sans 3";src:url(fonts/source-sans-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url(fonts/source-sans-Bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --brand:#0E94FF;
  --accent:#1B5C99;
  --ink:#1C2733;
  --ink-2:#5A6672;
  --line:#D8E4F0;
  --tint:#F3F8FE;
  --bg:#FFFFFF;
  --card:#FFFFFF;
  --maxw:62rem;
  --gutter:clamp(1rem,4vw,2rem);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --accent:#6DB8FF;
    --ink:#E6EDF5;
    --ink-2:#9AA9B8;
    --line:#22364A;
    --tint:#101C29;
    --bg:#0B141D;
    --card:#0F1B28;
  }
}
:root[data-theme="dark"]{
  --accent:#6DB8FF;--ink:#E6EDF5;--ink-2:#9AA9B8;--line:#22364A;--tint:#101C29;--bg:#0B141D;--card:#0F1B28;
}

*{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(--ink);
  font:400 1.125rem/1.6 "Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;
}
img{max-width:100%;height:auto}
a{color:var(--accent);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:3px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}

/* Kopf */
.bar{height:.5rem;background:var(--brand)}
header.site{position:sticky;top:0;z-index:10;background:var(--bg);border-bottom:1px solid var(--line);transition:box-shadow .3s ease}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){header.site{background:color-mix(in srgb,var(--bg) 70%,transparent);-webkit-backdrop-filter:blur(12px) saturate(1.4);backdrop-filter:blur(12px) saturate(1.4)}}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:1rem;padding-bottom:1rem;transition:padding .3s ease}
.brand{display:flex;align-items:center;text-decoration:none}
.brand img{height:2.25rem;width:auto;display:block;transition:height .3s ease}
nav.main ul{display:flex;gap:1.5rem;list-style:none;margin:0;padding:0}
nav.main a{color:var(--ink);text-decoration:none;font-weight:700;font-size:1rem;padding:.25rem 0;border-bottom:2px solid transparent}
nav.main a:hover{border-bottom-color:var(--brand)}

/* Hero */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--tint),var(--bg))}
.hero .wrap{padding-top:clamp(3rem,9vw,6.5rem);padding-bottom:clamp(3rem,9vw,6rem);position:relative}
.hero::after{
  content:"";position:absolute;right:max(-6rem,calc((100vw - var(--maxw))/2 - 5rem));top:50%;
  width:clamp(14rem,38vw,26rem);aspect-ratio:480/393;transform:translateY(calc(-50% + var(--py,0px)));animation:float 9s ease-in-out infinite;
  background:url(img/icon_blue.png) center/contain no-repeat;opacity:.09;pointer-events:none;
}
.kicker{margin:0 0 1rem;color:var(--accent);font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:.9rem}
.hero h1{margin:0;font-size:clamp(2.6rem,7vw,4.6rem);line-height:1.04;letter-spacing:-.015em;max-width:14ch}
.hero h1::after{content:"";display:block;width:3.5rem;height:.3rem;background:var(--brand);margin-top:1.4rem;border-radius:2px}
.lead{max-width:36rem;margin:1.6rem 0 0;font-size:clamp(1.15rem,2.2vw,1.35rem);color:var(--ink-2)}
.cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.btn{display:inline-block;padding:.7rem 1.25rem;border-radius:.5rem;font-weight:700;font-size:1rem;text-decoration:none;border:2px solid var(--accent)}
.btn.primary{background:var(--accent);color:#fff}
.btn.primary:hover{filter:brightness(1.1)}
.btn.ghost{color:var(--accent);background:transparent}
.btn.ghost:hover{background:var(--tint)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn.primary{color:#0B141D}}

/* Abschnitte */
section.block{padding:clamp(2.75rem,7vw,4.5rem) 0;border-top:1px solid var(--line)}
section.block:first-of-type{border-top:0}
.block h2{margin:0 0 1.5rem;font-size:clamp(1.6rem,3.5vw,2.1rem);line-height:1.15;color:var(--accent)}
.cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(1.5rem,5vw,4rem)}
@media (max-width:48rem){.cols{grid-template-columns:1fr}}
.prose p{margin:0 0 1.1rem;max-width:40rem}
.prose p:last-child{margin-bottom:0}

.facts{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.facts li{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--line);font-size:1rem}
.facts span:first-child{color:var(--ink-2)}
.facts span:last-child{font-weight:700;text-align:right}

.card{background:var(--card);border:1px solid var(--line);border-radius:.75rem;padding:1.5rem;max-width:40rem}
.card h3{margin:0 0 .35rem;font-size:1.3rem}
.card p{margin:0 0 1rem;color:var(--ink-2)}
.tags{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.25rem;padding:0;list-style:none}
.tags li{background:var(--tint);border:1px solid var(--line);border-radius:999px;padding:.1rem .75rem;font-size:.9rem;color:var(--accent);font-weight:700}
.links{display:flex;flex-wrap:wrap;gap:1.25rem;font-weight:700;font-size:1rem}

.contact p{margin:0 0 .6rem;max-width:36rem}
.contact .mail{font-size:1.4rem;font-weight:700}

/* Fuß */
footer.site{border-top:1px solid var(--line);background:var(--tint);color:var(--ink-2);font-size:.95rem}
footer.site .wrap{display:flex;flex-wrap:wrap;gap:.75rem 2rem;justify-content:space-between;padding-top:1.5rem;padding-bottom:1.5rem}
footer.site ul{display:flex;gap:1.25rem;list-style:none;margin:0;padding:0}
footer.site a{color:var(--ink-2)}

/* Rechtstexte */
.legal{padding:clamp(2.5rem,6vw,4rem) 0}
.legal h1{margin:0 0 1.5rem;font-size:clamp(2rem,5vw,2.8rem);line-height:1.1}
.legal h2{margin:2rem 0 .5rem;font-size:1.3rem;color:var(--accent)}
.legal p,.legal ul{max-width:none;margin:0 0 1rem}
.legal .todo{background:#FFF6D6;color:#4A3A00;border:1px solid #E6CF7A;border-radius:.4rem;padding:.05rem .35rem;font-weight:700}
.note{background:var(--tint);border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:.4rem;padding:.9rem 1rem;max-width:42rem;font-size:1rem;color:var(--ink-2)}

@media (max-width:40rem){
  nav.main ul{gap:1rem}
  .brand img{height:1.9rem}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media print{.bar,.hero::after,nav.main,.cta{display:none}}

.avatar{display:block;margin:0 auto;width:min(15rem,100%);height:auto;aspect-ratio:1;border-radius:50%;object-fit:cover;border:3px solid var(--line);background:var(--tint)}
.social{list-style:none;display:flex;justify-content:center;gap:.9rem;margin:1.25rem 0 0;padding:0}
.social a{display:inline-flex;width:2.75rem;height:2.75rem;align-items:center;justify-content:center;border:2px solid var(--line);border-radius:50%;color:var(--accent);background:var(--card)}
.social a:hover{border-color:var(--brand);background:var(--tint)}
.social svg{width:1.4rem;height:1.4rem}
.social svg.gh{fill:currentColor;stroke:none;width:1.5rem;height:1.5rem;display:block}
.social a{color:#fff;background:#1B5C99;border-color:#1B5C99}
.social a:hover{background:#154A7C;border-color:#154A7C}

/* Bewegung */
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -.9rem}}

header.site.scrolled{box-shadow:0 .35rem 1.2rem rgba(10,30,50,.12)}
header.site.scrolled .wrap{padding-top:.5rem;padding-bottom:.5rem}
header.site.scrolled .brand img{height:1.75rem}
.progress{position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--brand);transform:scaleX(var(--p,0));transform-origin:left}
nav.main a[aria-current="true"]{border-bottom-color:var(--brand);color:var(--accent)}

.js .reveal{opacity:0;transform:translateY(1.25rem);transition:opacity .7s ease,transform .7s ease;transition-delay:var(--d,0s)}
.js .reveal.in{opacity:1;transform:none}

.avatar{transition:transform .35s ease,box-shadow .35s ease}
.avatar:hover{transform:rotate(-3deg) scale(1.04);box-shadow:0 .6rem 1.6rem rgba(14,148,255,.25)}
.social a{transition:transform .2s ease,border-color .2s ease,background .2s ease}
.social a:hover{transform:translateY(-3px)}
.card{transition:transform .25s ease,box-shadow .25s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 .8rem 1.8rem rgba(10,30,50,.12)}
.btn{transition:transform .2s ease,background .2s ease,filter .2s ease}
.btn:hover{transform:translateY(-2px)}
.links a,.contact .mail a,footer.site a{background:linear-gradient(currentColor,currentColor) left bottom/0 2px no-repeat;transition:background-size .3s ease}
.links a:hover,.contact .mail a:hover,footer.site a:hover{background-size:100% 2px}

@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  .hero::after{animation:none;transform:translateY(-50%)}
  header.site,header.site .wrap,.brand img,.avatar,.social a,.card,.btn,.links a,.contact .mail a,footer.site a{transition:none}
  .avatar:hover,.social a:hover,.card:hover,.btn:hover{transform:none}
}
@media print{.js .reveal{opacity:1;transform:none}header.site{position:static}.progress{display:none}}

/* Hell/Dunkel-Umschalter */
:root{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark}}
:root[data-theme="dark"] .btn.primary{color:#0B141D}
.foot-r{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.5rem}
.theme{display:inline-flex;gap:.2rem;padding:.2rem;border:1px solid var(--line);border-radius:999px;background:var(--bg)}
.theme button{appearance:none;border:0;background:transparent;color:var(--ink-2);width:2rem;height:2rem;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background .2s ease,color .2s ease}
.theme button svg{width:1.1rem;height:1.1rem;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.theme button:hover{color:var(--accent)}
.theme button[aria-pressed="true"]{background:var(--accent);color:var(--bg)}
@media (prefers-reduced-motion:reduce){.theme button{transition:none}}
@media print{.theme{display:none}}
footer.site .wrap{align-items:center}

/* Bildhintergründe: sitzen unter dem Text, blenden nach oben weich aus */
section.bg{position:relative;isolation:isolate;overflow:hidden;padding-bottom:calc(var(--bg-h) + 1rem)}
section.bg::before{transform:translate3d(0,calc(var(--bgp,0)*8%),0);will-change:transform;content:"";position:absolute;left:0;right:0;bottom:calc(var(--bg-h)*-.1);height:calc(var(--bg-h)*1.2);z-index:-1;background:var(--bg-img) center var(--bg-pos,50%)/cover no-repeat;opacity:var(--bg-o,.85);-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 45%);mask-image:linear-gradient(to bottom,transparent 0,#000 45%)}
.bg-heimat{--bg-img:url(img/heimat.webp);--bg-pos:12%;--bg-h:clamp(17rem,48vw,38rem)}
section.bg-heimat::before{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 16%);mask-image:linear-gradient(to bottom,transparent 0,#000 16%)}
:root[data-theme="dark"] section.bg::before{filter:brightness(.55) saturate(.9)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) section.bg::before{filter:brightness(.55) saturate(.9)}}
@media (prefers-reduced-motion:reduce){section.bg::before{transform:none;will-change:auto;bottom:0;height:var(--bg-h)}}
:root[data-theme="dark"] section.bg-heimat::before{-webkit-mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.15) 10%,rgba(0,0,0,.45) 22%,rgba(0,0,0,.8) 38%,#000 55%);mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.15) 10%,rgba(0,0,0,.45) 22%,rgba(0,0,0,.8) 38%,#000 55%)}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]) section.bg-heimat::before{-webkit-mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.15) 10%,rgba(0,0,0,.45) 22%,rgba(0,0,0,.8) 38%,#000 55%);mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.15) 10%,rgba(0,0,0,.45) 22%,rgba(0,0,0,.8) 38%,#000 55%)}
}
@media print{section.bg::before{display:none}}

/* Sprachumschalter in der Kopfzeile */
.hr{display:flex;align-items:center;gap:1.25rem}
.lang{display:flex;gap:.15rem;padding:.15rem;border:1px solid var(--line);border-radius:999px;background:var(--card);font-size:.8rem;font-weight:700;line-height:1}
.lang a{display:block;padding:.4rem .6rem;border-radius:999px;color:var(--ink);text-decoration:none;transition:background .2s ease,color .2s ease}
.lang a:hover{background:var(--tint)}
.lang a[aria-current="true"]{background:var(--accent);color:#fff}
:root[data-theme="dark"] .lang a[aria-current="true"]{color:#0B141D}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lang a[aria-current="true"]{color:#0B141D}}
@media (max-width:30rem){.hr{gap:.6rem}}
@media (prefers-reduced-motion:reduce){.lang a{transition:none}}
@media print{.lang{display:none}}
@media (min-width:76rem){.lang{position:absolute;top:50%;right:1.5rem;transform:translateY(-50%)}}
nav.main a{white-space:nowrap}
@media (max-width:30rem){nav.main ul{gap:.8rem}nav.main a{font-size:.9rem}.brand img{height:1.7rem;width:auto}}

/* Service-Stati (Platzhalter) */
.svc-list{list-style:none;margin:1.25rem 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:.9rem}
.svc-list>li{display:flex}
.svc-list>li>.svc{flex:1;min-width:0}
.svc{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;column-gap:1rem;padding:1.2rem 1.25rem;background:var(--tint);border:1px solid var(--line);border-radius:.75rem;color:var(--ink);text-decoration:none;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.svc:hover{transform:translateY(-2px);box-shadow:0 .6rem 1.4rem rgba(10,30,50,.1);border-color:var(--brand)}
@media (min-width:94rem){
.svc-list{--w:min(88rem,calc(100vw - var(--gutter)*2));grid-template-columns:repeat(5,minmax(0,1fr));width:var(--w);margin-left:calc((100% - var(--w))/2)}
.svc{grid-template-columns:1fr auto;grid-template-rows:auto 1fr;align-items:start;row-gap:1rem;padding:1.25rem 1.25rem 1.5rem}
}
.svc-ico{width:3rem;height:3rem;object-fit:contain}
@media (min-width:94rem){.svc-ico{grid-column:1;grid-row:1}.svc .dot{grid-column:2;grid-row:1;margin-top:.2rem}.svc-txt{grid-column:1/-1;grid-row:2}}
.svc-txt{display:flex;flex-direction:column;min-width:0}
.svc-name{font-weight:700;overflow-wrap:anywhere}
.svc-desc{font-size:.875rem;color:var(--ink-2,inherit)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.dot{width:.8rem;height:.8rem;border-radius:50%;flex:none;background:#8A97A5;box-shadow:0 0 0 .2rem rgba(138,151,165,.2)}
.svc[data-state="up"] .dot{background:#1FA463;box-shadow:0 0 0 .2rem rgba(31,164,99,.2)}
.svc[data-state="down"] .dot{background:#D64545;box-shadow:0 0 0 .2rem rgba(214,69,69,.2)}
@media (prefers-reduced-motion:reduce){.svc{transition:none}.svc:hover{transform:none}}

/* Seitlich scrollbare Reihen */
.hscroll{--edge:max(var(--gutter),calc((100vw - var(--maxw))/2 + var(--gutter)));display:flex;gap:1rem;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;margin:1.25rem calc(50% - 50vw) 0;padding:.25rem var(--edge) 1rem;scroll-padding:0 var(--edge);scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.hscroll>*{scroll-snap-align:start;flex:0 0 auto}
.hscroll>.card{flex:0 0 min(28rem,86vw);max-width:none}
.hscroll:focus-visible{outline:2px solid var(--brand);outline-offset:-2px;border-radius:.5rem}
.hscroll::-webkit-scrollbar{height:.5rem}
.hscroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px}
.mystery{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border-style:dashed;background:var(--tint)}
.mystery h3{margin:.25rem 0 .35rem}
.mystery p{margin:0;color:var(--ink-2)}
.mystery-q{display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;border:2px dashed var(--accent);color:var(--accent);font-size:1.5rem;font-weight:700;animation:myst 3s ease-in-out infinite}
@keyframes myst{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-.3rem) rotate(4deg)}}
@media (prefers-reduced-motion:reduce){.mystery-q{animation:none}.hscroll{scroll-behavior:auto}}
/* Projekte mittig, sobald alle Karten in die Breite passen */
@media (min-width:90rem){
.hscroll{padding-left:var(--gutter);padding-right:var(--gutter);scroll-padding:0 var(--gutter)}
.hscroll>:first-child{margin-left:auto}
.hscroll>:last-child{margin-right:auto}
}

body{overflow-x:clip}
@media (max-width:24rem){nav.main ul{gap:.55rem}nav.main a{font-size:.8rem}.hr{gap:.4rem}.brand img{height:1.35rem}.lang{font-size:.72rem}}
@media (max-width:21rem){nav.main ul{gap:.4rem}nav.main a{font-size:.74rem}.brand img{height:1.1rem}.lang a{padding-left:.4rem;padding-right:.4rem}}

/* Hamburger-Menü auf kleinen Bildschirmen */
.menu-btn{display:none}
@media (max-width:40rem){
.js .menu-btn{display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--card);color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent}
.js .menu-btn svg{width:1.4rem;height:1.4rem;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.js .menu-btn .i-close{display:none}
.js .menu-btn[aria-expanded="true"] .i-menu{display:none}
.js .menu-btn[aria-expanded="true"] .i-close{display:block}
.js .brand img{height:1.9rem}
.js .hr{gap:.6rem}
.js nav.main{display:none;position:absolute;top:100%;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--line);box-shadow:0 .6rem 1.2rem rgba(10,30,50,.12);padding:.5rem var(--gutter) 1rem}
.js header.site.menu-open nav.main{display:block}
.js nav.main ul{flex-direction:column;gap:0}
.js nav.main a{display:block;font-size:1.1rem;padding:.8rem 0;border-bottom:1px solid var(--line)}
.js nav.main li:last-child a{border-bottom:0}
.js nav.main a[aria-current="true"]{border-bottom-color:var(--line);color:var(--accent)}
}
@media print{.menu-btn{display:none}}

/* Aufklappbarer Abschnitt "Und abseits vom Bildschirm?" */
.more{margin-top:1.25rem;max-width:40rem}
.more summary{display:inline-flex;align-items:center;cursor:pointer;color:var(--accent);font-weight:700;list-style:none}
.more summary::-webkit-details-marker{display:none}
.more summary::after{content:"";width:.5em;height:.5em;margin-left:.65em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-.15em) rotate(45deg);transition:transform .2s ease}
.more summary:hover{text-decoration:underline;text-underline-offset:.18em}
.more[open] summary::after{transform:translateY(.1em) rotate(-135deg)}
.more-body{margin-top:1rem}
#ueber-mich{position:relative;isolation:isolate;overflow:hidden}
#ueber-mich:has(.more[open]){padding-bottom:calc(35.2% + 1rem)}
@media (max-width:48rem){#ueber-mich:has(.more[open]){padding-bottom:calc(46% + 1rem)}}
#ueber-mich:has(.more[open])::before{content:"";position:absolute;z-index:-1;left:0;right:0;bottom:0;aspect-ratio:1500/754;background:url(img/familie.webp) center/100% 100% no-repeat;-webkit-mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.5) 16%,#000 38%);mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.5) 16%,#000 38%);animation:more-in .6s ease}
:root[data-theme="dark"] #ueber-mich::before{filter:brightness(.55) saturate(.9)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #ueber-mich::before{filter:brightness(.55) saturate(.9)}}
@media print{#ueber-mich::before{display:none}}
#ueber-mich:has(.more[open]) .prose{text-shadow:0 0 .2em var(--bg),0 0 .2em var(--bg),0 0 .45em var(--bg),0 0 .45em var(--bg),0 0 .9em var(--bg),0 0 .9em var(--bg)}
.more[open] .more-body{animation:more-in .4s ease}
@keyframes more-in{from{opacity:0;transform:translateY(-.5rem)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){#ueber-mich::before{animation:none}.more summary::after{transition:none}.more[open] .more-body{animation:none}}

.card.art{position:relative;overflow:hidden}
.card.art>*:not(.card-art){position:relative;z-index:1}
.card-art{position:absolute;top:.9rem;right:.9rem;width:11rem;height:auto;color:var(--accent);opacity:.2;pointer-events:none}
.card .card-note{margin:1rem 0 0;font-size:.85rem;color:var(--ink-2)}
.card-art.leaf,.card-art.hp{width:9rem}
.card-art.leaf{color:#005616}
.card-art.hp{color:#1a8ad4}
:root[data-theme="dark"] .card-art.leaf{color:#fff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .card-art.leaf{color:#fff}}
.js .reveal.reveal-r{transform:translateX(3.5rem)}
.js .reveal.reveal-r.in{transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal.reveal-r{transform:none}}
@media print{.js .reveal.reveal-r{transform:none}}
.crumb{margin:0 0 .6rem;font-size:.95rem}
.legal .lead{margin:0 0 1.5rem;max-width:none;font-size:1.2rem;color:var(--ink-2)}
.legal h3{margin:1.6rem 0 .4rem;font-size:1.1rem}
.legal li{margin:.3rem 0}
.legal.wide p,.legal.wide ul,.legal.wide .lead{max-width:50rem}
.legal.wide pre,.legal.wide .tablewrap{max-width:none}
.legal code{font:400 .9em ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--tint);border:1px solid var(--line);border-radius:.3rem;padding:.05em .3em}
.legal pre{max-width:42rem;margin:0 0 1rem;padding:.9rem 1rem;overflow-x:auto;background:var(--tint);border:1px solid var(--line);border-radius:.5rem;font-size:.9rem;line-height:1.5}
.legal pre code{background:none;border:0;padding:0;font-size:inherit}
.tablewrap{max-width:42rem;overflow-x:auto;margin:0 0 1rem}
.legal table{border-collapse:collapse;width:100%;font-size:.95rem}
.legal th,.legal td{text-align:left;padding:.5rem .75rem .5rem 0;border-bottom:1px solid var(--line);vertical-align:top}
.legal th{color:var(--ink-2)}

/* Projektkarte: ganze Fläche klickbar (Stretched Link) */
.card.art:has(.more-link)>.links{position:static}
.card.art:has(.more-link){cursor:pointer}
.card.art:has(.more-link) .links a{position:relative;z-index:3}
.card.art:has(.more-link) .links a.more-link{position:static}
.card.art:has(.more-link) .more-link::after{content:"";position:absolute;inset:0;z-index:2}
.card.art:has(.more-link):hover .more-link{background-size:100% 2px}
.more-link:focus-visible{outline:0}
.more-link:focus-visible::after{outline:3px solid var(--brand);outline-offset:-3px;border-radius:.75rem}

/* Dienste-Buttons: Hintergrund wie die Karte "Mehr folgt bald" (var(--tint)) */
:root{--svc-bg:var(--tint);--svc-bd:var(--line);--svc-fg:var(--ink);--svc-d:var(--ink-2);--svc-ico:transparent;--svc-pad:0rem;--svc-dot:#8A97A5;--svc-ring:rgba(138,151,165,.2);--svc-up:#1FA463;--svc-up-ring:rgba(31,164,99,.2);--svc-down:#D64545;--svc-down-ring:rgba(214,69,69,.2)}
:root[data-theme="dark"]{--svc-bg:var(--tint);--svc-bd:var(--line);--svc-fg:var(--ink);--svc-d:var(--ink-2);--svc-ico:transparent;--svc-pad:0rem;--svc-dot:#8A97A5;--svc-ring:rgba(138,151,165,.2);--svc-up:#1FA463;--svc-up-ring:rgba(31,164,99,.2);--svc-down:#D64545;--svc-down-ring:rgba(214,69,69,.2)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--svc-bg:var(--tint);--svc-bd:var(--line);--svc-fg:var(--ink);--svc-d:var(--ink-2);--svc-ico:transparent;--svc-pad:0rem;--svc-dot:#8A97A5;--svc-ring:rgba(138,151,165,.2);--svc-up:#1FA463;--svc-up-ring:rgba(31,164,99,.2);--svc-down:#D64545;--svc-down-ring:rgba(214,69,69,.2)}}
.svc{background:var(--svc-bg);border-color:var(--svc-bd);color:var(--svc-fg)}
.svc-desc{color:var(--svc-d)}
.svc-ico{background:var(--svc-ico);padding:var(--svc-pad);border-radius:.6rem}
.dot{background:var(--svc-dot);box-shadow:0 0 0 .2rem var(--svc-ring)}
.svc[data-state="up"] .dot{background:var(--svc-up);box-shadow:0 0 0 .2rem var(--svc-up-ring)}
.svc[data-state="down"] .dot{background:var(--svc-down);box-shadow:0 0 0 .2rem var(--svc-down-ring)}