/* Preserve the clear template directory and violet identity; polish its shared pieces. */
:root{--border:#dfe5ef;--border-light:#edf1f7;--shadow-sm:0 3px 8px #26335b05,0 12px 28px #26335b0b;--radius-lg:14px;--radius-md:8px}
body header{border-color:#e7edf5;box-shadow:0 3px 12px #26335b03}
body .hero{background:radial-gradient(ellipse at 20% 30%,#f1f3ff6b,transparent 55%),#fff}
body :is(.card,.info-box,.trust-section){border-radius:14px;border-color:#dfe5ef;box-shadow:var(--shadow-sm)}
body .card{background:linear-gradient(150deg,#fff,#fdfdff)}
body .card:hover{border-color:#b5b4ee;box-shadow:0 8px 24px #42358914}
body .info-box{background:#f6f8fc}
body .info-box--gen{background:#f3f2ff}
body :is(.cta-button,.gen-strip__btn){border-radius:8px;box-shadow:0 3px 8px #26335b0a,0 7px 16px #26335b12}
body :is(.cta-button,.gen-strip__btn){max-width:100%;white-space:normal;text-align:center}
body :is(.card,.info-box,.hero) :is(h1,h2,h3,p){overflow-wrap:anywhere}
body .gen-strip>*{min-width:0}
body .two-column>*{min-width:0}
body article :is(h1,h2,h3){overflow-wrap:anywhere;hyphens:auto}
body .consent-banner__actions{flex-wrap:wrap}
body .consent-btn{max-width:100%;white-space:normal}
body .cta-button-primary{background:linear-gradient(135deg,#6355ef,#4a3bd4);box-shadow:0 3px 6px #4839c90b,0 7px 16px #4839c919}
body .cta-button-primary:hover{background:linear-gradient(135deg,#5849e0,#4030c3)}
body .gen-strip{border-radius:14px;border-color:#d9d6f2;box-shadow:var(--shadow-sm)}
body :is(a,button,input,textarea,select):focus-visible{outline:3px solid #4f46e5;outline-offset:3px}
body :is(input[type=text],input[type=email],textarea,select){border-radius:8px;border-color:#bcc8dc}
@media(prefers-reduced-motion:reduce){body :is(.card,.cta-button,.gen-strip__btn){transition:none}}

/* Approved FAQ rhythm, expressed once per site using its existing brand tokens. */
body .df-faq{box-sizing:border-box;width:100%;max-width:60rem;margin:0;border:1px solid var(--df-line);border-radius:14px;background:var(--df-white,#fff);box-shadow:var(--df-shadow);overflow:hidden;color:var(--df-text)}
body .df-faq-host:is(.faq-card,.accordion,.faq__col,.faq__group){background:none;border:0;box-shadow:none;padding:0;border-radius:0}
body .df-row{padding:0;margin:0;border:0;border-bottom:1px solid var(--df-soft-line);background:transparent}
body .df-row:last-child{border-bottom:0}
body .df-q{box-sizing:border-box;appearance:none;display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;min-height:63px;padding:19.2px 27.2px;margin:0;border:0;border-radius:0;background:none;box-shadow:none;color:var(--df-ink);font-family:inherit;font-size:1.02rem;font-weight:500;line-height:1.4;letter-spacing:normal;text-align:left;text-transform:none;cursor:pointer;transition:background .2s}
body .df-q::before,body .df-q::after{content:none}
body .df-q .df-label{font:inherit;color:inherit;min-width:0}
body .df-q:hover,body .df-open{background:var(--df-pale)}
body .df-q:focus-visible{outline:3px solid var(--df-accent);outline-offset:-3px}
body .df-sign{display:flex;align-items:center;justify-content:center;flex:0 0 auto;box-sizing:border-box;width:25px;height:25px;padding:0;margin:0;border:1px solid var(--df-accent);border-radius:50%;color:var(--df-accent);background:none;font-size:17px;font-weight:400;line-height:1;transition:transform .2s,background .2s,color .2s}
body .df-open .df-sign{transform:rotate(45deg);background:var(--df-accent);color:#fff}
body .df-a{box-sizing:border-box;max-width:74ch;padding:0 27.2px 22.4px;margin:0;color:var(--df-text);font:inherit;font-size:.97rem;font-weight:var(--df-weight,400);line-height:1.72;letter-spacing:normal}
body .df-a[hidden]{display:none}
body .df-a-inner{margin:0;padding:0;font:inherit;color:inherit}
body .df-a-inner :is(p,li){font:inherit;color:inherit;max-width:none;letter-spacing:normal}
body .df-a-inner p{margin:0 0 .8rem;padding:0}
body .df-a-inner p:last-child{margin-bottom:0}
body .df-a-inner a{color:var(--df-ink);text-decoration:underline;text-underline-offset:3px}
@media(prefers-reduced-motion:reduce){body .df-faq :is(.df-q,.df-sign){transition:none}}

/* 13.09.2026: klare Typografie und ein ruhiges Verzeichnis fuer Textvorlagen. */
:root { --text-muted:#586174; --text-light:#657087; --accent:#5142ce; --accent-hover:#392ca8; --border:#dddce7; --border-light:#e9e7ef; }
body { background:#fff; }
body .container { max-width:1248px; padding-inline:clamp(20px,4vw,48px); }
body header { background:#ffffffef; box-shadow:none; border-color:#e8e6ef; }
body nav { min-height:78px; }
body .logo { font-weight:650; letter-spacing:-.045em; }
body .logo .logo-tld { color:var(--accent); font-weight:500; }
body .nav-links a { color:#454b5c; }
body .nav-links a:hover { background:#f1effb; color:var(--accent); }
body .hero { background:#f7f6fb; text-align:left; padding:64px 0 56px; border-bottom:1px solid #e4e1ed; }
body .hero h1 { max-width:1000px; margin-left:0; margin-right:0; font-size:clamp(2.1rem,4.3vw,3.65rem); line-height:1.12; font-weight:550; letter-spacing:-.045em; text-wrap:balance; }
body .hero p { max-width:720px; margin:24px 0 0; color:#50586a; font-size:1.125rem; line-height:1.75; }
body .hero-cta-group { justify-content:flex-start; margin-top:30px; gap:12px; }
body .cta-button { min-height:48px; border-radius:6px; padding:12px 20px; box-shadow:none; font-weight:550; }
body .cta-button:hover { transform:none; box-shadow:none; }
body .cta-button-primary { background:var(--accent); box-shadow:none; }
body .cta-button-primary:hover { background:var(--accent-hover); }
body h2 { font-size:clamp(1.65rem,3vw,2.35rem); line-height:1.2; font-weight:550; letter-spacing:-.035em; }
body h3 { font-weight:550; }
body main.section-spacing { padding-top:48px; padding-bottom:80px; }
body main > section:first-child > h2 { margin-top:0; }
body .breadcrumbs { padding-block:22px; font-size:.85rem; }
body main > h1 { max-width:1000px; font-size:clamp(2rem,4vw,3.4rem); font-weight:550; line-height:1.15; letter-spacing:-.04em; hyphens:auto; }
body main > .hero-text { max-width:76ch; color:#535b6b; line-height:1.8; }
body .text-examples { background:transparent; border:0; border-radius:0; padding:0; margin:28px 0 48px; }
body .text-examples ul { gap:18px; }
body .text-examples li { border:1px solid #e1deeb; border-radius:8px; padding:clamp(22px,3vw,32px); font-size:1.025rem; line-height:1.8; color:#343c4d; background:#fdfcfe; }
body .text-examples li:hover { border-color:#aaa0d7; }
body .example-generator-link { margin-top:20px; color:var(--accent); min-height:44px; display:flex; align-items:center; width:fit-content; max-width:100%; font-weight:550; text-underline-offset:4px; }
body .example-generator-link:hover { text-decoration:underline; }
body .toc { background:#f7f6fa; border:1px solid #e6e2ef; border-radius:8px; padding:24px 18px; }
body .toc h3 { color:#454051; margin:0 10px 14px; letter-spacing:.07em; }
body .toc a { padding:10px; color:#4b5161; }
body .two-column { gap:48px; }
body .two-column > article { min-width:0; }
body .two-column > article > section:first-child > h2 { margin-top:0; }
body .info-box { background:#f7f6fb; border:0; border-left:3px solid var(--accent); border-radius:0; padding:clamp(24px,3vw,36px); box-shadow:none; }
body .info-box--gen { background:#f0edf9; }
body .gen-strip { background:#eeebf9; border:1px solid #ddd6ef; padding:28px 32px; border-radius:8px; box-shadow:none; gap:24px; }
body .gen-strip strong { color:#292238; font-size:1.125rem; }
body .gen-strip small { color:#565066; font-size:.95rem; line-height:1.65; }
body .gen-strip__btn { background:var(--accent); box-shadow:none; min-height:48px; display:inline-flex; align-items:center; justify-content:center; border-radius:6px; }
body .gen-strip__btn:hover { background:var(--accent-hover); box-shadow:none; }
body footer { background:#171525; }
body footer :is(p,a) { color:#bdb9ca; }
body footer h4 { color:#f1eef8; line-height:1.5; overflow-wrap:anywhere; }
body .footer-grid { gap:36px; }
body .footer-bottom { border-color:#393344; }
body .consent-btn { min-height:44px; }

/* Startseite: grosser Auftakt, danach ein klar gegliedertes Verzeichnis. */
body.ab-home .hero { padding-block:clamp(56px,6vw,88px); }
body.ab-home .hero h1 { font-size:clamp(2.35rem,5vw,4.25rem); max-width:1080px; font-weight:450; }
body.ab-home .hero h1 strong { color:var(--accent); font-weight:650; }
body.ab-home .hero p { max-width:700px; }
body.ab-home .trust-section { grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin:0; padding:28px 0; background:transparent; border:0; border-bottom:1px solid #dedbe6; border-radius:0; box-shadow:none; overflow:visible; }
body.ab-home .trust-item { background:transparent; text-align:left; padding:8px 32px; border-right:1px solid #dedbe6; }
body.ab-home .trust-item:first-child { padding-left:0; }
body.ab-home .trust-item:last-child { border-right:0; }
body.ab-home .trust-item strong { color:#292337; font-size:clamp(1.5rem,3vw,2rem); font-weight:550; }
body.ab-home .trust-item p { color:#65606f; margin:0; font-size:.8rem; letter-spacing:.07em; }
body.ab-home main.section-spacing { padding-top:64px; }
body.ab-home main > .content-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 48px; margin:32px 0 64px; }
body.ab-home .card { position:relative; padding:28px 0; background:transparent; border:0; border-top:1px solid #d9d5e3; border-radius:0; box-shadow:none; }
body.ab-home .card:hover { transform:none; border-color:#8a7abc; box-shadow:none; }
body.ab-home .card h3 { align-items:baseline; font-size:1.25rem; gap:16px; line-height:1.35; margin-bottom:14px; }
body.ab-home .card h3 .icon { flex:0 0 28px; width:28px; height:auto; padding:0; background:transparent; border-radius:0; font-size:.85rem; font-weight:550; color:var(--accent); justify-content:flex-start; }
body.ab-home .card p { margin-left:44px; font-size:1rem; line-height:1.7; color:#575d6a; margin-bottom:12px; }
body.ab-home .card .cta-button { width:fit-content; margin-left:44px; padding:8px 0; min-height:44px; border:0; border-radius:0; background:transparent; box-shadow:none; color:var(--accent); text-align:left; justify-content:flex-start; }
body.ab-home .card .cta-button:hover { background:transparent; color:var(--accent-hover); text-decoration:underline; text-underline-offset:4px; }
body.ab-home section.mt-lg { margin-top:56px; }
body.ab-home section.mt-lg > h2 { margin-top:0; }
body.ab-home section.mt-lg > .content-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; }
body.ab-home .info-box ul { margin-left:0!important; line-height:1.9; }
body.ab-home .hinweis-portfolio { text-align:left; max-width:75ch; margin:24px 0 0; font-size:.9rem; color:#5d5869; }
@media(min-width:1024px) {
 body .two-column { grid-template-columns:240px minmax(0,1fr); }
 body .footer-grid { grid-template-columns:1.4fr 1fr 1fr 1fr; }
 body .footer-section:first-child h4 { font-size:.75rem; letter-spacing:.02em; }
}
@media(max-width:1023px) {
 body.ab-home section.mt-lg > .content-grid { grid-template-columns:1fr; gap:0; }
 body .two-column { gap:36px; }
 body .toc { position:static; }
}
@media(max-width:767px) {
 body nav { min-height:70px; display:grid; grid-template-columns:minmax(0,1fr) 44px; gap:6px 12px; padding-block:12px; }
 body .logo { grid-column:1; grid-row:1; font-size:clamp(.85rem,3.7vw,1rem); }
 body .menu-toggle { grid-column:2; grid-row:1; min-height:44px; width:44px; padding:8px; }
 body .header-phone { grid-column:1 / -1; grid-row:2; font-size:.8rem; min-height:24px; }
 body .nav-links { grid-column:1 / -1; grid-row:3; margin-top:6px; }
 body .hero { padding-block:40px; }
 body .hero p { font-size:1rem; margin-top:20px; }
 body .hero-cta-group { align-items:stretch; }
 body .hero-cta-group .cta-button { width:100%; }
 body.ab-home .hero { padding-block:44px; }
 body.ab-home .hero h1 br { display:none; }
 body.ab-home .hero h1 strong { display:block; margin-bottom:.15em; }
 body.ab-home .trust-section { padding-block:20px; }
 body.ab-home .trust-item { padding:4px 14px; }
 body.ab-home .trust-item:last-child { padding-right:0; }
 body.ab-home .trust-item p { font-size:.62rem; letter-spacing:.02em; }
 body.ab-home main.section-spacing { padding-top:42px; }
 body.ab-home main > .content-grid { grid-template-columns:1fr; gap:0; margin-bottom:44px; }
 body.ab-home .card { padding-block:24px; }
 body.ab-home .card h3 { font-size:1.2rem; }
 body.ab-home section.mt-lg { margin-top:40px; }
 body .gen-strip { padding:24px; align-items:stretch; }
 body .gen-strip__btn { width:100%; }
 body .text-examples li { font-size:1rem; padding:22px; }
 body .footer-grid { gap:28px; }
}