/*! © 2026 Riservati GmbH i. G., Sinzing — Alle Rechte vorbehalten. */
/* ==========================================================================
   Riservati V2 — design system del template "Riservati Marketing Website V2"
   Estratto dall'export dc e reso autonomo: font self-hosted (niente Google
   Fonts, DSGVO), nessuna dipendenza da CDN. Gli override specifici di pagina
   stanno nel blocco {% block extra_css %} del template corrispondente.
   ========================================================================== */

/* --- Font self-hosted ----------------------------------------------------
   Barlow Condensed esiste solo nei tagli 300/600/800/900, gli stessi che il
   template chiedeva a Google Fonts. I titoli usano font-weight:700: senza un
   700 reale il browser risale a 800, ed e' esattamente il peso con cui il
   template e' stato disegnato. Aggiungere un 700 vero cambierebbe i titoli. */
@font-face { font-family: "Unbounded"; src: url("../fonts/Unbounded-VF.102c760594db.woff2") format("woff2"); font-weight: 300 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/BarlowCondensed-300.da6a93a8ab84.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/BarlowCondensed-600.ba4513495282.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/BarlowCondensed-800.b1b7dd5dbcea.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/BarlowCondensed-900.84379775da4a.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }

/* Unico token del design system a cui il CSS delle pagine fa riferimento.
   La scala --space-*/--fs-* completa e' quella delle pagine, piu' sotto:
   NON caricare tokens/spacing.css del DS, usa gli stessi nomi con altri valori. */
:root { --warmgray-500: #80807a; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (max-width: 480px) {
  nav > div { padding-left: 10px !important; padding-right: 10px !important; column-gap: 8px !important; }
  .nav-logo-group { column-gap: 6px !important; }
  .nav-logo-group img { width: 78px !important; height: auto !important; }
}
p, li, td, th, dd, dt, blockquote, figcaption, a { overflow-wrap: anywhere; }
.slot-row > span { min-width: 0; }
@media (max-width: 560px) {
  .slot-row > button { flex: 1 1 100%; width: 100%; }
}
@media (max-width: 480px) {
  [role="dialog"][aria-label="Hauptmenü"] { width: 100vw !important; max-width: 100vw !important; }
}
[role="dialog"][aria-label="Hauptmenü"] > div > * { flex-shrink: 0; }
[role="dialog"][aria-label="Hauptmenü"] > div > div[style*="height:1px"], [role="dialog"][aria-label="Hauptmenü"] > div > div[style*="height: 1px"] { min-height: 1px; }
[id] { scroll-margin-top: 72px; }
body { background: #f1e6db; color: #303b30; font-family: 'Unbounded', sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 3px; background: rgba(48,59,48,0.2); border-radius: 2px; outline: none; cursor: pointer; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #f5b056; cursor: pointer; border: 3px solid #f1e6db; box-shadow: 0 0 0 1px #f5b056; }
input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #f5b056; cursor: pointer; border: 3px solid #f1e6db; }
@keyframes heroIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes chatBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes chatBreathIdle { 0%, 86%, 100% { transform: scale(1); } 93% { transform: scale(1.04); } }
@keyframes chatPulse { 0% { transform: scale(1); opacity: 0.5; } 70% { transform: scale(1.5); opacity: 0; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes chatBubbleIn { from { opacity: 0; transform: translateY(8px) scale(0.94); } to { opacity: 1; transform: translateY(0) scale(1); } }
.chat-dock { transition: opacity 0.35s ease; }
/* Desktop: Puls/Glow läuft dauerhaft, unabhängig vom Tooltip-State (JS-Trigger nur Mobile) */ @media (min-width: 1024px) { .chat-btn-glow { animation: chatPulse 2.8s cubic-bezier(0.4,0,0.6,1) infinite !important; } .chat-btn-face { animation: chatBreath 2.6s ease-in-out infinite !important; } .chat-btn-icon { opacity: 1 !important; animation: none !important; } }
.chat-dock.is-hidden { opacity: 0; pointer-events: none; }
::selection { background-color: #f5b056; color: #303b30; }
::-moz-selection { background-color: #f5b056; color: #303b30; }
.btn-sweep { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease !important; }
.btn-sweep > span { transition: color 0.2s ease; }
.nav-links > a { position: relative; }
.nav-links > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 1px; background: rgba(241,230,219,0.38); transform: scaleX(0); transform-origin: left center; transition: transform 0.2s ease; pointer-events: none; }
.nav-links > a:hover::after, .nav-links > a[aria-current]::after { transform: scaleX(1); }
nav[data-scrolled="1"] .nav-links > a::after { background: rgba(48,59,48,0.22); }
@media (prefers-reduced-motion: reduce) {
  .nav-links > a::after { transition: none !important; }
}
.btn-sweep-a:hover { background-color: #e09c14 !important; }
.btn-sweep-b:hover { border-color: #ffffff !important; }
.btn-sweep-c:hover { border-color: #303b30 !important; }
.btn-sweep-d:hover { background-color: #455245 !important; }
@media (prefers-reduced-motion: reduce) {
  .btn-sweep, .btn-sweep > span { transition: none !important; }
  .chat-dock span, .chat-dock a { animation: none !important; }
}
@media (max-width: 1023px) {
  .trust-item span { white-space: normal !important; text-align: center; }
  .nav-links { display: none !important; }
  .nav-utility { display: none !important; }
  .nav-burger { display: inline-flex !important; }
  .chat-btn { width: 56px !important; height: 56px !important; }
  .hero-lockup { padding-bottom: 88px !important; }
  .chat-btn img { width: 26px !important; height: 26px !important; }
  .chat-btn-icon { opacity: 1 !important; animation: none !important; }
  .chat-bubble-row { padding: 6px !important; }
  .chat-dock { right: 16px !important; bottom: 16px !important; max-width: calc(100vw - 32px); }
  .chat-dock p { white-space: normal !important; }
  .hero-badge { display: none !important; }
  .nav-logo-group { min-width: 0 !important; gap: 10px !important; }
  .nav-logo-group img { height: 20px !important; max-width: 100%; }
  .nav-cta-btn { padding: 11px 14px !important; }
}
@media (min-width: 481px) and (max-width: 1023px) {
  .addon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 900px) {
  .tile-row { flex-wrap: wrap !important; }
  .tile-col { flex: none !important; width: calc((100% - var(--space-component-gap)) / 2) !important; }
  .founder-row { max-width: none !important; }
  .founder-row > * { min-width: 0 !important; }
  .eyebrow-tight { letter-spacing: 0.14em !important; overflow-wrap: anywhere; }
  .founder-photo { flex: 0 0 38% !important; }
  .footer-cols { flex-direction: column !important; gap: var(--space-28) !important; margin-bottom: var(--space-28) !important; }
  .footer-brand { flex: none !important; max-width: none !important; text-align: center; }
  .footer-brand img { margin-left: auto !important; margin-right: auto !important; }
  .footer-col-hide { display: none !important; }
  .footer-col-legal > h2 { display: none !important; }
  .footer-navs { border-top: 1px solid rgba(241,230,219,0.08); padding-top: var(--space-28); }
  .footer-legal-links { flex-direction: row !important; flex-wrap: wrap; justify-content: center; gap: var(--space-12) !important; }
  .footer-legal-links a:not(:last-child)::after { content: "·"; margin-left: var(--space-12); color: rgba(241,230,219,0.3); }
  .calc-compare { flex-direction: column !important; }
  .calc-blocks { flex-direction: column !important; }
  .migration-inner { flex-direction: column !important; align-items: flex-start !important; gap: 28px !important; }
  .migration-cta { align-self: flex-start !important; width: fit-content !important; }
  .migration-cta > a { display: inline-block !important; width: auto !important; text-align: center; }
  .calc-compare-tl { flex-direction: column !important; }
  .calc-compare-tl > .calc-zone-right { flex: none !important; width: 100% !important; }
}
@media (max-width: 820px) {
  .trust-grid { flex-wrap: wrap !important; }
  .trust-item { flex: none !important; width: 50% !important; border-right: none !important; border-bottom: 1px solid #e3e0db !important; }
  .trust-grid .trust-item:last-child:nth-child(odd) { width: 100% !important; }
}
@media (min-width: 481px) and (max-width: 820px) {
  .trust-item:nth-last-child(-n+2) { border-bottom: none !important; }
}
@media (min-width: 561px) {
  .mod-flow { display: grid !important; grid-template-columns: 0.9fr 1.1fr; column-gap: var(--space-row-gap) !important; grid-template-rows: repeat(6, min-content) 1fr !important; align-content: start; align-items: start; }
  .mod-flow > .mod-item { grid-column: 1; }
  .mod-flow > .mod-panel { grid-column: 2; grid-row: 1 / span 7; align-self: start; position: sticky; top: 96px; }
}
@media (max-width: 560px) {
  .cmp-grid { grid-template-columns: 1fr !important; }
  .plan-grid { grid-template-columns: 1fr !important; }
  .addon-grid { grid-template-columns: 1fr !important; }
  .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .addon-cta { display: block !important; width: 100%; }
  .test-grid { grid-template-columns: 1fr !important; }
  .flow-step { max-width: 320px; }
  .cmp-grid > * { grid-column: 1 !important; grid-row: auto !important; }
  .quote-mini { gap: var(--space-20) !important; }
  .hero-photo { background-image: url("../img/v2/hero-wirt-960w.0f2007d907f0.webp") !important; background-size: auto 66% !important; background-position: 50% 0 !important; -webkit-mask-image: none; mask-image: none; }
  .hero-photo-base { background: var(--green-600); }
  .hero-overlay { opacity: 0; }
  .founder-row { flex-direction: column !important; }
  .founder-photo { order: -1 !important; flex: none !important; width: 100% !important; max-width: 460px !important; margin: 0 auto; }
}
@media (max-width: 640px) {
  .btn-row { flex-direction: column !important; grid-auto-flow: row !important; grid-auto-columns: auto !important; align-items: stretch !important; align-self: center !important; width: fit-content !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; }
  .btn-row > a { width: auto !important; text-align: center; }
}
@media (max-width: 500px) {
  .btn-row { flex-direction: column !important; grid-auto-flow: row !important; grid-auto-columns: auto !important; align-items: stretch !important; align-self: center !important; width: fit-content !important; margin-left: auto !important; margin-right: auto !important; }
  .btn-row > a { width: auto !important; text-align: center; }
}
.trial-grid { display: grid; grid-template-columns: 0.72fr 1fr; gap: var(--space-row-gap); align-items: start; max-width: 1440px; margin: 0 auto; }
@media (max-width: 1023px) {
  .trial-grid { grid-template-columns: 1fr !important; }
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
.form-full { grid-column: 1 / -1; }
@media (max-width: 560px) {
  .form-grid { grid-template-columns: 1fr !important; }
}
.cbx-input { position: absolute; opacity: 0; width: 20px; height: 20px; margin: 0; cursor: pointer; }
.cbx-box { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; background: #ffffff; border: 1px solid rgb(227, 224, 219); border-radius: 0; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease, border-color 0.2s ease; }
.cbx-box > svg { opacity: 0; transition: opacity 0.15s ease; }
.cbx-input:checked + .cbx-box { background: #e09c14; border-color: #e09c14; }
.cbx-input:checked + .cbx-box > svg { opacity: 1; }
.cbx-input:focus-visible + .cbx-box { box-shadow: 0 0 0 3px rgba(224,156,20,0.35); }
.trial-input::placeholder { color: rgba(48,59,48,0.38); }
/* Erano bottoni da 15x15 px: a 390 px un dito li manca quasi sempre, e sono
   l'unico posto dove e' scritto perche' serve il telefono e che requisiti ha la
   password. Ora l'area tattile e' 44x44 senza spostare l'icona (il margine
   negativo assorbe il padding). Il colore era rgba(48,59,48,.50), che su
   #faf5ef vale 2,70:1 contro il minimo 3:1 per i componenti: portato a .68. */
.info-tip { position: relative; display: inline-flex; align-items: center; justify-content: center; background: none; border: none; padding: 14px; margin: -14px; min-width: 44px; min-height: 44px; cursor: pointer; color: rgba(48,59,48,0.68); }
.info-tip > span { opacity: 0; pointer-events: none; transition: opacity 0.2s ease; }
.info-tip:hover > span, .info-tip:focus > span, .info-tip:focus-visible > span { opacity: 1; }
.trial-input:focus { border-color: #e09c14 !important; outline: none; box-shadow: 0 0 0 3px rgba(224,156,20,0.35); }
.founder-split { display: grid; grid-template-columns: 0.85fr 1fr; gap: var(--space-row-gap); align-items: center; max-width: 1200px; margin: 0 auto; }
@media (max-width: 900px) {
  .founder-split { grid-template-columns: 1fr !important; }
}
.testi-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-component-gap); max-width: 980px; margin: 0 auto; }
@media (max-width: 700px) {
  .testi-pair { grid-template-columns: 1fr !important; }
}
.vid-box { aspect-ratio: 4 / 3; }
@media (max-width: 560px) {
  .vid-box { aspect-ratio: 4 / 3.4; }
}
.book-split { display: grid; grid-template-columns: 0.85fr 1fr; align-items: stretch; max-width: 1440px; margin: 0 auto; }
@media (max-width: 1023px) {
  .book-split { grid-template-columns: 1fr !important; }
}
.book-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-22); }
.book-full { grid-column: 1 / -1; }
@media (max-width: 560px) {
  .book-fields { grid-template-columns: 1fr !important; }
}
.book-input { width: 100%; min-height: 52px; background: #ffffff; border: 1px solid rgb(227, 224, 219); border-radius: 0; padding: var(--space-14) var(--space-16); font-family: 'Unbounded', sans-serif; font-weight: 400; font-size: 13px; letter-spacing: 0.02em; color: #303b30; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.book-input::placeholder { color: rgba(48,59,48,0.38); }
.book-input:focus { border-color: #e09c14 !important; outline: none; box-shadow: 0 0 0 3px rgba(224,156,20,0.35); }
.slot-pill, .slot-time { background: rgba(48,59,48,0.035); border: 1px solid rgb(227, 224, 219); color: #303b30; border-radius: 0; cursor: pointer; flex-shrink: 0; min-height: 52px; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
.slot-pill { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 74px; padding: 10px 14px; }
.slot-time { display: flex; align-items: center; justify-content: center; min-width: 84px; padding: 10px 18px; font-family: 'Unbounded', sans-serif; font-weight: 500; font-size: 12.5px; letter-spacing: 0.04em; }
.slot-pill[data-on="true"], .slot-time[data-on="true"] { background: #303b30; border-color: #303b30; color: #faf5ef; }
.slot-confirm { width: 100%; margin-top: var(--space-32); border: none; border-radius: 0; font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; padding: var(--space-18) var(--space-32); background: rgba(245,176,86,0.38); color: rgba(48,59,48,0.7); cursor: default; transition: background 0.2s ease, color 0.2s ease; }
.slot-confirm[data-ready="true"] { background: #f5b056; color: #303b30; cursor: pointer; }
.slot-modal { position: fixed; z-index: 900; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 40px)); max-height: calc(100vh - 40px); overflow-y: auto; background: #faf5ef; border: 1px solid #e3e0db; border-radius: 4px; box-shadow: 0 2px 24px rgba(48,59,48,0.10); padding: clamp(1.25rem, 3vw, 2rem); }
@media (max-width: 560px) {
  .slot-modal { width: 100vw !important; max-width: none !important; height: 100vh; max-height: none !important; left: 0 !important; top: 0 !important; transform: none !important; border: none !important; border-radius: 0 !important; }
}
.pill-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.pill-row::-webkit-scrollbar { display: none; }
.hero-split { display: flex; }
@media (max-width: 820px) {
  .trust-item:nth-last-child(-n+2) { border-bottom: 1px solid #e3e0db !important; }
  .trust-item:last-child { border-bottom: none !important; }
}
@media (max-width: 1023px) {
  .hero-split { flex-direction: column !important; align-items: stretch !important; gap: var(--space-lg) !important; }
  .hero-split-photo { flex: none !important; width: 100% !important; }
  .hero-split-photo img { height: auto !important; }
}
.tl-grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 0; row-gap: var(--space-44); }
@media (max-width: 560px) {
  .tl-seg { display: none !important; }
  .tl-step { position: relative; padding-bottom: 34px; padding-left: 30px; align-items: flex-start !important; }
  .tl-step:last-child { padding-bottom: 0; }
  .tl-step > div:first-child { position: absolute !important; left: 0; top: 1.5px; width: 9px !important; }
  .tl-step > div:nth-child(2) { align-items: flex-start !important; text-align: left !important; padding: 0 !important; margin: 0 !important; }
  .tl-step > div:nth-child(2) p, .tl-step > div:nth-child(2) span { text-align: left !important; }
  .tl-step::after { content: ''; position: absolute; left: 4px; top: 10.5px; bottom: 0; width: 1px; background: #e3e0db; }
  .tl-step:last-child::after { display: none; }
}
.demo-hero-cta > a { display: inline-block; text-align: center; }
@media (max-width: 560px) {
  .demo-hero-cta { flex-direction: column !important; align-items: stretch !important; width: 100% !important; }
}
@media (max-width: 479px) {
  .why-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 480px) {
  .tile-row { flex-direction: column !important; gap: var(--space-tile-gap-mobile) !important; }
  .tile-col { width: 100% !important; }
  .trust-item { width: 100% !important; border-bottom: 1px solid #e3e0db !important; }
  .trust-item:last-child { border-bottom: none !important; }
}
:root { /* Marken-Farbtoken (Riservati DS) */ --green-600: rgb(48, 59, 48); /* Fluid Typography — max = bisheriger Desktop-Wert (pixelidentisch ab 1440px), preferred = lineare Interpolation 375px → 1440px, Root 16px. */ --fs-hero: clamp(0.6875rem, calc(0.5775rem + 0.4695vw), 1rem); /* 11 → 16px */ --fs-anleser: clamp(2.875rem, calc(2.3908rem + 2.0657vw), 4.25rem); /* 46 → 68px */ --fs-h2-xl: clamp(3rem, calc(2.4718rem + 2.2535vw), 4.5rem); /* 48 → 72px */ --fs-h2: clamp(2.25rem, calc(1.8979rem + 1.5023vw), 3.25rem); /* 36 → 52px */ --fs-h2-sm: clamp(2.125rem, calc(1.7729rem + 1.5023vw), 3.125rem); /* 34 → 50px */ --fs-h2-banner: clamp(1.75rem, calc(1.4859rem + 1.1268vw), 2.5rem); /* 28 → 40px */ --fs-h3: clamp(1.03125rem, calc(0.9542rem + 0.3286vw), 1.25rem); /* 16.5 → 20px */ --fs-eyebrow: clamp(0.625rem, calc(0.581rem + 0.1878vw), 0.75rem); /* 10 → 12px */ --fs-eyebrow-sm: clamp(0.5625rem, calc(0.5295rem + 0.1408vw), 0.65625rem); /* 9 → 10.5px */ --fs-quote: clamp(1.125rem, calc(1.059rem + 0.2817vw), 1.3125rem); /* 18 → 21px */ --fs-quote-sm: clamp(1.0625rem, calc(0.9965rem + 0.2817vw), 1.25rem); /* 17 → 20px */ --fs-nav-item: clamp(0.8125rem, calc(0.7905rem + 0.0939vw), 0.875rem); /* 13 → 14px */ --fs-trustbar: clamp(0.59375rem, calc(0.5717rem + 0.0939vw), 0.65625rem); /* 9.5 → 10.5px */ --fs-calc-result: clamp(3rem, calc(2.4718rem + 2.2535vw), 4.5rem); /* 48 → 72px */ /* Fluid Spacing — gleiche Interpolation 375px → 1440px, max = bisheriger Desktop-Wert. */ --space-section-y: clamp(3.75rem, calc(2.2095rem + 6.5728vw), 8.125rem); /* 60 → 130px */ --space-section-y-md: clamp(3.25rem, calc(1.9737rem + 5.446vw), 6.875rem); /* 52 → 110px */ --space-section-y-sm: clamp(3rem, calc(1.8556rem + 4.8826vw), 6.25rem); /* 48 → 100px */ --space-section-y-xs: clamp(2.625rem, calc(1.5687rem + 4.507vw), 5.625rem); /* 42 → 90px */ --space-section-y-2xs: clamp(2rem, calc(1.2958rem + 3.0047vw), 4rem); /* 32 → 64px */ --space-footer-y: clamp(2.5rem, calc(1.6197rem + 3.7559vw), 5rem); /* 40 → 80px */ --space-hero-y: clamp(3.5rem, calc(2.0916rem + 6.0094vw), 5.5rem); /* 56 → 88px */ --space-hero-y-mobile: clamp(7rem, calc(5.4085rem + 6.7901vw), 9rem); /* 112 → 144px, nur < 900px */ --space-section-x: clamp(1.25rem, 5vw, 6rem); /* 20px → 5% */ --space-row-gap: clamp(2.5rem, calc(1.7958rem + 3.0047vw), 4.5rem); /* 40 → 72px */ --space-lg: clamp(1.75rem, calc(1.3099rem + 1.8779vw), 3rem); /* 28 → 48px */ --space-md: clamp(1.75rem, calc(1.3979rem + 1.5023vw), 2.75rem); /* 28 → 44px */ --space-card-pad-x-lg: clamp(2rem, calc(1.4718rem + 2.2535vw), 3.5rem); /* 32 → 56px */ --space-card-pad-x: clamp(1.5rem, calc(1.1479rem + 1.5023vw), 2.5rem); /* 24 → 40px */ --space-card-pad-x-sm: clamp(1.125rem, calc(0.9049rem + 0.939vw), 1.75rem); /* 18 → 28px */ --space-card-pad-y: clamp(1.375rem, calc(1.0669rem + 1.3146vw), 2.25rem); /* 22 → 36px */ --space-card-pad-y-sm: clamp(1.25rem, calc(0.9859rem + 1.1268vw), 2rem); /* 20 → 32px */ --space-component-gap: clamp(0.75rem, calc(0.5739rem + 0.7512vw), 1.25rem); /* 12 → 20px */ --space-element-gap: clamp(0.6875rem, calc(0.6215rem + 0.2817vw), 0.875rem); /* 11 → 14px */ --offcanvas-header-bg: rgb(74, 89, 74); --space-8: clamp(0.4375rem, calc(0.4155rem + 0.0939vw), 0.5rem); /* 7 → 8px */ --space-14: clamp(0.6875rem, calc(0.6215rem + 0.2817vw), 0.875rem); /* 11 → 14px */ --space-18: clamp(0.875rem, calc(0.7870rem + 0.3756vw), 1.125rem); /* 14 → 18px */ --space-20: clamp(1rem, calc(0.9120rem + 0.3756vw), 1.25rem); /* 16 → 20px */ --space-22: clamp(1.0625rem, calc(0.9525rem + 0.4695vw), 1.375rem); /* 17 → 22px */ --space-26: clamp(1.25rem, calc(1.1180rem + 0.5634vw), 1.625rem); /* 20 → 26px */ --space-28: clamp(1.3125rem, calc(1.1585rem + 0.6573vw), 1.75rem); /* 21 → 28px */ --space-36: clamp(1.625rem, calc(1.4049rem + 0.9390vw), 2.25rem); /* 26 → 36px */ --space-40: clamp(1.75rem, calc(1.4859rem + 1.1268vw), 2.5rem); /* 28 → 40px */ --space-44: clamp(1.875rem, calc(1.5669rem + 1.3146vw), 2.75rem); /* 30 → 44px */ --space-48: clamp(2rem, calc(1.6479rem + 1.5023vw), 3rem); /* 32 → 48px */ --space-52: clamp(2.125rem, calc(1.7289rem + 1.6901vw), 3.25rem); /* 34 → 52px */ --space-56: clamp(2.25rem, calc(1.8099rem + 1.8779vw), 3.5rem); /* 36 → 56px */ --space-64: clamp(2.5rem, calc(1.9718rem + 2.2535vw), 4rem); /* 40 → 64px */ --space-80: clamp(3rem, calc(2.2958rem + 3.0047vw), 5rem); /* 48 → 80px */ --space-2: 2px; --space-3: 3px; --space-4: 4px; --space-5: 5px; --space-6: 6px; --space-10: 10px; --space-11: 11px; --space-12: 12px; --space-14x5: clamp(0.75rem, calc(0.6950rem + 0.2347vw), 0.9063rem); /* 12 → 14.5px */ --space-16: clamp(0.8125rem, calc(0.7465rem + 0.2817vw), 1rem); /* 13 → 16px */ --space-16x5: clamp(0.8125rem, calc(0.7355rem + 0.3286vw), 1.0313rem); /* 13 → 16.5px */ --space-32: clamp(1.4375rem, calc(1.2394rem + 0.8451vw), 2rem); /* 23 → 32px */ --space-tile-gap-mobile: clamp(1.5rem, calc(1.1479rem + 1.5023vw), 2.5rem); /* 24 → 40px, doppelter component-gap */ --space-icon-gap: clamp(0.5625rem, calc(0.4965rem + 0.2817vw), 0.75rem); /* 9 → 12px */ }
@media (max-width: 1024px) {
  .vid-play { width: 58px !important; height: 58px !important; }
  .vid-play svg { width: 20px !important; height: 20px !important; }
}
@media (max-width: 480px) {
  .migration-cta { width: 100%; }
  .migration-cta > a { display: block; width: 100%; text-align: center; white-space: normal !important; padding-left: var(--space-20); padding-right: var(--space-20); }
}
@media (max-width: 1023px) {
  .hero-lockup > div:first-child { margin-bottom: calc(var(--space-lg) / 2) !important; }
}
.trust-mini { display: grid !important; grid-template-columns: repeat(3, max-content); justify-content: center; }
.trust-mini .trust-item { flex: none !important; width: auto !important; border: none !important; }
.trust-mini .trust-item span { white-space: nowrap !important; text-align: left !important; }
.trust-mini .trust-item:not(:nth-child(3n+1)) { border-left: 1px solid #e3e0db !important; }
@media (max-width: 759px) {
  .trust-mini { grid-template-columns: repeat(2, max-content); }
  .trust-mini .trust-item { border: none !important; }
  .trust-mini .trust-item:nth-child(2n) { border-left: 1px solid #e3e0db !important; }
  .trust-mini .trust-item:nth-child(3) { grid-column: 1 / -1; justify-self: center; border: none !important; }
}
@media (max-width: 559px) {
  .trust-mini { grid-template-columns: max-content; }
  .trust-mini .trust-item, .trust-mini .trust-item:nth-child(2n), .trust-mini .trust-item:nth-child(3n+1), .trust-mini .trust-item:nth-child(3) { border: none !important; justify-self: center; }
  .trust-mini .trust-item:nth-child(3) { grid-column: auto; }
}
@media (max-width: 1023px) {
  .test-grid { grid-template-columns: 1fr !important; column-gap: var(--space-component-gap) !important; row-gap: var(--space-44) !important; align-items: start !important; }
  .test-card { padding: 0 !important; }
  .test-stars { font-size: 18px !important; }
  .test-quote { font-size: 15px !important; color: #303b30 !important; line-height: 1.85 !important; margin-bottom: var(--space-28) !important; }
  .test-name { font-size: 12px !important; color: #303b30 !important; }
  .test-biz { color: rgba(48,59,48,0.5) !important; }
  .test-feat { order: -1; }
}
.mod-panel { padding: 0; }
@media (max-width: 480px) {
  .mod-panel { padding: 24px 0px; }
}
@media (max-width: 820px) {
  .gt-trust, .gt-trust ~ * { order: 1; }
  .gt-trust ~ #formular { order: 0; }
  .gt-trust { border-bottom: none !important; border-top: 1px solid #e3e0db !important; }
}
.legal-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.legal-table { min-width: 520px; }

/* --- Stati :hover (dal runtime dc, ora classi stabili) ------------------- */
.rv-h1:hover { background: rgb(241, 230, 219) !important; }
.rv-h2:hover { background: rgba(250, 245, 239, 0.16) !important; }
.rv-h3:hover { color: rgb(245, 176, 86) !important; }
.rv-h4:hover { background: rgba(241, 230, 219, 0.08) !important; border-color: rgba(241, 230, 219, 0.75) !important; }
.rv-h5:hover { opacity: 1 !important; background: rgba(48, 59, 48, 0.07) !important; }
.rv-h6:hover { border-color: rgb(48, 59, 48) !important; }
.rv-h7:hover { background: rgb(61, 75, 61) !important; }
.rv-h8:hover { background: rgba(48, 59, 48, 0.05) !important; }

/* --- Aggiunte del tema (non presenti nell'export dc) --------------------- */

/* Salto al contenuto: invisibile finche' non riceve il focus da tastiera. */
.rv-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  font-family: 'Unbounded', sans-serif; font-weight: 600; font-size: 12px;
  letter-spacing: 0.09em; text-transform: uppercase;
  background: #f5b056; color: #303b30; padding: 14px 22px;
}
.rv-skip-link:focus { left: 8px; top: 8px; }

/* Focus visibile su tutti i controlli: l'export dc non lo prevedeva. */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid #303b30;
  outline-offset: 2px;
  /* secondo anello chiaro: regge anche sul verde scuro della nav e del footer */
  box-shadow: 0 0 0 4px rgba(250, 245, 239, 0.9);
}
[data-rv-nav] a:focus-visible, [data-rv-nav] button:focus-visible,
[data-rv-panel] a:focus-visible, [data-rv-panel] button:focus-visible,
footer a:focus-visible, footer button:focus-visible {
  outline-color: #faf5ef;
  box-shadow: 0 0 0 4px rgba(48, 59, 48, 0.9);
}

/* La barra della chat sparisce quando si arriva al footer. */
.chat-dock.is-hidden { opacity: 0; pointer-events: none; }

/* I moduli prodotto sono cliccabili: il cursore lo deve dire. */
.mod-item { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Lo slider del calcolatore era alto 3px: sotto il minimo tattile. La barra
   resta sottile, ma la zona sensibile arriva a 24px. */
input[type=range] {
  height: 24px;
  background: transparent;
}
input[type=range]::-webkit-slider-runnable-track {
  height: 3px; background: rgba(48, 59, 48, 0.2); border-radius: 2px;
}
input[type=range]::-moz-range-track {
  height: 3px; background: rgba(48, 59, 48, 0.2); border-radius: 2px;
}
input[type=range]::-webkit-slider-thumb { margin-top: -9.5px; }

/* Testo lungo delle pagine ricostruite su pages/_v2_page.html: stessa scala
   della pagina Impressum senza doverla ripetere su ogni tag. */
.rv-prose h2 {
  font-family: "Barlow Condensed", sans-serif; font-weight: 700;
  font-size: var(--fs-h3); text-transform: uppercase; color: #303b30;
  line-height: 1.15; letter-spacing: 0.03em; margin: 0 0 var(--space-18);
}
.rv-prose h3 {
  font-family: 'Unbounded', sans-serif; font-weight: 600; font-size: 14px;
  letter-spacing: 0.04em; color: #303b30; margin: 0 0 var(--space-8);
}
.rv-prose p, .rv-prose li {
  font-family: 'Unbounded', sans-serif; font-weight: 400; font-size: 14px;
  color: rgba(48, 59, 48, 0.72); line-height: 1.85; letter-spacing: 0.03em;
  margin: 0; text-wrap: pretty;
}
.rv-prose strong { font-weight: 500; color: #303b30; }
.rv-prose a { color: #8a5f00; text-decoration: underline; }
.rv-prose ul, .rv-prose ol { display: flex; flex-direction: column; gap: var(--space-8); padding-left: 1.2em; }
.rv-prose li { list-style: disc; }
.rv-prose > div { display: flex; flex-direction: column; gap: var(--space-14); }

/* Pulsanti delle pagine di testo (stessi dei CTA del template). */
.rv-btn {
  display: inline-block; font-family: 'Unbounded', sans-serif; font-weight: 700;
  font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase;
  background: #f5b056; color: #303b30; padding: var(--space-14) var(--space-36);
  transition: background 0.2s;
}
.rv-btn:hover { background: #e09c14; }
.rv-btn-ghost {
  background: transparent; color: #303b30;
  border: 1.5px solid rgba(48, 59, 48, 0.4);
}
.rv-btn-ghost:hover { background: rgba(48, 59, 48, 0.05); }
.rv-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--space-48); }

/* Campi dei form nelle pagine ricostruite (password dimenticata ecc.). */
.rv-field { display: flex; flex-direction: column; gap: 11px; }
.rv-field label {
  font-family: 'Unbounded', sans-serif; font-weight: 400; font-size: 13px;
  letter-spacing: 0.03em; color: #303b30;
}
.rv-input {
  width: 100%; min-height: 52px; background: #ffffff;
  border: 1px solid #e3e0db; border-radius: 0;
  padding: var(--space-14) var(--space-16);
  font-family: 'Unbounded', sans-serif; font-weight: 400; font-size: 13px;
  letter-spacing: 0.02em; color: #303b30;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.rv-input:focus { border-color: #e09c14; box-shadow: 0 0 0 3px rgba(224, 156, 20, 0.18); outline: none; }

/* Tabelle nel testo lungo: senza queste regole le celle si stringevano e le
   parole si spezzavano a metà ("Zeitpu nkt"). */
.rv-prose table {
  width: 100%; border-collapse: collapse; margin: var(--space-8) 0 0;
  font-family: 'Unbounded', sans-serif; font-size: 13px; line-height: 1.7;
}
.rv-prose th, .rv-prose td {
  text-align: left; vertical-align: top; padding: var(--space-12) var(--space-14);
  border-bottom: 1px solid #e3e0db; hyphens: none; overflow-wrap: normal;
}
.rv-prose th {
  font-weight: 600; color: #303b30; white-space: nowrap;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  border-bottom: 1px solid rgba(48, 59, 48, 0.35);
}
.rv-prose td { color: rgba(48, 59, 48, 0.72); }
.rv-prose td:first-child { white-space: nowrap; width: 1%; padding-right: var(--space-22); }
.rv-prose tr:last-child th, .rv-prose tr:last-child td { border-bottom: none; }
@media (max-width: 560px) {
  /* Su schermo stretto due colonne non ci stanno: diventano righe impilate. */
  .rv-prose thead { position: absolute; left: -9999px; }
  .rv-prose tr { display: block; padding: var(--space-12) 0; border-bottom: 1px solid #e3e0db; }
  .rv-prose td { display: block; padding: 0; border: none; }
  .rv-prose td:first-child { width: auto; margin-bottom: 4px; }
}

/* --- Scelta pacchetto e moduli nel form di registrazione ------------------
   Il template consegnato non prevedeva questo passaggio: qui è ricostruito
   con gli stessi materiali del resto (spigoli vivi, crema, ambra sull'attivo). */
.reg-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .reg-plans { grid-template-columns: 1fr; } }

.reg-plan { display: block; cursor: pointer; }
.reg-plan-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.reg-plan-card {
  position: relative; display: flex; flex-direction: column; gap: 8px;
  min-height: 128px; height: 100%; padding: var(--space-16);
  background: #ffffff; border: 1px solid #e3e0db; border-left: 3px solid #e3e0db;
  transition: border-color 0.2s, background 0.2s;
}
.reg-plan:hover .reg-plan-card { border-color: rgba(48, 59, 48, 0.4); }
.reg-plan-input:checked + .reg-plan-card {
  border-color: #e09c14; border-left-color: #e09c14; background: #fdf6e8;
}
/* il focus da tastiera deve vedersi sulla scheda, non sull'input nascosto */
.reg-plan-input:focus-visible + .reg-plan-card {
  outline: 2px solid #303b30; outline-offset: 2px;
}
.reg-plan-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.reg-plan-name {
  font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 22px;
  text-transform: uppercase; letter-spacing: 0.03em; color: #303b30; line-height: 1;
}
.reg-plan-price {
  font-family: 'Unbounded', sans-serif; font-weight: 600; font-size: 15px;
  color: #303b30; white-space: nowrap;
}
.reg-plan-per { font-weight: 300; font-size: 11px; color: rgba(48, 59, 48, 0.73); }
.reg-plan-text {
  font-family: 'Unbounded', sans-serif; font-weight: 300; font-size: 12px;
  line-height: 1.65; letter-spacing: 0.02em; color: rgba(48, 59, 48, 0.73);
}
.reg-plan-badge {
  position: absolute; top: -1px; right: -1px;
  background: #f5b056; color: #303b30;
  font-family: 'Unbounded', sans-serif; font-weight: 600; font-size: 9px;
  letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 9px;
}
/* la scelta non è affidata al solo colore: compare anche il segno di spunta */
.reg-plan-mark {
  position: absolute; right: var(--space-16); bottom: var(--space-14);
  width: 22px; height: 22px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-size: 12px;
  background: #e09c14; color: #ffffff; opacity: 0; transform: scale(0.7);
  transition: opacity 0.18s, transform 0.18s;
}
.reg-plan-input:checked + .reg-plan-card .reg-plan-mark { opacity: 1; transform: scale(1); }

.reg-addons { display: flex; flex-direction: column; gap: 8px; }
.reg-addon {
  display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
  min-height: 56px; padding: var(--space-12) var(--space-14);
  background: #ffffff; border: 1px solid #e3e0db;
  transition: border-color 0.2s, background 0.2s;
}
.reg-addon:hover { border-color: rgba(48, 59, 48, 0.4); }
.reg-addon:has(.cbx-input:checked) { border-color: #e09c14; background: #fdf6e8; }
.reg-addon:has(.cbx-input:focus-visible) { outline: 2px solid #303b30; outline-offset: 2px; }
.reg-addon .cbx-box { margin-top: 3px; }
.reg-addon-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.reg-addon-name {
  font-family: 'Unbounded', sans-serif; font-weight: 500; font-size: 13px;
  letter-spacing: 0.02em; color: #303b30;
}
.reg-addon-desc {
  font-family: 'Unbounded', sans-serif; font-weight: 300; font-size: 11.5px;
  line-height: 1.6; letter-spacing: 0.02em; color: rgba(48, 59, 48, 0.73);
}
.reg-addon-price {
  font-family: 'Unbounded', sans-serif; font-weight: 600; font-size: 13px;
  color: #303b30; white-space: nowrap; margin-top: 2px;
}

.reg-total {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-top: var(--space-8);
  padding: var(--space-14) var(--space-16); background: #303b30;
}
.reg-total-label {
  font-family: 'Unbounded', sans-serif; font-weight: 400; font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase; color: rgba(241, 230, 219, 0.8);
}
.reg-total-sum {
  font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 28px;
  color: #f5b056; line-height: 1;
}
.reg-total-per {
  font-family: 'Unbounded', sans-serif; font-weight: 300; font-size: 11px;
  color: rgba(241, 230, 219, 0.8);
}

/* Il pulsante tondo dei cookie in basso a sinistra: sul V2 non ci sta.
   Le preferenze restano modificabili dal link "Cookies einstellen" nel piede
   di pagina, che ora apre davvero la finestra (vedi initCookieLink in
   riservati-v2.js). Il pulsante resta nel DOM perche' e' quello che il link
   preme: nascosto, non rimosso. */
#cc-reopen { display: none !important; }

/* Il fumetto "Wie kann ich dir helfen?" e' un invito, non un comando, ma era
   un elemento fisso di 364x72 px con pointer-events auto: su /registrieren/
   copriva il 38% destro del pulsante che porta a Stripe, e cliccando li' si
   apriva la chat invece di iscriversi. Succedeva anche sulla card PREMIUM e
   sul "MIGRATION STARTEN" della fascia arancione. Ora i click gli passano
   attraverso e arrivano al pulsante sotto; restano cliccabili solo il tondo
   della chat e la x che chiude il fumetto. */
.chat-dock { pointer-events: none; }
/* !important perche' il fumetto porta pointer-events:auto scritto in linea
   dall'export, e lo stile in linea batte il foglio. */
.chat-dock [data-rv-chat-bubble],
.chat-dock [data-rv-chat-bubble] * { pointer-events: none !important; }
.chat-dock [data-rv-chat-toggle],
.chat-dock [data-rv-chat-toggle] *,
.chat-dock [data-rv-chat-bubble-dismiss],
.chat-dock [data-rv-chat-bubble-dismiss] * { pointer-events: auto !important; }

/* Tabella di confronto Riservati/Portali: a 390 px scorre (560 px di contenuto
   in 348), e scorrendo sparivano le etichette di riga — restavano spunte e
   croci senza sapere a cosa si riferissero. La colonna delle etichette ora
   resta ferma. E l'ombra sul bordo dice che c'e' altro da vedere: prima non
   c'era nessun indizio che la tabella si potesse scorrere. */
@media (max-width: 900px) {
  .cmp-scroll table th[scope="row"],
  .cmp-scroll thead tr > td:first-child {
    position: sticky; left: 0; z-index: 1;
    background: #ffffff;
    box-shadow: 1px 0 0 #e3e0db;
  }
  .cmp-scroll {
    /* !important: il contenitore porta "background" in linea dall'export, e
       la forma abbreviata azzera background-image. */
    background-image:
      linear-gradient(to right, #ffffff 30%, rgba(255,255,255,0)),
      linear-gradient(to left, #ffffff 30%, rgba(255,255,255,0)),
      radial-gradient(farthest-side at 0 50%, rgba(48,59,48,.18), rgba(48,59,48,0)),
      radial-gradient(farthest-side at 100% 50%, rgba(48,59,48,.18), rgba(48,59,48,0)) !important;
    background-position: 0 0, 100% 0, 0 0, 100% 0 !important;
    background-repeat: no-repeat !important;
    background-size: 28px 100%, 28px 100%, 12px 100%, 12px 100% !important;
    background-attachment: local, local, scroll, scroll !important;
  }
}

/* Spazio per il banner cookie: senza, i due CTA dell'eroe finivano sotto di lui
   e il click non arrivava (misurato: elementFromPoint restituiva il banner, a
   1440 e a 360 px). L'altezza la misura il JS — il banner cambia con la
   larghezza e con la lingua. Il tondo della chat sale insieme. */
.has-cc-banner .rv-hero { padding-bottom: var(--cc-h, 0px); }
/* !important: il dock porta "bottom" scritto in linea dall'export. */
.has-cc-banner .chat-dock { bottom: calc(28px + var(--cc-h, 0px)) !important; }
@media (max-width: 640px) {
  .has-cc-banner .chat-dock { bottom: calc(16px + var(--cc-h, 0px)) !important; }
}

/* Anche la finestra della chat: aprendola col banner ancora aperto, a 360 px
   il pulsante "Senden" finiva sotto il banner. Sale insieme al dock, e si
   accorcia per non uscire dallo schermo dalla parte opposta. */
.has-cc-banner [data-rv-chat-window] {
  bottom: calc(116px + var(--cc-h, 0px)) !important;
  max-height: calc(100vh - var(--cc-h, 0px) - 150px) !important;
}

/* Le file di date e orari scorrevano in orizzontale con la barra nascosta
   (scrollbar-width: none): a 360 px "MO 10.08.", "DI 11.08." e "15:00"
   restavano fuori senza nessun indizio che ci fossero. Sono cinque date e
   quattro orari: su schermo stretto vanno a capo, invece di sparire. */
@media (max-width: 700px) {
  .pill-row { flex-wrap: wrap; overflow-x: visible; }
}

/* Sotto i 560 px la tabella di confronto non ci sta (560 px di contenuto in
   320): nella posizione iniziale mancava la colonna "Klassische Portale",
   scorrendo mancavano le etichette. Su schermo stretto smette di essere una
   tabella e diventa un elenco: etichetta, poi i due valori con il loro nome.
   Le intestazioni restano nel DOM per chi legge con la tastiera o con un
   lettore di schermo, solo spostate fuori vista. */
@media (max-width: 560px) {
  .cmp-scroll { overflow-x: visible !important; background-image: none !important; }
  .cmp-scroll table { min-width: 0 !important; width: 100% !important; }
  .cmp-scroll thead { position: absolute; left: -9999px; }
  .cmp-scroll tbody tr { display: block; border-bottom: 1px solid #e3e0db; padding: var(--space-14) 0; }
  .cmp-scroll tbody tr:last-child { border-bottom: none; }
  .cmp-scroll tbody th[scope="row"] {
    display: block; position: static !important; box-shadow: none !important;
    padding: 0 var(--space-16) 8px !important; border: none !important;
  }
  .cmp-scroll tbody td {
    display: flex !important; align-items: baseline; justify-content: space-between;
    gap: 12px; text-align: right !important; border: none !important;
    padding: 5px var(--space-16) !important;
  }
  .cmp-scroll tbody td::before {
    content: "Riservati";
    font-family: Unbounded, sans-serif; font-weight: 500; font-size: 10px;
    letter-spacing: 0.09em; text-transform: uppercase; color: rgba(48, 59, 48, 0.7);
    flex: 0 0 auto; text-align: left;
  }
  .cmp-scroll tbody td:last-child::before { content: "Klassische Portale"; }
}

/* Tabelle delle pagine legali: a 360 px sono 520 px in un contenitore da 320 e
   scorrono in orizzontale, quindi "ZWECK" e "SPEICHERDAUER" restavano fuori.
   Sotto i 560 px diventano righe impilate, con l'intestazione ripetuta davanti
   a ogni valore: e' testo obbligatorio per legge, deve potersi leggere. */
@media (max-width: 560px) {
  .legal-table-scroll { overflow-x: visible !important; }
  .legal-table { min-width: 0 !important; }
  .legal-table thead { position: absolute; left: -9999px; }
  .legal-table tbody tr { display: block; border-bottom: 1px solid #e3e0db; padding: var(--space-12) 0; }
  .legal-table tbody tr:last-child { border-bottom: none; }
  .legal-table tbody td, .legal-table tbody th {
    display: block; width: auto !important; white-space: normal !important;
    border: none !important; padding: 2px var(--space-14) !important;
  }
  .legal-table tbody td[data-th]::before, .legal-table tbody th[data-th]::before {
    content: attr(data-th) ": ";
    font-weight: 500; color: rgb(48, 59, 48);
  }
  .legal-table tbody td:first-child, .legal-table tbody th:first-child {
    font-weight: 500; color: rgb(48, 59, 48); padding-top: var(--space-8) !important;
  }
}

/* Il banner dei cookie arrivava dallo strato condiviso con i suoi colori:
   fondo ardesia #1f2937, pulsante verde #047857, angoli arrotondati, Arial.
   Accanto a un sito verde scuro, ambra, Unbounded e spigolo vivo sembrava di
   un altro sito — ed e' la prima cosa che si vede. Qui prende i colori di casa.
   Le coppie sono quelle gia' usate altrove: crema su verde scuro, verde scuro
   su ambra. Vale solo per riservati: questo foglio lo carica solo lui. */
#cc-banner, #cc-modal { font-family: Unbounded, sans-serif !important; }
#cc-banner { background: #303b30 !important; color: #f1e6db !important; }
#cc-banner .cc-banner-text p, #cc-banner .cc-banner-text strong { color: #f1e6db !important; }
#cc-banner .cc-link, #cc-modal .cc-link { color: #f5b056 !important; }
#cc-banner .cc-btn, #cc-modal .cc-btn {
  border-radius: 0 !important;
  font-family: Unbounded, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-size: 11px !important;
  min-height: 44px;
}
#cc-banner .cc-btn-primary, #cc-modal .cc-btn-primary {
  background: #f5b056 !important; color: #303b30 !important;
}
#cc-banner .cc-btn-primary:hover, #cc-modal .cc-btn-primary:hover { background: #e09c14 !important; }
#cc-banner .cc-btn-secondary {
  background: transparent !important; color: #f1e6db !important;
  border: 1.5px solid rgba(241, 230, 219, 0.5) !important;
}
#cc-banner .cc-btn-secondary:hover { border-color: #f1e6db !important; }
#cc-banner .cc-btn:focus-visible, #cc-modal .cc-btn:focus-visible {
  outline: 2px solid #f5b056 !important; outline-offset: 2px;
}

/* I link del piede erano alti 14 px: su telefono un dito li manca. L'area
   tattile sale a 44 px senza cambiare la spaziatura visibile. */
@media (max-width: 900px) {
  footer a, footer .rsv-footer-linkbtn {
    display: inline-flex; align-items: center; min-height: 44px;
  }
}

/* L'H1 della home era 16 px in peso 400 — cioe' esattamente il corpo del testo —
   sotto un marchio alto 533 px. Chi deve capire in cinque secondi vedeva un
   logo gigante e la frase che spiega il prodotto in corpo minuto. Il marchio
   resta (e' la scelta del cliente), ma il titolo torna a pesare come un titolo:
   piu' grande del testo corrente e con un peso in piu'. Le parole non le tocco:
   sono del cliente. */
.hero-subline {
  font-size: clamp(17px, 1.5vw, 26px) !important;
  font-weight: 500 !important;
  letter-spacing: 0.16em !important;
  line-height: 1.45 !important;
}

/* La finestra delle impostazioni cookie era rimasta com'era: riquadro bianco
   con angoli tondi, etichette blu, pulsanti grigi, caratteri di sistema. Il
   banner l'avevo gia' portato ai colori di casa, questa no — e si apre proprio
   da li'. Stessi token del sito: crema, verde scuro, ambra, spigolo vivo. */
#cc-modal .cc-modal-content {
  background: #faf5ef !important;
  color: #303b30 !important;
  border-radius: 0 !important;
  border: 1px solid #e3e0db;
  box-shadow: 0 24px 64px rgba(48, 59, 48, 0.28) !important;
}
#cc-modal .cc-modal-header { border-bottom: 1px solid #e3e0db !important; }
#cc-modal .cc-modal-header h2, #cc-modal .cc-modal-header > * {
  font-family: "Barlow Condensed", sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #303b30 !important;
}
#cc-modal .cc-modal-intro,
#cc-modal .cc-category-desc { color: rgba(48, 59, 48, 0.78) !important; }
#cc-modal .cc-category-title { color: #303b30 !important; font-weight: 600 !important; }
#cc-modal .cc-category { border-color: #e3e0db !important; }
#cc-modal .cc-modal-footer { border-top: 1px solid #e3e0db !important; }
#cc-modal .cc-modal-close { color: rgba(48, 59, 48, 0.7) !important; }
#cc-modal .cc-modal-close:hover { color: #303b30 !important; }

/* Le etichette erano blu e grigie: qui il "sempre attivo" e' verde scuro e
   l'opzionale prende il crema del sito. */
#cc-modal .cc-tag {
  border-radius: 0 !important;
  font-family: Unbounded, sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 9.5px !important;
  background: #efe9e0 !important;
  color: rgba(48, 59, 48, 0.78) !important;
}
#cc-modal .cc-tag-required { background: #303b30 !important; color: #f1e6db !important; }

/* Il secondario era un riempimento grigio: diventa un contorno, come i
   secondari del sito. */
#cc-modal .cc-btn-secondary {
  background: transparent !important;
  color: #303b30 !important;
  border: 1.5px solid rgba(48, 59, 48, 0.7) !important;
}
#cc-modal .cc-btn-secondary:hover { border-color: #303b30 !important; }
#cc-modal .cc-modal-backdrop { background: rgba(48, 59, 48, 0.72) !important; }

/* ── registrazione a passi ─────────────────────────────────────────────────
   Il modulo chiedeva tutto insieme: undici campi, il pacchetto e i moduli in
   una sola schermata. Ora sono tre passi — dati, pacchetto, moduli — con
   l'avanzamento in colonna, cosi' i nomi dei passi si leggono per intero e
   non si accorciano su schermo stretto. */
.reg-steps {
  display: flex; flex-direction: column; gap: 0; list-style: none;
  margin: 0 0 var(--space-32); padding: 0 0 var(--space-20);
  border-bottom: 1px solid #e3e0db;
}
.reg-steps-item {
  display: flex; align-items: center; gap: var(--space-14);
  padding: 7px 0; position: relative;
}
/* la linea che unisce i passi: dice che sono una sequenza, non tre voci sciolte */
.reg-steps-item::before {
  content: ""; position: absolute; left: 13px; top: 33px; bottom: -7px;
  width: 1px; background: #e3e0db;
}
.reg-steps-item:last-child::before { display: none; }
.reg-steps-num {
  flex-shrink: 0; width: 27px; height: 27px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: Unbounded, sans-serif; font-weight: 600; font-size: 11px;
  background: #efe9e0; color: rgba(48, 59, 48, 0.62);
  transition: background .2s ease, color .2s ease; z-index: 1;
}
.reg-steps-label {
  font-family: Unbounded, sans-serif; font-weight: 400; font-size: 12.5px;
  letter-spacing: 0.03em; color: rgba(48, 59, 48, 0.62);
}
/* il passo in corso si distingue per peso e colore, non solo per colore */
.reg-steps-item[aria-current="step"] .reg-steps-num { background: #f5b056; color: #303b30; }
.reg-steps-item[aria-current="step"] .reg-steps-label { color: #303b30; font-weight: 500; }
.reg-steps-item[data-done="1"] .reg-steps-num { background: #303b30; color: #f1e6db; }
.reg-steps-item[data-done="1"] .reg-steps-label { color: rgba(48, 59, 48, 0.84); }
.reg-steps-item[data-done="1"]::before { background: #303b30; }

/* Il passo e' figlio di .form-grid, quindi senza questo diventava UNA cella
   della griglia a due colonne: il modulo si dimezzava (344px invece di 712). */
.reg-step { grid-column: 1 / -1; }
.reg-step[hidden] { display: none !important; }

.reg-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); margin-top: var(--space-8); }
.reg-next, .reg-back {
  font-family: Unbounded, sans-serif; letter-spacing: 0.09em; text-transform: uppercase;
  font-size: 11.5px; cursor: pointer; min-height: 48px; padding: 0 var(--space-32);
  border-radius: 0; transition: background .2s ease, border-color .2s ease;
}
.reg-next { font-weight: 700; background: #f5b056; color: #303b30; border: none; margin-left: auto; }
.reg-next:hover { background: #e09c14; }
.reg-back { font-weight: 500; background: transparent; color: rgba(48, 59, 48, 0.84); border: 1.5px solid rgba(48, 59, 48, 0.45); }
.reg-back:hover { border-color: #303b30; color: #303b30; }
.reg-next:focus-visible, .reg-back:focus-visible { outline: 2px solid #303b30; outline-offset: 2px; }

@media (max-width: 640px) {
  .reg-next, .reg-back { padding: 0 var(--space-20); flex: 1 1 0; }
}

.reg-total-plan {
  display: block; font-family: Unbounded, sans-serif; font-weight: 400;
  font-size: 10.5px; letter-spacing: 0.03em; color: rgba(241, 230, 219, 0.72);
  margin-top: 3px; text-transform: none;
}

/* L'avanzamento resta a schermo mentre si compila: prima stava in cima al
   modulo e appena si scorreva spariva, cioe' proprio quando serve sapere a che
   punto si e'. Sta sotto la barra di navigazione, che e' alta 72px. */
.reg-steps {
  position: sticky; top: 84px; z-index: 5;
  background: #faf5ef;                      /* pieno: il contenuto non deve trasparire sotto */
  margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px;
  padding-top: var(--space-14);
}
.reg-steps-count { display: none; }

@media (max-width: 640px) {
  /* tre righe appiccicate in cima si mangerebbero mezzo schermo: resta il
     passo in corso e il conto "2 / 3" */
  .reg-steps {
    flex-direction: row; align-items: center; gap: var(--space-12);
    padding-top: var(--space-12); padding-bottom: var(--space-12);
    margin-bottom: var(--space-20);
  }
  .reg-steps-item { display: none; padding: 0; }
  .reg-steps-item[aria-current="step"] { display: flex; flex: 1 1 auto; min-width: 0; }
  .reg-steps-item::before { display: none; }
  .reg-steps-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .reg-steps-count {
    /* e' il primo figlio nel markup ma va letto per ultimo */
    display: block; order: 9; margin-left: auto; flex-shrink: 0; list-style: none;
    font-family: Unbounded, sans-serif; font-weight: 500; font-size: 11px;
    letter-spacing: 0.06em; color: rgba(48, 59, 48, 0.62);
  }
}

/* Il fuoco da tastiera porta il campo a schermo: senza questo finirebbe sotto
   l'indicatore appiccicato. */
.reg-step input, .reg-step select, .reg-step textarea,
.reg-step .reg-plan, .reg-step .reg-addon { scroll-margin-top: 260px; }
@media (max-width: 640px) {
  .reg-step input, .reg-step select, .reg-step textarea,
  .reg-step .reg-plan, .reg-step .reg-addon { scroll-margin-top: 160px; }
}