/* DQuadrat Werbetechnik, zentrales Stylesheet.
   Bewusst ohne Framework: jedes Byte laedt sofort, kein JavaScript noetig.
   Damit sieht ein KI-Crawler denselben Inhalt wie ein Besucher.
   Schrift: Inter, SIL Open Font License, lokal unter /assets/fonts/. */

/* ---------------------------------------------------------------- Schrift */
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;
 src:url(/assets/fonts/inter-latin-400-normal.woff2) format("woff2");
 unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;
 src:url(/assets/fonts/inter-latin-600-normal.woff2) format("woff2");
 unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;
 src:url(/assets/fonts/inter-latin-700-normal.woff2) format("woff2");
 unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:800;font-display:swap;
 src:url(/assets/fonts/inter-latin-800-normal.woff2) format("woff2");
 unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:900;font-display:swap;
 src:url(/assets/fonts/inter-latin-900-normal.woff2) format("woff2");
 unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------------------------------------------------------------- Farben */
:root{
 --bg:#0b0b0d;      /* Grundflaeche, nahezu Schwarz */
 --bg2:#111114;     /* leicht abgesetzte Baender */
 --pan:#16161a;     /* Anthrazit fuer Karten */
 --pan2:#202027;    /* Tabellenkoepfe, Icon-Flaechen */
 --line:#2a2a31;    /* Linien */
 --tx:#e9e9ec;      /* Flie<ss>text */
 --mut:#9c9ca6;     /* gedaempft */
 --dim:#6d6d78;     /* sehr gedaempft */
 --acc:#22a7d0;     /* Akzent Blau */
 --acc2:#2f6fe4;    /* Akzent Blau, dunkler */
 --fx:#c026d3;      /* Leuchtcenter */
 --schrift:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}

/* ---------------------------------------------------------------- Basis */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--tx);font-family:var(--schrift);
 font-size:17px;line-height:1.7;overflow-x:hidden}
a{color:var(--acc);text-decoration:none}
a:hover{color:#5cc9e8}
h1,h2,h3,h4{color:#fff;letter-spacing:-.02em;margin:0}
img,video{max-width:100%;height:auto;display:block}
strong{color:#fff;font-weight:650}
section{padding:78px 0}
hr{border:0;border-top:1px solid var(--line);margin:34px 0}

/* Tastaturbedienung muss sichtbar bleiben */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
 outline:2px solid var(--acc);outline-offset:2px;border-radius:4px}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--acc);
 color:#0b0b0d;padding:11px 18px;border-radius:0 0 8px 0;font-weight:750}
.skip:focus{left:0;color:#0b0b0d}

.w{max-width:1140px;margin:0 auto;padding:0 22px}
.narrow{max-width:820px}
.wrap{max-width:760px;margin:0 auto;padding:0 22px}
.wrap.wide{max-width:1080px}
.visuell-versteckt{position:absolute;width:1px;height:1px;overflow:hidden;
 clip:rect(0 0 0 0);white-space:nowrap}

/* ---------------------------------------------------------------- Balken */
.bar{background:linear-gradient(90deg,#0891b2,#2563eb);text-align:center;padding:10px 22px;font-size:13.5px}
.bar a{color:#fff;font-weight:700;display:inline-flex;gap:9px;align-items:center;flex-wrap:wrap;justify-content:center}
.bar .new{background:rgba(255,255,255,.22);font-size:10px;font-weight:900;letter-spacing:.13em;
 padding:3px 9px;border-radius:99px;text-transform:uppercase}

/* ---------------------------------------------------------------- Kopf */
header.top{position:sticky;top:0;z-index:60;background:rgba(11,11,13,.93);
 backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header.top .w{display:flex;align-items:center;justify-content:space-between;
 padding-top:15px;padding-bottom:15px;gap:16px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;color:#fff}
.brand:hover{color:#fff}
.brand .sq{width:29px;height:29px;border-radius:7px;display:grid;place-items:center;
 background:linear-gradient(135deg,#3fc4e8,#2563eb);color:var(--bg);font-size:12px;font-weight:900}
nav.main{display:flex;gap:19px;align-items:center;font-size:14.5px}
nav.main a{color:var(--mut)}
nav.main a:hover{color:#fff}
nav.main a[aria-current=page]{color:#fff}
nav.main .cta-nav{border:1px solid var(--acc);color:var(--acc);padding:8px 17px;
 border-radius:99px;font-weight:700;font-size:13px}
nav.main .cta-nav:hover{background:var(--acc);color:var(--bg)}
#burger,.burger-lbl{display:none}

/* ---------------------------------------------------------------- Hero */
.hero{position:relative;min-height:calc(100vh - 118px);display:flex;align-items:center;
 justify-content:center;text-align:center;padding:70px 0;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.32}
.hero-bg::after{content:"";position:absolute;inset:0;
 background:radial-gradient(ellipse at center,rgba(11,11,13,.55) 0%,rgba(11,11,13,.88) 55%,var(--bg) 100%)}
.hero-glow{position:absolute;width:760px;height:760px;border-radius:50%;
 background:radial-gradient(circle,rgba(34,167,208,.13),transparent 68%);
 top:50%;left:50%;transform:translate(-50%,-50%);filter:blur(70px);z-index:0;pointer-events:none}
.hero .w{position:relative;z-index:2}
.hero h1{font-size:clamp(42px,9vw,86px);line-height:1.02;font-weight:900;margin-bottom:26px;
 text-shadow:0 4px 40px rgba(11,11,13,.6)}
.hero .sub{font-size:clamp(16.5px,2vw,20px);color:#d2d2d8;max-width:680px;margin:0 auto 34px;line-height:1.65}
.scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;
 color:var(--dim);line-height:1;animation:bob 2.2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,9px)}}
@media(prefers-reduced-motion:reduce){.scroll-hint{animation:none}}

.pill{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
 color:var(--acc);background:rgba(34,167,208,.12);border:1px solid rgba(34,167,208,.3);
 padding:6px 15px;border-radius:99px;margin-bottom:26px;backdrop-filter:blur(6px)}
.grad{background:linear-gradient(90deg,#3fc4e8,#2f6fe4);-webkit-background-clip:text;
 background-clip:text;-webkit-text-fill-color:transparent}

/* ---------------------------------------------------------------- Knoepfe */
.btns{display:flex;gap:12px;flex-wrap:wrap}
.hero .btns,.cta .btns,.btn-row{justify-content:center}
.btn{display:inline-flex;align-items:center;gap:9px;padding:14px 25px;border-radius:9px;
 font-weight:750;font-size:14.5px;transition:.2s}
.b1,.btn-primary{background:linear-gradient(90deg,var(--acc),var(--acc2));color:#fff}
.b1:hover,.btn-primary:hover{color:#fff;box-shadow:0 0 30px rgba(34,167,208,.36)}
.b2,.btn-wa{background:#16a34a;color:#fff}
.b2:hover,.btn-wa:hover{background:#22c55e;color:#fff}
.b3,.btn-ghost{border:1px solid var(--line);color:var(--tx)}
.b3:hover,.btn-ghost:hover{border-color:var(--acc);color:#fff}
.b-fx{background:linear-gradient(90deg,#c026d3,#9333ea);color:#fff}
.b-fx:hover{color:#fff;box-shadow:0 0 28px rgba(192,38,211,.35)}
.hint{font-size:12.5px;color:var(--mut);margin-top:15px}

/* ---------------------------------------------------------------- Kacheln */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:32px;text-align:center}
.stats .n{font-size:clamp(30px,5vw,45px);font-weight:900;color:#fff;line-height:1}
.stats .l{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.11em;color:var(--mut);margin-top:8px}
.stats .s{font-size:12px;color:var(--mut);font-style:italic;margin-top:3px}

/* ---------------------------------------------------------------- Ueberschriften */
.head{margin-bottom:40px}
.head .k{font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
 color:var(--acc);margin-bottom:11px}
.head h1,.head h2{font-size:clamp(26px,4.4vw,40px);line-height:1.18;font-weight:800}
.head p{color:var(--mut);margin-top:14px;max-width:660px;font-size:17px}
.head.zentriert{text-align:center}
.head.zentriert p{margin-left:auto;margin-right:auto}

/* ---------------------------------------------------------------- Karten */
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.card{display:block;background:var(--pan);border:1px solid var(--line);border-radius:13px;
 padding:26px;transition:.22s}
.card:hover{border-color:rgba(34,167,208,.45);transform:translateY(-3px)}
.card h3{font-size:18.5px;margin-bottom:10px}
.card p{color:var(--mut);font-size:15px;margin:0}
.card .tag{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
 color:var(--acc);display:block;margin-bottom:9px}
.card .mehr{display:inline-block;margin-top:13px;font-size:13.5px;font-weight:700;color:var(--acc)}
.ico{width:46px;height:46px;border-radius:11px;background:var(--pan2);border:1px solid var(--line);
 display:grid;place-items:center;margin-bottom:18px;color:var(--acc)}
.card:hover .ico{background:var(--acc);border-color:var(--acc);color:#0b0b0d}

/* ---------------------------------------------------------------- Tabellen */
.tblwrap,.tbl{overflow-x:auto;margin-bottom:24px}
table{width:100%;border-collapse:collapse;font-size:14.5px;border:1px solid var(--line);
 border-radius:10px;overflow:hidden}
th,td{text-align:left;padding:11px 15px;border-bottom:1px solid var(--line);vertical-align:top}
thead th{background:var(--pan2);font-weight:700;font-size:13px;color:#fff}
tbody th{color:var(--mut);font-weight:600;width:32%}
tbody tr:nth-child(even){background:rgba(255,255,255,.02)}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:none}
caption{caption-side:top;text-align:left;font-size:13px;color:var(--mut);padding-bottom:9px}

/* ---------------------------------------------------------------- Hinweise */
.note{background:var(--pan);border-left:3px solid var(--acc);border-radius:0 10px 10px 0;
 padding:19px 22px;margin:0 0 24px;font-size:15.5px}
.note strong{display:block;margin-bottom:5px}
.note.fx{border-left-color:var(--fx)}

/* ---------------------------------------------------------------- Galerie */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:13px}
.gal figure{margin:0;position:relative;border-radius:11px;overflow:hidden;
 border:1px solid var(--line);aspect-ratio:4/3;background:var(--pan)}
.gal img{width:100%;height:100%;object-fit:cover;transition:.5s}
.gal figure:hover img{transform:scale(1.07)}
.gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 15px 13px;
 font-size:13.5px;font-weight:650;color:#fff;background:linear-gradient(transparent,rgba(11,11,13,.93))}

/* ---------------------------------------------------------------- Orte */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:6px 14px;border:1px solid var(--line);border-radius:99px;font-size:12.5px;color:var(--mut)}
a.chip:hover{border-color:var(--acc);color:#fff}

/* ---------------------------------------------------------------- FAQ */
details{border:1px solid var(--line);border-radius:11px;margin-bottom:11px;overflow:hidden}
summary{padding:16px 19px;cursor:pointer;font-weight:650;color:#fff;font-size:16px;
 list-style:none;display:flex;justify-content:space-between;gap:15px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--acc);font-size:20px;line-height:1;flex-shrink:0}
details[open] summary::after{content:"\2212"}
details .ans,.faq .a{padding:0 19px 18px;color:var(--mut);font-size:15.5px}

/* ---------------------------------------------------------------- Formular */
form.contact{background:var(--pan);border:1px solid var(--line);border-radius:15px;padding:30px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.f{margin-bottom:15px}
.f label{display:block;font-size:11.5px;font-weight:700;text-transform:uppercase;
 letter-spacing:.1em;color:var(--mut);margin-bottom:6px}
.f input,.f select,.f textarea{width:100%;background:var(--bg);border:1px solid var(--line);
 border-radius:9px;padding:12px 15px;color:#fff;font:inherit;font-size:15.5px}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--acc);
 box-shadow:0 0 0 3px rgba(34,167,208,.14)}
form.contact button{width:100%;padding:15px;border:none;border-radius:10px;
 background:linear-gradient(90deg,var(--acc),var(--acc2));color:#fff;font:inherit;font-weight:800;
 font-size:14px;text-transform:uppercase;letter-spacing:.1em;cursor:pointer}
form.contact button:hover{box-shadow:0 0 30px rgba(34,167,208,.35)}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--mut);margin-bottom:18px}
.consent input{width:17px;height:17px;margin-top:2px;accent-color:var(--acc);flex-shrink:0}

/* ---------------------------------------------------------------- Kontaktzeilen */
.cline{display:flex;gap:16px;align-items:flex-start;padding:15px 17px;background:rgba(255,255,255,.03);
 border:1px solid var(--line);border-radius:11px;margin-bottom:12px}
.cline:hover{border-color:rgba(34,167,208,.35)}
.cline .ci{width:40px;height:40px;border-radius:99px;background:var(--pan2);display:grid;
 place-items:center;flex-shrink:0;color:var(--acc)}
.cline h4{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--mut);margin-bottom:3px}
.cline p,.cline address{margin:0;color:var(--tx);font-style:normal;font-size:15.5px}

/* ---------------------------------------------------------------- Abschluss */
.cta{background:linear-gradient(135deg,var(--pan),rgba(255,255,255,.018));
 border:1px solid rgba(34,167,208,.24);border-radius:17px;padding:38px 30px;text-align:center}
.cta h2{font-size:clamp(22px,3.4vw,30px);margin-bottom:12px}
.cta p{color:var(--mut);max-width:560px;margin:0 auto 24px}
.tiny{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;font-size:11.5px;
 text-transform:uppercase;letter-spacing:.11em;color:var(--mut);font-weight:700;
 margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}

/* ---------------------------------------------------------------- Leuchtcenter */
.fx-pill{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
 color:#e879f9;background:rgba(192,38,211,.1);border:1px solid rgba(192,38,211,.28);
 padding:5px 13px;border-radius:99px;margin-bottom:18px}
.fx-grad{background:linear-gradient(90deg,#e879f9,#a855f7);-webkit-background-clip:text;
 background-clip:text;-webkit-text-fill-color:transparent}

/* ---------------------------------------------------------------- Bewertungen */
.bew{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:15px}
.bew article{background:var(--pan);border:1px solid var(--line);border-radius:13px;padding:24px}
.bew .zitat{margin:0 0 16px;color:var(--tx);font-size:15.5px}
.bew .wer{font-size:13.5px;color:var(--mut);margin:0}
.stars{display:inline-flex;gap:3px;color:#f0b429;vertical-align:middle}
.stars .i{width:16px;height:16px}
.bew-leer{background:var(--pan);border:1px solid var(--line);border-radius:13px;
 padding:30px;text-align:center;color:var(--mut)}
.bew-leer p{margin:0 0 18px;max-width:560px;margin-left:auto;margin-right:auto}

/* ---------------------------------------------------------------- Instagram */
.insta{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:11px}
.insta a{display:block;position:relative;border-radius:11px;overflow:hidden;
 border:1px solid var(--line);aspect-ratio:1/1;background:var(--pan)}
.insta img{width:100%;height:100%;object-fit:cover;transition:.4s}
.insta a:hover img{transform:scale(1.06);opacity:.85}
.insta-foot{text-align:center;padding:24px 0 0}
.insta-foot .btn{margin:0 auto}

/* ---------------------------------------------------------------- Karte */
.mapwrap{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--pan);line-height:0}
.mapwrap iframe{width:100%;height:420px;border:0;filter:grayscale(.35) contrast(1.05)}
@media(max-width:640px){.mapwrap iframe{height:300px}}

/* ---------------------------------------------------------------- Brotkrumen */
.crumbs{font-size:12.5px;color:var(--mut);padding:20px 0 0}
.crumbs a{color:var(--mut)}
.crumbs a:hover{color:var(--acc)}
.crumbs span{margin:0 7px;opacity:.5}

/* ---------------------------------------------------------------- Artikel */
article.beitrag{padding:14px 0 60px}
.kicker{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
 color:var(--acc);background:rgba(34,167,208,.1);border:1px solid rgba(34,167,208,.25);
 padding:4px 11px;border-radius:99px;margin:22px 0 16px}
article.beitrag h1{font-size:clamp(28px,5vw,42px);line-height:1.15;margin:0 0 18px;font-weight:800;letter-spacing:-.025em}
article.beitrag h2{font-size:clamp(21px,3.4vw,27px);line-height:1.3;margin:46px 0 14px;font-weight:700;letter-spacing:-.015em}
article.beitrag h3{font-size:18px;margin:32px 0 10px;font-weight:700}
article.beitrag p{margin:0 0 19px}
article.beitrag ul,article.beitrag ol{margin:0 0 19px;padding-left:21px}
article.beitrag li{margin-bottom:9px}
article.beitrag .cta{margin:48px 0 0}
article.beitrag .cta h2{margin:0 0 10px;font-size:22px}
.lead{font-size:19px;color:#d2d2d8;border-left:3px solid var(--acc);padding-left:19px;margin:0 0 30px}
.meta{font-size:13.5px;color:var(--mut);margin:0 0 34px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.meta a{color:var(--mut)}

/* Autorenbox */
.autor{display:flex;gap:18px;align-items:flex-start;background:var(--pan);border:1px solid var(--line);
 border-radius:13px;padding:24px;margin:48px 0 0}
.autor .kuerzel{width:52px;height:52px;border-radius:99px;flex-shrink:0;display:grid;place-items:center;
 background:linear-gradient(135deg,#3fc4e8,#2563eb);color:#0b0b0d;font-weight:900;font-size:17px}
.autor h2{font-size:16px;margin:0 0 6px}
.autor p{margin:0 0 8px;color:var(--mut);font-size:14.5px;line-height:1.65}
.autor p:last-child{margin-bottom:0}

/* Weiterlesen */
.more{margin:52px 0 0;padding-top:30px;border-top:1px solid var(--line)}
.more h2{font-size:15px;margin:0 0 16px;color:var(--mut);text-transform:uppercase;letter-spacing:.1em}
.more ul{list-style:none;padding:0;margin:0}
.more li{margin-bottom:11px}
.more a{font-weight:600}

/* ---------------------------------------------------------------- Blogliste */
.blog-hero{padding:48px 0 34px;border-bottom:1px solid var(--line)}
.blog-hero h1{margin-bottom:14px;font-size:clamp(28px,5vw,42px);font-weight:800;letter-spacing:-.025em}
.blog-hero p{color:var(--mut);font-size:18px;max-width:640px;margin:0}
.cats{display:flex;gap:9px;flex-wrap:wrap;padding:28px 0 6px}
.cat{padding:7px 15px;border:1px solid var(--line);border-radius:99px;font-size:13px;color:var(--mut);transition:.2s}
.cat:hover{border-color:var(--acc);color:#fff}
.group{padding:38px 0 0}
.group>h2{font-size:15px;color:var(--mut);text-transform:uppercase;letter-spacing:.1em;
 margin:0 0 18px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:15px}
.cards .card{padding:21px}
.cards .card h3{color:#fff;font-size:17px;margin:0 0 8px;line-height:1.35}
.cards .card p{font-size:14px;line-height:1.6}

/* ---------------------------------------------------------------- Ablauf */
ol.ablauf{list-style:none;counter-reset:schritt;padding:0;margin:0 0 26px}
ol.ablauf li{counter-increment:schritt;position:relative;padding:0 0 20px 52px;margin:0}
ol.ablauf li::before{content:counter(schritt);position:absolute;left:0;top:0;width:34px;height:34px;
 border-radius:99px;background:var(--pan2);border:1px solid var(--line);color:var(--acc);
 display:grid;place-items:center;font-weight:800;font-size:14px}
ol.ablauf li:not(:last-child)::after{content:"";position:absolute;left:17px;top:38px;bottom:2px;
 width:1px;background:var(--line)}

/* ---------------------------------------------------------------- Fuss */
footer.site{border-top:1px solid var(--line);padding:52px 0 26px;font-size:14.5px;color:var(--mut);margin-top:20px}
footer.site h2{font-size:11.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--mut);margin-bottom:14px}
footer.site a{color:var(--mut)}
footer.site a:hover{color:var(--acc)}
footer.site ul{list-style:none;padding:0;margin:0}
footer.site li{margin-bottom:8px}
.abgrenzung{font-size:12.5px;color:var(--mut);line-height:1.7;margin:0 0 18px}
.abgrenzung strong{color:var(--mut)}
.seotext{font-size:12.5px;color:var(--mut);line-height:1.75;
 border-top:1px solid var(--line);padding-top:20px;margin-top:32px}
.copy{border-top:1px solid var(--line);margin-top:20px;padding-top:20px;font-size:12.5px;color:var(--mut);
 display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}

/* ---------------------------------------------------------------- WhatsApp */
.wa{position:fixed;bottom:22px;right:22px;z-index:70;width:56px;height:56px;border-radius:99px;
 background:#22c55e;display:grid;place-items:center;box-shadow:0 8px 28px rgba(34,197,94,.42)}
.wa svg{width:28px;height:28px;fill:#fff;animation:nudge 7s ease-in-out infinite}
.wa::before{content:"";position:absolute;inset:0;border-radius:99px;background:#22c55e;
 animation:ring 2.4s ease-out infinite;z-index:-1}
@keyframes ring{0%{transform:scale(1);opacity:.55}100%{transform:scale(2);opacity:0}}
@keyframes nudge{0%,84%,100%{transform:translateY(0) rotate(0)}87%{transform:translateY(-5px) rotate(-9deg)}
 90%{transform:translateY(0) rotate(7deg)}93%{transform:translateY(-3px) rotate(-4deg)}}
.wa:hover{background:#4ade80;transform:scale(1.08)}
@media(prefers-reduced-motion:reduce){.wa::before,.wa svg{animation:none}}

/* ---------------------------------------------------------------- Symbole */
.i{display:block;flex-shrink:0}
.btn .i{width:19px;height:19px}

/* ---------------------------------------------------------------- Fehlerseite */
.fehler{min-height:60vh;display:flex;align-items:center;padding:70px 0}
.fehler .nr{font-size:clamp(64px,14vw,140px);font-weight:900;line-height:1;color:var(--pan2)}

/* ---------------------------------------------------------------- Mobil */
@media(max-width:900px){
 nav.main{position:fixed;inset:0;background:rgba(11,11,13,.98);flex-direction:column;
  justify-content:center;gap:22px;font-size:20px;transform:translateX(100%);transition:transform .3s;z-index:80;
  overflow-y:auto;padding:80px 22px}
 #burger:checked~nav.main{transform:translateX(0)}
 .burger-lbl{display:block;cursor:pointer;font-size:26px;color:#fff;z-index:90;line-height:1;user-select:none}
 #burger:checked~.burger-lbl::before{content:"\00D7"}
 .burger-lbl::before{content:"\2261"}
 .row{grid-template-columns:1fr}
 section{padding:56px 0}
 .hero{min-height:auto;padding:64px 0 72px}
 .scroll-hint{display:none}
 .autor{flex-direction:column}
 body{font-size:16.5px}
}
@media(max-width:560px){
 .cards{grid-template-columns:1fr}
}