MediaWiki:Common.css
Aus CKRAS Wiki
Hinweis: Leere nach dem Veröffentlichen den Browser-Cache, um die Änderungen sehen zu können.
- Firefox/Safari: Umschalttaste drücken und gleichzeitig Aktualisieren anklicken oder entweder Strg+F5 oder Strg+R (⌘+R auf dem Mac) drücken
- Google Chrome: Umschalttaste+Strg+R (⌘+Umschalttaste+R auf dem Mac) drücken
- Edge: Strg+F5 drücken oder Strg drücken und gleichzeitig Aktualisieren anklicken
/* =========================================================
CKRAS WIKI — GLOBAL SIDEBAR + MAIN PAGE + SUBPAGE UI KIT
Skin: Medik (responsive)
DE version for MediaWiki:Common.css
========================================================= */
/* =========================================================
1) CKRAS SIDEBAR REDESIGN (GLOBAL)
========================================================= */
#mw-panel .portal h3 {
font-size: 0.85em;
text-transform: uppercase;
color: #0B65E9 !important;
font-weight: 800;
margin-top: 18px;
letter-spacing: 0.5px;
border: none;
}
#mw-panel .portal .body ul li {
list-style: none !important;
padding: 3px 0;
}
#mw-panel .portal .body ul li a {
display: flex !important;
align-items: center;
color: #475569 !important;
font-size: 14px;
text-decoration: none;
transition: all 0.2s ease;
}
#mw-panel .portal .body ul li a:hover {
color: #0B65E9 !important;
padding-left: 2px;
}
#mw-panel .portal .body ul li a::before {
margin-right: 12px;
font-size: 16px;
width: 20px;
text-align: center;
display: inline-block;
}
/* NAVIGATION ICONS */
#n-mainpage a::before,
#n-Home a::before,
#n-Hauptseite a::before {
content: "🏠";
}
#n-recentchanges a::before,
#n-Recent-changes a::before,
#n-Letzte-Änderungen a::before,
#n-Letzte_Aenderungen a::before,
#n-Letzte_Anderungen a::before {
content: "⏱️";
}
#n-Counterstrike-2 a::before { content: "🔫"; }
#n-MatchZy a::before { content: "🎮"; }
#n-PreFire a::before { content: "🔥"; }
#n-CKRAS-BOT a::before { content: "🤖"; }
#n-Gameserver-Token a::before { content: "🔑"; }
#n-Gameserver a::before { content: "🎮"; }
#n-Teamspeak a::before { content: "🎤"; }
#n-TV-Server a::before { content: "📺"; }
#mw-panel a[href*="ckras.com/en/"]::before { content: "🌐"; }
#mw-panel a[href*="play.ckras.com"]::before { content: "☁️"; }
#mw-panel a[href*="iface.ckras.com"]::before { content: "🧩"; }
#mw-panel a[href*="wiki.ckras.com"]::before { content: "🇩🇪"; }
/* =======================================================
2) MAIN PAGE — CLEAN SAAS (STRICTLY SCOPED)
======================================================= */
.page-Main_Page #toc,
.page-Hauptseite #toc {
display: none;
}
.page-Main_Page .mw-body-content,
.page-Hauptseite .mw-body-content {
max-width: 1700px;
margin: 0 auto;
padding: 0 40px;
}
/* HERO */
.page-Main_Page .ck-hero h1,
.page-Hauptseite .ck-hero h1 {
font-size: 28px;
font-weight: 800;
margin: 0 0 8px;
color: #0F172A;
}
.page-Main_Page .ck-hero p,
.page-Hauptseite .ck-hero p {
margin: 0;
font-size: 14px;
color: #64748B;
max-width: 820px;
line-height: 1.6;
}
.page-Main_Page .ck-hero a,
.page-Hauptseite .ck-hero a {
color: #0F172A !important;
font-weight: 600;
text-decoration: none !important;
border-bottom: 1px solid rgba(15,23,42,.15);
}
.page-Main_Page .ck-hero a:hover,
.page-Hauptseite .ck-hero a:hover {
color: #0B65E9 !important;
border-bottom-color: #0B65E9;
}
.page-Main_Page .ck-section-title,
.page-Hauptseite .ck-section-title {
font-size: 13px;
text-transform: uppercase;
letter-spacing: .6px;
font-weight: 800;
color: #0B65E9;
margin: 34px 0 18px;
}
/* CARD */
.page-Main_Page .ck-card,
.page-Hauptseite .ck-card {
margin-bottom: 22px;
}
.page-Main_Page .ck-card-inner,
.page-Hauptseite .ck-card-inner {
background: #FFFFFF;
border: 1px solid #E2E8F0;
border-radius: 22px;
padding: 26px 32px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
transition: .18s ease;
}
.page-Main_Page .ck-card-inner:hover,
.page-Hauptseite .ck-card-inner:hover {
border-color: rgba(11,101,233,.25);
}
.page-Main_Page .ck-card-left,
.page-Hauptseite .ck-card-left {
flex: 1;
}
.page-Main_Page .ck-card-top,
.page-Hauptseite .ck-card-top {
display: flex;
align-items: center;
gap: 22px;
}
.page-Main_Page .ck-text,
.page-Hauptseite .ck-text {
flex: 1;
}
.page-Main_Page .ck-icoimg .thumb,
.page-Main_Page .ck-icoimg .thumbinner,
.page-Main_Page .ck-icoimg .image,
.page-Main_Page .ck-icoimg .mw-file-element,
.page-Main_Page .ck-icoimg figure,
.page-Main_Page .ck-icoimg figcaption,
.page-Hauptseite .ck-icoimg .thumb,
.page-Hauptseite .ck-icoimg .thumbinner,
.page-Hauptseite .ck-icoimg .image,
.page-Hauptseite .ck-icoimg .mw-file-element,
.page-Hauptseite .ck-icoimg figure,
.page-Hauptseite .ck-icoimg figcaption {
background: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
box-shadow: none !important;
}
.page-Main_Page .ck-icoimg,
.page-Hauptseite .ck-icoimg {
width: 56px;
height: 56px;
border-radius: 16px;
background: #F8FAFC;
border: 1px solid #E2E8F0;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
flex-shrink: 0;
padding: 8px;
box-sizing: border-box;
}
.page-Main_Page .ck-icoimg a,
.page-Hauptseite .ck-icoimg a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
text-decoration: none !important;
}
.page-Main_Page .ck-icoimg img,
.page-Hauptseite .ck-icoimg img {
width: 36px !important;
height: 36px !important;
object-fit: contain !important;
display: block !important;
}
.page-Main_Page .ck-card h2,
.page-Hauptseite .ck-card h2 {
margin: 0 0 6px !important;
padding: 0 !important;
font-size: 17px;
font-weight: 700;
letter-spacing: -0.2px;
color: #0F172A;
border: 0 !important;
background: none !important;
}
.page-Main_Page .ck-card h2:after,
.page-Main_Page .ck-card h2:before,
.page-Hauptseite .ck-card h2:after,
.page-Hauptseite .ck-card h2:before {
content: none !important;
}
.page-Main_Page .ck-card h2 a,
.page-Hauptseite .ck-card h2 a {
text-decoration: none !important;
color: #0F172A !important;
}
.page-Main_Page .ck-card h2 a:hover,
.page-Hauptseite .ck-card h2 a:hover {
color: #0B65E9 !important;
}
.page-Main_Page .ck-card p,
.page-Hauptseite .ck-card p {
margin: 0;
font-size: 13.5px;
color: #64748B;
line-height: 1.55;
}
.page-Main_Page .ck-meta,
.page-Hauptseite .ck-meta {
margin-top: 14px;
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.page-Main_Page .ck-meta a,
.page-Hauptseite .ck-meta a {
display: inline-flex;
align-items: center;
padding: 8px 14px;
border-radius: 16px;
background: #F1F5F9;
border: 1px solid #E2E8F0;
font-size: 12.5px;
font-weight: 700;
color: #0B65E9 !important;
text-decoration: none !important;
}
.page-Main_Page .ck-meta a:hover,
.page-Hauptseite .ck-meta a:hover {
background: #EAF2FF;
}
.page-Main_Page .ck-card-right,
.page-Hauptseite .ck-card-right {
width: 220px;
flex-shrink: 0;
display: flex;
justify-content: flex-end;
align-items: center;
}
.page-Main_Page .ck-card-right p,
.page-Hauptseite .ck-card-right p {
margin: 0 !important;
padding: 0 !important;
}
.page-Main_Page .ck-card-right a,
.page-Main_Page .ck-card-right p a,
.page-Hauptseite .ck-card-right a,
.page-Hauptseite .ck-card-right p a {
width: 220px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 16px;
background: #0B65E9 !important;
color: #FFFFFF !important;
font-size: 14px;
font-weight: 700;
text-decoration: none !important;
transition: .18s ease;
border-bottom: none !important;
}
.page-Main_Page .ck-card-right a:hover,
.page-Main_Page .ck-card-right p a:hover,
.page-Main_Page .ck-card-right a:hover *,
.page-Main_Page .ck-card-right p a:hover *,
.page-Hauptseite .ck-card-right a:hover,
.page-Hauptseite .ck-card-right p a:hover,
.page-Hauptseite .ck-card-right a:hover *,
.page-Hauptseite .ck-card-right p a:hover * {
background: #094DB6 !important;
color: #FFFFFF !important;
border-bottom: none !important;
text-decoration: none !important;
transform: translateY(-1px);
}
/* PLAY */
.page-Main_Page .ck-play,
.page-Hauptseite .ck-play {
margin: 40px 0 24px;
padding: 36px 32px;
border-radius: 22px;
background: #0F172A;
color: #FFFFFF;
text-align: center;
border: 1px solid rgba(255,255,255,.06);
}
.page-Main_Page .ck-play *,
.page-Hauptseite .ck-play * {
background: transparent !important;
box-shadow: none !important;
}
.page-Main_Page .ck-play h3,
.page-Hauptseite .ck-play h3 {
margin: 0 0 10px;
font-size: 17px;
font-weight: 800;
color: #FFFFFF;
}
.page-Main_Page .ck-play p,
.page-Hauptseite .ck-play p {
margin: 0 auto 22px;
font-size: 13.5px;
opacity: .85;
line-height: 1.6;
max-width: 720px;
color: #E2E8F0;
}
.page-Main_Page .ck-play-btn,
.page-Hauptseite .ck-play-btn {
display: inline-block;
}
.page-Main_Page .ck-play-btn a,
.page-Hauptseite .ck-play-btn a {
width: 220px;
height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 16px;
background: #0B65E9 !important;
color: #FFFFFF !important;
font-size: 14px;
font-weight: 700;
text-decoration: none !important;
transition: .18s ease;
border-bottom: none !important;
}
.page-Main_Page .ck-play-btn a:hover,
.page-Hauptseite .ck-play-btn a:hover {
background: #094DB6 !important;
color: #FFFFFF !important;
transform: translateY(-1px);
border-bottom: none !important;
}
.page-Main_Page .ck-footer-logo,
.page-Hauptseite .ck-footer-logo {
margin: 60px 0 10px;
text-align: center;
opacity: .9;
}
.page-Main_Page .ck-footer-logo img,
.page-Hauptseite .ck-footer-logo img {
border-radius: 14px;
}
.page-Main_Page .ck-established,
.page-Hauptseite .ck-established {
text-align: center;
font-size: 12px;
color: #64748B;
margin-top: 20px;
}
.page-Main_Page #firstHeading,
.page-Hauptseite #firstHeading {
display: none !important;
}
/* =======================================================
3) SUBPAGES — CKRAS UI KIT (ONLY INSIDE .ck-page)
======================================================= */
.mw-body-content,
.mw-body,
#content {
max-width: none !important;
width: auto !important;
}
.ck-page {
max-width: none !important;
width: 100% !important;
margin: 0 !important;
}
.mw-body:has(.ck-page) #firstHeading {
display: none !important;
}
/* GLOBAL LINK HOVER */
.ck-page a {
color: #0F172A !important;
text-decoration: none !important;
border-bottom: 1px solid rgba(15,23,42,0.15) !important;
transition: all 0.2s ease;
}
.ck-page a:hover {
color: #0B65E9 !important;
border-bottom: 1px solid #0B65E9 !important;
}
/* EXCEPTIONS */
.ck-page a.image,
.ck-page a.mw-file-description,
.ck-page a:has(img),
.ck-page a:has(.ck-btn),
.ck-page .ck-hero-actions a {
border-bottom: none !important;
}
.ck-page a.image:hover,
.ck-page a.mw-file-description:hover,
.ck-page a:has(img):hover,
.ck-page a:has(.ck-btn):hover,
.ck-page .ck-hero-actions a:hover {
border-bottom: none !important;
background: transparent !important;
}
/* BUTTONS */
.ck-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 16px;
border-radius: 12px;
font-weight: 800;
font-size: 13px;
line-height: 1;
white-space: nowrap;
border: 1px solid transparent;
text-decoration: none !important;
transition: all 0.2s ease;
}
.ck-page a .ck-btn-primary,
.ck-btn-primary {
background: #0B65E9 !important;
color: #FFFFFF !important;
border-bottom: none !important;
}
.ck-page a:hover .ck-btn-primary,
.ck-btn-primary:hover {
background: #094DB6 !important;
color: #FFFFFF !important;
border-bottom: none !important;
transform: translateY(-1px);
}
.ck-page a .ck-btn-ghost,
.ck-btn-ghost {
background: #111827 !important;
border-color: #334155 !important;
color: #E2E8F0 !important;
border-bottom: none !important;
}
.ck-page a:hover .ck-btn-ghost,
.ck-btn-ghost:hover {
background: #1F2937 !important;
border-color: #38BDF8 !important;
color: #FFFFFF !important;
border-bottom: none !important;
transform: translateY(-1px);
}
/* LEAD & BOXES */
.ck-page .ck-lead {
margin: 10px 0 14px;
font-size: 14px;
color: #0F172A;
line-height: 1.65;
}
.ck-page .ck-callout {
margin: 14px 0;
padding: 12px 14px;
border-radius: 12px;
background: #F8FAFC;
border: 1px solid #E2E8F0;
border-left: 5px solid #0EA5E9;
}
.ck-page .ck-callout--amber {
background: #FFF7ED;
border-color: #FED7AA;
border-left-color: #F59E0B;
}
.ck-page .ck-callout--ok {
background: #ECFDF5;
border-color: #D1FAE5;
border-left-color: #10B981;
}
.ck-page .ck-jump {
margin: 14px 0;
padding: 12px 14px;
border-left: 5px solid #0EA5E9;
background: #F8FAFC;
border-radius: 12px;
border: 1px solid #E2E8F0;
}
.ck-page .ck-tocbox {
margin: 14px 0;
padding: 14px;
border-radius: 14px;
background: #F1F5F9;
border: 1px solid #E2E8F0;
}
.ck-page .ck-toc-title {
font-size: 16px;
font-weight: 900;
margin-bottom: 8px;
}
/* TABLES */
.ck-page table.wikitable {
width: 100%;
border-collapse: separate;
border-spacing: 0;
border: 1px solid #DBEAFE;
border-radius: 14px;
overflow: hidden;
background: #FFFFFF;
}
.ck-page table.wikitable th {
background: #EFF6FF;
color: #0F172A;
font-weight: 900;
border-bottom: 1px solid #DBEAFE;
padding: 10px 12px;
text-align: left;
}
.ck-page table.wikitable td {
border-bottom: 1px solid #EFF6FF;
padding: 10px 12px;
vertical-align: top;
color: #0F172A;
}
.ck-page table.wikitable th,
.ck-page table.wikitable td {
border-left: none !important;
border-right: none !important;
}
.ck-page table.wikitable tr:nth-child(even) td {
background: #F8FAFF;
}
.ck-page table.wikitable tr:last-child td {
border-bottom: none;
}
.ck-page table.wikitable code {
background: #EAF2FF;
border: 1px solid #DBEAFE;
padding: 2px 6px;
border-radius: 8px;
}
/* HEADINGS */
.ck-page h2,
.ck-page h3,
.ck-page h4 {
border-bottom: none !important;
padding-bottom: 0 !important;
}
.ck-page h2 {
margin-top: 26px;
font-size: 22px;
font-weight: 900;
color: #0F172A;
}
.ck-page h3 {
margin-top: 18px;
font-size: 18px;
font-weight: 900;
color: #0F172A;
}
/* =======================================================
4) SUBPAGE HERO
======================================================= */
.ck-page .ck-hero--dark {
display: block;
width: 100% !important;
border-radius: 16px !important;
padding: 32px !important;
background: #FFFFFF !important;
border: 1px solid #E2E8F0 !important;
border-left: 8px solid #0F172A !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.03) !important;
margin-bottom: 24px !important;
box-sizing: border-box !important;
}
.ck-page .ck-hero--dark table {
width: 100% !important;
border: none !important;
background: transparent !important;
margin: 0 !important;
border-collapse: collapse !important;
}
.ck-page .ck-hero--dark table td {
border: none !important;
background: transparent !important;
padding: 0 !important;
vertical-align: middle !important;
}
.ck-page .ck-hero--dark table td:last-child {
width: 100% !important;
text-align: left !important;
}
.ck-page .ck-hero-logo {
width: 120px !important;
height: auto !important;
background: transparent !important;
border: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 auto !important;
padding: 0 !important;
box-shadow: none !important;
}
.ck-page .ck-hero-logo img {
width: 100px !important;
height: auto !important;
object-fit: contain !important;
}
.ck-page .ck-hero--dark pre,
.ck-page .ck-hero--dark p {
background: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
box-shadow: none !important;
white-space: normal !important;
text-align: left !important;
font-family: inherit !important;
}
.ck-page .ck-hero-content {
width: 100% !important;
display: block !important;
text-align: left !important;
padding-left: 15px !important;
}
.ck-page .ck-hero-title {
color: #0B65E9 !important;
font-weight: 900 !important;
font-size: 28px !important;
letter-spacing: -0.3px !important;
margin: 0 0 8px 0 !important;
display: block !important;
text-align: left !important;
width: 100%;
}
.ck-page .ck-hero-sub {
color: #475569 !important;
font-size: 15px !important;
line-height: 1.6 !important;
margin: 0 0 12px 0 !important;
text-align: left !important;
width: 100%;
}
.ck-page .ck-hero-meta {
color: #0F172A !important;
background: #F8FAFC !important;
border: 1px solid #E2E8F0 !important;
font-size: 13.5px !important;
padding: 8px 14px !important;
border-radius: 8px !important;
display: inline-block !important;
margin: 0 0 16px 0 !important;
text-align: left !important;
}
.ck-page .ck-hero-meta code {
background: transparent !important;
border: none !important;
color: #0B65E9 !important;
font-weight: 700 !important;
padding: 0 !important;
}
.ck-page .ck-hero-actions {
display: flex !important;
flex-direction: row !important;
gap: 12px !important;
flex-wrap: wrap !important;
justify-content: flex-start !important;
align-items: center !important;
margin-top: 4px !important;
width: 100% !important;
}
.ck-page .ck-hero-actions p {
display: contents !important;
}
.mw-parser-output img[alt*="MatchZy"] {
margin: 8px 0 14px 18px;
}
/* =======================================================
5) MATCHZY PAGE EXTENSIONS
======================================================= */
.ck-page .ck-command-nav {
margin: 12px 0 16px;
padding: 12px 14px;
border-radius: 12px;
background: #F8FAFC;
border: 1px solid #E2E8F0;
font-size: 13px;
font-weight: 800;
color: #0F172A;
}
.ck-page .ck-command-nav a {
color: #0B65E9 !important;
border-bottom: none !important;
}
.ck-page .ck-command-nav a:hover {
color: #094DB6 !important;
border-bottom: none !important;
}
.ck-page .ck-collapse {
margin: 14px 0 18px;
border: 1px solid #E2E8F0;
border-radius: 14px;
background: #FFFFFF;
overflow: hidden;
}
.ck-page .ck-collapse-title {
padding: 14px 16px;
font-size: 15px;
font-weight: 900;
color: #0F172A;
background: #F8FAFC;
border-bottom: 1px solid #E2E8F0;
}
.ck-page .ck-collapse-body {
padding: 14px 16px;
}
.ck-page .ck-collapse .mw-collapsible-toggle {
float: right;
margin-top: -34px;
margin-right: 16px;
font-size: 12px;
font-weight: 800;
}
.ck-page .ck-collapse .mw-collapsible-toggle a {
color: #0B65E9 !important;
border-bottom: none !important;
}
.ck-page .ck-section-grid {
display: grid;
grid-template-columns: repeat(2,minmax(0,1fr));
gap: 16px;
margin: 16px 0 30px;
}
.ck-page .ck-mini-card {
background: #FFFFFF;
border: 1px solid #E2E8F0;
border-radius: 16px;
padding: 18px;
box-sizing: border-box;
}
.ck-page .ck-mini-title {
font-size: 16px;
font-weight: 900;
color: #0F172A;
margin: 0 0 10px;
}
.ck-page .ck-mini-card ul {
margin: 8px 0 0 18px;
padding: 0;
}
.ck-page .ck-mini-card li {
margin: 6px 0;
color: #475569;
}
.ck-page .ck-pathbox {
margin: 10px 0 12px;
padding: 10px 12px;
border-radius: 12px;
background: #F8FAFC;
border: 1px solid #E2E8F0;
}
.ck-page .ck-pathbox code {
background: transparent !important;
border: none !important;
padding: 0 !important;
color: #0B65E9 !important;
font-weight: 700;
}
.ck-page .ck-step-grid {
display: grid;
grid-template-columns: repeat(3,minmax(0,1fr));
gap: 16px;
margin: 16px 0 30px;
}
.ck-page .ck-step-card {
background: #FFFFFF;
border: 1px solid #E2E8F0;
border-radius: 16px;
padding: 18px;
box-sizing: border-box;
}
.ck-page .ck-step-top {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 14px;
}
.ck-page .ck-step-num {
width: 34px;
height: 34px;
border-radius: 999px;
background: #EAF2FF;
border: 1px solid #DBEAFE;
color: #0B65E9;
font-size: 14px;
font-weight: 900;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ck-page .ck-step-title {
font-size: 17px;
font-weight: 900;
color: #0F172A;
line-height: 1.35;
}
.ck-page .ck-step-desc {
font-size: 13.5px;
color: #475569;
line-height: 1.6;
}
.ck-page .ck-media-frame {
margin: 0 0 14px;
}
.ck-page .ck-media-frame .thumb,
.ck-page .ck-media-frame .thumbinner,
.ck-page .ck-media-frame .image,
.ck-page .ck-media-frame .mw-file-element,
.ck-page .ck-media-frame figure,
.ck-page .ck-media-frame figcaption {
background: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
box-shadow: none !important;
width: 100% !important;
max-width: none !important;
}
.ck-page .ck-media-frame a {
display: block;
}
.ck-page .ck-media-frame img {
display: block !important;
width: 100% !important;
height: auto !important;
border-radius: 14px;
border: 1px solid #E2E8F0;
box-sizing: border-box;
}
.ck-page .ck-feature-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 14px 0 18px;
}
.ck-page .ck-feature-pill {
display: inline-flex;
align-items: center;
padding: 8px 12px;
border-radius: 999px;
background: #F8FAFC;
border: 1px solid #E2E8F0;
font-size: 12.5px;
font-weight: 800;
color: #0F172A;
}
.ck-page .ck-footer-cta {
margin: 28px 0 12px;
padding: 24px;
border-radius: 18px;
background: #0F172A;
color: #FFFFFF;
text-align: center;
border: 1px solid rgba(255,255,255,.06);
}
.ck-page .ck-footer-cta-title {
margin: 0 0 8px;
font-size: 18px;
font-weight: 900;
color: #FFFFFF;
}
.ck-page .ck-footer-cta-sub {
margin: 0 0 16px;
font-size: 13.5px;
line-height: 1.6;
color: #CBD5E1;
}
.ck-page .ck-footer-cta-actions {
display: flex !important;
flex-direction: row !important;
gap: 12px !important;
flex-wrap: wrap !important;
justify-content: center !important;
align-items: center !important;
width: 100% !important;
}
.ck-page .ck-footer-cta-actions p {
display: contents !important;
}
/* =======================================================
6) RESPONSIVE
======================================================= */
@media (max-width: 1200px) {
.ck-page .ck-step-grid {
grid-template-columns: repeat(2,minmax(0,1fr));
}
}
@media (max-width: 900px) {
.page-Main_Page .mw-body-content,
.page-Hauptseite .mw-body-content {
padding: 0 16px !important;
}
.page-Main_Page .ck-card-inner,
.page-Hauptseite .ck-card-inner {
flex-direction: column !important;
align-items: stretch !important;
padding: 22px 18px !important;
}
.page-Main_Page .ck-card-top,
.page-Hauptseite .ck-card-top {
flex-direction: column !important;
align-items: flex-start !important;
gap: 14px !important;
}
.page-Main_Page .ck-card-right,
.page-Hauptseite .ck-card-right {
width: 100% !important;
margin-top: 6px !important;
padding-top: 16px !important;
border-top: 1px solid #F1F5F9;
display: block !important;
}
.page-Main_Page .ck-card-right a,
.page-Hauptseite .ck-card-right a {
width: 100% !important;
height: 52px !important;
border-radius: 14px !important;
}
.ck-page .ck-hero--dark table td {
display: block !important;
width: 100% !important;
text-align: left !important;
}
.ck-page .ck-hero-content {
padding-left: 0 !important;
margin-top: 15px !important;
}
.ck-page .ck-section-grid,
.ck-page .ck-step-grid {
grid-template-columns: 1fr;
}
.ck-page .ck-footer-cta-actions {
flex-direction: column !important;
align-items: stretch !important;
}
.ck-page .ck-footer-cta-actions a {
width: 100% !important;
justify-content: center !important;
}
}
