/* Frag Zenni & Werki */
.fz-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fz-box { display: flex; flex-direction: column; border: 1.5px solid #cfe2d1; border-radius: 24px; background: #fff; box-shadow: 0 18px 44px rgba(7, 47, 87, .1); overflow: hidden; text-align: left; font-family: Inter, system-ui, sans-serif; }
.fz-log { display: flex; flex-direction: column; gap: 12px; max-height: 340px; min-height: 150px; padding: 20px 20px 8px; overflow-y: auto; background: linear-gradient(180deg, #F6FAF7, #fff); scroll-behavior: smooth; }
.fz-row { display: flex; align-items: flex-end; gap: 10px; }
.fz-row.u { justify-content: flex-end; }
.fz-av { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #fff; box-shadow: 0 0 0 2px #fff, 0 4px 10px rgba(7, 47, 87, .16); }
.fz-pair { display: flex; flex: none; } .fz-pair .fz-av + .fz-av { margin-left: -14px; }
.fz-b { max-width: min(520px, 82%); padding: 11px 15px; border-radius: 18px 18px 18px 6px; background: #fff; border: 1px solid #dfe7e1; color: #27313d; font-size: 15px; line-height: 1.6; box-shadow: 0 4px 12px rgba(7, 47, 87, .05); }
.fz-row.u .fz-b { border-radius: 18px 18px 6px 18px; border-color: #0A4E93; background: #0A4E93; color: #fff; }
.fz-b p { margin: 0; } .fz-n { display: block; margin: 0 0 3px; color: #35782B; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.fz-more { display: inline-block; margin-top: 8px; color: #0A4E93; font-size: 13.5px; font-weight: 700; text-decoration: none; } .fz-more:hover { text-decoration: underline; }
.fz-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.fz-btn { display: inline-flex; padding: 8px 15px; border-radius: 99px; background: #35782B; color: #fff; font-size: 13.5px; font-weight: 700; text-decoration: none; } .fz-btn.s { background: #fff; color: #072F57; border: 1.5px solid #cfd8e0; }
.fz-typing { display: flex; gap: 5px; padding: 4px 2px; } .fz-typing i { width: 8px; height: 8px; border-radius: 50%; background: #9fb3a6; animation: fzDot 1s infinite ease-in-out; } .fz-typing i:nth-child(2) { animation-delay: .15s; } .fz-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes fzDot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.fz-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 20px 4px; background: #fff; }
.fz-chip { padding: 7px 13px; border: 1.5px solid #cfe2d1; border-radius: 99px; background: #F3F9F4; color: #1f5a1b; font: 600 13px/1.3 Inter, system-ui, sans-serif; text-align: left; cursor: pointer; transition: background .15s, border-color .15s; } .fz-chip:hover { background: #e4f1e3; border-color: #35782B; }
.fz-form { display: flex; gap: 8px; padding: 12px 16px 6px; background: #fff; border-top: 1px solid #edf1ee; }
.fz-form input { flex: 1; min-width: 0; padding: 12px 16px; border: 1.5px solid #cdd6df; border-radius: 99px; font: 500 15.5px Inter, system-ui, sans-serif; color: #14202b; } .fz-form input:focus { outline: 3px solid rgba(53, 120, 43, .22); border-color: #35782B; }
.fz-go { flex: none; padding: 0 22px; border: 0; border-radius: 99px; background: #35782B; color: #fff; font: 700 15px Inter, system-ui, sans-serif; cursor: pointer; } .fz-go:hover { background: #2a6322; }
.fz-foot { margin: 0; padding: 4px 20px 14px; background: #fff; color: #667085; font-size: 12.5px; line-height: 1.55; } .fz-foot a { color: #0A4E93; font-weight: 700; }
/* Abschnitt auf der Seite */
.fz-sec { padding: 72px 0 80px; background: linear-gradient(180deg, #fff, #F4F8F5); }
.fz-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(24px, 4vw, 56px); align-items: end; max-width: 1180px; margin: 0 auto; }
.fz-main .kicker { margin-bottom: 8px; } .fz-main h2 { margin: 0 0 10px; font-size: clamp(28px, 3.2vw, 40px); font-weight: 800; letter-spacing: -.02em; color: #072F57; text-wrap: balance; } .fz-main > p { margin: 0 0 20px; max-width: 58ch; color: #5b6270; font-size: 16px; line-height: 1.7; }
.fz-figs { display: flex; align-items: flex-end; justify-content: center; gap: 4px; align-self: end; margin-bottom: -4px; }
.fz-figs img { display: block; width: auto; height: clamp(250px, 26vw, 360px); filter: drop-shadow(0 14px 18px rgba(7, 47, 87, .2)); }
@media (max-width: 900px) { .fz-grid { grid-template-columns: 1fr; } .fz-figs { order: -1; } .fz-figs img { height: 190px; } .fz-sec { padding: 52px 0 60px; } }
/* Schwebender Knopf und Fenster */
.fz-launch { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 9990; display: inline-flex; align-items: center; gap: 10px; padding: 7px 18px 7px 8px; border: 0; border-radius: 99px; background: #35782B; color: #fff; box-shadow: 0 12px 28px rgba(7, 47, 87, .35); font: 700 14.5px Inter, system-ui, sans-serif; cursor: pointer; transition: transform .15s, background .15s; } .fz-launch:hover { background: #2a6322; transform: translate(-50%, -2px); }
.fz-launch:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px #35782B; }
.fz-heads { display: flex; flex: none; } .fz-heads .fz-av { width: 38px; height: 38px; } .fz-heads .fz-av + .fz-av { margin-left: -12px; }
.fz-pop { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 9991; width: min(560px, calc(100vw - 24px)); border-radius: 24px; background: #fff; box-shadow: 0 24px 60px rgba(7, 47, 87, .4); overflow: hidden; }
.fz-pop[hidden] { display: none; } .fz-pop .fz-box { border: 0; border-radius: 0; box-shadow: none; } .fz-pop .fz-log { max-height: 380px; }
.fz-ph { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: linear-gradient(120deg, #2a6322, #35782B); color: #fff; }
.fz-pt { flex: 1; } .fz-pt b { display: block; font-size: 15.5px; } .fz-pt small { display: block; opacity: .85; font-size: 12px; }
.fz-x { flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .18); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; } .fz-x:hover { background: rgba(255, 255, 255, .3); }
.mbar-fz { cursor: pointer; font-family: inherit; background: #EEF2F6; border: 1px solid rgba(7, 47, 87, .10); }
.mbar-fz .fz-heads .fz-av { width: 26px; height: 26px; box-shadow: 0 0 0 2px #EEF2F6; } .mbar-fz .fz-heads .fz-av + .fz-av { margin-left: -9px; }
.mbar-2 .mbar-fz { background: #0A4E93; color: #fff; border: 0; } .mbar-2 .mbar-fz .fz-heads .fz-av { box-shadow: 0 0 0 2px #0A4E93; }

@media (prefers-reduced-motion: reduce) { .fz-typing i { animation: none; opacity: .6; } .fz-log { scroll-behavior: auto; } }

.fz-load { margin: 0; padding: 26px 20px; color: #5b6270; font: 500 14.5px Inter, system-ui, sans-serif; } .fz-load a { color: #0A4E93; font-weight: 700; }
@media print { .fz-launch, .fz-pop { display: none !important; } }
/* Schmalere Bildschirme: Pille rechts neben das Cookie-Symbol (Fingerabdruck) links unten */
@media (max-width: 1099px) { .fz-launch { left: 84px; transform: none; } .fz-launch:hover { transform: translateY(-2px); } .fz-pop { left: 84px; transform: none; } }
/* Handy: kein schwebender Knopf; das Fenster öffnet als Blatt von unten, Knopf „Fragen“ sitzt in der mobilen Leiste */
@media (max-width: 699px) { .fz-launch { display: none !important; } .fz-pop { left: 0; right: 0; bottom: 0; width: 100%; transform: none; border-radius: 22px 22px 0 0; max-height: 88vh; padding-bottom: max(58px, env(safe-area-inset-bottom)); } .fz-pop:not([hidden]) { display: flex; flex-direction: column; } .fz-pop .fz-log { max-height: calc(88vh - 250px); min-height: 120px; } }
/* Ganz unten auf der Seite: Platz unter dem Fußbereich, damit die Pille „Frag Zenni & Werki“ AGB, Impressum & Co. nicht verdeckt */
@media (min-width: 700px) { footer.site { padding-bottom: 92px !important; } }