/* DACH-Review-Vorlage: gesamter Stil. Quelle fuer public/assets/css/ctc-review-dach-.css; render.mjs schreibt die gehashte Datei. Entstanden aus dem abgenommenen Platin-Entwurf (15.09.2026). */ /* Entwurfsseite. Nimmt .space-aces-content-meta-ins h1 aus der globalen ctc-core zurueck: dort stehen hyphens:auto und word-break:break-word, die aus "Platin Casino" ein "Platin Casi-no" machen. Global nicht angefasst. */ .space-aces-content-meta-ins h1{ overflow-wrap:normal !important; word-break:normal !important; hyphens:manual !important; -webkit-hyphens:manual !important; } @media (max-width:480px){ .space-aces-content-meta-ins h1{font-size:1.7em;line-height:1.15em} } /* ctc:entwurf-css-start */ /* Ein Tabellenstil fuer die ganze Seite. Die Werte sind aus .ctc-facts-table uebernommen, der Tabelle, die Marlene als Massstab genannt hat: Karte mit 16px Radius, 4px Verlaufsbalken oben, Zebrazeilen, erste Spalte in Markenblau. Anders als dort hat diese Variante eine Kopfzeile und mehr als zwei Spalten. Nur auf dieser Seite definiert. */ html body .ctc-tabelle-einheitlich.wp-block-table{position:relative;border:1px solid rgba(34,58,177,.14);border-radius:16px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.05),0 8px 24px rgba(34,58,177,.06);margin:20px 0;background:#fff} html body .ctc-tabelle-einheitlich.wp-block-table::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#223AB1 0%,#223AB1 55%,#4cfdc8 100%);z-index:2} html body .ctc-tabelle-einheitlich table{border-collapse:separate;border-spacing:0;width:100%;margin:0;border:0;background:transparent;table-layout:auto} html body .ctc-tabelle-einheitlich thead th{padding:16px 20px 12px;border:0;border-bottom:1px solid rgba(34,58,177,.14);background:rgba(34,58,177,.03);font-family:"Poppins",system-ui,sans-serif;font-weight:700;font-size:.875rem;color:#223AB1;text-align:left;white-space:nowrap} html body .ctc-tabelle-einheitlich tbody tr{transition:background .18s ease} html body .ctc-tabelle-einheitlich tbody tr:nth-child(odd){background:#f6f7fd} html body .ctc-tabelle-einheitlich tbody tr:nth-child(even){background:#fff} /* Tabellen MIT Kopfzeile: die Kopfzeile ist grau, also beginnt der Rumpf weiss. Marlene am 14.09.2026: "nach der ersten grauen Zeile muss weiss folgen". Vorher war die erste Datenzeile ebenfalls grau. Die Farbe liegt auf den Zellen, weil eine Regel des Bestandes ungerade Zeilen zellenweise #f5f5f5 faerbt und sonst durchscheint; das gilt auch fuer die Zeilenkoepfe der Vergleichstabelle. Eckdaten und Pruefliste haben keine Kopfzeile und bleiben grau-weiss. */ /* Spezifitaet bewusst hoeher als die Bestandsregel .single-organization figure.wp-block-table tbody tr:nth-of-type(2n+1) td (3 Klassen, 4 Elemente), die sonst mit !important gewinnt. */ html body figure.wp-block-table.ctc-tabelle-einheitlich thead + tbody tr:nth-child(odd) > *{background:#fff !important} html body figure.wp-block-table.ctc-tabelle-einheitlich thead + tbody tr:nth-child(even) > *{background:#f5f5f5 !important} html body .ctc-tabelle-einheitlich tbody tr:hover{background:#eefdf8} html body .ctc-tabelle-einheitlich tbody td{padding:14px 20px;border:0;border-bottom:1px solid rgba(34,58,177,.08);vertical-align:top;line-height:1.5;font-size:.9375rem;color:#374151} html body .ctc-tabelle-einheitlich tbody tr:last-child td{border-bottom:0} html body .ctc-tabelle-einheitlich tbody td:first-child{font-family:"Poppins",system-ui,sans-serif;font-weight:700;color:#223AB1;background:rgba(34,58,177,.03);white-space:nowrap} /* Nur bei Tabellen MIT Kopfzeile ist die letzte Spalte ein kurzer Wert (der Bonuscode). Die Pruefliste hat keine Kopfzeile und traegt dort ganze Saetze; ohne diese Einschraenkung wuchs sie auf 1832px in einem 839px breiten Kasten. */ /* Fett und ohne Umbruch nur dort, wo die letzte Spalte ein Bonuscode ist. In der Limittabelle war sonst 15.000 € fett und 7.500 € nicht. */ html body .ctc-code-tabelle thead + tbody td:last-child{font-weight:700;color:#111827;letter-spacing:.01em;white-space:nowrap} .ctc-nowrap{white-space:nowrap} /* Pruefliste: zwei Spalten, erste schmal, zweite umbrechend. */ html body .ctc-pruefliste table{table-layout:fixed} /* Zahlungstabelle war 827px breit im 768px-Kasten: Kopfzeile darf umbrechen. */ html body .ctc-zahlungswege thead th{white-space:normal} html body .ctc-pruefliste tbody td:first-child{width:32%;white-space:normal} html body .ctc-pruefliste tbody td:last-child{font-weight:400} html body .ctc-pruefliste tbody td:last-child{white-space:normal;word-break:normal;overflow-wrap:anywhere} @media (max-width:600px){ html body .ctc-tabelle-einheitlich thead th{padding:14px 14px 10px;font-size:.8125rem} html body .ctc-tabelle-einheitlich tbody td{padding:12px 14px;font-size:.875rem} } /* Abstaende. Die einzelnen Werte waren in Ordnung, sie summierten sich nur: 81px vor der Pruefzeile, 48px danach, 95px bis zur Tabelle. Im Browser gemessen am 09.09.2026. */ /* Autorzeile oben, Marlene am 15.09.2026: "sieht nicht so schoen aus ... der Text soll weiter links gleich mit den ersten Template-Elementen". Die Huelle reservierte 52px fuer ein Autorenbild, das es nicht gibt. */ html body .space-page-content-meta.ctc-autorzeile{margin:0 0 18px !important;padding:0 0 12px !important;min-height:0 !important;height:auto !important;visibility:visible !important;overflow:visible !important} html body .ctc-autorzeile .space-page-content-meta-ins{display:flex !important;flex-wrap:wrap;align-items:center;row-gap:2px;padding-left:0 !important;min-height:0 !important;font-size:.875rem;line-height:1.5;color:#6b7280} html body .ctc-autorzeile__autor a{color:#1a1a1a;font-weight:600;text-decoration:none !important} html body .ctc-autorzeile__trenner{margin:0 .5em;color:#9ca3af} html body .ctc-autorzeile__aufrufe i{margin-right:.3em;opacity:.7} html body .wp-block-group:has(+ .ctc-toc2--mobil){margin-bottom:22px !important} /* Pruefung 15.09.2026. Tastaturfokus: der Bestand setzt outline:0 !important auf :focus, ohne Ersatz sieht niemand, wo er mit der Tabulatortaste steht. */ html body :is(a,button,summary,input,select,textarea,[tabindex]):focus-visible{outline:3px solid #223AB1 !important;outline-offset:2px !important} /* Floating Bar: faehrt ein, wenn die Kopfkarte aus dem Bild ist, und verschwindet vor dem Footer. Unter dem Pop-up (z-index 99998). */ html body .ctc-floatbar{position:fixed;left:0;right:0;bottom:0;z-index:9990;background:#223AB1;color:#fff;box-shadow:0 -6px 24px rgba(10,22,53,.25);transform:translateY(110%);visibility:hidden;transition:transform .3s ease,visibility 0s linear .3s;font-family:"Open Sans",Roboto,-apple-system,sans-serif} html body .ctc-floatbar.ist-an{transform:translateY(0);visibility:visible;transition:transform .3s ease} html body .ctc-floatbar__in{max-width:1180px;margin:0 auto;padding:10px 32px 10px 16px;display:flex;align-items:center;gap:14px;position:static} html body .ctc-floatbar__logo{width:48px;height:48px;border-radius:10px;object-fit:contain;background:#0a1635;flex:none;margin:0} html body .ctc-floatbar__text{margin:0 !important;flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35;font-size:.9375rem;color:#fff !important} html body .ctc-floatbar__text strong{font-weight:700;color:#fff} html body .ctc-floatbar__text span{color:#4cfdc8;font-weight:600} html body .ctc-floatbar__cta{display:flex;align-items:center;flex:none} html body .ctc-floatbar__btn{display:inline-block;background:#4cfdc8;color:#223AB1 !important;font-weight:700;font-size:1rem;padding:11px 26px;border-radius:8px;text-decoration:none !important;white-space:nowrap} html body .ctc-floatbar__btn:hover{background:#7dffd9} /* Schliessen in der Ecke der Leiste selbst, nicht des Inhaltsblocks */ html body .ctc-floatbar__x{position:absolute;top:5px;right:8px;width:20px;height:20px;border:0;border-radius:50%;background:transparent;color:rgba(255,255,255,.55);font-size:15px;line-height:20px;cursor:pointer;padding:0;text-align:center} html body .ctc-floatbar__x::after{content:"";position:absolute;inset:-10px} html body .ctc-floatbar__x:hover,html body .ctc-floatbar__x:focus-visible{color:#fff;background:rgba(255,255,255,.14)} /* Handy: Logo, Paket und Knopf in einer Zeile, Markenname nur fuer Screenreader (das Logo zeigt ihn). */ @media (max-width:599px){ html body .ctc-floatbar__in{padding:8px 30px 8px 12px;gap:10px} html body .ctc-floatbar__logo{width:40px;height:40px} html body .ctc-floatbar__text{flex:1 1 0;font-size:.8125rem;line-height:1.3} html body .ctc-floatbar__text strong{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} html body .ctc-floatbar__btn{font-size:.875rem;padding:10px 12px} html body .ctc-floatbar__x{top:3px;right:4px} } @media (prefers-reduced-motion:reduce){html body .ctc-floatbar,html body .ctc-floatbar.ist-an{transition:none}} /* FAQ-Antworten waren 13px grau, der kleinste Text der Seite */ html body .wp-block-yoast-faq-block .schema-faq-answer{font-size:.9375rem !important;line-height:1.6 !important;color:#374151 !important} /* Nummerierte Schritte: der Bestand malt vor jedes li einen Punkt, auch in ol */ html body.single-organization .space-page-content ol.wp-block-list{counter-reset:ctc-schritt;list-style:none !important;padding-left:2.2em !important} html body.single-organization .space-page-content ol.wp-block-list>li{counter-increment:ctc-schritt;position:relative;list-style:none !important;padding-left:0 !important;margin-bottom:10px} /* Listen im Fliesstext wie der Fliesstext: der Bestand gibt li 16px (Absaetze 15px) und der Schrittliste ein Grau. Marlene am 15.09.2026: "wirkt groesser". */ html body.single-organization .space-page-content ol.wp-block-list>li,html body.single-organization .space-page-content .ctc-rg-check__list>li{font-size:15px !important;line-height:1.65 !important;color:#000 !important} html body.single-organization .space-page-content ol.wp-block-list>li strong{color:inherit !important} html body.single-organization .space-page-content ol.wp-block-list>li::before{content:counter(ctc-schritt) !important;position:absolute !important;left:-2.4em !important;top:.1em !important;width:1.75em !important;height:1.75em !important;border:0 !important;border-radius:50% !important;background:#223AB1 !important;color:#fff !important;font-size:.8125rem !important;font-weight:700 !important;line-height:1.75em !important;text-align:center !important} /* Der Scroll-Umschlag traegt margin-top:23,2px. Dadurch stand der Verlaufsbalken 24px ueber der ersten Zeile und wirkte losgeloest. */ html body .ctc-tabelle-einheitlich .ctc-table-scroll{margin:0 !important} html body .ctc-tabelle-einheitlich table{margin-bottom:0 !important} html body .ctc-facts-source{margin-top:16px} html body .ctc-facts-source{margin-bottom:16px} html body .space-page-content h2.wp-block-heading{margin-top:40px} /* Trennlinie ueber der entfernten Gesamtbewertung: Unterrand des Inhaltskastens. Ohne den Block darunter trennt sie nichts mehr. */ html body .space-page-content-box-wrap{border-bottom:0 !important} /* Kopfkarte links. Marlene am 14.09.2026: "Jetzt spielen" in einer Zeile statt dreier Umbrueche, die Beschriftung "Bonus" etwas groesser und blau. Die Kontrastregel des Bestandes setzt Farben mit !important, deshalb hier dieselbe Staerke. */ /* Korrektur am 14.09.2026: gemeint war die Beschriftung "Bonus:" in Blau, nicht der Betrag. Der Betrag hat wieder Textfarbe und die alte Groesse, dadurch passt er wieder auf zwei Zeilen statt vier. */ html body .space-organization-content-info > div:first-child{color:#223AB1 !important;font-size:15px !important;font-weight:700 !important;line-height:1.3em !important} html body .space-organization-content-info strong{hyphens:manual !important;-webkit-hyphens:manual !important;word-break:normal !important;overflow-wrap:normal !important} html body .space-organization-content-button a{white-space:nowrap !important;padding:12px 18px !important;display:inline-flex !important;align-items:center;gap:6px} html body .space-organization-content-button a i{padding-left:0 !important} /* Inhaltsverzeichnis. Desktop klebend links unter der Kopfkarte, Handy eingeklappt im Text. */ html body .ctc-toc2 ol{list-style:none;margin:0;padding:0} html body .ctc-toc2 li{margin:0;padding:0} html body .ctc-toc2 a{display:block;padding:7px 10px;border-radius:8px;color:#223AB1;font-weight:600;font-size:.9375rem;text-decoration:none !important;line-height:1.3} html body .ctc-toc2 a:hover{background:rgba(34,58,177,.06)} /* Damit das Verzeichnis klebt, zwei Eingriffe, im Browser ermittelt: 1. Die Spaltenleiste ist ein Grid mit align-items:start, die linke Spalte war deshalb nur so hoch wie die Kopfkarte (1.032px) und liess dem Verzeichnis keinen Weg. Sie wird auf volle Hoehe gezogen; die Spalte selbst hat keinen Rahmen, die Karte ist ein Kind darin. 2. body traegt overflow:hidden gegen seitliches Scrollen. Das macht position:sticky auf der ganzen Seite wirkungslos. overflow-x:clip verhindert das seitliche Scrollen ebenso, ohne das Kleben zu brechen. Gegenprobe im Browser: keine seitliche Scrollleiste. */ @media (min-width:981px){html body .space-aces-content-section > .space-aces-content-meta.box-33{align-self:stretch}} html body{overflow-x:clip !important;overflow-y:visible !important} html{overflow-x:clip !important} /* Gleich breit wie die Kopfkarte darueber, Marlene am 14.09.2026. Die Karte sitzt mit 15px Rand links und rechts in der 280px-Spalte (250px breit), das Verzeichnis hatte keinen Rand und war 280px breit. Ecken wie die Karte. */ html body .ctc-toc2--seite{position:sticky;top:110px;margin:20px 15px 0;padding:14px 10px;border:1px solid rgba(34,58,177,.14);border-radius:12px;background:#fff} html body .ctc-toc2__titel{margin:0 0 6px 10px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#5d6d7e;font-weight:700} html body .ctc-toc2--mobil{display:none;margin:20px 0;border:1px solid rgba(34,58,177,.16);border-radius:12px;background:#fff} html body .ctc-toc2--mobil summary{cursor:pointer;padding:12px 16px;font-weight:700;color:#223AB1;list-style:none} html body .ctc-toc2--mobil summary::-webkit-details-marker{display:none} html body .ctc-toc2--mobil summary::after{content:" \25BE";} html body .ctc-toc2--mobil[open] summary::after{content:" \25B4";} html body .ctc-toc2--mobil nav{padding:0 8px 10px} @media (max-width:980px){ html body .ctc-toc2--seite{display:none} html body .ctc-toc2--mobil{display:block} } /* Bonus-Simulator. Gestaltung des bestehenden Rechners, dazu Reiter, sechs Zellen und die Erklaerung. */ html body .ctc-bonus-calc.ctc-bonus-sim .ctc-bonus-calc__grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important} html body .ctc-bonus-sim__tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px} html body .ctc-bonus-sim__tab{flex:1 1 auto;min-width:120px;padding:10px 12px;border:1px solid rgba(34,58,177,.25);border-radius:999px;background:#fff;color:#223AB1;font-weight:700;font-size:.9rem;cursor:pointer} html body .ctc-bonus-sim__tab[aria-pressed="true"]{background:#223AB1;color:#fff;border-color:#223AB1} html body .ctc-bonus-sim__stufe{margin:8px 0 0;font-size:.875rem;color:#5d6d7e} html body .ctc-bonus-sim__erklaerung{margin-top:16px;padding:14px 16px;border-radius:12px;background:#f6f7fd;font-size:.9375rem;line-height:1.55;color:#374151} @media (max-width:600px){html body .ctc-bonus-calc.ctc-bonus-sim .ctc-bonus-calc__grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}} /* Empfehlungskacheln, bewusst schlicht: Logo, Name mittig, Bonus, zwei Verweise. Keine Tabelle, keine Datenzeilen. Nur auf dieser Seite. */ html body .ctc-alt-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch;margin:24px 0} html body .ctc-alt-card{display:flex;flex-direction:column;align-items:center;text-align:center;background:#fff;border:1px solid rgba(34,58,177,.16);border-radius:14px;padding:22px 18px 18px} html body .ctc-alt-card__head{display:flex;flex-direction:column;align-items:center;gap:12px;text-decoration:none} html body .ctc-alt-card__logo{display:block;width:96px;height:96px;object-fit:contain;border-radius:10px;margin:0} html body .ctc-alt-card__title{font-family:"Poppins",system-ui,sans-serif;font-size:1.0625rem;font-weight:700;line-height:1.3;color:#223AB1;text-align:center} html body .ctc-alt-card__bonus{margin:14px 0 0;font-size:.9375rem;line-height:1.45;color:#111827;font-weight:600;text-align:center} /* margin-top:auto schiebt die beiden Knoepfe auf gleiche Hoehe, auch wenn der Bonus bei einer Marke zweizeilig wird. */ html body .ctc-alt-card__cta{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin:18px 0 0;padding:0;width:100%;margin-top:auto} html body .ctc-alt-card__review{text-align:center;font-size:.875rem;font-weight:600;color:#223AB1;text-decoration:none !important;padding:9px 10px;border:1px solid rgba(34,58,177,.25);border-radius:999px} html body .ctc-alt-card__review:hover{background:rgba(34,58,177,.05)} html body .ctc-alt-card__cta .ctc-btn{text-align:center} @media (max-width:900px){html body .ctc-alt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:560px){html body .ctc-alt-grid{grid-template-columns:1fr}} /* ============ Alle Geraete. Marlene am 14.09.2026: "Optimiere die Seite mal vollstaendig fuer alle Geraete." Gemessen in Rahmen von 320 bis 1440px. 1 Spalten. Das globale Layout haelt drei Spalten bis 901px: Kopfkarte 280px, Text, Seitenleiste 280px. Der Text war bei 1024px nur 352px breit, bei 1280px 608px; jede Tabelle lief ueber. Die echte Seite hat das auch, geaendert wird es nur hier. Unter 1280px (bis 15.09.2026: 1400px) rutscht die Seitenleiste unter den Text, unter 981px auch die Kopfkarte ueber den Text. */ @media (max-width:1279px){ html body .ctc-review-layout{display:block} html body .ctc-review-sidebar{width:100%;margin-top:1.5rem} /* Unter dem Text liegen Banner, Listen und neue Casinos nebeneinander. Auf voller Breite war das Banner bei 1024px 972px breit und 846px hoch. */ html body .ctc-review-sidebar > .space-sidebar-section{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;align-items:start;float:none} html body .ctc-review-sidebar > .space-sidebar-section > *{margin:0 !important;min-width:0} html body .ctc-review-sidebar .ctc-sb-banner img{width:100%;height:auto;max-width:402px} } @media (max-width:980px){ html body.single-organization .space-aces-content-section{grid-template-columns:minmax(0,1fr) !important;row-gap:1.5rem !important} } /* 2 Tabellen. Kopfzeilen duerfen umbrechen. Ist die Tabelle selbst zu schmal fuer ihre Spalten, wird jede Zeile eine Karte: erste Zelle als Titel, darunter Beschriftung links, Wert rechts. Gemessen wird die Tabelle, nicht der Bildschirm, weil die Textbreite von den Spalten ringsum abhaengt. Die Schwelle steht je Tabelle in STAPEL. Tabellen ohne Kopfzeile (Pruefliste) haben zwei Spalten und bleiben Tabellen. */ html body figure.wp-block-table.ctc-tabelle-einheitlich{container-type:inline-size} html body .ctc-tabelle-einheitlich thead th{white-space:normal} html body .ctc-schaetzung{display:block;font-size:.75rem;line-height:1.3;color:#5d6d7e} /* Kartenansicht nach Spaltenzahl (Klasse ctc-spalten-N vom Renderer). Schwelle = Breite der Tabelle selbst. 4 Spalten ab 600px, damit die Spieletabelle bei 1280px (Textspalte 608px) Tabelle bleibt (Pruefung 15.09.2026). */ @container (max-width:600px){ html body figure.wp-block-table.ctc-tabelle-einheitlich.ctc-spalten-3 table:has(> thead){display:block} html body figure.wp-block-table.ctc-tabelle-einheitlich.ctc-spalten-3 thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} html body figure.wp-block-table.ctc-tabelle-einheitlich.ctc-spalten-3 thead + tbody{display:block;width:100%} html body figure.wp-block-table.ctc-tabelle-einheitlich.ctc-spalten-3 thead + tbody tr{display:block;width:100%;padding:0 0 10px;border-bottom:1px solid rgba(34,58,177,.08)} html body figure.wp-block-table.ctc-tabelle-einheitlich.ctc-spalten-3 thead + tbody tr:nth-child(odd){background:#fff} html body figure.wp-block-table.ctc-tabelle-einheitlich.ctc-spalten-3 thead + tbody tr:nth-child(even){background:#f5f5f5} html body figure.wp-block-table.ctc-tabelle-einheitlich.ctc-spalten-3 thead + tbody tr:last-child{border-bottom:0} html body figure.wp-block-table.ctc-tabelle-einheitlich.ctc-spalten-3 thead + tbody tr > *{display:flow-root;width:auto;padding:3px 18px 3px calc(18px + 38cqi + 12px) !important;border:0 !important;white-space:normal !important;text-align:left;font-size:.9375rem;line-height:1.45} html body figure.wp-block-table.ctc-tabelle-einheitlich.ctc-spalten-3 thead + tbody tr > *::before{content:attr(data-label);float:left;width:38cqi;margin-left:calc(-38cqi - 12px);font-family:"Poppins",system-ui,sans-serif;font-weight:600;font-size:.8125rem;line-height:1.6;color:#5d6d7e} html body figure.wp-block-table.ctc-tabelle-einheitlich.ctc-spalten-3 thead + tbody tr > :first-child{display:block;padding:12px 18px 6px !important;font-size:1rem !important;text-transform:none !important;letter-spacing:0 !important;color:#223AB1 !important;font-weight:700} html body figure.wp-block-table.ctc-tabelle-einheitlich.ctc-spalten-3 thead + tbody tr > :first-child::before{content:none} /* Die globale Regel .ctc-table td setzt Innenabstand und Farbe mit !important; ohne dieselbe Staerke rutschte die Beschriftung links aus dem Kasten. Im Browser bei 390px gefunden. */ } @container (max-width:600px){ html body figure.wp-block-table.ctc-tabelle-einheitlich.ctc-spalten-4 table:has(> thead){display:block} html body figure.wp-block-table.ctc-tabelle-einheitlich.ctc-spalten-4 thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} html body figure.wp-block-table.ctc-tabelle-einheitlich.ctc-spalten-4 thead + tbody{display:block;width:100%} html body figure.wp-block-table.ctc-tabelle-einheitlich.ctc-spalten-4 thead + tbody tr{display:block;width:100%;padding:0 0 10px;border-bottom:1px solid rgba(34,58,177,.08)} html body figure.wp-block-table.ctc-tabelle-einheitlich.ctc-spalten-4 thead + tbody tr:nth-child(odd){background:#fff} html body figure.wp-block-table.ctc-tabelle-einheitlich.ctc-spalten-4 thead + tbody tr:nth-child(even){background:#f5f5f5} html body figure.wp-block-table.ctc-tabelle-einheitlich.ctc-spalten-4 thead + tbody tr:last-child{border-bottom:0} html body figure.wp-block-table.ctc-tabelle-einheitlich.ctc-spalten-4 thead + tbody tr > *{display:flow-root;width:auto;padding:3px 18px 3px calc(18px + 38cqi + 12px) !important;border:0 !important;white-space:normal !important;text-align:left;font-size:.9375rem;line-height:1.45} html body figure.wp-block-table.ctc-tabelle-einheitlich.ctc-spalten-4 thead + tbody tr > *::before{content:attr(data-label);float:left;width:38cqi;margin-left:calc(-38cqi - 12px);font-family:"Poppins",system-ui,sans-serif;font-weight:600;font-size:.8125rem;line-height:1.6;color:#5d6d7e} html body figure.wp-block-table.ctc-tabelle-einheitlich.ctc-spalten-4 thead + tbody tr > :first-child{display:block;padding:12px 18px 6px !important;font-size:1rem !important;text-transform:none !important;letter-spacing:0 !important;color:#223AB1 !important;font-weight:700} html body figure.wp-block-table.ctc-tabelle-einheitlich.ctc-spalten-4 thead + tbody tr > :first-child::before{content:none} /* Die globale Regel .ctc-table td setzt Innenabstand und Farbe mit !important; ohne dieselbe Staerke rutschte die Beschriftung links aus dem Kasten. Im Browser bei 390px gefunden. */ } @container (max-width:760px){ html body figure.wp-block-table.ctc-tabelle-einheitlich.ctc-spalten-5 table:has(> thead){display:block} html body figure.wp-block-table.ctc-tabelle-einheitlich.ctc-spalten-5 thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} html body figure.wp-block-table.ctc-tabelle-einheitlich.ctc-spalten-5 thead + tbody{display:block;width:100%} html body figure.wp-block-table.ctc-tabelle-einheitlich.ctc-spalten-5 thead + tbody tr{display:block;width:100%;padding:0 0 10px;border-bottom:1px solid rgba(34,58,177,.08)} html body figure.wp-block-table.ctc-tabelle-einheitlich.ctc-spalten-5 thead + tbody tr:nth-child(odd){background:#fff} html body figure.wp-block-table.ctc-tabelle-einheitlich.ctc-spalten-5 thead + tbody tr:nth-child(even){background:#f5f5f5} html body figure.wp-block-table.ctc-tabelle-einheitlich.ctc-spalten-5 thead + tbody tr:last-child{border-bottom:0} html body figure.wp-block-table.ctc-tabelle-einheitlich.ctc-spalten-5 thead + tbody tr > *{display:flow-root;width:auto;padding:3px 18px 3px calc(18px + 38cqi + 12px) !important;border:0 !important;white-space:normal !important;text-align:left;font-size:.9375rem;line-height:1.45} html body figure.wp-block-table.ctc-tabelle-einheitlich.ctc-spalten-5 thead + tbody tr > *::before{content:attr(data-label);float:left;width:38cqi;margin-left:calc(-38cqi - 12px);font-family:"Poppins",system-ui,sans-serif;font-weight:600;font-size:.8125rem;line-height:1.6;color:#5d6d7e} html body figure.wp-block-table.ctc-tabelle-einheitlich.ctc-spalten-5 thead + tbody tr > :first-child{display:block;padding:12px 18px 6px !important;font-size:1rem !important;text-transform:none !important;letter-spacing:0 !important;color:#223AB1 !important;font-weight:700} html body figure.wp-block-table.ctc-tabelle-einheitlich.ctc-spalten-5 thead + tbody tr > :first-child::before{content:none} /* Die globale Regel .ctc-table td setzt Innenabstand und Farbe mit !important; ohne dieselbe Staerke rutschte die Beschriftung links aus dem Kasten. Im Browser bei 390px gefunden. */ } @container (max-width:760px){ html body figure.wp-block-table.ctc-tabelle-einheitlich.ctc-spalten-6 table:has(> thead){display:block} html body figure.wp-block-table.ctc-tabelle-einheitlich.ctc-spalten-6 thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} html body figure.wp-block-table.ctc-tabelle-einheitlich.ctc-spalten-6 thead + tbody{display:block;width:100%} html body figure.wp-block-table.ctc-tabelle-einheitlich.ctc-spalten-6 thead + tbody tr{display:block;width:100%;padding:0 0 10px;border-bottom:1px solid rgba(34,58,177,.08)} html body figure.wp-block-table.ctc-tabelle-einheitlich.ctc-spalten-6 thead + tbody tr:nth-child(odd){background:#fff} html body figure.wp-block-table.ctc-tabelle-einheitlich.ctc-spalten-6 thead + tbody tr:nth-child(even){background:#f5f5f5} html body figure.wp-block-table.ctc-tabelle-einheitlich.ctc-spalten-6 thead + tbody tr:last-child{border-bottom:0} html body figure.wp-block-table.ctc-tabelle-einheitlich.ctc-spalten-6 thead + tbody tr > *{display:flow-root;width:auto;padding:3px 18px 3px calc(18px + 38cqi + 12px) !important;border:0 !important;white-space:normal !important;text-align:left;font-size:.9375rem;line-height:1.45} html body figure.wp-block-table.ctc-tabelle-einheitlich.ctc-spalten-6 thead + tbody tr > *::before{content:attr(data-label);float:left;width:38cqi;margin-left:calc(-38cqi - 12px);font-family:"Poppins",system-ui,sans-serif;font-weight:600;font-size:.8125rem;line-height:1.6;color:#5d6d7e} html body figure.wp-block-table.ctc-tabelle-einheitlich.ctc-spalten-6 thead + tbody tr > :first-child{display:block;padding:12px 18px 6px !important;font-size:1rem !important;text-transform:none !important;letter-spacing:0 !important;color:#223AB1 !important;font-weight:700} html body figure.wp-block-table.ctc-tabelle-einheitlich.ctc-spalten-6 thead + tbody tr > :first-child::before{content:none} /* Die globale Regel .ctc-table td setzt Innenabstand und Farbe mit !important; ohne dieselbe Staerke rutschte die Beschriftung links aus dem Kasten. Im Browser bei 390px gefunden. */ } /* Zwei-Spalten-Tabellen ohne Kopfzeile (Pruefliste). Am Handy war die erste Spalte zu schmal: "Willkom-mensbonus" wurde getrennt und die Lizenznummer brach mitten in der Zahl um. Unter 460px Tabellenbreite steht die Bezeichnung klein ueber dem Wert. */ html body figure.wp-block-table.ctc-pruefliste{container-type:inline-size} @container (max-width:460px){ html body figure.wp-block-table.ctc-pruefliste table,html body figure.wp-block-table.ctc-pruefliste tbody,html body figure.wp-block-table.ctc-pruefliste tbody tr{display:block;width:100% !important} html body figure.wp-block-table.ctc-pruefliste tbody tr td{display:block;width:auto !important;white-space:normal !important;border:0 !important;hyphens:manual !important;-webkit-hyphens:manual !important;word-break:normal !important;overflow-wrap:break-word !important} html body figure.wp-block-table.ctc-pruefliste tbody tr td:first-child{padding:12px 16px 0 !important;font-size:.75rem !important;letter-spacing:.04em;text-transform:uppercase;color:#223AB1 !important;font-weight:700} html body figure.wp-block-table.ctc-pruefliste tbody tr td:last-child{padding:2px 16px 12px !important;font-size:.9375rem !important} html body figure.wp-block-table.ctc-pruefliste tbody tr td:first-child strong{font-weight:700} } /* 3 Vorteile & Nachteile am Handy. Marlene am 14.09.2026: "zuerst die Vorteile dann die Nachteile". Die globale Regel stapelt die Tabelle unter 600px zeilenweise, dadurch wechselten Vorteil und Nachteil ab. Die Zellen werden hier umsortiert: Kopf Vorteile, alle Vorteile, Kopf Nachteile, alle Nachteile. Leere Zellen (weniger Nachteile als Vorteile) fallen weg. */ @media (max-width:599px){ html body .wp-block-table.ctc-table.ctc-pros-cons table{display:flex !important;flex-direction:column;border-spacing:0 !important} html body .wp-block-table.ctc-table.ctc-pros-cons thead,html body .wp-block-table.ctc-table.ctc-pros-cons tbody,html body .wp-block-table.ctc-table.ctc-pros-cons tr{display:contents !important} html body .wp-block-table.ctc-table.ctc-pros-cons thead th:first-child{order:1} html body .wp-block-table.ctc-table.ctc-pros-cons tbody td:first-child{order:2} html body .wp-block-table.ctc-table.ctc-pros-cons thead th:last-child{order:3;margin-top:16px} html body .wp-block-table.ctc-table.ctc-pros-cons tbody td:last-child{order:4} html body .wp-block-table.ctc-table.ctc-pros-cons tbody td:empty{display:none !important} html body .wp-block-table.ctc-table.ctc-pros-cons tbody tr:has(+ tr > td:last-child:empty) > td:last-child,html body .wp-block-table.ctc-table.ctc-pros-cons tbody tr:last-child > td:last-child:not(:empty){border-radius:0 0 14px 14px} } /* 4 Abstaende am Handy. Marlene am 14.09.2026: "Die Abstaende vor und nach den Ueberschriften und Elementen passen am Smartphone nicht." Gemessen bei 390px: Absaetze hatten 0px Aussenabstand, aber 21,75px Innenabstand unten, Ueberschriften feste Aussenabstaende. Sichtbar wurden daraus rund 70px vor einer H2, 20px danach, 34px um Vorteile & Nachteile, 10px nach einer H3 und 75px vor "Weitere Themen". Jetzt ein Raster: H2 36px davor und 12px danach, H3 24px und 8px, Absatz 14px, Tabellen und Bloecke 16px, Quellenzeile direkt unter der Tabelle 10px. Absaetze in Tabellen, Kacheln, Kaesten, FAQ und im Simulator behalten ihre eigenen Abstaende. */ @media (max-width:768px){ html body .space-page-content h2.wp-block-heading{margin-top:36px !important;margin-bottom:12px !important} html body .space-page-content h3.wp-block-heading{margin-top:24px !important;margin-bottom:8px !important} html body .space-page-content p:not(:where(table p, figure p, aside p, details p, li p, [data-ctc-bonus-sim] p, .ctc-alt-card p, .schema-faq-section p, blockquote p)){padding-bottom:0 !important;margin:0 0 14px !important} html body .space-page-content p:not(:where(table p, figure p, aside p, details p, li p, [data-ctc-bonus-sim] p, .ctc-alt-card p, .schema-faq-section p, blockquote p)):last-child{margin-bottom:0 !important} html body .space-page-content figure.wp-block-table.ctc-table,html body .space-page-content .ctc-alt-grid,html body .space-page-content .ctc-toc2--mobil,html body .space-page-content [data-ctc-bonus-sim]{margin-top:16px !important;margin-bottom:16px !important} html body .space-page-content figure.wp-block-table.ctc-table + p.ctc-banking-source,html body .space-page-content figure.wp-block-table.ctc-table + p.ctc-facts-source{margin-top:-6px !important} html body .space-page-content .ctc-related-hubs{margin-top:24px !important;margin-bottom:16px !important} html body .space-page-content .ctc-related-hubs .ctc-related-hubs__title{margin-top:0 !important} /* Direkt unter einer H2 gilt nur deren Abstand: H3 (Support), Liste (Registrierung) und FAQ-Block standen 18 bis 24px darunter. */ html body .space-page-content h2.wp-block-heading + h3.wp-block-heading,html body .space-page-content h2.wp-block-heading + .wp-block-list,html body .space-page-content h2.wp-block-heading + .schema-faq{margin-top:0 !important} } /* Hilfeblock DACH im Lizenzabschnitt */ html body .ctc-hilfe{margin:20px 0;padding:16px 18px;border:1px solid rgba(34,58,177,.14);border-left:4px solid #223AB1;border-radius:12px;background:#f6f7fd} html body .ctc-hilfe__titel{margin:0 0 8px !important;padding:0 !important;font-family:"Poppins",system-ui,sans-serif;font-weight:700;color:#223AB1;font-size:1rem} html body .ctc-hilfe__liste{list-style:none;margin:0 !important;padding:0 !important} html body .ctc-hilfe__liste li{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;margin:0;padding:8px 0;border-top:1px solid rgba(34,58,177,.1);font-size:.9375rem;line-height:1.5} html body .ctc-hilfe__liste li:first-child{border-top:0} html body .ctc-hilfe__liste li::before{content:none !important} html body .ctc-hilfe__land{font-weight:700;color:#111827} @media (max-width:480px){html body .ctc-hilfe__liste li{grid-template-columns:1fr;gap:2px}} /* Fuer wen: zwei Karten nebeneinander, am Handy untereinander */ html body .ctc-fuerwen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:20px 0} html body .ctc-fuerwen__karte{padding:18px 20px;border-radius:14px;border:1px solid;border-top-width:4px} html body .ctc-fuerwen__karte--ja{background:#f0fdf7;border-color:rgba(22,163,74,.35)} html body .ctc-fuerwen__karte--nein{background:#fff7f7;border-color:rgba(220,38,38,.3)} html body .ctc-fuerwen__titel{margin:0 0 10px !important;padding:0 !important;font-family:"Poppins",system-ui,sans-serif;font-weight:700;font-size:1.0625rem} html body .ctc-fuerwen__karte--ja .ctc-fuerwen__titel{color:#166534} html body .ctc-fuerwen__karte--nein .ctc-fuerwen__titel{color:#9f1239} html body .ctc-fuerwen__karte ul{list-style:none;margin:0 !important;padding:0 !important} /* Die Bestandsregel .space-page-content ul li setzt list-style:disc direkt auf den Punkt, eine weitere leert ::before; deshalb !important. */ html body .ctc-fuerwen__karte li{position:relative;list-style:none !important;margin:0 0 8px !important;padding:0 0 0 26px !important;line-height:1.45} html body .ctc-fuerwen__karte li:last-child{margin-bottom:0} /* Das Zeichen steht als span im Markup: eine globale Regel erzwingt content:none auf ::before von Listenpunkten. */ html body .ctc-fuerwen__icon{position:absolute;left:0;top:0;font-weight:700;line-height:1.45} html body .ctc-fuerwen__karte--ja .ctc-fuerwen__icon{color:#16a34a} html body .ctc-fuerwen__karte--nein .ctc-fuerwen__icon{color:#dc2626} @media (max-width:600px){html body .ctc-fuerwen{grid-template-columns:1fr}} /* ctc:entwurf-css-end */ /* ============ Pruefung 15.09.2026, Teil 3 (Design) ============ */ /* Textbreite: bei breiten Bildschirmen hatte die Textspalte rund 120 Zeichen je Zeile. Die Huelle erlaubt 1580px Gesamtbreite, die Vorlage 1440px. */ html body .ctc-review-layout{max-width:1440px} /* Eine Kastenfamilie: Kaesten 12px, Tabellen und Rechner 16px */ html body .ctc-disclosure{border-radius:12px !important} html body .space-page-content .ctc-bonus-sim{border-radius:16px !important} html body .ctc-alt-card,html body .ctc-fuerwen__karte{border-radius:12px !important} html body .space-page-content .ctc-rg-check{display:block;margin:20px 0;padding:16px 18px;border:1px solid rgba(34,58,177,.14);border-left:4px solid #223AB1;border-radius:12px;background:#f6f7fd} html body .ctc-rg-check__title{display:block;margin-bottom:6px;font-family:"Poppins",system-ui,sans-serif;color:#223AB1} html body .space-page-content .ctc-rg-check__list{margin:0 0 8px !important;padding-left:1.2em !important} html body .space-page-content .ctc-rg-check__note{margin:0 !important;font-size:.875rem;color:#374151} /* Abstand nach H2 am Desktop einheitlich 20px (vorher 20, 24 und 34px) */ @media (min-width:769px){ html body .space-page-content h2.wp-block-heading{margin-bottom:20px !important} html body .space-page-content h2.wp-block-heading + *{margin-top:0 !important} html body .space-page-content h2.wp-block-heading + figure.wp-block-table.ctc-table{margin-top:0 !important} } /* Verzeichnis: Tippziele mindestens 44px, wo die Seite per Touch bedient wird */ @media (max-width:1279px),(pointer:coarse){ html body .ctc-toc2 a{padding:12px 10px;min-height:44px;box-sizing:border-box} } /* Android-Browser vergroessern Text in schmalen Bloecken automatisch ("font boosting"). In der Kartenansicht traf das genau die Wertespalte: gemessen sind dort 15px, am Geraet sah es deutlich groesser aus. Weder die Huelle noch der Bestand schalten das ab (Marlene, 16.09.2026). */ html{-webkit-text-size-adjust:100%;text-size-adjust:100%} html body .space-page-content figure.wp-block-table td, html body .space-page-content figure.wp-block-table th{-webkit-text-size-adjust:100%;text-size-adjust:100%;max-height:999999px} /* Fliesstext ist ueberall gleich gross, auch in Tabellen (Marlene, 16.09.2026: "nur Überschriften dürfen größer sein"). Gemessen bei 390px: Kartenansicht erste Zeile 16px, Vorteile/Nachteile 14px, Fliesstext 15px. Klein bleiben nur die Beschriftungen: Spaltenkoepfe und die Etiketten der Kartenansicht (data-label, erste Spalte der Pruefliste). */ html body .space-page-content figure.wp-block-table.ctc-tabelle-einheitlich tbody td, html body .space-page-content figure.wp-block-table.ctc-tabelle-einheitlich tbody th, html body .space-page-content figure.wp-block-table.ctc-pros-cons tbody td, html body .space-page-content figure.wp-block-table.ctc-tabelle-einheitlich thead + tbody tr > :first-child{font-size:15px !important;line-height:1.55 !important} /* Zeilen-Hover auch in Tabellen mit Kopfzeile (Farbe liegt dort auf den Zellen) */ html body figure.wp-block-table.ctc-tabelle-einheitlich thead + tbody tr:hover > *{background:#eefdf8 !important} /* ============ Paket 1 aus dem Audit vom 16.09.2026 ============ */ /* A10: „Passende Ratgeber“ ist Navigation, keine Ueberschrift mehr. Optik wie zuvor die H3, damit sich sichtbar nichts aendert. */ html body .space-page-content p.ctc-related-hubs__title{margin:0 0 10px !important;font-family:"Poppins",system-ui,sans-serif;font-weight:700;font-size:1.0625rem;color:#223AB1} /* A7: Zeilenkoepfe der Pruefliste sehen aus wie die bisherigen Zellen. */ html body .space-page-content figure.wp-block-table.ctc-pruefliste tbody th{text-align:left;font-weight:700} /* C1: H1 ab 1024px dominanter als die H2 (32px). Umbruch bleibt manuell. */ /* Der Bestand setzt html[lang="de-DE"] .space-aces-content-meta-ins h1 (2.014em) und gewinnt gegen html body …; deshalb hier mit Attribut-Selektor. */ /* Die Kopfkarte ist innen 208px breit. Gemessen am 17.09.2026 passt das laengste Wort der H1 („Erfahrungen“) dort bis 32px; 40px ragten heraus. Die H1 bleibt deshalb bei 32px, dafuer treten die H2 auf 28px zurueck. So ist die H1 die dominanteste Ueberschrift, ohne Worttrennung. */ @media (min-width:1024px){ html[lang] body .space-aces-content-meta-ins h1{font-size:32px;line-height:1.15;overflow-wrap:break-word;hyphens:manual} /* Der Bestand setzt .space-page-content h2.wp-block-heading mit !important. */ html[lang] body .space-page-content h2.wp-block-heading{font-size:28px !important} } /* C2: Der 18+-Hinweis lag mit 4,52:1 knapp ueber der Grenze. */ html body .space-organization-header-button-notice{color:#4B5563 !important;font-size:12px !important} /* B7: die Voreinstellung des Simulators ist ein Beispiel, keine Kondition. */ html body .space-page-content p.ctc-bonus-sim__beispiel{margin:0 0 8px !important;font-size:.8125rem;color:#6b7280} /* ============ Entscheidungen vom 17.09.2026 ============ */ /* A2: Note als Text neben den Sternen, so gross wie der Fliesstext. */ html body .space-organization-content-logo-stars{display:flex;align-items:center;justify-content:center;gap:8px} html body .ctc-note{font-size:15px;color:#374151} html body .ctc-note strong{color:#111827} /* A7: Tabellenüberschrift, kleiner als eine H3, links, mit Abstand. */ html body .space-page-content figure.wp-block-table caption{caption-side:top;text-align:left;padding:14px 20px 0;font-family:"Poppins",system-ui,sans-serif;font-weight:700;font-size:.875rem;color:#223AB1} /* Eigene Aufnahmen aus dem Casino (17.09.2026). Volle Textbreite, gleiche Kastenoptik wie Tabellen, Bildunterschrift klein und grau. */ html body .space-page-content figure.ctc-bild{margin:20px 0 !important;border:1px solid rgba(34,58,177,.14);border-radius:12px;overflow:hidden;background:#fff} html body .space-page-content figure.ctc-bild img{display:block;width:100%;height:auto;margin:0} html body .space-page-content figure.ctc-bild figcaption{padding:8px 14px 10px;font-size:.8125rem;line-height:1.45;color:#6b7280} /* Exklusives CashtoCode-Angebot in "auf einen Blick" (17.09.2026). Steht als erste Kachel ueber der ganzen Breite, damit oben dasselbe Angebot steht wie neben dem Knopf. Die Huelle setzt die Kachelregeln mit !important, deshalb dieselbe Spezifitaet plus !important. */ html body .novamira-tldr .ctc-tldr-facts li.ctc-breit{grid-column:1 / -1 !important;background:#f2f6ff !important;border-color:rgba(34,58,177,.22) !important} html body .novamira-tldr .ctc-tldr-facts li.ctc-breit::before{background:#223AB1 !important}