/* =================================================================== Gira Dark — Umfragedesign für LimeSurvey 7 Erbt von fruity_twentythree (Bootstrap 5). Wird als letzte Datei der Vererbungskette geladen und gewinnt deshalb bei GLEICHER Spezifität über die Reihenfolge. Das reicht aber nicht überall: * theme_apple.css arbeitet an vielen Stellen mit verschachtelten Selektoren (".question-container .ls-label-question"). Dagegen hilft nur dieselbe Verschachtelung, nicht !important. * Für ".navbar" setzt theme_apple.css ein !important — dort steht hier ebenfalls eines. Es ist die einzige Stelle dieser Art. * Grundfarben von Fläche, Schrift und Fragekarte kommen als INLINE-Style aus den Theme-Optionen und sind per CSS überhaupt nicht erreichbar. Sie stehen im -Block der config.xml. Farb- und Maßwerte aus www.gira.de/css/app.css und partner.gira.de/css/v4/screen.css; Aufbau aus Design_Umfrage_Vorschlag_3.pdf (Referenzumfrage SID 666191). =================================================================== */ /* ---- 1. Schriften ------------------------------------------------- */ @font-face{ font-family:"Univers Next W02"; src:url("../files/fonts/univers-next-300.woff2") format("woff2"), url("../files/fonts/univers-next-300.woff") format("woff"); font-weight:300; font-style:normal; font-display:swap; } @font-face{ font-family:"Univers Next W02"; src:url("../files/fonts/univers-next-400.woff2") format("woff2"), url("../files/fonts/univers-next-400.woff") format("woff"); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:"Univers Next W02"; src:url("../files/fonts/univers-next-500.woff2") format("woff2"), url("../files/fonts/univers-next-500.woff") format("woff"); font-weight:500; font-style:normal; font-display:swap; } @font-face{ font-family:"Univers Next W02"; src:url("../files/fonts/univers-next-600.woff2") format("woff2"), url("../files/fonts/univers-next-600.woff") format("woff"); font-weight:600; font-style:normal; font-display:swap; } /* Die Hausschrift für Symbole. Gira liefert sie als woff und ttf aus (partner.gira.de/fonts/); hier liegt nur das woff — 14,8 KB, und jeder Browser, der Bootstrap 5 versteht, versteht auch woff. Die Buchstaben sind die Symbole: "H" ist der Winkel (nach unten zeigend, deshalb wird er beim Einsatz gedreht), "A" der Pfeil, "I" das Häkchen. Verwendet wird bisher nur "H" in Abschnitt 22. */ @font-face{ font-family:"GiraIcons"; src:url("../files/fonts/GiraIcons-200221.woff") format("woff"); font-weight:400; font-style:normal; font-display:swap; } /* ---- 2. Gestaltungsvariablen -------------------------------------- */ :root{ --gira-dunkel: #121212; /* Seiten- und Kopfleistenfläche */ --gira-schwarz: #000; /* Primary-Buttonfläche — bewusst ein anderes Schwarz als die Fläche */ --gira-schwarz-hover: #191919; --gira-text-hell: #d8d8d8; /* Fließtext auf dunkel */ --gira-text-leise: rgba(255,255,255,.6); --gira-weiss: #fff; --gira-rahmen-feld: #666; --gira-rahmen-sec: #999; --gira-rahmen-sec-d: #707070; /* Secondary-Rahmen auf dunkel */ --gira-rahmen-sec-dh: #a0a0a0; --gira-fokus-text: #262626; --gira-flaeche-hell: #f2f2f2; /* Hinweisboxen */ --gira-flaeche-hover: #e7e7e7; --gira-hilfetext: #707070; /* WCAG-AA-tauglich auf Weiß */ --gira-fehler: #ff6b69; --gira-status-gruen: #87b400; /* nur Statusfarbe, nie Fläche */ --gira-inhalt-breite: 800px; --gira-karte-innen: 25px; --gira-karte-abstand: 14px; --gira-kopf-hoehe: 74px; /* 58 + 16: mehr Luft um die Wortmarke */ } /* ---- 3. Grundfläche und Typografie -------------------------------- */ /* Die Grundfläche trägt allein der — seine Farbe kommt aus den Theme-Optionen. #outerframeContainer darf KEINE eigene Fläche haben: er liegt über dem fixierten Hintergrundbild (siehe 17.6) und würde es sonst vollflächig verdecken. */ body, body.default{ background-color:var(--gira-dunkel); color:var(--gira-text-hell); font-family:"Univers Next W02", verdana, sans-serif; font-size:16px; line-height:24px; font-weight:400; } #outerframeContainer{ background-color:transparent; color:var(--gira-text-hell); font-family:"Univers Next W02", verdana, sans-serif; font-size:16px; line-height:24px; font-weight:400; } input, select, textarea, button{ font-family:"Univers Next W02", verdana, sans-serif; } /* Überschriften sind leicht — das prägende Merkmal des Gira-Systems. Der fetteste vorhandene Schnitt ist 600; "bold" liefe ins Leere und ließe den Browser künstlich fetten. */ h1,h2,h3,h4,h5,h6, .h1,.h2,.h3,.h4,.h5,.h6{ font-weight:300; color:inherit; } h1,.h1{ font-size:36px; line-height:40px; } h2,.h2{ font-size:32px; line-height:36px; } h3,.h3{ font-size:28px; line-height:32px; } h4,.h4{ font-size:24px; line-height:28px; } h5,.h5{ font-size:20px; line-height:26px; } @media (min-width:992px){ h1,.h1{ font-size:48px; line-height:52px; } } /* Verweise tragen einen Rahmen unten, keine Unterstreichung. So macht es auch Gira selbst: .cms-teaser-light a { text-decoration:none; border-bottom:1px black solid; } Der Unterschied ist sichtbar: die Unterstreichung des Browsers sitzt dichter am Text und wird von Unterlängen durchbrochen, der Rahmen läuft durch und lässt sich in Stärke und Abstand steuern. */ a{ color:var(--gira-weiss); text-decoration:none; border-bottom:1px solid currentColor; } a:hover, a:focus{ color:rgba(255,255,255,.9); } /* Was wie ein Bedienelement aussieht, bekommt keinen Strich. Der Block steht bewusst HIER und nicht weiter unten: Buttons, Kopfleistenlinks und Menüeinträge setzen ihre eigenen Rahmen später in dieser Datei und behalten sie damit. */ .btn, .nav-link, .dropdown-item, .navbar-brand, .btn-close, a.surveytitle{ border-bottom:0; } /* Verweise auf weisser Fläche stehen schwarz. Gira hält beide Fassungen in partner.gira.de/css/v4/screen.css bereit: a { color:white; } (dunkler Grund) a:hover { color:rgba(255,255,255,.9); } a.cms-a-light { color:black; border-bottom:1px black solid; } a.cms-a-light:hover { color:rgba(0,0,0,.8); border-bottom-color:rgba(0,0,0,.8); } Der Grund entscheidet, nicht eine eigene Verweisfarbe — ein Blau gibt es im Gira-System nicht. */ .question-container a, .modal a, .completed-text a, .ls-answers a{ color:var(--gira-schwarz); } .question-container a:hover, .question-container a:focus, .modal a:hover, .modal a:focus, .completed-text a:hover, .completed-text a:focus{ color:rgba(0,0,0,.8); } /* ---- 4. Kopfleiste ------------------------------------------------- */ /* theme_apple.css setzt ".navbar { background-color:#fff !important }". Gegen ein !important hilft nur ein !important - an dieser einen Stelle unvermeidlich. */ #survey-nav, #survey-nav.navbar, #survey-nav.navbar-light, #survey-nav.bg-light{ background-color:var(--gira-dunkel) !important; border-bottom:0; min-height:var(--gira-kopf-hoehe); padding-left:0; padding-right:0; } #survey-nav .container-fluid{ max-width:1180px; padding-left:24px; padding-right:24px; } /* Wortmarke statt Umfragename */ #survey-nav .navbar-brand{ display:flex; align-items:center; height:var(--gira-kopf-hoehe); padding:0; margin:0; } #survey-nav .navbar-brand .gira-logo{ display:block; width:90px; height:auto; } /* Servicelinks rechts als Secondary-Buttons. Achtung: Im Markup sind es .nav-link in
  • , KEINE .btn — eine Regel auf "#survey-nav .btn" greift hier nicht. Als reine Textlinks blieben sie eine visuell undefinierte Fläche. */ #survey-nav .navbar-nav .nav-link, #survey-nav .navbar-nav .nav-link:visited, #survey-nav .navbar-nav > li > a, #survey-nav .navbar-nav > .nav-item > a{ display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:6px 22px; border:1px solid var(--gira-rahmen-sec-d); border-radius:20px; background-color:transparent; color:var(--gira-weiss); font-size:14px; line-height:20px; text-decoration:none; white-space:nowrap; } #survey-nav .navbar-nav .nav-link:hover, #survey-nav .navbar-nav .nav-link:focus, #survey-nav .navbar-nav .nav-link:active, #survey-nav .navbar-nav > li > a:hover, #survey-nav .navbar-nav > li > a:focus{ background-color:transparent; border-color:var(--gira-rahmen-sec-dh); color:var(--gira-weiss); text-decoration:none; } #survey-nav .navbar-nav .nav-link:focus-visible{ outline:2px solid var(--gira-weiss); outline-offset:2px; } /* Nebeneinander mit Abstand, ohne die Bootstrap-Abstände darüber */ #survey-nav .navbar-nav{ align-items:center; flex-direction:row; gap:12px; } #survey-nav .navbar-nav > li, #survey-nav .navbar-nav > .nav-item{ display:flex; align-items:center; } #survey-nav #navbar{ padding-top:0 !important; } /* Umschalter für kleine Bildschirme. Bootstrap 5 füllt das Hamburger-Symbol über die Variable --bs-navbar-toggler-icon-bg, die erst durch die Klassen "navbar-light" bzw. "navbar-dark" gesetzt wird. Beide sind hier bewusst nicht am Element (die Kopfleiste ist dunkel gestaltet), deshalb bliebe das Symbol ohne Bild — der Umschalter wäre unsichtbar und die Servicelinks auf dem Telefon unerreichbar. Das Symbol wird daher direkt gesetzt, in Weiß. */ #survey-nav .navbar-toggler{ border:1px solid var(--gira-rahmen-sec-d); border-radius:20px; padding:6px 12px; min-height:40px; box-shadow:none; } #survey-nav .navbar-toggler:hover, #survey-nav .navbar-toggler:focus{ border-color:var(--gira-rahmen-sec-dh); box-shadow:none; } #survey-nav .navbar-toggler:focus-visible{ outline:2px solid var(--gira-weiss); outline-offset:2px; } #survey-nav .navbar-toggler-icon{ width:24px; height:24px; filter:none; background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); background-repeat:no-repeat; background-position:center; background-size:100% 100%; } /* Aufgeklapptes Menü auf kleinen Bildschirmen: die Buttons stehen untereinander und brauchen Luft zur Kopfleiste. */ @media (max-width:767.98px){ #survey-nav #navbar.show, #survey-nav #navbar.collapsing{ background-color:var(--gira-dunkel); padding:12px 0 16px 0; } #survey-nav .navbar-nav{ flex-direction:column; align-items:stretch; gap:10px; } #survey-nav .navbar-nav .nav-link{ justify-content:center; } } /* ---- 5. Inhaltsspalte ---------------------------------------------- */ #main-row, #main-col, .survey-form-container{ background-color:transparent; } #main-col{ max-width:var(--gira-inhalt-breite); margin-left:auto; margin-right:auto; float:none; } body{ padding-top:calc(var(--gira-kopf-hoehe) + 16px); } /* ---- 6. Fortschrittsbalken ----------------------------------------- */ /* Weiß umrandet, quadratisch, auf dunklem Grund über der ersten Karte. */ .top-container{ background-color:transparent; padding:0 0 12px 0; } .top-content{ padding-left:0; padding-right:0; } /* theme_apple.css drueckt ".top-container .progress" auf 2px Hoehe */ .top-container .progress, .progress{ height:21px; background-color:transparent; border:1px solid var(--gira-weiss); border-radius:0; box-shadow:none; } .progress-bar{ background-color:var(--gira-weiss); color:var(--gira-dunkel); font-size:12px; line-height:19px; text-align:left; padding-left:6px; border-radius:0; box-shadow:none; } /* ---- 7. Gruppentitel ----------------------------------------------- */ .group-container{ background-color:transparent; } /* theme_apple.css: ".group-container .group-title" mit 2.85rem/600 */ .group-container .group-title, .group-container .group-name, .group-title, .group-name, #group-title, .ls-group-title{ color:var(--gira-text-hell); font-size:20px; line-height:26px; font-weight:300; text-align:left; margin:0 0 12px 0; padding:0; } .group-description{ color:var(--gira-text-leise); font-size:14px; line-height:24px; margin-bottom:12px; } /* Willkommens- und Abschlussseite stehen auf dunklem Grund */ .survey-name{ color:var(--gira-weiss); font-weight:300; text-align:left; } .survey-description, .survey-welcome{ color:var(--gira-text-hell); text-align:left; } /* ---- 8. Fragekarten ------------------------------------------------ */ /* Weiß, randlos, ohne Schatten. .question-container ist zugleich eine Bootstrap-.row — deren negative Außenabstände werden neutralisiert, sonst schiebt sich die Karte über die Spaltenbreite hinaus. */ .question-container{ background-color:var(--gira-weiss); color:var(--gira-dunkel); border:0; border-radius:0; box-shadow:none; margin:0 0 var(--gira-karte-abstand) 0; padding:var(--gira-karte-innen); } /* Spezifitaet muss ".question-container .ls-label-question" aus theme_apple.css (24px/600) erreichen, sonst bleibt der Fragetext fett. */ .question-container .question-title-container, .question-container .question-text, .question-container .ls-label-question{ color:var(--gira-dunkel); font-size:16px; line-height:24px; font-weight:400; } .question-title-container{ margin-bottom:18px; } .answer-container{ padding:0; } /* Hilfetext unter dem Antwortbereich, klein und grau */ .question-help-container, .ls-questionhelp, .questionhelp{ color:var(--gira-hilfetext); font-size:14px; line-height:24px; margin-top:14px; } /* Pflichtfeld-/Validierungshinweise */ .question-valid-container{ color:var(--gira-hilfetext); font-size:14px; line-height:24px; } .question-valid-container .ls-em-error, .text-danger, .has-error{ color:var(--gira-fehler); } /* Hinweistexte stehen als normaler Text, nicht in einem Kasten. LimeSurvey gibt Hinweise wie "Bitte wählen Sie eine der folgenden Antworten" in
    aus. Ein Rahmen darum wirkt wie eine Meldung und schiebt sich zwischen Frage und Antwort; der graue Ton setzt sie ausreichend ab. */ .question-valid-container .ls-em-tip, .ls-em-tip, .ls-question-message{ background-color:transparent; border:0; border-radius:0; color:var(--gira-dunkel); box-shadow:none; padding:0; margin:0 0 14px 0; font-size:14px; line-height:20px; } /* Echte Statusmeldungen behalten ihre Fläche — sie sind etwas anderes als ein Ausfüllhinweis. */ .alert, .alert-info{ background-color:var(--gira-flaeche-hell); border:1px solid var(--gira-dunkel); border-radius:0; color:var(--gira-dunkel); box-shadow:none; padding:12px 16px; } .alert-success{ background-color:var(--gira-flaeche-hell); border-color:var(--gira-status-gruen); color:var(--gira-dunkel); } .alert-danger{ background-color:var(--gira-flaeche-hell); border-color:var(--gira-fehler); color:var(--gira-dunkel); } /* ---- 9. Buttons ---------------------------------------------------- */ /* Geometrie: volle Pille, 48 px hoch. Der Rahmen ist immer 1 px — bei Primary transparent —, sonst springt die Größe zwischen den Typen. */ .btn, .btn-lg{ display:inline-flex; align-items:center; justify-content:center; height:48px; min-width:48px; padding:0 30px; font-size:14px; font-weight:400; line-height:1; border:1px solid transparent; border-radius:24px; box-shadow:none; text-decoration:none; } /* GRUNDFALL IST DER DUNKLE GRUND. Die Seitenfläche ist #121212; hell sind nur die Fragekarten und die Dialoge. Jeder Button ausserhalb einer Karte steht damit auf Dunkel: Navigator, Einleitungsseite, „Zwischengespeicherte Umfrage laden", Zwischenspeichern, Registrierung, Zugangscode, Kontingentmeldung. Vorher war es umgekehrt — hell war der Grundfall, und jede eigenständige Seite brauchte einen eigenen Block. Zwei davon gab es (.navigator, .clearall-saveall-wrapper), beim Laden einer zwischengespeicherten Umfrage fehlte er: „Jetzt laden" stand schwarz auf #121212, „Zur Umfrage zurückkehren" ebenso. Die helle Fassung gilt jetzt nur dort, wo wirklich eine weisse Fläche liegt: 17.3 (Fragekarte) und 17.13 (Dialog). */ /* Primary auf dunklem Grund: weisse Fläche, schwarze Schrift */ .btn-primary, .btn-check + .btn-primary{ background-color:var(--gira-weiss); border-color:var(--gira-weiss); color:var(--gira-schwarz); box-shadow:none; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .btn-primary:active:focus, .btn-primary:focus-visible, .btn-check + .btn-primary:hover, .btn-check:focus + .btn-primary, .btn-check:checked + .btn-primary, .btn-check:active + .btn-primary{ background-color:var(--gira-flaeche-hover); border-color:var(--gira-flaeche-hover); color:var(--gira-schwarz); box-shadow:none; } .btn-primary:disabled, .btn-primary.disabled, .btn-primary[disabled], .btn-primary.disabled:hover, .btn-primary[disabled]:hover{ background-color:var(--gira-rahmen-sec-d); border-color:var(--gira-rahmen-sec-d); color:var(--gira-dunkel); box-shadow:none; opacity:1; } /* Secondary — bekommt in keinem Zustand eine Fläche, nur einen Rahmen. Bootstrap füllt .btn-outline-* bei :hover von Haus aus; das wird hier in jedem Zustand zurückgenommen. */ .btn-secondary, .btn-outline-secondary{ background-color:transparent; border-color:var(--gira-rahmen-sec-d); color:var(--gira-weiss); box-shadow:none; } .btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active, .btn-secondary:focus-visible, .btn-outline-secondary:hover, .btn-outline-secondary:focus, .btn-outline-secondary:active, .btn-outline-secondary.active, .btn-outline-secondary:focus-visible, .btn-check:checked + .btn-outline-secondary{ background-color:transparent; border-color:var(--gira-rahmen-sec-dh); color:var(--gira-weiss); box-shadow:none; } .btn-secondary:disabled, .btn-secondary.disabled, .btn-outline-secondary:disabled, .btn-outline-secondary.disabled{ background-color:transparent; border-color:var(--gira-rahmen-sec-d); color:var(--gira-rahmen-sec-d); opacity:1; } /* Textlink-Button — sieht aus wie ein Verweis und trägt deshalb denselben Rahmen unten statt einer Unterstreichung. */ .btn-link{ height:auto; min-width:0; padding:0; border:0; border-radius:0; border-bottom:1px solid currentColor; font-size:14px; color:var(--gira-text-hell); text-decoration:none; box-shadow:none; } .btn-link:hover, .btn-link:focus{ color:var(--gira-weiss); border-bottom:1px solid currentColor; text-decoration:none; box-shadow:none; } /* Tastaturbedienung muss sichtbar bleiben — auf Dunkel weiss, in Karte und Dialog schwarz. */ .btn:focus-visible{ outline:2px solid var(--gira-weiss); outline-offset:2px; } .question-container .btn:focus-visible, .modal .btn:focus-visible{ outline-color:var(--gira-schwarz); } .navigator{ padding-top:10px; } /* Tastaturbedienung muss sichtbar bleiben */ .btn:focus-visible{ outline:2px solid var(--gira-schwarz); outline-offset:2px; } .navigator .btn:focus-visible, .gira-dark-flaeche .btn:focus-visible{ outline-color:var(--gira-weiss); } /* ---- 10. Eingabefelder --------------------------------------------- */ /* Pille für Buttons, Kante für Felder — dieser Gegensatz ist Absicht. */ /* Die Typen einzeln aufzuführen ist kein Zierat: theme_apple.css setzt Höhe, Schriftgrösse und Innenabstand über ".form-control.ls-important-field" mit (0,2,0). Ein blosses ".form-control" liegt bei (0,1,0) und verliert, "input[type=…].form-control" liegt bei (0,2,1) und gewinnt. Fehlte ein Typ in dieser Liste, fiel genau er zurück — beim Passwortfeld auf 44 px Höhe, 14 px Schrift und die Textfarbe #636363 aus "input[type=password]". */ .form-control, .form-select, input[type="text"].form-control, input[type="email"].form-control, input[type="number"].form-control, input[type="password"].form-control, input[type="tel"].form-control, input[type="url"].form-control, input[type="search"].form-control, input[type="date"].form-control, input[type="time"].form-control, input[type="datetime-local"].form-control{ height:48px; border:1px solid var(--gira-rahmen-feld); border-radius:0; background-color:var(--gira-weiss); color:var(--gira-dunkel); font-size:16px; box-shadow:none; padding:0 12px; } textarea.form-control{ height:auto; min-height:96px; padding-top:12px; padding-bottom:12px; line-height:24px; } .form-control:hover, .form-select:hover{ border-color:var(--gira-schwarz); } .form-control:focus, .form-select:focus{ border-color:var(--gira-schwarz); color:var(--gira-fokus-text); background-color:var(--gira-weiss); box-shadow:none; outline:none; } .form-control::placeholder{ color:var(--gira-rahmen-feld); opacity:1; } .form-control:disabled, .form-control[readonly]{ background-color:var(--gira-flaeche-hell); color:var(--gira-hilfetext); } .form-control.is-invalid, .form-select.is-invalid, .has-error .form-control{ border-color:var(--gira-fehler); box-shadow:none; } /* theme_apple.css zeichnet Felder mit .ls-important-field anders aus: border: 2px solid #1E1E1E !important; box-shadow: 8px 8px 0 #EEEFF7; (versetzter Block in Lavendel) height: 44px; font-size: 14px; padding-top: 14px; Getragen wird die Klasse nur auf den eigenständigen Seiten (Laden, Zwischenspeichern, Registrierung) — in den Fragekarten kommt sie nicht vor. Dort standen die Felder dadurch anders als überall sonst. Gegen ein !important hilft nur ein !important; alles Übrige lässt sich über die Spezifität (0,2,0) regeln. */ .form-control.ls-important-field, .form-select.ls-important-field{ height:48px; border:1px solid var(--gira-rahmen-feld) !important; box-shadow:none; padding:0 12px; font-size:16px; color:var(--gira-dunkel); } .form-control.ls-important-field:focus, .form-select.ls-important-field:focus{ border-color:var(--gira-schwarz) !important; box-shadow:none; } textarea.form-control.ls-important-field{ height:auto; min-height:96px; padding-top:12px; padding-bottom:12px; } /* ---- 11. Radios und Auswahlkästchen -------------------------------- */ .form-check-input{ width:18px; height:18px; margin-top:3px; border:1px solid var(--gira-schwarz); background-color:var(--gira-weiss); box-shadow:none; } .form-check-input:checked{ background-color:var(--gira-schwarz); border-color:var(--gira-schwarz); } .form-check-input:focus{ border-color:var(--gira-schwarz); box-shadow:none; } .form-check-input:focus-visible{ outline:2px solid var(--gira-schwarz); outline-offset:2px; } /* Kein padding-left setzen! Das Kästchen wird als label::before mit "left:0; margin-left:-20px" links AUSSERHALB des Labels gezeichnet; der Innenabstand (8 px bei Optionsfeldern, 20 px bei Auswahlkästchen) hält den Text davon frei. Überschreibt man ihn, klebt die Beschriftung am Kästchen. */ .form-check-label, .answer-item label, .radio-label{ color:var(--gira-dunkel); font-size:16px; line-height:24px; } .form-check-label{ padding-left:6px; } .answer-item, .radio-item, .checkbox-item{ margin-bottom:6px; } /* ---- 12. Einzelne Fragetypen --------------------------------------- */ /* Mehrfach-Text und mehrfache numerische Eingabe: Buchstabenlabel in schmaler linker Spalte, Feld rechts. */ .multiple-short-txt .answer-item label, .numeric-multi .answer-item label{ color:var(--gira-dunkel); font-size:16px; text-align:right; padding-right:16px; } .numeric-multi .form-control{ max-width:120px; } /* Array: Kopfzeile und Zeilenwechsel dezent */ .array-flexible-row table, .ls-answers table{ color:var(--gira-dunkel); border-color:#dbdbdb; } .array-flexible-row th, .ls-answers th{ font-weight:500; border-color:#dbdbdb; color:var(--gira-dunkel); } .array-flexible-row td, .ls-answers td{ border-color:#dbdbdb; } .array1, .array2{ background-color:transparent; } .ls-answers tbody tr:nth-child(even){ background-color:#f9f9f9; } /* Ranking — Geometrie. Farben und Rahmen stehen in 17.4; hier steht bewusst KEINE Füllung, sonst gewinnt diese Regel über die dortige. */ .ranking .list-group{ border-radius:0; } .ranking .list-group-item{ border-radius:0; margin-bottom:2px; padding:8px 12px; font-size:14px; line-height:20px; } .ranking .sortable-list-target, .ranking ul[id*="sortable-rank"]{ min-height:120px; } .ranking .selector__dragHandle{ color:inherit; } /* Ja/Nein und andere Button-Auswahlen: der reine Rahmenwechsel ist als Auswahlzustand zu leise, deshalb hier bewusst eine gefüllte Auswahl. */ .yes-no .btn-check:checked + .btn, .btn-check:checked + .btn-outline-primary{ background-color:var(--gira-schwarz); border-color:var(--gira-schwarz); color:var(--gira-weiss); } /* Datei-Upload */ .upload-files .btn{ margin-top:8px; } .ls-upload-container{ color:var(--gira-dunkel); } /* Sprachwechsler */ .language select.form-select{ max-width:280px; } /* ---- 13. Abschluss- und Systemseiten ------------------------------- */ .completed-wrapper, #completed-container, .ls-completed{ background-color:var(--gira-weiss); color:var(--gira-dunkel); padding:var(--gira-karte-innen); } /* Modale Dialoge (Alle Antworten löschen) */ .modal-content{ border-radius:0; border:0; } .modal-header, .modal-footer{ border-color:#dbdbdb; } .modal-title{ font-weight:300; } /* ---- 14. Mobil ------------------------------------------------------ */ @media (max-width:767.98px){ :root{ --gira-karte-innen:18px; } #survey-nav .container-fluid{ padding-left:16px; padding-right:16px; } #survey-nav .navbar-nav .nav-link{ padding:6px 0; } /* Mindesthöhe bleibt 48 px — zugleich die Mindestgröße für Touch */ .btn, .btn-lg{ padding:0 22px; } .navigator .col-6{ padding-left:6px; padding-right:6px; } h1,.h1{ font-size:30px; line-height:34px; } } /* ---- 15. Druck ------------------------------------------------------ */ @media print{ body, #outerframeContainer{ background:#fff; color:#000; } #survey-nav, .navigator, .top-container{ display:none; } .question-container{ border:1px solid #dbdbdb; padding:12px; } /* Auf Papier ist der Grund weiss — die Buttons brauchen deshalb die helle Fassung, nicht die des dunklen Seitengrunds. */ .btn-primary{ background:#000; border-color:#000; color:#fff; } .btn-secondary, .btn-outline-secondary{ background:transparent; border-color:#000; color:#000; } .btn-link, .control-label{ color:#000; } /* Die Fusszeile bleibt auf Papier stehen — das Impressum gehört mit aufs Blatt —, aber in dunkler Schrift auf hellem Grund. */ #gira-footer{ border-top-color:#dbdbdb; } #gira-footer p, #gira-footer a{ color:#000; } } /* =================================================================== 16. Nachträge — gegen Regeln, die sich nicht über die Ladereihenfolge schlagen lassen. Jeder Block nennt die Regel, gegen die er steht. =================================================================== */ /* ---- Buttons bleiben Pillen --------------------------------------- Die Theme-Option "cornerradius" erzeugt einen