/* mrgreen.tips auf das Layout der Schwesterseite gebracht.
Werte sind von dort uebernommen, nicht geschaetzt: Container 1240px zentriert,
Kopfzeile weiss mit 64px und unterer Linie, heller Fuss, Systemschrift,
H1 clamp(1.9rem,4.4vw,3.1rem), gruene Aktionsfarbe #15803d.
Geladen wird die Datei als letzte, damit sie die gebauten Regeln schlaegt. */
:root{--maxw:1240px;--paper:#fff;--cream:#f5f5fa;--line:#e4e3ee;--ink:#12122a;
--muted:#62647e;--green:#15803d}
body{background:#fff;color:#12122a;
font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
h1,h2,h3{letter-spacing:-.02em;text-wrap:balance;line-height:1.15}
h1{font-size:clamp(1.9rem,4.4vw,3.1rem)}
h2{font-size:clamp(1.35rem,2.4vw,1.9rem)}
/* Alles auf dieselbe zentrierte Spalte. Vorher lief der Text in einer schmalen
linken Haelfte: der Hero war zweispaltig und die rechte Spalte wird vom
Skript entfernt, also blieb der Inhalt auf knapp 58% der Breite stehen. */
.container,.wrap{width:min(var(--maxw),calc(100% - 32px));margin-inline:auto}
.hero-grid{grid-template-columns:minmax(0,1fr);gap:0;padding-block:34px 10px}
.hero-copy{max-width:none}
.home-hero,.page-hero,.hub-hero{background:#fff}
.page-hero,.hub-hero{border-bottom:1px solid var(--line);padding:34px 0 22px}
.section{padding:40px 0}
.section--cream{background:#f5f5fa}
.card,.art-card,.article-card{background:#fff;border-color:var(--line)}
/* Kopfzeile wie im Vorbild: weiss, schlank, Menue rechts, gruene Aktion.
Das Logo bleibt, ebenso die gruenen Akzente. */
header{background:#fff;color:#12122a;border-bottom:1px solid var(--line);min-height:64px}
header a,header span,header strong,header button,header summary{color:#12122a}
header .btn,header a.btn,header .btn--gold{background:var(--green);color:#fff;
border-radius:12px;min-height:44px;font-weight:800;box-shadow:0 10px 24px -12px #15803de6}
header .btn:hover,header a.btn:hover{background:#166534}
header nav a:hover{color:var(--green)}
/* Fuss hell, wie dort. */
footer{background:#f5f5fa;color:var(--muted);border-top:1px solid var(--line)}
footer a,footer strong,footer h2,footer h3{color:#3f4058}
/* Inhaltsverzeichnis: eingerahmt, nummeriert, zweispaltig. */
nav.on-this-page{background:#f6f5fb;border:1px solid var(--line);border-radius:14px;
padding:18px 20px;margin:22px 0}
nav.on-this-page>strong{display:block;font-size:.72rem;letter-spacing:.14em;
text-transform:uppercase;color:var(--muted);margin-bottom:10px}
nav.on-this-page ul{list-style:none;margin:0;padding:0;columns:2;column-gap:34px;
counter-reset:inhalt}
nav.on-this-page li{break-inside:avoid;margin:0 0 7px;padding-left:28px;position:relative;
counter-increment:inhalt;font-size:.93rem;line-height:1.45}
nav.on-this-page li::before{content:counter(inhalt,decimal-leading-zero);position:absolute;
left:0;top:1px;font-size:.72rem;font-weight:800;color:var(--muted);
font-variant-numeric:tabular-nums}
nav.on-this-page a{text-decoration:none;border-bottom:1px solid transparent}
nav.on-this-page a:hover{border-bottom-color:currentColor}
@media (max-width:700px){nav.on-this-page ul{columns:1}}
/* Auf dem Telefon flach halten: eine Zeile Bild + Text, Button darunter. */
@media (max-width:620px){
.greenat-showcase{padding:10px 0 2px}
.offer{margin:8px 0}
.offer__terms summary{font-size:.72rem;padding:6px 10px}
.offer__headline{font-size:1rem}
}
/* Kopfzeile wie im Vorbild: weiss, schlank, Menue rechts, gruene Aktion.
Die Klassen heissen hier .site-header und .site-footer — ein Selektor auf
das blosse Element verliert gegen sie. Das Wortmarken-SVG ist komplett
weiss, also bekommt es auf hellem Grund eine gruene Platte; Logo und
gruene Akzente bleiben damit erhalten. */
.site-header{background:#fff;color:#12122a;border-bottom:1px solid var(--line);
min-height:64px;box-shadow:0 1px 0 rgba(18,18,42,.04)}
.site-header a,.site-header span,.site-header strong,.site-header small,
.site-header button,.site-header summary{color:#12122a}
.site-header .brand img{background:#073b2f;border-radius:10px;padding:6px 9px;
box-sizing:content-box}
.site-header .nav-panel{background:#fff;color:#12122a;
border:1px solid var(--line);border-radius:0 0 16px 16px;border-top:0;
box-shadow:0 22px 50px -30px rgba(18,18,42,.35)}
.site-header .nav-panel a:hover,.site-header .main-nav a:hover{color:var(--green)}
.site-header .btn,.site-header a.btn,.site-header .btn--gold{background:var(--green);
color:#fff;border-radius:12px;min-height:44px;font-weight:800;
box-shadow:0 10px 24px -12px rgba(21,128,61,.9)}
.site-header .btn:hover,.site-header a.btn:hover{background:#166534}
.site-footer{background:#f5f5fa;color:var(--muted);border-top:1px solid var(--line)}
.site-footer a,.site-footer strong,.site-footer h2,.site-footer h3,
.site-footer small,.site-footer span{color:#3f4058}
.site-footer .brand img{background:#073b2f;border-radius:10px;padding:6px 9px;
box-sizing:content-box}
/* ---- Kopfzeile schlank, wie im Vorbild -------------------------------- */
/* Gebaut war sie 86px hoch mit einem 98x58-Logo, das meine gruene Platte
noch einmal um 18px verbreitert hat. Das Vorbild kommt mit 58px aus. */
.site-header .nav-shell{min-height:58px;gap:18px}
.site-header .brand{gap:11px}
.site-header .brand img{width:58px;height:34px;padding:4px 7px;border-radius:8px}
.site-header .brand span{font-size:.69rem;line-height:1.35}
.site-header .brand small{font-size:.57rem}
/* Die Punkte brauchen Luft nach links und rechts — ohne sie klebte der
gelbe Unterstrich direkt an den Buchstaben. */
.site-header .main-nav{gap:2px;align-items:center}
.site-header .main-nav>a,.site-header .nav-drop>a{padding:19px 13px;font-size:.82rem}
.site-header .nav-drop>a{gap:7px}
.site-header .nav-drop>a svg{margin-top:1px}
/* ---- Grosses Menue: Spalten, die sich nicht ueberlagern ---------------- */
/* `.main-nav a{white-space:nowrap}` galt auch fuer die Links im Panel: bei
sieben Spalten auf 1240px lief "Bonus ohne Umsatzbedingungen" quer ueber
die Nachbarspalte. Vier Spalten, und die Zeilen duerfen umbrechen. */
.site-header .nav-panel{padding:24px 30px 16px;
max-height:min(76vh,640px);overflow:auto;overscroll-behavior:contain}
/* Als Raster blieb eine Zeile so hoch wie ihre laengste Gruppe — mit den
16 Marken wurden daraus 830px. Als Spaltensatz verteilt der Browser die
Gruppen selbst und kommt auf knapp 580. */
.site-header .nav-panel-cols{display:block;columns:5;column-gap:30px}
.site-header .nav-panel-cols>div{break-inside:avoid;width:100%;min-width:0;margin:0 0 18px}
.site-header .nav-panel a{white-space:normal;overflow-wrap:anywhere}
.site-header .nav-panel li a{padding:4px 0;font-size:.79rem;line-height:1.32}
.site-header .nav-panel-label{margin-bottom:7px}
@media (max-width:1180px){.site-header .nav-panel-cols{columns:4}}
@media (max-width:980px){.site-header .nav-panel-cols{columns:3}}
/* Der Schraegpfeil auf dem Knopf war nur Dekoration. */
.site-header .btn span[aria-hidden],.site-header .header-cta span[aria-hidden]{display:none}
.site-header .header-cta{min-height:38px;padding:9px 18px;font-size:.78rem;border-radius:10px}
.site-header .mobile-menu summary{border-color:var(--line)}
/* ---- Inhalt mittig und ueber die ganze Breite -------------------------- */
/* Gebaut: 760px Text + 80px Luft + 290px Spalte in einem 1240px-Container.
Zusammen 1130 — also stand alles linksbuendig und rechts blieb ein Rest
leer. Die Textspalte nimmt jetzt, was uebrig ist. */
/* Eine Spalte, volle Breite. Gebaut war es ein Raster aus 760px Text und
290px Schiene: zusammen 1130 in einem 1240er Container, also stand alles
links und rechts blieb ein Streifen leer. Die rechte Schiene traegt nur
noch einen Aufklapper, der steht jetzt unter dem Text. */
.article-shell{display:block}
.article-shell>.article{min-width:0;width:auto;max-width:none}
.article-shell>.article>*{max-width:none}
.article-shell>.mg22-sidebar-links{margin-top:30px}
.page-hero .lead,.hub-hero .lead,.article .lead{max-width:none}
/* Was frueher `/_showcase/greenat-v5.js` beim Laden entfernt hat. Das Skript
wird seit dem 22.10. nicht mehr eingehaengt — nginx liefert dort jetzt die
netzweite Karte. Ohne diese Zeilen stuenden die alten Werbebloecke der
Vorgaengerversion wieder mit auf der Seite. */
section.vit,.vit-mini,.mg22-rail,.mg22-showcase-wrap,.mg22-mini{display:none}
/* ---- Fuss: Spalte "Aufsicht & Hilfe" ---------------------------------- */
/* Die Ueberschrift ist ein , kein
: die Link-Patches zaehlen die
Ueberschriften und wuerden eine Seite sonst verweigern. Aussehen wie die
anderen Spaltentitel. */
.footer-grid{grid-template-columns:1.5fr 1fr 1.05fr 1.05fr 1.2fr}
.footer-aufsicht .fnav-label{letter-spacing:.1em;text-transform:uppercase;
margin:16px 0 20px;font-family:Arial,sans-serif;font-size:.72rem;font-weight:700;
color:inherit}
.footer-aufsicht ul{margin:0;padding:0;list-style:none}
.footer-aufsicht li{margin-bottom:7px}
.footer-aufsicht a{color:#e1eade;padding:3px 0;font-size:.79rem;
text-decoration:none;display:inline-block}
.footer-aufsicht a:hover{text-decoration:underline;text-underline-offset:3px}
.site-footer .footer-aufsicht a{color:#3f4058}
.footer-aufsicht .fnav-note{margin-top:14px;font-size:.68rem;line-height:1.6;
opacity:.75}
@media (max-width:1080px){.footer-grid{grid-template-columns:1.3fr 1fr 1fr}}
@media (max-width:760px){
.footer-grid{grid-template-columns:1fr 1fr}
.footer-aufsicht{grid-column:1/-1}
}