/* ══════════════════════════════════════════ WOHNORT-FINDER — Eigenständiges Design Dark / Vibrant, Fraunces-DNA bleibt ══════════════════════════════════════════ */ :root{ /* ── Atlas (S95) — helle Identität. Die Variablen-NAMEN stammen aus dem früheren dunklen Stil und bleiben absichtlich unverändert: 341 Regeln verweisen darauf. Geändert hat sich nur, worauf sie zeigen. ── */ /* Grund und Flächen */ --bg:#F3EFE7; /* Creme, Seitengrund */ --bg-card:#ffffff; /* Papier */ --bg-card-solid:#ffffff; --bg-elevated:#faf8f4; --surface:#eee7db; /* Sand, Balkengründe */ --surface2:#e6ddcd; /* Akzent — EINE Farbe. Kupfer nur für Kernzahlen und den einen Haupt-Knopf. */ --accent:#b0663a; --accent2:#1c2b3a; /* war Türkis; zweite Akzentfarbe entfällt */ --accent3:#5a6169; /* war Violett */ --cta-from:#b0663a; --cta-to:#8C3A2A; /* Oxid: tiefere Stufe desselben Pigments */ /* Text */ --txt:#1c2b3a; /* Nachtblau */ --txt-mid:#5a6169; --txt-soft:#9a9384; /* Bewertungen — gedämpft, nicht als Ampel */ --score-hi:#4a7c59; --score-mid:#9a9384; --score-lo:#a8564a; /* Linien */ --rule:#e3ddd0; --rule-strong:#d4ccbc; /* Schatten: auf hellem Grund fein statt schwer */ --shadow-card:0 1px 2px rgba(28,43,58,.05),0 10px 30px rgba(28,43,58,.06); --shadow-glow:none; /* Schriften */ --font-serif:'Newsreader',Georgia,serif; --font-display:'Newsreader',Georgia,serif; --font-body:'Manrope',system-ui,sans-serif; --radius:2px; --radius-sm:2px; } *{box-sizing:border-box;margin:0;padding:0} html,body{overflow-x:hidden;max-width:100vw} html{scroll-behavior:auto} body{background:var(--bg);color:var(--txt);font-family:var(--font-body);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100vh} a{color:var(--txt);text-decoration:none} /* ── Header ── */ header{ height:64px; border-bottom:1px solid var(--rule); display:flex;align-items:center;justify-content:space-between; padding:0 clamp(16px,4vw,40px); position:sticky;top:0; background:var(--bg-card-solid); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); z-index:100; } .lang-switch{display:flex;gap:6px} .lang-btn{ font-family:var(--font-body);font-size:10px;letter-spacing:0.06em;text-transform:uppercase; padding:4px 9px;border:1px solid var(--rule-strong);background:none; color:var(--txt-soft);cursor:pointer;text-decoration:none;border-radius:5px;transition:all 0.15s; } .lang-btn.active,.lang-btn:hover{background:var(--accent);color:#ffffff;border-color:var(--accent);font-weight:700} /* ── Layout ── */ .wrap{max-width:1100px;margin:0 auto;padding:0 clamp(16px,4vw,40px)} /* ── Hero ── */ .hero{padding:72px 0 56px;position:relative;overflow:hidden} .hero::before{ content:"";position:absolute;top:-100px;right:-200px; width:600px;height:600px;border-radius:50%; background:radial-gradient(circle,rgba(176,102,58,0.10) 0%,transparent 65%); pointer-events:none; } .bc{font-size:10px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--txt-soft);margin-bottom:24px} .bc a{color:var(--txt-soft)}.bc a:hover{color:var(--accent)} .bc span{color:var(--txt-soft);margin:0 6px} .hero-eyebrow{ display:inline-flex;align-items:center;gap:8px; font-size:11px;font-weight:700;letter-spacing:0.10em;text-transform:uppercase; color:var(--accent);margin-bottom:20px; } .hero-eyebrow::before{content:"";width:22px;height:2px;background:var(--accent);display:inline-block;border-radius:2px} h1{ font-family:var(--font-serif); font-size:clamp(32px,5.5vw,58px); font-weight:600;letter-spacing:-0.025em;line-height:1.04; margin-bottom:20px; font-variation-settings:"opsz" 144,"SOFT" 50; background:linear-gradient(135deg,var(--txt) 30%,rgba(28,43,58,0.65)); -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; } .hero-sub{font-size:16px;color:var(--txt-mid);max-width:600px;line-height:1.75;margin-bottom:36px} .stat-row{display:flex;gap:32px;flex-wrap:wrap;margin-bottom:48px} .stat-item{display:flex;flex-direction:column;gap:2px} .stat-num{ font-family:var(--font-serif);font-size:28px;font-weight:600;letter-spacing:-0.02em; color:var(--accent);font-variation-settings:"opsz" 48,"SOFT" 50; } .stat-label{font-size:11px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--txt-soft)} /* ══════════════════════════════════════════ FINDER — Haupt-Interface ══════════════════════════════════════════ */ .finder-wrap{ background:var(--surface); border:1px solid var(--rule-strong); border-radius:24px; overflow:hidden; box-shadow:var(--shadow-card); margin-bottom:64px; } /* Step-Tabs */ /* Step panels */ @media(max-width:640px){} @media(max-width:640px){.mobile-hidden{display:none!important}} @media(min-width:641px){.mobile-only{display:none!important}} #mobile-btn-stack{ position:fixed;bottom:20px;left:50%;transform:translateX(-50%); display:none;flex-direction:column;align-items:center;gap:6px;z-index:201; width:calc(100vw - 32px);max-width:360px; } @media(max-width:640px){#mobile-btn-stack.visible{display:flex}} #mobile-detail-btn{ background:linear-gradient(135deg,var(--cta-from),var(--cta-to)); border:none;border-radius:24px;padding:11px 24px; font-family:var(--font-body);font-size:13px;font-weight:700; color:#fff;white-space:nowrap; box-shadow:0 4px 24px rgba(196,90,54,0.45); display:flex;align-items:center;gap:8px;cursor:pointer; } #mobile-back-fixed-btn{ /* War dunkel mit sandfarbenem Text — auf hellem Grund ist das umgekehrt zu lesen. */ background:var(--bg-card); border:1px solid var(--rule-strong);border-radius:24px;padding:8px 20px; font-family:var(--font-body);font-size:12px;font-weight:600; color:var(--txt);white-space:nowrap; backdrop-filter:blur(8px); display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer; max-width:calc(100vw - 32px);box-sizing:border-box; } #mobile-back-fixed-btn:hover{color:#fff;border-color:var(--surface)} @media(max-width:640px){.mobile-tool-btn.hidden-by-results{display:none!important}} .mobile-tool-btn{ position:fixed;bottom:20px;left:50%;transform:translateX(-50%); background:#ffffff;border:1px solid rgba(176,102,58,0.25); border-radius:24px;padding:12px 22px; font-family:var(--font-body);font-size:13px;font-weight:600; color:var(--surface);text-decoration:none;white-space:nowrap; box-shadow:0 4px 24px rgba(28,43,58,.07);z-index:100; display:flex;align-items:center;gap:10px; transition:border-color 0.15s,box-shadow 0.15s; } .mobile-tool-btn:hover{border-color:rgba(176,102,58,0.5);box-shadow:0 6px 28px rgba(28,43,58,.07);color:var(--surface)} .step-panels{padding:36px 40px 40px} @media(max-width:640px){.step-panels{padding:24px 20px 28px}} .step-panel{display:none} .step-panel.active{display:block} .step-title{ font-family:var(--font-serif);font-size:22px;font-weight:600; letter-spacing:-0.012em;margin-bottom:6px; font-variation-settings:"opsz" 48,"SOFT" 50; } .step-desc{font-size:13px;color:var(--txt-soft);margin-bottom:28px} /* ── Step 1: Lebenssituation ── */ .wizard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:24px} .wizard-card{ padding:18px 20px;border:1px solid var(--rule-strong);border-radius:var(--radius-sm); background:var(--bg-card);cursor:pointer;transition:all 0.18s; display:flex;flex-direction:column;gap:6px; } .wizard-card:hover{border-color:var(--accent);background:rgba(176,102,58,0.06)} .wizard-card.selected{border-color:var(--accent);background:rgba(176,102,58,0.10);box-shadow:0 0 0 1px var(--accent)} .wizard-card .wc-icon{font-size:22px;margin-bottom:4px;color:var(--txt-soft);display:block}.wizard-card.selected .wc-icon{color:var(--accent)} .wiz-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:0} .wiz-row .wizard-card{flex:1;min-width:120px;max-width:220px;flex-direction:row;align-items:center;gap:10px;padding:11px 14px} .wiz-row .wizard-card .wc-icon{margin-bottom:0;flex-shrink:0} .wiz-row .wizard-card .wc-label{font-size:13px} .wiz-row .wizard-card .wc-sub{display:none} .wizard-card .wc-label{font-size:13px;font-weight:600;color:var(--txt)} .wizard-card .wc-sub{font-size:11px;color:var(--txt-soft)} .field-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:20px} .field-group{display:flex;flex-direction:column;gap:6px} .field-label{font-size:11px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--txt-soft)} .field-select,.field-input{ padding:11px 14px; background:var(--surface2); border:1px solid var(--rule-strong); border-radius:8px; color:var(--txt);font-family:var(--font-body);font-size:14px; outline:none;transition:border-color 0.15s;width:100%; -webkit-appearance:none;appearance:none; } .field-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(28,43,58,0.4)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px} .field-select:focus,.field-input:focus{border-color:var(--accent)} .field-select option{background:var(--bg-card)} /* Modus-Toggle */ .modus-toggle{display:flex;gap:0;border:1px solid var(--rule-strong);border-radius:8px;overflow:hidden;margin-bottom:24px;width:fit-content} .modus-btn{ padding:9px 20px;border:none;background:none; color:var(--txt-soft);font-family:var(--font-body);font-size:13px;font-weight:600; cursor:pointer;transition:all 0.15s; } .modus-btn.active{background:var(--accent);color:#ffffff} /* ── Step 2: Gewichtung ── */ .weight-grid{display:flex;flex-direction:column;gap:20px;margin-bottom:8px} .weight-item{display:grid;grid-template-columns:180px 1fr 56px;align-items:center;gap:16px} @media(max-width:600px){.weight-item{grid-template-columns:1fr;gap:8px}} .weight-label{display:flex;flex-direction:column;gap:2px} .weight-name{font-size:14px;font-weight:600;color:var(--txt)} .weight-detail{font-size:11px;color:var(--txt-soft)} .weight-slider{ -webkit-appearance:none;appearance:none; width:100%;height:4px;border-radius:4px; background:var(--rule-strong);outline:none;cursor:pointer; } .weight-slider::-webkit-slider-thumb{ -webkit-appearance:none;appearance:none; width:18px;height:18px;border-radius:50%; background:var(--accent);cursor:pointer; box-shadow:0 0 8px rgba(176,102,58,0.4); } .weight-slider::-moz-range-thumb{ width:18px;height:18px;border-radius:50%;border:none; background:var(--accent);cursor:pointer; } .weight-val{ font-family:var(--font-serif);font-size:18px;font-weight:600; color:var(--accent);text-align:right;min-width:44px; font-variation-settings:"opsz" 24,"SOFT" 50; } .weight-sum{ display:flex;align-items:center;gap:8px;margin-top:12px; font-size:12px;color:var(--txt-soft); } .weight-sum-bar{flex:1;height:3px;background:var(--rule-strong);border-radius:3px;overflow:hidden} .weight-sum-fill{height:100%;background:var(--accent2);border-radius:3px;transition:width 0.2s} .weight-sum-fill.over{background:var(--score-lo)} /* ── Step 3: Filter ── */ .filter-section{margin-bottom:28px} .filter-section-title{font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--txt-soft);margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid var(--rule)} .filter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px} .range-wrap{display:flex;flex-direction:column;gap:6px} .range-header{display:flex;justify-content:space-between;align-items:baseline} .range-name{font-size:13px;font-weight:600;color:var(--txt)} .range-val{font-size:12px;color:var(--accent);font-weight:600} .range-slider{ -webkit-appearance:none;appearance:none; width:100%;height:4px;border-radius:4px; background:var(--rule-strong);outline:none;cursor:pointer; } .range-slider::-webkit-slider-thumb{ -webkit-appearance:none;width:16px;height:16px;border-radius:50%; background:var(--accent2);cursor:pointer;box-shadow:0 0 6px rgba(74,124,89,0.4); } .range-slider::-moz-range-thumb{ width:16px;height:16px;border-radius:50%;border:none; background:var(--accent2);cursor:pointer; } /* Kanton-Multi-Select */ .kt-grid{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px} .kt-chip{ padding:5px 10px;border-radius:20px;border:1px solid var(--rule-strong); font-size:11px;font-weight:600;color:var(--txt-soft);cursor:pointer; background:none;transition:all 0.15s;white-space:nowrap; } .kt-chip.selected{background:var(--accent);color:#ffffff;border-color:var(--accent)} .kt-chip:hover:not(.selected){border-color:var(--txt-soft);color:var(--txt)} /* Toggle */ .toggle-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--rule)} .toggle-row:last-child{border-bottom:none} .arbeitsort-wrap{position:relative} .arbeitsort-dropdown{position:absolute;top:100%;left:0;right:0;background:var(--bg-card);border:1px solid var(--rule-strong);border-radius:var(--radius-sm);box-shadow:0 4px 16px rgba(28,43,58,.07);z-index:100;max-height:240px;overflow-y:auto;margin-top:2px} .arbeitsort-option{padding:10px 14px;cursor:pointer;font-size:13px;color:var(--txt);display:flex;justify-content:space-between;align-items:center;gap:8px} .arbeitsort-option:hover,.arbeitsort-option.active{background:var(--bg-soft)} .arbeitsort-option-kt{font-size:11px;color:var(--txt-soft);flex-shrink:0} .arbeitsort-option-besch{font-size:11px;color:var(--txt-soft);flex-shrink:0} .arbeitsort-selected{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--bg-soft);border-radius:var(--radius-sm);font-size:13px;color:var(--txt);margin-top:4px} .arbeitsort-clear{background:none;border:none;cursor:pointer;color:var(--txt-soft);font-size:14px;padding:0;line-height:1} .arbeitsort-clear:hover{color:var(--txt)} .pendelzeit-block{margin-top:20px;padding:16px 18px;background:var(--bg-card);border:1px solid var(--rule-strong);border-radius:var(--radius-sm)} .pendelzeit-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:12px;flex-wrap:wrap} .pendelzeit-title{font-size:13px;font-weight:600;color:var(--txt)} .pendelzeit-val{font-size:13px;font-weight:700;color:var(--accent);min-width:64px;text-align:right} .pendelzeit-mode{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--txt-soft);margin-top:10px} .pendelzeit-mode label{display:flex;align-items:center;gap:6px;cursor:pointer;color:var(--txt-soft)} .pendelzeit-mode input[type=checkbox]{width:14px;height:14px;accent-color:var(--accent);cursor:pointer} .pend-mode-btn{flex:1;padding:6px 10px;border:1px solid var(--rule-strong);border-radius:6px;background:var(--bg-soft);color:var(--txt-soft);font-size:12px;font-weight:600;cursor:pointer;transition:all 0.15s;display:flex;align-items:center;justify-content:center;gap:5px}.pend-mode-btn svg{flex-shrink:0} .pend-mode-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)} .pendelzeit-mode span.active{color:var(--accent);font-weight:600} .toggle-label{font-size:13px;font-weight:500;color:var(--txt)} .toggle-sub{font-size:11px;color:var(--txt-soft)} .toggle{position:relative;width:40px;height:22px;flex-shrink:0} .toggle input{opacity:0;width:0;height:0} .toggle-track{ position:absolute;top:0;left:0;right:0;bottom:0; background:var(--rule-strong);border-radius:22px;cursor:pointer;transition:0.2s; } .toggle input:checked+.toggle-track{background:var(--accent2)} .toggle-track::after{ content:"";position:absolute; width:16px;height:16px;left:3px;top:3px; background:#fff;border-radius:50%;transition:0.2s; } .toggle input:checked+.toggle-track::after{transform:translateX(18px)} /* ── CTA Suche ── */ .finder-cta{ display:flex;align-items:center;justify-content:space-between; gap:16px;padding-top:28px;border-top:1px solid var(--rule);flex-wrap:wrap; } .finder-cta-left{font-size:13px;color:var(--txt-soft)} .search-btn{ padding:14px 32px; background:linear-gradient(135deg,var(--cta-from),var(--cta-to)); color:#ffffff;border:none;border-radius:10px; font-family:var(--font-body);font-size:14px;font-weight:700; cursor:pointer;transition:all 0.2s;white-space:nowrap; box-shadow:0 4px 20px rgba(176,102,58,0.30); } .search-btn:hover{transform:translateY(-1px);box-shadow:0 6px 28px rgba(176,102,58,0.45)} .search-btn:disabled{opacity:0.5;cursor:not-allowed;transform:none} /* Zweiter Knopf der Gabelung: gleiche Grösse, andere Gewichtung. Zwei kupferne Knöpfe nebeneinander heben sich gegenseitig auf und nehmen der Akzentfarbe ihre Seltenheit — «Idealen Wohnort finden» ist der übliche Weg. */ .search-btn.zweitrangig{ background:var(--bg-card); color:var(--txt); border:1px solid var(--rule-strong); box-shadow:none; } .search-btn.zweitrangig:hover{ border-color:var(--txt); box-shadow:none; transform:translateY(-1px); } /* Gabelung (S95, Etappe A): zwei gleichwertige Buttons nebeneinander */ .gabelung{display:flex;flex-direction:column;gap:12px;width:100%} .gabelung-btns{display:flex;gap:12px;width:100%} .gabelung-btns .search-btn{flex:1;text-align:center} .gabelung-hint{font-size:11px;color:var(--txt-soft);text-align:center;margin-top:-2px} .search-btn.has-badge{position:relative;overflow:visible} .soon-badge{ position:absolute;top:-8px;right:10px; background:var(--bg-card);color:var(--score-lo); border:1px solid var(--score-lo);border-radius:10px; font-size:9px;font-weight:700;letter-spacing:0.04em; padding:1px 7px;text-transform:uppercase; } @media (max-width:560px){ .gabelung-btns{flex-direction:column} } /* Step-Nav Buttons */ .step-btns{display:flex;gap:10px;justify-content:flex-end;margin-top:28px} .btn-ghost{ padding:11px 22px;border:1px solid var(--rule-strong);border-radius:8px; background:none;color:var(--txt-mid);font-family:var(--font-body);font-size:13px;font-weight:600; cursor:pointer;transition:all 0.15s; } .btn-ghost:hover{border-color:var(--txt-soft);color:var(--txt)} .btn-next{ padding:11px 22px;border-radius:8px;border:none; background:linear-gradient(135deg,var(--cta-from),var(--cta-to)); color:#ffffff;font-family:var(--font-body);font-size:13px;font-weight:700; cursor:pointer;transition:all 0.15s; } .btn-next:hover{opacity:0.92} /* ══════════════════════════════════════════ RESULTS ══════════════════════════════════════════ */ .results-section{margin-bottom:64px} .results-header{ display:flex;align-items:center;justify-content:space-between; margin-bottom:20px;flex-wrap:wrap;gap:12px; } .results-title{ font-family:var(--font-serif);font-size:22px;font-weight:600; font-variation-settings:"opsz" 48,"SOFT" 50; } .results-meta{font-size:12px;color:var(--txt-soft)} .results-sort{ display:flex;align-items:center;gap:8px;font-size:12px;color:var(--txt-soft); } .sort-select{ padding:6px 10px;background:var(--surface2);border:1px solid var(--rule-strong); border-radius:6px;color:var(--txt);font-size:12px;outline:none;cursor:pointer; } /* ══ HEADER: analog index.html ══ */ header{border-bottom:1px solid var(--rule);padding:0 clamp(16px,4vw,80px);display:flex;align-items:center;justify-content:space-between;height:68px;background:var(--bg-card-solid);position:sticky;top:0;z-index:100;overflow:hidden} .logo-link{display:flex;align-items:center;text-decoration:none;flex-shrink:0} .header-nav-center{display:flex;gap:4px;align-items:center} .header-tool-btn{font-family:Manrope,sans-serif;font-size:12px;letter-spacing:0.06em;text-transform:uppercase;color:var(--txt-soft);text-decoration:none;padding:7px 16px;border-radius:8px;transition:all 0.15s;font-weight:600} .header-tool-btn:hover{color:var(--txt);background:var(--bg-elevated)} .header-tool-btn.active{color:var(--accent);background:rgba(176,102,58,0.12);border:1px solid rgba(176,102,58,0.2)} @media(max-width:600px){.header-nav-center{display:none}} /* ══ FOOTER: analog index.html, Dark-Mode ══ */ footer{border-top:1px solid var(--rule);padding:36px clamp(20px,5vw,80px);margin-top:80px} .footer-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:center} .footer-copy{font-family:'Manrope',sans-serif;font-size:10.5px;color:var(--txt-soft);letter-spacing:0.03em;line-height:1.5;display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap} .footer-logo-link{display:inline-flex;align-items:center;line-height:1;opacity:0.5;transition:opacity 0.2s;text-decoration:none} .footer-logo-link:hover{opacity:0.9} .footer-logo-img{height:16px;width:auto;display:block} .footer-nav{display:flex;justify-content:center;gap:24px;flex-wrap:wrap} .footer-nav a{font-family:'Manrope',sans-serif;font-size:11px;color:var(--txt-soft);text-decoration:none;letter-spacing:0.02em;transition:color 0.18s} .footer-nav a:hover{color:var(--txt)} .footer-note{font-family:'Manrope',sans-serif;font-size:10.5px;color:var(--txt-soft);letter-spacing:0.03em;text-align:right} @media(max-width:720px){.footer-inner{grid-template-columns:1fr;text-align:center;gap:18px}.footer-nav{justify-content:center}.footer-note{text-align:center}} /* ══ LOADING STATE ══ */ .loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 24px;gap:20px;text-align:center} .loading-spinner{width:48px;height:48px;border:3px solid var(--rule-strong);border-top-color:var(--accent);border-radius:50%;animation:spin 0.8s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} .loading-title{font-size:18px;font-weight:700;color:var(--txt)} .loading-desc{font-size:13px;color:var(--txt-soft)} /* ══ AUTOCOMPLETE UPGRADE ══ */ .arbeitsort-dropdown{background:var(--bg-card);border:1px solid rgba(176,102,58,0.3);box-shadow:0 8px 32px rgba(28,43,58,.07)} .arbeitsort-option{color:var(--txt);border-bottom:1px solid var(--rule)} .arbeitsort-option:last-child{border-bottom:none} .arbeitsort-option:hover,.arbeitsort-option.active{background:rgba(176,102,58,0.08)} .arbeitsort-option-kt{background:var(--surface2);padding:2px 6px;border-radius:4px;font-size:10px;font-weight:600;color:var(--accent)} .arbeitsort-option-besch{color:var(--txt-soft)} .hero-tag{font-family:'Manrope',sans-serif;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--txt-soft);display:flex;align-items:center;gap:8px} .hero-tag::before{content:'—';color:var(--rule-strong)} /* ══ CHIP DESIGN UPGRADE ══ */ .result-chip{ background:linear-gradient(135deg,var(--surface) 0%,var(--bg-card-solid) 100%); border:1px solid var(--rule-strong); box-shadow:0 2px 12px rgba(28,43,58,.07); transition:all 0.2s; } .result-chip:hover{ border-color:var(--accent); box-shadow:0 4px 20px rgba(176,102,58,0.15); transform:translateY(-1px); } .chip-score{ font-size:13px;font-weight:800; background:linear-gradient(135deg,var(--accent2),var(--accent)); -webkit-background-clip:text;-webkit-text-fill-color:transparent; } /* ══ FILTER PANEL UPGRADE ══ */ .filter-panel-box{background:var(--surface);border:1px solid var(--rule-strong);border-radius:var(--radius);padding:24px} .filter-panel-title{font-family:var(--font-serif);font-size:18px;font-weight:700;margin-bottom:20px;color:var(--txt)} .fp-section-label{font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--accent);margin-bottom:12px} /* Result Cards Grid */ .result-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr)); gap:16px; overflow-anchor:none; } .result-card{ background:var(--surface); border:1px solid var(--rule-strong); border-radius:var(--radius); padding:20px 22px 18px; transition:all 0.2s; position:relative;overflow:hidden; } .result-card::before{ content:"";position:absolute;top:0;left:0;right:0;height:3px; background:linear-gradient(90deg,var(--score-color,var(--accent)),transparent); } .result-card:hover{border-color:var(--rule-strong);transform:translateY(-2px);box-shadow:0 8px 32px rgba(28,43,58,.07)} .rc-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:14px;gap:8px} .rc-name{font-family:var(--font-serif);font-size:18px;font-weight:600;letter-spacing:-0.01em;font-variation-settings:"opsz" 48,"SOFT" 50} .rc-kanton{font-size:11px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--txt-soft)} .rc-score{ display:flex;flex-direction:column;align-items:center;gap:2px;flex-shrink:0; min-width:52px; } .rc-score-num{ font-family:var(--font-serif);font-size:28px;font-weight:600;line-height:1; font-variation-settings:"opsz" 48,"SOFT" 50; } .rc-score-label{font-size:9px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--txt-soft)} /* Score colour classes */ .score-hi{color:var(--score-hi)} .score-mid{color:var(--score-mid)} .score-lo{color:var(--score-lo)} .rc-dims{display:flex;flex-direction:column;gap:7px;margin-bottom:14px} .rc-dim{display:flex;align-items:center;gap:8px} .rc-dim-label{font-size:11px;color:var(--txt-soft);min-width:72px;flex-shrink:0} .rc-dim-bar{flex:1;height:3px;background:var(--rule-strong);border-radius:3px;overflow:hidden} .rc-dim-fill{height:100%;border-radius:3px;transition:width 0.4s} .rc-dim-val{font-size:11px;font-weight:600;color:var(--txt-mid);min-width:44px;text-align:right} .rc-dim-na{opacity:.5;font-style:italic;font-weight:500;cursor:help;border-bottom:1px dotted currentColor} .chip-excluded-note{display:inline-block;margin-left:6px;font-size:11px;color:var(--txt-soft);cursor:help;border-bottom:1px dotted currentColor} .rc-bottom{ display:flex;align-items:center;justify-content:space-between; padding-top:12px;border-top:1px solid var(--rule); } .rc-plz{font-size:11px;color:var(--txt-soft)} .rc-link{ font-size:11px;font-weight:600;color:var(--accent); padding:5px 12px;border:1px solid rgba(176,102,58,0.3);border-radius:20px; transition:all 0.15s; } .rc-link:hover{background:rgba(176,102,58,0.12);text-decoration:none} /* Etappe E: Direktauswahl von Gemeinden per Autocomplete. Zweiter Weg der Gabelung — ohne Ergebnisliste direkt in den Vergleich. */ .dv-panel{display:none;max-width:660px;margin:0 auto;padding:8px 0 40px} .dv-panel.visible{display:block} .dv-panel h3{font-size:20px;margin:0 0 6px;color:var(--txt)} .dv-sub{font-size:14px;color:var(--txt-soft);margin:0 0 22px;line-height:1.55} .dv-feld{position:relative;margin-bottom:16px} .dv-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;min-height:4px} .dv-chip{display:inline-flex;align-items:center;gap:9px;padding:8px 10px 8px 14px; border:1px solid var(--rule-strong);border-radius:20px;font-size:14px;color:var(--txt); background:var(--bg-card)} .dv-chip-kt{font-size:11px;color:var(--txt-soft);letter-spacing:.05em} .dv-chip-weg{background:none;border:none;color:var(--txt-soft);cursor:pointer; font-size:17px;line-height:1;padding:0 2px} .dv-chip-weg:hover{color:var(--score-lo)} .dv-zaehler{font-size:13px;color:var(--txt-soft);margin:0 0 14px} .dv-los{width:100%;padding:15px;font-size:16px;font-weight:700} .dv-los:disabled{opacity:.4;cursor:default} .dv-zurueck{background:none;border:none;color:var(--txt-soft);font-size:14px; cursor:pointer;padding:12px 0;display:block;margin:6px auto 0} .dv-zurueck:hover{color:var(--txt)} /* Etappe C: Spalten-Vergleichsansicht — ATLAS. Die Ansicht blendet alles andere aus und steht fuer sich; deshalb kann sie hell sein, waehrend die uebrige Seite noch den alten dunklen Werkzeug-Look traegt. Das ist der erste Atlas-Baustein im Wo-Finder; Finder und Landing ziehen spaeter nach. */ .cmp-view{display:none;background:var(--cmp-cream);color:var(--cmp-night); font-family:Manrope,sans-serif;margin:0 -100vw;padding:0 100vw} .cmp-view.visible{display:block} .cmp-inner{max-width:1180px;margin:0 auto;padding:44px 16px 90px} .cmp-view{ --cmp-night:#1c2b3a; --cmp-cream:#F3EFE7; --cmp-paper:#ffffff; --cmp-copper:#b0663a; --cmp-sand:#eee7db; --cmp-line:#e3ddd0; --cmp-muted:#9a9384; --cmp-soft:#5a6169; --cmp-good:#4a7c59; } .cmp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap} .cmp-head h2{font-family:Newsreader,Georgia,serif;font-size:clamp(26px,3.4vw,38px); font-weight:400;line-height:1.15;margin:0;color:var(--cmp-night)} .cmp-head-sub{font-size:14px;color:var(--cmp-soft);margin:8px 0 0;max-width:62ch;line-height:1.55} .cmp-actions{display:flex;gap:14px;align-items:center;flex-shrink:0;padding-top:6px} .cmp-teilen{background:var(--cmp-night);border:1px solid var(--cmp-night);border-radius:2px; color:var(--cmp-cream);font-size:13px;cursor:pointer;padding:8px 16px;font-family:inherit; transition:all .15s} .cmp-teilen:hover{background:var(--accent2);border-color:var(--accent2)} .cmp-teilen.kopiert{background:var(--cmp-good);border-color:var(--cmp-good)} /* Hinweis auf einen geteilten Vergleich. Sand statt Weiss, damit er zur Tabelle gehoert und nicht wie eine Warnung wirkt — es ist eine Einordnung, kein Fehler. */ /* Hinweis auf einen geteilten Vergleich. Weiss statt Sand und mit Schatten: Er steht auf derselben Ebene wie die Tabelle, nicht als Randnotiz — der Wechsel auf die eigenen Angaben ist fuer den Empfaenger die wichtigste Handlung auf dieser Seite. */ .cmp-geteilt{background:var(--cmp-paper);border-left:4px solid var(--cmp-copper); box-shadow:0 1px 3px rgba(28,43,58,.07),0 6px 20px rgba(28,43,58,.05); padding:22px 26px;margin:34px 0 8px;display:flex;align-items:center;gap:28px; flex-wrap:wrap;justify-content:space-between} .cmp-geteilt-txt{font-size:14.5px;color:var(--cmp-night);line-height:1.55;max-width:60ch} .cmp-geteilt-txt b{font-weight:600} /* Der Knopf traegt hier die Hauptfarbe — er ist die eigentliche Handlungsaufforderung. */ .cmp-geteilt .cmp-annahmen{background:var(--cmp-night);color:var(--cmp-cream); font-size:14px;padding:11px 22px;flex-shrink:0} .cmp-geteilt .cmp-annahmen:hover{background:var(--accent2);border-color:var(--accent2)} .cmp-back{background:none;border:none;color:var(--cmp-soft);font-size:14px;cursor:pointer;padding:6px 0} .cmp-back:hover{color:var(--cmp-night)} .cmp-annahmen{background:none;border:1px solid var(--cmp-night);border-radius:2px; color:var(--cmp-night);font-size:13px;cursor:pointer;padding:8px 16px;font-family:inherit} .cmp-annahmen:hover{background:var(--cmp-night);color:var(--cmp-cream)} /* Hinweis ÜBER der Tabelle: unter einer 14-zeiligen Tabelle sieht ihn niemand. */ /* Kopfzeile ueber der Tabelle: Hinweis links, Knoepfe rechts. Der blosse Hinweis «seitlich scrollen» reichte nicht — auf einem Trackpad ohne waagrechte Geste kommt man an die sechste Spalte gar nicht heran. */ /* Vorhang beim Sprachwechsel. Ohne ihn sieht der Nutzer den ganzen Wiederherstellungsweg: Eingabemaske → «0 Resultate» → Liste → Zielansicht. Das sind drei Zwischenbilder, die ihn nichts angehen. Der Vorhang liegt vom ersten Moment an darüber und geht erst weg, wenn die Zielansicht steht. */ #wf-vorhang{position:fixed;inset:0;z-index:9999;background:var(--bg); display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px; transition:opacity .25s;font-family:Manrope,sans-serif} #wf-vorhang.weg{opacity:0;pointer-events:none} #wf-vorhang .vh-text{font-size:14px;color:var(--txt-soft);letter-spacing:.02em} #wf-vorhang .vh-ring{width:26px;height:26px;border:2px solid var(--rule-strong); border-top-color:var(--accent);border-radius:50%;animation:vh-dreh .8s linear infinite} @keyframes vh-dreh{to{transform:rotate(360deg)}} .cmp-leiste{display:flex;align-items:center;justify-content:space-between;gap:16px; margin:26px 0 8px;min-height:30px} .cmp-hinweis{font-size:13px;color:var(--cmp-muted);visibility:hidden} .cmp-hinweis.zeigen{visibility:visible} .cmp-knoepfe{display:none;gap:8px} .cmp-knoepfe.zeigen{display:flex} .cmp-knopf{width:34px;height:34px;border:1px solid var(--cmp-line);background:var(--cmp-paper); color:var(--cmp-night);border-radius:2px;cursor:pointer;font-size:15px;line-height:1; display:flex;align-items:center;justify-content:center;transition:all .15s;font-family:inherit} .cmp-knopf:hover:not(:disabled){border-color:var(--cmp-night);background:var(--cmp-night);color:var(--cmp-paper)} .cmp-knopf:disabled{opacity:.3;cursor:default} .cmp-wrap{position:relative;background:var(--cmp-paper); box-shadow:0 1px 3px rgba(28,43,58,.07),0 8px 28px rgba(28,43,58,.05)} .cmp-wrap::after{content:'';position:absolute;top:0;right:0;bottom:0;width:56px; pointer-events:none;opacity:0;transition:opacity .2s; background:linear-gradient(to right,rgba(255,255,255,0),var(--cmp-paper))} .cmp-wrap.mehr-rechts::after{opacity:1} .cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch; scrollbar-width:thin;scrollbar-color:var(--cmp-line) transparent} .cmp-scroll::-webkit-scrollbar{height:9px} .cmp-scroll::-webkit-scrollbar-thumb{background:var(--cmp-line);border-radius:5px} .cmp-tab{border-collapse:separate;border-spacing:0;width:100%;min-width:max-content} .cmp-tab th,.cmp-tab td{padding:11px 18px;text-align:right;font-size:14px;white-space:nowrap; border-bottom:1px solid var(--cmp-line)} .cmp-tab th:first-child,.cmp-tab td:first-child{ text-align:left;position:sticky;left:0;background:var(--cmp-paper);z-index:2; font-size:13px;color:var(--cmp-soft);min-width:172px} /* Kopfzeile: Gemeindenamen in der Serif — sie sind die Ueberschriften der Spalten. */ .cmp-tab thead th{font-family:Newsreader,Georgia,serif;font-size:18px;font-weight:400; color:var(--cmp-night);padding-bottom:14px;border-bottom:1px solid var(--cmp-night)} .cmp-tab thead th .cmp-kt{font-family:Manrope,sans-serif;font-size:11px;color:var(--cmp-muted); letter-spacing:.06em;margin-left:6px} /* Abschnittsbaender: deutlich abgesetzt statt nur etwas Luft. */ .cmp-gruppe td{padding:26px 18px 9px;font-size:11px;letter-spacing:.13em;text-transform:uppercase; color:var(--cmp-muted);background:var(--cmp-sand);border-bottom:1px solid var(--cmp-line)} .cmp-gruppe td:first-child{background:var(--cmp-sand);color:var(--cmp-night);font-weight:600} /* Kernzahl: die einzige Stelle mit Kupfer und der grossen Serif. */ .cmp-total td{font-family:Newsreader,Georgia,serif;font-size:clamp(21px,2.4vw,27px); color:var(--cmp-copper);padding:20px 18px;border-bottom:1px solid var(--cmp-night)} .cmp-total td:first-child{font-family:Manrope,sans-serif;font-size:13px; color:var(--cmp-night);font-weight:600;letter-spacing:.02em} /* Nur der beste Wert wird markiert, und zwar im gedaempften Atlas-Gruen. Der schlechteste bleibt unmarkiert: Atlas kennt kein Rot, und «SEHR sparsam» ist die ausdrueckliche Vorgabe fuer diese Farbe. */ .cmp-best{color:var(--cmp-good);font-weight:600} .cmp-total .cmp-best{color:var(--cmp-copper);font-weight:400;position:relative} .cmp-total .cmp-best::after{content:'';position:absolute;left:18px;right:18px;bottom:12px; height:1px;background:var(--cmp-copper);opacity:.5} .cmp-band{display:block;font-size:11px;color:var(--cmp-muted);font-weight:400;margin-top:3px} .cmp-fuss{font-size:12.5px;color:var(--cmp-soft);margin:26px 0 0;line-height:1.65;max-width:78ch} @media(max-width:640px){ .cmp-inner{padding:28px 12px 70px} .cmp-tab th,.cmp-tab td{padding:9px 12px;font-size:13px} .cmp-tab thead th{font-size:16px} .cmp-tab th:first-child,.cmp-tab td:first-child{min-width:132px;font-size:12px} .cmp-total td{padding:15px 12px} } /* Etappe B: Vergleichen-Button + schwebende Leiste */ .rc-actions{display:flex;gap:8px;align-items:center} .rc-cmp{ font-size:11px;font-weight:600;color:var(--accent);cursor:pointer; padding:5px 12px;border:1px solid rgba(176,102,58,0.3);border-radius:20px; background:transparent;transition:all 0.15s;white-space:nowrap;font-family:var(--font-body); } .rc-cmp:hover{background:rgba(176,102,58,0.12)} .rc-cmp.active{ color:var(--accent2);border-color:rgba(74,124,89,0.5);background:rgba(74,124,89,0.12); } .rc-cmp:disabled{opacity:0.4;cursor:not-allowed} .cmp-bar{ position:fixed;left:50%;transform:translateX(-50%) translateY(120%); bottom:24px;z-index:200; display:flex;align-items:center;gap:16px; background:var(--surface);border:1px solid var(--rule-strong); border-radius:14px;padding:12px 18px; box-shadow:0 8px 40px rgba(28,43,58,.07); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); transition:transform 0.28s cubic-bezier(0.16,1,0.3,1); max-width:calc(100vw - 32px); } .cmp-bar.visible{transform:translateX(-50%) translateY(0)} .cmp-bar-info{font-size:13px;color:var(--txt);display:flex;align-items:center;gap:8px;white-space:nowrap} .cmp-bar-count{font-weight:700;color:var(--accent2)} .cmp-bar-names{font-size:11px;color:var(--txt-soft);max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cmp-bar-go{ font-size:13px;font-weight:700;color:#ffffff;cursor:pointer; padding:8px 18px;border:none;border-radius:9px;white-space:nowrap; background:linear-gradient(135deg,var(--cta-from),var(--cta-to)); font-family:var(--font-body);transition:all 0.15s; } .cmp-bar-go:hover{transform:translateY(-1px)} .cmp-bar-go:disabled{opacity:0.5;cursor:not-allowed;transform:none} .cmp-bar-clear{ font-size:11px;color:var(--txt-soft);cursor:pointer;background:none;border:none; text-decoration:underline;font-family:var(--font-body);padding:0; } .cmp-bar-clear:hover{color:var(--txt)} .cmp-bar-toast{ position:absolute;top:-40px;left:50%;transform:translateX(-50%); background:var(--score-lo);color:#fff;font-size:12px;font-weight:600; padding:7px 14px;border-radius:8px;white-space:nowrap; opacity:0;transition:opacity 0.2s;pointer-events:none; box-shadow:0 4px 16px rgba(28,43,58,.07); } .cmp-bar-toast.show{opacity:1} @media (max-width:560px){ .cmp-bar{flex-direction:column;gap:10px;bottom:12px;padding:12px 16px} .cmp-bar-names{display:none} } /* ── Loading / Empty states ── */ .state-box{ text-align:center;padding:64px 24px; border:1px solid var(--rule);border-radius:var(--radius); background:var(--surface); } .state-icon{font-size:40px;margin-bottom:16px} .state-title{font-family:var(--font-serif);font-size:20px;font-weight:600;margin-bottom:8px;font-variation-settings:"opsz" 48,"SOFT" 50} .state-desc{font-size:13px;color:var(--txt-soft)} .spinner{ width:36px;height:36px;border:3px solid var(--rule-strong); border-top-color:var(--accent);border-radius:50%; animation:spin 0.8s linear infinite;margin:0 auto 16px; } @keyframes spin{to{transform:rotate(360deg)}} /* Load More */ .load-more-wrap{text-align:center;margin-top:24px} .load-more-btn{ padding:12px 28px;border:1px solid var(--rule-strong);border-radius:8px; background:none;color:var(--txt-mid);font-family:var(--font-body); font-size:13px;font-weight:600;cursor:pointer;transition:all 0.15s; } .load-more-btn:hover{border-color:var(--accent);color:var(--accent)} /* ══ SPLIT-LAYOUT: Filter links, Chips rechts ══ */ .results-split{ display:grid; grid-template-columns:280px 1fr; gap:24px; align-items:start; } /* Results-Seite: min-height verhindert Seiten-Sprung beim Filtern */ .results-col{min-height:80vh;overflow-anchor:none;} .filter-panel-sticky{ position:sticky; top:80px; /* unter Header */ max-height:calc(100vh - 100px); overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--rule-strong) transparent; } .filter-panel-sticky::-webkit-scrollbar{width:4px} .filter-panel-sticky::-webkit-scrollbar-thumb{background:var(--rule-strong);border-radius:4px} .filter-panel-box{ background:var(--surface); border:1px solid var(--rule-strong); border-radius:var(--radius); padding:20px; } .filter-panel-title{ font-family:var(--font-serif);font-size:16px;font-weight:600; letter-spacing:-0.01em;margin-bottom:16px;padding-bottom:12px; border-bottom:1px solid var(--rule); font-variation-settings:"opsz" 48,"SOFT" 50; } .fp-section{margin-bottom:20px} .fp-section:last-child{margin-bottom:0} .fp-label{font-size:10px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--txt-soft);margin-bottom:10px} @media(max-width:768px){ .results-split{grid-template-columns:1fr} .filter-panel-sticky{position:static;max-height:none} .results-col{overflow-x:hidden;width:100%} .result-card{box-sizing:border-box;max-width:100%} .rc-dims{width:100%;box-sizing:border-box} } /* ══ CHIP-MODUS ══ */ .chip-grid{ display:flex;flex-wrap:wrap;gap:8px; padding:4px 0; } .result-chip{ display:inline-flex;align-items:center;gap:6px; padding:7px 12px; background:var(--surface); border:1px solid var(--rule-strong); border-radius:20px; cursor:default; transition:all 0.25s cubic-bezier(0.34,1.56,0.64,1); position:relative; overflow:hidden; } a.result-chip{cursor:pointer;} /* Etappe B: im Vergleich markierter Chip (nur Anzeige, Markieren passiert in den Detailkacheln) */ .result-chip.im-vergleich{ border-color:rgba(74,124,89,0.6); background:rgba(74,124,89,0.10); box-shadow:0 0 0 1px rgba(74,124,89,0.3); } .result-chip.im-vergleich .result-chip-name::before{ content:"✓ ";color:var(--accent2);font-weight:700; } .result-chip::before{ content:"";position:absolute;left:0;top:0;bottom:0;width:3px; background:var(--score-color,var(--accent)); border-radius:2px 0 0 2px; } .result-chip-name{ font-family:var(--font-serif);font-size:13px;font-weight:600; color:var(--txt);letter-spacing:-0.01em; font-variation-settings:"opsz" 24,"SOFT" 50; white-space:nowrap; } .result-chip-kt{ font-size:10px;font-weight:600;letter-spacing:0.06em; text-transform:uppercase;color:var(--txt-soft); } .result-chip-score{ font-family:var(--font-serif);font-size:13px;font-weight:600; font-variation-settings:"opsz" 24,"SOFT" 50; margin-left:2px; position:relative;cursor:help; } .result-chip-score::after{ content:attr(title); position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%); background:var(--surface2);border:1px solid var(--rule-strong); color:var(--txt-mid);font-family:var(--font-body);font-size:11px;font-weight:400; padding:6px 10px;border-radius:8px;white-space:nowrap; pointer-events:none;opacity:0;transition:opacity 0.15s; z-index:50;max-width:240px;white-space:normal;text-align:center;line-height:1.4; box-shadow:0 4px 16px rgba(28,43,58,.07); } .result-chip-score:hover::after{opacity:1} .result-chip.filtered-out{ opacity:0;transform:scale(0.7);pointer-events:none; max-width:0;padding:0;margin:0;border:none;overflow:hidden; } @keyframes chipIn{ from{opacity:0;transform:scale(0.8) translateY(6px)} to{opacity:1;transform:scale(1) translateY(0)} } .result-chip{animation:chipIn 0.2s ease-out both} /* Expand-Button */ .expand-btn{ display:inline-flex;align-items:center;gap:8px; padding:11px 24px; background:linear-gradient(135deg,var(--cta-from),var(--cta-to)); color:#ffffff;border:none;border-radius:10px; font-family:var(--font-body);font-size:13px;font-weight:700; cursor:pointer;transition:all 0.2s; box-shadow:0 4px 20px rgba(176,102,58,0.30); } .expand-btn:hover{transform:translateY(-1px);box-shadow:0 6px 28px rgba(176,102,58,0.45)} /* Karten beim Expandieren */ @keyframes cardExpand{ from{opacity:0;transform:translateY(12px) scale(0.97)} to{opacity:1;transform:translateY(0) scale(1)} } .result-card.expanding{animation:cardExpand 0.3s ease-out both} /* Chip-Phase Banner */ .chip-phase-banner{ display:flex;align-items:center;justify-content:space-between; padding:14px 20px; background:var(--surface2); border:1px solid var(--rule-strong); border-radius:var(--radius-sm); margin-bottom:16px; flex-wrap:wrap;gap:12px; } .chip-phase-info{font-size:13px;color:var(--txt-mid)} .chip-phase-info strong{color:var(--txt)} .chip-loading{ display:inline-flex;align-items:center;gap:6px; font-size:11px;color:var(--txt-soft); } .chip-loading-dot{ width:6px;height:6px;border-radius:50%;background:var(--accent); animation:pulse 1s ease-in-out infinite; } .chip-loading-dot:nth-child(2){animation-delay:0.15s} .chip-loading-dot:nth-child(3){animation-delay:0.30s} @keyframes pulse{0%,100%{opacity:0.3;transform:scale(0.8)}50%{opacity:1;transform:scale(1)}} /* ══════════════════════════════════════════ KARTE (bestehend, angepasste Farben) ══════════════════════════════════════════ */ .kmap-wrap{margin-bottom:64px} .kmap-head{display:flex;align-items:baseline;gap:12px;margin-bottom:16px} .section-title{ font-family:var(--font-serif);font-size:24px;font-weight:600; letter-spacing:-0.015em;font-variation-settings:"opsz" 48,"SOFT" 50; } .section-sub{font-size:13px;color:var(--txt-soft)} .kmap-container{ position:relative;background:var(--surface); border:1px solid var(--rule-strong);border-radius:var(--radius); padding:20px;box-shadow:var(--shadow-card); } .kmap-svg{width:100%;height:auto;display:block} .kl *{cursor:pointer;transition:opacity 0.12s} .kl:hover *{opacity:0.75} .kmap-tt{ display:none;position:absolute; background:var(--surface2);border:1px solid var(--rule-strong); border-radius:12px;padding:14px 18px; pointer-events:none;white-space:nowrap;z-index:20; box-shadow:0 8px 32px rgba(28,43,58,.07);min-width:190px; } .kmap-tt.visible{display:block} .kmap-tt-pct{font-family:var(--font-serif);font-size:26px;font-weight:600;letter-spacing:-0.02em;line-height:1.1;margin-bottom:4px;font-variation-settings:"opsz" 48,"SOFT" 50} .kmap-tt-name{font-size:14px;font-weight:700;color:var(--txt);margin-bottom:2px} .kmap-tt-meta{font-size:12px;color:var(--txt-soft)} .kmap-tt-note{font-size:11px;color:var(--txt-soft);margin-top:2px} .kmap-legend{display:flex;gap:12px;justify-content:center;margin-top:16px;flex-wrap:wrap} .kmap-legend-item{font-size:11px;font-weight:600;display:inline-flex;align-items:center;gap:5px;color:var(--txt-mid)} .kmap-dot{width:11px;height:11px;border-radius:3px;display:inline-block;flex-shrink:0} /* Mobile Karte → Cards */ @media(max-width:680px){.kmap-wrap{display:none}.kanton-grid{display:grid}} .kanton-grid{display:none;grid-template-columns:1fr;gap:8px;margin-bottom:48px} .kanton-card{ display:flex;align-items:center;justify-content:space-between;gap:12px; padding:14px 18px;background:var(--surface);border:1px solid var(--rule-strong); border-radius:var(--radius-sm);text-decoration:none;transition:border-color 0.15s; } .kanton-card:hover{border-color:var(--accent);text-decoration:none} .kanton-card-left{display:flex;flex-direction:column;gap:2px} .kanton-name{font-size:14px;font-weight:600;color:var(--txt)} .kanton-meta{font-size:11px;color:var(--txt-soft)} .kanton-card-right{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex-shrink:0} .kanton-tax{font-family:var(--font-serif);font-size:18px;font-weight:600;font-variation-settings:"opsz" 24,"SOFT" 50} .kanton-tax.good{color:var(--score-hi)}.kanton-tax.neutral{color:var(--accent)}.kanton-tax.warn{color:var(--score-lo)} .kanton-tax-label{font-size:10px;color:var(--txt-soft);text-align:right} .kanton-arrow{font-size:14px;color:var(--txt-soft)} /* ══════════════════════════════════════════ SEO + CTA + Footer ══════════════════════════════════════════ */ .seo-section{padding:0 0 64px;border-top:1px solid var(--rule)} .seo-section h2{ font-family:var(--font-serif);font-size:20px;font-weight:600; letter-spacing:-0.012em;margin-bottom:10px;margin-top:32px; font-variation-settings:"opsz" 48,"SOFT" 50;color:var(--txt); } .seo-section h2:first-child{margin-top:0} .seo-section p{font-size:14px;color:var(--txt-mid);line-height:1.8;max-width:760px} .seo-section p+p{margin-top:10px} /* FAQ */ .faq-section{margin-bottom:64px;padding-top:48px} .faq-title{ font-family:var(--font-serif);font-size:24px;font-weight:600; letter-spacing:-0.015em;margin-bottom:20px; font-variation-settings:"opsz" 48,"SOFT" 50; } .faq-item{ border:1px solid var(--rule-strong);border-radius:var(--radius-sm); margin-bottom:8px;overflow:hidden; background:var(--surface); transition:border-color 0.15s; } .faq-item:hover{border-color:var(--rule-strong)} /* Der offene Eintrag war kupfern umrandet — auf hellem Grund liest sich das wie eine Warnung. Kupfer bleibt den Kernzahlen und dem einen Haupt-Knopf. */ .faq-item[open]{border-color:var(--rule-strong)} .faq-item summary{ padding:16px 20px;cursor:pointer; font-size:15px;font-weight:600;color:var(--txt); list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px; } .faq-item summary::-webkit-details-marker{display:none} .faq-item summary::after{ content:"＋";font-size:18px;font-weight:300;color:var(--txt-soft); flex-shrink:0;transition:transform 0.2s; } .faq-item[open] summary::after{content:"－"} .faq-item summary:focus{outline:none} .faq-body{ padding:0 20px 18px; font-size:14px;color:var(--txt-mid);line-height:1.8; border-top:1px solid var(--rule); margin-top:0; } .faq-body p{margin-top:12px} .faq-body p:first-child{margin-top:12px} .cta-block{ background:linear-gradient(135deg,var(--bg-card) 0%,var(--bg-elevated) 100%); border:1px solid var(--rule-strong);border-radius:20px; padding:48px 40px;text-align:center;margin-bottom:64px; position:relative;overflow:hidden; } .cta-block::before{ content:"";position:absolute;top:-60px;left:50%;transform:translateX(-50%); width:400px;height:200px; background:radial-gradient(ellipse,rgba(176,102,58,0.10) 0%,transparent 70%); pointer-events:none; } .cta-block h2{ font-family:var(--font-serif);font-size:26px;font-weight:400; letter-spacing:-0.02em;margin-bottom:10px; font-variation-settings:"opsz" 48,"SOFT" 50; } .cta-block p{font-size:14px;color:var(--txt-soft);margin-bottom:24px} .cta-btn{ display:inline-flex;align-items:center;gap:8px;flex-wrap:nowrap; background:linear-gradient(135deg,var(--cta-from),var(--cta-to)); color:#ffffff;font-size:13px;font-weight:700;padding:10px 18px; text-decoration:none;border-radius:10px;transition:all 0.2s; box-shadow:0 4px 20px rgba(176,102,58,0.30);line-height:1.2; line-height:1.2;white-space:nowrap;max-width:calc(100vw - 48px); } .cta-btn:hover{transform:translateY(-1px);box-shadow:0 6px 28px rgba(176,102,58,0.45);text-decoration:none} .btn-arrow{display:inline-block;transition:transform 0.15s} .cta-btn:hover .btn-arrow{transform:translateX(3px)} footer{ border-top:1px solid var(--rule);padding:28px; text-align:center;font-size:12px;color:var(--txt-soft); } footer a{color:var(--txt-soft);margin:0 12px} footer a:hover{color:var(--accent)} @media(max-width:600px){ .stat-row{gap:20px} .finder-wrap{border-radius:16px} .weight-item{grid-template-columns:1fr 48px;gap:8px} .weight-label{grid-column:1/-1} .result-grid{grid-template-columns:1fr} .cta-block{padding:32px 20px} /* Buttons nie abgeschnitten */ button,.btn,.cta-btn,.expand-btn,.search-btn,.mobile-show-results-btn{line-height:1.2;white-space:normal;word-break:break-word} /* CTA Button kompakt + nicht abgeschnitten */ .cta-btn{padding:10px 16px!important;max-width:calc(100vw - 48px)!important;box-sizing:border-box} /* Situation-Ändern Button */ #mobile-back-fixed-btn{white-space:normal;line-height:1.2;text-align:center} } /* ── Sprachabhängige Ausnahmen ──────────────────────────────────────────── Englische und französische Wörter sind länger als deutsche. Diese beiden Breiten standen bisher als eigene Kopie im jeweiligen Stylesheet — das war der Grund, warum die drei Fassungen auseinandergelaufen sind. Jetzt stehen sie als Ausnahme genau hier, sichtbar und an einer Stelle. */ html:lang(en) .rc-dim-label, html:lang(fr) .rc-dim-label{min-width:90px} html:lang(en) .rc-dim-val, html:lang(fr) .rc-dim-val{min-width:56px} /* ── Kantonsauswahl (S104) ──────────────────────────────────────────────── Die 26 Kacheln standen offen in der Eingabemaske. Sie liegen jetzt hinter einem Feld, das sich wie ein Auswahlmenü verhält — die Mehrfachauswahl bleibt aber erhalten, ein echtes