/* ========================================================================= DIGITALER VERDAUUNGS-CHECK — u21checks / EXT:u21checks Inhaltsquelle: "Verdauungs-Check_Inhaltsdokument_v2_FREIGABE" (Stand September 2026, Version 2 nach Kommentaren aus der Freigabe). Optik bewusst an den Leber-Selbsttest angeglichen (Vorgabe 18.09.2026): gleiche Bausteine, gleiche Klassennamen, gleiche Variablen-Systematik wie LeberBalanceCheck.css. Wer dort etwas versteht, versteht es hier auch. ZWEI FARBSETS: Der Check laeuft auf myrrhinil.de UND nortase.de. Welches Set greift, entscheidet der CheckController serverseitig anhand der TYPO3-Site und haengt eine der beiden Theme-Klassen ans Root-Element: .u21checks-theme--myrrhinil (Site "myrrhinil", "myrrhinil-at") .u21checks-theme--nortase (Site "nortase") Ohne Theme-Klasse greift das Myrrhinil-Set als Fallback (siehe :root-Block direkt unter .u21checks--verdauungscheck). Die Farbwerte stammen 1:1 aus den Theme-Variablen der Sitepackage: Resources/Public/Scss/Myrrhinil/_myrrhinil-variables.scss Resources/Public/Scss/Nortase/_nortase-variables26.scss Alle Selektoren sind unter .u21checks--verdauungscheck gescoped, damit nichts in den Rest der Seite ausleckt - insbesondere die Custom Properties. ========================================================================= */ /* ------------------------------------------------------------------------- 1. FARBSETS ------------------------------------------------------------------------- */ .u21checks--verdauungscheck { /* --- Fallback = Myrrhinil ------------------------------------------------ Greift, wenn keine Theme-Klasse gesetzt ist (z. B. Offline-Styleguide, Vorschau im Backend oder eine Domain, die im Controller nicht gemappt ist). Bewusst ein echtes Set statt Grau, damit eine fehlende Klasse nicht nach kaputtem CSS aussieht. */ /* $primary-accessible aus _myrrhinil-variables.scss. Bewusst DIESER Wert und nicht $primary-medium: alles, was hier als Flaeche mit weisser Schrift dient (Buttons, Badges), muss 4,5:1 erreichen (WCAG 1.4.3). #880a61 auf Weiss = 9,3:1, Weiss auf #880a61 = 6,1:1. */ --u21checks-vc-primary: #880a61; /* $primary-darker. NICHT $primary-dark (#7e0248): der Unterschied zu $primary waere mit blossem Auge kaum zu sehen, ein Hover-Zustand muss aber wahrnehmbar sein. */ --u21checks-vc-primary-dark: #640239; /* $primary-medium - rein dekorativ (Rahmen, Trennlinien), nie Textfarbe und nie Traeger einer Information. Erreicht mit 2,2:1 gegen Weiss weder 4,5:1 noch 3:1. */ --u21checks-vc-primary-medium: #d5a3bf; /* Sehr helle Tönung von $primary als Boxenhintergrund. Im Myrrhinil-Theme gibt es kein $primary-light - dieser Wert ist daher hier erzeugt (rund 4 % Deckkraft von #880a61 auf Weiss) und bewusst so hell, dass der normale Fliesstext darauf seinen Kontrast behaelt. */ --u21checks-vc-primary-light: #f9eff5; /* Nur fuer UI-Grenzen und Flaechen OHNE Text (Fortschrittsbalken, Rahmen der gewaehlten Antwort). Dafuer genuegen 3:1 (WCAG 1.4.11). */ --u21checks-vc-accent: #880a61; } .u21checks--verdauungscheck.u21checks-theme--nortase { /* $primary-accessible aus _nortase-variables26.scss - das ist dort ausdruecklich $primary-dark (#006e46), NICHT $primary (#008454). Grund, warum das hier wichtig ist: Weiss auf #008454 erreicht nur 4,43:1 und faellt damit unter die 4,5:1 fuer normalen Text. Weiss auf #006e46 erreicht 6,33:1. Wer hier auf den helleren Marken-Gruenton zurueckdreht, bricht den Kontrast aller Buttons. */ --u21checks-vc-primary: #006e46; --u21checks-vc-primary-dark: #00472e; /* $primary-darker */ --u21checks-vc-primary-medium: #009a64; /* $primary-medium */ /* Pendant zu #f9eff5 im Myrrhinil-Set: ~4 % Deckkraft von #008454. */ --u21checks-vc-primary-light: #eef7f3; /* Hier darf der hellere Markenton stehen, weil er ausschliesslich Flaechen und Rahmen ohne Text faerbt: #008454 auf Weiss = 4,74:1, also deutlich ueber den fuer UI-Komponenten geforderten 3:1. */ --u21checks-vc-accent: #008454; } .u21checks--verdauungscheck.u21checks-theme--myrrhinil { --u21checks-vc-primary: #880a61; --u21checks-vc-primary-dark: #640239; --u21checks-vc-primary-medium: #d5a3bf; --u21checks-vc-primary-light: #f9eff5; --u21checks-vc-accent: #880a61; } /* ------------------------------------------------------------------------- 2. MARKENUNABHAENGIGE TOKENS Status- und Neutralfarben sind in beiden Sets identisch: Ein Warnzeichen soll auf beiden Domains gleich aussehen und nicht mit der Hausfarbe konkurrieren. ------------------------------------------------------------------------- */ .u21checks--verdauungscheck { --u21checks-vc-text: #212121; --u21checks-vc-text-soft: #5b5b5b; /* 6,8:1 gegen Weiss */ --u21checks-vc-border: #909090; /* 3,2:1 gegen Weiss - Untergrenze fuer UI-Grenzen */ /* Orange Infobox fuer Modul M6 (Abklaerungshinweis). -fg ist eigens abgedunkelt, weil die Rahmenfarbe als Textfarbe nur 4,34:1 erreicht. */ --u21checks-vc-warn: #b5651d; --u21checks-vc-warn-bg: #fdf3e7; --u21checks-vc-warn-fg: #8a4a12; /* 6,9:1 gegen Weiss */ /* Rot fuer Warnzeichen und Sicherheitsausgang (Ergebnis C). */ --u21checks-vc-danger: #b3261e; /* 6,5:1 - hier auch als Textfarbe zulaessig */ --u21checks-vc-danger-bg: #fceae9; --u21checks-vc-neutral-bg: #f4f5f6; --u21checks-vc-radius: 14px; --u21checks-vc-shadow: 0 4px 18px rgba(0, 0, 0, .07); /* Bewusst KEIN eigener Font-Stack - die Website-Schriftart soll nicht ueberschrieben werden (Wunsch 06.08.2026). font-family ist geerbt, "inherit" macht das nur explizit und robust gegen spaetere Aenderungen. */ font-family: inherit; color: var(--u21checks-vc-text); line-height: 1.6; max-width: 760px; margin: 0 auto; position: relative; } .u21checks--verdauungscheck *, .u21checks--verdauungscheck *::before, .u21checks--verdauungscheck *::after { box-sizing: border-box; } .u21checks--verdauungscheck .u21checks-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; } /* ------------------------------------------------------------------------- 3. GRUNDBAUSTEINE (identisch zum Leber-Selbsttest) WICHTIG - GRENZE ZU DEN INKLUDIERTEN INHALTSELEMENTEN (28.09.2026) In die Ergebniskarte werden redaktionell gepflegte TYPO3-Inhaltselemente eingesetzt: die Produktboxen in A und B, die beiden Cards in D. Die sollen aussehen, als stuenden sie irgendwo sonst auf der Seite - also ausschliess- lich nach den Regeln des Website-Themes. Deshalb gilt hier: KEINE Regeln auf generische Namen, die fremdes Markup ebenfalls benutzt. Betroffen waren .card, .btn, .btn-secondary, .btn-link sowie die Elementselektoren h1, h2, h3, ul, li und li::marker - allesamt Namen, die in einem Teaser oder Produktblock ganz normal vorkommen. Stattdessen: - .card nur als DIREKTES Kind von .u21checks-app - das sind die Karten, die dieses Modul selbst rendert; eine .card-teaser aus einem Inhaltselement liegt immer tiefer - Buttons ueber die eigenen Klassen .u21checks-btn und .u21checks-btn-link, die das JS-Modul zusaetzlich setzt - Ueberschriften nur ueber ihre eigene Klasse oder ueber den Kasten, in dem sie stehen (.module-box h3 usw.) - gar keine Regeln auf ul/li: dieses Modul rendert seit dem 29.09.2026 ueberhaupt keine Liste mehr, jedes ul/li im Check kommt damit aus einem Inhaltselement und gehoert dem Theme ------------------------------------------------------------------------- */ .u21checks--verdauungscheck .u21checks-app > .card { background: #fff; border: 1px solid var(--u21checks-vc-primary); box-shadow: var(--u21checks-vc-shadow); padding: 2rem 1.5rem; margin-bottom: 2rem; } .u21checks--verdauungscheck .u21checks-btn { display: inline-block; border: none; cursor: pointer; font-size: 1.05rem; font-weight: 600; background: var(--u21checks-vc-primary); color: #fff; padding: 14px 30px; border-radius: 999px; transition: background .15s, transform .1s; text-decoration: none; text-align: center; font-family: inherit; } .u21checks--verdauungscheck .u21checks-btn:hover { background: var(--u21checks-vc-primary-dark); color: #fff; } .u21checks--verdauungscheck .u21checks-btn:active { transform: scale(.98); } .u21checks--verdauungscheck .u21checks-btn.btn-secondary { background: #fff; color: var(--u21checks-vc-primary); border: 2px solid var(--u21checks-vc-primary); } .u21checks--verdauungscheck .u21checks-btn.btn-secondary:hover { background: var(--u21checks-vc-primary-light); color: var(--u21checks-vc-primary-dark); } .u21checks--verdauungscheck .u21checks-btn[disabled] { background: #e9e9e9; color: #5b5b5b; cursor: not-allowed; } .u21checks--verdauungscheck .u21checks-btn[disabled]:hover { background: #e9e9e9; color: #5b5b5b; } .u21checks--verdauungscheck .u21checks-btn-link { background: none; border: none; color: var(--u21checks-vc-text-soft); cursor: pointer; text-decoration: none; font-size: .95rem; padding: 0.5rem; font-family: inherit; } .u21checks--verdauungscheck .u21checks-btn-link:hover { color: var(--u21checks-vc-primary-dark); text-decoration: underline; } /* ------------------------------------------------------------------------- 4. FRAGENSTRECKE ------------------------------------------------------------------------- */ .u21checks--verdauungscheck .progress-track { background: var(--u21checks-vc-primary-light); height: 10px; margin: 6px 0 4px; } .u21checks--verdauungscheck .progress-fill { background: var(--u21checks-vc-accent); height: 100%; transition: width .3s; } .u21checks--verdauungscheck .progress-label { font-size: .8rem; color: var(--u21checks-vc-text-soft); margin: 0 0 4px; } .u21checks--verdauungscheck .theme-label { display: block; font-size: .8rem; font-weight: 700; line-height: 1; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 14px; color: var(--u21checks-vc-text-soft); } .u21checks--verdauungscheck .q-title { color: var(--u21checks-vc-primary); margin-bottom: 10px; } /* Hinweis-/Infobox ueber der Frage (Dokument: "Hinweistext (Infobox)"), optisch abgesetzt vom neutralen Einleitungstext. */ .u21checks--verdauungscheck .q-hint { background: var(--u21checks-vc-warn-bg); border-left: 4px solid var(--u21checks-vc-warn); padding: 10px 14px; font-size: .92rem; margin-bottom: 1rem; color: var(--u21checks-vc-warn-fg); } /* Erster Block direkt unter der Frage bekommt Luft nach oben - egal ob es der Einleitungstext oder die Hinweisbox ist. Beide zusammengefasst, weil sie denselben Wert tragen. */ .u21checks--verdauungscheck .q-title + .q-hint, .u21checks--verdauungscheck .q-title + .q-intro { margin-top: 1.5rem; } /* Antwortoptionen. Der Leber-Selbsttest hat nur Ja/Nein und kommt mit zwei nebeneinanderliegenden Buttons aus; hier sind Mehrfachauswahlen noetig, deshalb echte Checkboxen/Radios in einer Liste - optisch aber dieselbe Kachel (.answer-btn-Look) wie dort. */ .u21checks--verdauungscheck .options { display: flex; flex-direction: column; gap: 12px; margin: 22px 0; /* .options ist ein
(WCAG 1.3.1, Audit 06.08.2026) - Standard-Fieldset-Styling zuruecksetzen. */ border: 0; padding: 0; min-width: 0; } .u21checks--verdauungscheck .option { display: flex; align-items: flex-start; gap: 12px; padding: 14px 1rem; border: 2px solid var(--u21checks-vc-border); border-radius: 12px; cursor: pointer; background: #fff; color: var(--u21checks-vc-text); font-size: 1rem; line-height: 1.45; transition: border-color .15s, background .15s; } .u21checks--verdauungscheck .option:hover { border-color: var(--u21checks-vc-primary); } .u21checks--verdauungscheck .option.checked { border-color: var(--u21checks-vc-primary); background: var(--u21checks-vc-primary-light); color: var(--u21checks-vc-primary-dark); font-weight: 600; } .u21checks--verdauungscheck .option input { margin-top: .2em; accent-color: var(--u21checks-vc-accent); width: 18px; height: 18px; flex: none; } /* Die Ausschluss-Option ("Keines davon trifft zu", "Keine der genannten") traegt zwar eine eigene Klasse, sieht aber BEWUSST aus wie jede andere Antwort - keine gestrichelte Umrandung, kein zusaetzlicher Abstand (Aenderung 26.09.2026 nach dem Test). Sie hatte beides, um zu zeigen, dass sie alle anderen Auswahlen aufhebt; im Test wirkte das aber wie eine Hervorhebung dieser einen Antwort. Keine Antwortmoeglichkeit darf optisch vor den anderen stehen. Die Klasse bleibt als Haken fuer QA und moegliche spaetere Verwendung erhalten - wer hier wieder etwas einfaerbt oder umrandet, hebt genau diese Entscheidung auf. Das Ausschluss-VERHALTEN ist davon unberuehrt und steckt im JS-Modul (opt.exclusive, siehe renderStepView()). */ .u21checks--verdauungscheck .nav-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 0.5rem; } .u21checks--verdauungscheck .hint { font-size: .82rem; color: var(--u21checks-vc-text-soft); margin: -10px 0 14px; } /* ------------------------------------------------------------------------- 5. ERGEBNIS ------------------------------------------------------------------------- */ .u21checks--verdauungscheck .result-kicker { font-size: .95rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--u21checks-vc-text-soft); margin-bottom: 4px; } .u21checks--verdauungscheck .result-headline { color: var(--u21checks-vc-primary-dark); margin-bottom: 18px; } .u21checks--verdauungscheck .result-text { margin-bottom: 1rem; } /* Produktbox der Ergebnisseiten A und B. Der Inhalt kommt vollstaendig aus einem redaktionell gepflegten TYPO3-Inhaltselement (vorgesehen: ce_productblock). Eine eingebaute Ersatzbox gibt es nicht mehr - die zugehoerigen Regeln sind am 19.09.2026 entfallen. Der Block bringt sein eigenes Bootstrap-Grid und die Farben des Website-Themes mit. Genau das ist der Punkt: er soll aussehen wie ueberall sonst auf der Seite. Deshalb hier KEINE eigene Flaeche, keine eigenen Farben und kein Innenabstand, sondern nur das Noetigste, damit er in die schmale Karte passt. Aufgehoben werden ausschliesslich die festen Breakpoint-Breiten von Bootstraps .container - die sind innerhalb einer 760px-Karte sinnlos. Die seitliche Polsterung bleibt ausdruecklich stehen: sie faengt die negativen Raender von .row auf. Wer sie mit entfernt, laesst den Block links und rechts um je 12px aus der Karte laufen. */ .u21checks--verdauungscheck .product-box { margin: 22px 0; } /* Solange die Box nicht gebraucht wird, liegt sie versteckt im Plugin-Container - und zwar als echter Knoten im Dokumentbaum, damit seitenweite Skripte sie mitbearbeiten (siehe renderProductBox() im JS-Modul). display:none haelt sie dabei aus dem Accessibility-Baum heraus. Das !important ist hier ausnahmsweise berechtigt: Wuerde irgendeine Theme-Regel das display der Box ueberschreiben, stuende eine komplette Produktbox mitsamt Kauf-Button auf der Seite, bevor der Test ueberhaupt gestartet wurde. */ .u21checks--verdauungscheck [data-u21checks-slot][hidden] { display: none !important; } /* Letzter Schritt zur sauberen Grenze: Das Root-Element setzt line-height und color, und beides VERERBT sich in die eingesetzten Inhaltselemente hinein - gegen Selektor-Sorgfalt hilft das nicht. Deshalb hier zurueckgesetzt, und zwar auf die Tokens des Website-Themes selbst statt auf feste Werte: Aendert das Theme seine Grundtypografie, folgen die Inhaltselemente automatisch mit. Die Fallbacks greifen nur, falls das Theme-CSS gar nicht geladen ist (etwa in einer isolierten Vorschau). */ .u21checks--verdauungscheck [data-u21checks-slot] { line-height: var(--bs-body-line-height, 1.5); color: var(--bs-body-color, inherit); } .u21checks--verdauungscheck .product-box .container, .u21checks--verdauungscheck .container.u21checks-cards { width: auto; max-width: none; } /* Card-Block unterhalb des CTA-Widgets (Ergebnis D): zwei redaktionell gepflegte Teaser nebeneinander. Der Wrapper ist ein .container - nicht aus Gewohnheit, sondern weil dessen seitliche Polsterung die negativen Raender von .row auffaengt. Ohne ihn laeuft der Block um je 12px aus der Karte. Die Spaltenklassen (col-md-6) stehen im Fluid-Template an den Slot-Containern selbst, damit zwischen Spalte und Card kein weiteres div liegt und Bootstraps Karten-Abstaende normal greifen. */ .u21checks--verdauungscheck .u21checks-cards { margin: 22px 0 0; } /* Zusatzmodule M1-M5, M7-M9: ruhige Infoboxen in der Hausfarbe. */ .u21checks--verdauungscheck .module-box { background: var(--u21checks-vc-primary-light); border-left: 4px solid var(--u21checks-vc-primary); padding: 1rem 18px; margin-bottom: 1rem; font-size: .95rem; } .u21checks--verdauungscheck .module-box h3 { margin: 0 0 6px; font-size: 1rem; color: var(--u21checks-vc-primary-dark); } .u21checks--verdauungscheck .module-box p:last-child { margin-bottom: 0; } /* Modul M6 - im Dokument ausdruecklich als orange Infobox beschrieben. */ .u21checks--verdauungscheck .abklaerung-box { background: var(--u21checks-vc-warn-bg); border-left: 4px solid var(--u21checks-vc-warn); padding: 1rem 18px; margin-bottom: 1rem; font-size: .95rem; color: var(--u21checks-vc-warn-fg); } .u21checks--verdauungscheck .abklaerung-box h3 { margin: 0 0 6px; font-size: 1rem; color: var(--u21checks-vc-warn-fg); } /* Warnzeichen / Sicherheitsausgang. */ /* Warnzeichen-Block unterhalb des Start-Buttons. Der Abstand nach oben ist mit 2rem bewusst gross - der Block soll sich deutlich vom Button absetzen und nicht wie dessen Beschriftung wirken. Nach unten kein Rand: den Abstand zur Kartenkante liefert die Polsterung der Karte. Farbgebung seit 29.09.2026 wie .q-hint, also die Warn- statt der Gefahrtoene. Groesse und Abstaende bleiben eigenstaendig: Der Block traegt mehr Text als ein Fragen-Hinweis und steht allein auf der Startkarte. Die frueheren Regeln fuer h3 und b sind entfallen - das aktuelle Markup nutzt strong, und eine rote Akzentfarbe waere in einer orangen Box ohnehin fehl am Platz gewesen. */ .u21checks--verdauungscheck .warn-box { background: var(--u21checks-vc-warn-bg); border-left: 4px solid var(--u21checks-vc-warn); padding: 1rem 18px; margin: 2rem 0 0; font-size: .95rem; color: var(--u21checks-vc-warn-fg); } /* Medizinischer Hinweis - im Dokument "immer sichtbar, Infobox". */ .u21checks--verdauungscheck .info-box { background: var(--u21checks-vc-neutral-bg); border: 1px solid var(--u21checks-vc-border); padding: 14px 1rem; margin-bottom: 1rem; font-size: .9rem; color: var(--u21checks-vc-text-soft); } .u21checks--verdauungscheck .info-box b { color: var(--u21checks-vc-text); } /* Kauf-Button der Produktergebnisse A und B. Nur der Abstand des Blocks - der Button selbst traegt ausschliesslich Theme-Klassen und wird hier bewusst NICHT angefasst (siehe renderBuyCta() im JS-Modul). */ .u21checks--verdauungscheck .u21checks-cta { margin: 2.5rem 0; } .u21checks--verdauungscheck .u21checks-cta .btn-buy { display: flex; justify-content: center; text-align: center; } /* CTA-Widget - nur Ergebnis C und D, seit 29.09.2026 nur noch zwei Buttons. */ .u21checks--verdauungscheck .cta-widget { margin: 2rem 0; } .u21checks--verdauungscheck .cta-widget h3 { margin: 0 0 14px; color: var(--u21checks-vc-primary-dark); } .u21checks--verdauungscheck .cta-buttons { display: flex; gap: 20px; flex-wrap: wrap; } .u21checks--verdauungscheck .cta-buttons .u21checks-btn { flex: 1 1 220px; } .u21checks--verdauungscheck .restart-row { text-align: center; margin-top: 18px; } .u21checks--verdauungscheck .divider { border: none; border-top: 1px solid var(--u21checks-vc-border); margin: 26px 0; } /* ------------------------------------------------------------------------- 6. DEBUG-PANEL Nur vorhanden, wenn im Plugin-FlexForm aktiviert (QA/Abnahme). bottom: 60px statt 16px, weil sitework-weite fixe Elemente (u. a. #scrolltop) die untere Ecke sonst gleichzeitig belegen. z-index auf dem maximal zulaessigen 32-Bit-Wert: z-index 50 lag hinter Elementen wie #cmpboxrecall (z-index 7999999) - als reines QA-Overlay soll das Panel IMMER ueber allem liegen. ------------------------------------------------------------------------- */ .u21checks--verdauungscheck .u21checks-debug-toggle { position: fixed; right: 1rem; bottom: 60px; background: var(--u21checks-vc-primary-dark); color: #fff; border: none; border-radius: 99px; padding: 10px 1rem; font-size: 12.5px; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); z-index: 2147483647; font-family: inherit; } .u21checks--verdauungscheck .u21checks-debug-panel { position: fixed; right: 1rem; bottom: 110px; width: 340px; max-height: 70vh; overflow: auto; background: #10202e; color: #dfe9ee; border-radius: 12px; padding: 1rem; font-size: 12px; box-shadow: 0 4px 16px rgba(0, 0, 0, .35); z-index: 2147483647; display: none; font-family: "SF Mono", Consolas, monospace; } .u21checks--verdauungscheck .u21checks-debug-panel.open { display: block; } .u21checks--verdauungscheck .u21checks-debug-panel h4 { margin: 0 0 0.5rem; color: #9fd8c8; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; } .u21checks--verdauungscheck .u21checks-debug-panel table { width: 100%; border-collapse: collapse; margin-bottom: 10px; } .u21checks--verdauungscheck .u21checks-debug-panel td { padding: 2px 4px; vertical-align: top; border-bottom: 1px solid rgba(255, 255, 255, .08); } .u21checks--verdauungscheck .u21checks-debug-panel .note { color: #e0b06b; } .u21checks--verdauungscheck .u21checks-debug-panel .ok { color: #8fd6a8; } .u21checks--verdauungscheck .u21checks-debug-panel .log { white-space: pre-wrap; color: #9fb4c0; font-size: 11px; } /* ------------------------------------------------------------------------- 7. DRUCK UND KLEINE VIEWPORTS ------------------------------------------------------------------------- */ @media print { .u21checks--verdauungscheck .u21checks-debug-toggle, .u21checks--verdauungscheck .u21checks-debug-panel, .u21checks--verdauungscheck .options, .u21checks--verdauungscheck .nav-row, .u21checks--verdauungscheck .restart-row, .u21checks--verdauungscheck .progress-track, .u21checks--verdauungscheck .progress-label { display: none !important; } } @media (max-width: 520px) { .u21checks--verdauungscheck .u21checks-app > .card { padding: 24px 18px; } .u21checks--verdauungscheck .cta-buttons { flex-direction: column; } .u21checks--verdauungscheck .cta-buttons .u21checks-btn { flex: 1 1 auto; } .u21checks--verdauungscheck .u21checks-debug-panel { left: 10px; right: 10px; width: auto; } }