/* Do4U: Bedienung und Wirkung. Liegt hinter do4u-design.css. Alles Bewegte steht unten und entfaellt bei "weniger Bewegung". */

/* ---- Katalog: Karten statt langer Liste ---- */
.do4u-design .d4-catalog>li[hidden]{display:none!important}
.d4-catalog>li{position:relative;isolation:isolate}
.d4-catalog h2 a::after{content:'';position:absolute;inset:0;border-radius:inherit}
.d4-catalog-actions{position:relative;z-index:1}
@media(min-width:760px){
 .do4u-design .d4-catalog{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin:18px 0 28px}
 .do4u-design .d4-catalog>li{display:flex!important;flex-flow:row wrap;align-items:center;align-content:flex-start;justify-content:space-between;gap:8px 10px;min-width:0;padding:18px 18px 10px!important;border:1px solid var(--d4-line)!important;border-radius:16px!important;background:var(--d4-surface)!important}
 html.light .do4u-design .d4-catalog>li{background:var(--d4-surface)!important}
 html.light .do4u-design .d4-catalog>li:hover,.do4u-design .d4-catalog>li:focus-within{background:var(--d4-surface)!important;border-radius:16px!important}
 .do4u-design .d4-catalog>li:hover,.do4u-design .d4-catalog>li:focus-within{border-color:color-mix(in srgb,var(--d4-accent) 45%,var(--d4-line))!important;box-shadow:var(--d4-shadow)}
 .do4u-design .d4-catalog>li>h2{flex:1 1 100%;min-width:0;margin:0!important;font-size:1.08rem!important;line-height:1.3;text-align:left}
 .d4-catalog h2 a{justify-content:flex-start}
 .do4u-design .d4-catalog>li>p{margin:0!important}
 .do4u-design .d4-catalog>li>p:first-of-type{flex:1 1 100%;min-height:4.05rem;font-size:.9rem;line-height:1.5;color:var(--d4-muted)!important;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
 .do4u-design .d4-catalog>li>p:last-of-type{flex:1 1 0;min-width:90px;margin-top:auto!important;text-align:left;font-size:.78rem}
 .do4u-design .d4-catalog-actions{flex:none;justify-content:flex-end;gap:10px;margin-top:auto}
 .d4-catalog-actions .d4-favorite{min-height:36px;min-width:36px;width:36px;height:36px;padding:0}
 .d4-catalog-actions>a{padding:6px 0;min-height:36px}
}

/* Suche und Kategorien bleiben beim Scrollen im Blick */
.d4-catalog-page>.d4-finder:not([hidden]){display:contents}
.d4-catalog-page>.d4-finder>label{display:block;margin:20px 0 8px;font-size:.82rem;font-weight:700}
.d4-catalog-page>.d4-finder>.d4-search-field{position:sticky;top:calc(var(--d4w-nav,66px) + 8px);z-index:31}
.d4-catalog-page>.d4-finder>.d4-categories{position:sticky;top:calc(var(--d4w-nav,66px) + 62px);z-index:30;margin:0;padding:8px 0;background:var(--d4-bg)}
.d4-catalog-page>.d4-finder>.d4-categories::before{content:'';position:absolute;left:0;right:0;bottom:100%;height:62px;background:var(--d4-bg)}
.d4-catalog-page>.d4-finder>.d4-personal-filters,.d4-catalog-page>.d4-finder>.d4-filter-summary{margin-top:6px}
.d4-catalog-page .d4-catalog h2,.d4-catalog-page .d4-catalog li{scroll-margin-top:190px}

/* Mobil: kurze Karten, die ganze Karte ist der Link */
@media(max-width:759px){
 .do4u-design .d4-catalog>li{display:flex!important;flex-flow:row wrap;align-items:center;justify-content:space-between;gap:6px 10px;padding:14px 8px!important}
 .do4u-design .d4-catalog>li>h2{flex:1 1 100%;margin:0!important;font-size:1.02rem!important}
 .do4u-design .d4-catalog>li>p{margin:0!important}
 .do4u-design .d4-catalog>li>p:first-of-type{flex:1 1 100%;font-size:.88rem;line-height:1.45;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
 .do4u-design .d4-catalog>li>p:last-of-type{flex:1 1 0;font-size:.76rem;text-align:left}
 .do4u-design .d4-catalog-actions{flex:none;justify-content:flex-end}
 .d4-catalog-actions>a{display:none}
 .d4-catalog-actions .d4-favorite{width:40px;height:40px;min-width:40px;min-height:40px;padding:0}
 .d4-catalog-page>.d4-finder>.d4-categories{top:calc(var(--d4w-nav,66px) + 60px);padding:6px 0}
}

/* ---- Werkbank: das Werkzeug steht im Mittelpunkt ---- */
.d4-tool-heading>p{display:none}
.do4u-design .d4-input-pane>p:first-child,.do4u-design .d4-input-pane>.do4u-mass:first-child{font-size:.94rem!important;line-height:1.6!important;color:var(--d4-muted)!important}
.d4-tool-sidebar .d4-filter-summary{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.d4-tool-sidebar .d4-personal-filters{gap:2px}
.d4-tool-sidebar .d4-personal-filters button{padding:5px 8px;font-size:.76rem;min-height:32px}
.do4u-design .d4-site-pick{padding:12px 18px!important;margin-bottom:12px}
.do4u-design .d4-site-pick p{display:none;margin:6px 0 0}
.do4u-design .d4-site-pick:focus-within p{display:block}

/* ---- Schnellsuche ---- */
.d4w-such{cursor:pointer}
.d4w-pal{position:fixed;inset:12vh auto auto 50%;transform:translateX(-50%);margin:0;padding:0;width:min(680px,calc(100vw - 24px));max-height:min(70vh,620px);overflow:hidden;color:var(--d4-ink);background:var(--d4-surface);border:1px solid var(--d4-line);border-radius:18px;box-shadow:0 30px 80px -20px #0b0d2acc}
.d4w-pal[open]{display:flex;flex-direction:column}
.d4w-pal::backdrop{background:#0b0d2a73;backdrop-filter:blur(5px)}
.d4w-pal-kopf{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--d4-line);color:var(--d4-muted)}
.d4w-pal-kopf>span{display:flex;flex:none}
.d4w-pal-kopf input{flex:1 1 auto;min-width:0;border:0;outline:0;background:transparent;color:var(--d4-ink);font-size:1.05rem;padding:4px 0;min-height:32px}
.d4w-pal-kopf input::-webkit-search-cancel-button{display:none}
.do4u-design .d4w-pal-kopf input:focus{outline:0!important;box-shadow:none!important}
.d4w-pal-kopf:focus-within{box-shadow:inset 0 -2px 0 var(--d4-accent)}
.d4w-pal kbd{flex:none;padding:1px 7px;border:1px solid var(--d4-line);border-radius:6px;font-family:inherit;font-size:.7rem;font-weight:600;line-height:1.5;color:var(--d4-muted);background:var(--d4-raised)}
.d4w-pal-liste{overflow-y:auto;padding:8px;overscroll-behavior:contain}
.d4w-pal-zeile{display:flex;align-items:center;gap:13px;padding:10px 12px;border-radius:11px;color:var(--d4-ink)!important;text-decoration:none!important}
.d4w-pal-zeile[aria-selected=true]{background:var(--d4-soft)}
.d4w-pal-zeile svg{flex:none;width:20px;height:20px;color:var(--d4-accent)}
.d4w-pal-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.d4w-pal-text strong{font-weight:650;font-size:.96rem}
.d4w-pal-text small{font-size:.8rem;color:var(--d4-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d4w-pal-zeile em{flex:none;font-style:normal;font-size:.72rem;color:var(--d4-muted)}
.d4w-pal-leer{display:block;padding:18px;text-align:center;color:var(--d4-accent)!important}
@media(max-width:640px){.d4w-pal{inset:8px auto auto 50%;max-height:calc(100dvh - 16px)}.d4w-pal-zeile em,.d4w-pal kbd{display:none}}

/* ---- Leiste "Jetzt testen" und Nach oben ---- */
.d4w-leiste{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:40;display:flex;align-items:center;gap:18px;max-width:min(720px,calc(100vw - 150px));padding:9px 10px 9px 20px;background:var(--d4-surface);border:1px solid var(--d4-line);border-radius:999px;box-shadow:0 16px 42px -14px #0b0d2aaa}
.d4w-leiste[hidden]{display:none}
.d4w-leiste strong{min-width:0;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d4w-leiste a{flex:none;border-radius:999px!important;padding:.45rem 1.05rem!important;font-size:.9rem}
.d4w-oben{position:fixed;right:18px;bottom:18px;z-index:39;width:44px;height:44px;border-radius:50%;border:1px solid var(--d4-line);background:var(--d4-surface);color:var(--d4-accent);font-size:1.1rem;font-weight:700;line-height:1;cursor:pointer;box-shadow:0 10px 26px -12px #0b0d2a99}
.d4w-oben[hidden]{display:none}
.d4w-oben:hover{border-color:var(--d4-accent)}
.d4w-oben:focus-visible{outline:2px solid var(--d4-accent);outline-offset:3px}
@media(max-width:640px){.d4w-leiste{left:72px;right:70px;bottom:12px;transform:none;max-width:none;padding:6px}.d4w-leiste strong{display:none}.d4w-leiste a{flex:1 1 auto;justify-content:center;text-align:center}.d4w-oben{right:12px;bottom:12px}}
@media print{.d4w-leiste,.d4w-oben,.d4w-balken,.d4w-pal,.d4w-such{display:none!important}}

/* ---- Wirkung: nur wenn Bewegung erwuenscht ist ---- */
@media(prefers-reduced-motion:no-preference){
 @view-transition{navigation:auto}
 /* Lichtkegel */
 .d4-catalog>li::before,.d4-overview-grid>section::before,.d4-overview-grid>a::before,.d4-flow-card::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .25s;background:radial-gradient(280px circle at var(--d4w-x,50%) var(--d4w-y,0),color-mix(in srgb,var(--d4-accent) 15%,transparent),transparent 72%)}
 .d4-overview-grid>section,.d4-overview-grid>a,.d4-flow-card{position:relative;isolation:isolate}
 .d4-catalog>li:hover::before,.d4-overview-grid>section:hover::before,.d4-overview-grid>a:hover::before,.d4-flow-card:hover::before{opacity:1}
 .do4u-design .d4-catalog>li{transition:transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .2s,border-color .2s}
 .do4u-design .d4-catalog>li:hover{transform:translateY(-3px)}
 .d4-row-arrow{transition:transform .2s}
 .d4-catalog>li:hover .d4-row-arrow{transform:translate(2px,-2px)}
 /* Laufender Farbrand um die Demo */
 @property --d4w-w{syntax:'<angle>';inherits:false;initial-value:0deg}
 .d4-hero form#demo{position:relative}
 .d4-hero form#demo::before{content:'';position:absolute;inset:-1px;z-index:0;border-radius:inherit;padding:1.5px;pointer-events:none;background:conic-gradient(from var(--d4w-w),transparent 0 58%,#ffd23f 70%,var(--d4-accent) 84%,#9974ed 94%,transparent);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:d4w-kreis 8s linear infinite}
 @keyframes d4w-kreis{to{--d4w-w:360deg}}
 /* Glanz auf den Hauptknoepfen */
 .do4u-design :is(a,button).bg-accent-600,.do4u-design .d4-primary{position:relative;overflow:hidden}
 .do4u-design :is(a,button).bg-accent-600::after,.do4u-design .d4-primary::after{content:'';position:absolute;inset:0 auto 0 -60%;width:45%;pointer-events:none;background:linear-gradient(100deg,transparent,#ffffff4d,transparent);transform:skewX(-18deg);opacity:0}
 .do4u-design :is(a,button).bg-accent-600:hover::after,.do4u-design .d4-primary:hover::after{opacity:1;animation:d4w-glanz .85s ease-out}
 @keyframes d4w-glanz{to{left:125%}}
 /* Sanfter Farblauf in der Hauptzeile */
 .d4-hero h1 span{background-size:220% 100%;animation:d4w-text 7s ease-in-out infinite alternate}
 @keyframes d4w-text{from{background-position:0 50%}to{background-position:100% 50%}}
 /* Vom Eingang zum Ergebnis */
 .d4-flow-arrow{animation:d4w-stoss 1.9s ease-in-out infinite}
 @keyframes d4w-stoss{50%{transform:translateX(7px)}}
 @media(max-width:767px){.d4-flow-arrow{animation:none}}
 /* Werkzeugwechsel, fertiges Ergebnis, neue Seite */
 .d4w-wechsel{animation:d4w-rein .24s ease-out}
 @keyframes d4w-rein{from{opacity:.25;transform:translateY(6px)}to{opacity:1;transform:none}}
 .d4w-seite{animation:d4w-rein .32s ease-out}
 .d4w-fertig{animation:d4w-leuchten 1.3s ease-out}
 @keyframes d4w-leuchten{0%{box-shadow:inset 0 0 0 2px var(--d4-accent),0 0 34px -6px var(--d4-accent)}100%{box-shadow:inset 0 0 0 0 transparent,0 0 0 0 transparent}}
 .d4w-leiste:not([hidden]){animation:d4w-hoch .28s cubic-bezier(.2,.7,.3,1)}
 @media(min-width:641px){@keyframes d4w-hoch{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}}}
 @media(max-width:640px){@keyframes d4w-hoch{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}}
 .d4w-pal[open]{animation:d4w-pal .18s cubic-bezier(.2,.7,.3,1)}
 @keyframes d4w-pal{from{opacity:0;transform:translate(-50%,-10px) scale(.985)}to{opacity:1;transform:translate(-50%,0)}}
 /* Fortschritt beim Scrollen */
 @supports(animation-timeline:scroll()){
  .d4w-balken{position:fixed;inset:0 0 auto 0;height:2px;z-index:60;pointer-events:none;transform-origin:0 50%;background:linear-gradient(90deg,var(--d4-accent),#9974ed,#ffd23f);animation:d4w-balken linear both;animation-timeline:scroll(root)}
  @keyframes d4w-balken{from{transform:scaleX(0)}to{transform:scaleX(1)}}
 }
}
html.d4-reduce .d4w-balken,html.d4-reduce .d4-hero form#demo::before{display:none}

/* ---- Guthaben-Zeile ---- */
.do4u-design .d4w-bal{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin:0 0 14px;padding:12px 16px;border:1px solid var(--d4-line);border-radius:16px;background:linear-gradient(115deg,color-mix(in srgb,var(--d4-accent) 9%,var(--d4-surface)),var(--d4-surface) 55%);font-weight:400}
.d4w-bal-sym{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:13px;color:#fff;background:linear-gradient(135deg,#3434d9,#7537b8)}
.d4w-bal-sym svg{width:22px;height:22px}
.d4w-bal-text{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:1px}
.d4w-bal-haupt{font-size:1rem;font-weight:600;color:var(--d4-ink)}
.d4w-bal-haupt b{font-size:1.32rem;font-weight:750;letter-spacing:-.02em;color:var(--d4-accent);font-variant-numeric:tabular-nums}
.d4w-bal-zusatz{font-size:.8rem;color:var(--d4-muted)}
.d4w-bal-links{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.do4u-design .d4w-bal-links a{display:inline-flex;align-items:center;min-height:36px;padding:6px 12px;border:1px solid var(--d4-line);border-radius:10px;background:var(--d4-surface);color:var(--d4-ink)!important;font-size:.82rem;font-weight:500;text-decoration:none;transition:border-color .15s,background .15s}
.do4u-design .d4w-bal-links a:hover{border-color:var(--d4-accent);background:var(--d4-soft)}
.do4u-design .d4w-bal-links a.d4w-bal-kauf{border-color:transparent;background:linear-gradient(115deg,#3434d9,#4c36df 65%,#5531c9);color:#fff!important;font-weight:650}
.do4u-design .d4w-bal-links a.d4w-bal-kauf:hover{filter:brightness(1.1)}
.d4w-bal-wenig .d4w-bal-haupt b{color:#d9480f}
@media(max-width:640px){.d4w-bal-links{width:100%}.do4u-design .d4w-bal-links a{flex:1 1 auto;justify-content:center}}

/* Kopf der Werkbank: das Werkzeug soll schneller im Blick sein */
.do4u-design .d4-tools-page>.d4-eyebrow{display:none}
.do4u-design .d4-tools-page{padding-top:18px}
.do4u-design .d4-tools-page>h1{font-size:clamp(1.6rem,2.4vw,2.2rem)!important;margin-bottom:2px!important}
.do4u-design .d4-tools-page>h1+p{font-size:.92rem;margin-bottom:10px!important;color:var(--d4-muted)!important}

/* ---- Auswahlfelder ---- */
.d4w-sel{position:relative;display:block;width:100%;min-width:0}
.d4w-sel[hidden]{display:none}
.d4w-sel>select{position:absolute!important;inset:0;width:100%!important;height:100%!important;min-height:0!important;margin:0!important;padding:0!important;opacity:0;pointer-events:none}
.d4w-sel-knopf{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:46px;padding:.55rem .75rem .55rem .9rem;border:1px solid var(--d4-line);border-radius:10px;background:var(--d4-raised);color:var(--d4-ink);font-size:1rem;line-height:1.35;text-align:left;cursor:pointer;transition:border-color .16s,box-shadow .16s,background .16s}
.d4w-sel-knopf:hover{border-color:color-mix(in srgb,var(--d4-accent) 55%,var(--d4-line))}
.d4w-sel-knopf:focus-visible{outline:2px solid var(--d4-accent);outline-offset:2px}
.d4w-sel-knopf[aria-expanded=true]{border-color:var(--d4-accent);box-shadow:0 0 0 4px var(--d4-soft)}
.d4w-sel-text{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.d4w-sel-pfeil{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--d4-soft);color:var(--d4-accent);transition:transform .18s}
.d4w-sel-knopf[aria-expanded=true] .d4w-sel-pfeil{transform:rotate(180deg)}
.d4w-aus .d4w-sel-knopf{opacity:.55;cursor:not-allowed}
.d4w-sel-feld{position:fixed;z-index:80;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--d4-line);border-radius:14px;background:var(--d4-surface);color:var(--d4-ink);box-shadow:0 22px 56px -18px #0b0d2acc}
.d4w-sel-such{flex:none;width:auto;margin:8px 8px 0;min-height:38px;padding:6px 10px;border:1px solid var(--d4-line);border-radius:9px;background:var(--d4-raised);color:var(--d4-ink);font-size:.9rem}
.d4w-sel-such:focus{outline:2px solid var(--d4-accent);outline-offset:1px}
.d4w-sel-liste{overflow-y:auto;padding:6px;overscroll-behavior:contain}
.d4w-sel-gruppe{padding:10px 10px 4px;font-size:.68rem;font-weight:750;letter-spacing:.09em;text-transform:uppercase;color:var(--d4-muted)}
.d4w-sel-gruppe[hidden],.d4w-sel-zeile[hidden]{display:none}
.d4w-sel-zeile{position:relative;padding:9px 34px 9px 11px;border-radius:9px;font-size:.92rem;line-height:1.35;cursor:pointer}
.d4w-sel-zeile.d4w-sel-hier{background:var(--d4-soft)}
.d4w-sel-zeile[aria-selected=true]{color:var(--d4-accent);font-weight:700;background:color-mix(in srgb,var(--d4-accent) 11%,transparent)}
.d4w-sel-zeile[aria-selected=true]::after{content:'✓';position:absolute;right:12px;top:50%;transform:translateY(-50%)}
.d4w-sel-zeile[aria-disabled=true]{opacity:.45;cursor:not-allowed}

/* ---- Haekchen und Optionen ---- */
body.do4u-design:not(.d4-route-admin) #bp-content input[type=checkbox]:not(.sr-only):not(.peer),body.do4u-design:not(.d4-route-admin) #bp-content input[type=radio]:not(.sr-only):not(.peer){-webkit-appearance:none;appearance:none;flex:none;display:inline-grid;place-items:center;width:22px;height:22px;margin-inline-end:6px;vertical-align:-5px;border:1.5px solid color-mix(in srgb,var(--d4-accent) 40%,var(--d4-line));background:var(--d4-raised);cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s,transform .12s}
body.do4u-design:not(.d4-route-admin) #bp-content input[type=checkbox]:not(.sr-only):not(.peer){border-radius:7px}
body.do4u-design:not(.d4-route-admin) #bp-content input[type=radio]:not(.sr-only):not(.peer){border-radius:50%}
body.do4u-design:not(.d4-route-admin) #bp-content input[type=checkbox]:not(.sr-only):not(.peer)::before{content:'';width:12px;height:12px;background:#fff;clip-path:polygon(14% 50%,0 65%,40% 100%,100% 22%,85% 8%,39% 69%);transform:scale(0);transition:transform .16s cubic-bezier(.3,1.6,.5,1)}
body.do4u-design:not(.d4-route-admin) #bp-content input[type=radio]:not(.sr-only):not(.peer)::before{content:'';width:10px;height:10px;border-radius:50%;background:#fff;transform:scale(0);transition:transform .16s cubic-bezier(.3,1.6,.5,1)}
body.do4u-design:not(.d4-route-admin) #bp-content input[type=checkbox]:not(.sr-only):not(.peer):checked,body.do4u-design:not(.d4-route-admin) #bp-content input[type=radio]:not(.sr-only):not(.peer):checked,body.do4u-design:not(.d4-route-admin) #bp-content input[type=checkbox]:not(.sr-only):not(.peer):indeterminate{border-color:transparent;background:linear-gradient(135deg,#3434d9,#7537b8);box-shadow:0 3px 10px -3px #4c36dfb0}
body.do4u-design:not(.d4-route-admin) #bp-content input:not(.sr-only):not(.peer):is([type=checkbox],[type=radio]):checked::before{transform:scale(1)}
body.do4u-design:not(.d4-route-admin) #bp-content input[type=checkbox]:not(.sr-only):not(.peer):indeterminate::before{clip-path:none;height:2px;transform:scale(1)}
body.do4u-design:not(.d4-route-admin) #bp-content input:not(.sr-only):not(.peer):is([type=checkbox],[type=radio]):hover:not(:disabled){border-color:var(--d4-accent)}
body.do4u-design:not(.d4-route-admin) #bp-content input:not(.sr-only):not(.peer):is([type=checkbox],[type=radio]):active:not(:disabled){transform:scale(.9)}
body.do4u-design:not(.d4-route-admin) #bp-content input:not(.sr-only):not(.peer):is([type=checkbox],[type=radio]):focus-visible{outline:2px solid var(--d4-accent);outline-offset:2px}
body.do4u-design:not(.d4-route-admin) #bp-content input:not(.sr-only):not(.peer):is([type=checkbox],[type=radio]):disabled{opacity:.5;cursor:not-allowed}

/* ---- Ablagefelder ---- */
.d4w-drop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%;min-height:112px;margin-top:6px;padding:16px;border:1.5px dashed color-mix(in srgb,var(--d4-accent) 45%,var(--d4-line));border-radius:14px;background:color-mix(in srgb,var(--d4-accent) 4%,var(--d4-raised));text-align:center;font-weight:400;transition:border-color .16s,background .16s,transform .16s}
.d4w-drop:hover,.d4w-drop:focus-within{border-color:var(--d4-accent);background:var(--d4-soft)}
.d4w-drop.d4w-ueber{border-style:solid;border-color:var(--d4-accent);background:var(--d4-soft);transform:scale(1.012)}
.d4w-drop-sym{display:flex;color:var(--d4-accent)}
.d4w-drop-text{font-size:.92rem;font-weight:600;color:var(--d4-ink)}
.d4w-drop-typen{font-size:.72rem;letter-spacing:.03em;color:var(--d4-muted)}
.d4w-drop-namen{max-width:100%;font-size:.82rem;font-weight:600;color:var(--d4-accent);overflow-wrap:anywhere}
.d4w-drop-namen:empty{display:none}
.do4u-design .d4w-drop input[type=file]{position:absolute!important;inset:0;width:100%!important;height:100%!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;opacity:0;cursor:pointer}

/* ---- Werkzeug-Formulare ---- */
.do4u-design .d4-input-pane>.flex.items-start h2,.do4u-design .d4-input-pane>.flex.items-start h3{display:none}
.do4u-design .d4-input-pane>.flex.items-start>svg,.do4u-design .d4-input-pane>.flex.items-start>.d4-tool-icon{display:none}
.do4u-design .d4-input-pane>.flex.items-start p,.do4u-design .d4-input-pane>p.text-gray-300{font-size:.94rem!important;line-height:1.6!important;color:var(--d4-muted)!important;margin:0!important}
.d4w-kurz{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.d4w-mehr{display:inline-block;margin-top:2px;padding:2px 0;border:0;background:none;color:var(--d4-accent);font-size:.82rem;font-weight:600;cursor:pointer}
.d4w-mehr:hover{text-decoration:underline}
.do4u-design .d4-input-pane>ol.grid{display:none}
.do4u-design .d4-input-pane>button.d4w-beispiel{align-self:flex-start;display:inline-flex;align-items:center;min-height:34px;padding:5px 12px;border:1px solid var(--d4-line);border-radius:999px;background:var(--d4-soft);font-weight:600;text-decoration:none}
.do4u-design .d4-input-pane>button.d4w-beispiel:hover{border-color:var(--d4-accent)}
/* Ausfuehren bleibt beim Scrollen langer Formulare erreichbar */
.do4u-design .d4-input-pane>div:has(>button[type=submit]){position:sticky;bottom:0;z-index:6;margin:16px -26px -26px;padding:12px 26px;border-top:1px solid var(--d4-line);background:var(--d4-surface);box-shadow:0 -10px 18px -14px #0b0d2a55}
@media(max-width:700px){.do4u-design .d4-input-pane>div:has(>button[type=submit]){margin:14px -20px -20px;padding:10px 20px 10px 68px}}
/* Schritte zeigen, wo man steht */
.d4-step-line>span{position:relative;padding-bottom:6px;color:var(--d4-muted)!important}
.d4-step-line>span::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--d4-line);transition:background .25s}
.d4-step-line>span.d4w-jetzt,.d4-step-line>span.d4w-erledigt{color:var(--d4-accent)!important;font-weight:600}
.d4-step-line>span.d4w-jetzt::after,.d4-step-line>span.d4w-erledigt::after{background:linear-gradient(90deg,#3434d9,#9974ed)}
/* Ergebnis bleibt neben langen Formularen im Blick */
@media(min-width:1200px){.do4u-design .d4-output-pane{position:sticky;top:calc(var(--d4w-nav,66px) + 12px);align-self:start;max-height:calc(100vh - var(--d4w-nav,66px) - 24px);overflow-y:auto;border-bottom:1px solid var(--d4-line);border-end-start-radius:14px}.do4u-design .d4-tool-content form[data-do4u-panel]{background:var(--d4-surface)!important}}

/* ---- Letzte Ergebnisse ---- */
.d4w-erg-such{margin:0 0 12px}
.d4w-erg-liste{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.d4w-erg-zeile{position:relative;isolation:isolate;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:13px 16px;border:1px solid var(--d4-line);border-radius:14px;background:var(--d4-surface);transition:border-color .16s,transform .16s,box-shadow .16s}
.d4w-erg-zeile[hidden]{display:none}
.d4w-erg-zeile:has([data-d4-job]:hover),.d4w-erg-zeile:has(a:hover){border-color:var(--d4-accent);box-shadow:var(--d4-shadow)}
.d4w-erg-zeile.d4w-akt{border-color:var(--d4-accent);background:var(--d4-soft)}
.d4w-erg-zeile .d4-tool-icon{flex:none;width:22px;height:22px;color:var(--d4-accent)}
.d4w-erg-name{flex:1 1 220px;min-width:0;display:flex;flex-direction:column}
.d4w-erg-name strong{font-weight:650;color:var(--d4-ink)}
.d4w-erg-name span{font-size:.8rem;color:var(--d4-muted)}
.d4w-erg-stand{font-size:.8rem;color:var(--d4-muted)}
.d4w-erg-zeile [data-d4-job]::after,.d4w-erg-zeile a.d4-demo-example::after{content:'';position:absolute;inset:0;border-radius:inherit}
.d4w-erg-offen{margin:0 0 22px;padding:18px 20px;border:1px solid color-mix(in srgb,var(--d4-accent) 40%,var(--d4-line));border-radius:18px;background:var(--d4-surface);box-shadow:var(--d4-shadow);scroll-margin-top:calc(var(--d4w-nav,66px) + 12px)}
.d4w-erg-offen[hidden]{display:none}
.d4w-erg-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.d4w-erg-kopf h2{margin:0;font-size:1.25rem}
.d4w-erg-zu{flex:none;width:38px;height:38px;border:1px solid var(--d4-line);border-radius:10px;background:var(--d4-raised);color:var(--d4-ink);font-size:1.1rem;line-height:1;cursor:pointer}
.d4w-erg-zu:hover{border-color:var(--d4-accent)}

@media(prefers-reduced-motion:no-preference){
 .d4w-bal-neu{animation:d4w-bal 1s ease-out}
 @keyframes d4w-bal{0%{box-shadow:0 0 0 0 var(--d4-accent)}40%{box-shadow:0 0 0 5px color-mix(in srgb,var(--d4-accent) 25%,transparent)}100%{box-shadow:0 0 0 0 transparent}}
 .d4w-sel-feld{animation:d4w-sel .14s cubic-bezier(.2,.7,.3,1)}
 @keyframes d4w-sel{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
 .d4w-sel-oben{animation-name:d4w-sel-o}
 @keyframes d4w-sel-o{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
 .d4w-drop-sym{transition:transform .2s}
 .d4w-drop:hover .d4w-drop-sym,.d4w-ueber .d4w-drop-sym{transform:translateY(-3px)}
 .d4w-bal-kauf{position:relative;overflow:hidden}
 .d4w-bal-kauf::after{content:'';position:absolute;inset:0 auto 0 -60%;width:45%;background:linear-gradient(100deg,transparent,#ffffff55,transparent);transform:skewX(-18deg);opacity:0;pointer-events:none}
 .d4w-bal-kauf:hover::after{opacity:1;animation:d4w-glanz .85s ease-out}
}
@media print{.d4w-sel-knopf{display:none}.d4w-sel>select{position:static!important;opacity:1}}

/* Mehr Wirkung, nur wenn Bewegung erwuenscht ist */
@media(prefers-reduced-motion:no-preference){
 .do4u-design .d4w-warte{opacity:0;transform:translateY(14px)}
 .do4u-design .d4w-da{animation:d4w-karte .45s cubic-bezier(.2,.7,.3,1) var(--d4w-spaet,0ms) both}
 @keyframes d4w-karte{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
 .d4w-fertig [data-do4u-ergebnis]>*{animation:d4w-karte .42s cubic-bezier(.2,.7,.3,1) both}
 .d4w-fertig [data-do4u-ergebnis]>*:nth-child(2){animation-delay:60ms}
 .d4w-fertig [data-do4u-ergebnis]>*:nth-child(3){animation-delay:120ms}
 .d4w-fertig [data-do4u-ergebnis]>*:nth-child(4){animation-delay:180ms}
 .d4w-fertig [data-do4u-ergebnis]>*:nth-child(n+5){animation-delay:240ms}
 .d4w-erg-zeile{animation:d4w-karte .4s cubic-bezier(.2,.7,.3,1) both}
 .d4w-erg-zeile:nth-child(2){animation-delay:40ms}.d4w-erg-zeile:nth-child(3){animation-delay:80ms}.d4w-erg-zeile:nth-child(4){animation-delay:120ms}.d4w-erg-zeile:nth-child(n+5){animation-delay:160ms}
 .d4w-drop.d4w-voll{border-style:solid;border-color:var(--d4-accent);animation:d4w-leuchten 1s ease-out}
}
.do4u-design .d4-tool-list>[aria-selected=true]{box-shadow:inset 3px 0 0 var(--d4-accent)}
html.d4-reduce .do4u-design .d4w-warte{opacity:1;transform:none}
@media print{.do4u-design .d4w-warte{opacity:1;transform:none}}

/* Wuensche Lukas 04.11.2026. Konto-Symbol: die Regel html.light .do4u-design .text-white (do4u-design.css) macht die Schrift dunkel; do4u-design.css nimmt nur a und button davon aus, das Symbol ist ein span. */
html.light .do4u-design .bg-accent-600.text-white,html.light .do4u-design .bg-accent-500.text-white{color:#fff!important}
/* Credits-Stand im Kopf (cfg/nav.php) und in den Menues */
.do4u-design .d4w-kopf-saldo{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;height:38px;padding:0 10px;border:1px solid var(--d4-line);border-radius:8px;background:var(--d4-raised);color:var(--d4-ink);font-size:.875rem;font-weight:700;line-height:1;white-space:nowrap;text-decoration:none;font-variant-numeric:tabular-nums;transition:border-color .18s,background-color .18s}
.do4u-design .d4w-kopf-saldo:hover{border-color:var(--d4-accent);text-decoration:none}
.do4u-design .d4w-kopf-saldo:focus-visible{outline:2px solid var(--d4-accent);outline-offset:2px}
.do4u-design .d4w-kopf-saldo svg,.do4u-design .d4w-menue-saldo svg{width:16px;height:16px;flex-shrink:0;color:var(--d4-accent)}
.do4u-design .d4w-menue-saldo strong{color:var(--d4-ink);font-weight:700;font-variant-numeric:tabular-nums}
@media(max-width:400px){.do4u-design .d4w-kopf-saldo{padding:0 7px;gap:4px}}
@media(max-width:340px){.do4u-design .d4w-kopf-saldo svg{display:none}}
@media (prefers-reduced-motion:no-preference){
 .do4u-design .d4w-kopf-neu{animation:d4w-kopf-neu .9s ease-out}
 @keyframes d4w-kopf-neu{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--d4-accent) 55%,transparent)}100%{box-shadow:0 0 0 10px transparent}}
}
html.d4-reduce .do4u-design .d4w-kopf-neu{animation:none}
/* Absaetze im Ergebnis: unabhaengig vom Tailwind-Stand, denn auf dev laeuft bei veraltetem app.css die Laufzeit-Fassung und erzeugte die Regel fuer nachtraeglich eingesetzte Absaetze nicht (einfacher Umbruch in der Grussformel fiel weg). */
.do4u-design [data-do4u-ergebnis] .whitespace-pre-line{white-space:pre-line}

/* Beitragsbilder im Blog (www/blog.php, www/img/blog/): eigenes Motiv je Beitrag; width/height am Bild, aspect-ratio haelt den Platz auch vor dem Laden */
.do4u-design .d4w-blog-bild{display:block;width:100%;height:auto;aspect-ratio:960/420;margin:0 0 1.25rem;border-radius:14px;box-shadow:0 0 0 1px var(--d4-line)}
.do4u-design article[data-d4-blog] .d4w-blog-bild{margin:0 0 1.75rem;border-radius:18px}
/* Startseite: Werkzeuge, die wirklich ohne Konto laufen (www/index.php, direkt unter der Demo). Breit: rechte Spalte unter dem Formular, das Beispiel links laeuft daneben weiter, der Website-Check bleibt ganz unten. */
.do4u-design .d4w-frei{grid-column:1/-1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
@media(min-width:901px){.do4u-design .d4-hero-grid{grid-template-rows:auto auto 1fr auto}.do4u-design .d4-hero-example{grid-row:2 / span 2}.do4u-design .d4w-frei{grid-column:2;grid-row:3;align-self:start}.do4u-design .d4-check-entry{grid-row:4}}
.do4u-design .d4w-frei h2{flex:0 0 100%;margin:0;font-size:.95rem;line-height:1.3;font-weight:700;letter-spacing:0;color:var(--d4-ink)}
.do4u-design .d4w-frei ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;min-width:0}
.do4u-design .d4w-frei li{margin:0;padding:0;min-width:0}
.do4u-design .d4w-frei li a{display:inline-flex;align-items:center;min-height:38px;padding:5px 13px;border:1px solid var(--d4-line);border-radius:999px;background:var(--d4-surface);color:var(--d4-ink);font-size:.86rem;font-weight:600;line-height:1.25;text-decoration:none;overflow-wrap:anywhere}
.do4u-design .d4w-frei li a:hover{border-color:var(--d4-accent);color:var(--d4-accent)}
.do4u-design .d4w-frei-alle{color:var(--d4-accent);font-size:.86rem;font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* Preisseite */
/* Keine Trennung mitten im Wort: schlaegt die anywhere-Regeln aus do4u-design.css und bp-base.css (Garantie, FAQ, Ueberschriften). */
.do4u-design .d4p,.do4u-design .d4p *{overflow-wrap:normal!important;word-break:normal!important}
.d4p{hyphens:manual;--d4p-rand:22px;--d4p-haupt-text:var(--d4-bg)}
.d4p :is(h1,h2,h3,h4){hyphens:manual;overflow-wrap:normal}
/* Silben nur in schmalen Spalten und nur bei wirklich langen Woertern; "Ausprobieren" bleibt ganz */
.d4p :is(.d4p-vorteile,.d4p-karte,.d4p-frei-karte,.d4p-liste,.d4p-kurz,.d4p-beispiele,.d4p-gruppe-kopf,.d4-faq,.d4-guarantee){hyphens:auto;-webkit-hyphenate-limit-before:5;-webkit-hyphenate-limit-after:5;hyphenate-limit-chars:15 5 5}
.d4p :is(a,button,summary,.d4p-preis){hyphens:manual}
.d4p a:focus-visible,.d4p summary:focus-visible{outline:2px solid var(--d4-accent);outline-offset:2px;border-radius:6px}
.d4p-oben{padding:clamp(1.5rem,4vw,3rem) 0 clamp(2rem,5vw,3.5rem)}
.d4p-abschnitt{padding:clamp(2rem,5vw,3.5rem) 0;border-top:1px solid var(--d4-line)}
.d4p-abschnitt h2,.d4p-pakete h2,.d4p #d4-faq-h{font-size:clamp(1.45rem,3vw,1.9rem);line-height:1.2;letter-spacing:-.02em;margin:0 0 .7rem;color:var(--d4-ink)}
.d4p-absatz{max-width:68ch;margin:0 0 1.2rem;color:var(--d4-muted);line-height:1.6}
.d4p-klein{font-size:.82rem;line-height:1.55;color:var(--d4-muted);margin:0}

/* Kopf: Nutzen links, Kosten eines Auftrags rechts */
.d4p-kopf{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.25rem);align-items:start}
.d4p-marke{font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--d4-accent);margin:0 0 .6rem}
.d4p-kopf h1{font-size:clamp(2rem,4.4vw,3.1rem);line-height:1.1;letter-spacing:-.03em;margin:0 0 1rem;color:var(--d4-ink)}
.d4p-lead{font-size:1.1rem;line-height:1.6;color:var(--d4-muted);margin:0 0 1.4rem;max-width:58ch}
.d4p-knoepfe{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 .7rem}
.d4p-knopf{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:46px;padding:.65rem 1.15rem;border:1px solid var(--d4-line);border-radius:12px;background:var(--d4-raised);color:var(--d4-ink)!important;font-weight:700;line-height:1.25;text-align:center;text-decoration:none!important}
.d4p-knopf:hover{border-color:var(--d4-accent)}
.d4p-knopf-haupt{background:var(--d4-accent);border-color:var(--d4-accent);color:var(--d4p-haupt-text)!important}
.d4p-knopf-haupt:hover{filter:brightness(1.08)}
.d4p-beispiele{padding:clamp(1rem,2.4vw,1.5rem);border:1px solid var(--d4-line);border-radius:18px;background:var(--d4-surface);box-shadow:var(--d4-shadow)}
.d4p-beispiele h2{font-size:1.2rem;line-height:1.25;margin:0 0 .35rem;color:var(--d4-ink)}
.d4p-beispiele ul{list-style:none;margin:.8rem 0;padding:0}
.d4p-beispiele li{display:grid;grid-template-columns:24px minmax(0,1fr) minmax(0,1fr);gap:.7rem;align-items:start;padding:.6rem 0;border-top:1px solid var(--d4-line)}
.d4p-beispiele li svg{width:22px;height:22px;color:var(--d4-accent);margin-top:1px}
.d4p-beispiel-name{font-size:.92rem;font-weight:600;color:var(--d4-ink);line-height:1.35}
.d4p-beispiel-wert{display:block;text-align:end;font-size:.9rem;line-height:1.35;color:var(--d4-ink)}
.d4p-beispiel-wert small{display:block;margin-top:2px;font-size:.78rem;color:var(--d4-muted)}
.d4p-sprung{margin:.7rem 0 0;font-size:.88rem}
.d4p-sprung a{color:var(--d4-accent);font-weight:600}

/* Vorteile */
.d4p-vorteile{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;margin:clamp(1.75rem,4vw,2.75rem) 0 0;padding:0;border:1px solid var(--d4-line);border-radius:16px;overflow:hidden;background:var(--d4-line)}
.d4p-vorteile li{display:flex;gap:.7rem;align-items:flex-start;padding:1rem;background:var(--d4-surface);min-width:0}
.d4p-vorteile div{min-width:0}
.d4p-vorteile strong{display:block;font-size:.95rem;line-height:1.3;color:var(--d4-ink)}
.d4p-vorteile span{display:block;margin-top:.25rem;font-size:.82rem;line-height:1.45;color:var(--d4-muted)}
.d4p-sinnbild{flex:none;width:24px;height:24px;color:var(--d4-accent)}

/* Pakete */
.d4p-pakete{margin-top:clamp(2rem,5vw,3.25rem)}
.d4p-schalter{display:flex;flex-wrap:wrap;gap:.6rem 1.75rem;align-items:center;margin:0 0 1.5rem}
.d4p-schalter>*{margin:0!important}
.d4p-karten{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:0;padding:12px 0 0;align-items:stretch}
.d4p-karten[data-anzahl="1"]{grid-template-columns:minmax(0,26rem)}
.d4p-karten[data-anzahl="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.d4p-karte{position:relative;display:flex;flex-direction:column;min-width:0;padding:1.5rem;border:1px solid var(--d4-line);border-radius:18px;background:var(--d4-surface)}
.d4p-empfohlen{border:2px solid var(--d4-accent);background:linear-gradient(170deg,var(--d4-soft),var(--d4-surface) 62%);box-shadow:var(--d4-shadow)}
.d4p-abzeichen{position:absolute;top:0;inset-inline-start:1.5rem;transform:translateY(-50%);max-width:calc(100% - 3rem);margin:0;padding:.28rem .8rem;border-radius:999px;background:var(--d4-accent);color:var(--d4p-haupt-text);font-size:.8rem;font-weight:700;line-height:1.3}
.d4p-karte-name{font-size:1.3rem;font-weight:700;line-height:1.2;margin:0;color:var(--d4-ink)}
.d4p-art{margin:.15rem 0 .9rem;font-size:.82rem;color:var(--d4-muted)}
.d4p-preis{margin:0;font-size:clamp(2.1rem,4vw,2.7rem);font-weight:700;line-height:1.05;letter-spacing:-.025em;white-space:nowrap;color:var(--d4-ink);font-variant-numeric:tabular-nums}
.d4p-empfohlen .d4p-preis{color:var(--d4-accent)}
.d4p-steuer{margin:.35rem 0 .95rem;font-size:.8rem;line-height:1.4;color:var(--d4-muted)}
.d4p-credits{margin:0;font-size:1rem;color:var(--d4-ink)}
.d4p-credits strong{font-size:1.2rem;font-variant-numeric:tabular-nums}
.d4p-je{margin:.2rem 0 0;font-size:.82rem;color:var(--d4-muted)}
.d4p-merkmale{list-style:none;margin:1rem 0 1.25rem;padding:.9rem 0 0;border-top:1px solid var(--d4-line);font-size:.9rem;line-height:1.45;color:var(--d4-ink)}
.d4p-merkmale li{position:relative;padding-inline-start:1.45rem;margin-top:.4rem}
.d4p-merkmale li::before{content:'✓';position:absolute;inset-inline-start:0;color:var(--d4-accent);font-weight:700}
.d4p-karte .d4p-knopf{margin-top:auto;width:100%}
.d4p-konto-hinweis{margin:.9rem 0 0;font-size:.85rem;color:var(--d4-muted)}
.d4p-frei-titel{font-size:1.1rem;line-height:1.25;margin:1.75rem 0 .75rem;color:var(--d4-ink)}
.d4p-frei{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0 0 1.25rem;padding:0}
.d4p-frei-karte{display:flex;flex-direction:column;min-width:0;padding:1.1rem 1.25rem;border:1px dashed var(--d4-line);border-radius:14px;background:transparent}
.d4p-frei-kopf{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.25rem .8rem}
.d4p-frei-kopf .d4p-karte-name{font-size:1.05rem}
.d4p-frei-preis{margin:0;font-size:1.15rem;font-weight:700;color:var(--d4-accent);white-space:nowrap}
.d4p-frei-menge{margin:.35rem 0 0;font-size:.92rem;color:var(--d4-ink)}
.d4p-frei-text{margin:.3rem 0 .9rem;font-size:.85rem;line-height:1.5;color:var(--d4-muted)}
.d4p-frei-karte .d4p-knopf{margin-top:auto;align-self:flex-start;min-height:40px;padding:.45rem .95rem;font-size:.92rem}
.d4p .d4-guarantee{max-width:none;margin-top:1.75rem}

/* Werkzeuge in Kategorien */
#werkzeuge .d4-preference-note{display:none}
.d4p .d4-finder{margin:0 0 .9rem;max-width:44rem}
.d4p-gruppen-hinweis{margin-bottom:.8rem}
.d4p-gruppen{display:grid;gap:10px}
.d4p-gruppe{border:1px solid var(--d4-line);border-radius:14px;background:var(--d4-surface);overflow:hidden}
.d4p-gruppe[hidden]{display:none}
.d4p-gruppe summary{display:flex;align-items:center;gap:.85rem;min-height:60px;padding:.75rem 1.1rem;cursor:pointer;list-style:none;color:var(--d4-ink)}
.d4p-gruppe summary::-webkit-details-marker{display:none}
.d4p-gruppe summary:hover{background:var(--d4-raised)}
.d4p-gruppe summary::after{content:"+";flex:none;font-size:1.4rem;line-height:1;color:var(--d4-accent)}
.d4p-gruppe[open] summary::after{content:"\2212"}
.d4p-gruppe summary>svg{flex:none;width:26px;height:26px;color:var(--d4-accent)}
.d4p-gruppe-kopf{flex:1;min-width:0}
.d4p-gruppe-kopf strong{display:block;font-size:1.05rem;line-height:1.3}
.d4p-gruppe-kopf small{display:block;margin-top:2px;font-size:.8rem;line-height:1.4;font-weight:400;color:var(--d4-muted)}
.d4p-gruppe-zahl{flex:none;min-width:2.2rem;padding:.15rem .55rem;border-radius:999px;background:var(--d4-raised);color:var(--d4-ink);font-size:.82rem;font-weight:700;text-align:center;font-variant-numeric:tabular-nums}
.d4p-gruppe summary:hover .d4p-gruppe-zahl{background:var(--d4-surface)}
.d4p-liste{list-style:none;margin:0;padding:0;border-top:1px solid var(--d4-line)}
.d4p-zeile{display:grid;grid-template-columns:minmax(0,1fr) minmax(9rem,15rem);gap:.4rem 1.5rem;padding:.9rem 1.1rem;border-top:1px solid var(--d4-line)}
.d4p-zeile:first-child{border-top:0}
.d4p-zeile[hidden]{display:none}
.d4p-zeile:hover{background:var(--d4-raised)}
.d4p-zeile-name{display:flex;gap:.7rem;min-width:0}
.d4p-zeile-name>div{min-width:0}
.d4p-zeile-name svg{flex:none;width:22px;height:22px;margin-top:2px;color:var(--d4-accent)}
.d4p-name{margin:0;font-weight:700;line-height:1.35;color:var(--d4-ink)}
.d4p-text{margin:.15rem 0 0;font-size:.86rem;line-height:1.45;color:var(--d4-muted);max-width:68ch}
.d4p-zeile-preis{margin:0;text-align:end;font-size:.9rem;font-weight:600;line-height:1.4;color:var(--d4-ink)}
.d4p-zeile-fuss{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.35rem 1rem;padding-inline-start:calc(22px + .7rem)}
.d4p-verf{display:flex;flex-wrap:wrap;gap:.2rem .9rem;font-size:.78rem;line-height:1.4;color:var(--d4-muted)}
.d4p-verf>span>span[aria-hidden]{color:var(--d4-accent);font-weight:700}
.d4p-probier{margin-inline-start:auto;font-size:.88rem;font-weight:700;color:var(--d4-accent)!important;white-space:nowrap;text-decoration:none!important;padding:.2rem 0}
.d4p-probier:hover{text-decoration:underline!important}
.d4p-werkzeug-note{margin-top:1rem;max-width:80ch}

/* Kurzantworten und Schluss */
.d4p-kurz{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:1rem 0 0}
.d4p-kurz>div{min-width:0;padding:1.1rem 1.25rem;border:1px solid var(--d4-line);border-radius:14px;background:var(--d4-surface)}
.d4p-kurz dt{font-weight:700;line-height:1.35;color:var(--d4-ink)}
.d4p-kurz dd{margin:.35rem 0 0;font-size:.92rem;line-height:1.55;color:var(--d4-muted)}
.d4p-kurz a{color:var(--d4-accent);font-weight:600}
.d4p-schluss{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.25rem 2rem;padding:clamp(1.25rem,3vw,2rem);border:1px solid var(--d4-line);border-radius:20px;background:linear-gradient(120deg,var(--d4-soft),var(--d4-surface))}
.d4p-schluss>div:first-child{flex:1 1 20rem;min-width:0}
.d4p-schluss h2{margin-bottom:.35rem!important}
.d4p-schluss p{margin:0;color:var(--d4-muted);line-height:1.55}
.d4p-schluss .d4p-knoepfe{margin:0}
@media(prefers-reduced-motion:no-preference){
 .d4p-karte{transition:transform .18s ease,box-shadow .18s ease}
 .d4p-karte:hover{transform:translateY(-3px)}
 .d4p-knopf{transition:filter .15s,border-color .15s}
}
html.d4-reduce .d4p-karte{transform:none!important;transition:none!important}
@media(max-width:1100px){.d4p-vorteile{grid-template-columns:repeat(3,minmax(0,1fr))}.d4p-vorteile li:nth-child(n+4){grid-column:span 1}}
@media(max-width:900px){.d4p-kopf{grid-template-columns:minmax(0,1fr)}.d4p-karten,.d4p-karten[data-anzahl="2"]{grid-template-columns:minmax(0,1fr)}.d4p-kurz{grid-template-columns:minmax(0,1fr)}}
@media(max-width:700px){
 .d4p-vorteile{grid-template-columns:minmax(0,1fr)}
 .d4p-frei{grid-template-columns:minmax(0,1fr)}
 .d4p-zeile{grid-template-columns:minmax(0,1fr)}
 .d4p-zeile-preis{text-align:start;padding-inline-start:calc(22px + .7rem)}
 .d4p-beispiele li{grid-template-columns:24px minmax(0,1fr)}
 .d4p-beispiel-wert{grid-column:2;text-align:start}
 .d4p :is(.d4p-lead,.d4p-absatz,.d4p-klein,.d4p-konto-hinweis){hyphens:auto;hyphenate-limit-chars:15 5 5}
 .d4p-knoepfe .d4p-knopf{flex:1 1 auto}
}
/* Fusszeile (seitenweit): Spalten duerfen umbrechen statt sich zu quetschen, sonst stehen dort "An-mel-den" und "Funktio-nen". */
.do4u-design footer a{hyphens:auto;overflow-wrap:normal;hyphenate-limit-chars:15 5 5}
@media(min-width:1024px){
 .do4u-design footer .lg\:w-1\/3{width:24%}
 .do4u-design footer .lg\:w-2\/3{width:auto;flex:1 1 0;min-width:0}
 .do4u-design footer .lg\:flex-nowrap{flex-wrap:wrap}
 .do4u-design footer .lg\:justify-end{justify-content:flex-start}
}
/* Kopfzeile bei 1024 bis 1279: in langen Sprachen schob das Menue den Hauptknopf aus dem Bild (bis 78 Pixel Ueberlauf) */
@media(min-width:1024px) and (max-width:1279px){
 .do4u-design #bp-nav nav.lg\:flex{min-width:0;gap:0}
 .do4u-design #bp-nav :is(.bp-nav-link,.bp-dd-btn){padding-inline:.45rem;font-size:.8rem;line-height:1.15}
}
@media print{.d4p-knoepfe,.d4p-karte .d4p-knopf,.d4p-frei-karte .d4p-knopf,.d4p-probier,.d4p .d4-finder{display:none!important}}
/* Preisseite Ende */
/* EU-Hinweis (04.11.2026): Streifen, kleiner Hinweis, Fusszeile; Texte in cfg/do4u_eu_hinweis_lib.php. Keine Worttrennung, Farben aus den Tokens (hell/dunkel). */
.do4u-design .d4eu{font-size:.88rem;line-height:1.5;color:var(--d4-muted);hyphens:manual;overflow-wrap:break-word;word-break:normal;min-width:0}
.do4u-design .d4eu a{color:var(--d4-accent);font-weight:600;text-decoration:underline;text-underline-offset:2px;hyphens:manual;overflow-wrap:break-word}
.d4eu-ico{flex:none;width:18px;height:18px;margin-top:.15em;color:var(--d4-accent)}
.d4eu-klein,.d4eu-fuss{display:flex;gap:.55rem;align-items:flex-start;max-width:68ch;margin:0 0 1.25rem}
.d4eu-klein>span,.d4eu-fuss>span{min-width:0}
.d4eu-fuss{max-width:72ch;margin:0 0 1.1rem;padding:0 0 1.1rem;border-bottom:1px solid color-mix(in srgb,var(--d4-line) 60%,transparent)}
.d4eu-band{border-block:1px solid var(--d4-line);background:color-mix(in srgb,var(--d4-accent) 8%,var(--d4-surface))}
.d4eu-in{display:flex;gap:.85rem;align-items:flex-start;max-width:72rem;margin:0 auto;padding:1rem 1rem}
.d4eu-band .d4eu-ico{width:28px;height:28px;margin-top:.1em}
.d4eu-txt{min-width:0}
.d4eu-txt p{margin:0}
.d4eu-band .d4eu-h{font-weight:700;font-size:1rem;color:var(--d4-ink)}
.d4eu-band .d4eu-p{margin-top:.15rem;font-size:1rem;color:var(--d4-ink)}
.d4eu-band .d4eu-s{margin-top:.35rem;font-size:.85rem}
@media(min-width:640px){.d4eu-in{padding:1.1rem 1.5rem}}
@media(min-width:1024px){.d4eu-in{padding:1.2rem 2rem}}
@media print{.d4eu-band{display:none}}
/* EU-Hinweis Ende */

/* Logo Entwurf D (04.11.2026): kleine Bewegung der Wortmarke. Nur CSS, kein Dauerflackern: beim Laden funkelt der Funke einmal
   (dreht um 90 Grad, bei einem vierzackigen Stern also nahtlos) und der Verlauf der 4 wandert einmal hin und zurueck; beim
   Ueberfahren oder Fokussieren des Logos dreht der Funke sanft weiter und der Verlauf wandert ein Stueck. Aus bei "weniger
   Bewegung" (Systemeinstellung) und mit html.d4-reduce. */
.d4wm-funke{transform-box:fill-box;transform-origin:center}
@keyframes d4wm-funkeln{0%{transform:scale(1) rotate(0)}45%{transform:scale(1.45) rotate(45deg)}100%{transform:scale(1) rotate(90deg)}}
@keyframes d4wm-wandern-1{0%,100%{stop-color:#4F4FF5}50%{stop-color:#8A62F7}}
@keyframes d4wm-wandern-2{0%,100%{stop-color:#A24DEB}50%{stop-color:#D45FE8}}
@media(prefers-reduced-motion:no-preference){
 html:not(.d4-reduce) .d4wm-funke{transition:transform .7s ease-in-out;animation:d4wm-funkeln 1.2s ease-in-out .4s 1 backwards}
 html:not(.d4-reduce) .d4wm-s1{transition:stop-color .7s ease-in-out;animation:d4wm-wandern-1 1.8s ease-in-out .4s 1}
 html:not(.d4-reduce) .d4wm-s2{transition:stop-color .7s ease-in-out;animation:d4wm-wandern-2 1.8s ease-in-out .4s 1}
 html:not(.d4-reduce) a:hover .d4wm .d4wm-funke,html:not(.d4-reduce) a:focus-visible .d4wm .d4wm-funke{transform:scale(1.3) rotate(90deg)}
 html:not(.d4-reduce) a:hover .d4wm .d4wm-s1,html:not(.d4-reduce) a:focus-visible .d4wm .d4wm-s1{stop-color:#7C5CF7}
 html:not(.d4-reduce) a:hover .d4wm .d4wm-s2,html:not(.d4-reduce) a:focus-visible .d4wm .d4wm-s2{stop-color:#CC55E6}
}
/* Logo Entwurf D Ende */

/* ---- Mini-Werkzeuge unter /free-tools (04.11.2026): Beispiel, Zaehler, Vorschau, Kontrast live, Kopieren, Filter, robots.txt-Ausschnitt. Farben aus den Tokens (hell/dunkel); kein Silbentrennen. ---- */
.do4u-design [data-do4u-mini-form] [hidden],.do4u-design [data-do4u-mini-form][hidden],.do4u-design [data-do4u-mini-ergebnis] [hidden],.do4u-design [data-do4u-mini-ergebnis][hidden],.do4u-design .d4m-kb[hidden]{display:none!important}
.d4m-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.d4m-oben{display:flex;justify-content:flex-end}
.d4m-oben:not(:has(.d4m-bsp:not([hidden]))){display:none}
.d4m-aktion{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem}
.d4m-aktion .fcp-widget{min-width:0;max-width:100%}
.d4m-kopf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem}
.d4m-kopf-unten{justify-content:flex-start;margin-top:.75rem}
.d4m-kopier{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.25rem .5rem}
.d4m-status{font-size:.85rem;line-height:1.4;color:var(--d4-muted)}
.d4m-knopf{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.45rem 1rem;border-radius:10px;border:1px solid var(--d4-line);background:var(--d4-raised);color:var(--d4-ink);font:inherit;font-size:.92rem;font-weight:600;line-height:1.25;text-align:center;cursor:pointer;hyphens:manual;overflow-wrap:break-word;word-break:normal}
.d4m-knopf:hover{border-color:var(--d4-accent)}
.d4m-knopf:focus-visible,.d4m-picker:focus-visible,.d4m-chk input:focus-visible,.d4m-radio input:focus-visible,.d4m-bsp:focus-visible{outline:2px solid var(--d4-accent);outline-offset:2px}
.d4m-knopf[aria-pressed=true]{background:var(--d4-soft);border-color:var(--d4-accent);color:var(--d4-accent)}
.d4m-knopf-klein{min-height:36px;padding:.25rem .75rem;font-size:.86rem}
.d4m-zaehler{margin:.45rem 0 0;font-size:.88rem;line-height:1.5;color:var(--d4-muted);hyphens:manual;overflow-wrap:break-word}
.d4m-st{display:inline-block;padding:.1rem .55rem;border-radius:8px;font-size:.82rem;font-weight:700;line-height:1.5;margin-inline-end:.4rem}
.d4m-st-ok{background:rgba(16,185,129,.16);color:#6ee7b7}
.d4m-st-short{background:rgba(245,158,11,.16);color:#fcd34d}
.d4m-st-long{background:rgba(239,68,68,.15);color:#fca5a5}
html.light .d4m-st-ok{background:#d1fae5;color:#065f46}
html.light .d4m-st-short{background:#fef3c7;color:#92400e}
html.light .d4m-st-long{background:#fee2e2;color:#991b1b}
/* Vorschau wie im Suchergebnis */
.d4m-vorschau{margin:0}
.d4m-serp{max-width:42rem;padding:.9rem 1rem;border:1px solid var(--d4-line);border-radius:12px;background:var(--d4-bg);font-family:Arial,Helvetica,sans-serif;hyphens:manual;overflow-wrap:break-word;word-break:normal}
.d4m-serp p{margin:0}
.d4m-serp-url{font-size:.8rem;line-height:1.5;color:var(--d4-muted)}
.d4m-serp-titel{font-size:20px;line-height:1.3;color:#8ab4f8;margin-top:.1rem!important}
.d4m-serp-beschr{font-size:14px;line-height:1.58;color:var(--d4-ink);margin-top:.3rem!important}
html.light .d4m-serp-titel{color:#1a0dab}
.d4m-ab{opacity:.6;text-decoration:line-through;text-decoration-thickness:1px;border-inline-start:2px dashed var(--d4-muted);padding-inline-start:.2rem;margin-inline-start:.15rem}
/* Lesbarkeit */
.d4m-liste{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
ol.d4m-liste{list-style:decimal;padding-inline-start:1.4rem}
.d4m-woerter{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem .9rem}
.d4m-n{font-size:.85rem;font-weight:600;color:var(--d4-muted)}
.d4m-t{hyphens:manual;overflow-wrap:break-word;word-break:normal}
.d4m-text{padding:.9rem 1rem;line-height:1.85;border:1px solid var(--d4-line);border-radius:12px;background:var(--d4-bg);hyphens:manual;overflow-wrap:break-word;word-break:normal}
.d4m-satz-lang{background:rgba(245,158,11,.22);border-inline-start:3px solid #d97706;padding:.1rem .3rem;border-radius:4px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
html.light .d4m-satz-lang{background:rgba(217,119,6,.18)}
mark.d4m-w{background:transparent;color:inherit;font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;text-decoration-color:var(--d4-accent)}
/* Kontrast live */
.d4m-farbfeld{display:flex;gap:.5rem;align-items:center}
.d4m-farbfeld .bp-input{flex:1 1 auto;min-width:0}
.d4m-picker{flex:none;width:52px;height:46px;padding:3px;border:1px solid var(--d4-line);border-radius:10px;background:var(--d4-raised);cursor:pointer}
.d4m-live{padding:1rem;border:1px solid var(--d4-line);border-radius:12px;background:var(--d4-bg)}
.d4m-probe{padding:1rem;border:1px solid var(--d4-line);border-radius:10px;hyphens:manual;overflow-wrap:break-word}
.d4m-verh{margin:.8rem 0 .5rem;font-size:1.2rem;font-weight:700;color:var(--d4-ink)}
.d4m-check{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .5rem}
.d4m-h4{margin:1rem 0 .5rem;font-size:.95rem;font-weight:600;color:var(--d4-ink)}
.d4m-vor-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .75rem}
.d4m-vor-art{font-weight:600;min-width:9rem;color:var(--d4-ink)}
.d4m-chip{flex:none;width:1.7rem;height:1.7rem;border-radius:6px;border:1px solid var(--d4-line)}
.d4m-hex{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--d4-ink)}
/* Alt-Text-Bericht: Filter */
.d4m-filter{display:grid;gap:.6rem}
.d4m-filter-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
/* robots.txt-Ausschnitt */
.d4m-kb-li{display:flex;align-items:flex-start;gap:.75rem}
.d4m-kb-inhalt{flex:1 1 auto;min-width:0}
.d4m-chk{flex:none;display:inline-flex;align-items:center;min-height:28px}
.d4m-chk input{width:20px;height:20px;margin:0;accent-color:var(--d4-accent)}
.d4m-kb-gruppe{margin:0 0 .6rem}
.d4m-kb{padding-top:1rem;border-top:1px solid var(--d4-line)}
.d4m-radios{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.25rem 1.5rem}
.d4m-radios legend{width:100%;padding:0}
.d4m-radio{display:inline-flex;align-items:center;gap:.5rem;min-height:36px;color:var(--d4-ink)}
.d4m-radio input{width:18px;height:18px;margin:0;accent-color:var(--d4-accent)}
/* Sprung zum Ergebnis: unter der Kopfleiste landen */
#d4m-ergebnis,[data-d4m-fehler]{scroll-margin-top:calc(var(--d4w-nav,66px) + 14px)}
#d4m-ergebnis:focus,[data-d4m-fehler]:focus{outline:none}
#d4m-ergebnis:focus-visible,[data-d4m-fehler]:focus-visible{outline:2px solid var(--d4-accent);outline-offset:4px}
@media(max-width:600px){.d4m-vor-art{min-width:0;flex:1 1 100%}.d4m-serp{padding:.75rem .8rem}.d4m-picker{width:46px}}
@media(prefers-reduced-motion:no-preference){.d4m-knopf{transition:border-color .15s,background-color .15s}}
html.d4-reduce .d4m-knopf{transition:none}
/* Mini-Werkzeuge Ende */
/* Answely (04.11.2026): die Antwortbox im Werkzeug-Filterfeld (/werkzeuge) steht unter dem Feld statt daneben. */
.d4-search-field{flex-wrap:wrap}.d4-search-field>.answely-box{flex:1 1 100%;margin-top:.75rem}

/* Kopfzeile: Lupe (04.11.2026). Fokus nur bei Tastaturbedienung und schmal genug, dass er nicht unter dem Nachbarknopf verschwindet. */
.do4u-design .d4w-such:focus-visible{outline:2px solid var(--d4-accent);outline-offset:2px;position:relative;z-index:1}
/* Antwortbox und Vorschlaege von Answely: Farben der Seite statt des Betriebssystem-Themas, im Fenster unter dem Feld, begrenzt und scrollbar. */
.do4u-design .answely-box{--answely-akzent:var(--d4-accent);--answely-hg:var(--d4-surface);--answely-text:var(--d4-ink);--answely-rand:var(--d4-line);--answely-leise:var(--d4-muted);--answely-linie:var(--d4-line);--answely-link:var(--d4-accent);--answely-schrift:inherit;box-sizing:border-box;max-width:100%;overflow-wrap:anywhere}
.d4w-pal-kopf{flex-wrap:wrap}
.d4w-pal-kopf input{flex:1 1 0}
.d4w-pal-kopf>.answely-box,.d4w-pal-kopf>.answely-plus__panel{order:9;flex:0 0 100%;margin:0;max-height:min(45vh,380px);overflow-y:auto;overscroll-behavior:contain}
.d4w-pal-antwort{flex:none;max-height:min(56vh,480px);overflow-y:auto;overscroll-behavior:contain;padding:12px 18px;border-bottom:1px solid var(--d4-line)}
.d4w-pal-antwort:empty{display:none}
.d4w-pal-antwort>.answely-box{margin:0}
.d4-search-field>.answely-box,.d4-search-field>.answely-plus__panel{flex:1 1 100%;max-height:min(55vh,460px);overflow-y:auto;overscroll-behavior:contain}
.d4-search-field>.answely-plus__panel{margin:.5rem 0 0}
.do4u-design .answely-plus__panel{background:var(--d4-surface);color:var(--d4-ink);border-color:var(--d4-line);box-shadow:none;font-family:inherit}
.do4u-design .answely-plus__titel{color:var(--d4-muted);opacity:1}
.do4u-design .answely-plus__chip{border-color:var(--d4-line);color:var(--d4-ink);background:var(--d4-raised);font-family:inherit;max-width:100%;overflow-wrap:anywhere}
.do4u-design .answely-plus__chip:hover,.do4u-design .answely-plus__chip:focus-visible{background:var(--d4-soft);border-color:var(--d4-accent);color:var(--d4-ink)}
.do4u-design .answely-plus__chip:focus-visible{outline:2px solid var(--d4-accent);outline-offset:1px}
/* Icons bei Ueberschriften (d4_ico in cfg/do4u_design.php): steht im Textfluss, Umbruch und Silbentrennung des Texts bleiben. */
.d4-ico{display:inline-block;width:1em;height:1em;flex:none;vertical-align:-.13em;margin-inline-end:.42em;color:var(--d4-accent)}
.text-red-300>.d4-ico{color:inherit}
@media print{.d4-ico{display:none}}
/* Antwortbox: die Box selbst nie in der Hoehe begrenzen (ihre Spalte quetscht sonst Inhalt uebereinander); es scrollt der Behaelter. Listen zeigen ihre Marken. */
.do4u-design .answely-box .rc-ai__antwort ul{list-style:disc;padding-inline-start:1.4em}
.do4u-design .answely-box .rc-ai__antwort ol{list-style:decimal;padding-inline-start:1.6em}
.d4w-pal-kopf>.answely-box,.d4w-pal-kopf>.answely-plus__panel,.d4-search-field>.answely-box,.d4-search-field>.answely-plus__panel{max-height:none;overflow-y:visible}
.d4w-pal-kopf{flex:0 1 auto;min-height:62px;overflow-y:auto;overscroll-behavior:contain}
.d4w-pal-liste{flex:1 1 96px;min-height:64px}
.d4w-pal:has(.answely-box:not([hidden])){max-height:84vh;inset-block-start:7vh}
.d4-catalog-page>.d4-finder>.d4-search-field:has(>.answely-box:not([hidden]),>.answely-plus__panel:not([hidden])){position:static}
.do4u-design .d4-search-field>input{flex:1 1 0;min-width:0;width:auto}
.do4u-design .answely-box .rc-ai__antwort li{list-style:inherit}

/* Trust-Center (04.11.2026): EU-Bezug und DSGVO-Block. Schild statt EU-Flagge. */
.d4tr-band{display:flex;gap:.9rem;align-items:flex-start;max-width:100%;margin:0 0 1.5rem;padding:1rem 1.15rem;border:1px solid var(--d4-line);border-left:4px solid var(--d4-accent);border-radius:1rem;background:color-mix(in srgb,var(--d4-accent) 8%,var(--d4-surface))}
.d4tr-band .d4eu-ico{width:32px;height:32px;margin-top:.1em}
.d4tr-band-txt{min-width:0}
.d4tr-band p{margin:0}
.d4tr-band-h{font-weight:700;font-size:1.05rem;line-height:1.35;color:var(--d4-ink)}
.d4tr-band-p{margin-top:.3rem!important;font-size:.95rem;line-height:1.5;color:var(--d4-muted)}
.d4tr-band a,.d4tr-ds a{color:var(--d4-accent);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.d4tr-ds{margin:0 0 1.5rem;padding:1.25rem 1.25rem 1.1rem;border:1px solid var(--d4-line);border-radius:1rem;background:var(--d4-surface);scroll-margin-top:6rem}
.do4u-design .d4tr-ds h2{margin:0;font-size:1.5rem;line-height:1.25;font-weight:700;color:var(--d4-ink)}
.d4tr-ds-intro{margin:.35rem 0 1rem;color:var(--d4-muted);max-width:68ch}
.d4tr-ds-liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem 1.5rem;margin:0;padding:0;list-style:none}
.d4tr-punkt{display:flex;gap:.6rem;align-items:flex-start;min-width:0;margin:0}
.d4tr-punkt>svg{flex:none;width:20px;height:20px;margin-top:.15em;color:var(--d4-accent)}
.d4tr-punkt>div{min-width:0}
.do4u-design .d4tr-punkt h3{margin:0;font-size:1rem;line-height:1.35;font-weight:600;color:var(--d4-ink)}
.d4tr-punkt p{margin:.15rem 0 0;font-size:.92rem;line-height:1.5;color:var(--d4-muted)}
.d4tr-mehr{margin:1rem 0 0}
.d4tr-band,.d4tr-ds{hyphens:manual;overflow-wrap:break-word}
@media(max-width:640px){.d4tr-ds-liste{grid-template-columns:minmax(0,1fr)}.d4tr-ds{padding:1rem}.do4u-design .d4tr-ds h2{font-size:1.3rem}}
/* Trust-Center Ende */
/* Formulare der Reihe (04.11.2026) */
input[type=file][data-ops-file]{display:block;width:100%;max-width:100%;margin-top:.5rem;font-size:.85rem;font-weight:400;color:inherit;overflow-wrap:anywhere}
input[type=file][data-ops-file]::file-selector-button{min-height:2.65rem;margin:0 .75rem 0 0;padding:.5rem .8rem;border:1px solid rgba(139,139,180,.5);border-radius:.6rem;background:transparent;color:inherit;font:inherit;font-size:.85rem;cursor:pointer}
input[type=file][data-ops-file]:hover::file-selector-button{background:rgba(139,130,246,.13)}
input[type=file][data-ops-file]:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:.6rem}
.do4u-controls-cell-toggle::before{content:none}
@media(max-width:640px){
.d4-ops-tabelle,.d4-ops-tabelle tbody,.d4-ops-tabelle tr{display:block;width:100%}
.d4-ops-tabelle thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.d4-ops-tabelle tr{margin:0 0 .75rem;padding:.35rem 0;border:1px solid rgba(139,139,180,.3);border-radius:.75rem}
.d4-ops-tabelle td{display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr);gap:.1rem .75rem;padding:.4rem .7rem!important;border:0;overflow-wrap:anywhere}
.d4-ops-tabelle td:empty{display:none}
.d4-ops-tabelle td::before{content:attr(data-spalte);font-size:.8rem;opacity:.72;overflow-wrap:break-word}
.d4-ops-tabelle td>.do4u-controls-cell-text,.d4-ops-tabelle td>.do4u-controls-cell-toggle{grid-column:2;min-width:0}
}
/* Formulare der Reihe Ende */
/* Ratgeber: Lesefortschritt und Bilder (04.11.2026) */
@media(prefers-reduced-motion:no-preference){@supports(animation-timeline:scroll()){
 html:not(.d4-reduce) body.d4-route-blog:has(article figure)::after{content:'';position:fixed;left:0;right:0;top:0;height:3px;z-index:70;pointer-events:none;background:var(--d4-accent);transform-origin:0 50%;transform:scaleX(0);animation:d4w-lesen linear both;animation-timeline:scroll(root)}
 @keyframes d4w-lesen{to{transform:scaleX(1)}}
 html:not(.d4-reduce) .d4-route-blog article figure img{animation:d4w-bild linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
 @keyframes d4w-bild{from{opacity:.3;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
}}
/* Ratgeber Ende */

/* ---- Free Tools mit dem linken Menue von /tools (04.11.2026): Eintrag der offenen Seite, Links statt Reiter ---- */
.d4-tool-list>a[aria-current=page]{background:var(--d4-soft)!important;color:var(--d4-accent)!important;font-weight:700;box-shadow:inset 3px 0 0 var(--d4-accent)}
.d4m-menue .d4-tool-list>a{text-decoration:none;hyphens:manual;overflow-wrap:break-word;word-break:normal}
.d4m-menue .d4-tool-list>a:focus-visible{outline:2px solid var(--d4-accent);outline-offset:-2px}
.d4m-menue-aus{color:var(--d4-muted);opacity:.75}
.d4m-mit-menue .d4-tool-content{min-width:0}
/* Menue der Free Tools Ende */

/* Lukas: Ueberschriften nie mitten im Wort trennen (auch nicht im engen Seitenmenue der Free Tools, 04.11.2026). */
h1,h2,h3{hyphens:manual;-webkit-hyphens:manual}