.
Varianten: (Default) glas = Klarglas, grüner Text → sekundär
.gruen = Salbei-getöntes Glas → die EINE Hauptaktion pro Sicht
.terra = warm getönt → destruktiv (Löschen/Trennen) */
.btn {
position: relative; isolation: isolate;
display: inline-flex; align-items: center; justify-content: center; gap: .5em;
min-height: var(--tap);
border: 0; border-radius: var(--r-pill);
padding: 13px 26px;
font-family: var(--font-display);
font-weight: 600; font-size: 15px; line-height: 1.1; white-space: nowrap;
cursor: pointer; text-decoration: none;
background: transparent; color: var(--tanne);
transition: transform .3s cubic-bezier(.16,1,.3,1), background-color .3s ease, color .3s ease;
}
.btn > * { position: relative; z-index: 1; }
.btn:hover { transform: scale(1.04); text-decoration: none; color: var(--tanne); }
.btn:active { transform: scale(.98); }
.btn:focus-visible { outline: 3px solid rgba(116,198,157,.5); outline-offset: 2px; }
/* Glas-Körper: geschichtete Innen-Schatten */
.btn::before {
content: ""; position: absolute; inset: 0; z-index: -1;
border-radius: var(--r-pill); pointer-events: none;
box-shadow:
0 0 6px rgba(13,74,60,.04), 0 2px 6px rgba(13,74,60,.10),
inset 3px 3px .5px -3px rgba(13,74,60,.55), inset -3px -3px .5px -3px rgba(13,74,60,.5),
inset 1px 1px 1px -.5px rgba(13,74,60,.4), inset -1px -1px 1px -.5px rgba(13,74,60,.4),
inset 0 0 6px 6px rgba(13,74,60,.10), inset 0 0 2px 2px rgba(13,74,60,.05),
0 0 12px rgba(255,255,255,.2);
}
/* Flüssige Hintergrund-Verzerrung (degradiert sauber ohne backdrop-filter) */
.btn::after {
content: ""; position: absolute; inset: 0; z-index: -2;
border-radius: var(--r-pill); overflow: hidden; pointer-events: none;
-webkit-backdrop-filter: blur(2px) url("#liquid-glass");
backdrop-filter: blur(2px) url("#liquid-glass");
}
/* Hauptaktion: Salbei-getöntes Glas (höchstens EIN .gruen pro Sicht) */
.btn.gruen { background: rgba(183,228,199,.40); }
.btn.gruen:hover { background: rgba(183,228,199,.55); }
/* Destruktiv: warm getöntes Glas + warme Innen-Schatten */
.btn.terra { color: var(--terra); background: rgba(196,134,99,.10); }
.btn.terra:hover { background: rgba(196,134,99,.20); }
.btn.terra::before {
box-shadow:
0 0 6px rgba(196,134,99,.05), 0 2px 6px rgba(196,134,99,.12),
inset 3px 3px .5px -3px rgba(196,134,99,.5), inset -3px -3px .5px -3px rgba(196,134,99,.45),
inset 1px 1px 1px -.5px rgba(196,134,99,.35), inset -1px -1px 1px -.5px rgba(196,134,99,.35),
inset 0 0 6px 6px rgba(196,134,99,.08), inset 0 0 2px 2px rgba(196,134,99,.04),
0 0 12px rgba(255,255,255,.2);
}
/* Größen */
.btn.sm { min-height: 38px; padding: 0 20px; font-size: 14px; }
.btn.lg { min-height: 50px; padding: 0 30px; font-size: 16px; }
.btn.xl { min-height: 56px; padding: 0 34px; font-size: 16px; }
/* Kompat: alte Sekundär-Aliasse = Klarglas (glas-Default) */
.btn.secondary, .btn.glass { background: transparent; color: var(--tanne); }
/* Unterstrich-Link — Sekundärpfade */
.ulink, a.link {
color: var(--tanne); font-weight: 700;
text-decoration: underline;
text-decoration-color: var(--salbei);
text-decoration-thickness: 2px;
text-underline-offset: 6px;
transition: text-underline-offset .18s ease;
}
.ulink:hover, a.link:hover { text-underline-offset: 9px; color: var(--wald); }
.actions, .heroActions, .formActions {
display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 22px;
}
/* ── Karten / Flächen ───────────────────────────────────────────────────── */
.card, .mini, .panel {
background: var(--creme);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 24px;
box-shadow: var(--shadow-clay);
}
.card { border-radius: var(--r-xl); padding: 28px; }
.mini {
border-radius: var(--r-md);
transition: transform .22s cubic-bezier(.16,1,.3,1), box-shadow .22s ease, border-color .22s ease;
}
.mini:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-clay-lift);
border-color: var(--salbei-hell);
}
.mini h3, .card h3 { color: var(--tanne); margin-top: 0; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
/* Milchglas-Primitive (Insel-Map, Highlight-Panels) */
.glass {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: var(--r-xl);
backdrop-filter: blur(10px) saturate(135%);
-webkit-backdrop-filter: blur(10px) saturate(135%);
box-shadow: var(--glass-shadow);
}
/* Icon-Chip */
.iconChip {
display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px; border-radius: var(--r-sm);
background: var(--gruen-tann); color: var(--tanne);
border: 1px solid var(--line-soft);
}
/* ── Status-Badges (Bibel: Grün=läuft, Warm=wartet · KEIN Rot/Blau) ─────── */
.status {
display: inline-flex; align-items: center; gap: .45em;
font-size: 12px; font-weight: 700;
border-radius: var(--r-pill); padding: 5px 11px;
background: var(--gruen-tann); color: var(--tanne);
border: 1px solid var(--salbei-hell);
}
.status::before {
content: ""; width: 7px; height: 7px; border-radius: 50%;
background: var(--wald);
}
.status.live::before { background: var(--wald); }
.status.testable { background: #EAF5EF; } .status.testable::before { background: var(--salbei); }
.status.gated, .status.statusSoft {
background: #FBF3E5; color: var(--ink-2); border-color: #EFD9B0;
}
.status.gated::before, .status.statusSoft::before { background: var(--gold); }
.status.candidate { background: #FDF6EC; color: var(--ink-2); border-color: #EFD9B0; }
.status.candidate::before { background: var(--gold-hell); }
.status.planned { background: var(--sand); color: var(--ink-2); border-color: var(--line); }
.status.planned::before { background: var(--ink-3); }
.status.blocked, .statusBlocked {
background: #F6E9E1; color: var(--ink-2); border-color: #E8CDBE;
}
.status.blocked::before, .statusBlocked::before { background: var(--terra); }
/* ── Formulare ──────────────────────────────────────────────────────────── */
.field label, label { font-weight: 700; font-size: 14px; color: var(--ink); }
.field { display: grid; gap: 6px; }
input, select, textarea {
width: 100%; min-height: var(--tap);
font: inherit; font-size: 16px; color: var(--ink);
background: var(--creme);
border: 1px solid var(--line);
border-radius: var(--r-sm);
padding: 12px 13px;
transition: border-color .16s ease, box-shadow .16s ease;
}
input:focus, select:focus, textarea:focus {
outline: none;
border-color: var(--salbei);
box-shadow: 0 0 0 3px rgba(116,198,157,.22);
}
textarea { resize: vertical; }
/* ── Tabellen ───────────────────────────────────────────────────────────── */
.tableWrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-md); }
table { width: 100%; border-collapse: collapse; background: var(--creme); border-radius: var(--r-md); overflow: hidden; }
th, td { padding: 13px 14px; border-bottom: 1px solid var(--line); text-align: left; font-size: 14px; }
th {
background: var(--sand); color: var(--ink-2);
font-family: var(--font-mono); font-size: 11px; font-weight: 600;
text-transform: uppercase; letter-spacing: .06em;
}
td { color: var(--ink); }
tbody tr:hover { background: rgba(245,241,236,.6); }
/* ── Hinweis-/Trust-Boxen ───────────────────────────────────────────────── */
.hint, .small, .disclaimer { font-size: 13px; color: var(--ink-3); line-height: 1.5; }
.trust, .trustStrip { display: flex; gap: 9px; flex-wrap: wrap; margin: 16px 0 0; }
.trust span, .trustStrip .trustItem, .trustStrip span {
background: rgba(255,255,255,.65); border: 1px solid var(--line);
border-radius: var(--r-pill); padding: 7px 12px;
font-size: 13px; font-weight: 600; color: var(--ink-2);
}
/* margin-block statt margin-Shorthand: sonst kippt der Shorthand das
margin-inline:auto von .wrap, und ein klebt
am linken Rand statt zentriert zu sitzen. */
.noteBox, .answerBox {
margin-block: 1.1rem; padding: 16px 18px;
background: var(--gruen-tann);
border: 1px solid var(--salbei-hell);
border-radius: var(--r-md);
color: #123c33;
}
.warn {
background: #FBF3E5; border: 1px solid #EFD9B0; color: #7a5b1e;
border-radius: var(--r-sm); padding: 12px 14px; margin-top: 12px; font-size: 14px;
}
/* ── Werbeslot (dezent, klar gekennzeichnet) ────────────────────────────── */
.adSlot, .ad {
border: 1.5px dashed #D9C7A6;
background: rgba(253,246,236,.7);
border-radius: var(--r-lg); padding: 22px; text-align: center;
color: var(--ink-3);
}
.adSlot strong, .ad strong { color: var(--ink-2); display: block; margin-bottom: 6px; }
/* ── Footer (Nachtwald, kein Blau) ──────────────────────────────────────── */
.footer {
margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
border-top: 0; padding: 40px 0 28px;
color: rgba(244,251,248,.85);
background:
radial-gradient(90% 70% at 12% 0%, rgba(116,198,157,.10) 0%, transparent 40%),
radial-gradient(80% 80% at 95% 120%, rgba(212,165,116,.12) 0%, transparent 45%),
linear-gradient(160deg, var(--nacht-2) 0%, var(--nacht) 60%, #0a1812 100%);
}
.footer .wrap { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.footerBrand {
flex-basis: 100%;
font-family: var(--font-display); font-weight: 800;
font-size: 22px; color: #fff; letter-spacing: -.03em;
}
.footer a {
color: #fff !important;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.16);
border-radius: var(--r-pill);
padding: 8px 13px; font-weight: 600; font-size: 14px;
transition: background .18s ease, transform .18s ease;
}
.footer a:hover { background: rgba(116,198,157,.20); transform: translateY(-1px); text-decoration: none; }
/* Fix: .archipelLinks ("Weitere Tools") liegt außerhalb von .wrap → ohne
Zentrierung/Padding klebt es am linken Rand und clippt. Wie .wrap zentrieren. */
.footer .archipelLinks {
max-width: 1160px; width: 100%; box-sizing: border-box;
margin: 16px auto 0; padding-inline: clamp(18px, 4vw, 24px);
display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
/* Fix: "powered by Schwarzwald Agent" (pbStrip) sitzt IM dunklen Nachtwald-Footer.
Ohne Override clobbert .footer a den pbLink zur Pille + die grüne Schrift ist auf
Dunkel kaum sichtbar. Hier transparent + helle Schrift/Icon = sauberer Credit. */
.footer .pbStrip { background: transparent; border-top: 1px solid rgba(255,255,255,.12); margin-top: 22px; }
.footer .pbStrip .pbLink { background: none !important; border: 0 !important; padding: 0 !important; }
.footer .pbStrip .pbName { color: #fff !important; }
.footer .pbStrip .pbLabel { color: rgba(255,251,248,.6) !important; }
.footer .pbStrip .pbIcon { filter: brightness(0) invert(1); }
/* "Powered by Schwarzwald Agent" */
.poweredBySchwarzwald {
display: flex; align-items: center; justify-content: center; gap: 14px;
margin: 26px auto 8px; min-height: 70px; text-align: center;
color: #5a6f62; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.poweredBySchwarzwald span { font-size: 11px; opacity: .85; }
.poweredBySchwarzwald img {
height: 58px; max-width: 280px; width: auto; object-fit: contain;
filter: drop-shadow(0 8px 18px rgba(15,59,47,.14));
transition: transform .18s ease, filter .18s ease;
}
.poweredBySchwarzwald a:hover img { transform: translateY(-1px); filter: drop-shadow(0 10px 22px rgba(15,59,47,.20)); }
/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
.cards { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 760px) {
.wrap { padding-inline: 18px; }
.cards { grid-template-columns: 1fr; gap: 16px; }
.section { padding: 40px 0; }
.nav { gap: 10px; }
.navLinks { overflow-x: auto; flex-wrap: nowrap; max-width: 100%; padding-bottom: 4px; scrollbar-width: none; }
.navLinks::-webkit-scrollbar { display: none; }
.navLinks a { white-space: nowrap; }
.actions, .heroActions, .formActions { width: 100%; }
.actions .btn, .heroActions .btn { width: 100%; }
.card { padding: 22px; border-radius: var(--r-lg); }
}
@media (max-width: 420px) {
h1 { font-size: clamp(2rem, 1rem + 8vw, 2.8rem); }
}
/* ============================================================================
Cookie-Consent-Banner (#cookieParcel) — gerendert von assets/consent.js.
Inselübergreifend identisch (Single Source via design-sync). Clay/Glas,
Tanne/Salbei. Die Ablehn-Option "Nur notwendig" ist GLEICH prominent wie
"Alle akzeptieren": gleiche Größe, gleiche Lesbarkeit, gleicher Tap-Bereich.
========================================================================== */
#cookieParcel {
position: fixed; z-index: 2147483000; left: 0; right: 0; bottom: 0;
display: flex; justify-content: center; padding: 16px;
pointer-events: none;
}
#cookieParcel .cookieBox {
pointer-events: auto; width: min(640px, 100%);
display: grid; grid-template-columns: auto 1fr; gap: 14px 16px; align-items: start;
background: rgba(254, 253, 249, .97); border: 1px solid var(--line);
border-radius: var(--r-lg);
box-shadow: 0 30px 70px -28px rgba(13, 74, 60, .45);
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
padding: 18px 20px;
}
#cookieParcel .cookieIcon {
width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line-soft);
background: var(--gruen-tann) center / 22px no-repeat
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D4A3C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2a10 10 0 1 0 10 10 4 4 0 0 1-5-5 4 4 0 0 1-5-5Z'/%3E%3Ccircle cx='9' cy='12' r='.6'/%3E%3Ccircle cx='14' cy='15' r='.6'/%3E%3Ccircle cx='15' cy='9' r='.6'/%3E%3C/svg%3E");
}
#cookieParcel .cookieText { min-width: 0; }
#cookieParcel .cookieText strong {
display: block; font-family: var(--font-display); font-weight: 800;
color: var(--tanne); font-size: 1rem;
}
#cookieParcel .cookieText p { margin: 4px 0 8px; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
#cookieParcel .cookieText details { font-size: 13px; }
#cookieParcel .cookieText summary { cursor: pointer; color: var(--tanne); font-weight: 700; font-size: 13px; }
#cookieParcel .cookieText details label {
display: flex; align-items: center; gap: 8px; margin-top: 8px;
font-weight: 500; color: var(--ink-2);
}
#cookieParcel .cookieText details input { width: 16px; min-height: 16px; }
#cookieParcel .cookieActions { grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap; }
#cookieParcel .cookieActions button {
flex: 1 1 auto; min-width: 140px; min-height: 44px; padding: 10px 18px;
border-radius: var(--r-pill); cursor: pointer;
font-family: var(--font-sans); font-weight: 700; font-size: 14px;
border: 1px solid var(--line); background: rgba(255, 255, 255, .72); color: var(--tanne);
transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
#cookieParcel .cookieActions button:hover { transform: translateY(-1px); box-shadow: var(--shadow-clay); }
#cookieParcel .cookieActions button:focus-visible { outline: 2px solid var(--tanne); outline-offset: 2px; }
/* "Alle akzeptieren" = primärer grüner CTA; Ablehnen bleibt gleich groß & lesbar. */
#cookieParcel .cookieActions #consentAll {
background: var(--tanne); color: var(--creme); border-color: transparent;
box-shadow: 0 1px 2px rgba(13, 74, 60, .18), 0 14px 26px -16px rgba(13, 74, 60, .55);
}
#cookieParcel .cookieActions #consentAll:hover { background: var(--tanne-hover); }
@media (max-width: 520px) {
#cookieParcel { padding: 12px; }
#cookieParcel .cookieBox { grid-template-columns: 1fr; gap: 12px; padding: 16px; }
#cookieParcel .cookieIcon { display: none; }
#cookieParcel .cookieActions { flex-direction: column; }
#cookieParcel .cookieActions button { width: 100%; flex: 1 1 100%; }
}
/* ============================================================================
FENSTERPREIS-VERGLEICH · Insel-Schicht (über _shared/archipel.css)
Fenster-Leadmagnet (alle-fenster.de) — Clay/Glas, Schwarzwald-Designfamilie.
Leitmotiv: GLAS. Das Produkt ist Glas — Milchglas-Panels als "Scheiben",
Clay erdet (Rahmen, Bank, Werkstatt-Wärme). Nur Moleküle, die archipel.css
nicht schon liefert. Tokens: --tanne/--salbei/--gold/--terra/--creme/--sand/
--ink* + --glass-* + --shadow-clay*. Animation nur transform/opacity.
========================================================================== */
/* ── Liquid-Glass-Buttons (Spec: Schwarzwald, identisch engpal) ──────────
.btn = Klarglas sekundär · .btn.gruen = EINE Hauptaktion pro Sicht ·
.btn.terra = destruktiv. Braucht #liquid-glass Filter im . */
.btn, a.btn, .btn.secondary, .btn.glass, .btn.ghost {
position: relative; isolation: isolate;
background: transparent !important; border: 0; box-shadow: none;
color: var(--tanne) !important;
-webkit-backdrop-filter: blur(2px) url("#liquid-glass");
backdrop-filter: blur(2px) url("#liquid-glass");
transition: transform .3s cubic-bezier(.16,1,.3,1), background-color .3s ease;
}
.btn::before {
content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
box-shadow:
0 0 6px rgba(13,74,60,.04), 0 2px 6px rgba(13,74,60,.10),
inset 3px 3px .5px -3px rgba(13,74,60,.55), inset -3px -3px .5px -3px rgba(13,74,60,.5),
inset 1px 1px 1px -.5px rgba(13,74,60,.4), inset -1px -1px 1px -.5px rgba(13,74,60,.4),
inset 0 0 6px 6px rgba(13,74,60,.10), inset 0 0 2px 2px rgba(13,74,60,.05),
0 0 12px rgba(255,255,255,.2);
}
.btn:hover, .btn.secondary:hover, .btn.glass:hover, .btn.ghost:hover {
transform: scale(1.04); background: transparent !important; box-shadow: none;
}
.btn:active { transform: scale(.98); }
.btn.gruen { background: rgba(183,228,199,.42) !important; }
.btn.gruen:hover { background: rgba(183,228,199,.58) !important; }
/* ── HERO: Werkstatt-Licht + Clay-Fenster ───────────────────────────────── */
.hero { position: relative; overflow: clip; padding: clamp(3.2rem, 2rem + 5vw, 6.5rem) 0 clamp(2.2rem, 4vw, 4rem); }
.heroGrid {
display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(300px, .85fr);
gap: clamp(24px, 4vw, 56px); align-items: center;
}
.heroCopy { max-width: 640px; }
.heroCopy h1 { margin: 14px 0 18px; }
.heroCopy .lead { margin-bottom: 4px; }
/* Clay-Fenster-Render schwebt auf der Szene; Glas-Sockel als Bodenreflex */
.heroStage { position: relative; display: grid; place-items: center; min-height: 340px; }
.heroStage img {
width: min(100%, 520px); height: auto; position: relative; z-index: 1;
will-change: transform;
animation: heroFloat 7s ease-in-out infinite;
/* ponytail: kein drop-shadow auf dem animierten Bild — Filter+Animation
zusammen droppen im Embedded-Chromium Render-Tiles; Schatten liegt
stattdessen statisch im ::after-Sockel. */
}
.heroStage::before { /* warmes Lichtfeld hinter dem Fenster */
content: ""; position: absolute; inset: 6% 4%;
background:
radial-gradient(60% 55% at 50% 42%, rgba(212,165,116,.30) 0%, transparent 70%),
radial-gradient(45% 40% at 62% 30%, rgba(183,228,199,.35) 0%, transparent 65%);
filter: blur(12px);
}
.heroStage::after { /* weicher Bodenschatten statt Glasplatte (erdet das Fenster) */
content: ""; position: absolute; left: 16%; right: 16%; bottom: 5%;
height: 34px; border-radius: 50%;
background: radial-gradient(50% 50% at 50% 50%, rgba(141,110,77,.34) 0%, rgba(141,110,77,0) 70%);
}
@keyframes heroFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
/* Answer-Box im Hero als Milchglas-Scheibe (Salbei-getönt, sonst auf Creme unsichtbar) */
.hero .answerBox {
background: linear-gradient(135deg, rgba(231,242,234,.92) 0%, rgba(255,255,255,.55) 100%);
border: 1px solid rgba(183,228,199,.9);
border-radius: var(--r-lg);
backdrop-filter: blur(10px) saturate(135%);
-webkit-backdrop-filter: blur(10px) saturate(135%);
box-shadow: var(--glass-shadow);
color: var(--ink);
font-size: 14.5px;
}
.hero .answerBox strong { color: var(--tanne); }
/* ── Sektionsvarianten ──────────────────────────────────────────────────── */
.section.compact { padding-top: clamp(2rem, 1.4rem + 2.5vw, 3.4rem); }
.section.band {
background:
radial-gradient(80% 90% at 90% -10%, rgba(183,228,199,.22) 0%, transparent 55%),
linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.25));
border-block: 1px solid rgba(232,224,213,.7);
}
.miniLead { color: var(--ink-2); font-size: 15px; max-width: 58ch; margin: 0 0 18px; }
.wideText { max-width: 74ch; color: var(--ink-2); }
/* ── Tool-Shell: Clay-Panel (Eingabe) + Glas-Panel (Ergebnis) ───────────── */
.toolShell {
display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(300px, .84fr);
gap: clamp(18px, 3vw, 34px); align-items: start;
}
.toolShell.reverse { direction: rtl; }
.toolShell.reverse > * { direction: ltr; }
.toolPanel {
background: var(--creme);
border: 1px solid var(--line);
border-radius: var(--r-xl);
padding: clamp(20px, 3vw, 32px);
box-shadow: var(--shadow-clay);
}
.toolPanel .badge { margin-bottom: 12px; }
.resultPanel {
position: sticky; top: 86px;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: var(--r-xl);
backdrop-filter: blur(12px) saturate(135%);
-webkit-backdrop-filter: blur(12px) saturate(135%);
box-shadow: var(--glass-shadow);
padding: clamp(20px, 3vw, 28px);
}
.resultPanel .badge { margin-bottom: 12px; }
.resultBox h2 { font-size: clamp(1.3rem, 1rem + 1.2vw, 1.7rem); }
.resultBox .big {
font-family: var(--font-display); font-weight: 800;
font-size: clamp(1.7rem, 1.2rem + 2vw, 2.5rem);
letter-spacing: -.02em; color: var(--tanne);
font-variant-numeric: tabular-nums;
}
/* Formular-Raster im Tool */
.formGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.formGrid .formActions, .formGrid .optionGroup, .formGrid textarea,
.formGrid .field:has(textarea), .formGrid .consent, .formGrid .notice { grid-column: 1 / -1; }
.field span { font-size: 12px; color: var(--ink-3); }
.checkField { grid-column: 1 / -1; }
.checkField label {
display: flex; align-items: flex-start; gap: 10px;
font-weight: 500; font-size: 14px; color: var(--ink-2);
background: rgba(255,255,255,.55);
border: 1px solid var(--line-soft);
border-radius: var(--r-sm);
padding: 11px 13px; cursor: pointer;
transition: border-color .16s ease, background .16s ease;
}
.checkField label:hover { border-color: var(--salbei-hell); background: var(--creme); }
.checkField input[type="checkbox"] { width: 18px; min-height: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--tanne); flex: none; }
.optionGroup { border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; margin: 0; }
.optionGroup legend { font-weight: 700; font-size: 14px; padding: 0 6px; color: var(--ink); }
.optionGroup label { display: flex; align-items: center; gap: 9px; padding: 6px 0; cursor: pointer; }
.optionGroup input[type="radio"] { width: 17px; min-height: 17px; height: 17px; accent-color: var(--tanne); flex: none; }
/* Projektbeschreibung: groß genug für echte Projekttexte (Elvis 2026-08-12) */
.formGrid textarea, #projectSummary { min-height: 180px; line-height: 1.55; }
/* Anfrage-Sektion: Formular kriegt mehr Breite, Neben-Panel bleibt schlank */
#anfrage .toolShell { grid-template-columns: minmax(0, 1.3fr) minmax(270px, .7fr); }
/* Honeypot: unsichtbar für Menschen, erreichbar für Bots (nicht display:none) */
.field.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.consent { align-items: flex-start; font-size: 13px; color: var(--ink-2); display: flex; gap: 10px; }
.consent input { width: 18px; min-height: 18px; height: 18px; margin-top: 2px; accent-color: var(--tanne); flex: none; }
.notice { font-size: 14px; color: var(--wald); font-weight: 600; min-height: 1em; margin: 0; }
/* ── Vergleichs-Tabelle (div-basiert) ───────────────────────────────────── */
.comparisonTable {
margin-top: 20px; border: 1px solid var(--line); border-radius: var(--r-md);
overflow: hidden; background: var(--creme); box-shadow: var(--shadow-clay);
}
.comparisonTable [role="row"] {
display: grid; grid-template-columns: 1.1fr 1.2fr 1.4fr;
gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--line-soft);
font-size: 14px; align-items: baseline;
}
.comparisonTable [role="row"]:last-child { border-bottom: 0; }
.comparisonTable [role="row"] > span:first-child { font-weight: 700; color: var(--tanne); }
.comparisonTable .tableHead {
background: var(--sand); border-bottom: 1px solid var(--line);
font-family: var(--font-mono); font-size: 11px; font-weight: 600;
text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2);
}
.comparisonTable .tableHead > span:first-child { color: var(--ink-2); }
/* ── Info-Raster / Trust / Lead-Weg ─────────────────────────────────────── */
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 22px; }
.infoItem {
background: var(--creme); border: 1px solid var(--line);
border-radius: var(--r-md); padding: 22px; box-shadow: var(--shadow-clay);
transition: transform .22s cubic-bezier(.16,1,.3,1), box-shadow .22s ease;
}
.infoItem:hover { transform: translateY(-3px); box-shadow: var(--shadow-clay-lift); }
.trustBox {
background: var(--glass-bg); border: 1px solid var(--glass-border);
border-radius: var(--r-lg); padding: 22px 24px;
backdrop-filter: blur(10px) saturate(135%);
-webkit-backdrop-filter: blur(10px) saturate(135%);
box-shadow: var(--glass-shadow);
}
.trustBox h2 { font-size: 1.2rem; }
.trustBox ul { margin: 0; padding-left: 18px; color: var(--ink-2); font-size: 14px; display: grid; gap: 8px; }
.leadFlow { margin: 0; padding-left: 20px; display: grid; gap: 12px; color: var(--ink-2); font-size: 14.5px; }
.leadFlow strong { color: var(--tanne); }
.status.ok { margin-top: 16px; }
/* Ergebnis: Kennzahlen-Raster + Funnel-CTA */
.metricGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
.metricGrid > div {
background: rgba(255,255,255,.6); border: 1px solid var(--line-soft);
border-radius: var(--r-sm); padding: 12px 14px; display: grid; gap: 2px;
}
.metricGrid strong { color: var(--tanne); font-family: var(--font-display); font-size: 15.5px; letter-spacing: -.01em; }
.metricGrid span { font-size: 12.5px; color: var(--ink-3); }
.resultActions { margin-top: 18px; }
.resultActions .btn { width: 100%; }
.resultBox .hint { margin-top: 10px; text-align: center; }
/* Briefing-Textarea */
#briefingText { font-family: var(--font-mono); font-size: 13px; line-height: 1.6; background: var(--sand); }
/* ── Sticky-CTA mobil (erscheint via JS nach dem Rechner) ───────────────── */
.stickyCta {
position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 30;
display: none; justify-content: center;
transform: translateY(120%); transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.stickyCta.sichtbar { transform: translateY(0); }
.stickyCta.versteckt { transform: translateY(120%); }
.stickyCta .btn { width: 100%; max-width: 420px; }
@media (max-width: 760px) { .stickyCta { display: flex; } }
/* ── Scroll-Reveal (IntersectionObserver setzt .sichtbar) ───────────────── */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1); }
.reveal.sichtbar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }
/* ── A11y: Fokus-Kontrast ───────────────────────────────────────────────── */
.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
outline: 3px solid var(--tanne); outline-offset: 2px;
}
/* ── Responsive ─────────────────────────────────────────────────────────── */
/* Formularelemente dürfen Grid-Tracks nie aufblähen (Select-Eigenbreite) */
input, select, textarea { min-width: 0; max-width: 100%; }
@media (max-width: 980px) {
.heroGrid, .toolShell, #anfrage .toolShell { grid-template-columns: minmax(0,1fr); }
.resultPanel { position: static; }
.heroStage { min-height: 260px; order: -1; }
.heroStage img { width: min(76vw, 400px); }
.grid3 { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 760px) {
/* Nav als horizontal scrollende Pillen-Leiste statt Overflow */
.nav { flex-wrap: wrap; }
.navLinks {
flex-wrap: nowrap; overflow-x: auto; max-width: 100%;
padding-bottom: 4px; -webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.navLinks::-webkit-scrollbar { display: none; }
.navLinks a { white-space: nowrap; flex: none; }
}
@media (max-width: 640px) {
.formGrid { grid-template-columns: minmax(0,1fr); }
.comparisonTable [role="row"] { grid-template-columns: minmax(0,1fr); gap: 3px; padding: 12px 14px; }
.comparisonTable .tableHead { display: none; }
}
/* Abschnitts-CTA mit PLZ-Deeplink (Playbook 1) — genutzt auf den Kostenseiten */
.ctaPlz {
background:
radial-gradient(90% 120% at 92% -20%, rgba(183,228,199,.28) 0%, transparent 55%),
radial-gradient(70% 100% at 0% 110%, rgba(212,165,116,.16) 0%, transparent 60%),
var(--creme);
border: 1px solid var(--line);
border-radius: var(--r-xl);
padding: clamp(24px, 3vw, 36px);
box-shadow: var(--shadow-clay);
}
.ctaPlz .badge { margin-bottom: 12px; }
.ctaPlz h2 { margin-top: 0; }
.ctaPlzForm { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-top: 18px; }
.ctaPlzForm .field { flex: 0 1 220px; }
@media (max-width: 640px) {
.ctaPlzForm { flex-direction: column; align-items: stretch; }
.ctaPlzForm .btn { width: 100%; }
}