/*
Theme Name: Magnetspiel.de
Theme URI: https://magnetspiel.de/
Description: Eigenständiges Theme für den Ratgeber Magnetspiel.de. Farbwelten je Thema, lokale Schriften (Bricolage Grotesque und Figtree, SIL Open Font License), integrierte SEO-Funktionen (Titel, Beschreibung, Open Graph, strukturierte Daten), Inhaltsverzeichnis und Affiliate-Link-Kennzeichnung für das Amazon-Partnerprogramm. Keine externen Anfragen, keine Cookies.
Author: Magnetspiel.de
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: magnetspiel
*/

/* ==========================================================================
   Schriften (lokal)
   ========================================================================== */
@font-face{font-family:"Bricolage Grotesque";src:url(assets/fonts/bricolage-var.woff2) format("woff2");font-weight:500 800;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url(assets/fonts/figtree-var.woff2) format("woff2");font-weight:300 900;font-style:normal;font-display:swap}

/* ==========================================================================
   Grundwerte
   ========================================================================== */
:root{
	--ink:#1B2230; --ink-2:#394258; --muted:#5A667D;
	--steel:#D5DCE8; --steel-2:#E8EDF5; --paper:#F5F7FB; --white:#fff;
	--red:#D8322B; --red-dark:#B9231D; --blue:#2748C9; --blue-dark:#1B3496;
	--sun:#FFC62E; --teal:#0B7A6C; --violet:#5B3FD0; --green:#23805A;
	--font-display:"Bricolage Grotesque","Avenir Next","Segoe UI",system-ui,sans-serif;
	--font-body:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
	--radius-s:10px; --radius-m:18px; --radius-l:28px;
	--wrap:1180px; --read:720px;
	--accent:var(--blue); --on-accent:#fff; --shape:rgba(255,255,255,.16);
}
.ms-accent-red{--accent:#D8322B;--on-accent:#fff;--shape:rgba(255,255,255,.17)}
.ms-accent-teal{--accent:#0B7A6C;--on-accent:#fff;--shape:rgba(255,255,255,.17)}
.ms-accent-violet{--accent:#5B3FD0;--on-accent:#fff;--shape:rgba(255,255,255,.17)}
.ms-accent-amber{--accent:#FFC62E;--on-accent:#1B2230;--shape:rgba(27,34,48,.11)}
.ms-accent-blue{--accent:#2748C9;--on-accent:#fff;--shape:rgba(255,255,255,.17)}
.ms-accent-green{--accent:#23805A;--on-accent:#fff;--shape:rgba(255,255,255,.17)}
.ms-accent-ink{--accent:#1B2230;--on-accent:#fff;--shape:rgba(255,255,255,.12)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:20px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-wrap:break-word}
img,svg,canvas{max-width:100%}
a{color:var(--blue)}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.15;color:var(--ink);margin:0}
p,ul,ol,figure{margin:0}
button,input{font:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:12px 18px;border-radius:var(--radius-s);text-decoration:none;font-weight:700}
.skip-link:focus{top:12px;outline-color:var(--sun)}
.ms-icon{width:1.25em;height:1.25em;flex:none}
.ms-wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto}
.ms-wrap--read{width:min(100% - 40px,var(--read))}
.ms-main:focus{outline:none}

/* Affiliate-Links tragen immer ein Sternchen */
a[rel~="sponsored"]::after{content:"*";margin-left:2px;font-weight:700}
.ms-btn[rel~="sponsored"]::after{margin-left:-5px}

/* ==========================================================================
   Buttons
   ========================================================================== */
.ms-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 24px;border:2px solid transparent;border-radius:999px;font-weight:700;font-size:1rem;line-height:1.2;text-decoration:none;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s,transform .15s}
.ms-btn:active{transform:translateY(1px)}
.ms-btn--primary{background:var(--red);border-color:var(--red);color:#fff}
.ms-btn--primary:hover{background:var(--red-dark);border-color:var(--red-dark)}
.ms-btn--ghost{background:#fff;border-color:var(--ink);color:var(--ink)}
.ms-btn--ghost:hover{background:var(--ink);color:#fff}
.ms-btn--sun{background:var(--sun);border-color:var(--sun);color:var(--ink)}
.ms-btn--sun:hover{background:#fff;border-color:#fff}
.ms-btn--sun:focus-visible,.ms-band :focus-visible,.ms-footer :focus-visible{outline-color:var(--sun)}

/* ==========================================================================
   Kopfbereich
   ========================================================================== */
.ms-pole{height:6px;background:linear-gradient(90deg,var(--red) 0 50%,var(--blue) 50% 100%)}
.ms-header{position:relative;z-index:40;background:#fff;border-bottom:1.5px solid var(--steel-2)}
.ms-header__bar{display:flex;align-items:center;flex-wrap:wrap;gap:8px 24px;min-height:74px}
.ms-logo{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-family:var(--font-display);font-weight:800;font-size:1.5rem;letter-spacing:-.025em}
.ms-logo__tld{font-weight:500;color:var(--muted)}
.ms-logo--light{color:#fff}
.ms-logo--light .ms-logo__tld{color:#AEB9CF}
.ms-nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.ms-nav__list,.ms-nav ul{display:flex;flex-wrap:wrap;gap:2px;list-style:none;margin:0;padding:0}
.ms-nav a{display:block;padding:10px 14px;border-radius:999px;color:var(--ink);text-decoration:none;font-weight:600;font-size:.98rem;transition:background-color .15s}
.ms-nav a:hover{background:var(--steel-2)}
.ms-nav .current-menu-item>a,.ms-nav .current_page_item>a,.ms-nav .current-menu-ancestor>a{background:var(--ink);color:#fff}
.ms-nav .ms-nav-cta>a{background:var(--red);color:#fff}
.ms-nav .ms-nav-cta>a:hover{background:var(--red-dark)}
.ms-nav__search{display:grid!important;place-items:center;width:44px;height:44px;padding:0!important}
.ms-burger{display:none}
@media (max-width:1019px){
	.ms-header__bar{flex-wrap:nowrap;gap:12px}
	.ms-logo{font-size:1.35rem}
	.js .ms-burger{display:inline-flex;align-items:center;gap:8px;margin-left:auto;padding:9px 14px;border:2px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);font-weight:700;cursor:pointer}
	.ms-burger__close{display:none}
	.ms-burger[aria-expanded="true"] .ms-burger__open{display:none}
	.ms-burger[aria-expanded="true"] .ms-burger__close{display:inline-flex}
	.js .ms-nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:4px;padding:14px 20px 24px;background:#fff;border-bottom:1.5px solid var(--steel);box-shadow:0 18px 30px -18px rgba(27,34,48,.35)}
	.js .ms-nav.is-open{display:flex}
	.js .ms-nav__list,.js .ms-nav ul{flex-direction:column}
	.js .ms-nav a{padding:13px 16px;font-size:1.05rem}
	.js .ms-nav__search{width:auto;height:auto;display:flex!important;justify-content:flex-start;padding:13px 16px!important}
	.js .ms-nav__search .screen-reader-text{position:static!important;width:auto;height:auto;margin:0 0 0 10px;overflow:visible;clip:auto;white-space:normal;font-weight:600;font-size:1.05rem}
	.ms-nav{margin-left:0;width:100%}
}

/* ==========================================================================
   Startseite: Hero mit Magnetfeld
   ========================================================================== */
.ms-hero{padding:clamp(22px,4vw,56px) 0 clamp(24px,4vw,44px)}
.ms-hero__grid{display:grid;gap:30px;align-items:center}
@media (min-width:960px){.ms-hero__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px}}
.ms-hero__title{font-weight:800;font-size:clamp(2.6rem,1.4rem + 5.2vw,4.8rem);line-height:.97;letter-spacing:-.032em;text-wrap:balance}
.ms-hero__lead{margin-top:22px;max-width:34em;font-size:clamp(1.1rem,1rem + .45vw,1.3rem);line-height:1.55;color:var(--ink-2)}
.ms-hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.ms-hero__facts{display:grid;gap:10px;list-style:none;margin:30px 0 0;padding:0;font-weight:600}
.ms-hero__facts li{display:flex;align-items:flex-start;gap:10px}
.ms-hero__facts .ms-icon{margin-top:2px;color:var(--teal);stroke-width:2.6}
.ms-hero__stage{position:relative;width:100%;max-width:600px;margin-inline:auto;aspect-ratio:1/1;border-radius:var(--radius-l);background:var(--ink);overflow:hidden}
.ms-hero__art,.ms-magnet{position:absolute;inset:0;width:100%;height:100%;display:block}
.ms-magnet{display:none;cursor:grab;touch-action:pan-y}
.ms-magnet:active{cursor:grabbing}
.ms-hero__stage.is-live .ms-magnet{display:block}
.ms-hero__stage.is-live .ms-hero__art{display:none}

/* Spielfinder */
.ms-finder{padding:6px 0 clamp(30px,5vw,56px)}
.ms-finder__title{font-size:1.2rem;font-weight:700;margin-bottom:14px}
.ms-chips{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.ms-chips a{display:inline-flex;padding:11px 18px;border:1.5px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);font-weight:600;text-decoration:none;transition:background-color .15s,color .15s}
.ms-chips a:hover{background:var(--ink);color:#fff}
.ms-chips--head{margin-top:22px}

/* ==========================================================================
   Abschnitte, Kacheln, Karten
   ========================================================================== */
.ms-section{padding:clamp(40px,6vw,84px) 0}
.ms-section--tint{background:#fff;border-block:1.5px solid var(--steel-2)}
.ms-section__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px 20px}
.ms-section__title{font-weight:800;font-size:clamp(1.7rem,1.25rem + 1.7vw,2.55rem);line-height:1.08;letter-spacing:-.022em}
.ms-link-more{font-weight:700;color:var(--blue)}
.ms-bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:28px}
.ms-tile{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;min-height:270px;padding:26px;border-radius:var(--radius-l);overflow:hidden;background:var(--accent);color:var(--on-accent);text-decoration:none}
.ms-tile--wide{grid-column:span 2}
.ms-tile::before,.ms-tile::after{content:"";position:absolute;z-index:-1;background:var(--shape);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.ms-tile::before{width:170px;height:170px;border-radius:50%;right:-40px;top:-46px}
.ms-tile::after{width:92px;height:92px;border-radius:22px;right:78px;top:96px;transform:rotate(18deg)}
.ms-tile:not(.ms-tile--wide)::after{display:none}
.ms-tile:hover::before{transform:translate(-14px,10px) scale(1.06)}
.ms-tile:hover::after{transform:rotate(58deg) translate(8px,-6px)}
.ms-tile:nth-child(even)::before{border-radius:22px;transform:rotate(20deg)}
.ms-tile:nth-child(even):hover::before{transform:rotate(44deg) translate(-8px,8px)}
.ms-tile__icon{position:absolute;left:26px;top:26px;display:grid;place-items:center;width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.22)}
.ms-accent-amber .ms-tile__icon{background:rgba(27,34,48,.12)}
.ms-tile__icon .ms-icon{width:26px;height:26px}
.ms-tile__title{font-family:var(--font-display);font-weight:800;font-size:clamp(1.3rem,1.05rem + .75vw,1.7rem);line-height:1.1;letter-spacing:-.015em;hyphens:auto;overflow-wrap:break-word}
.ms-tile__text{font-size:.98rem;line-height:1.45;max-width:30em}
.ms-tile:focus-visible{outline-color:var(--ink);outline-offset:4px}
@media (max-width:959px){.ms-bento{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:599px){.ms-bento{grid-template-columns:1fr}.ms-tile--wide{grid-column:auto}.ms-tile{min-height:230px}}

.ms-grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fill,minmax(min(100%,310px),1fr));margin-top:28px}
.ms-card{position:relative;display:flex;flex-direction:column;overflow:hidden;background:#fff;border:1.5px solid var(--steel);border-radius:var(--radius-m);transition:border-color .2s}
.ms-card:hover{border-color:var(--ink)}
.ms-card__art{display:block}
.ms-card__art svg{display:block;width:100%;height:auto;aspect-ratio:16/9}
.ms-card__body{display:flex;flex:1;flex-direction:column;align-items:flex-start;gap:10px;padding:18px 20px 22px}
.ms-card__title{font-size:1.3rem;font-weight:700;line-height:1.2;letter-spacing:-.012em}
.ms-card__title a{color:var(--ink);text-decoration:none}
.ms-card__title a::after{content:"";position:absolute;inset:0}
.ms-card__excerpt{color:var(--ink-2);font-size:1rem;line-height:1.55}
.ms-card__meta{display:flex;align-items:center;gap:7px;margin-top:auto;padding-top:4px;color:var(--muted);font-size:.9rem}
.ms-card__meta .ms-icon{width:1.1em;height:1.1em}
.ms-chip{position:relative;z-index:1;display:inline-block;padding:4px 12px;border-radius:999px;background:var(--steel-2);color:var(--ink);font-size:.82rem;font-weight:700;text-decoration:none}
.ms-chip--red{background:#FCE3E1;color:#8E1B16}
.ms-chip--teal{background:#D5EFEA;color:#065247}
.ms-chip--violet{background:#E7E1FA;color:#3C2490}
.ms-chip--amber{background:#FFEDB8;color:#5E4100}
.ms-chip--blue{background:#E0E7FC;color:#1B3496}
.ms-chip--green{background:#D8EFE3;color:#155238}
.ms-chip--ink{background:#E4E8F0;color:var(--ink)}
.nav-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:36px}
.nav-links .page-numbers{display:inline-block;min-width:44px;padding:10px 16px;border:1.5px solid var(--steel);border-radius:999px;background:#fff;color:var(--ink);font-weight:700;text-align:center;text-decoration:none}
.nav-links a.page-numbers:hover{border-color:var(--ink)}
.nav-links .current{background:var(--ink);border-color:var(--ink);color:#fff}
.ms-empty{margin-bottom:20px;font-size:1.1rem}

/* Schlussband */
.ms-band{background:var(--blue);color:#fff}
.ms-band__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;padding-block:clamp(36px,5vw,64px)}
.ms-band__title{color:#fff;font-weight:800;font-size:clamp(1.6rem,1.2rem + 1.5vw,2.3rem);letter-spacing:-.02em}
.ms-band__text{margin-top:10px;max-width:40em;opacity:.95}

/* ==========================================================================
   Beitrags- und Seitenkopf
   ========================================================================== */
.ms-pagehead{overflow:hidden;background:var(--accent);color:var(--on-accent)}
.ms-pagehead--plain{background:#fff;color:var(--ink);border-bottom:1.5px solid var(--steel-2)}
.ms-pagehead__grid{display:grid;gap:26px;align-items:center;padding-block:20px 44px}
@media (min-width:900px){
	.ms-pagehead__grid{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:48px}
	.ms-pagehead__grid--single{grid-template-columns:minmax(0,56rem)}
}
.ms-pagehead__title{margin-top:.35em;color:inherit;font-weight:800;font-size:clamp(2rem,1.2rem + 3.4vw,3.7rem);line-height:1.02;letter-spacing:-.03em;text-wrap:balance}
.ms-pagehead__lead{margin-top:16px;max-width:38em;font-size:clamp(1.06rem,1rem + .35vw,1.26rem);line-height:1.55}
.ms-pagehead__lead--rich>*+*{margin-top:.8em}
.ms-pagehead__lead--rich a{color:inherit}
.ms-pagehead__cat{display:inline-block;margin-top:14px;padding:4px 14px;border:1.5px solid currentColor;border-radius:999px;color:inherit;font-size:.9rem;font-weight:700;text-decoration:none}
.ms-pagehead__search{margin-top:22px;max-width:560px}
.ms-pagehead__art svg{display:block;width:100%;height:auto;max-height:320px}
@media (max-width:899px){.ms-pagehead__art svg{height:110px;max-height:none}.ms-pagehead__grid{padding-bottom:30px}}
.ms-cover--bare>rect:first-child{display:none}
.ms-meta{display:flex;flex-wrap:wrap;gap:8px 22px;list-style:none;margin:22px 0 0;padding:0;font-size:.95rem}
.ms-meta li{display:flex;align-items:center;gap:8px}
.ms-meta .ms-icon{width:1.15em;height:1.15em}
.ms-crumbs{margin-top:6px;font-size:.9rem}
.ms-crumbs ol{display:flex;flex-wrap:wrap;gap:2px 8px;margin:0;padding:0;list-style:none}
.ms-crumbs li+li::before{content:"/";margin-right:8px;opacity:.55}
.ms-crumbs a{color:inherit}
.ms-crumbs [aria-current]{opacity:.85}

/* ==========================================================================
   Artikel: Layout, Inhaltsverzeichnis
   ========================================================================== */
.ms-article-layout{display:grid;gap:28px;padding-block:36px 56px}
.ms-article-side{min-width:0}
@media (min-width:1180px){
	.ms-article-layout.has-toc{grid-template-columns:270px minmax(0,var(--read));gap:72px;justify-content:center}
	.ms-article-side{position:sticky;top:20px;align-self:start;max-height:calc(100vh - 40px);overflow:auto}
}
@media (max-width:1179px){.ms-article-layout{width:min(100% - 40px,var(--read))}}
.ms-article-layout:not(.has-toc){width:min(100% - 40px,var(--read))}
.ms-toc{background:#fff;border:1.5px solid var(--steel);border-radius:var(--radius-m)}
.ms-toc summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;cursor:pointer;list-style:none;font-family:var(--font-display);font-weight:800;font-size:1.05rem}
.ms-toc summary::-webkit-details-marker{display:none}
.ms-toc summary .ms-icon{transition:transform .2s}
.ms-toc[open] summary .ms-icon{transform:rotate(180deg)}
.ms-toc ol{display:grid;gap:2px;margin:0;padding:0 12px 14px;list-style:none;font-size:.96rem;line-height:1.35}
.ms-toc li a{display:block;padding:8px 10px;border-radius:8px;color:var(--ink-2);font-weight:500;text-decoration:none}
.ms-toc li a:hover{background:var(--paper);color:var(--ink)}
.ms-toc li a.is-active{background:var(--paper);color:var(--ink);font-weight:700;box-shadow:inset 3px 0 0 var(--accent)}

/* ==========================================================================
   Fließtext
   ========================================================================== */
.ms-prose{min-width:0;color:var(--ink-2);font-size:1.125rem;line-height:1.74}
.ms-prose>*+*{margin-top:1.1em}
.ms-prose h2{margin-top:clamp(2.2rem,4vw,3.1rem);color:var(--ink);font-weight:800;font-size:clamp(1.62rem,1.3rem + 1.1vw,2.15rem);line-height:1.12;letter-spacing:-.022em;scroll-margin-top:20px}
.ms-prose h3{margin-top:clamp(1.7rem,3vw,2.2rem);color:var(--ink);font-size:1.38rem;line-height:1.2;letter-spacing:-.012em;scroll-margin-top:20px}
.ms-prose h2+*,.ms-prose h3+*{margin-top:.75rem}
.ms-prose h4{margin-top:1.5em;color:var(--ink);font-size:1.15rem}
.ms-prose strong{color:var(--ink)}
.ms-prose :where(a:not(.ms-btn)){color:var(--blue);text-decoration-thickness:1.5px;text-underline-offset:3px}
.ms-prose :where(a:not(.ms-btn)):hover{color:var(--blue-dark)}
.ms-prose ul,.ms-prose ol{padding-left:1.35em}
.ms-prose li{padding-left:.2em}
.ms-prose li+li{margin-top:.3em}
.ms-prose li::marker{color:var(--accent);font-weight:700}
.ms-accent-amber .ms-prose li::marker{color:#B07A00}
.ms-prose hr{border:0;border-top:1.5px solid var(--steel);margin-block:2.4em}
.ms-prose blockquote{margin-inline:0;padding:4px 0 4px 22px;border-left:5px solid var(--sun);color:var(--ink);font-family:var(--font-display);font-size:1.3rem;line-height:1.4}
.ms-prose code{padding:2px 6px;border-radius:6px;background:var(--steel-2);font-size:.92em}
.ms-prose figure img{display:block;height:auto;border-radius:var(--radius-m)}
.ms-prose figcaption{margin-top:8px;color:var(--muted);font-size:.92rem}
.ms-prose .wp-block-table{overflow-x:auto;border:1.5px solid var(--steel);border-radius:var(--radius-m);background:#fff}
.ms-prose table{width:100%;min-width:540px;border-collapse:collapse;font-size:.98rem;line-height:1.45}
.ms-prose .wp-block-table th,.ms-prose .wp-block-table td,.ms-prose th,.ms-prose td{padding:12px 16px;border:0;border-bottom:1px solid var(--steel-2);text-align:left;vertical-align:top}
.ms-prose tbody td:first-child{color:var(--ink);font-weight:600}
.ms-prose thead th{border-bottom:0;background:var(--ink);color:#fff;font-weight:700}
.ms-prose tbody tr:nth-child(even){background:var(--paper)}
.ms-prose tbody tr:last-child>*{border-bottom:0}
.ms-prose tbody th{color:var(--ink);font-weight:700}
.ms-prose .wp-block-buttons{display:flex;flex-wrap:wrap;gap:10px}
.ms-prose .wp-block-button__link{display:inline-block;padding:13px 24px;border-radius:999px;background:var(--red);color:#fff;font-weight:700;text-decoration:none}
.ms-prose--home{font-size:1.15rem}

/* Hinweise und Boxen */
.ms-hinweis{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border:1.5px solid var(--steel);border-radius:var(--radius-s);background:#EEF2FA;color:var(--ink-2);font-size:.95rem;line-height:1.5}
.ms-hinweis .ms-icon{margin-top:2px;color:var(--blue)}
.ms-fussnote{margin-top:2.2em;padding-top:14px;border-top:1.5px solid var(--steel);color:var(--muted);font-size:.9rem;line-height:1.5}
.ms-note{display:flex;align-items:flex-start;gap:14px;margin-top:2.4em;padding:18px 20px;border:1.5px solid var(--steel);border-radius:var(--radius-m);background:#fff;font-size:1rem;line-height:1.55}
.ms-note .ms-icon{width:28px;height:28px;margin-top:2px;color:var(--teal)}
.ms-callout{--ic:var(--ink);--ic-img:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9%2018h6M10%2021h4M12%203.5a6%206%200%200%200-3.5%2010.9c.6.5%201%201.2%201%202V17h5v-.6c0-.8.4-1.5%201-2A6%206%200%200%200%2012%203.5z'/%3E%3C/svg%3E");padding:18px 22px;border-left:6px solid var(--sun);border-radius:var(--radius-s);background:#FFF6D9;color:var(--ink-2)}
.ms-callout__title{display:flex;align-items:center;gap:10px;margin-bottom:6px;color:var(--ink);font-family:var(--font-display);font-weight:800;font-size:1.1rem}
.ms-callout__title::before,.ms-panel__title::before{content:"";flex:none;width:24px;height:24px;background:var(--ic);-webkit-mask:var(--ic-img) center/contain no-repeat;mask:var(--ic-img) center/contain no-repeat}
.ms-callout>p+p,.ms-callout>ul,.ms-callout>ol{margin-top:.6em}
.ms-callout--achtung{--ic:var(--red);--ic-img:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%204l9%2015.5H3L12%204z'/%3E%3Cpath%20d='M12%2010v4.5M12%2017.2v.1'/%3E%3C/svg%3E");border-color:var(--red);background:#FDE9E7}
.ms-callout--info{--ic:var(--blue);--ic-img:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='8.5'/%3E%3Cpath%20d='M12%2011v5M12%208v.1'/%3E%3C/svg%3E");border-color:var(--blue);background:#E8EEFF}
.ms-panel__title{--ic:var(--sun);--ic-img:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%203.5l7%202.5v5.5c0%204.2-2.8%207.6-7%209-4.2-1.4-7-4.8-7-9V6l7-2.5z'/%3E%3Cpath%20d='M9%2012l2.2%202.2L15.5%2010'/%3E%3C/svg%3E");display:flex;align-items:center;gap:12px;color:#fff;font-family:var(--font-display);font-weight:800;font-size:1.55rem;line-height:1.15}
.ms-panel__title::before{width:34px;height:34px}
.ms-keyfacts{padding:20px 24px 22px;border:2px solid var(--ink);border-radius:var(--radius-m);background:#fff}
.ms-keyfacts__title{display:flex;align-items:center;gap:12px;margin-bottom:10px;color:var(--ink);font-family:var(--font-display);font-weight:800;font-size:1.18rem}
.ms-keyfacts__title::before{content:"";flex:none;width:14px;height:14px;border-radius:4px;background:var(--sun);transform:rotate(45deg)}
.ms-keyfacts ul{margin:0}
.ms-pick{display:grid;gap:12px;padding:20px 22px 22px;border:2px solid var(--ink);border-radius:var(--radius-m);background:#fff}
.ms-pick__badge{justify-self:start;padding:3px 10px;border-radius:6px;background:var(--sun);color:var(--ink);font-size:.78rem;font-weight:800}
.ms-pick__title{margin:0;font-size:1.32rem;line-height:1.2}
.ms-pick__text{font-size:1rem;line-height:1.6}
.ms-pick__facts{display:grid;gap:7px;margin:0;padding:0!important;list-style:none;font-size:1rem;line-height:1.5}
.ms-pick__facts li{display:flex;gap:10px;margin:0;padding:0}
.ms-pick__facts li::before{content:"";flex:none;width:18px;height:18px;margin-top:3px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B7A6C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat}
.ms-pick__cta{margin-top:4px}
.ms-panel{padding:clamp(22px,4vw,36px);border-radius:var(--radius-l);background:var(--ink);color:#DCE3F0}
.ms-panel>*+*{margin-top:.9em}
.ms-panel strong{color:#fff}
.ms-panel a{color:var(--sun)}
.ms-panel li::marker{color:var(--sun)}
.ms-faq{overflow:hidden;border:1.5px solid var(--steel);border-radius:var(--radius-m);background:#fff}
.ms-faq+.ms-faq{margin-top:10px}
.ms-faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;cursor:pointer;list-style:none;color:var(--ink);font-family:var(--font-display);font-weight:700;font-size:1.12rem;line-height:1.3}
.ms-faq summary::-webkit-details-marker{display:none}
.ms-faq summary::after{content:"";flex:none;width:10px;height:10px;margin-right:4px;border-right:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);transform:translateY(-3px) rotate(45deg);transition:transform .2s}
.ms-faq[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.ms-faq[open] summary{border-bottom:1.5px solid var(--steel-2)}
.ms-faq__a{padding:16px 20px 20px;font-size:1.05rem;line-height:1.65}
.ms-faq__a>*+*{margin-top:.8em}
.ms-prose .ms-steps{padding-left:0;list-style:none;counter-reset:step}
.ms-prose .ms-steps>li{position:relative;min-height:40px;padding:0 0 0 54px;counter-increment:step}
.ms-prose .ms-steps>li::before{content:counter(step);position:absolute;left:0;top:-2px;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--ink);color:#fff;font-family:var(--font-display);font-weight:800}
.ms-prose .ms-steps>li+li{margin-top:1em}
.ms-share{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:2em;padding-top:20px;border-top:1.5px solid var(--steel)}
.ms-share__label{display:flex;align-items:center;gap:8px;color:var(--ink);font-weight:700}
.ms-share ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.ms-share li{margin:0;padding:0}
.ms-share a{display:inline-block;padding:7px 14px;border:1.5px solid var(--steel);border-radius:999px;color:var(--ink);font-size:.92rem;font-weight:600;text-decoration:none}
.ms-share a:hover{border-color:var(--ink);background:var(--ink);color:#fff}

/* ==========================================================================
   Suche
   ========================================================================== */
.ms-search{display:flex;flex-wrap:wrap;gap:10px}
.ms-search__input{flex:1 1 240px;min-width:0;padding:13px 20px;border:2px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink)}
.ms-search__input:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.ms-search__btn .ms-icon{width:1.2em;height:1.2em}

/* ==========================================================================
   Fußbereich
   ========================================================================== */
.ms-footer{margin-top:0;background:var(--ink);color:#C4CCDB;font-size:.98rem;line-height:1.55}
.ms-footer__grid{display:grid;gap:36px;padding-block:52px 40px}
@media (min-width:900px){.ms-footer__grid{grid-template-columns:1.3fr 1fr 1fr .8fr}}
.ms-footer__brand p{margin-top:16px;max-width:26em}
.ms-footer__aff{color:#fff;font-weight:600}
.ms-footer__h{margin-bottom:14px;color:#fff;font-family:var(--font-display);font-weight:700;font-size:1.1rem}
.ms-footer ul{display:grid;gap:9px;margin:0;padding:0;list-style:none}
.ms-footer a{color:#C4CCDB;text-decoration:none}
.ms-footer a:hover{color:#fff;text-decoration:underline}
.ms-footer .ms-logo{color:#fff;text-decoration:none}
.ms-footer__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 32px;padding-block:20px 28px;border-top:1px solid rgba(255,255,255,.14);color:#9AA6BD;font-size:.88rem}

/* ==========================================================================
   Bewegung reduzieren, Druck
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
	html{scroll-behavior:auto}
	*,*::before,*::after{transition:none!important;animation:none!important}
}
@media print{
	.ms-header,.ms-footer,.ms-share,.ms-band,.ms-hero__stage,.ms-article-side,.ms-section--tint{display:none!important}
	body{background:#fff}
	.ms-pagehead{background:#fff;color:#000}
}