/* ============================================================================= Qanto Konfigurator ยท Modernisierung Stufe 1 (reines Reskin) ----------------------------------------------------------------------------- Wird in head.php als LETZTES Stylesheet eingebunden und gewinnt damit die Kaskade gegenueber css/main.css. GRUNDSATZ: - Es wird AUSSCHLIESSLICH die Optik veraendert. - Kein Eingriff in Formulare, Logik, PHP oder die HTML-Struktur. - Die Markenfarbe Bordeaux (#B01032) und alle vorhandenen Textfarben/-groessen aus dem Markup bleiben unangetastet (es wird z. B. nur font-family gesetzt, niemals color oder size global ueberschrieben). ABSCHALTEN: - In head.php die Zeile mit "css/modern.css" auskommentieren -> exakt der alte Zustand ist wieder da. Diese Datei aendert sonst nichts. ============================================================================= */ /* ----------------------------------------------------------------------------- 1) Seiten-Hintergrund / Grundlayout - ersetzt den defekten Aufruf background: url(pics/) aus head.php - dezenter, neutraler Hintergrund, damit die weisse "Card" sauber wirkt - etwas Luft rundherum (gut sichtbar im Standalone-Aufruf) --------------------------------------------------------------------------- */ html { background: #f4f3f1 !important; height: auto !important; } body { background: transparent !important; padding: 28px 12px !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* ----------------------------------------------------------------------------- 2) Einheitliche, moderne Schrift fuer alle Textelemente - heute wird im Markup gemischt Helvetica referenziert, Nunito aber nur fuer h3 wirklich geladen -> hier eine konsistente Familie ueber alles legen - WICHTIG: nur die Schrift-FAMILIE, nicht Groesse (size=) oder Farbe (color=) --------------------------------------------------------------------------- */ body, td, font, input, select, textarea, button, label, p, a, h1, h2, h3 { font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif !important; } /* Grosse Ueberschriften (z. B. "Konfigurator", size=7) kraeftiger und ruhiger. Fliesstext (size 2/3/4) bewusst NICHT veraendert -> Lesbarkeit bleibt. */ font[size="7"] { font-weight: 800 !important; letter-spacing: -0.5px; } font[size="6"] { font-weight: 700 !important; letter-spacing: -0.3px; } font[size="5"] { font-weight: 700 !important; } /* ----------------------------------------------------------------------------- 3) Aeusserer Rahmen -> weiche "Card" statt hartem 1px-Kasten - Zielelement ist exakt die eine Rahmentabelle: - der Attribut-Selektor trifft NUR diese Tabelle (nur sie nutzt #C0C0C0 inline) --------------------------------------------------------------------------- */ table[style*="#C0C0C0"] { background: #ffffff !important; border: 1px solid #ECEAE6 !important; border-radius: 14px !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 10px 34px rgba(0, 0, 0, 0.08) !important; border-collapse: separate !important; /* noetig, damit border-radius greift */ } /* Innenzellen transparent schalten, damit die abgerundete weisse Card sauber durchscheint (alle bgcolor im Markup sind ohnehin #ffffff). Nur background-COLOR setzen -> gesetzte background-IMAGES (z. B. Seite 1) bleiben erhalten. */ table[style*="#C0C0C0"] td { background-color: transparent !important; } /* ----------------------------------------------------------------------------- 4) Radiobuttons in Markenfarbe - 'accent-color' faerbt die nativen Radios bordeaux -> sofort wertiger, ohne den Markup-/Auswahl-Mechanismus anzufassen --------------------------------------------------------------------------- */ input[type="radio"] { accent-color: #B01032; cursor: pointer; vertical-align: middle; } label { cursor: pointer; } /* ----------------------------------------------------------------------------- 5) Buttons (Sprachflaggen + Pfeil-Navigation sind Bild-Buttons class='button') - heutiger Hover legt eine graue Flaeche (#D7D7D7) hinter die Bilder -> weg - stattdessen dezentes Opacity-/Scale-Feedback --------------------------------------------------------------------------- */ .button { background: transparent !important; border: 0 !important; padding: 4px !important; border-radius: 10px; cursor: pointer; transition: opacity .15s ease, transform .12s ease; } .button:hover { background: transparent !important; opacity: .72; } .button:active { transform: scale(.96); } .button img { display: block; border-radius: 4px; } /* ----------------------------------------------------------------------------- 6) Textlinks (z. B. "Fragen?", "als PDF speichern" auf Seite 10) Niemals unterstrichen, nie blau - in allen Zustaenden Markenfarbe. --------------------------------------------------------------------------- */ a, a:link, a:visited, a:hover, a:active { text-decoration: none !important; color: #B01032; } a { transition: opacity .15s ease; } a:hover { opacity: .7; } /* ----------------------------------------------------------------------------- 7) Sichtbarer Tastatur-Fokus (Barrierefreiheit) - nur bei Bedienung per Tastatur sichtbar (:focus-visible), stoert die Maus- bedienung nicht --------------------------------------------------------------------------- */ a:focus-visible, button:focus-visible, input:focus-visible, .button:focus-visible { outline: 2px solid #B01032; outline-offset: 2px; border-radius: 6px; } /* ----------------------------------------------------------------------------- 8) Einheitliche, feste Hoehe -> die Karte springt beim Blaettern nicht mehr - Hintergrund: Nunito bringt grosse Zeilenabstaende mit; ausserdem ist die Ergebnisseite (10) inhaltlich laenger als die uebrigen. Damit der Rahmen ueberall gleich hoch ist, setzen wir a) einen ruhigeren Zeilenabstand und b) eine gemeinsame feste Hoehe (Variable --qanto-seitenhoehe). - Kuerzere Seiten erhalten dadurch unten etwas mehr Weissraum - bewusst so gewuenscht, dafuer ist die Hoehe ueber alle 10 Seiten identisch. --------------------------------------------------------------------------- */ td, font, p, label, a { line-height: 1.35; } /* EINHEITLICHE, FESTE HOEHE FUER ALLE SEITEN - Inhaltszelle = die einzige Zelle mit width=970 (= $tabelle_breite). - Die feste Hoehe ist so gewaehlt, dass auch die inhaltsreichste Seite (10) hineinpasst. Dadurch ist die Karte auf allen Seiten gleich hoch und "springt" beim Blaettern nicht mehr; kuerzere Seiten haben unten etwas mehr Weissraum (so gewuenscht). - ZENTRALE STELLSCHRAUBE: nur diese eine Zahl anpassen. hoeher -> mehr Platz, falls eine Seite/Sprache doch laenger sein sollte niedriger -> weniger Weissraum auf den kurzen Seiten */ :root { --qanto-seitenhoehe: 540px; } td[width="970"] { height: var(--qanto-seitenhoehe); vertical-align: top; } /* Hinweis: Seite 10 braucht keine Sonderregel mehr - sie nutzt jetzt dieselbe feste Hoehe wie alle anderen Seiten (siehe --qanto-seitenhoehe oben). Der freie Raum unterhalb des Ergebnisblocks dient zugleich als Atemraum. */ /* ----------------------------------------------------------------------------- 9) Navigation modernisieren -> Zurueck-Button als klarer "Ghost"-Button - Der Zurueck-Pfeil ist heute ein eingebranntes JPG (pics/pfeil_zurueck.jpg). - Wir erkennen genau diesen Button ueber sein Bild (:has) und ersetzen die Optik durch einen sauberen Button mit Pfeil-Glyphe (sprachneutral). - WICHTIG: der absendende