/* wartung.css — Panzer IT: Wartungspakete, Vergleichstabelle, Vertrauens-Block Nur für die Wartung-Seite. Baut auf base.css/components.css/inner.css auf (keine Neudefinition von Tokens). Eigene, kollisionsfreie Klassennamen (.plan*), da .tariff bereits von der Preise-Seite belegt ist. */ /* ========================================================================== Accessibility-Utility (existiert projektweit noch nicht) ========================================================================== */ .visually-hidden{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* ========================================================================== Paket-Grid & -Karten ========================================================================== */ .plan-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:var(--sp-4); margin-top:var(--sp-6); align-items:stretch; } .plan{ position:relative; display:flex; flex-direction:column; } .plan__name{ font-family:var(--font-display); font-size:1.2rem; font-weight:600; } .plan__price{ margin-top:var(--sp-2); font-family:var(--font-display); font-weight:700; font-size:clamp(1.6rem, 1.3rem + 1vw, 2.1rem); color:var(--c-brass); } .plan__price-unit{ font-family:var(--font-body); font-weight:500; font-size:.55em; color:var(--c-muted); margin-left:.15em; } .plan .feature-list{ flex:1; margin-top:var(--sp-3); max-width:none; } .plan__actions{ margin-top:var(--sp-4); } .plan__actions .btn{ width:100%; justify-content:center; } .plan--featured{ border-color:var(--c-copper); box-shadow:0 0 0 1px var(--c-copper); } .plan__badge{ position:absolute; top:-.85rem; left:var(--sp-4); background:var(--c-copper); color:#14110c; font-family:var(--font-display); font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; padding:.35em .9em; border-radius:999px; } .price-note{ margin-top:var(--sp-4); color:var(--c-muted); font-size:.9rem; max-width:60ch; } /* ========================================================================== Vergleichstabelle — eigener Scroll-Container, damit die Tabelle auf schmalen Viewports nie ein horizontales Scrollen des auslöst. ========================================================================== */ .plan-compare{ margin-top:var(--sp-6); overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--c-line); border-radius:var(--radius); /* contain:layout verhindert, dass die intrinsische Breite der (min-width:640px) Tabelle das documentElement.scrollWidth aufbläht und dadurch ein horizontales Scrollen der ganzen Seite auf schmalen Viewports auslöst — die Tabelle scrollt ausschließlich innerhalb dieses Containers. */ contain:layout; } .plan-compare table{ width:100%; min-width:640px; border-collapse:collapse; font-size:.95rem; } .plan-compare caption{ text-align:left; } .plan-compare th, .plan-compare td{ padding:.9em 1.2em; text-align:left; white-space:nowrap; border-bottom:1px solid var(--c-line); } .plan-compare thead th{ font-family:var(--font-display); font-weight:600; color:var(--c-text); background:var(--c-panel); } .plan-compare thead th:first-child{ border-top-left-radius:var(--radius); } .plan-compare thead th:last-child{ border-top-right-radius:var(--radius); } .plan-compare tbody th{ font-family:var(--font-display); font-weight:600; color:var(--c-muted); white-space:normal; } .plan-compare tbody td{ color:var(--c-text); } .plan-compare tbody tr:last-child th, .plan-compare tbody tr:last-child td{ border-bottom:none; } .plan-check{ display:inline-flex; align-items:center; justify-content:center; width:1.6em; height:1.6em; border-radius:50%; font-weight:700; } .plan-check--yes{ background:rgba(62,107,107,.25); color:var(--c-petrol); } .plan-check--no{ background:rgba(167,162,154,.15); color:var(--c-muted); } /* Sanftere Reveal-Distanz für Tabellenzeilen — der Standard-Versatz (34px) wirkt bei schmalen Tabellenzeilen sprunghaft und lässt Zeilen kurzzeitig überlappen; ein kleinerer Versatz bleibt edel und ruhig. */ .plan-compare tbody tr[data-reveal]{ transform:translateY(14px); } .plan-compare tbody tr[data-reveal].is-visible{ transform:none; } /* ========================================================================== Vertrauens-Block ========================================================================== */ .plan-assurance{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:var(--sp-4); margin-top:var(--sp-6); } .plan-assurance__item h3{ font-size:1.05rem; color:var(--c-brass); } .plan-assurance__item p{ color:var(--c-muted); margin-top:.4em; max-width:36ch; } @media (max-width:640px){ .plan-grid{ grid-template-columns:1fr; } .plan-assurance{ grid-template-columns:1fr; } }