/* AI Tools Backend Menu Icon */

/* Core Contao approach - background image on group element */
#tl_navigation .group-ai_tools {
    background: url('../../bundles/contaoopenaiassistant/icons/ai-tools.svg') 3px 2px no-repeat;
    background-position: left;
}

/* Remove API Status Indicator Styles and related rules */ 

.api-key-check-wrapper {
    display: block;
    margin-top: 8px;
    margin-bottom: 4px;
    position: relative;
    z-index: 3;
}

.api-key-check-wrapper .api-key-result {
    margin-left: 10px;
}

.api-key-check-wrapper .processing-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid #ccc;
    border-top: 2px solid #007acc;
    border-radius: 50%;
    animation: api-key-spin 1s linear infinite;
    margin-right: 5px;
    vertical-align: middle;
}

@keyframes api-key-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.sharebuttons {
	overflow:hidden;
}

.sharebuttons > ul.theme {
	list-style-type:none;
	margin:-4px;
	padding:0;
}

.sharebuttons > ul.theme:after {
	content:"";
	display:block;
	clear:both;
}

.sharebuttons > ul.theme > li {
	float:left;
}

.sharebuttons > ul.theme > li > a {
	margin:4px;
	display:block;
	white-space:nowrap;
	overflow:hidden;
	text-indent:101%;
	background-repeat:no-repeat;
	background-position:center;
}

.sharebuttons > ul.text > li > a {
	text-indent:0;
}

/* source: http://wegraphics.net/downloads/free-long-shadow-social-media-icons/ */

.sharebuttons > ul.shadow > li > a {
	width:32px;
	height:32px;
	background-image:url('../../system/modules/sharebuttons/assets/shadow/sprites-32.png');
}

.sharebuttons > ul.shadow > li > a.facebook {
	background-position:-40px 0;
}

.sharebuttons > ul.shadow > li > a.twitter {
	background-position:-80px 0;
}

.sharebuttons > ul.shadow > li > a.gplus {
	background-position:-120px 0;
}

.sharebuttons > ul.shadow > li > a.linkedin {
	background-position:-160px 0;
}

.sharebuttons > ul.shadow > li > a.xing {
	background-position:0 0;
}

.sharebuttons > ul.shadow > li > a.mail {
	background-position:-200px 0;
}

.sharebuttons > ul.shadow > li > a.tumblr {
	background-position:-240px 0;
}

.sharebuttons > ul.shadow > li > a.pinterest {
	background-position:-280px 0;
}

.sharebuttons > ul.shadow > li > a.reddit {
	background-position:-320px 0;
}

.sharebuttons > ul.shadow > li > a.whatsapp {
	background-position:-360px 0;
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.3),
       only screen and (-o-min-device-pixel-ratio: 13/10),
       only screen and (min-resolution: 120dpi) 
{
	.sharebuttons > ul.shadow > li > a {
		background-size:auto 32px;
		background-image:url('../../system/modules/sharebuttons/assets/shadow/sprites-64.png');
	}
}

/* ============================================================
   schwanger.at — Design Tokens v2 „Warm Editorial"
   Layer: tokens  |  Quelle: design.md §2
   Einbindung: erste CSS-Datei im Contao-Seitenlayout
   ============================================================ */

/* Layer-Reihenfolge (einmalig hier deklariert): mmenu vor legacy,
   damit Brand-Overrides in 6-legacy.css das Vendor-CSS schlagen.
   MUSS vor den @imports stehen — sonst legt der Import von
   8-pages.css die Ebene „pages" als erste (= schwächste) an. */
@layer tokens, mmenu, legacy, base, layout, contao, components, pages, ads, utilities;

@import url('../../files/layout2026/css/8-pages.css');

/* Schriften selbst gehostet (files/layout2026/fonts, SIL Open Font License)
   statt Google Fonts: keine Verbindung zu Google beim Seitenaufruf. */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/files/layout2026/fonts/caveat-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/files/layout2026/fonts/caveat-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/files/layout2026/fonts/caveat-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/files/layout2026/fonts/caveat-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/files/layout2026/fonts/fraunces-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/files/layout2026/fonts/fraunces-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/files/layout2026/fonts/fraunces-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/files/layout2026/fonts/fraunces-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/files/layout2026/fonts/fraunces-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/files/layout2026/fonts/fraunces-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/files/layout2026/fonts/inter-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/files/layout2026/fonts/inter-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/files/layout2026/fonts/inter-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/files/layout2026/fonts/inter-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/files/layout2026/fonts/inter-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/files/layout2026/fonts/inter-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


@layer tokens {
  :root {
    /* ---- Farben: Flächen ---- */
    --c-white:       #FDFAF6;
    --c-cream:       #F8F3ED;
    --c-cream-mid:   #F1EAE0;
    --c-cream-dark:  #E4D9CA;
    --c-sand:        #D4C3A8;

    /* ---- Farben: Marke & Akzent ---- */
    --c-coral:       #CD8166;
    --c-coral-pale:  #F0DDD2;
    --c-coral-muted: #EBC9B6;
    --c-warm-brown:  #8A6E52;
    --c-deep:        #3A2C1F;

    /* ---- Farben: Kontext ---- */
    --c-sage:        #DCE7DD;
    --c-sage-text:   #5E7060;
    --c-trust:       #2F5D7C;
    --c-trust-soft:  #E5EEF3;
    --c-blush:       #F7E2E2;
    --c-blush-text:  #B25B63;

    /* ---- Farben: Aktion ---- */
    --c-cta:         #C0492A;
    --c-cta-dark:    #A23C20;

    /* ---- Farben: Zitat-Box (Referenz Artikelseite) ---- */
    --c-quote:       #FBF0D6;
    --c-quote-mark:  #9A7A2E;

    /* ---- Farben: Text ---- */
    --c-text:        #3A2C1F;
    --c-text-soft:   #6B5847;
    --c-text-muted:  #A8927E;

    /* ---- Farben: Footer (bewusst kühl) ---- */
    --c-footer-bg:   #3F4C5D;
    --c-footer-mut:  #8B99A8;
    --c-footer-text: #F2F3F4;

    /* ---- Typografie ---- */
    --font-display: 'Fraunces', Georgia, serif;
    --font-body:    'Inter', system-ui, sans-serif;
    --font-hand:    'Caveat', cursive;

    --fs-h1:     clamp(30px, 22px + 1.8vw, 46px);
    /* Typo-Skala: 7 Stufen, fluide zwischen 390px und 1440px Viewport.
       xs Meta/Captions · s UI/Teaser · body · lead · h3 · h2 · h1
       Neue Komponenten nur aus dieser Skala bedienen. */
    --fs-meta:   13px;                                    /* xs */
    --fs-teaser: 14px;                                    /* s  */
    --fs-body:   clamp(16px, 15px + 0.25vw, 18px);
    --fs-lead:   clamp(17px, 15.5px + 0.4vw, 20px);
    --fs-h3:     clamp(18px, 16px + 0.4vw, 21px);
    --fs-h2:     clamp(20px, 17px + 0.6vw, 24px);         /* Sektionstitel */
    --fs-prose-h2: clamp(22px, 18px + 0.8vw, 28px);       /* h2 im Fließtext */
    --fs-prose-h3: var(--fs-h3);
    --fs-prose-lead: clamp(18px, 16px + 0.5vw, 21px);
    --fs-block: var(--fs-h2);
    --fs-hand:   clamp(22px, 3vw, 26px);

    --lh-tight:  1.3;
    --lh-body:   1.7;
    --lh-lead:   1.8;

    /* ---- Form & Fläche ---- */
    --radius-s:    14px;
    --radius-m:    16px;
    --radius-l:    24px;
    --radius-pill: 24px;
    --radius-callout: 28px 8px 28px 8px;
    --radius-callout-inv: 8px 28px 8px 28px;
    --blob-a: 42% 58% 63% 37% / 51% 44% 56% 49%;
    --blob-b: 58% 42% 38% 62% / 49% 60% 40% 51%;
    --border-hair: 0.5px solid var(--c-cream-dark);
    --shadow-card: 0 2px 12px rgba(58, 44, 31, 0.06);

    /* ---- Layout ---- */
    --w-page:    1180px;
    /* fluide: schmale Laptops kompakter, große Screens luftiger */
    --w-content: clamp(920px, 360px + 50vw, 1140px);
    --w-prose:   clamp(620px, 300px + 40vw, 840px);
    --pad-x:     28px;
    /* Innenbreite einer --w-content-Sektion (Karten-/Box-Kante) */
    --w-inner:   calc(var(--w-content) - 2 * var(--pad-x));

    /* ---- Vertikaler Rhythmus ---- */
    --space-s:   16px;
    --space-m:   clamp(24px, 16px + 1.2vw, 36px);
    --space-l:   clamp(40px, 28px + 2vw, 64px);

    /* ---- Motion ---- */
    --ease: all 0.3s ease;
  }

  @media (max-width: 640px) {
    :root { --pad-x: 20px; }
  }

  @media (prefers-reduced-motion: reduce) {
    :root { --ease: none; }
  }
}

/* ============================================================
   schwanger.at — base.css
   Layer: base  |  Quelle: design.md §2.2, §4
   Reset, Grund-Typografie, Links, Fokus, Medien.
   Voraussetzung: tokens.css ist davor eingebunden.
   ============================================================ */

@layer base {

  /* ---- Reset ---- */
  *, *::before, *::after {
    box-sizing: border-box;
  }

  html {
    -webkit-text-size-adjust: 100%;
  }

  body {
    margin: 0;
    background: var(--c-cream-mid);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--c-text);
    -webkit-font-smoothing: antialiased;
  }

  img, video, svg {
    max-width: 100%;
    height: auto;
    display: block;
  }

  figure {
    margin: 0;
    line-height: 0;
  }

  iframe {
    border: none;
  }

  /* ---- Typografie ---- */
  h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 400;
    color: var(--c-deep);
    margin: 0 0 0.5em;
  }

  h1 {
    font-size: var(--fs-h1);
    line-height: var(--lh-tight);
    letter-spacing: -0.01em;
  }

  h2 {
    font-size: var(--fs-h2);
    line-height: 1.35;
  }

  /* Kursiv-Akzent in Headlines ist Stilmittel der Marke:
     <em> in H1/H2 bleibt Fraunces italic, gleiche Farbe. */
  h1 em, h2 em {
    font-style: italic;
    font-weight: 400;
  }

  h3 {
    font-family: var(--font-body);
    font-size: var(--fs-h3);
    font-weight: 600;
  }

  h4 {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 600;
  }

  p {
    margin: 0 0 1em;
    font-size: var(--fs-body);
    color: var(--c-text);
  }

  strong { font-weight: 600; }
  em { font-style: italic; }

  ::selection {
    background: var(--c-coral-pale);
    color: var(--c-deep);
  }

  /* ---- Wiederkehrende Typo-Rollen ---- */
  /* Handschrift-Eyebrow (Caveat) — max. 2× pro Sektion, siehe design.md §4.9 */
  .sw-eyebrow {
    font-family: var(--font-hand);
    font-size: var(--fs-hand);
    font-weight: 600;
    color: var(--c-coral);
    line-height: 1;
    display: block;
    margin-bottom: 6px;
  }

  .sw-eyebrow--brown { color: var(--c-warm-brown); }

  /* Lead-Absatz unter H1 */
  .sw-lead,
  .sw-hero p {
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
    color: var(--c-text-soft);
  }

  /* Meta-Zeile (Datum, Autor*in, Lesezeit) */
  .sw-meta {
    font-size: var(--fs-meta);
    color: var(--c-text-muted);
  }

  /* Contao: „Navigation überspringen", versteckte Labels —
     nur für Screenreader (falls layout.min.css fehlt) */
  .invisible {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  /* ---- Links ---- */
  a {
    color: inherit;
    text-decoration: none;
    transition: var(--ease);
  }

  a:hover {
    color: var(--c-cta);
  }

  /* Links im redaktionellen Fließtext sind sichtbar */
  .content-text a:not(.button) {
    color: var(--c-cta);
    box-shadow: inset 0 -1px 0 var(--c-coral-pale);
  }

  .content-text a:not(.button):hover {
    color: var(--c-cta-dark);
    box-shadow: inset 0 -1px 0 var(--c-cta-dark);
  }

  /* ---- Fokus (A11y-Floor, design.md §4.7) ---- */
  :focus {
    outline: none;
  }

  :focus-visible {
    outline: 2px solid var(--c-trust);
    outline-offset: 2px;
    border-radius: 4px;
  }

  /* ---- Formular-Grundstufen ---- */
  input, select, textarea, button {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    color: var(--c-text);
  }

  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="password"],
  input[type="date"],
  input[type="number"],
  select,
  textarea {
    background: var(--c-white);
    border: var(--border-hair);
    border-radius: var(--radius-m);
    padding: 10px 18px;
  }

  input::placeholder,
  textarea::placeholder {
    color: var(--c-text-muted);
  }

  /* ---- CTA-Button (überschreibt Legacy .button) ---- */
  .button,
  button.submit,
  .sw-cta {
    display: inline-block;
    background: var(--c-cta);
    color: #fff;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    font-style: normal;
    letter-spacing: 0;
    line-height: 1;
    padding: 12px 24px;
    border: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: var(--ease);
  }

  .button:hover,
  button.submit:hover,
  .sw-cta:hover {
    background: var(--c-cta-dark);
    color: #fff;
  }

  .button--ghost {
    background: transparent;
    color: var(--c-cta);
    border: 1px solid var(--c-cta);
  }

  .button--ghost:hover {
    background: var(--c-cta);
    color: #fff;
  }

  /* ---- Hairline-Divider ---- */
  hr {
    border: none;
    border-top: var(--border-hair);
    margin: 32px 0;
  }

  /* ---- Blob-Dekor (Basis-Utility, Positionierung je Komponente) ---- */
  .sw-blob {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    border-radius: var(--blob-a);
    background: var(--c-coral-pale);
    opacity: 0.5;
  }

  .sw-blob--b { border-radius: var(--blob-b); }
  .sw-blob--sage { background: var(--c-sage); }

  /* Inhalt über Blobs */
  .sw-blob ~ * { position: relative; z-index: 1; }

  /* ---- Motion-Respekt ----
     Einzige zulässige !important-Ausnahme im System (design.md §4.3):
     Barrierefreiheit muss jede Komponenten-Transition überschreiben. */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
    }
  }
}

/* ============================================================
   schwanger.at — layout-frame.css
   Layer: layout  |  Quelle: design.md §3.2 + Claude-Design-Exporte
   Seitenrahmen: #wrapper, #header (Logo/Nav/Suche), Breadcrumb,
   #container, #footer. Contao-5-Standard-Markup (fe_page).

   Header/Footer = full-bleed. Content-Breite nur in #main / .inside.
   ============================================================ */

@layer layout {

  /* ============================================
     Seitenrahmen — full width chrome
     ============================================ */

  #wrapper {
    width: 100%;
    max-width: none;
    margin: 0;
    background: transparent;
    min-height: 100vh;
  }

  /* Sticky-Header braucht kein Legacy-padding-top mehr.
     #container / #main bleiben transparent — Seitenfarbe kommt von body.
     Eigenes Stacking (z-index 0), damit das Header-Dropdown (9000)
     immer über Banner, Main und SSW-Dots liegt. */
  #container,
  #main {
    background: transparent;
    padding-top: 0;
    margin: 0;
    max-width: none;
    width: 100%;
    position: relative;
    z-index: 0;
    isolation: isolate;
  }

  #main .inside {
    padding: 0 var(--pad-x);
    max-width: var(--w-page);
    margin-inline: auto;
    background: transparent;
    box-sizing: border-box;
  }

  /* Top-Banner (Gewinnspiel) = gleiche Spaltenbreite wie #main .inside */
  .showADdesktop,
  .showADmobile {
    max-width: var(--w-page);
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--pad-x);
    box-sizing: border-box;
    background: transparent;
  }

  .showADdesktop img,
  .showADmobile img {
    max-width: 100%;
    width: 100%;
    height: auto;
    border-radius: var(--radius-m);
  }

  /* Werbeplätze (Modul „Werbeplätze“): Kennzeichnung „Anzeige“ über dem Banner */
  .sw-slot {
    position: relative;
  }

  .sw-slot__label {
    display: block;
    margin: 0 0 4px;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1.2;
    text-align: right;
    text-transform: uppercase;
    color: var(--c-text-muted);
  }

  /* Legacy %-Framing abschalten: Breite steuert #main .inside */
  .content-text,
  .content-headline,
  .content-image,
  .content-youtube,
  .content-gallery,
  .content-accordion,
  .content-download,
  .content-downloads,
  .content-hyperlink,
  .ce_comments,
  .ce_accordionSingle,
  .mod_newslist,
  .mod_newsarchive,
  .mod_newsreader h1,
  .mod_subscribe,
  .mod_breadcrumb,
  .mod_eventlist,
  .mod_eventreader,
  .mod_EventEditor,
  .hubmodules,
  .hubbar,
  .hubhead,
  .article_jumper,
  .inArticleApp,
  .produktprobenLink,
  .videoWrapper,
  .zurSSWanmeldung,
  .marken,
  .filter,
  .grid,
  .advert-top,
  .sswAnsicht .mod_article .content-text,
  #main .mod_customnav.schwangerschaftsDots,
  .artikelseiten #artikel .layout_full h1,
  .artikelseiten .mainfooter,
  .artikelseiten .mod_customnav.schwangerschaftsDots {
    padding-left: 0;
    padding-right: 0;
  }

  /* Standard-Sektionsbreiten: Artikel-Module bekommen im Backend
     die Klasse sw-w-content oder sw-w-prose (design.md §2.4) */
  .sw-w-content {
    max-width: var(--w-content);
    margin-inline: auto;
    padding-inline: var(--pad-x);
  }

  .sw-w-prose {
    max-width: var(--w-prose);
    margin-inline: auto;
    padding-inline: var(--pad-x);
  }

  /* ============================================
     Header — full bleed
     ============================================ */

  #header {
    background: var(--c-white);
    border-bottom: var(--border-hair);
    position: sticky;
    top: 0;
    z-index: 9000;
    isolation: isolate;
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 0;
    overflow: visible;
    box-shadow: none;
    backdrop-filter: none;
    text-align: center;
  }

  /* Obere Zeile: [Platzhalter] — Logo — Suche */
  #header .inside {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    padding: 14px var(--pad-x) 0;
    max-width: var(--w-page);
    margin-inline: auto;
    width: 100%;
    overflow: visible;
    position: relative;
  }

  .logo {
    grid-column: 2;
    background: transparent url(/files/design/schwangerAT-logo.svg) center / contain no-repeat;
    width: 205px;
    height: 56px;
    display: block;
    margin: 0;
    top: auto;
    position: relative;
    z-index: 5;
  }

  /* ---- Suche: Legacy absolute/float zurücksetzen ---- */
  #header .mod_search {
    grid-column: 3;
    justify-self: end;
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    float: none;
    width: auto;
    background: transparent;
    border-radius: 0;
    z-index: 5;
  }

  #header .mod_search form,
  #header .mod_search .formbody {
    position: relative;
    margin: 0;
    width: auto;
  }

  #header .mod_search .formbody {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--c-cream);
    border-radius: 20px;
    padding: 6px 8px 6px 14px;
    width: 200px;
    min-height: 40px;
    box-sizing: border-box;
  }

  #header .mod_search .widget {
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
    min-width: 0;
  }

  #header .mod_search input.text,
  #header .mod_search input[type="search"],
  #header .mod_search input[type="text"] {
    position: static !important;
    float: none;
    display: block;
    width: 100%;
    min-width: 0;
    height: 28px;
    min-height: 28px;
    margin: 0;
    padding: 4px 0;
    background: transparent;
    border: none;
    border-radius: 0;
    font-size: 13px;
    line-height: 1.3;
    color: var(--c-deep);
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
  }

  #header .mod_search input::placeholder {
    color: var(--c-text-muted);
  }

  #header .mod_search button.submit,
  #header .mod_search input.submit {
    position: static;
    float: none;
    top: auto;
    right: auto;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    min-height: 28px;
    padding: 0;
    margin: 0;
    text-indent: -9999px;
    overflow: hidden;
    background: transparent url(/files/design/_icons/suche.svg) center / 16px no-repeat;
    border: none;
    border-radius: 0;
    color: transparent;
    cursor: pointer;
  }

  /* ---- Hauptnavigation: Pills + Legacy Mega-Menü (level_2) ---- */
  #header .mod_navigation,
  #header nav.maintop {
    grid-column: 1 / -1;
    padding: 4px 0 14px;
    height: auto;
    top: auto;
    opacity: 1;
    position: relative;
    z-index: 9010;
    overflow: visible;
  }

  #header .mod_navigation ul.level_1,
  #header nav.maintop ul.level_1 {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    overflow: visible;
  }

  #header .mod_navigation ul.level_1 > li,
  #header nav.maintop ul.level_1 > li {
    position: relative;
    flex-grow: 0;
    list-style: none;
    z-index: 1;
  }

  /* Offenes Submenü über Geschwister-Items und Seiteninhalt */
  #header .mod_navigation ul.level_1 > li:hover,
  #header .mod_navigation ul.level_1 > li.submenu:hover,
  #header nav.maintop ul.level_1 > li:hover,
  #header nav.maintop ul.level_1 > li.submenu:hover {
    z-index: 9030;
  }

  #header .mod_navigation ul.level_1 > li > a,
  #header .mod_navigation ul.level_1 > li > strong,
  #header nav.maintop ul.level_1 > li > a,
  #header nav.maintop ul.level_1 > li > strong {
    display: block;
    font-size: 14px;
    font-weight: 400;
    font-family: var(--font-body);
    color: var(--c-text-soft);
    padding: 8px 18px;
    min-height: 0;
    width: auto;
    letter-spacing: 0;
    border-radius: var(--radius-s);
    transition: var(--ease);
    background: transparent;
  }

  #header .mod_navigation ul.level_1 > li > a:hover,
  #header nav.maintop ul.level_1 > li > a:hover {
    color: var(--c-deep);
    background: var(--c-cream);
    border-radius: var(--radius-s);
  }

  /* Aktiver Punkt: Blush-Pill */
  #header .mod_navigation ul.level_1 > li > strong.active,
  #header .mod_navigation ul.level_1 > li > a.trail,
  #header nav.maintop ul.level_1 > li > strong.active,
  #header nav.maintop ul.level_1 > li > a.trail {
    color: var(--c-warm-brown);
    font-weight: 600;
    background: var(--c-blush);
  }

  /* Dropdown: über Banner, Content, Beans — alles außer Mmenu */
  #header nav.maintop .level_2,
  #header .mod_navigation .level_2 {
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 9020;
    margin-top: 0;
    background: var(--c-white);
    border-top: 4px solid var(--c-cta);
    border-radius: 0 var(--radius-m) var(--radius-m) var(--radius-m);
    box-shadow: 0 12px 32px rgba(58, 44, 31, 0.12);
    text-align: left;
  }

  #header nav.maintop .level_2 li a:link,
  #header nav.maintop .level_2 li a:visited,
  #header .mod_navigation .level_2 li a:link,
  #header .mod_navigation .level_2 li a:visited {
    color: var(--c-deep);
    background: transparent;
  }

  #header nav.maintop .level_2 li a:hover,
  #header .mod_navigation .level_2 li a:hover {
    background: var(--c-cream);
    color: var(--c-deep);
  }

  /* ============================================
     Schwangerschaftswochen-Dots
     Contao-Seitentitel: „12<br>SSW" — Kreis clippt
     alles unter der Zahl (line-height + overflow).
     ============================================ */

  #main .mod_customnav.schwangerschaftsDots {
    position: relative;
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0;
    padding: 16px 0;
    background: var(--c-cream-mid);
    overflow: hidden;
    z-index: 50;
  }

  #main .mod_customnav.schwangerschaftsDots ul {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    height: auto;
    margin: 0;
    padding: 0 48px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  #main .mod_customnav.schwangerschaftsDots ul::-webkit-scrollbar {
    display: none;
  }

  #main .mod_customnav.schwangerschaftsDots li {
    display: flex;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    background: transparent;
  }

  /* Wochen-Pills. JS kürzt den Titel auf die Zahl;
     ohne JS clippt overflow die restliche Zeile. */
  #main .mod_customnav.schwangerschaftsDots li a:link,
  #main .mod_customnav.schwangerschaftsDots li a:visited,
  #main .mod_customnav.schwangerschaftsDots li span.active,
  #main .mod_customnav.schwangerschaftsDots li a.active {
    display: block;
    box-sizing: border-box;
    width: auto;
    min-width: 38px;
    max-width: 42px;
    height: 38px;
    padding: 0 14px;
    margin: 0;
    overflow: hidden;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    line-height: 38px;
    text-align: center;
    color: var(--c-deep);
    background: var(--c-white);
    border-radius: var(--radius-pill);
    box-shadow: none;
    white-space: nowrap;
  }

  #main .mod_customnav.schwangerschaftsDots li span.active,
  #main .mod_customnav.schwangerschaftsDots li.active a,
  #main .mod_customnav.schwangerschaftsDots li a.active {
    background: var(--c-cta);
    color: #fff;
    box-shadow: none;
  }

  #main .mod_customnav.schwangerschaftsDots li a:hover {
    background: var(--c-deep);
    color: #fff;
  }

  #main .mod_customnav.schwangerschaftsDots li.TrimesterZwei a:hover {
    background: var(--c-warm-brown);
  }

  #main .mod_customnav.schwangerschaftsDots li.TrimesterDrei a:hover {
    background: var(--c-cta);
  }

  /* Newsletter-Label „SSW" + Text-Pills: volle Beschriftung */
  #main .mod_customnav.schwangerschaftsDots li.newsletter a,
  #main .mod_customnav.schwangerschaftsDots li.entwicklungsPill a:link,
  #main .mod_customnav.schwangerschaftsDots li.entwicklungsPill a:visited,
  #main .mod_customnav.schwangerschaftsDots li.entwicklungsPill span.active {
    width: auto;
    min-width: 0;
    max-width: none;
    height: 38px;
    padding: 0 20px;
    overflow: visible;
    line-height: 38px;
    white-space: nowrap;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    background: var(--c-white);
    color: var(--c-deep);
  }

  /* Pills laufen unter den Scroll-Buttons weich aus statt hart abgeschnitten */
  #main .mod_customnav.schwangerschaftsDots ul {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%);
  }

  #main .mod_customnav.schwangerschaftsDots .scroll-button {
    z-index: 60;
    background: var(--c-cta);
    color: #fff;
  }

  #main .mod_customnav.schwangerschaftsDots .scroll-button:hover {
    background: var(--c-cta-dark);
  }

  /* ============================================
     Breadcrumb
     ============================================ */

  .mod_breadcrumb {
    position: relative;
    top: auto;
    z-index: 1;
    max-width: var(--w-content);
    width: 100%;
    margin: 0 auto;
    padding: 22px var(--pad-x) 0;
    background: none;
    text-align: left;
  }

  .mod_breadcrumb ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    line-height: 1.4;
    font-size: var(--fs-meta);
    color: var(--c-text-muted);
    opacity: 1;
  }

  .mod_breadcrumb li {
    display: inline;
    margin: 0;
    padding: 0;
    background: none;
    color: var(--c-text-muted);
    font-size: var(--fs-meta);
  }

  .mod_breadcrumb a,
  .mod_breadcrumb span {
    font-size: var(--fs-meta);
    color: var(--c-text-muted);
    letter-spacing: 0;
    padding: 0;
  }

  .mod_breadcrumb li:not(:last-child)::after {
    content: "›";
    margin-left: 4px;
    color: var(--c-text-muted);
  }

  .mod_breadcrumb li.active,
  .mod_breadcrumb li.active span {
    color: var(--c-text-soft);
  }

  body.home .mod_breadcrumb { display: none; }

  body.hub .mod_breadcrumb {
    position: relative;
    padding-top: 22px;
  }

  /* ============================================
     Footer — full bleed
     ============================================ */

  #footer {
    background: var(--c-footer-bg);
    padding: 64px var(--pad-x) 40px;
    margin-top: 0;
    width: 100%;
    max-width: none;
  }

  #footer .inside {
    max-width: var(--w-content);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    padding-left: 0;
    padding-right: 0;
  }

  #footer h4,
  #footer .h4 {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 19px;
    color: var(--c-footer-mut);
    margin-bottom: 14px;
  }

  #footer nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  #footer nav li { margin-bottom: 8px; }

  #footer a,
  #footer p {
    font-size: 14px;
    color: var(--c-footer-text);
  }

  #footer a:hover { color: #fff; }

  #footer .sw-footer-brand,
  #footer .copyright {
    grid-column: 1 / -1;
    text-align: center;
    margin-top: 36px;
  }

  #footer .sw-footer-brand .sw-footer-label {
    font-size: var(--fs-meta);
    color: var(--c-footer-mut);
    margin-bottom: 12px;
  }

  #footer .sw-footer-brand .sw-footer-logo {
    font-family: var(--font-hand);
    font-size: 36px;
    font-weight: 600;
    color: #fff;
    line-height: 1;
  }

  #footer .sw-footer-brand .sw-footer-sub {
    font-size: 11px;
    letter-spacing: 0.25em;
    color: var(--c-footer-mut);
    margin-bottom: 16px;
  }

  #footer .copyright,
  #footer .copyright a {
    font-size: var(--fs-meta);
    color: var(--c-footer-mut);
    margin-top: 0;
  }

  /* ============================================
     Responsive
     ============================================ */

  @media (max-width: 900px) {
    #footer .inside {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 640px) {
    #header .inside {
      grid-template-columns: auto 1fr auto;
      padding-top: 10px;
      padding-bottom: 10px;
    }

    .logo {
      grid-column: 2;
      justify-self: center;
      width: 160px;
      height: 44px;
      background-position: center;
    }

    #header .mod_search {
      grid-column: 3;
    }

    #header .mod_search .formbody {
      width: 44px;
      min-height: 36px;
      padding: 4px;
      justify-content: center;
    }

    #header .mod_search .widget,
    #header .mod_search input.text,
    #header .mod_search input[type="search"] {
      display: none;
    }

    #header .mod_search:focus-within .formbody {
      width: min(200px, 55vw);
      padding: 6px 8px 6px 14px;
    }

    #header .mod_search:focus-within .widget,
    #header .mod_search:focus-within input.text,
    #header .mod_search:focus-within input[type="search"] {
      display: block;
    }

    /* Desktop-Mega-Menü aus; Burger/mmenu übernimmt (Legacy) */
    #header .mod_navigation.maintop {
      display: none;
    }

    #footer {
      padding: 44px var(--pad-x) 32px;
    }

    #footer .inside {
      grid-template-columns: 1fr;
      gap: 20px;
    }
  }
}

/* ============================================================
   schwanger.at — contao-elements.css
   Layer: contao  |  Quelle: design.md §3.2
   Neutrale Basis für Contaos Standard-Elemente (.ce_*, .content-*,
   .mod_*) auf unverändertem Markup. Komponenten-Feinschliff
   passiert in components.css.
   ============================================================ */

@layer contao {

  /* ============================================
     Artikel & Abstände
     ============================================ */

  .mod_article {
    position: relative;
  }

  .mod_article > .inside {
    padding-block: 20px;
  }

  /* Legacy-Hero-Fläche am ersten Textblock — vorerst transparent */
  .mod_article .content-text:nth-child(1),
  .sswAnsicht > .mod_article .content-text:nth-child(1) {
    background: transparent;
  }

  /* ============================================
     Text & Prose (#artikel = Artikel-Seitentyp)
     ============================================ */

  #artikel .content-text,
  .sw-w-prose .content-text {
    max-width: var(--w-prose);
    margin-inline: auto;
    padding-inline: 0;
  }

  #artikel .content-text p {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    margin-bottom: 1.1em;
  }

  #artikel .content-headline {
    max-width: var(--w-prose);
    margin-inline: auto;
    padding-inline: 0;
  }

  /* Artikel-Headlines — Referenz Artikelseite: Fraunces 23 / 18 */
  #artikel h2,
  #artikel .content-headline,
  .artikelseiten .content-text h2,
  .artikelseiten h2.content-headline {
    font-family: var(--font-display);
    font-size: var(--fs-prose-h2);
    font-weight: 400;
    font-style: normal;
    line-height: 1.35;
    letter-spacing: 0;
    color: var(--c-deep);
    width: auto;
    max-width: none;
    margin: 32px 0 14px;
    padding: 0;
    border: none;
  }

  #artikel h3,
  .artikelseiten .content-text h3 {
    font-family: var(--font-display);
    font-size: var(--fs-prose-h3);
    font-weight: 400;
    font-style: normal;
    line-height: 1.4;
    letter-spacing: 0;
    color: var(--c-deep);
    width: auto;
    max-width: none;
    margin: 24px 0 10px;
    padding: 0;
    border: none;
  }

  #artikel h2:first-child,
  #artikel .content-text:first-child h2:first-child,
  .artikelseiten .content-text h2:first-child {
    margin-top: 0;
  }

  /* Listen im Fließtext — Referenz: Coral-Dots / CTA-Zahlen.
     Sonderfälle (.insideArticle, .checklist, Galerie, TOC) bleiben ausgenommen. */
  .content-text:not(.insideArticle):not(.sswMeilensteine):not(.sswCheckliste) ul:not(.checklist),
  .content-text:not(.insideArticle) ol {
    list-style: none;
    margin: 0 0 22px 20px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    counter-reset: sw-ol;
  }

  .content-text:not(.insideArticle):not(.sswMeilensteine):not(.sswCheckliste) ul:not(.checklist) li,
  .content-text:not(.insideArticle) ol li {
    list-style: none;
    position: relative;
    margin: 0;
    padding: 0 0 0 34px;
    border: none;
    border-radius: 0;
    background: none;
    font-size: var(--fs-body);
    line-height: 1.75;
    color: var(--c-text);
  }

  .content-text:not(.insideArticle):not(.sswMeilensteine):not(.sswCheckliste) ul:not(.checklist) li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.35em;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--c-coral-pale);
  }

  .content-text:not(.insideArticle) ol li {
    counter-increment: sw-ol;
    font-size: 15px;
    line-height: 1.7;
  }

  .content-text:not(.insideArticle) ol li::before {
    content: counter(sw-ol);
    position: absolute;
    left: 0;
    top: 1px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--c-cta);
    color: #fff;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
  }

  /* Blockquote als Editorial-Zitat */
  .content-text blockquote {
    margin: 32px 0;
    padding: 0 0 0 24px;
    border-left: 3px solid var(--c-coral-pale);
  }

  .content-text blockquote p {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 20px;
    line-height: 1.5;
    color: var(--c-deep);
  }

  /* ============================================
     Bilder & Galerie
     ============================================ */

  .content-image figure,
  .content-text figure {
    line-height: 0;
  }

  .content-image img,
  .content-text figure img {
    border-radius: var(--radius-m);
  }

  .content-image figcaption,
  .content-text figcaption {
    font-size: var(--fs-meta);
    color: var(--c-text-muted);
    line-height: 1.5;
    padding-top: 8px;
  }

  /* Editorial-Ausbrecher im Prose-Kontext (design.md §2.4):
     Bild-Element bekommt im Backend sw-break / sw-break--left /
     sw-break--right. Wechsel links/rechts redaktionell steuern. */
  @media (min-width: 900px) {
    #artikel .content-image.sw-break {
      max-width: var(--w-content);
      margin-inline: auto;
    }

    #artikel .content-image.sw-break--left {
      margin-left: calc((var(--w-content) - var(--w-prose)) / -2 + var(--pad-x));
    }

    #artikel .content-image.sw-break--right {
      margin-right: calc((var(--w-content) - var(--w-prose)) / -2 + var(--pad-x));
    }
  }

  .content-gallery ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
  }

  .content-gallery img {
    border-radius: var(--radius-m);
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

  /* ============================================
     Akkordeon / FAQ (Hairline-Stil, keine Boxen)
     ============================================ */

  .ce_accordion {
    border-bottom: var(--border-hair);
  }

  .ce_accordion:first-of-type {
    border-top: var(--border-hair);
  }

  .ce_accordion .toggler {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    font-size: 15px;
    font-weight: 500;
    color: var(--c-deep);
    cursor: pointer;
    transition: var(--ease);
  }

  .ce_accordion .toggler:hover {
    color: var(--c-cta);
  }

  .ce_accordion .toggler::after {
    content: "+";
    font-family: var(--font-display);
    font-size: 22px;
    line-height: 1;
    color: var(--c-coral);
    flex: none;
  }

  .ce_accordion .toggler.active::after {
    content: "−";
  }

  .ce_accordion .accordion {
    padding: 0 0 18px;
  }

  .ce_accordion .accordion p {
    font-size: var(--fs-teaser);
    line-height: 1.65;
    color: var(--c-text-soft);
  }

  /* Contao 5 / handorgel — gleiches Hairline-Muster wie .ce_accordion */
  .content-accordion {
    background: none;
    padding: 0;
    margin-bottom: 32px;
  }

  .content-accordion .handorgel__header {
    border-bottom: var(--border-hair);
    margin: 0;
    padding: 0;
  }

  .content-accordion .handorgel__header__button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 16px 0;
    background: none;
    border: none;
    font-family: var(--font-body);
    font-style: normal;
    font-weight: 500;
    font-size: 15px;
    color: var(--c-deep);
    text-align: left;
    cursor: pointer;
  }

  .content-accordion .handorgel__header__button::after {
    content: "+";
    flex: none;
    font-family: var(--font-display);
    font-size: 22px;
    line-height: 1;
    color: var(--c-coral);
  }

  .content-accordion .handorgel__header--open .handorgel__header__button::after {
    content: "−";
  }

  .content-accordion .handorgel__content p {
    font-size: var(--fs-teaser);
    line-height: 1.65;
    color: var(--c-text-soft);
  }

  /* ============================================
     Downloads
     ============================================ */

  .content-download a,
  .content-downloads a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 0;
    border-bottom: var(--border-hair);
    font-size: 15px;
    font-weight: 500;
    color: var(--c-deep);
  }

  .content-download a::before,
  .content-downloads a::before {
    content: "→";
    color: var(--c-coral);
  }

  /* Contaos icons.min.css (unlayered, im Seitenlayout „Icons“) legt ein
     PDF-Hintergrundbild + 22px Einzug unter den Text — !important ist
     hier die einzige Möglichkeit, unlayered CSS aus einer Ebene zu schlagen. */
  .download-element a {
    background: none !important;
    padding-left: 0 !important;
  }

  /* ============================================
     Formulare (.ce_form / Modul-Formulare)
     ============================================ */

  .ce_form .widget {
    margin-bottom: 16px;
  }

  .ce_form label {
    display: block;
    font-size: var(--fs-teaser);
    font-weight: 500;
    color: var(--c-text-soft);
    margin-bottom: 6px;
  }

  .ce_form input.text,
  .ce_form select,
  .ce_form textarea {
    width: 100%;
  }

  .ce_form p.error {
    font-size: var(--fs-meta);
    color: var(--c-cta-dark);
    margin: 4px 0 0;
  }

  .ce_form input.error,
  .ce_form textarea.error {
    border-color: var(--c-cta);
  }

  /* ============================================
     News-Module: Grundraster
     (Teaser-Varianten in components.css)
     ============================================ */

  .mod_newslist .layout_latest,
  .mod_newslist .layout_simple {
    padding-bottom: 26px;
    margin-bottom: 26px;
    border-bottom: var(--border-hair);
  }

  .mod_newslist .info {
    font-size: var(--fs-meta);
    color: var(--c-text-muted);
    margin-bottom: 4px;
  }

  .mod_newslist h2 a:hover {
    color: var(--c-cta);
  }

  /* Legacy gab .more a eine CTA-Pill (Hintergrund) — hier Textlink */
  .mod_newslist .more a {
    display: inline;
    width: auto;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    font-family: var(--font-body);
    font-style: normal;
    font-size: var(--fs-meta);
    font-weight: 600;
    color: var(--c-cta);
  }

  .mod_newslist .more a::after {
    content: " →";
  }

  /* ============================================
     Pagination (News, Listen)
     ============================================ */

  .pagination {
    margin: 30px 0;
  }

  .pagination p {
    display: none; /* "Seite X von Y" — Zahlen genügen */
  }

  .pagination ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 8px;
  }

  .pagination li a,
  .pagination li strong,
  .pagination li span {
    box-sizing: border-box;
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-meta);
    font-weight: 600;
    color: var(--c-text-soft);
    transition: var(--ease);
  }

  .pagination li a:hover {
    background: var(--c-cream);
    color: var(--c-deep);
  }

  .pagination li strong.active {
    background: var(--c-cta);
    color: #fff;
  }

  .pagination li a {
    background: var(--c-white);
    box-shadow: inset 0 0 0 1px var(--c-cream-dark);
  }

  .pagination ul {
    flex-wrap: wrap;
  }

  /* ============================================
     Kommentare  (.ce_comments)
     Referenz Artikelseite: H2 21px, Zeilen mit Initial,
     Formular als Cream-Box.
     ============================================ */

  .ce_comments {
    max-width: var(--w-prose);
    margin: 36px auto 0;
    padding: 0;
    background: none;
  }

  .ce_comments > h2:first-of-type,
  #artikel .ce_comments > h2:first-of-type {
    font-family: var(--font-display);
    font-size: var(--fs-block);
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0;
    text-align: left;
    color: var(--c-deep);
    width: auto;
    margin: 36px 0 18px;
    padding: 0;
    border: none;
    border-radius: 0;
  }

  .ce_comments .comment_default {
    display: grid;
    grid-template-columns: 38px 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 12px;
    row-gap: 4px;
    align-items: start;
    background: none;
    border-radius: 0;
    padding: 18px 0;
    margin: 0;
    border-top: var(--border-hair);
  }

  .ce_comments .comment_default::before {
    content: "";
    grid-column: 1;
    grid-row: 1 / 3;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--c-coral-muted);
  }

  .ce_comments .comment_default:nth-of-type(3n+2)::before {
    background: var(--c-sage);
  }

  .ce_comments .comment_default:nth-of-type(3n)::before {
    background: var(--c-blush);
  }

  .ce_comments .comment_default .info {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    padding: 0;
    background: none;
    font-size: var(--fs-teaser);
    font-style: normal;
    font-weight: 600;
    color: var(--c-deep);
  }

  .ce_comments .comment_default .info time,
  .ce_comments .comment_default .info .date {
    font-weight: 400;
    font-size: 12px;
    color: var(--c-text-muted);
  }

  .ce_comments .comment_default .comment {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    padding: 0;
    background: none;
    border-radius: 0;
  }

  .ce_comments .comment_default .comment p {
    font-size: var(--fs-teaser);
    line-height: 1.6;
    color: var(--c-text-soft);
    margin: 0;
  }

  .ce_comments .comment_default .reply {
    grid-column: 2;
    grid-row: 3;
    margin: 8px 0 0;
    padding: 12px 0 0 16px;
    border: none;
    border-left: 2px solid var(--c-cream-dark);
    border-radius: 0;
    background: none;
  }

  .ce_comments .comment_default .reply .info {
    grid-column: auto;
    grid-row: auto;
  }

  .ce_comments .comment_default .reply .comment {
    grid-column: auto;
    grid-row: auto;
    background: none;
  }

  /* Formular = Cream-Box „Einen Kommentar schreiben" */
  .ce_comments form {
    background: var(--c-cream);
    border: none;
    border-radius: var(--radius-m);
    padding: 24px;
    margin-top: 24px;
  }

  .ce_comments form h2,
  .ce_comments h2:nth-of-type(2),
  #artikel .ce_comments form h2,
  #artikel .ce_comments h2:nth-of-type(2) {
    display: block;
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0;
    text-align: left;
    color: var(--c-deep);
    width: auto;
    margin: 0 0 14px;
    padding: 0;
    border: none;
    background: none;
  }

  .ce_comments .formbody {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 0;
  }

  .ce_comments .widget {
    margin: 0;
    flex-basis: auto;
    width: auto;
  }

  .ce_comments .widget-textarea,
  .ce_comments .widget-captcha,
  .ce_comments .widget-checkbox,
  .ce_comments .widget-explanation,
  .ce_comments .submit_container,
  .ce_comments .widget-submit {
    grid-column: 1 / -1;
  }

  .ce_comments label {
    display: block;
    margin: 0 0 6px;
    font-size: var(--fs-teaser);
    font-weight: 500;
    color: var(--c-text-soft);
  }

  .ce_comments input.text,
  .ce_comments input.captcha,
  .ce_comments textarea {
    display: block;
    width: 100%;
    height: 42px;
    margin: 0;
    padding: 0 14px;
    background: #fff;
    border: 1px solid var(--c-cream-dark);
    border-radius: var(--radius-s);
    font-family: var(--font-body);
    font-size: var(--fs-teaser);
    color: var(--c-text);
  }

  .ce_comments textarea {
    height: auto;
    min-height: 96px;
    padding: 12px 14px;
    resize: vertical;
  }

  .ce_comments .captcha {
    width: 72px;
    float: none;
    margin: 0 10px 0 0;
  }

  .ce_comments .checkbox_container {
    margin: 4px 0 0;
    padding: 0;
  }

  .ce_comments .checkbox_container input.checkbox {
    width: 18px;
    height: 18px;
    float: left;
    margin: 2px 10px 0 0;
  }

  .ce_comments .checkbox_container label {
    margin: 0;
  }

  .ce_comments button.submit {
    display: inline-block;
    width: auto;
    margin: 4px 0 0;
    padding: 12px 26px;
    background: var(--c-cta);
    border: none;
    border-radius: var(--radius-m);
    color: #fff;
    font-family: var(--font-body);
    font-size: var(--fs-teaser);
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0;
  }

  .ce_comments button.submit:hover {
    background: var(--c-cta-dark);
    color: #fff;
  }

  @media (max-width: 640px) {
    .ce_comments .formbody {
      grid-template-columns: 1fr;
    }
  }

  /* ============================================
     Artikel-Lead  (.teaser im Artikel, nicht Newslist)
     Referenz: Fraunces 19px / 1.6
     ============================================ */

  #artikel .content-text.teaser > p:first-child,
  #artikel .content-text.teaser .rte > p:first-child,
  #artikel p.teaser,
  .artikelseiten .content-text.teaser > p:first-child,
  .artikelseiten .content-text.teaser .rte > p:first-child,
  .artikelseiten p.teaser {
    font-family: var(--font-display);
    font-size: var(--fs-prose-lead);
    font-weight: 400;
    line-height: 1.6;
    color: var(--c-text);
    margin-bottom: 26px;
  }

  /* ============================================
     Lese-Container portalweit
     Jeder Inhaltsblock direkt in einem Artikel bzw. einer
     Nachricht steht auf der Lesespalte; Medien dürfen breiter.
     :where() hält die Spezifität bei 0 — jede Regel aus
     components/pages (Karten, Raster, Seitentypen) gewinnt.
     ============================================ */

  :where(.mod_article, .layout_full) > :where(.content-text, .content-headline, .content-accordion, .ce_accordion, .content-table, .content-list, .content-hyperlink, .content-download, .content-downloads, .ce_comments, .letztesUpdate) {
    box-sizing: border-box;
    width: auto;
    max-width: var(--w-prose);
    margin-inline: auto;
  }

  :where(.mod_article, .layout_full) > :where(.content-image, .content-gallery, .content-youtube, .content-vimeo, .content-player, .videoWrapper) {
    box-sizing: border-box;
    width: auto;
    max-width: var(--w-content);
    margin: var(--space-m) auto;
  }

  :where(.mod_article, .layout_full) > .content-text :where(h2) {
    font-family: var(--font-display);
    font-size: var(--fs-prose-h2);
    font-weight: 400;
    font-style: normal;
    line-height: 1.3;
    letter-spacing: 0;
    color: var(--c-deep);
    width: auto;
    margin: var(--space-l) 0 var(--space-s);
    padding: 0;
    border: none;
    background: none;
    text-align: left;
  }

  :where(.mod_article, .layout_full) > .content-text :where(h3, h4) {
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: 400;
    font-style: normal;
    line-height: 1.35;
    letter-spacing: 0;
    color: var(--c-deep);
    width: auto;
    margin: var(--space-m) 0 10px;
    padding: 0;
    border: none;
    background: none;
    box-shadow: none;
    text-align: left;
  }

  /* Legacy-Zierbalken unter Zwischenüberschriften entfernen */
  :where(.mod_article, .layout_full) > .content-text :where(h2, h3, h4)::after {
    content: none;
  }

  :where(.mod_article, .layout_full) > .content-text :where(p, li) {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
  }

  /* ---- Video: immer 16:9, gerundet ---- */
  .videoWrapper,
  .content-youtube figure,
  .content-vimeo figure {
    position: relative;
    height: auto;
    padding: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--c-deep);
    border-radius: var(--radius-l);
  }

  .videoWrapper iframe,
  .content-youtube iframe,
  .content-vimeo iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }

  .videoWrapper hr {
    display: none;
  }

  /* ---- Galerie: luftiges Raster statt dunklem Band ---- */
  .content-gallery {
    background: none;
  }

  .content-gallery > ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    overflow: visible;
    background: none;
  }

  .content-gallery > ul > li {
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
    background: none;
  }

  .content-gallery > ul > li::before {
    content: none;
  }

  .content-gallery figure {
    margin: 0;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--radius-m);
    background: var(--c-cream);
  }

  .content-gallery img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    border-radius: 0;
    transition: transform 0.4s ease;
  }

  .content-gallery a:hover img {
    transform: scale(1.04);
  }

  /* ---- Blätter-Navigation (Booknav) portalweit ---- */
  .mod_booknav {
    max-width: var(--w-prose);
    margin: var(--space-l) auto;
    padding: 0;
    background: none;
  }

  .mod_booknav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .mod_booknav li {
    margin: 0;
    padding: 0;
    background: none;
  }

  .mod_booknav li::before {
    content: none;
  }

  .mod_booknav a {
    display: inline-block;
    padding: 10px 18px;
    background: var(--c-white);
    border: none;
    border-radius: var(--radius-pill);
    box-shadow: inset 0 0 0 1px var(--c-cream-dark);
    font-family: var(--font-body);
    font-style: normal;
    font-size: var(--fs-teaser);
    font-weight: 600;
    color: var(--c-deep);
  }

  .mod_booknav .previous a::before {
    content: "← ";
  }

  .mod_booknav .next a::after {
    content: " →";
  }

  .mod_booknav .up a {
    background: none;
    box-shadow: none;
    color: var(--c-text-muted);
  }

  .mod_booknav a:hover {
    background: var(--c-cta);
    box-shadow: none;
    color: #fff;
  }

}

/* ============================================================
   schwanger.at — components.css
   Layer: components  |  Quelle: design.md §3.2 + Referenz-Exporte
   .sw-* Komponenten. Klassen werden im Contao-Backend über das
   Feld „CSS-Klasse" an Artikeln/Elementen/Modulen vergeben.
   ============================================================ */

@layer components {

  /* ============================================
     1. Seiten-Hero  (.mod_article.sw-hero)
     Referenz: News/Experten-Profil-Export
     ============================================ */

  .sw-hero {
    position: relative;
    background: var(--c-cream-mid);
    overflow: hidden;
  }

  .sw-hero > .inside {
    position: relative;
    z-index: 1;
    max-width: var(--w-prose);
    margin-inline: auto;
    padding: 56px var(--pad-x) 44px;
  }

  .sw-hero--center > .inside { text-align: center; }

  /* Standard-Blob-Paar; Feinjustage pro Seite in pages.css */
  .sw-hero::before,
  .sw-hero::after {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
  }

  .sw-hero::before {
    width: 120px;
    height: 120px;
    background: var(--c-coral-pale);
    top: -30px;
    left: -24px;
    opacity: 0.5;
    border-radius: var(--blob-a);
  }

  .sw-hero::after {
    width: 90px;
    height: 90px;
    background: var(--c-sage);
    bottom: -24px;
    right: 10%;
    opacity: 0.5;
    border-radius: var(--blob-b);
  }

  /* ============================================
     2. Teaser-Zeile  (.sw-teaser-row)
     Bild 364px links, Text fluid — Referenz: News
     Anker: .mod_newslist.sw-teaser-row .layout_latest
     ============================================ */

  .sw-teaser-row .layout_latest,
  .sw-teaser-row .layout_simple {
    display: flex;
    gap: 22px;
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .sw-teaser-row .image_container {
    width: 364px;
    flex: none;
    border-radius: var(--radius-m);
    overflow: hidden;
    aspect-ratio: 1200 / 630;
  }

  .sw-teaser-row .image_container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    transition: var(--ease);
  }

  .sw-teaser-row .layout_latest:hover img {
    transform: scale(1.03);
  }

  .sw-teaser-row .layout_latest > *:not(.image_container) {
    flex: 1;
    min-width: 260px;
  }

  .sw-teaser-row h2 {
    font-size: 20px;
    margin-bottom: 8px;
  }

  .sw-teaser-row .teaser p {
    font-size: var(--fs-teaser);
    line-height: 1.65;
    color: var(--c-text-soft);
    margin-bottom: 10px;
  }

  @media (max-width: 640px) {
    .sw-teaser-row .image_container { width: 100%; }
  }

  /* ============================================
     3. Teaser-Karte  (.sw-card)
     Weiß auf Cream, für Raster auf Hubs/Startseite
     ============================================ */

  .sw-card {
    background: var(--c-white);
    border-radius: var(--radius-l);
    overflow: hidden;
    transition: var(--ease);
    display: block;
  }

  .sw-card:hover {
    box-shadow: var(--shadow-card);
  }

  .sw-card .image_container {
    aspect-ratio: 1200 / 630;
    overflow: hidden;
  }

  .sw-card .image_container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
  }

  .sw-card__body,
  .sw-card .teaser {
    padding: 18px 22px 22px;
  }

  .sw-card h2, .sw-card h3 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 18px;
    color: var(--c-deep);
    margin-bottom: 6px;
  }

  /* Karten-Raster als Artikel-Klasse: .sw-grid (Backend) */
  .sw-grid > .inside {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    align-items: start;
  }

  .sw-grid--2 > .inside { grid-template-columns: repeat(2, 1fr); }

  /* Editorial-Asymmetrie: erstes Kind doppelt breit */
  .sw-grid--feature > .inside > *:first-child { grid-column: span 2; }

  @media (max-width: 900px) {
    .sw-grid > .inside,
    .sw-grid--2 > .inside { grid-template-columns: 1fr 1fr; }
  }

  @media (max-width: 640px) {
    .sw-grid > .inside,
    .sw-grid--2 > .inside { grid-template-columns: 1fr; }
    .sw-grid--feature > .inside > *:first-child { grid-column: auto; }
  }

  /* ============================================
     4. Info-Boxen  (.sw-box auf .ce_text)
     ============================================ */

  .sw-box {
    background: var(--c-cream);
    border-radius: var(--radius-l);
    padding: 30px;
    margin-block: 24px;
  }

  .sw-box--sage {
    background: var(--c-sage);
  }

  .sw-box--sage h2, .sw-box--sage h3 { color: var(--c-sage-text); }

  .sw-box--trust {
    background: var(--c-trust-soft);
  }

  .sw-box--trust h2, .sw-box--trust h3 { color: var(--c-trust); }

  .sw-box--blush {
    background: var(--c-blush);
  }

  .sw-box--blush h2, .sw-box--blush h3 { color: var(--c-blush-text); }

  .sw-box--center { text-align: center; }

  .sw-box > *:last-child { margin-bottom: 0; }

  /* Hinweis-Boxen — Legacy-Klassen, neu als organische Callouts.
     Icon bleibt (weiß, 50 %); Blob als zweites Dekor. */
  .tipp,
  .wichtig,
  .zitat,
  .elterncheck,
  .experte,
  .faq {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    width: auto;
    max-width: 100%;
    margin: 24px 0;
    padding: 26px 30px;
    border-radius: var(--radius-callout);
    font-size: 15px;
    line-height: 1.65;
    color: var(--c-deep);
    box-sizing: border-box;
  }

  .tipp::before,
  .wichtig::before,
  .zitat::before,
  .elterncheck::before,
  .experte::before,
  .faq::before,
  .tipp::after,
  .wichtig::after,
  .zitat::after,
  .elterncheck::after,
  .experte::after,
  .faq::after {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
  }

  /* Bestehende Box-Icons, weiß + 50 % — Wasserzeichen oben rechts */
  .tipp::before,
  .wichtig::before,
  .zitat::before,
  .elterncheck::before,
  .experte::before,
  .faq::before {
    width: 120px;
    height: 120px;
    top: -16px;
    right: -12px;
    background-color: #fff;
    opacity: 0.5;
    -webkit-mask: var(--sw-box-icon) center / contain no-repeat;
    mask: var(--sw-box-icon) center / contain no-repeat;
  }

  .tipp::after,
  .wichtig::after,
  .zitat::after,
  .elterncheck::after,
  .experte::after,
  .faq::after {
    width: 90px;
    height: 90px;
    top: -30px;
    right: -20px;
    background: #fff;
    opacity: 0.35;
    border-radius: var(--blob-a);
  }

  .tipp > *,
  .wichtig > *,
  .zitat > *,
  .elterncheck > *,
  .experte > *,
  .faq > * {
    position: relative;
    z-index: 1;
  }

  .tipp,
  .experte {
    --sw-box-icon: url("/files/design/_icons/boxTipp.svg");
    background: var(--c-sage);
  }

  .wichtig,
  .elterncheck {
    --sw-box-icon: url("/files/design/_icons/boxWichtig.svg");
    background: var(--c-blush);
    color: var(--c-deep);
  }

  .zitat {
    --sw-box-icon: url("/files/design/_icons/boxZitat.svg");
    background: var(--c-quote);
    border-radius: var(--radius-callout-inv);
    font-family: var(--font-display);
    font-size: 19px;
    font-style: italic;
    font-weight: 400;
    line-height: 1.5;
    color: var(--c-deep);
  }

  .zitat::after {
    top: auto;
    right: auto;
    bottom: -30px;
    left: -20px;
    opacity: 0.4;
    border-radius: var(--blob-b);
  }

  .faq {
    --sw-box-icon: url("/files/design/_icons/boxFAQ.svg");
    background: var(--c-trust-soft);
  }

  .tipp p,
  .wichtig p,
  .zitat p,
  .elterncheck p,
  .experte p,
  .faq p {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
  }

  .tipp h2, .tipp h3,
  .wichtig h2, .wichtig h3,
  .zitat h2, .zitat h3,
  .elterncheck h2, .elterncheck h3,
  .experte h2, .experte h3,
  .faq h2, .faq h3 {
    margin-top: 0;
    width: auto;
    padding: 0;
    border: none;
  }

  /* ============================================
     5. Expert*innen-Siegel  (.sw-expert-badge)
     Twig-Partial, siehe templates/. Trust-Kern der Marke.
     ============================================ */

  .sw-expert-badge {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--c-trust-soft);
    border-radius: var(--radius-l);
    padding: 14px 20px;
    margin-block: 20px;
    max-width: fit-content;
  }

  .sw-expert-badge__photo {
    width: 56px;
    height: 56px;
    flex: none;
    border-radius: var(--blob-a);
    overflow: hidden;
  }

  .sw-expert-badge__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
  }

  .sw-expert-badge__label {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--c-trust);
    margin-bottom: 2px;
  }

  .sw-expert-badge__name {
    font-size: var(--fs-teaser);
    font-weight: 600;
    color: var(--c-deep);
  }

  .sw-expert-badge__name a:hover { color: var(--c-trust); }

  .sw-expert-badge__role {
    font-size: 12px;
    color: var(--c-text-muted);
  }

  /* ============================================
     6. Autorenbox  (.authorbox — Legacy-Klasse, neu gestylt)
     ============================================ */

  .authorbox {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    background: var(--c-cream);
    border-radius: var(--radius-l);
    padding: 24px;
    margin-block: 32px;
  }

  .authorbox img {
    width: 84px;
    height: 84px;
    flex: none;
    border-radius: 50%;
    object-fit: cover;
  }

  .authorbox h3, .authorbox h4 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 17px;
    margin-bottom: 4px;
  }

  .authorbox p {
    font-size: var(--fs-teaser);
    line-height: 1.65;
    color: var(--c-text-soft);
    margin: 0;
  }

  /* ============================================
     7. Checkliste  (.sw-checklist)
     Sage-Kontext — Referenz: SSW/Checklisten-Export
     ============================================ */

  .sw-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .sw-checklist li {
    position: relative;
    padding: 14px 0 14px 36px;
    border-bottom: var(--border-hair);
    font-size: 15px;
    line-height: 1.6;
    color: var(--c-text);
  }

  .sw-checklist li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 16px;
    width: 20px;
    height: 20px;
    border: 1.5px solid var(--c-sage-text);
    border-radius: 6px;
    background: var(--c-white);
  }

  .sw-checklist li.done { color: var(--c-text-muted); }

  .sw-checklist li.done::before {
    background: var(--c-sage);
    content: "✓";
    color: var(--c-sage-text);
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ============================================
     8. Link-Liste mit Pfeil  (.sw-linklist)
     „Artikel von …" — Referenz: Experten-Profil
     ============================================ */

  .sw-linklist a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 0;
    border-bottom: var(--border-hair);
    font-size: 15px;
    font-weight: 500;
    color: var(--c-deep);
  }

  .sw-linklist a::before {
    content: "→";
    color: var(--c-coral);
    flex: none;
  }

  /* ============================================
     9. Newsletter-Band  (.mod_subscribe / .sw-newsletter)
     Live-Anker: .mod_subscribe über dem Footer (jedes Layout).
     Referenz: Coral-Muted-Fläche + Blobs, alle Exporte.
     ============================================ */

  .mod_subscribe {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .mod_subscribe > form {
    width: 100%;
  }

  .mod_subscribe,
  .sw-newsletter {
    position: relative;
    left: 50%;
    width: 100vw;
    max-width: 100vw;
    margin: 0 0 0 -50vw;
    padding: 44px var(--pad-x);
    background: var(--c-coral-muted);
    text-align: center;
    overflow: hidden;
    box-sizing: border-box;
  }

  .mod_subscribe::before,
  .mod_subscribe::after,
  .sw-newsletter::before,
  .sw-newsletter::after {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
  }

  .mod_subscribe::before,
  .sw-newsletter::before {
    width: 140px;
    height: 140px;
    background: var(--c-coral-pale);
    top: -44px;
    left: -20px;
    opacity: 0.5;
    border-radius: var(--blob-a);
  }

  .mod_subscribe::after,
  .sw-newsletter::after {
    width: 90px;
    height: 90px;
    background: var(--c-coral-pale);
    bottom: -30px;
    right: 12%;
    opacity: 0.6;
    border-radius: var(--blob-b);
  }

  .mod_subscribe > p,
  .mod_subscribe form,
  .sw-newsletter > .inside,
  .sw-newsletter form {
    position: relative;
    z-index: 1;
    max-width: 480px;
    margin-inline: auto;
  }

  .mod_subscribe > p {
    position: relative;
  }

  .mod_subscribe > p::before,
  .sw-newsletter .sw-eyebrow {
    display: block;
    font-family: var(--font-hand);
    font-size: var(--fs-hand);
    font-weight: 600;
    color: var(--c-warm-brown);
    line-height: 1;
    margin-bottom: 36px;
  }

  .mod_subscribe > p::before {
    content: "Für dich & dein Baby";
  }

  .mod_subscribe > p::after {
    content: "Hol dir den Schwanger. Newsletter";
    position: absolute;
    left: 0;
    right: 0;
    top: 28px;
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 400;
    font-style: normal;
    line-height: 1.3;
    color: var(--c-deep);
  }

  .mod_subscribe h2,
  .sw-newsletter h2 {
    font-size: 21px;
    font-weight: 400;
    font-style: normal;
    color: var(--c-deep);
    margin: 0 0 6px;
    padding: 0;
    width: auto;
  }

  .mod_subscribe > p,
  .sw-newsletter p {
    font-family: var(--font-body);
    font-size: var(--fs-meta);
    font-style: normal;
    line-height: 1.5;
    letter-spacing: 0;
    color: var(--c-warm-brown);
    margin: 0 auto 18px;
    text-align: center;
  }

  .mod_subscribe .formbody,
  .sw-newsletter .formbody,
  .sw-newsletter .widget-group {
    display: flex;
    align-items: stretch;
    gap: 8px;
    padding: 0;
    max-width: 480px;
    margin-inline: auto;
  }

  .mod_subscribe .widget,
  .sw-newsletter .widget {
    margin: 0;
    float: none;
  }

  .mod_subscribe .widget-text,
  .sw-newsletter .widget-text {
    flex: 1;
    min-width: 0;
  }

  .mod_subscribe .widget-submit,
  .sw-newsletter .widget-submit {
    flex: none;
  }

  .mod_subscribe input.text,
  .sw-newsletter input.text {
    display: block;
    float: none;
    width: 100%;
    height: 44px;
    margin: 0;
    padding: 0 18px;
    background: var(--c-white);
    border: none;
    border-radius: var(--radius-m);
    font-size: var(--fs-teaser);
    color: var(--c-text);
  }

  .mod_subscribe button.submit,
  .mod_subscribe input.submit,
  .sw-newsletter button.submit,
  .sw-newsletter input.submit {
    float: none;
    width: auto;
    height: 44px;
    margin: 0;
    padding: 0 26px;
    background: var(--c-cta);
    background-image: none;
    border: none;
    border-radius: var(--radius-m);
    color: #fff;
    font-size: var(--fs-teaser);
    font-weight: 600;
    line-height: 44px;
    text-indent: 0;
    white-space: nowrap;
  }

  .mod_subscribe button.submit:hover,
  .mod_subscribe input.submit:hover,
  .sw-newsletter button.submit:hover,
  .sw-newsletter input.submit:hover {
    background: var(--c-cta-dark);
    background-image: none;
    color: #fff;
  }

  @media (max-width: 640px) {
    .mod_subscribe .formbody,
    .sw-newsletter .formbody {
      flex-direction: column;
    }

    .mod_subscribe button.submit,
    .sw-newsletter button.submit {
      width: 100%;
    }
  }

  /* Dedicated Newsletter-Seite: Sage-Box statt Footer-Band */
  body.newsletter #main .mod_subscribe {
    left: auto;
    width: auto;
    max-width: var(--w-prose);
    margin: 0 auto 40px;
    padding: 34px 32px;
    background: var(--c-sage);
    border-radius: var(--radius-callout);
  }

  body.newsletter #main .mod_subscribe > p::before,
  body.newsletter #main .mod_subscribe > p::after {
    content: none;
    display: none;
    margin: 0;
  }

  /* ============================================
     10. SSW-Navigator  (.SSWsBox — Legacy-Klasse, neu)
     42 Wochen als Zahlenraster, Zahl in Fraunces
     ============================================ */

  .SSWsBox {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
    gap: 8px;
  }

  .SSWsBox a {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    border-radius: var(--radius-s);
    background: var(--c-cream);
    font-family: var(--font-display);
    font-size: 17px;
    color: var(--c-text-soft);
    transition: var(--ease);
  }

  .SSWsBox a:hover {
    background: var(--c-coral-pale);
    color: var(--c-deep);
  }

  .SSWsBox a.active,
  .SSWsBox strong {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    border-radius: var(--radius-s);
    background: var(--c-cta);
    color: #fff;
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 500;
  }

  /* ============================================
     11. Advertorial-Label  (.advertorial — Legacy, neu)
     Referenz: design.md §5 — klar, aber gestaltet
     ============================================ */

  .advertorial {
    display: inline-block;
    background: var(--c-cream);
    border-radius: var(--radius-s);
    color: var(--c-text-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 4px 10px;
  }

  /* ============================================
     12. Advertorial-Partnerblock  (.sw-advertorial)
     Referenz: Artikelseite-Export — Text links, Bild 340px rechts,
     Label rechtsbündig darunter. Am Artikel/Element setzen.
     ============================================ */

  .sw-advertorial {
    background: var(--c-cream);
    border-radius: var(--radius-l);
    padding: 30px;
    display: flex;
    gap: 26px;
    align-items: center;
    flex-wrap: wrap;
    margin: 32px 0 6px;
  }

  .sw-advertorial > div:first-child {
    flex: 1;
    min-width: 260px;
  }

  .sw-advertorial .image_container,
  .sw-advertorial figure {
    width: 340px;
    flex: none;
    border-radius: var(--radius-s);
    overflow: hidden;
  }

  .sw-advertorial img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 0;
  }

  .sw-advertorial .button,
  .sw-advertorial .sw-cta {
    background: var(--c-coral);
  }

  .sw-advertorial .button:hover,
  .sw-advertorial .sw-cta:hover {
    background: var(--c-cta);
  }

  /* Label unter dem Block, rechtsbündig */
  .sw-advertorial + .advertorial,
  .sw-advertorial__label {
    display: block;
    background: none;
    padding: 0;
    text-align: right;
    text-decoration: underline;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    font-size: 11px;
    margin-bottom: 32px;
  }

  /* ============================================
     13. TOC-Box  „Hier erfährst du:"
     Live-Anker: .article_jumper > .ce_hofff_content_navigation
     Optional: .sw-toc im Backend.
     Referenz: Artikelseite-Export.
     ============================================ */

  .article_jumper {
    max-width: var(--w-prose);
    margin: 0 auto 32px;
    padding: 0;
  }

  .sw-toc,
  .ce_hofff_content_navigation {
    background: var(--c-cream);
    border: none;
    border-radius: var(--radius-m);
    padding: 22px 24px;
    margin: 0 0 32px;
  }

  .article_jumper .ce_hofff_content_navigation {
    margin-bottom: 0;
  }

  .sw-toc h2,
  .sw-toc h3,
  .ce_hofff_content_navigation h2,
  .ce_hofff_content_navigation h3 {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 16px;
    font-weight: 400;
    color: var(--c-deep);
    width: auto;
    margin: 0 0 12px;
    padding: 0;
    border: none;
  }

  .sw-toc ul,
  .ce_hofff_content_navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .sw-toc li,
  .ce_hofff_content_navigation li {
    display: block;
    margin: 0;
    padding: 0;
    background: none;
    line-height: 1.4;
  }

  .sw-toc a,
  .ce_hofff_content_navigation a {
    font-size: var(--fs-teaser);
    font-weight: 600;
    color: var(--c-cta);
    white-space: normal;
  }

  .sw-toc a::before,
  .ce_hofff_content_navigation a::before { content: "→ "; }

  .sw-toc a:hover,
  .ce_hofff_content_navigation a:hover { color: var(--c-cta-dark); }

  /* ============================================
     14. Pfeil-Linkliste  (.sw-arrow-list)
     „Weiterführende Artikel", Expert*innen-Artikellisten
     ============================================ */

  .sw-arrow-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .sw-arrow-list li a,
  .sw-arrow-list > a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 0;
    border-bottom: var(--border-hair);
    font-size: 15px;
    font-weight: 500;
    color: var(--c-deep);
    transition: var(--ease);
  }

  .sw-arrow-list li a::before,
  .sw-arrow-list > a::before {
    content: "→";
    color: var(--c-coral);
    flex: none;
  }

  .sw-arrow-list li a:hover,
  .sw-arrow-list > a:hover {
    color: var(--c-cta);
  }

  /* Weiterführende Artikel — Legacy-Klasse .insideArticle
     Referenz Artikelseite: Fraunces-Titel + CTA-Pfeilliste */
  .insideArticle,
  .content-text.insideArticle {
    margin: 26px 0;
    padding: 0;
    border: none;
    background: none;
    max-width: var(--w-prose);
  }

  .insideArticle p,
  .insideArticle h2,
  .insideArticle h3 {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    line-height: 1.4;
    letter-spacing: 0;
    text-align: left;
    color: var(--c-deep);
    width: auto;
    max-width: none;
    margin: 0 0 10px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
  }

  .insideArticle p strong {
    font-weight: 400;
  }

  .insideArticle ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 6px;
    margin: 0;
    padding: 0;
  }

  .insideArticle li {
    display: block;
    width: auto;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
  }

  .insideArticle a,
  .insideArticle li a {
    display: block;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    border: none;
    box-shadow: none;
    text-shadow: none;
    text-align: left;
    font-size: var(--fs-teaser);
    font-weight: 600;
    color: var(--c-cta);
    background: none;
  }

  .insideArticle a::before,
  .insideArticle li a::before {
    content: "→ ";
  }

  .insideArticle a:hover,
  .insideArticle li a:hover {
    color: var(--c-cta-dark);
    background: none;
  }

  /* ============================================
     15. CTA-Box  (.sw-cta-box)
     Cream-Box mit zentrierter Botschaft + Button
     Referenz: „Zur Expert*innen-Übersicht", Verzeichnis-Eintrag
     ============================================ */

  .sw-cta-box {
    background: var(--c-cream);
    border-radius: var(--radius-l);
    padding: 30px;
    text-align: center;
  }

  .sw-cta-box p {
    font-size: 15px;
    font-weight: 600;
    color: var(--c-deep);
    margin-bottom: 14px;
  }

  /* ============================================
     16. Floating Beans  (.sw-beans)
     Ambient SVG-Silhouetten am Viewport-Rand.
     Farbe via Mask + Token; Drift nur bei Motion-OK.
     ============================================ */

  .sw-beans {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
  }

  .sw-beans__item {
    --sw-rot: 0deg;
    --sw-dx: 12px;
    --sw-dy: -28px;
    --sw-rot-mid: 10deg;
    position: absolute;
    display: block;
    max-width: none;
    background-color: var(--c-sand);
    opacity: 0.22;
    -webkit-mask: var(--sw-bean) center / contain no-repeat;
    mask: var(--sw-bean) center / contain no-repeat;
    transform: rotate(var(--sw-rot));
    will-change: transform;
  }

  .sw-beans__item--a {
    --sw-bean: url("/files/layout2026/img/bean-a.svg");
  }

  .sw-beans__item--b {
    --sw-bean: url("/files/layout2026/img/bean-b.svg");
  }

  .sw-beans__item--coral {
    background-color: var(--c-coral-pale);
    opacity: 0.32;
  }

  .sw-beans__item--muted {
    background-color: var(--c-coral-muted);
    opacity: 0.26;
  }

  .sw-beans__item--sage {
    background-color: var(--c-sage);
    opacity: 0.28;
  }

  /* Position / Größe — bewusst asymmetrisch, editorial */
  .sw-beans__item:nth-child(1) {
    --sw-rot: -18deg;
    --sw-dx: 14px;
    --sw-dy: -32px;
    --sw-rot-mid: 12deg;
    width: 52px;
    height: 72px;
    top: 12%;
    left: 4%;
  }

  .sw-beans__item:nth-child(2) {
    --sw-rot: 22deg;
    --sw-dx: -18px;
    --sw-dy: 24px;
    --sw-rot-mid: -10deg;
    width: 36px;
    height: 48px;
    top: 28%;
    right: 6%;
  }

  .sw-beans__item:nth-child(3) {
    --sw-rot: 8deg;
    --sw-dx: 10px;
    --sw-dy: -20px;
    --sw-rot-mid: -12deg;
    width: 44px;
    height: 62px;
    top: 55%;
    left: 7%;
  }

  .sw-beans__item:nth-child(4) {
    --sw-rot: -28deg;
    --sw-dx: -12px;
    --sw-dy: -18px;
    --sw-rot-mid: 14deg;
    width: 28px;
    height: 38px;
    top: 68%;
    right: 9%;
  }

  .sw-beans__item:nth-child(5) {
    --sw-rot: 14deg;
    --sw-dx: 16px;
    --sw-dy: 22px;
    --sw-rot-mid: -8deg;
    width: 40px;
    height: 56px;
    top: 88%;
    right: 5%;
    left: auto;
  }

  @media (prefers-reduced-motion: no-preference) {
    .sw-beans__item:nth-child(1) {
      animation: sw-bean-drift 42s ease-in-out infinite;
    }
    .sw-beans__item:nth-child(2) {
      animation: sw-bean-drift 36s ease-in-out infinite;
    }
    .sw-beans__item:nth-child(3) {
      animation: sw-bean-drift 48s ease-in-out infinite;
    }
    .sw-beans__item:nth-child(4) {
      animation: sw-bean-drift 40s ease-in-out infinite reverse;
      animation-delay: -12s;
    }
    .sw-beans__item:nth-child(5) {
      animation: sw-bean-drift 52s ease-in-out infinite;
      animation-delay: -20s;
    }
  }

  @keyframes sw-bean-drift {
    0%, 100% {
      transform: translate(0, 0) rotate(var(--sw-rot));
    }
    50% {
      transform: translate(var(--sw-dx), var(--sw-dy))
        rotate(calc(var(--sw-rot) + var(--sw-rot-mid)));
    }
  }

  @media (max-width: 640px) {
    .sw-beans__item:nth-child(3),
    .sw-beans__item:nth-child(5) {
      display: none;
    }

    .sw-beans__item:nth-child(1) {
      width: 40px;
      height: 56px;
      left: 2%;
      opacity: 0.22;
    }

    .sw-beans__item:nth-child(2) {
      width: 28px;
      height: 38px;
      right: 3%;
      opacity: 0.22;
    }

    .sw-beans__item:nth-child(4) {
      width: 24px;
      height: 32px;
      opacity: 0.2;
    }
  }

  /* ============================================
     17. Verzeichnis-Fotokarten  (.grid.foto)
     1 / 2 / 3 Karten füllen die Zeile; ab 4. Karte neue Reihe.
     Anker: body.verzeichnisseite .mod_article .grid.foto
     ============================================ */

  .grid.foto {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
    gap: 20px;
    background: transparent;
    padding-bottom: 50px;
  }

  .grid.foto .content-text {
    flex: 1 1 calc((100% - 40px) / 3);
    width: auto;
    max-width: 100%;
    margin: 0;
    min-height: 240px;
    background: var(--c-white);
    border-radius: var(--radius-l);
    overflow: hidden;
  }

  .grid.foto .content-text figure {
    border-radius: var(--radius-m) var(--radius-m) 0 0;
  }

  .grid.foto .content-text figure img {
    border-radius: var(--radius-m) var(--radius-m) 0 0;
  }

  @media (max-width: 900px) {
    .grid.foto .content-text {
      flex-basis: calc((100% - 20px) / 2);
    }
  }

  @media (max-width: 640px) {
    .grid.foto .content-text {
      flex-basis: 100%;
    }
  }

  /* ============================================
     18. Kategorie-Chips  (.hubbar.categories)
     Referenz: Startseite + Hubs — Coral / Sage / Trust / Blush
     ============================================ */

  .hubbar.categories {
    max-width: var(--w-content);
    margin-inline: auto;
    padding: 40px var(--pad-x);
    background: transparent;
    border: none;
    display: block;
  }

  .hubbar.categories h3 {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 22px;
    line-height: 1.3;
    color: var(--c-deep);
    text-align: center;
    width: auto;
    margin: 0 0 20px;
    padding: 0;
    letter-spacing: 0;
  }

  .hubbar.categories .flex,
  .hubbar.categories {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-start;
    align-items: center;
  }

  .hubbar.categories h3 { flex: 1 0 100%; }

  .hubbar.categories a,
  .hubbar.categories a:link,
  .hubbar.categories a:visited {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    max-width: none;
    height: auto;
    margin: 0;
    padding: 11px 18px;
    border: none;
    border-radius: var(--radius-m);
    font-family: var(--font-body);
    font-style: normal;
    font-size: var(--fs-teaser);
    font-weight: 600;
    letter-spacing: 0;
    background-image: none;
    transition: var(--ease);
  }

  .hubbar.categories a img { display: none; }

  .hubbar.categories a span {
    display: inline;
    width: auto;
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: 1.3;
    text-align: left;
    color: inherit;
  }

  .hubbar.categories a:nth-child(4n+1) {
    background: var(--c-coral-pale);
    color: var(--c-cta);
  }

  .hubbar.categories a:nth-child(4n+2) {
    background: var(--c-sage);
    color: var(--c-sage-text);
  }

  .hubbar.categories a:nth-child(4n+3) {
    background: var(--c-trust-soft);
    color: var(--c-trust);
  }

  .hubbar.categories a:nth-child(4n+4) {
    background: var(--c-blush);
    color: var(--c-blush-text);
  }

  .hubbar.categories a:hover {
    background: var(--c-cta);
    color: #fff;
    border: none;
  }

  .hubbar.categories a:hover span { color: #fff; }

  /* ============================================
     19. Zweier-Kacheln auf Startseite/Hubs  (.flex)
     SSW + Checklisten, Verzeichnisse + Community,
     Kindernamen + Häufige Fragen — gleiche Karte, Blob-Icon,
     Buttons unten bündig.
     Legacy: .home .flex div {width:50%; padding:80px 20%}
     wird hier für alle Nachfahren neutralisiert.
     ============================================ */

  .flex:has(.frontSchwangerschaftswochen),
  body.hub .mod_article > .flex {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    width: 100%;
    max-width: var(--w-content);
    margin-inline: auto;
    padding: 20px var(--pad-x);
    align-items: stretch;
  }

  body.hub .mod_article > .flex div {
    width: auto;
    padding: 0;
  }

  .flex:has(.frontSchwangerschaftswochen) > .content-text,
  body.hub .mod_article > .flex > .content-text {
    width: auto;
    margin: 0;
    padding: 32px;
    background: var(--c-white);
    border: var(--border-hair);
    border-radius: var(--radius-l);
    box-shadow: none;
  }

  /* Abstand Icon → Text am .rte, weil Contaos layout.min.css
     (unlayered) figure{margin:0} erzwingt */
  body.hub .mod_article > .flex > .content-text > .rte,
  .flex:has(.frontSchwangerschaftswochen) .rte {
    margin-top: 18px;
  }

  /* Blob-Icon */
  body.hub .mod_article > .flex > .content-text figure,
  .flex:has(.frontSchwangerschaftswochen) figure {
    float: none;
    position: static;
    width: 56px;
    height: 56px;
    margin: 0;
    padding: 0;
    border-radius: var(--blob-a);
    background: var(--c-coral-pale);
    overflow: hidden;
  }

  body.hub .mod_article > .flex > .content-text:nth-child(even) figure {
    background: var(--c-sage);
    border-radius: var(--blob-b);
  }

  body.hub .mod_article > .flex > .content-text figure img,
  .flex:has(.frontSchwangerschaftswochen) figure img {
    display: block;
    width: 28px;
    height: 28px;
    margin: 14px auto;
    padding: 0;
    border: none;
    border-radius: 0;
    object-fit: contain;
  }

  body.hub .mod_article > .flex > .content-text h2 {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 24px;
    line-height: 1.25;
    color: var(--c-deep);
    margin: 0 0 12px;
    padding: 0;
    border: none;
    text-align: left;
  }

  body.hub .mod_article > .flex > .content-text p {
    font-size: 15px;
    line-height: 1.65;
    color: var(--c-text-soft);
    max-width: none;
    width: auto;
    margin: 0 0 16px;
    text-align: left;
  }

  body.hub .mod_article > .flex > .content-text .rte > p:last-child {
    margin-bottom: 0;
    padding-top: 6px;
  }

  /* Primär-Button (Coral-Pill) */
  .frontSchwangerschaftswochen a,
  .checklistenHome a,
  .haeufigeFragenFront .rte a,
  .hubhead .rte a,
  .sitelinkProduktproben {
    display: inline-block;
    width: auto;
    max-width: none;
    background: var(--c-cta);
    color: #fff;
    font-family: var(--font-body);
    font-style: normal;
    font-weight: 600;
    font-size: var(--fs-teaser);
    line-height: 1.3;
    text-align: center;
    padding: 14px 26px;
    margin: 0;
    border: none;
    border-radius: var(--radius-pill);
    box-shadow: none;
  }

  .content-text.frontSchwangerschaftswochen a,
  .content-text.checklistenHome a {
    background: var(--c-coral);
  }

  .frontSchwangerschaftswochen a:hover,
  .checklistenHome a:hover,
  .haeufigeFragenFront .rte a:hover,
  .hubhead .rte a:hover,
  .sitelinkProduktproben:hover {
    background: var(--c-cta-dark);
    color: #fff;
    box-shadow: none;
  }

  /* Sekundär-Links als Chips (Verzeichnisse, Kindernamen) */
  body.hub .mod_article > .flex > .buchtippsHome .rte p:has(> a:only-child) {
    display: inline-block;
    margin: 0;
    padding: 0;
  }

  body.hub .mod_article > .flex > .content-text > .rte {
    text-align: left;
  }

  .buchtippsHome .rte a,
  .namenUmDenErdballFront .rte a {
    display: inline-block;
    width: auto;
    margin: 0 8px 8px 0;
    padding: 9px 16px;
    background: var(--c-coral-pale);
    color: var(--c-cta-dark);
    font-family: var(--font-body);
    font-style: normal;
    font-weight: 600;
    font-size: var(--fs-meta);
    line-height: 1.3;
    border: none;
    border-radius: var(--radius-pill);
    box-shadow: none;
  }

  .buchtippsHome .rte a:hover,
  .namenUmDenErdballFront .rte a:hover {
    background: var(--c-cta);
    color: #fff;
    box-shadow: none;
  }

  /* Community / BabyForum: Sage-Karte mit Thread-Liste */
  body.hub .mod_article > .flex > .frontBabyforum {
    background: var(--c-sage);
    border-color: transparent;
  }

  body.hub .mod_article > .flex > .frontBabyforum figure {
    background: var(--c-white);
  }

  .frontBabyforum p.oberesP {
    position: static;
    color: var(--c-text-soft);
    font-size: 15px;
  }

  .frontBabyforum .rss_default {
    margin: 0;
    padding: 0;
    width: auto;
    border-bottom: 0.5px solid rgba(94, 112, 96, 0.25);
  }

  .frontBabyforum .rss_default:last-child {
    border-bottom: none;
  }

  #main .frontBabyforum .rss_default a:link,
  #main .frontBabyforum .rss_default a:visited {
    display: block;
    width: auto;
    max-width: none;
    padding: 10px 0;
    margin: 0;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    font-family: var(--font-body);
    font-style: normal;
    font-size: var(--fs-teaser);
    font-weight: 500;
    line-height: 1.4;
    color: var(--c-deep);
    text-align: left;
  }

  #main .frontBabyforum .rss_default a:hover {
    background: none;
    border: none;
    box-shadow: none;
    color: var(--c-sage-text);
  }

  @media (max-width: 760px) {
    .flex:has(.frontSchwangerschaftswochen),
    body.hub .mod_article > .flex {
      grid-template-columns: minmax(0, 1fr);
    }

    .flex:has(.frontSchwangerschaftswochen) > .content-text,
    body.hub .mod_article > .flex > .content-text {
      padding: 26px 22px;
    }
  }

  /* ============================================
     20. News-Karten  (Startseite Produkttests & Neuheiten)
     2-Spalten, 1200×630, gilt überall außer Teaser-Zeile
     ============================================ */

  body.home .mod_newslist,
  .mod_newslist.sw-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
    max-width: var(--w-content);
    margin: 0 auto;
    padding: 48px var(--pad-x);
    background: transparent;
    overflow: visible;
  }

  body.home .mod_newslist h2,
  .mod_newslist.sw-cards h2 {
    grid-column: 1 / -1;
    width: auto;
    margin: 0 0 8px;
    padding: 0;
    border: none;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 21px;
    color: var(--c-deep);
  }

  body.home .mod_newslist .layout_latest,
  .mod_newslist.sw-cards .layout_latest {
    height: auto;
    margin: 0;
    padding: 0 0 8px;
    border: none;
    background: transparent;
  }

  body.home .mod_newslist .image_container,
  .mod_newslist.sw-cards .image_container {
    float: none;
    width: 100%;
    aspect-ratio: 1200 / 630;
    border-radius: var(--radius-m);
    overflow: hidden;
    margin: 0 0 8px;
  }

  body.home .mod_newslist img,
  .mod_newslist.sw-cards img {
    float: none;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
    border-radius: 0;
  }

  body.home .mod_newslist h3,
  .mod_newslist.sw-cards h3 {
    margin: 0 0 3px;
    padding: 0;
    border: none;
  }

  body.home .mod_newslist h3 a,
  .mod_newslist.sw-cards h3 a {
    font-family: var(--font-body);
    font-style: normal;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--c-deep);
    letter-spacing: 0;
  }

  body.home .mod_newslist .teaser p,
  .mod_newslist.sw-cards .teaser p {
    font-size: 12px;
    line-height: 1.4;
    color: var(--c-text-muted);
    margin: 0;
  }

  body.home .mod_newslist .more,
  .mod_newslist.sw-cards .more {
    display: none;
  }

  /* ============================================
     21. Hub-Kartenraster  (.hubmodules.red / .blue)
     3 Karten, 16/10-Bild — Startseite + Hubs
     ============================================ */

  /* Grid statt Flex: Überschrift + „Zur Kategorie" teilen sich Zeile 1,
     Karten starten immer in Zeile 2 — auch ohne Kategorie-Link */
  .hubmodules.red,
  .hubmodules.blue {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 28px 20px;
    width: 100%;
    max-width: var(--w-content);
    margin-inline: auto;
    padding: 40px var(--pad-x);
    background: transparent;
    position: relative;
  }

  .hubmodules.red h2,
  .hubmodules.blue h2,
  .hubmodules.red .subhubhead,
  .hubmodules.blue .subhubhead {
    grid-column: 1 / -1;
    grid-row: 1;
    position: static;
    width: auto;
    margin: 0;
    padding: 0;
    border: none;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 21px;
    line-height: 1.3;
    color: var(--c-deep);
    text-align: left;
  }

  .hubmodules.red .content-hyperlink,
  .hubmodules.blue .content-hyperlink {
    grid-column: -2 / -1;
    grid-row: 1;
    justify-self: end;
    align-self: center;
    position: static;
    right: auto;
    top: auto;
    width: auto;
    margin: 0;
  }

  .hubmodules.red .content-hyperlink a,
  .hubmodules.blue .content-hyperlink a,
  .hubmodules.red .content-hyperlink a:link,
  .hubmodules.blue .content-hyperlink a:link {
    display: inline;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 0;
    background: none;
    font-family: var(--font-body);
    font-style: normal;
    font-size: var(--fs-meta);
    font-weight: 600;
    letter-spacing: 0;
    color: var(--c-cta);
  }

  .hubmodules.red .content-hyperlink a::after,
  .hubmodules.blue .content-hyperlink a::after {
    content: " →";
  }

  .hubmodules.red .content-hyperlink a:hover,
  .hubmodules.blue .content-hyperlink a:hover {
    background: none;
    color: var(--c-cta-dark);
  }

  .hubmodules.red .content-text,
  .hubmodules.blue .content-text {
    width: auto;
    margin: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    transition: var(--ease);
  }

  .hubmodules.red .content-text:hover,
  .hubmodules.blue .content-text:hover {
    background: transparent;
  }

  .hubmodules.red .content-text:hover h3,
  .hubmodules.blue .content-text:hover h3,
  .hubmodules.red .content-text:hover p,
  .hubmodules.blue .content-text:hover p {
    color: var(--c-deep);
  }

  .hubmodules.red figure,
  .hubmodules.blue figure {
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-m);
    overflow: hidden;
    margin: 0 0 8px;
  }

  .hubmodules.red img,
  .hubmodules.blue img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    transition: var(--ease);
  }

  .hubmodules.red .content-text:hover img,
  .hubmodules.blue .content-text:hover img {
    transform: none;
    opacity: 1;
    border-radius: 0;
  }

  .hubmodules.red h3,
  .hubmodules.blue h3,
  .hubmodules.red h4,
  .hubmodules.blue h4,
  .hubmodules.red p,
  .hubmodules.blue p {
    padding: 0;
    color: var(--c-deep);
  }

  .hubmodules.red h4,
  .hubmodules.blue h4 {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-cta);
    margin: 0 0 3px;
  }

  .hubmodules.red .content-text:nth-child(3n+1) h4,
  .hubmodules.blue .content-text:nth-child(3n+1) h4 {
    color: var(--c-cta);
  }

  .hubmodules.red .content-text:nth-child(3n+2) h4,
  .hubmodules.blue .content-text:nth-child(3n+2) h4 {
    color: var(--c-sage-text);
  }

  .hubmodules.red .content-text:nth-child(3n) h4,
  .hubmodules.blue .content-text:nth-child(3n) h4 {
    color: var(--c-blush-text);
  }

  .hubmodules.red h3,
  .hubmodules.blue h3 {
    font-family: var(--font-body);
    font-style: normal;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 3px;
  }

  .hubmodules.red p,
  .hubmodules.blue p {
    font-size: var(--fs-meta);
    line-height: 1.5;
    color: var(--c-text-soft);
    margin: 0;
    padding-bottom: 0;
  }

  @media (max-width: 900px) {
    .hubmodules.red,
    .hubmodules.blue {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 640px) {
    body.home .mod_newslist,
    .mod_newslist.sw-cards {
      grid-template-columns: 1fr;
    }

    .hubmodules.red,
    .hubmodules.blue {
      grid-template-columns: minmax(0, 1fr);
      gap: 24px;
    }

    .hubmodules.red .content-hyperlink,
    .hubmodules.blue .content-hyperlink {
      grid-column: 1;
      grid-row: auto;
      justify-self: start;
      margin-top: -16px;
    }

    /* Kompakte Liste: Thumbnail links, Text rechts.
       Float statt Grid, weil Contaos .media{display:flow-root} gewinnt */
    .hubmodules.red .content-text,
    .hubmodules.blue .content-text {
      min-height: 84px;
    }

    .hubmodules.red figure,
    .hubmodules.blue figure {
      float: left;
      width: 112px;
      aspect-ratio: 4 / 3;
      margin: 0;
      border-radius: var(--radius-s);
    }

    .hubmodules.red .content-text .rte,
    .hubmodules.blue .content-text .rte {
      margin-left: 126px;
    }

    .hubmodules.red h3,
    .hubmodules.blue h3 {
      font-size: var(--fs-teaser);
    }
  }

  /* ============================================
     22. Startseite & Hub-Seiten  (body.hub)
     Hero (#hubimage + .hubhead), Expert*innen,
     Produktproben, Produkttests. Alle Sektionen auf
     --w-content bzw. Innenkante --w-inner.
     ============================================ */

  /* Hero: Bild und Text teilen sich Grid-Zeile 1 des Artikels */
  body.hub .mod_article:has(> #hubimage) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding-top: 8px;
  }

  body.hub #hubimage,
  body.hub .mod_article > .hubhead {
    grid-row: 1;
    grid-column: 1;
    width: calc(100% - 2 * var(--pad-x));
    max-width: var(--w-inner);
    margin: 0 auto 24px;
  }

  body.hub #hubimage {
    align-self: stretch;
    max-height: none;
    overflow: visible;
    padding: 0;
  }

  body.hub #hubimage figure {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 360px;
    margin: 0;
    border-radius: var(--radius-l);
    overflow: hidden;
    background: var(--c-cream);
  }

  /* Lesbarkeit: warmer Verlauf von links */
  body.hub #hubimage figure::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
      rgba(253, 250, 246, 0.97) 0%,
      rgba(253, 250, 246, 0.92) 40%,
      rgba(253, 250, 246, 0) 68%);
    pointer-events: none;
  }

  body.hub #hubimage img {
    position: absolute;
    inset: 0;
    top: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: 70% 30%;
    border-radius: 0;
  }

  body.hub .mod_article > .hubhead {
    position: relative;
    top: auto;
    right: auto;
    z-index: 1;
    align-self: center;
    box-sizing: border-box;
    padding: 48px 48px 48px 52px;
    background: none;
    color: var(--c-deep);
    text-align: left;
  }

  body.hub .hubhead h1 {
    position: static;
    top: auto;
    width: auto;
    max-width: 520px;
    margin: 0 0 16px;
    padding: 0;
    font-family: var(--font-display);
    font-size: var(--fs-h1);
    font-weight: 400;
    font-style: italic;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--c-deep);
    text-align: left;
  }

  body.hub .hubhead p {
    width: auto;
    max-width: 400px;
    margin: 0 0 20px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--c-text-soft);
    text-align: left;
  }

  body.hub .hubhead p:last-child {
    margin-bottom: 0;
  }

  @media (max-width: 760px) {
    body.hub .mod_article > .hubhead {
      grid-row: 2;
      align-self: start;
      padding: 0 4px;
      margin-top: -4px;
    }

    /* Legacy-Mobile: #hubimage height:300px/margin-top:-62px,
       figure width:200% */
    body.hub #hubimage {
      height: auto;
      margin-top: 0;
    }

    body.hub #hubimage figure {
      width: 100%;
    }

    body.hub #hubimage figure {
      min-height: 0;
      height: auto;
      aspect-ratio: 16 / 10;
    }

    body.hub #hubimage figure::after {
      display: none;
    }

    body.hub .hubhead h1,
    body.hub .hubhead p {
      max-width: none;
    }
  }

  /* Expert*innen-Leiste */
  body.hub .hubmodules.circles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px 20px;
    width: calc(100% - 2 * var(--pad-x));
    max-width: var(--w-inner);
    margin: 24px auto;
    padding: 40px 32px;
    background: var(--c-white);
    border: var(--border-hair);
    border-radius: var(--radius-l);
    text-align: center;
  }

  body.hub .hubmodules.circles .subhubhead {
    grid-column: 1 / -1;
    position: static;
    width: auto;
    margin: 0;
    padding: 0;
    border: none;
    font-family: var(--font-display);
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 1.3;
    color: var(--c-deep);
    text-align: center;
  }

  body.hub .hubmodules.circles .subhubhead::before {
    content: "Von Expert*innen geprüft";
    display: block;
    font-family: var(--font-hand);
    font-size: var(--fs-hand);
    font-weight: 600;
    color: var(--c-coral);
    line-height: 1;
    margin-bottom: 4px;
  }

  body.hub .hubmodules.circles .content-text {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    background: none;
    box-shadow: none;
  }

  body.hub .hubmodules.circles .rte {
    margin-top: 14px;
  }

  body.hub .hubmodules.circles figure {
    float: none;
    position: relative;
    left: 50%;
    width: 104px;
    height: 104px;
    margin: 0;
    transform: translateX(-50%);
    border-radius: var(--blob-a);
    overflow: hidden;
    background: var(--c-coral-pale);
  }

  body.hub .hubmodules.circles .content-text:nth-child(odd) figure {
    border-radius: var(--blob-b);
    background: var(--c-sage);
  }

  body.hub .hubmodules.circles img {
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    object-fit: cover;
  }

  body.hub .hubmodules.circles p {
    margin: 0;
    padding: 0;
    font-size: var(--fs-meta);
    font-style: normal;
    line-height: 1.5;
    color: var(--c-text-soft);
  }

  body.hub .hubmodules.circles p em,
  body.hub .hubmodules.circles p span {
    font-style: normal;
    color: inherit;
  }

  body.hub .hubmodules.circles strong {
    display: block;
    margin-bottom: 2px;
    font-size: var(--fs-teaser);
    font-weight: 600;
    color: var(--c-deep);
  }

  body.hub .hubmodules.circles strong:empty {
    display: none;
  }

  @media (max-width: 760px) {
    body.hub .hubmodules.circles {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      padding: 32px 20px;
    }

    body.hub .hubmodules.circles figure {
      width: 88px;
      height: 88px;
    }
  }

  /* Produktproben: Hinweis-Karte statt 400px-Weißfläche */
  .produktprobenLink {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: calc(100% - 2 * var(--pad-x));
    max-width: var(--w-inner);
    margin: 24px auto 48px;
    padding: 28px 32px 28px 108px;
    background: var(--c-white) url(/files/design/_icons/produktproben.svg) 32px center / 52px no-repeat;
    border: var(--border-hair);
    border-radius: var(--radius-l);
    box-sizing: border-box;
  }

  .produktprobenLink .produktprobentext {
    max-width: 420px;
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--c-text-soft);
    text-align: left;
  }

  .sitelinkProduktproben:link,
  .sitelinkProduktproben:visited {
    flex: none;
    width: auto;
    margin: 0;
    color: #fff;
  }

  @media (max-width: 760px) {
    .produktprobenLink {
      flex-direction: column;
      align-items: flex-start;
      padding: 96px 22px 26px;
      background-position: 22px 26px;
    }
  }

  /* Produkttests & Neuheiten: Teaser bündig, kompakte Titel */
  body.home .mod_newslist h3 {
    line-height: 1.3;
  }

  body.home .mod_newslist .teaser {
    margin: 0;
    padding: 0;
  }

  /* SSW-Pills ohne JS-Kürzung: nur die Zahl zeigen
     (Rest des Titels wird per word-spacing aus der Pill geschoben) */
  #main .mod_customnav.schwangerschaftsDots li:not(.newsletter):not(.entwicklungsPill) a:link,
  #main .mod_customnav.schwangerschaftsDots li:not(.newsletter):not(.entwicklungsPill) a:visited,
  #main .mod_customnav.schwangerschaftsDots li:not(.newsletter):not(.entwicklungsPill) span.active {
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    padding: 0 0 0 12px;
    text-align: left;
    word-spacing: 60px;
  }

  /* ============================================
     23. Bento-Raster  (.sw-bento)
     Backend: CSS-Klasse „sw-bento" am Nachrichten-Modul
     (.mod_newslist) oder am Artikel mit Karten (.hubmodules).
     1. Eintrag groß links über zwei Zeilen, 2. + 3. rechts
     gestapelt; weitere Einträge laufen als Kacheln darunter.
     Bild füllt die Kachel, Titel liegt auf einem Verlauf,
     die ganze Kachel ist klickbar.
     Variante: zusätzlich „sw-bento--right" = großes Bild rechts.
     ============================================ */

  #main .sw-bento {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    grid-auto-rows: minmax(210px, auto);
    gap: 16px;
    width: 100%;
    max-width: var(--w-content);
    margin-inline: auto;
    padding: var(--space-m) var(--pad-x);
    background: transparent;
  }

  /* Überschrift + „Zur Kategorie" über volle Breite */
  #main .sw-bento > h2,
  #main .sw-bento > h3,
  #main .sw-bento > h4,
  #main .sw-bento > .subhubhead {
    grid-column: 1 / -1;
    grid-row: 1;
    align-self: center;
    width: auto;
    margin: 0 0 4px;
    padding: 0;
    border: none;
    background: none;
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-style: italic;
    font-weight: 400;
    line-height: 1.3;
    color: var(--c-deep);
    text-align: left;
  }

  #main .sw-bento > :is(h2, h3, h4, .subhubhead)::before,
  #main .sw-bento > :is(h2, h3, h4, .subhubhead)::after {
    content: none;
  }

  #main .sw-bento > .content-hyperlink {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: end;
    align-self: center;
    margin: 0 0 4px;
  }

  /* Kachel */
  #main .sw-bento > .layout_latest,
  #main .sw-bento > .content-text {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 210px;
    height: auto;
    margin: 0;
    padding: 22px 24px;
    overflow: hidden;
    background: var(--c-deep);
    border: none;
    border-radius: var(--radius-l);
    box-shadow: none;
    isolation: isolate;
  }

  #main .sw-bento > :is(.layout_latest, .content-text):nth-child(1 of :is(.layout_latest, .content-text)) {
    grid-column: 1;
    grid-row: span 2;
    min-height: 440px;
    padding: 32px;
  }

  #main .sw-bento.sw-bento--right > :is(.layout_latest, .content-text):nth-child(1 of :is(.layout_latest, .content-text)) {
    grid-column: 2;
  }

  /* Bild füllt die Kachel */
  #main .sw-bento figure,
  #main .sw-bento .image_container {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: auto;
    height: auto;
    margin: 0;
    float: none;
    aspect-ratio: auto;
    border-radius: 0;
  }

  #main .sw-bento figure a,
  #main .sw-bento .image_container a {
    display: block;
    height: 100%;
  }

  #main .sw-bento figure img,
  #main .sw-bento .image_container img {
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    object-fit: cover;
    border-radius: 0;
    transition: transform 0.5s ease;
  }

  #main .sw-bento > :is(.layout_latest, .content-text):hover img {
    transform: scale(1.04);
  }

  /* Verlauf für lesbare Titel */
  #main .sw-bento > :is(.layout_latest, .content-text)::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top, rgba(58, 44, 31, 0.82) 0%, rgba(58, 44, 31, 0.35) 45%, rgba(58, 44, 31, 0) 70%);
    pointer-events: none;
  }

  /* Texte: weiß, klicken geht durch auf den Bild-Link */
  #main .sw-bento .rte,
  #main .sw-bento .teaser,
  #main .sw-bento :is(h2, h3) {
    position: relative;
    margin: 0;
    padding: 0;
    pointer-events: none;
  }

  #main .sw-bento > .layout_latest > :is(h2, h3),
  #main .sw-bento > .content-text :is(h3, h4) {
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-style: normal;
    font-weight: 400;
    line-height: 1.25;
    color: #fff;
    border: none;
  }

  #main .sw-bento > .layout_latest > :is(h2, h3) a {
    font: inherit;
    color: inherit;
    box-shadow: none;
    pointer-events: auto;
  }

  /* ganze Kachel klickbar über den Titel-Link (Nachrichten) */
  #main .sw-bento > .layout_latest > :is(h2, h3) a::before {
    content: "";
    position: absolute;
    inset: -400px -40px -200px;
  }

  #main .sw-bento > :is(.layout_latest, .content-text):nth-child(1 of :is(.layout_latest, .content-text)) :is(h2, h3) {
    font-size: var(--fs-prose-h2);
    max-width: 22ch;
  }

  #main .sw-bento p,
  #main .sw-bento .teaser p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin: 6px 0 0;
    font-size: var(--fs-meta);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
  }

  #main .sw-bento > :is(.layout_latest, .content-text):not(:nth-child(1 of :is(.layout_latest, .content-text))) p {
    -webkit-line-clamp: 1;
  }

  #main .sw-bento > .content-text h4 {
    margin: 0 0 6px;
    font-family: var(--font-body);
    font-weight: 600;
    line-height: 1.3;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-coral-pale);
  }

  #main .sw-bento .more,
  #main .sw-bento .info {
    display: none;
  }

  @media (max-width: 760px) {
    #main .sw-bento {
      grid-template-columns: minmax(0, 1fr);
      grid-auto-rows: auto;
    }

    #main .sw-bento > :is(h2, h3, h4, .subhubhead) {
      grid-row: auto;
    }

    #main .sw-bento > .content-hyperlink {
      grid-row: auto;
      justify-self: start;
      margin-top: -8px;
    }

    #main .sw-bento > :is(.layout_latest, .content-text),
    #main .sw-bento.sw-bento--right > :is(.layout_latest, .content-text):nth-child(1 of :is(.layout_latest, .content-text)) {
      grid-column: 1;
      grid-row: auto;
      min-height: 200px;
    }

    #main .sw-bento > :is(.layout_latest, .content-text):nth-child(1 of :is(.layout_latest, .content-text)) {
      min-height: 320px;
      padding: 24px;
    }
  }

  /* ============================================
     24. Portalweite Reparaturen (Legacy-Muster)
     ============================================ */

  /* Mehrere Karten-Überschriften in EINEM .hubmodules
     (z. B. Gewinnspiele: „Aktionen" + „Beliebte Themen"):
     nur die erste sitzt in Zeile 1, weitere brechen um. */
  .hubmodules.red > .subhubhead ~ .subhubhead,
  .hubmodules.blue > .subhubhead ~ .subhubhead {
    grid-row: auto;
    margin-top: var(--space-m);
  }

  /* Nur „Zur Kategorie" direkt nach der Überschrift bleibt oben rechts */
  .hubmodules.red > .content-hyperlink:not(.subhubhead + .content-hyperlink),
  .hubmodules.blue > .content-hyperlink:not(.subhubhead + .content-hyperlink) {
    grid-column: 1 / -1;
    grid-row: auto;
    justify-self: start;
  }

  /* „Aktion vorbei" als Badge statt grauem Balken */
  .aktionVorbei {
    display: inline-block;
    width: auto;
    margin: 8px 0 0;
    padding: 3px 10px;
    background: var(--c-cream-mid);
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--c-text-muted);
  }

  /* .hubbar = CTA-Kasten auf Hubs (Periodenkalender, Wochenbett …) */
  .hubbar:not(.categories) {
    box-sizing: border-box;
    width: calc(100% - 2 * var(--pad-x));
    max-width: var(--w-inner);
    margin: var(--space-m) auto;
    padding: var(--space-m) 36px;
    background: var(--c-blush);
    border: none;
    border-radius: var(--radius-l);
    text-align: center;
  }

  .hubbar.white:not(.categories) {
    background: var(--c-white);
    box-shadow: inset 0 0 0 1px var(--c-cream-dark);
  }

  .hubbar:not(.categories) :is(h2, h3) {
    margin: 0 0 10px;
    padding: 0;
    border: none;
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-style: normal;
    font-weight: 400;
    color: var(--c-deep);
    text-align: center;
  }

  .hubbar:not(.categories) p {
    max-width: 560px;
    margin: 0 auto 16px;
    font-size: var(--fs-body);
    line-height: 1.6;
    color: var(--c-text-soft);
  }

  .hubbar:not(.categories) p:last-child {
    margin-bottom: 0;
  }

  .hubbar:not(.categories) .rte a,
  .hubbar:not(.categories) .rte a:link {
    display: inline-block;
    padding: 13px 26px;
    background: var(--c-cta);
    border: none;
    border-radius: var(--radius-pill);
    box-shadow: none;
    font-size: var(--fs-teaser);
    font-weight: 600;
    color: #fff;
  }

  .hubbar:not(.categories) .rte a:hover {
    background: var(--c-cta-dark);
    color: #fff;
  }

  /* Nachrichten-Listen ohne eigene Klasse (Kategorie-, News-,
     Aktionen-Seiten): Kartenraster wie auf den Hubs.
     Startseite, sw-cards, sw-teaser-row, sw-bento, randomNews
     haben eigene Regeln und sind ausgenommen. */
  #main .mod_article > .mod_newslist:not(.randomNews):not(.sw-cards):not(.sw-teaser-row):not(.sw-bento):not(.sw-scroller) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px 20px;
    align-items: start;
    width: calc(100% - 2 * var(--pad-x));
    max-width: var(--w-inner);
    margin: 0 auto var(--space-l);
    padding: 0;
    background: none;
  }

  body.home #main .mod_article > .mod_newslist {
    width: 100%;
    max-width: var(--w-content);
  }

  #main .mod_article > .mod_newslist:not(.randomNews):not(.sw-cards):not(.sw-teaser-row):not(.sw-bento):not(.sw-scroller) > :is(h2, h3, h4, .pagination, .empty, p) {
    grid-column: 1 / -1;
  }

  #main .mod_article > .mod_newslist:not(.randomNews):not(.sw-cards):not(.sw-teaser-row):not(.sw-bento):not(.sw-scroller) .layout_latest {
    display: flow-root;
    width: auto;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    text-align: left;
  }

  #main .mod_article > .mod_newslist:not(.randomNews):not(.sw-cards):not(.sw-teaser-row):not(.sw-bento):not(.sw-scroller) .image_container {
    float: none;
    width: 100%;
    aspect-ratio: 16 / 10;
    margin: 0 0 12px;
    overflow: hidden;
    border-radius: var(--radius-m);
    background: var(--c-cream);
  }

  #main .mod_article > .mod_newslist:not(.randomNews):not(.sw-cards):not(.sw-teaser-row):not(.sw-bento):not(.sw-scroller) .image_container img {
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    object-fit: cover;
    border-radius: 0;
    transition: transform 0.5s ease;
  }

  /* Aktionen: Logos/Badges nicht beschneiden */
  #main .mod_newslist .layout_latest.aktionen-rabatte .image_container {
    aspect-ratio: auto;
    padding: 14px;
    background: var(--c-white);
    box-shadow: inset 0 0 0 1px var(--c-cream-dark);
  }

  #main .mod_newslist .layout_latest.aktionen-rabatte .image_container img {
    height: auto;
    object-fit: contain;
  }

  #main .mod_article > .mod_newslist .layout_latest:hover .image_container img {
    transform: scale(1.04);
  }

  #main .mod_article > .mod_newslist:not(.randomNews):not(.sw-cards):not(.sw-teaser-row):not(.sw-bento):not(.sw-scroller) .layout_latest :is(h2, h3) {
    width: auto;
    margin: 0 0 6px;
    padding: 0;
    border: none;
    background: none;
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-style: normal;
    font-weight: 400;
    line-height: 1.3;
    text-align: left;
  }

  #main .mod_article > .mod_newslist .layout_latest :is(h2, h3) a {
    font: inherit;
    color: var(--c-deep);
    box-shadow: none;
  }

  #main .mod_article > .mod_newslist .layout_latest :is(h2, h3) a:hover {
    color: var(--c-cta);
  }

  #main .mod_article > .mod_newslist:not(.randomNews):not(.sw-cards):not(.sw-teaser-row):not(.sw-bento):not(.sw-scroller) .teaser,
  #main .mod_article > .mod_newslist:not(.randomNews):not(.sw-cards):not(.sw-teaser-row):not(.sw-bento):not(.sw-scroller) .teaser p {
    margin: 0;
    padding: 0;
    font-size: var(--fs-teaser);
    line-height: 1.6;
    color: var(--c-text-soft);
    text-align: left;
  }

  #main .mod_article > .mod_newslist:not(.randomNews):not(.sw-cards):not(.sw-teaser-row):not(.sw-bento):not(.sw-scroller) .teaser p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }

  #main .mod_article > .mod_newslist:not(.randomNews):not(.sw-cards):not(.sw-teaser-row):not(.sw-bento):not(.sw-scroller) .more {
    margin: 10px 0 0;
    padding: 0;
    text-align: left;
  }

  @media (max-width: 900px) {
    #main .mod_article > .mod_newslist:not(.randomNews):not(.sw-cards):not(.sw-teaser-row):not(.sw-bento):not(.sw-scroller) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 560px) {
    #main .mod_article > .mod_newslist:not(.randomNews):not(.sw-cards):not(.sw-teaser-row):not(.sw-bento):not(.sw-scroller) {
      grid-template-columns: minmax(0, 1fr);
      gap: 24px;
    }
  }

  /* Anzeigen im Text (.pageAdvertorial, .sswAdvertorial, #advertorialFull):
     gestaltete Karte mit „Anzeige"-Label — kuratiert statt geduldet */
  #main :is(.pageAdvertorial, #advertorialFull) {
    position: relative;
    box-sizing: border-box;
    min-height: 0;
    margin: var(--space-l) auto;
    padding: 36px 32px 28px;
    background: var(--c-white);
    border: none;
    border-radius: var(--radius-l);
    box-shadow: inset 0 0 0 1px var(--c-cream-dark);
    overflow: hidden;
  }

  #main :is(.pageAdvertorial, #advertorialFull)::before {
    content: "Anzeige";
    position: absolute;
    top: 12px;
    left: 32px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-text-muted);
  }

  #main :is(.pageAdvertorial, #advertorialFull) figure {
    margin-bottom: 14px;
  }

  #main :is(.pageAdvertorial, #advertorialFull) img {
    border-radius: var(--radius-m);
  }

  #main :is(.pageAdvertorial, #advertorialFull) :is(h2, h3) {
    margin-top: 0;
  }

  /* „Weiterführende Artikel" überall gleich (nicht nur Artikelseiten) */
  #main .insideArticle {
    margin: var(--space-m) 0;
    padding: 24px 28px;
    background: var(--c-cream);
    border-radius: var(--radius-l);
  }

  #main .insideArticle p {
    margin: 0 0 12px;
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-style: italic;
    line-height: 1.3;
  }

  #main .insideArticle li {
    padding: 0;
    font-size: var(--fs-teaser);
  }

  #main .insideArticle li::before {
    content: none;
  }

  #main .insideArticle a {
    padding: 4px 0;
    font-size: var(--fs-teaser);
    line-height: 1.4;
    box-shadow: none;
  }

}

/* Redaktions-Klassen in der obersten Ebene „utilities":
   bewusst gesetzte Klassen schlagen Seitentyp-Regeln (pages). */
@layer utilities {

  /* ============================================
     25. Gestaltungs-Klassen für die Redaktion
     (Backend: Feld „CSS-Klasse" am Element / Modul / Artikel)
     Übersicht: design/KLASSEN.md
     ============================================ */

  /* sw-lead — erster Absatz als Einleitung (Element Text) */
  #main .sw-lead p:first-of-type {
    font-family: var(--font-display);
    font-size: var(--fs-prose-lead);
    line-height: 1.6;
    color: var(--c-deep);
  }

  /* sw-quote — Zitat / Merksatz groß (Element Text: Absatz,
     optional <em> oder letzte Zeile als Quelle) */
  #main .sw-quote {
    position: relative;
    margin: var(--space-l) auto;
    padding: var(--space-m) 0 var(--space-m) 56px;
    border: none;
    background: none;
  }

  #main .sw-quote::before {
    content: "\201C";
    position: absolute;
    top: 6px;
    left: 0;
    font-family: var(--font-display);
    font-size: 96px;
    line-height: 1;
    color: var(--c-coral);
  }

  #main .sw-quote p,
  #main .sw-quote blockquote {
    margin: 0;
    padding: 0;
    border: none;
    font-family: var(--font-display);
    font-size: var(--fs-prose-h2);
    font-style: italic;
    line-height: 1.4;
    color: var(--c-deep);
  }

  #main .sw-quote :is(cite, p + p, em:last-child) {
    display: block;
    margin-top: 12px;
    font-family: var(--font-hand);
    font-size: var(--fs-hand);
    font-style: normal;
    color: var(--c-warm-brown);
  }

  /* sw-stats — Kennzahlen-Leiste (Element Text mit Liste:
     <li><strong>30+</strong> Expert*innen</li>) */
  #main .sw-stats ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    margin: var(--space-m) 0;
    padding: 0;
    list-style: none;
  }

  #main .sw-stats li {
    min-width: 0;
    hyphens: auto;
    overflow-wrap: break-word;
    margin: 0;
    padding: 22px 20px;
    background: var(--c-white);
    border-radius: var(--radius-l);
    box-shadow: inset 0 0 0 1px var(--c-cream-dark);
    font-size: var(--fs-teaser);
    line-height: 1.4;
    color: var(--c-text-soft);
    text-align: center;
  }

  #main .sw-stats li::before {
    content: none;
  }

  #main .sw-stats li strong {
    display: block;
    margin-bottom: 4px;
    font-family: var(--font-display);
    font-size: clamp(30px, 24px + 1.4vw, 42px);
    font-weight: 400;
    line-height: 1.1;
    color: var(--c-cta);
  }

  /* sw-steps — nummerierte Schritte mit Verbindungslinie
     (Element Text mit nummerierter Liste) */
  #main .sw-steps ol {
    counter-reset: sw-step;
    margin: var(--space-m) 0;
    padding: 0;
    list-style: none;
  }

  #main .sw-steps ol > li {
    position: relative;
    margin: 0;
    padding: 0 0 24px 56px;
    counter-increment: sw-step;
  }

  #main .sw-steps ol > li::before {
    content: counter(sw-step);
    position: absolute;
    top: 0;
    left: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--c-coral-pale);
    color: var(--c-cta-dark);
    font-family: var(--font-display);
    font-size: 17px;
    line-height: 36px;
    text-align: center;
  }

  #main .sw-steps ol > li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 40px;
    bottom: 4px;
    left: 17px;
    width: 2px;
    background: var(--c-coral-pale);
  }

  #main .sw-steps ol > li strong:first-child {
    display: block;
    margin-bottom: 2px;
    color: var(--c-deep);
  }

  /* sw-chips — beliebige Linkliste als Pills (Text/Liste/Hyperlinks) */
  #main .sw-chips :is(ul, ol) {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    margin: var(--space-s) 0;
    padding: 0;
    list-style: none;
  }

  #main .sw-chips li {
    margin: 0;
    padding: 0;
  }

  #main .sw-chips li::before {
    content: none;
  }

  #main .sw-chips a,
  #main .sw-chips a:link {
    border: none;
    display: inline-block;
    padding: 9px 16px;
    background: var(--c-coral-pale);
    border-radius: var(--radius-pill);
    box-shadow: none;
    font-size: var(--fs-meta);
    font-weight: 600;
    color: var(--c-cta-dark);
  }

  #main .sw-chips a:hover {
    background: var(--c-cta);
    color: #fff;
  }

  /* sw-tiles — Linkliste als Kacheln mit Pfeil (2 Spalten) */
  #main .sw-tiles :is(ul, ol) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
    margin: var(--space-s) 0;
    padding: 0;
    list-style: none;
  }

  #main .sw-tiles li {
    margin: 0;
    padding: 0;
  }

  #main .sw-tiles li::before {
    content: none;
  }

  #main .sw-tiles a,
  #main .sw-tiles a:link {
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    height: 100%;
    box-sizing: border-box;
    padding: 16px 18px;
    background: var(--c-white);
    border-radius: var(--radius-m);
    box-shadow: inset 0 0 0 1px var(--c-cream-dark);
    font-size: var(--fs-teaser);
    font-weight: 600;
    line-height: 1.35;
    color: var(--c-deep);
  }

  #main .sw-tiles a::after {
    content: "→";
    flex: none;
    color: var(--c-cta);
    transition: transform 0.2s ease;
  }

  #main .sw-tiles a:hover {
    box-shadow: inset 0 0 0 1px var(--c-coral);
    color: var(--c-deep);
  }

  #main .sw-tiles a:hover::after {
    transform: translateX(3px);
  }

  /* sw-split / sw-split--reverse — Bild + Text nebeneinander
     (Element Text mit Bild) */
  #main .sw-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
    max-width: var(--w-content);
    margin: var(--space-l) auto;
  }

  #main .sw-split > figure {
    float: none;
    width: auto;
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius-l);
  }

  #main .sw-split > figure img {
    width: 100%;
    max-width: none;
    margin: 0;
    border-radius: 0;
  }

  #main .sw-split > :is(h2, h3) {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    margin: 0;
  }

  #main .sw-split > :is(h2, h3) ~ figure {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  #main .sw-split > :is(h2, h3) ~ .rte {
    grid-column: 2;
    align-self: start;
  }

  #main .sw-split.sw-split--reverse > figure {
    grid-column: 2;
  }

  #main .sw-split.sw-split--reverse > :is(h2, h3),
  #main .sw-split.sw-split--reverse > .rte {
    grid-column: 1;
  }

  /* sw-band — vollflächiges Farbband für Artikel/Elemente
     (+ sw-band--coral | --sage | --trust | --deep) */
  #main .sw-band {
    position: relative;
    margin-block: var(--space-l);
    padding-block: var(--space-l);
    isolation: isolate;
  }

  #main .sw-band::before {
    content: "";
    position: absolute;
    inset: 0 calc(50% - 50vw);
    z-index: -1;
    background: var(--c-cream);
  }

  #main .sw-band.sw-band--coral::before { background: var(--c-coral-muted); }
  #main .sw-band.sw-band--sage::before  { background: var(--c-sage); }
  #main .sw-band.sw-band--trust::before { background: var(--c-trust-soft); }
  #main .sw-band.sw-band--deep::before  { background: var(--c-deep); }

  #main .sw-band.sw-band--deep,
  #main .sw-band.sw-band--deep :is(h2, h3, p, li, a) {
    color: var(--c-white);
  }

  /* sw-callout — CTA-Kasten (Element Text: Überschrift, Satz,
     letzter Absatz mit Link wird Button) */
  #main .sw-callout {
    margin: var(--space-l) auto;
    padding: var(--space-m) 36px;
    background: var(--c-blush);
    border-radius: var(--radius-l);
    text-align: center;
  }

  #main .sw-callout :is(h2, h3) {
    margin: 0 0 10px;
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: 400;
    text-align: center;
  }

  #main .sw-callout p {
    max-width: 560px;
    margin: 0 auto 16px;
    color: var(--c-text-soft);
  }

  #main .sw-callout p:last-child {
    margin-bottom: 0;
  }

  #main .sw-callout p:last-child a,
  #main .sw-callout p:last-child a:link {
    display: inline-block;
    padding: 13px 26px;
    background: var(--c-cta);
    border-radius: var(--radius-pill);
    box-shadow: none;
    font-size: var(--fs-teaser);
    font-weight: 600;
    color: #fff;
  }

  #main .sw-callout p:last-child a:hover {
    background: var(--c-cta-dark);
  }

  /* sw-scroller — Kartenreihe (Nachrichten-Modul, .hubmodules)
     wird mobil horizontal wischbar statt endlos gestapelt */
  @media (max-width: 760px) {
    #main .sw-scroller {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: 78%;
      grid-template-columns: none;
      gap: 14px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      padding-bottom: 6px;
    }

    #main .sw-scroller::-webkit-scrollbar {
      display: none;
    }

    #main .sw-scroller > :is(h2, h3, h4, .subhubhead, .content-hyperlink) {
      position: sticky;
      left: 0;
      grid-row: 1;
      grid-column: 1;
    }

    #main .sw-scroller > :is(.layout_latest, .content-text) {
      grid-row: 2;
      scroll-snap-align: start;
      min-width: 0;
    }

    #main .sw-scroller .layout_latest .image_container,
    #main .sw-scroller .content-text figure {
      float: none;
      width: 100%;
      margin: 0 0 10px;
      aspect-ratio: 16 / 10;
    }

    #main .sw-scroller .content-text .rte,
    #main .sw-scroller .layout_latest :is(h2, h3, .teaser) {
      margin-left: 0;
    }
  }

  @media (max-width: 760px) {
    #main .sw-split {
      grid-template-columns: minmax(0, 1fr);
      gap: 18px;
    }

    #main .sw-split > *,
    #main .sw-split > :is(h2, h3),
    #main .sw-split > :is(h2, h3) ~ figure,
    #main .sw-split > :is(h2, h3) ~ .rte,
    #main .sw-split.sw-split--reverse > *,
    #main .sw-split.sw-split--reverse > figure {
      grid-column: 1;
      grid-row: auto;
    }

    #main .sw-quote {
      padding-left: 40px;
    }

    #main .sw-quote::before {
      font-size: 72px;
    }
  }

  /* Downloads in Karten-Rastern (Checklisten): weiße Kachel + PDF-Badge.
     !important nur für Hintergrund/Einzug (unlayered icons.min.css). */
  #main .hubmodules .content-download {
    margin: 0;
    padding: 0;
  }

  #main .hubmodules .content-download a {
    display: flex;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    height: 100%;
    padding: 14px 16px !important;
    background: var(--c-white) !important;
    border: none;
    border-radius: var(--radius-m);
    box-shadow: inset 0 0 0 1px var(--c-cream-dark);
    font-size: var(--fs-teaser);
    font-weight: 600;
    line-height: 1.35;
    color: var(--c-deep);
  }

  #main .hubmodules .content-download a::before {
    content: "PDF";
    flex: none;
    padding: 4px 7px;
    border-radius: 6px;
    background: var(--c-coral-pale);
    color: var(--c-cta-dark);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
  }

  #main .hubmodules .content-download a::after {
    content: "↓";
    margin-left: auto;
    color: var(--c-cta);
  }

  #main .hubmodules .content-download a:hover {
    box-shadow: inset 0 0 0 1px var(--c-coral);
  }

  /* ============================================
     26. Termine: Fachveranstaltung (B2B) & Zielgruppen-Filter
     Badge: Templates event_list/_full(_community); Filter: Modul „Termin-Filter“
     Trust-Blau = fachlich/seriös, klar abgesetzt von Eltern-Terminen (Coral)
     ============================================ */

  .sw-badge-fach,
  .sw-community-event__tags .is-fach {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
    margin: 0 0 8px;
    padding: 4px 10px;
    background: var(--c-trust-soft);
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--c-trust);
  }

  .sw-badge-fach::before,
  .sw-community-event__tags .is-fach::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
  }

  .sw-community-event__tags .is-fach {
    margin: 0;
  }

  /* Fachtermine in gemischten Listen: dezente blaue Kante */
  .event.layout_list.is-fach > a,
  .sw-community-event.is-fach .sw-community-event__link {
    box-shadow: inset 3px 0 0 var(--c-trust);
  }

  .sw-event-filter {
    margin: 0 auto var(--space-m);
  }

  .sw-event-filter ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .sw-event-filter li {
    margin: 0;
    padding: 0;
  }

  .sw-event-filter li::before {
    content: none;
  }

  .sw-event-filter__chip,
  .sw-event-filter__chip:link,
  .sw-event-filter__chip:visited {
    display: inline-block;
    padding: 9px 16px;
    background: var(--c-white);
    border: none;
    border-radius: var(--radius-pill);
    box-shadow: inset 0 0 0 1px var(--c-cream-dark);
    font-family: var(--font-body);
    font-size: var(--fs-meta);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--c-deep);
  }

  .sw-event-filter__chip:hover {
    box-shadow: inset 0 0 0 1px var(--c-coral);
    color: var(--c-deep);
  }

  .sw-event-filter__chip.is-active {
    background: var(--c-cta);
    box-shadow: none;
    color: #fff;
  }

  .sw-event-filter__chip.is-fach.is-active {
    background: var(--c-trust);
  }

}

/* Cookie-Hinweis (Oveleon). Unlayered: das Bundle-CSS ist unlayered
   und lädt vor dem Theme — Layer-Regeln können es nicht überschreiben.
   Der blasse Legacy-Hintergrund auf .success ist entfernt. */
.contao-cookiebar {
  padding: 8px;
  font-family: var(--font-body);
  --ccb-bg: var(--c-white);
  --ccb-clr: var(--c-deep);
  --ccb-text: var(--c-text-soft);
  --ccb-bdr: var(--c-cream-dark);
  --ccb-max-width: 400px;
  --ccb-box-shadow: var(--shadow-card);
}

.contao-cookiebar .cc-inner {
  padding: 12px 14px 10px;
  border-radius: var(--radius-l);
  font-size: var(--fs-teaser);
}

.contao-cookiebar .cc-head p {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  color: var(--c-deep);
}

.contao-cookiebar .cc-group {
  margin-bottom: 8px;
}

.contao-cookiebar .cc-group > label {
  margin: 2px 0 2px 8px;
}

.contao-cookiebar .cc-footer {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contao-cookiebar .cc-btn {
  width: 100%;
  margin: 0;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  font-weight: 500;
  line-height: 1.2;
  background: transparent;
  border: 1px solid var(--c-cream-dark);
  color: var(--c-text-soft);
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}

.contao-cookiebar .cc-btn.save:hover,
.contao-cookiebar .cc-btn.save:focus-visible {
  background: var(--c-cream);
  color: var(--c-deep);
}

.contao-cookiebar .cc-btn.success {
  order: -1;
  padding: 12px 20px;
  background: var(--c-cta);
  border-color: var(--c-cta);
  color: #fff;
  font-size: var(--fs-teaser);
  font-weight: 600;
}

.contao-cookiebar .cc-btn.success:hover,
.contao-cookiebar .cc-btn.success:focus-visible {
  background: var(--c-cta-dark);
  border-color: var(--c-cta-dark);
  color: #fff;
}

.contao-cookiebar .cc-btn:focus-visible {
  outline: 2px solid var(--c-trust);
  outline-offset: 2px;
}

.contao-cookiebar .cc-info {
  margin-top: 8px;
}

.contao-cookiebar .cc-info p {
  margin: 0;
  font-size: var(--fs-meta);
  line-height: 1.35;
  color: var(--c-text-muted);
}

@media (min-width: 640px) {
  .contao-cookiebar {
    padding: 12px;
  }

  .contao-cookiebar .cc-inner {
    padding: 16px 18px 14px;
  }

  .contao-cookiebar .cc-footer {
    flex-direction: row;
    align-items: center;
  }

  .contao-cookiebar .cc-btn.save {
    flex: 0 1 auto;
    width: auto;
  }

  .contao-cookiebar .cc-btn.success {
    order: 0;
    flex: 1 1 auto;
    width: auto;
  }
}

/* ============================================================
   schwanger.at — legacy.css
   Layer: legacy (niedrigste Priorität nach tokens)
   = alte layout.css, automatisch auf Tokens gemappt.
   Ziel: Regel für Regel löschen, bis Datei leer ist.
   Mapping: #FF8078→--c-cta, #344254→--c-deep,
   source-sans-3→--font-body, Tisa/Varela→--font-display
   ============================================================ */

@layer legacy {
/* <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Karla:400,700"> */
@view-transition {navigation: auto;}

.block {overflow: visible;}

.peithnerartikel img, .rimaartikel img {width: 300px; float: right; display: block; margin: 0 0 30px 30px !important;}

* {box-sizing: border-box; -webkit-box-sizing: border-box;}
iframe {border: none;}

.blocker {position:absolute; height:100%; width:100%; z-index:1; background: transparent;}

#artikel .layout_full .content-text p {line-height: 2rem; font-family: var(--font-body); padding-top: 8px; margin-top: 0;}

.teaser .advertorial {right: 15px; position: absolute; bottom: 0;}
.advertorial {display: block; border-radius: 3px; background: #efefef; color: #555; font-size: 0.9rem; padding: 3px 6px; text-align: center; max-width: 90px;}

.advert-top {margin: 0px auto -75px; text-align: center; background: var(--c-cream); padding-top: 130px; line-height: 0rem;}
	.advert-top img {width: 65%;}
	.hub .advert-top {margin: 0px auto 40px; padding-top: 40px;}	
	
.advert-bottom {margin: -30px auto 50px; text-align: center;}	

.home .flex .mod_rssReader {width: 100%; padding: 0 !important;}

/* Temporary Integrations */
.mamheadmodule {position: absolute; right: 0; top: -15px;}
.bebejouDesktop {margin-top: 15px;}

#Superbanner {position: relative; top: 125px; text-align: center;}
	.superbanner {width: 100%; display: block; margin: 0 auto; text-align: center;}

#sidebar {position: fixed; top: 190px; z-index: 10000; right: 5px;}

.pageselector {position: fixed; top: 12px; right: 8%; z-index: 10000; background: #efefef; border-radius: 10px; width: 150px;}
	.pageselector select {border: none; color: #AAA; width: 150px; font-size: 0.8rem; padding: 8px 10px 10px 10px; height: 38px; text-align: center; text-indent: 4px; border-radius: 0 0 4px 4px; text-transform: uppercase;}

/* Produktprobenlink */

.produktprobenLink {margin: 0; background: var(--c-cream); padding: 160px 0 100px 0; background: #fff url(/files/design/_icons/produktproben.svg) 50% 80px / 100px no-repeat;}
	.produktprobentext {max-width: 350px; text-align: center; color: var(--c-text-muted); margin: 110px auto 0;}
	.sitelinkProduktproben:link, .sitelinkProduktproben:visited { margin: 10px 0 25px 0; width: 100%;display: block;text-align: center;border-bottom: 1px solid #ffe4e4;box-shadow: inset 0 -1px 0 #ffe4e4;text-align: center;max-width: fit-content;margin: 0 auto; transition: all 0.3s ease;}
	.sitelinkProduktproben:hover {color: var(--c-deep); cursor: pointer; border-bottom: 1px solid var(--c-deep); box-shadow: inset 0 -1px 0 var(--c-deep);}

.advertarea {padding: 0 7px; display: none;}
	.advertarea div {}
	.advertarea a:link, .advertarea a:visited {cursor: pointer; border-radius: 3px; padding: 0;  height: 120px; display: inline-block; margin-top: 10px; line-height: 33px; padding: 1% 2.4%; width: 47.5%;}
	.advertarea a:hover {box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); vertical-align: top;}
	#advertboxone {margin-right: 4%; background: #fff  left top no-repeat; background-size: 100%; vertical-align: top;}
	#advertboxtwo {background: #fff left top no-repeat; background-size: 100%; vertical-align: top;}
	.advertarea p {font-family: var(--font-body); font-size: 1.7em; line-height: 1.1em; color: #444;}
	#advertboxone p {width: 40%; text-align: left; margin: 51px 0 0 -2px; }
	#advertboxtwo p {width: 55%; text-align: right; float: right; margin-right: 5%; margin-top: 7px; line-height: 1.2em;}

body {background: #fff; font-family: var(--font-body);}

a:link, a:visited {text-decoration: none; color: var(--c-cta);}
a:hover {color: var(--c-deep);}

.inside {margin: 0; padding: 0; position: relative;}

#wrapper {width: 100%; margin: 0 auto; padding: 0; background: var(--c-deep);}
#header {text-align: center; background: rgba(255, 255, 255, 0.6); height: 125px; /* border-top: 2px solid var(--c-cta); */ position: fixed; z-index: 101; width: 100%; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); backdrop-filter: blur(30px);}
#container {padding: 0; text-align: left; margin: 0 auto; padding-top: 120px;	background: #FFF;}
#footer {padding-bottom: 70px; margin-top: 0; padding-top: 70px; background: #ddd; font-size: 0.8em; position: relative; top: 0px; background: var(--c-deep);}
#footer .inside {margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap;}
#footer .inside nav {flex-basis: 20%;}
#footer .inside .copyright {flex-basis: 100%;}

#right {margin-left: 15px;}

.logo {background: transparent url(/files/design/schwangerAT-logo.svg) center center no-repeat;width: 205px;position: relative;display: block;z-index: 5;background-size: 100%;margin: 0 auto;height: 80px;top: 1px;}

.fokuskindlogo {padding: 25px 20px 20px; border-radius: 3px; margin-bottom: 20px; margin: 10px auto 25px auto;}
	.fokuskindlogo img {min-width: 30%; max-width: 35%;}

.mamList li {display: inline-block;}

figure {line-height: 0;}

/* .homeLink {color: #DDD; width: 340px; height: 70px; display: block; position: relative; left: 290px;} */

p, div {font-size: 1.1rem; color: var(--c-deep); line-height: 20px; vertical-align: top; line-height: 1.7rem;}
p strong, div strong {font-weight: 700;} 
.clear {clear:both; border: none; height: 0; padding: 0; margin: 0; width: 100%;}

h1, h2 {font-family: var(--font-display); margin: 0; font-weight: normal;}

h1 {padding: 0 0 15px 0; font-size: 1.9rem; line-height: 1.1em; 	font-family: var(--font-display);
	font-style: italic;
	font-weight: 500;}
h2 {margin: 25px 0 10px 0;}
h4, h5 {font-weight: normal;}

h1 sup, h2 sup, h3 sup, h4 sup {display: inline-block;
	position: relative;
	font-size: 1.8rem;
	top: 0px;
	left: 5px;
	margin-top: -10px;
	margin-right: 12px;}

input {font-size: 1em;}

.button {font-size: 1em; color: var(--c-cta); padding: 6px 12px;}
	.button span.small {font-size: 0.9rem;}
	.button:link, .button:visited, .content-text .button:link, .content-text .button:visited {display: block;padding: 10px;background: var(--c-cta);color: #FFF;padding: 10px 20px;border-radius: 50px;margin: 20px auto 0px;display: inline-block;transition: all 0.3s ease;background: var(--c-cta);
		color: #FFF;
		padding: 10px 20px;
		border-radius: 100px;
		margin: 20px 0;
		display: table-cell;
		border: 1px solid var(--c-cta);
		font-family: var(--font-display);
		font-style: italic;
		font-weight: 400;
		font-size: 1.1rem;
		letter-spacing: 0.5px;
	}		
		
	.button:hover, .content-text .button:hover {color: var(--c-cta); background: #FFF;}
	.button.big {font-size: 1.2em;}
		
	.button.big.blue {background: var(--c-cta); color: #FFF;}
	
	.button.block {display: block; margin: 20px auto; text-align: center; max-width: 300px;}	
	.button.center {margin: 10px auto; text-align: center; display: unset !important;}

.center {text-align: center;}
.text-left {text-align: left;}
.text-right {text-align: right;}

.float-right {text-align: right;}

.flex {display: flex; justify-content: space-between; flex-wrap: wrap;}
.flex .fifty {width: 45%;}

.mod_article .content-text.center h2 {text-align: center; width: 100%;}

.float-right.content-youtube {
	padding-left: 30px;
	float: right;
	margin-bottom: 30px;
}

/* - - - */

.mod_article.first-child {padding: 50px 0 0 0;}

.mod_article h1 {text-align: center;
	font-weight: 700;
	font-size: 2.2rem;
	line-height: 2.8rem;
	color: var(--c-deep);
	margin: 5px 25px 0;
	padding-top: 50px;
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 500;
	font-size: 2.5rem;
}
.mod_article h2 {font-weight: normal; font-family: var(--font-display); font-size: 1.7em; /* line-height: 30px; */}
.mod_article h3 {	font-size: 1.4rem;
	line-height: 1.9rem;
	margin: 35px 0 15px 0;
	border-bottom: 3px solid #fee0cf;
	padding: 0 50px 8px 8px;
	/* display: inline-grid;*/
	color: var(--c-deep);
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 500;
	letter-spacing: 0.5px;
	width: fit-content;
border-bottom: 3px solid rgb(52 66 84 / 20%);}
.mod_article h4 {	font-size: 1.2em;
	line-height: 25px;
	margin: 15px 0 0px 0;
	padding: 0 50px 8px 18px;
	display: inline-grid;
	color: var(--c-deep);
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 500;
	letter-spacing: 0.5px;
	border-bottom: 3px solid rgb(52 66 84 / 15%);
	border-left: 3px solid rgb(52 66 84 / 15%);}
.mod_article .content-text:nth-child(1) {background: var(--c-cream); text-align: center; padding-bottom: 35px;}

.mod_article#artikel h3 {border-bottom: 3px solid rgba(77, 91, 109, 0.1);}

.mod_article#artikel ul {margin: 30px 150px 30px 0px;}
.mod_article#artikel ul li {}

.mod_article .content-text h2, .mod_article h2.content-headline, .content-gallery h2, .content-youtube h2, .content-accordion h2 {margin-top: 0; font-weight: 700; width: 60%; font-size: 1.8rem; line-height: 2.5rem; color: var(--c-deep); padding-bottom: 20px; margin-bottom: 20px;
	font-family: var(--font-display);
	font-style: italic; 	font-weight: 500;
}

.content-text ul {margin: 30px 0;}
.content-text ul li {list-style-position: outside; list-style-type: none; margin-bottom: 8px; padding: 9px 5px 9px 15px; border-left: 15px solid var(--c-text-muted); margin-right: 15px; background: -webkit-linear-gradient(left, rgba(235,240,245,1) 0%,rgba(235,240,245,0) 100%); margin-left: 0; border-radius: 10px; line-height: 1.4rem;}
.content-text ol li {margin-bottom: 12px; color: var(--c-deep);}

.content-text ol {counter-reset: my-awesome-counter; list-style: none; padding-left: 40px; margin: 30px 0 0px 50px; padding: 9px 5px 9px 15px;}
.content-text ol li {margin: 0 0 8px 0; counter-increment: my-awesome-counter; position: relative; line-height: 1.7rem;}
.content-text ol li::before {content: counter(my-awesome-counter); color: var(--c-deep); font-size: 1rem; font-weight: normal; position: absolute; left: calc(-1 * 23px - 10px); line-height: 23px; width: 23px; height: 23px; top: 2px; transform: rotate(0deg); border-radius: 50%; text-align: center; background: var(--c-deep); color: #FFF;
}

.content-text ul.checklist {margin: 30px 0;}
.content-text ul.checklist li {background: none; border-left: none; margin: 0;	padding: 0px 5px 0px 15px;}
.content-text ul.checklist li:before {	content: ""; color: var(--c-deep); font-size: 1rem; font-weight: normal; position: relative; left: calc(-1 * 23px - 17px); line-height: 23px; width: 21px; height: 21px; top: 23px; border-radius: 10px; text-align: center; background: #fff; display: block; border: 2px solid var(--c-deep);}

.content-headline.first-child {margin: 25px 0 -10px 0;}

#schwangerschaftswoche ul li {list-style: circle; margin-left: 5%; margin-right: 5%; font-size: 0.9rem; list-style-position: outside; background: #FFEFDA; margin-bottom: 4px; border-radius: 3px; padding-left: 5px; padding-right: 5px;}
#schwangerschaftswoche ul li strong {display: block;}

/* .insideArticle — nach components.css */

/* Babyforum Bubble */

nav {}
	nav li {display: inline-block; list-style: none;}
	nav a {white-space: nowrap; font-family: var(--font-body); letter-spacing: 2px;}

/* Header */

nav.maintop {opacity: 1; text-align: center; z-index: 102; position: relative; height: 50px; top: -5px; /* border-bottom: 1px solid #fe9a8b; background: #fff; */}
nav.maintop ul {text-align: left; padding: 0; margin: 0 auto; display: flex;}
nav.maintop li {list-style: none; flex-grow: 1;}
nav.maintop li.active {flex-grow: 0;}
nav.maintop li a:link, nav.maintop li a:visited {letter-spacing: -0.03em; display: inline-block; background: transparent; font-family: var(--font-body); font-size: 1rem; line-height: 1.4rem; width: auto; text-align: center; min-height: 40px; padding: 15px 0 13px; color: var(--c-deep); width: 100%; transition: all 0.3s ease;}
nav.maintop li a:hover {background: var(--c-deep); -webkit-transition: background .1s linear; transition: background .1s linear; color: #FFF; border-radius: 10px 10px 0 0; transition: all 0.3s ease;}

nav.maintop li strong.active {letter-spacing: -0.03em; font-family: var(--font-body); display: inline-block; font-size: 1rem; line-height: 1.4rem; color: var(--c-deep); text-align: center; background: rgba(255, 228, 228, 0.5); min-height: 40px; padding: 15px 18px 13px 18px; text-transform: none; font-weight: 400; border-radius: 10px 10px 0 0;}
nav.maintop li a.trail {letter-spacing: 0.03em; font-family: var(--font-body); display: inline-block; font-size: 1rem; line-height: 1.4rem; color: var(--c-deep); text-align: center; background: rgb(255 128 120 / 20%); min-height: 40px; border-radius: 10px 10px 0 0;}

nav.maintop .level_2 {	background: #FFF; position: absolute; margin-top: -1px; border-top: 7px solid var(--c-cta); border-radius: 0 10px 10px 10px;}
/* nav.maintop .level_2 li {display: block; height: 40px; border: 10px;} */

nav.maintop li:nth-child(1) .level_2 li,    
nav.maintop li:nth-child(3) .level_2 li,
nav.maintop li:nth-child(4) .level_2 li,
nav.maintop li:nth-child(6) .level_2 li {width: 49.4%; display: inline-block;}

nav.maintop li:nth-child(1) .level_2, nav.maintop li:nth-child(3) .level_2, nav.maintop li:nth-child(6) .level_2 {width: 460px !important;}

nav.maintop li:nth-child(8) .level_2 {position: absolute; right: 8%; width: 240px;}
nav.maintop li:nth-child(9) .level_2 {position: absolute; right: 0%; width: 240px; border-radius: 10px 0 10px 10px;}
nav.maintop li:nth-child(10) .level_2 {position: absolute; right: 0%;  width: 240px; border-radius: 10px 0 10px 10px;}

nav.maintop .level_2 li a:link, nav.maintop .level_2 li a:visited {text-align: left; padding: 10px 20px; width: 220px; font-size: 0.95rem;border-bottom: 1px solid var(--c-cream);}
nav.maintop .level_2 li a:before, nav.maintop li .level_2 strong.active:before {background: #fddee4; border-radius: 10px; display: inline-block; width: 22px; height: 22px; transform: rotate(10deg) scale(0.7); text-align: center; font-weight: 700; color: var(--c-deep); margin-right: 8px;
margin-left: -7px; }
nav.maintop .level_2 li:last-child a:link, nav.maintop .level_2 li:last-child a:visited {border-bottom: 0;}

nav.maintop .level_2 li:nth-child(1) :before {content: "1"; background: #fff1d2;}
nav.maintop .level_2 li:nth-child(2) :before {content: "2"; background: #dbf7e5;}
nav.maintop .level_2 li:nth-child(3) :before {content: "3"; background: var(--c-cream);}
nav.maintop .level_2 li:nth-child(4) :before {content: "4"; background: #fff1d2;}
nav.maintop .level_2 li:nth-child(5) :before {content: "5";}
nav.maintop .level_2 li:nth-child(6) :before {content: "6"; background: #dbf7e5;}
nav.maintop .level_2 li:nth-child(7) :before {content: "7"; background: var(--c-cream);}
nav.maintop .level_2 li:nth-child(8) :before {content: "8"; background: #fff1d2;}
nav.maintop .level_2 li:nth-child(9) :before {content: "9";}
nav.maintop .level_2 li:nth-child(10) :before {content: "10"; background: #dbf7e5;}
nav.maintop .level_2 li:nth-child(11) :before {content: "11"; background: var(--c-cream);}
nav.maintop .level_2 li:nth-child(12) :before {content: "12"; background: #fff1d2;}
nav.maintop .level_2 li:nth-child(13) :before {content: "13";}
nav.maintop .level_2 li:nth-child(14) :before {content: "14"; background: #dbf7e5;}
nav.maintop .level_2 li:nth-child(15) :before {content: "15"; background: var(--c-cream);}
nav.maintop .level_2 li:nth-child(16) :before {content: "16"; background: #fff1d2;}
nav.maintop .level_2 li:nth-child(17) :before {content: "17"; background: #fff1d2;}
nav.maintop .level_2 li:nth-child(18) :before {content: "18"; background: #fff1d2;}

nav.maintop .level_2 li.navblock a:before, nav.maintop .level_2 li.schwangerschaftswochen a:before, nav.maintop .level_2 li.wochenbettwochen a:before, nav.maintop .level_2 li.timeline a:before, nav.maintop .level_2 li.entwicklungsmonate a:before, nav.maintop li.produkte .level_2 li a:before, nav.maintop li.service .level_2 li a:before {display: none;}

nav.maintop .level_2 li a:hover {background-color: rgba(126, 150, 179, 0.2); color: var(--c-deep); -webkit-transition: background 0.2s ease-in; transition: background 0.2s ease-in; border-radius: 0;}
nav.maintop .level_2 li a:hover:before {background: #FFF; transform: rotate(10deg) scale(1.15); transition: transform 0.3s;}

nav.maintop .level_2 li.last a {border-bottom: none;}
nav.maintop .level_2 {display: none;}
nav.maintop li .level_2 strong.active { text-align: left;padding: 10px 20px;height: 40px;font-size: 0.95rem;border-bottom: 1px solid var(--c-cream);letter-spacing: -0.03em;width: 220px;
	border-radius: 0;}

	nav.maintop strong.active, nav.maintop .level_2 strong.forward {color: #333; font-family: var(--font-body); letter-spacing: 2px; text-transform: uppercase; }
	
	nav.maintop a::after {background: #ddd; position: relative; top: 9px;}
	nav.maintop a:hover::after {position: relative; top: 9px; font-size: 1.1em; font-family: var(--font-body); }
	nav.maintop strong.active::after {background: #ddd; position: relative; top: 10px;}	
		
	/* nav.maintop li.trail  { height: 100px; }	 */
	nav.maintop a.trail::after {position: relative; top: 9px; width: 100%; height: 0px; background: white; border-top: 2px solid #333; font-weight: 700;}	
	nav.maintop li.trail a:hover::after {position: relative; top: 9px;}

.submenu.sibling .level_2 {display: none;}
.submenu:hover .level_2 {display: flex;
		box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
		width: 440px;
		flex-wrap: wrap;
		justify-content: space-around;
		align-items: center;}

.active.submenu .level_2 {display: none;}
.active.submenu:hover .level_2 {display: block; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); width: 480px;}

.submenu.trail .level_2 {display: none;}
.submenu.trail:hover .level_2 {display: block; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); width: 480px;}

nav.maintop .level_2 li.navblock {width: 49%; display: inline-block; height: auto;}
	nav.maintop .level_2 li.navblock a:link, nav.maintop .level_2 li.navblock a:visited, nav.maintop .level_2 li.navblock strong {text-align: center; padding: 50px 0px 10px; display: inline-block;}
	nav.maintop .level_2 li.navblock strong {border-bottom: 1px solid var(--c-cream); padding: 50px 0 30px;}
	nav.maintop .level_2 li.navblock a:hover {background-color: rgba(126, 150, 179, 0.2);}

	nav.maintop .level_2 li.videobereich a {background: transparent url(/files/design/_icons/navVideo.svg) 50% 22% / 19% auto no-repeat;} 
	nav.maintop .level_2 li.buch a {background: transparent url(/files/design/_icons/navBuch.svg) 50% 22% / 19% auto no-repeat;}
	nav.maintop .level_2 li.yoga a {background: transparent url(/files/design/_icons/navYoga.svg) 50% 22% / 17% auto no-repeat;}
	nav.maintop .level_2 li.namen a {background: transparent url(/files/design/_icons/navName.svg) 50% 22% / 19% auto no-repeat;} 
	nav.maintop .level_2 li.abc a {background: transparent url(/files/design/_icons/navABC.svg) 50% 22% / 19% auto no-repeat;}
	nav.maintop .level_2 li.haeufigeFragen a {background: transparent url(/files/design/_icons/navHaeufigeFragen.svg) 50% 22% / 19% auto no-repeat;}
	nav.maintop .level_2 li.babyshower a {background: transparent url(/files/design/_icons/navBabyshower.svg) 50% 22% / 19% auto no-repeat;}
	
	nav.maintop .level_2 li.videobereich strong {background: rgba(255, 228, 228, 0.5) url(/files/design/_icons/navVideo.svg) 50% 22% / 19% auto no-repeat;} 
	nav.maintop .level_2 li.buch strong {background: rgba(255, 228, 228, 0.5) url(/files/design/_icons/navBuch.svg) 50% 22% / 19% auto no-repeat;} 
   nav.maintop .level_2 li.yoga strong {background: rgba(255, 228, 228, 0.5) url(/files/design/_icons/navYoga.svg) 50% 22% / 17% auto no-repeat;}
	nav.maintop .level_2 li.namen strong {background: rgba(255, 228, 228, 0.5) url(/files/design/_icons/navName.svg) 50% 22% / 19% auto no-repeat;} 
	nav.maintop .level_2 li.abc strong {background: rgba(255, 228, 228, 0.5) url(/files/design/_icons/navABC.svg) 50% 22% / 19% auto no-repeat;} 
	nav.maintop .level_2 li.haeufigeFragen strong {background: rgba(255, 228, 228, 0.5) url(/files/design/_icons/navHaeufigeFragen.svg) 50% 22% / 19% auto no-repeat;} 
	nav.maintop .level_2 li.babyshower strong {background: rgba(255, 228, 228, 0.5) url(/files/design/_icons/navBabyshower.svg) 50% 22% / 19% auto no-repeat;} 	
	
nav.maintop li:nth-child(4) .level_2 li:nth-child(15) {width: 100%;}	

nav.maintop .level_2 li a.wochenbettwochen,
nav.maintop .level_2 li a.entwicklungsmonate,
nav.maintop .level_2 li a.schwangerschaftswochen {background: #fff url(/files/design/_icons/leadTopic.svg) 15px 12px / 30px auto no-repeat; background-size: 17px; padding-left: 42px;}

nav.maintop .level_2 li a.timeline {background: #fff url(/files/design/_icons/timeline.svg) 15px 10px / 30px auto no-repeat; background-size: 17px; padding-left: 42px;}

/* Submenu - Dropdown Service*/

nav.maintop .level_2 li a.neuheiten {background: #fff url(/files/design/_icons/produkteNeu.svg) 10px 3px / 100px auto no-repeat; background-size: 35px; padding-left: 55px;}
nav.maintop .level_2 li a.kinderzimmer {background: #fff url(/files/design/_icons/produkteKinderzimmer.svg) 10px 3px / 100px auto no-repeat; background-size: 35px; padding-left: 55px;}
nav.maintop .level_2 li a.kinderwagen {background: #fff url(/files/design/_icons/produkteKinderwagen.svg) 10px 3px / 100px auto no-repeat; background-size: 35px; padding-left: 55px;}
nav.maintop .level_2 li a.kindersitz {background: #fff url(/files/design/_icons/produkteKindersitz.svg) 10px 3px / 75px auto no-repeat; background-size: 29px; padding-left: 55px;}
nav.maintop .level_2 li a.verzeichnis {background: #fff url(/files/design/_icons/serviceVerzeichnis.svg) 10px 3px / 100px auto no-repeat; background-size: 35px; padding-left: 55px;}
nav.maintop .level_2 li a.produkttests {background: #fff url(/files/design/_icons/serviceProdukttest.svg) 10px 3px / 100px auto no-repeat; background-size: 35px; padding-left: 55px;}
nav.maintop .level_2 li a.aktionen {background: #fff url(/files/design/_icons/serviceAktionen.svg) 10px 3px / 100px auto no-repeat; background-size: 35px; padding-left: 55px;}
nav.maintop .level_2 li a.checklisten {background: #fff url(/files/design/_icons/serviceChecklisten.svg) 10px 3px / 100px auto no-repeat; background-size: 35px; padding-left: 55px;}
nav.maintop .level_2 li a.beikostrezepte {background: #fff url(/files/design/_icons/serviceBeikost.svg) 10px 3px / 100px auto no-repeat; background-size: 35px; padding-left: 55px;}
nav.maintop .level_2 li a.interviews {background: #fff url(/files/design/_icons/serviceInterviews.svg) 10px 3px / 100px auto no-repeat; background-size: 35px; padding-left: 55px;}
nav.maintop .level_2 li a.apps {background: #fff url(/files/design/_icons/serviceApps.svg) 10px 3px / 100px auto no-repeat; background-size: 35px; padding-left: 55px;}
nav.maintop .level_2 li a.chatbot {background: #fff url(/files/design/_icons/serviceChatbot.svg) 10px 3px / 100px auto no-repeat; background-size: 35px; padding-left: 55px;}
nav.maintop .level_2 li a.rechnerSchwangerschaft {background: #fff url(/files/design/_icons/serviceRechnerSW.svg) 10px 3px / 100px auto no-repeat; background-size: 35px; padding-left: 55px;}
nav.maintop .level_2 li a.rechnerEisprung {background: #fff url(/files/design/_icons/serviceEisprung.svg) 10px 3px / 100px auto no-repeat; background-size: 35px; padding-left: 55px;}
nav.maintop .level_2 li a.expertinnen {background: #fff url(/files/design/_icons/serviceExpertInnen.svg) 10px 3px / 100px auto no-repeat; background-size: 35px; padding-left: 55px;}
nav.maintop .level_2 li a.gewinnspiele {background: #fff url(/files/design/_icons/serviceGewinnspiele.svg) 10px 3px / 90px auto no-repeat; background-size: 35px; padding-left: 55px;}
nav.maintop .level_2 li a.babyforum {background: #fff url(/files/design/_icons/serviceBabyforum.svg) 10px 3px / 90px auto no-repeat; background-size: 35px; padding-left: 55px;}
nav.maintop .level_2 li a:hover {background-color: rgba(126, 150, 179, 0.2);}

nav.maintop .level_2 li strong.neuheiten {background:rgba(255, 228, 228, 0.5) url(/files/design/_icons/produkteNeu.svg) 10px 3px / 100px auto no-repeat; background-size: 35px; padding-left: 55px;}
nav.maintop .level_2 li strong.kinderzimmer {background:rgba(255, 228, 228, 0.5) url(/files/design/_icons/produkteKinderzimmer.svg) 10px 3px / 100px auto no-repeat; background-size: 35px; padding-left: 55px;}
nav.maintop .level_2 li strong.kinderwagen {background:rgba(255, 228, 228, 0.5) url(/files/design/_icons/produkteKinderwagen.svg) 10px 3px / 100px auto no-repeat; background-size: 35px; padding-left: 55px;}
nav.maintop .level_2 li strong.verzeichnis {background:rgba(255, 228, 228, 0.5) url(/files/design/_icons/serviceVerzeichnis.svg) 10px 3px / 100px auto no-repeat; background-size: 35px; padding-left: 55px;}
nav.maintop .level_2 li strong.kindersitz {background:rgba(255, 228, 228, 0.5) url(/files/design/_icons/produkteKindersitz.svg) 10px 3px / 100px auto no-repeat; background-size: 35px; padding-left: 55px;}
nav.maintop .level_2 li strong.produkttests {background:rgba(255, 228, 228, 0.5) url(/files/design/_icons/serviceProdukttest.svg) 10px 3px / 100px auto no-repeat; background-size: 35px; padding-left: 55px;}
nav.maintop .level_2 li strong.aktionen {background:rgba(255, 228, 228, 0.5) url(/files/design/_icons/serviceAktionen.svg) 10px 3px / 100px auto no-repeat; background-size: 35px; padding-left: 55px;}
nav.maintop .level_2 li strong.checklisten {background:rgba(255, 228, 228, 0.5) url(/files/design/_icons/serviceChecklisten.svg) 10px 3px / 100px auto no-repeat; background-size: 35px; padding-left: 55px;}
nav.maintop .level_2 li strong.beikostrezepte {background:rgba(255, 228, 228, 0.5) url(/files/design/_icons/serviceBeikost.svg) 10px 3px / 100px auto no-repeat; background-size: 35px; padding-left: 55px;}
nav.maintop .level_2 li strong.interviews {background:rgba(255, 228, 228, 0.5) url(/files/design/_icons/serviceInterviews.svg) 10px 3px / 100px auto no-repeat; background-size: 35px; padding-left: 55px;}
nav.maintop .level_2 li strong.apps {background:rgba(255, 228, 228, 0.5) url(/files/design/_icons/serviceApps.svg) 10px 3px / 100px auto no-repeat; background-size: 35px; padding-left: 55px;}
nav.maintop .level_2 li strong.chatbot {background:rgba(255, 228, 228, 0.5) url(/files/design/_icons/serviceChatbot.svg) 10px 3px / 100px auto no-repeat; background-size: 35px; padding-left: 55px;}
nav.maintop .level_2 li strong.rechnerSchwangerschaft {background:rgba(255, 228, 228, 0.5) url(/files/design/_icons/serviceRechnerSW.svg) 10px 3px / 100px auto no-repeat; background-size: 35px; padding-left: 55px;}
nav.maintop .level_2 li strong.rechnerEisprung {background:rgba(255, 228, 228, 0.5) url(/files/design/_icons/serviceEisprung.svg) 10px 3px / 100px auto no-repeat; background-size: 35px; padding-left: 55px;}
nav.maintop .level_2 li strong.expertinnen {background:rgba(255, 228, 228, 0.5) url(/files/design/_icons/serviceExpertInnen.svg) 10px 3px / 100px auto no-repeat; background-size: 35px; padding-left: 55px;}
nav.maintop .level_2 li strong.gewinnspiele {background:rgba(255, 228, 228, 0.5) url(/files/design/_icons/serviceGewinnspiele.svg) 10px 3px / 80px auto no-repeat; background-size: 30px; padding-left: 55px;}
nav.maintop .level_2 li strong.babyforum {background:rgba(255, 228, 228, 0.5) url(/files/design/_icons/serviceBabyforum.svg) 10px 3px / 80px auto no-repeat; background-size: 30px; padding-left: 55px;}

/* Schwangerschafts - Dots */
#main .mod_customnav.schwangerschaftsDots {text-align: center; height: 60px; position: relative; margin: 0; position: absolute; width: 100%; background: var(--c-cream);}
.mod_customnav.schwangerschaftsDots h5 {display: none;}
#main .mod_customnav.schwangerschaftsDots ul {padding: 0 5px; display: flex;flex-wrap: nowrap;justify-content: space-between;  /* background: linear-gradient(
	90deg
	, rgba(52,66,84,1) 20%, rgba(126,150,179,1) 30%, rgba(126,150,179,1) 40%, rgba(126,150,179,1) 52%, rgba(255,128,120,1) 65%, rgba(255,128,120,1) 85%, rgba(52,66,84,1) 100%); */ overflow: scroll;
	height: fit-content; align-items: center; overflow: hidden;} 
#main .mod_customnav.schwangerschaftsDots li {	background: transparent; display: inline-block; margin-right: 10px; padding: 3px 0;}
#main .mod_customnav.schwangerschaftsDots li.text {font-size: 0.9rem;}
#main .mod_customnav.schwangerschaftsDots li a:link, #main .mod_customnav.schwangerschaftsDots li a:visited {font-family: var(--font-body);
		padding: 4px 0 0 0;
		display: inline-flex;
		position: relative;
		width: 32px;
		height: 32px;
		overflow: hidden;
		font-size: 0.9rem;
		transition: background 0.2s ease;
		box-sizing: border-box;}
#main .mod_customnav.schwangerschaftsDots li span.active {background: transparent; font-size: 0.9rem; line-height: 1.8em; text-align: center; 	display: inline-flex; color: #FFF; background: #000; width: 32px; height: 32px; font-weight: normal; padding: 3px 0 0 2px; overflow: hidden; font-family: var(--font-body); background: #FFF; position: relative; box-shadow: 0 0 3px #333; border-radius: 12px; z-index: 100; position: relative;    margin: 0 -6px 0 -6px; }
#main .mod_customnav.schwangerschaftsDots li a:link, #main .mod_customnav li a:visited {
		border-radius: 10px;
		padding: 4px 15px;
		height: 35px; color: #000; font-size: 0.9rem; font-weight: bold; background: #ffffffc7; display: flex;
		align-items: baseline;
		flex-wrap: wrap;
		justify-content: center;
		align-content: flex-start;
		box-shadow: 0 0 10px #DDC;}
#main .mod_customnav.schwangerschaftsDots li.TrimesterZwei a:link, #main .mod_customnav li.TrimesterZwei a:visited {}
#main .mod_customnav.schwangerschaftsDots li.TrimesterZwei a:hover {background: var(--c-text-muted); color: #FFF;}
#main .mod_customnav.schwangerschaftsDots li.TrimesterDrei a:link, #main .mod_customnav li.TrimesterDrei a:visited {}
#main .mod_customnav.schwangerschaftsDots li.TrimesterDrei a:hover {background: var(--c-cta); color: #FFF;}

#main .mod_customnav.schwangerschaftsDots li.last {margin-right: 0;}
#main .mod_customnav.schwangerschaftsDots li a.first-child:link, #main .mod_customnav.schwangerschaftsDots li a.first-child:visited {margin-left: 0px;border-radius: 10px 0 0 10px; }
#main .mod_customnav.schwangerschaftsDots li a.last:link, #main .mod_customnav.schwangerschaftsDots li a.last:visited {border-radius: 10px; margin-right: 0px; padding-left: 12px; padding-right: 12px; width: 60px;} 

#main .mod_customnav.schwangerschaftsDots li.TrimesterEins.newsletter a {width: fit-content; padding-left: 18px; margin-left: 0px;
	padding: 4px 15px 0 15px;}

	/* Scroll-Buttons für horizontale Navigation */
	#main .mod_customnav.schwangerschaftsDots .scroll-button {
		position: absolute !important;
		top: 50% !important;
		transform: translateY(-50%);
		background-color: rgba(52, 66, 84, 0.9);
		color: #FFF;
		border: none;
		width: 40px;
		height: 40px;
		border-radius: 50% !important;
		cursor: pointer;
		display: none !important;
		align-items: center;
		justify-content: center;
		z-index: 101;
		transition: background-color 0.2s ease, opacity 0.2s ease;
		font-size: 20px;
		line-height: 1;
		padding: 0;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
		margin: 0;
	}
	
	#main .mod_customnav.schwangerschaftsDots .scroll-button:hover {
		background-color: rgba(52, 66, 84, 1);
	}
	
	#main .mod_customnav.schwangerschaftsDots .scroll-button.scroll-left:hover {
		background-color: rgba(52, 66, 84, 0.9);
		background-size: 40%;
	}
	
	#main .mod_customnav.schwangerschaftsDots .scroll-button.scroll-right:hover {
		background-color: rgba(52, 66, 84, 0.9);
		background-size: 40%;
	}
	
	#main .mod_customnav.schwangerschaftsDots .scroll-button:active {
		opacity: 0.8;
	}
	
	#main .mod_customnav.schwangerschaftsDots .scroll-button.scroll-left {
		right: auto !important;
		/* Stelle sicher, dass der linke Button wirklich links ist */
		margin-left: 0 !important;
		margin-right: auto !important;
			background: var(--c-cta) url(/files/design/_icons/nav-arrow-left.svg) 10px 10px no-repeat !important;
		background-size: 40% !important;
	}
	
	#main .mod_customnav.schwangerschaftsDots .scroll-button.scroll-right {
		left: auto !important;
		/* Stelle sicher, dass der rechte Button wirklich rechts ist */
		margin-right: 0 !important;
		margin-left: auto !important;
			background: var(--c-cta) url(/files/design/_icons/nav-arrow-right.svg) 13px no-repeat !important;
		background-size: 40% !important;
	}
	
	#main .mod_customnav.schwangerschaftsDots .scroll-button.visible {
		display: flex !important;
	}

/* Entwicklungs - Dots */

#main .mod_customnav.schwangerschaftsDots li.entwicklungsPill {flex-basis: 15%;}
#main .mod_customnav.schwangerschaftsDots li.entwicklungsPill a:link, #main .mod_customnav.schwangerschaftsDots li.entwicklungsPill a:visited {width: 100%; border-right: 1px dashed var(--c-cream);}
#main .mod_customnav.schwangerschaftsDots li.entwicklungsPill a:hover {background: var(--c-cta);}

#main .mod_customnav.schwangerschaftsDots li a:hover {background: var(--c-deep);
color: #FFF;
padding-top: 2px;
padding-left: 0;
transition: all 0.1s;
		padding: 4px 15px;}

/* Entwicklungs - Wochenbettwochen */

body.wbwoche #main .mod_article .sharebuttons ul, body.entwicklungsmonate #main .mod_article .sharebuttons ul {padding: 0px 0 40px 0;}

#main .mod_customnav.schwangerschaftsDots.wochenbett li {flex-basis: 12.5%;}
#main .mod_customnav.schwangerschaftsDots.wochenbett li a:link, #main .mod_customnav.schwangerschaftsDots li.entwicklungsPill a:visited {width: 100%; border-right: 1px solid var(--c-cream);}
#main .mod_customnav.schwangerschaftsDots.wochenbett li a:hover {background: var(--c-cta);}

.subhub.wbwoche .content-text:nth-child(2),
.subhub.wbwoche .content-text:nth-child(3),
.subhub.entwicklungsmonate-seite .content-text:nth-child(2),
.subhub.entwicklungsmonate-seite .content-text:nth-child(3)  {background: none;}

.subhub.wbwoche .content-text figure, .subhub.entwicklungsmonate-seite .content-text figure {margin-bottom: 50px;}
.subhub.wbwoche .content-text figure img, .subhub.entwicklungsmonate-seite .content-text figure img {border-radius: 10px;}

/* .TrimesterEins, .TrimesterZwei {border-right: 2px solid #FFF; padding-right: 12px;} */

/* Schwangerschaftswochen Übersicht */

#schwangerschaftswochen .content-text {text-align: left; clear: both;	padding-bottom: 55px;}
#schwangerschaftswochen .content-text h2 {width: 100%; text-align: left; padding-left: 0;}

#schwangerschaftswochen a.button:link, #schwangerschaftswochen a.button:visited { margin-bottom: 0px; font-size: 1rem; line-height: 1.4rem; padding: 10px 0; font-weight: normal;text-align: center; margin-top: 9px; width: 30%;display: inline-block;border: 1px solid var(--c-cta); transition: all 0.3s ease;}
#schwangerschaftswochen a.button:hover {color: var(--c-cta); border: 1px solid var(--c-cta); background: #FFF;}

#schwangerschaftswochen .sswBoxes div.flex a:link, #schwangerschaftswochen .sswBoxes div.flex a:visited { margin-bottom: 0px;font-size: 1em; line-height: 1.4em;padding: 5px 0;font-weight: normal;text-align: left; margin-top: 9px;color: var(--c-cta);width: 22%;display: inline-block;transition: all 0.3s ease; border: none;}
#schwangerschaftswochen .sswBoxes div.flex a:hover {color: var(--c-deep); background: none;}

#schwangerschaftswochen .content-text:nth-child(2) {background: none;}
/* #schwangerschaftswochen .content-text figure {margin: -50px 0 20px 10%; border-radius: 10px; width: 220px;} */
	#schwangerschaftswochen .content-text figure img {border-radius: 10px;}
	#schwangerschaftswochen .hubmodules .content-text figure img {border-radius: 10px;}
		#schwangerschaftswochen .content-text figure figcaption {margin-top: 10px;}

/* 40 Schwangerschaftswochen Ansicht */

.sswAnsicht .mod_article {}
	.sswAnsicht .content-text:nth-child(2)  {padding-top: 30px;}
	.sswAnsicht .content-text:nth-child(3) {background: none;}
	.sswAnsicht .mod_article figure {margin: 17px 0 20px 10%; border-radius: 10px;}
	.sswAnsicht .mod_article figure img {border-radius: 10px; width: 350px;}
	.sswAnsicht .mod_article h1 {border: none; margin-bottom: 30px; margin-top: 55px;}

.sswAnsicht .mod_article .content-text {padding-top: 45px; padding-bottom: 35px; color: var(--c-deep);}
	.sswAnsicht > .mod_article .content-text:nth-child(1) {background: var(--c-cream);}
	.sswAnsicht .mod_article .content-text:nth-child(1) p {color: var(--c-deep); text-align: left; background: transparent;}
	.sswAnsicht .mod_article:nth-child(1) .content-text:nth-child(1) p {text-align: left; padding: 0;}

.sswAnsicht .sswTipp {margin-bottom: 20px; background: rgb(249,226,216);}
	.sswAnsicht .sswTipp h2 {border: none;}
		.sswAnsicht .sswTipp ul li {background: #FFF; border-left: 3px solid var(--c-cta); background: -webkit-linear-gradient(left, rgba(249, 116, 143,0.1) 0%,rgba(249, 116, 143,0.03) 100%);}

.sswAnsicht .sswGutzuwissen {}
	.sswAnsicht .sswGutzuwissen h2 {border: none;}

.sswAnsicht .mod_article .content-text.sswMeilensteine {background: none;}
	.sswAnsicht .sswMeilensteine h2, .sswAnsicht .sswMeilensteine li {text-align: left;}

.sswAnsicht .mod_booknav {	padding: 25px 0 50px;}
.sswAnsicht .mod_booknav li {margin: 0 auto 15px; text-align: center; display: initial;}
.sswAnsicht .mod_booknav .up {display: none;}

/* 2nd Header Menü */
#footer {}

/* Modulheader */

.newsletterBox {height: 165px; border-radius: 3px; margin-bottom: 20px; display: inline-block; width: 48%; margin-right: 3%;}

/* .mod_subscribe — nach components.css (Newsletter-Band) */

.bereiche img {float: right; border-radius: 3px; margin: 0 0 20px 30px;}

/* body.newsletter .mod_subscribe — nach components.css */

/* Main Modules */

.mod_breadcrumb {padding-top: 6px; width: 100%; text-align: center; display: block; background: none; font-size: 0.8rem; position: absolute; top: 62px;}
.mod_breadcrumb ul {margin: 0; padding: 0; line-height: 1rem; opacity: 0.5;}
.mod_breadcrumb li {display: inline-block; background: url(/files/design/_icons/arrowBreadcrumb.svg) right center no-repeat; background-size: 4px; margin-right: 7px;}
.mod_breadcrumb li:last-child {background: none; margin-right: 0;}
.mod_breadcrumb a:link, .mod_breadcrumb a:visited {font-size: 0.8rem;
	border-radius: 3px;
	letter-spacing: 0.5px;
	padding: 0px 7px 0px 0;
	color: rgb(52 66 84 / 60%);
	margin-right: 5px;}
.mod_breadcrumb a:hover {color: var(--c-cta);}
.mod_breadcrumb span.active {font-size: 0.8rem; border-radius: 3px; padding: 3px 7px; color: var(--c-text-muted); letter-spacing: 0.5px;}
.mod_breadcrumb li:last-child {background: none;margin-right: 0px;color: rgb(52 66 84 / 60%);}

/* Last Update Line */

.letztesUpdate {padding-top: 6px; width: 100%; text-align: center; display: block; 	background: rgb(243 246 249); font-size: 0.8rem; color: rgb(52 66 84 / 60%);}

.suchIndex {z-index: 102; position: relative;}
.mod_search {position: absolute; top: 15px; background: #efefef; border-radius: 10px; width: 150px;}
.mod_search .formbody {margin: 0 auto; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; transition: all .5s ease;}
.mod_search formbody:focus {width: 130px;}
.mod_search input {border-radius: 15px; padding: 7px 12px 7px 12px; width: 30px; float: left; border: 1px solid var(--c-text-muted); font-size: 1em; font-family: var(--font-body); color: var(--c-cream);}

.mod_search .formbody:focus {width: 140px; }

.mod_search button.submit {width: 25px; height: 26px; cursor: pointer; background: transparent url(/files/design/_icons/suche.svg) 2px 0 no-repeat; border: none; text-indent: 9999px;  float: right; display: inline-block; position: absolute; top: 6px; right: 3px; background-size: 17px; border-radius: 0;}
.mod_search button.submit:hover {background: transparent url(/files/design/_icons/suche.svg) 2px 0 no-repeat; background-size: 17px;}

#suche .mod_search {position: relative; padding: 8px; width: 100%; margin-top: -10px; background: none; top: 0; left: 0; height: auto;}
#suche .mod_search span.relevance {font-size: 0.7rem; color: var(--c-text-muted);}
#suche .even, #suche .odd {font-size: 0.8rem; font-family: Verdana; list-style-position: outside; margin-bottom: 4px; border-radius: 3px; padding: 10px 25px; background: #fff; margin-bottom: 10px;}
#suche .mod_search p.url {display: none; height: 0; margin: 0; padding: 0;}
#suche .mod_search h3 {font-size: 1.1rem; line-height: 1.5rem; margin: 10px 0 0 0;}

#suche .mod_search h1 {border: none; margin-top: 72px;}
#suche .mod_search p.header {font-size: 0.8em; text-align: center; color: var(--c-text-muted); margin-bottom: 30px;}
#suche .mod_search form {display: none;}

/* Startseite Hub */

.willkommen {margin-top: 5px; margin-bottom: 30px;}
.willkommen h1 {font-size: 1.7em; background: none;}

.home .content-text h2 {width: 100%; text-align: center;}

.home .flex {}
	.home .flex div {width: 50%; padding-top: 80px; padding-bottom: 80px;}
	.home .flex div:nth-child(odd) {padding-left: 20%; padding-right: 5%;}
	.home .flex div:nth-child(even) {padding-right: 20%; padding-left: 5%;}	
	
	.home .flex div h2 {color: var(--c-deep);}
	.home .flex div p {color: var(--c-deep); margin-bottom: 30px;}
	
	.home .flex div:nth-child(odd) h2 {text-align: left;}
	.home .flex div:nth-child(even) h2 {text-align: left;}
	.home .flex div:nth-child(odd) p {text-align: left;}
	.home .flex div:nth-child(even) p {text-align: left;}
	
	.home .flex div a:link, .home .flex div a:visited {display: block; background: var(--c-cta); color: #FFF; padding: 10px 20px; border-radius: 100px; margin: 20px 0; display: table-cell; border: 1px solid var(--c-cta); font-family: var(--font-display);
		font-style: italic;
		font-weight: 400;
		font-size: 1.1rem;
		letter-spacing: 0.5px;}
	.home .flex div a:hover {color: var(--c-cta); background: #FFF; transition: all 0.3s ease; border: 1px solid var(--c-cta);}

/* Front Themen */

/* .home .hubbar.categories — wieder sichtbar, Styles in components */

/* 1 Zeile */

body.home .flex .content-text h2 {padding-bottom: 10px !important; position: relative;}
	body.home #main .flex .content-text figure {float: right; position: relative; top: 0px; width: 43px;}
	
	body.home .hubhead h1 {width: 50%;}

body.home .frontSchwangerschaftswochen {background: transparent;}
	.frontSchwangerschaftswochen p {margin: 0 10px 10px 0;}

.haeufigeFragenFront {}

/* 2 Zeile */

.frontBabyforum p.oberesP {color: #FFF;position: relative; top: 0; left: 0;margin-bottom: 25px;font-size: 1em;}

#main .frontBabyforum a:link, #main .frontBabyforum a:visited {line-height: 0; padding-left: 40px;    background: transparent url(/files/design/_icons/babyForumThreads.svg) 10px 11px no-repeat; color: var(--c-cta);    border: none;
	background-size: 18px; font-size: 1em; width: 100%; max-width: 100%; border-bottom: 1px solid #ffe4e4;
	box-shadow: inset 0 -1px 0 #ffe4e4; border-radius: 0; line-height: 1.4rem; text-align: left;}
#main .frontBabyforum a:hover {color: var(--c-deep); background: transparent url(/files/design/_icons/babyForumThreads.svg) 10px 11px no-repeat;
	background-size: 18px; transition: all 0.3s ease; border-bottom: 1px solid var(--c-deep);
	box-shadow: inset 0 -1px 0 var(--c-deep);}

	.frontBabyforum div.rss_default {margin: 0 0 10px 0 !important;  padding: 0 !important; }
	.frontBabyforum div.rss_default {width: auto !important;}
	.frontBabyforum div.rss_default a:link, .frontBabyforum div.rss_default a:visited {}

/* 3 Zeile */
 
.namenUmDenErdballFront, .checklistenHome {background: transparent;}
.home .redBox {background: #FFF !important;}
.home .flex div.namenUmDenErdballFront a:link, .home .flex div.namenUmDenErdballFront a:visited {margin-right: 8px; display: inline;}

.articleRectangle {height: 252px; max-width: 300px; margin-bottom: 15px; margin-left: 20px; float: right; border: 1px solid #DDD;}
.skyscraper {border: 1px solid #DDD; position: absolute; top: 0; left: 200px;}

body.home .mod_newslist {margin-top: 20px; padding-bottom: 40px; background: var(--c-cream);}
	body.home .mod_newslist h2 {flex: 0 0 100%; margin-top: 0; font-weight: 400; width: auto; font-size: var(--fs-h2); line-height: 1.35; color: var(--c-deep); margin: 0 0 24px; border-bottom: none; padding-bottom: 0; font-family: var(--font-display); font-style: italic;}
	body.home .mod_newslist h3 {margin: 10px 20px 0; border: none;}
	body.home .mod_newslist h3 a {font-family: var(--font-display);
		font-style: italic;
		font-size: 1.15rem;
		line-height: 1.4rem;
		font-weight: 500;
		border: none;
		color: var(--c-deep);
		letter-spacing: 0.5px;
		margin-top: 20px;}
	body.home .mod_newslist .layout_latest {height: auto;}    
	body.home .mod_newslist .layout_latest p.more {position: relative;}

/* Ich bin Schwanger */

/* Wochen der Schwangerschaft */

.total {visibility: hidden; height: 0;}

/* Entwicklungsmonate */

/* entfernt: body.entwicklungsmonate-Block (width 55 %, 31vw-Bilder) → Kacheln in 8-pages.css */
		
		body.entwicklungsmonate-seite .mod_article h2 {width: 100%;}
		body.entwicklungsmonate-seite .mod_article .content-text.first-child h2 {width: fit-content; text-align: center; background: rgba(255, 228, 228, 0.5); padding: 2px 20px 2px 20px; font-size: 1rem; display: block; margin: 0 auto; font-weight: 400; margin-bottom: 20px; letter-spacing: 0.05rem;}
		body.entwicklungsmonate-seite .mod_article .content-image img {width: 100%;}

/* .tipp / .wichtig / .zitat / .faq — nach components.css */
.content-text:last-child.elterncheck .fazit {background: var(--c-cta) url(/files/design/_icons/fazit.svg) 30px 25px no-repeat; background-size: 45px; padding: 12px 25px 12px 100px; color: #FFF; border-radius: 30px; margin-top: 25px; display: block;}

body.entwicklungsmonate-seite .sharebuttons {padding-bottom: 20px;}	

/* Produktguide */

body.produkte .mod_newslist {padding-left: 0; padding-right: 0; padding-bottom: 0;}
body.produkte .mod_newslist h3 {	padding: 0 20px; border-bottom: 0; font-family: var(--font-body); font-size: 1.15rem; line-height: 1.4rem; font-weight: 700;}
	body.produkte .mod_newslist h3 a:link, body.produkte .mod_newslist h3 a:visited {color: var(--c-deep);}
	body.produkte .mod_newslist h3 a:hover {color: var(--c-cta);}

/* Article Boxes */
.siteBoxes {margin-bottom: 25px; margin-right: 50px; min-height: 160px;}
/* .siteBoxes:nth-child(5), .siteBoxes:nth-child(9), .siteBoxes:last-child {margin-right: 0;} */
/* Fix ?? oder nicht */ .siteBoxes:nth-child(4), .siteBoxes:nth-child(7), .siteBoxes:nth-child(11), .siteBoxes:last-child {margin-right: 0 !important;}
.siteBoxes a:link, .siteBoxes a:visited {color: #FFF; display: block; font-size: 0.85em;}
.siteBoxes a:hover {color: #DDD;}

.siteBoxes h2 {height: 50px; color: #FFF; padding: 10px 15px; width: 100%; margin-top: 0; font-family: var(--font-body); font-weight: 300; font-size: 1.2em; text-align: center; }

.sswBoxes {margin-right: 0; margin-bottom: 0;}

/* Wochen der Schwangerschaft */

/* Content Navigator Modul */

/* .article_jumper / .ce_hofff_content_navigation — nach components.css */

:target::before {
  content: "";
  display: block;
  height: 100px;
}

/* Formulare */
#f1 {border: 3px solid #F1BFCB; padding: 0 15px 15px 15px; margin-top: 20px; background: #FFF url("/files/design/schwangerschaftsrechner.jpg") top right no-repeat;}
	#f1 h2 {margin: 10px 0 0 -3px; font-size: 16px; border: none;}
	#f1 #toggle_3 {position: relative; top: 5px; left: 10px; cursor: pointer;}
	#f1 #ctrl_1 {position: relative;}
	#f1 #ctrl_2 {position: relative;}
	#f1 #ctrl_3 {position: relative;}
	#f1 .submit {}
	#f1 .submit_container {background: #F1BFCB; margin-top: 5px; padding: 7px 0 5px 10px; position: relative; top: 15px;} 
	#f1 input, #f1 select {max-width: 200px;}

/* Banner */
#div-gpt-ad-1335012845025-0 {border: 1px solid #DDD; padding: 0 0 0 25px; background: #FFF;}

/* Footer */
#footer .mod_customnav.service {margin: 8px 0 0 0; color: #777;}

#footer .mod_customnav {margin: 8px 0 0 0; color: #666; display: inline-block; vertical-align: top;}
	#footer .mod_customnav ul {margin: 0 0 0 0; padding: 0;}
	#footer .mod_customnav li {list-style: none; line-height: 22px; display: block;}
	#footer .mod_customnav li a:link, #footer .mod_customnav li a:visited {color: rgba(255, 255, 255, 1);
		font-size: 0.9rem;
		letter-spacing: 0;
		line-height: 2rem;
		transition: all 0.3s ease;}
	#footer .mod_customnav li a:hover {color: var(--c-cta); color: var(--c-cta); letter-spacing: 0; line-height: 2rem;}
	#footer .mod_customnav li strong.active { color: var(--c-cta);font-size: 0.9rem;letter-spacing: 0;line-height: 1.8rem; font-weight: 400;}
	#footer .mod_customnav h5 {margin: 12px 0 8px 0;
		color: rgba(255, 255, 255, 0.5);
		font-weight: 500;
		margin-bottom: 30px;
		font-family: var(--font-display);
		font-style: italic;
		font-size: 1.2rem;
		letter-spacing: 0.5px;
	}
	
.copyright {font-size: 0.85rem; margin: 100px 0 0 0; text-align: left; color: #fff; text-align: center; color: rgba(255, 255, 255, 0.4)}
	.copyright img {width: 250px; display: block; margin: 30px auto;}     
	.copyright a:link, .copyright a:visited {    color: rgba(255, 255, 255, 0.5);
	transition: all 0.3s ease; font-size: 0.8rem;}
	.copyright a:hover {color: rgba(255, 255, 255, 0.8);}

/* .ce_comments / .comment_default — nach contao-elements.css */

/* mod_newslist */
.mod_newslist {padding-bottom: 100px;}
.mod_newslist, .mod_newsarchive {overflow: hidden; display: flex; justify-content: space-between; flex-wrap: wrap; padding-top: 25px; background: var(--c-cream);}
	.mod_newslist img, .mod_newsarchive img {margin: 17px 0 0 20px; border-radius: 3px; float: right;}

.layout_latest {flex-basis: 48.5%; margin-bottom: 25px; background: #fff; border-radius: 3px; position: relative; min-height: 240px;}
	.layout_latest h2 {	font-weight: 500;
		padding: 0 25px;
		font-family: var(--font-display);
		font-style: italic;
		font-size: 1.2rem;
		letter-spacing: 0.5px;
	line-height: 1.6rem;}
	.layout_latest h2 a:link, .mod_newslist .layout_latest h2 a:visited {color: var(--c-deep);}
	.layout_latest h2 a:hover {color: #444;}
	.layout_latest .teaser {margin: 0; padding: 0 25px; }
	.layout_latest .teaser p {line-height: 1.7rem; color: var(--c-deep); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
	.layout_latest img {float: none; margin: 0; border-radius: 3px 3px 0 0; transition: all .3s ease-in-out;} 
	.layout_latest figure {overflow: hidden;}
	.layout_latest figure:hover img {transform: scale(1.1) rotate(2deg); opacity: 0.8;}
	.layout_latest p.more {padding: 0 20px; margin: 20px 0; width: 100%;}
	.layout_latest div.caption {font-size: 0.75rem; width: auto !important; position: absolute; bottom: 5px; color: #fff; padding: 2px 8px; right: 0; background: rgba(1, 1, 1, 0.2); border-radius: 4px 0 0 0;}
	.layout_latest figure {position: relative;}	

	body.news .mod_article h1 {margin: 5px 0 0 0; background: var(--c-cream); padding-top: 130px; width: 100%; font-family: var(--font-display);
		font-style: italic; 	font-weight: 500;
		font-size: 2.5rem;}
	body.news .mod_newslist .layout_latest {}

	p.more a:link, p.more a:visited, p.back a:link, p.back a:visited {transition: all 0.3s ease; border-radius: 50px; background: var(--c-cta);
		color: #FFF;
		padding: 10px 20px;
		border-radius: 100px;
		margin: 20px 0;
		display: table-cell;
		border: 1px solid var(--c-cta);
		font-family: var(--font-display);
		font-style: italic;
		font-weight: 400;
		font-size: 1.1rem;
		letter-spacing: 0.5px;}
	p.back a:link, p.back a:visited {margin: 0 auto;}
	p.more a:hover, p.back a:hover {background: #fff; color: var(--c-cta); border: 1px solid var(--c-cta);}

	p.back {margin: 50px auto 30px; text-align: center; display: flex;}

/* mod_eventlist */ 

.mod_eventlist, .mod_eventreader, .mod_EventEditor {
	background: var(--c-cream);
	padding-bottom: 80px;
}

.mod_eventlist .event a {
	background: #FFF;
	border-radius: 10px;
	padding: 10px 20px;
	display: flex;
	justify-content: space-between;
	border-bottom: 2px solid var(--c-cream);
}

.mod_eventlist .event h2 {
	margin: 13px 0 10px 0;
	font-size: 1.3rem;
	width: 45%;
	align-items: center;
	display: flex;
	letter-spacing: 0.2px;
}

.mod_eventlist .event .time {
	width: 25%;
}

.mod_eventlist .event .location {
	width: 30%;
}

.mod_eventlist .event p, .mod_eventlist .event div, .mod_eventlist .event h2 {
	line-height: 1.4rem;
}

.mod_eventlist .event p {
	margin: 4px 0;
	align-items: center;
	display: flex;
}

.mod_eventlist .header {
	background: var(--c-deep);
	color: #FFF;
	margin: 35px 0 15px 0;
	border-radius: 10px;
	padding: 4px 10px;
	display: inline-block;
}

.mod_eventlist .content-text {
	display: none;
}

.mod_EventEditor {
	margin-top: -18px;
	padding-top: 40px;
}

.mod_EventEditor tbody {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.mod_EventEditor tbody tr {
	width: 23%;
	margin-bottom: 25px;
}

.mod_EventEditor tbody tr td {
	display: block;
}

.mod_EventEditor tbody .label {
	color: rgb(52 66 84 / 60%);
	font-size: 1rem;
	margin-bottom: 10px;
}

.mod_EventEditor tbody tr td input, .mod_EventEditor tbody tr td textarea {
	border: 1px solid rgb(52 66 84 / 60%);
	border-radius: 10px;
	padding: 7px 10px 5px;
	width: 100%;
	color: #374254;
	font-family: var(--font-body);
	font-size: 1rem;
}

.mod_EventEditor tbody tr:nth-child(1) input, .mod_EventEditor tbody tr:nth-child(2) input {
	width: 85%; margin-right: 10px;
}

.mod_EventEditor tbody tr:nth-child(5) input, .mod_EventEditor tbody tr:nth-child(5) input {
	width: 95%;
}

.mod_EventEditor tbody tr td textarea {
	width: 100%;
	padding: 10px;
}

.mod_EventEditor img.ui-datepicker-trigger {
	position: relative;
	top: 2px;
	left: 3px;
	cursor: pointer;
}

.mod_EventEditor span.mandatory {
	width: 10px;
	height: 10px;
	border-radius: 10px;
	background: var(--c-cta);
	color: var(--c-cta);
	margin-left: 5px;
	display: inline-block;
}

.mod_EventEditor tbody tr:nth-child(5), .mod_EventEditor tbody tr:nth-child(7) {
	width: 48.67%;
}

.mod_EventEditor tbody tr:nth-child(9) {
	width: 100%;
}

.caledit_info, .mod_EventEditor h2, .mod_EventEditor tbody tr:nth-child(6), .mod_EventEditor tbody tr:nth-child(8), .mod_EventEditor tbody tr:nth-child(15)  {
	display: none;
}

.mod_EventEditor tbody tr:nth-child(10), .mod_EventEditor tbody tr:nth-child(13) {
	width: 45%;
}

.mod_EventEditor tbody tr:nth-child(14) {
	width: 100%;
	text-align: center;
}

.mod_EventEditor select {padding: 4px 20px 4px 6px; width: 100%; border-radius: 10px;}

.mod_EventEditor tbody tr td input.submit {
	background: var(--c-cta);
	color: #FFF;
	padding: 10px 20px;
	border-radius: 100px;
	margin: 0;
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 400;
	font-size: 1.1rem;
	letter-spacing: 0.5px;
	border: 1px solid var(--c-cta);
	cursor: pointer;
}

.mod_EventEditor tbody tr td input.submit:hover {
	border: 1px solid var(--c-cta);
	color: var(--c-cta);
	background: #FFF;
}

/* mod_eventreader */

.mod_eventreader .event {
	padding-top: 45px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.mod_eventreader .event h1 {
	width: 100%;
	margin-bottom: 20px;
}

.mod_eventreader .event .content-text {
	padding: 5px 25px;
}

.mod_eventreader .event .info, .mod_eventreader .event .location {
	width: 48%;
	display: inline-block;
	margin-top: 0;
	font-size: 1.2rem;
	line-height: 1.8rem;
	color: var(--c-deep);
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 500;
	margin-bottom: 25px;
	padding: 0 25px;
}

.mod_eventreader .event .info:before, .mod_eventreader .event .location:before {
content: "Datum & Uhrzeit";
margin-top: 0;
font-size: 1rem;
line-height: 2.5rem;
color: var(--c-deep);
font-weight: 400;
display: block;
border-bottom: 3px solid var(--c-deep)26;
margin-bottom: 15px;
}

.mod_eventreader .event .location:before {
content: "Ort";
}

.mod_eventreader .event .location {
	margin-bottom: 40px;
}

/* Mitglieder Anmeldung */

body.loginregistrierung .mod_login, body.loginregistrierung .mod_lostPassword, body.loginregistrierung .mod_registration {
	padding: 20px 25px 25px 25px;
}

body.loginregistrierung .mod_registration {
	flex-basis: 62%;
}

body.loginregistrierung .mod_login .formbody:before {
	content: "Hallo! Bitte registriere deinen Veranstalter-Account vor dem ersten Login im Formular rechts/darunter.";
	display: block;
	background: #ffdd57;
	margin-bottom: 30px;
	padding: 20px;
}

body.loginregistrierung .mod_registration .fields {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

body.loginregistrierung .mod_registration .widget {
	width: 47%;
}

body.loginregistrierung .mod_login h2, body.loginregistrierung .mod_lostPassword h2, body.loginregistrierung .mod_registration h2 {
	margin: 0;
	font-size: 1.6rem;
	width: 100%;
}

body.loginregistrierung .mod_login label, body.loginregistrierung .mod_lostPassword label, body.loginregistrierung .mod_registration label {
	display: block;
	padding: 0 0 5px 20px;
	text-align: left;
}

body.loginregistrierung .mod_login input, body.loginregistrierung .mod_lostPassword input, body.loginregistrierung .mod_registration input, body.loginregistrierung select {
	display: block;
	padding: 13px 10px 10px 20px;
	 border-radius: 50px;
	 border: none;
	 width: 100%;
	 margin-bottom: 20px;
}

body.loginregistrierung .mod_login input[type=checkbox], body.loginregistrierung .mod_registration input[type=checkbox] {
	width: 20px;
	float: left;
	position: relative;top: 4px;
	left: -9px;
}

body.loginregistrierung .mod_login button, body.loginregistrierung .mod_lostPassword button, body.loginregistrierung .mod_registration button {
transition: all 0.3s ease; border-radius: 50px; background: var(--c-cta);
color: #FFF;
padding: 10px 20px;
border-radius: 100px;
margin: 20px 0;
display: table-cell;
border: 1px solid var(--c-cta);
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: 1.1rem;
letter-spacing: 0.5px;
margin: 0;
}

body.loginregistrierung .mod_login button:hover, body.loginregistrierung .mod_lostPassword button:hover, body.loginregistrierung .mod_registration button:hover {
background: #fff;
color: var(--c-cta);
border: 1px solid var(--c-cta);
cursor: pointer;
}

/* Wissenschaft & Forschung */

body.forschung .layout_latest h2 {
	font-size: 1.4rem;
	line-height: 2rem;
}

body.forschung .layout_latest strong {
	display: block;
	font-size: 0.9rem;
	color: rgb(52 66 84 / 60%);
	font-weight: normal;
	margin-bottom: -6px;
}

#artikel .layout_full .content-text.factbox h2 {
	background: var(--c-deep);
	padding: 5px 12px 6px;
	color: #fff;
	font-weight: normal;
	text-transform: uppercase;
	font-size: 1.2rem;
	margin: 0;
	width: 30%;
}

#artikel .layout_full .content-text.factbox p {
	border-left: 2px solid var(--c-deep);
	margin: 0;
	padding-left: 20px;
	padding-top: 15px;
	overflow: hidden;
}

#artikel .layout_full .content-text.factbox p:first-child {
	border-top: 2px solid var(--c-deep);
	width: 100%;
	padding-top: 14px;
}

#artikel .layout_full .content-text.factbox p:last-child {
	border-bottom: 2px solid var(--c-deep); padding-bottom: 20px;
}

#artikel .layout_full .content-text.factbox strong {
	display: block;
	font-size: 0.9rem;
	color: rgb(52 66 84 / 60%);
	font-weight: normal;
	margin-bottom: -6px;
}

/* Random Articles Module */

.mod_newslist.randomNews {background: var(--c-cream); margin-top: 0px; padding-top: 30px; margin-bottom: 0;}
	.mod_newslist.randomNews h4 {flex-basis: 100%; margin-top: 0;
		padding-top: 0;
		border: none;
		font-weight: 400;
		width: 100%;
		text-align: center;
		font-size: 1.7rem;
		color: var(--c-deep);
		margin: 10px auto 30px;
		border-radius: 10px;
		font-family: var(--font-display);
		font-style: italic;
		letter-spacing: 0.5px;}
	.mod_newslist.randomNews .layout_latest {flex-basis: 48%;}
		.mod_newslist.randomNews .layout_latest h2 {margin-top: 15px;}
		.mod_newslist.randomNews .layout_latest h2 a {font-size: 1.1rem;}
		.mod_newslist.randomNews .layout_latest .teaser p {display: none;}

/* Apps */

body.apps {}
body.apps .content-text, body.apps .content-text h2, body.apps .content-text p {text-align: center; width: 100%;}
body.apps .content-text img {width: 100px; border-radius: 18px;}

/* ABC der Schwangerschaft */

body.abc {}
body.abc .abcliste {background: white;}
	body.abc .abcliste p {width: 17%; margin: 5px 0;}	
	body.abc .abcliste p span {display: block; margin: 12px 0 6px; font-weight: 700;  border-bottom: 1px solid #DDD;}
	body.abc .abcliste p a {display: block;}	

/* Aktionen und Rabatte */

#aktionen-rabatte .mod_newslist .layout_latest {text-align: center; min-height: 520px;}
#aktionen-rabatte .mod_newslist .layout_latest img, #artikel .layout_full.aktionen-rabatte img {width: 90%; border: 1px dashed var(--c-cta); border-radius: 30px; margin: 15px 0;}
#aktionen-rabatte .mod_newslist .layout_latest p.more a {margin: 0px auto;}

#artikel .layout_full.aktionen-rabatte {overflow: hidden;}
#artikel .layout_full.aktionen-rabatte img {margin: 0;}
#artikel .layout_full.aktionen-rabatte .media--right figure {margin: 0; width: 100%; float: inherit;}
#aktionen-rabatte .mod_newslist .layout_latest .subheadline {color: #AAA;}
#artikel .layout_full.aktionen-rabatte .subheadline {display: none}

#artikel .layout_full.aktionen-rabatte .desc {background: var(--c-cream); min-height: 350px;}
#artikel .layout_full.aktionen-rabatte .desc img {width: 100%; margin-left: 6%;}

#artikel .layout_full.aktionen-rabatte .rabatt {color: #FFF; line-height: 4rem; display: inline-block; width: 49.8%; padding-bottom: 45px;}
#artikel .layout_full.aktionen-rabatte .rabatt h2 {font-size: 1.1rem; border: none; margin: 0 0 5px 0; padding: 0; line-height: 1rem; color: rgba(255, 255, 255, 1);}
#artikel .layout_full.aktionen-rabatte .rabatt p {font-size: 1.4em; line-height: 1rem; margin: 0; color: #FFF;}

#artikel .layout_full.aktionen-rabatte .rabatt.zeitraum {background-image: linear-gradient(120deg, #764ba2 0%, #667eea 100%);}
#artikel .layout_full.aktionen-rabatte .rabatt.code {background-image: linear-gradient(120deg, #f78ca0 0%, var(--c-cta) 19%, #fd868c 60%, #fe9a8b 100%);}
#artikel .layout_full.aktionen-rabatte .rabatt.hoehe {background-image: linear-gradient(120deg, #66a6ff 0%, #89f7fe 100%);}

#artikel .layout_full.aktionen-rabatte .rabatt.link {background-image: linear-gradient(120deg, #00c1a2 0%, #8ddad5 100%);}
#artikel .layout_full.aktionen-rabatte .rabatt.link a:link, #artikel .layout_full.aktionen-rabatte .rabatt.link a:visited {background: rgba(255, 255, 255, 0.2); border-bottom: rgba(255, 255, 255, 0.6); padding: 5px 12px; text-align: center; border-radius: 3px; font-size: 0.7em; color: #fff;}
#artikel .layout_full.aktionen-rabatte .rabatt.link a:hover {background: #fff; color: #444; }

/* Artikelansicht */

#artikel .layout_full {}
	body #artikel .layout_full h1 {text-align: center; width: 100%; font-weight: 700; font-size: 2.2rem; line-height: 2.5rem; color: var(--c-deep); padding-bottom: 30px; padding-top: 130px; margin: 0 0 -10px 0;  font-family: var(--font-display); font-weight: 700; font-style: italic; letter-spacing: 0.7px; padding: 130px 10vw 0; background-color: var(--c-cream);}   
	#artikel .layout_full img {border-radius: 3px 0 0 3px; margin: 60px 0 20px 60px; float: right; max-width: 45%;}
	#artikel .layout_full .content-image {/*margin: 15px 0 25px 0;*/ position: relative;}
	#artikel .layout_full .content-image figcaption {font-size: 0.75rem; color: #888; position: absolute; right: 20px; top: 40px;}
	#artikel .mod_newsreader .layout_full .content-text em {color: var(--c-cta); display: block; font-weight: normal; font-size: 1em; background: rgba(249, 116, 143, 0.15); padding: 20px 30px; border-radius: 10px; width: 70%; margin: 25px auto;}
	
	#artikel .mod_newsreader .layout_full .content-text.pageAdvertorial em {
		background: none; padding: 0; color: var(--c-deep); width: 100%; margin: 0;
	}

#artikel .layout_full .vita34desktop img {border-radius: 0; margin: 0 0 10px 0;}

.mod_article {margin-bottom: 0px;}

#main .sharebuttons {background: var(--c-cream); width: 100%; display: block; }
	#main .sharebuttons ul {text-align: center; width: 20%; margin: 40px 40% 0px; display: flex; justify-content: center;}
	#main .sharebuttons ul li a {border-radius: 30px;}
	
	#main .mod_article .sharebuttons ul {padding: 30px 0 0px 0; margin-top: 0px;}

#artikel img {border-radius: 10px;}
.mod_article#artikel figcaption {text-align: center; padding-top: 10px;}

/* Expertenbox * Review */

.review {margin: 60px auto; text-align: center; max-width: 40%; padding: 0; background: none;}
.review p {color: var(--c-deep); font-style: italic; margin-bottom: 5px;}
.review p strong {font-style: normal;}
.review figure, .sswAnsicht .mod_article .review figure {margin: 0;}
.review img, #artikel .review img {float: none; width: auto; margin: 0; max-width: 170px; margin-bottom: 5px; border: 3px solid rgba(77, 91, 109, 0.2); border-radius: 200px; padding: 3px;}    
.review h4 {border: none; padding: 0 0 25px 0;}

#artikel .layout_full.interviews .content-text:nth-child(n/**/+4) p:first-child {border-bottom: 3px solid rgba(249, 116, 143, 0.2); padding-bottom: 10px !important; color: #dc677f; font-weight: 600;}
#artikel .layout_full.interviews .content-text:nth-child(n/**/+4) p:first-child strong {color: var(--c-deep);}
#artikel .layout_full.interviews .content-text:first-child p {color: var(--c-deep); font-weight: normal;}

#artikel .layout_full.interviews .content-text:nth-child(n/**/+4) .insideArticle p:first-child strong {color: #FFF;}

/* Produkttest */

#produkttest .layout_latest {min-height: 530px;}

	#produkttest .layout_full h1 {padding-bottom: 30px; margin: 0 auto; background: var(--c-cream); padding-left: 15%; padding-right: 15%;}
	#produkttest .layout_full h2 {}
	#produkttest .layout_full img {border-radius: 3px; float: left; margin: 0 30px 30px 0; max-width: 500px;}
	#produkttest .layout_full .content-image {margin: 15px 0 25px 0;}
	
	.interview#produkttest .layout_full .content-text {padding-top: 0px;}
	.interview#produkttest .layout_full .content-image {position: relative;}
		.interview#produkttest .layout_full img {border-radius: 3px 0 0 3px; margin: 60px 0 20px 60px; float: right; max-width: 45%;}
		.interview#produkttest .layout_full .content-text:nth-child(3) {margin-bottom: 50px; padding-top: 20px;}
				.interview#produkttest .layout_full p em {color: #dc677f; font-weight: 600;}

#produkttest .layout_full .content-text.interview {}
	#produkttest .layout_full .content-text.interview img {float: right; margin: 0 0 30px 30px; max-width: 500px;}

#produkttest .layout_full .content-text.interview p em, body.neuheiten .interview p em {color: #dc677f; font-weight: 600;}
#produkttest .layout_full .content-text.interview p em strong, body.neuheiten .interview p em strong {color: var(--c-deep);}
#produkttest .layout_full .content-text.interview p, body.neuheiten .interview p {font-weight: normal;}

#produkttest .layout_full .content-text .rat {text-align: center; font-style: italic; background: #FFF; padding: 10px 15px; margin-bottom: 15px;}

#produkttest .layout_full .content-text.fazit {}

#produkttest .layout_full .content-text.company {background: #FFF; margin-bottom: 50px;}
	#produkttest .layout_full .content-text.company img {max-width: 200px; padding-top: 40px;}

#produkttest .layout_full .content-text.specs {background: rgba(216, 216, 216, 0.2);}
	#produkttest .layout_full .content-text.specs ul {margin: 0; padding: 0;}
	#produkttest .layout_full .content-text.specs ul li {border-left: 0; background: #FFF; font-size: 0.9rem; display: inline-block; width: 48%; border-radius: 4px; vertical-align: top;}

#produkttest .layout_full .content-text.interview h2, body.neuheiten .interview h2 {color: #dc677f;}
#produkttest .layout_full .content-text.fazit h2 {color: #dc677f;}
#produkttest .layout_full .content-text.company h2 {color: #444;}

body.neuheiten .interview.circle .media--right figure {float: right; text-align: right; width: 225px; text-align: right; position: relative; top: -50px; background: #db677f; border-radius: 300px;}
body.neuheiten .interview.circle img {width: 200px; border-radius: 200px;}

body.neuheiten .elterncheck.circle .media--right figure {float: right; text-align: right; width: 225px; text-align: right; position: relative; top: -50px; background: #db677f; border-radius: 300px;}
body.neuheiten .elterncheck.circle img {width: 200px; border-radius: 200px;}

/* Produktneuheiten */

body.neuheiten .content-image {		position: relative;}
body.neuheiten .content-image img {border-radius: 3px 0 0 3px; margin: 60px 0 20px 60px; float: right; max-width: 45%;}
body.neuheiten .content-gallery {margin-top: 60px;}
body.neuheiten .content-youtube {margin-top: 30px; }
body.neuheiten .mod_article h1 {padding-top: 80px; margin-top: 0;}
body.neuheiten .mod_article .layout_full  h1 {padding-top: 30px;	padding-left: 15vw;
	padding-right: 15vw;
	line-height: 3.2rem;}

/* Produkttest & Interview & Co. */

#produkttest .content-gallery {background: var(--c-deep); padding: 40px 15px 30px 15px; margin-bottom: 40px;}
	#produkttest .content-gallery img {border-radius: 3px; margin-bottom: 15px; max-width: none; float: none; margin: 0; width: 100%;}
	#produkttest .content-gallery h2 {color: #FFF; text-align: center; width: 100%;}
	#produkttest .content-gallery>ul  {display: flex; flex-wrap: nowrap; justify-content: space-between;}
	#produkttest .content-gallery li  {width: 24%;} 
	#produkttest .layout_full .content-text.company h2, #produkttest .layout_full .content-text.specs h2 {border: none;}
	#produkttest .videoWrapper p {margin: 0 auto 30px; max-width: 70%;}

.interview#produkttest .layout_full .content-gallery img {border-radius: 4px;}

figcaption {margin-top: 0;}

/* Gallery im Artikel Default */

.content-gallery {background: var(--c-deep); padding: 40px 15px 30px 15px; margin-bottom: 40px;}
	#artikel .content-gallery img {border-radius: 3px; margin-bottom: 15px; max-width: none; float: none; margin: 0; width: 100%;}
	.content-gallery h2 {color: #FFF; text-align: center; width: 100%;}
	.content-gallery>ul  {display: flex; flex-wrap: nowrap; justify-content: space-between;}
	.content-gallery li  {width: 24%;} 

/* Checklisten & Beikostrezepte */

.content-download {flex-basis: 46%; margin-bottom: 20px; margin-top: 0;}
.content-download a:link, .content-download a:visited {background: #FFF url("/files/design/_icons/downloadPfeil3.svg") 0 50% no-repeat; border-radius: 3px; border: 1px solid var(--c-deep)4a; width: 100%; display: block; color: var(--c-deep);font-size: 1rem;padding: 12px 0 10px 60px; background-size: 43px;}
.content-download a:hover {background: var(--c-deep) url("/files/design/_icons/downloadPfeil3.svg") 0 50% no-repeat; background-size: 43px; color: #FFF;}
.content-download span.size, .content-download img.mime_icon  {display: none;}

/* Gewinnspiel - Theme */

body.gewinnspiel #container .mod_article .content-text:nth-child(2), body.gewinnspiel #container .mod_article .content-text:nth-child(3) {background: var(--c-cream);}

body.gewinnspiele .hubmodules .content-text {position: relative; padding-bottom: 30px;}
.hubmodules .content-text p.aktionVorbei {
	background: #d9dee2; border-radius: 0 8px 8px 0px; display: inline-block; position: absolute; bottom: 0px; left: 0; font-size: 1rem; padding: 10px 20px 10px 20px; margin-top: -10px;
}

/* Umfrageseite */

body.umfrageseite .content-text.mamtop figure {
	width: 30vw;
	margin-left: 100px;
}

body.umfrageseite h1 {
	line-height: 4rem;
}

/* Häufige Fragen */

	#haeufige-fragen-und-antworten .sharebuttons {padding-bottom: 40px;}
	#haeufige-fragen-und-antworten .layout_full p {color: var(--c-deep);}

	#haeufige-fragen-und-antworten .siteBoxes:nth-child(4) {margin-right: 50px;}
	#haeufige-fragen-und-antworten .siteBoxes:nth-child(6) {margin-right: 0;}
	
	#haeufige-fragen-und-antworten .ce_comments h2 {background: var(--c-cream);}

#haeufige-fragen-und-antworten .mod_newsreader p.back {display: none;}

/* Pagination */

.pagination {margin-bottom: 20px; width: 100%;}
	.pagination p {visibility: hidden; height: 0;}
	.pagination ul {padding-left: 0;}
	.pagination ul li {display: inline-block; margin-bottom: 10px; margin-right: 5px;}
	.pagination ul li a:link, .pagination ul li a:visited {	background: #FFF;
		color: var(--c-cta);
		border-radius: 3px;
		padding: 4px 10px 6px 10px;
		transition: all 0.3s ease;
		letter-spacing: 0;}
	.pagination ul li a:hover {background: var(--c-cta); color: #FFF; cursor: pointer;}
	.pagination strong.active {display: inline-block; color: #FFF; border-radius: 3px; padding: 1px 11px 1px 11px; position: relative; background: var(--c-cta); top: 1px;}

/* Booknav */

.mod_booknav {text-align: center; background: #FFF; padding: 50px 0;}
	.mod_booknav ul {margin: 0; padding: 0; text-align: center;}
	.mod_booknav ul li {list-style: none; display: inline-block;}
	.mod_booknav ul li a:link, .mod_booknav ul li a:visited {border: none; margin-bottom: 10px; background: var(--c-cta); font-size: 1em; line-height: 1.4em; padding: 10px 20px; color: #212121; border-radius: 3px; text-align: center; font-weight: normal; display: block; text-align: center; margin-top: 20px; color: #FFF; display: inline-block; transition: all 0.3s ease; border-radius: 0; background: var(--c-cta);
		color: #FFF;
		padding: 10px 20px;
		border-radius: 100px;
		margin: 20px 0;
		display: table-cell;
		border: 1px solid var(--c-cta);
		font-family: var(--font-display);
		font-style: italic;
		font-weight: 400;
		font-size: 1.1rem;
		letter-spacing: 0.5px;}
	.mod_booknav ul li a:hover {background: #fff; color: var(--c-cta);}

/* Download Box */
.downloadBox {margin: 0; background: #FFF; color: #333; text-align: center; border-radius: 3px; padding: 15px 0; font-weight: 400; line-height: 2rem;}
	.downloadBox h2 {margin: 0;}
	.downloadBox a:link, .downloadBox a:visited {width: 100%; border-bottom: 1px solid #ffe4e4; box-shadow: inset 0 -1px 0 #ffe4e4; text-align: center; max-width: fit-content; margin: 0 auto;}
	.downloadBox a:hover {background: #FFF;}

/* Buecher */

body.buch .content-text figure {perspective: 700px; width: 150px; margin: 30px 30px 30px 0;}
body.buch .content-text img {border-radius: 4px; box-shadow: 0 0 10px #DDD; transform: rotateY(25deg);}

/* Kindernamen */

.laender {background: #FFF !important; padding: 10px; border-radius: 3px; /* margin: 40px 0 60px; */ display: flex; justify-content: space-between; padding-top: 50px !important; padding-bottom: 50px !important; flex-wrap: wrap;}
	.laender h2 {width: 100% !important; text-align: center; margin-bottom: 10px; font-weight: 700; font-size: 2.2rem; line-height: 2.5rem; margin: 0 0 30px 0;}
	.laender div {width: 17%;}
	.laender h3 {font-size: 1.2rem; margin: 20px 0 10px 0; font-weight: normal; font-family: var(--font-body); text-align: left; color: var(--c-deep);}
	.laender ul {padding: 0;}
	.laender ul li {margin: 0; list-style: none inside; list-style-image: none; border-left: 0; background: none; border-radius: 0; line-height: 1.8rem;}
	.laender ul li a:link, .laender ul li a:visited {color: var(--c-deep); 	border: none;
		background: #fff5f5;
		border-radius: 30px;
		padding: 6px 14px 6px 8px;}
	.laender ul li a:hover {color: var(--c-cta);}
	.laender ul li img {vertical-align: baseline;}
	.laender .two {margin-top: 70px;}

.ce_accordion {margin-bottom: 0px;}
.toggler {	border-radius: 3px;
	cursor: pointer;
	padding: 10px 15px;
	color: var(--c-deep);
	background: var(--c-deep)1f;
	font-size: 1.1rem;}
.toggler:hover {background: #FFF;}
.accordion.ui-accordion-content {background: #fff; padding: 0 20px 2px 20px;}

.girlslist {display: inline-block; width: 49%; vertical-align: top; background: transparent url(/files/design/_icons/namesGirls.svg) 5px 25px / 30px auto no-repeat;}
.boyslist {display: inline-block; width: 49%; vertical-align: top; background: transparent url(/files/design/_icons/namesBoys.svg) 5px 25px / 30px auto no-repeat;}
.girlslist ol, .boyslist ol {padding-left: 65px; padding-top: 0; margin-top: 20px;}
.girlslist li, .boyslist li {border-bottom: 1px solid #DDD; line-height: 1.9rem; color: var(--c-deep); padding-left: 30px;}
.mod_article .girlslist h2, .mod_article .boyslist h2 {	color: var(--c-deep);
	padding-left: 45px;
	font-weight: normal;
	font-family: var(--font-body);
	font-size: 1.3rem;
	margin: 15px 0 10px 30px;
	font-style: normal;}

body.namen .content-text:nth-child(2) {background: var(--c-cream);}

/* Timeline */

#timeline .timelineLeft {width: 60%; display: block;}
#timeline .timelineLeft ul {margin-left: 0; padding-left: 0;}
#timeline .timelineLeft ul li {border-right: 25px solid rgba(243, 105, 104, 0.3); border-left: none; margin-left: 0;}

#timeline .timelineLeft.box li, #timeline .timelineRight.box li {background: none; border: none;}
#timeline .timelineLeft.box h2, #timeline .timelineRight.box h2 {padding-left: 20px;}

#timeline .timelineRight {margin-left: 40%; width: 55%; display: block;}
#timeline .timelineRight ul {margin-left: 0; padding-left: 0;}
#timeline .timelineRight ul li {border-left: 25px solid rgba(243, 105, 104, 0.3); border-right: none; margin-left: 0;}

#timeline li.babyforum {border-color: rgba(114, 190, 225, 0.3); background: rgba(114, 190, 225, 0.1);}
#timeline .timelineLeft ul li.babyforum, #timeline .timelineRight ul li.babyforum {border-color: rgba(114, 190, 225, 0.3);}
#timeline ul li.babyforum a:link, #timeline ul li.babyforum a:visited {color: rgba(114, 190, 225, 1);}

/* Timeline 2 */

body.timeline #main {}
	body.timeline .mod_subscribe {position: relative; z-index: 10000;}
	body.timeline hr {height: 200px;}

.se_timeline {position: relative; margin-bottom: 100px;}
.subhub.timeline  .content-text:nth-child(2) {background: none;}

	.se_timeline .content-text.item {width: 45%; position: relative; text-align: right; margin-left: 5%; padding-right: 5%; clear: both; float: left; margin-bottom: -70px; padding-top: 15px; background: #FFF; padding-left: 3%; 	border-right: 1px solid rgba(77, 91, 109, 0.7);}
		.se_timeline .content-text.item:first-child {}
		.subhub .se_timeline .item:nth-of-type(2n) {float: right; text-align: left; padding-left: 5%; padding-right: 0; margin-right: 5%; padding-right: 3%; background: #FFF; 	border-right: none; 	border-left: 1px solid rgba(77, 91, 109, 0.7); position: relative; left: -1px;}
			/* .se_timeline:before {content: ""; width: 2px; background: rgb(152,152,152); position: absolute; top: 30px; left: 50%; height: 3000px; margin-left: -2px; z-index: 10; background: rgba(77, 91, 109, 0.7);}    */
	
	.se_timeline .content-text.item p {padding: 12px 16px; }
		.se_timeline .content-text.item p.text {margin-bottom: -13px; background: #FFF; border-radius: 3px; border-radius: 3px;
			background: #FFF;
			box-shadow: 0px 0px 5px var(--c-deep)26;}
			.se_timeline .content-text.item p.text h3 {font-family: var(--font-display);
				font-size: 1.15rem;
				line-height: 1.4rem;
				font-weight: 500;
				border: none;
				font-style: italic;}
		.se_timeline .content-text.item p.link {background: rgba(255, 255, 255, 0.5); border-radius: 3px; padding-right: 10px;}
		.se_timeline .content-text.item p.link a {	padding-right: 30px;
			padding-left: 7px;
			line-height: 35px;
			background: #fff url(/files/design/_icons/pinkArrowRight.svg) 100% 51% / 20px auto no-repeat;}
	.se_timeline .content-text.item img {margin-top: 15px; margin-bottom: 0px; border-radius: 3px; width: 60%;}
		.se_timeline .content-text.item.smallimg img {margin-top: 15px; margin-bottom: -12px; border-radius: 3px; float: right; margin: 28px 10px 20px 20px; width: 82px;}

.se_timeline .content-text.item p.dot {background: var(--c-deep); width: 10px; height: 10px; border-radius: 100%; position: absolute; right: 0; top: 9px; margin-right: -5px; padding: 0;}
		.se_timeline .content-text.item:nth-of-type(2n) .dot {right: auto; left: -6px;}

.se_timeline .content-text.item h2 {font-size: 1.1rem; line-height: 1.5rem; font-weight: normal; background: var(--c-deep); color: rgb(255,255,255); display: inline-block; padding: 7px 12px; border-radius: 3px; margin-top: -5px; margin-bottom: 0px; width: fit-content;}
	.se_timeline .content-text.item h2:before {content: ""; position: absolute; right: 0; top: 29px; height: 1px; background: rgba(77, 91, 109, 0.3); width: 12%;}    
		.se_timeline .content-text.item:nth-of-type(2n) h2:before {left: 0; right: auto; top: 30px;}

fieldset {border: none;}

.information {font-size: 1em; color: #AAA; text-align: center; text-decoration: underline;}
.mod_article .content-text.sswAdvertorial .information, .advertorialMark .information {text-align: right;}

/* Verzeichnis Neu */

.grid {padding-top: 0 !important;}

body #verzeichnis .content-text.grid {display: flex; justify-content: space-between; flex-wrap: wrap; background: var(--c-cream);}
	body #verzeichnis .content-text.grid .content-image {padding: 0; width: 47%; position: relative; overflow: hidden; border-radius: 3px; margin-bottom: 40px;}
	body #verzeichnis .content-text.grid .content-image h2 {position: absolute; z-index: 10; font-size: 1.4rem; background: rgba(255, 255, 255, 0.9); line-height: 1.4rem; padding: 13px 20px; width: fit-content; border-radius: 3px 0 3px 0;}
	body #verzeichnis .content-text.grid .content-image img {position: relative; z-index: 8; width: 100%; border-radius: 3px; transition: all .15s ease-out; cursor: pointer;}
	body #verzeichnis .content-text.grid .content-image img:hover {transform: scale(1.05); cursor: pointer;}

body.verzeichnisseite .filter {background: var(--c-cream); padding-bottom: 40px; justify-content: flex-start; flex-wrap: wrap; column-gap: 50px;}
	body.verzeichnisseite .filter h3 {color: var(--c-text-muted); border: none;}
	body.verzeichnisseite .filter button {background: #FFF; color: var(--c-deep); border: none; letter-spacing: 1px; cursor: pointer; margin-right: 4px; margin-bottom: 7px; border-radius: 3px;}
	body.verzeichnisseite .filter button:hover {background-color: rgba(126, 150, 179, 0.2); cursor: pointer;}
	body.verzeichnisseite .filter button.is-checked {background: var(--c-deep) !important; color: #FFF;}
	body.verzeichnisseite .content-text:last-child {margin-top: 70px; border-bottom: 2px solid var(--c-cream);}
	body.verzeichnisseite .grid .content-text:last-child {margin-top: 0px; border-bottom: none;}	

body.verzeichnisseite .grid {display: flex; justify-content: space-between; background: var(--c-cream); padding-bottom: 50px; flex-wrap: wrap;}
body.verzeichnisseite .grid .content-text { width: 22%; padding: 25px; background: #FFF; min-height: 240px; margin-right: 2%; margin-bottom: 25px;}
	body.verzeichnisseite .grid .content-text:nth-child(1) {text-align: left;}
	body.verzeichnisseite .grid .content-text:nth-child(3n) {margin-right: 0;}
	body.verzeichnisseite .grid .content-text h2 {font-size: 1.3rem; line-height: 1.5rem; width: 100%; padding-bottom: 0; margin-bottom: 20px;}
	body.verzeichnisseite .grid .rte {display: contents;}
	body.verzeichnisseite .grid .content-text p {} 
	body.verzeichnisseite .grid .content-text p:last-child {bottom: 4px; padding: 10px 7px; position: absolute;}
	body.verzeichnisseite .grid .content-text p:last-child:empty {display: none;}
	
	.verzeichnis_disclaimer {font-size: 0.8rem; text-align: center; margin: 35px 20% 0 20%; color: var(--c-deep);}

body.verzeichnisseite .grid.foto .content-text {width: 25.5%; padding: 0 0 25px 0; display: flex; flex-wrap: wrap;}
	body.verzeichnisseite .grid.foto .content-text h2 {order: 2; width: 100%; padding: 25px 25px 0 25px;}
	body.verzeichnisseite .grid.foto .content-text figure {order: 1; margin: 0; border-radius: 3px 3px 0 0;}
	body.verzeichnisseite .grid.foto .content-text figure img {border-radius: 3px 3px 0 0; width: 100%;}
	body.verzeichnisseite .grid.foto .content-text p {width: 100%; padding: 0 25px; order: 3;}	
	body.verzeichnisseite .grid.foto .content-text p:last-child {order: 4; position: relative; margin: 0 25px; padding: 10px 0px;}
	
	body.verzeichnisseite .grid.foto .content-text p em {font-size: 0.8rem;
		background: #ddd;
		display: inline-block;
		border-radius: 4px;
		padding: 3px 10px; margin-bottom: 4px;
	background-color: rgba(126, 150, 179, 0.1);
color: var(--c-deep);}
	
body.verzeichnisseite .content-text.partner:nth-child(2), .content-text.partner:nth-child(2) {background: var(--c-cream); padding-top: 0; padding-bottom: 30px;}
	body.verzeichnisseite .content-text.partner a {display: block; border-radius: 10px;}
		body.verzeichnisseite .content-text.partner a img {width: 50%;}

body.verzeichnisseite .grid.kliniken .content-text {min-height: 330px;}

body.verzeichnisseite .grid.kliniken .content-text.babyfriendly:before {
	content: "";
	width: 62px;
	display: block;
	position: absolute;
	top: 18px;
	right: -28px;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	border-left: 30px solid transparent;
	border-right: 30px solid transparent;
	border-bottom: 30px solid #F9748F;
	height: 0;
}

body.verzeichnisseite .grid.kliniken .content-text.babyfriendly:after {
	content: "Baby-friendly";
	font-size: 0.6rem;
	font-weight: bold;
	color: #FFF;
	text-transform: uppercase;
	text-align: center;
	line-height: 30px;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	width: 75px;
	display: block;
	position: absolute;
	top: 18px;
	right: -5px;
	height: 23px;
}

body.verzeichnisseite .grid .content-text.premium:before, body.verzeichnisseite .grid .content-text.rabatt:before, body.verzeichnisseite .grid .content-text.baby:before  {
	content: "";
	width: 62px;
	display: block;
	position: absolute;
	top: 18px;
	right: -28px;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	border-left: 30px solid transparent;
	border-right: 30px solid transparent;
	border-bottom: 30px solid #F9748F;
	height: 0;
	color: #FFF;
}

body.verzeichnisseite .grid .content-text.premium:after, body.verzeichnisseite .grid .content-text.rabatt:after {
	content: "";
	font-size: 0.6rem;
	font-weight: bold;
	color: #FFF;
	text-transform: uppercase;
	text-align: center;
	line-height: 30px;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	width: 75px;
	display: block;
	position: absolute;
	top: 18px;
	right: -5px;
	height: 23px;
}

body.verzeichnisseite .grid .content-text.rabatt:before, body.verzeichnisseite .grid .content-text.baby:before {
	border-bottom: 30px solid #F2CD5D;
}

body.verzeichnisseite .grid .content-text.rabatt:after {
	content: "Rabatt";
	position: absolute;
	right: 8px;
	rotate: 44deg;
	top: 19px;
	color: #FFF;
	font-weight: 600;
}

body.verzeichnisseite .grid .content-text.premium:after {
	content: "Premium";
	position: absolute;
	right: 0px;
	rotate: 44deg;
	top: 21px;
	color: #FFF;
	font-weight: 600;
}

body.verzeichnisseite .grid .content-text.baby:after {
	content: "Baby";
	position: absolute;
	right: 12px;
	rotate: 44deg;
	top: 20px;
	color: #FFF;
	font-weight: 600;
}

/* AR Liste */

body.ar .hubhead {padding: 130px 0 0 14%;}

model-viewer {	animation-delay: 5s; width: 100%; height: 750px;
	animation: aRnimate 10s ease infinite; background: transparent url(https://arkid.app/_clients/myjunior/icons/blueCircle.svg) center center no-repeat; background-size: 40%;}
	
@keyframes aRnimate {
	20% { background: #fff; }
	 50% { background: #DDE1E6;}
	 80% {background: #fff; }	 
}		

.argrid { background: #DDE1E6; padding-bottom: 100px;}
	.argrid .slidii {display: flex; justify-content: space-between;}
	.argrid .card {width: 31%; margin-bottom: 25px; margin-bottom: 30px; background: #FFF; border-radius: 3px; padding: 20px 20px 0;}
	.argrid .card img {border-radius: 10px;}
	.argrid .card h2 {margin: 15px 0 0 0; padding-bottom: 0; font-family: var(--font-body); font-size: 1.15rem; line-height: 1.4rem; font-weight: 700; border: none;}
	.argrid .card p {margin-top: 0; 	padding:15px 0;line-height: 1.6rem;}	
	.argrid .card button {	background: #fff; color: var(--c-deep); padding: 3px 10px 11px; border-radius: 10px; cursor: pointer; font-family: var(--font-body); letter-spacing: 0.5px; text-transform: uppercase; border: 1px solid var(--c-deep); border-bottom: 3px solid var(--c-deep); margin: 0 10px 10px 0; transition: all 0.4s;}
	.argrid .card button:hover {background: var(--c-deep); color: #FFF;}
		.argrid .card button span {display: inline-block; width: 20px; height: 20px; border-radius: 100%; position: relative; top: 5px; margin-left: 0px; margin-right: 4px;border: 1px solid #FFF;}
body.ar  .argrid .card a:link, body.ar  .argrid .card a:visited {padding: 10px 7px; border-bottom: 2px solid rgba(249, 116, 143, 0.2);		}	
body.ar  .argrid .card a:hover {color: var(--c-deep); border-bottom: 2px solid var(--c-deep);}
body.ar  .argrid .tag {font-size: 0.8rem; border-radius: 4px; padding: 3px 10px; margin-top: 12px; background-color: rgba(126, 150, 179, 0.1); color: var(--c-deep); float: right;}
			
body.ar .slider-control {margin-bottom: 100px;}
body.ar .slider-control .slider-menu {font-size: 2.2rem;}			
	body.ar .slider-control .slider-menu b {margin: 0 10px;}

/* SIEGEL Seite */

.babyshopsCode textarea {width: 400px; height: 160px; border-radius: 10px; border: 1px solid #DDD; padding: 20px; margin: 0 auto; line-height: 1.4rem;}

/* Verzeichnis Eintrag */

	#f4 .formbody {display: flex; flex-wrap: wrap; justify-content: space-between;}
	#f4 .widget {width: 47%; margin-bottom: 20px;}
	#f4 .widget.widget-explanation {width: 100%; margin-top: 20px; margin-bottom: 20px;}
	#f4 .widget.widget-explanation h2 {margin-bottom: 0; padding-bottom: 0; width: 100%;}
	#f4 .widget.widget-select select {width: 100%;}
	#f4 .widget.widget-textarea {width: 100%;}
	#f4 label {margin: 5px 0 15px 5px; font-size: 0.9rem; vertical-align: top; display: block; color: rgba(255, 255, 255, 0.6);}
	#f4 input {border-radius: 3px; border: 0; font-size: 1em; padding: 7px 8px; width: 100%; display: block; color: var(--c-deep); border: 1px solid var(--c-text-muted);}
	#f4 textarea {padding: 7px 8px; border: none; border-radius: 3px; width: 100%; color: var(--c-deep); border: 1px solid var(--c-text-muted); width: 100%;}
	#f4 .captcha {width: 50px; float: left; margin-right: 13px;}
	#f4 button.submit {cursor: pointer; font-size: 1.1em; margin: 0 auto; width: 300px; background: rgba(249, 116, 143, 0.7); color: #FFF; font-size: 1.2rem; padding: 8px 12px; border: none; border-radius: 4px;}
	#f4 button.submit:hover {background: rgba(249, 116, 143, 1); color: #FFF;}

/* Impressum */

.showADmobile {display: none;}
.showADdesktop {background: var(--c-deep); padding: 14px 5% 2px; text-align: center;}
	.showADdesktop img {border-radius: 10px; max-width: 1020px;}
	
	.showADdesktop img, 	.showADmobile img {background: #FFF;}

/* Datenschutzerklärung */

#iub-pp-container {background: #fff; text-align: left; font-size: 0.8rem; padding-top: 25px; padding-bottom: 25px;}
	.iubenda_legal_document {padding-left: 20%; padding-right: 20%}

/* Formulare */

.ce_form {
	padding-bottom: 50px;
}

.ce_form .widget-text input, .ce_form select {
	padding: 13px 10px 10px 20px;
	border-radius: 30px;
	border: none;
	margin-bottom: 20px;
	width: 100%;
}

.ce_form select {
	width: 100%;
}

.ce_form .umfrage-danke .formbody {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.ce_form .umfrage-danke legend {
	color: var(--c-deep);
	width: 100%;
	font-weight: bold;
	position: relative;
	top: -20px;
}

.ce_form .umfrage-danke label {
	margin-right: 13px;
}

.ce_form .umfrage-danke .formbody div {
	flex-basis: 32%;
}

.ce_form .umfrage-danke .formbody div:nth-child(9) {
	flex-basis: 100%;
}

.ce_form .umfrage-danke .formbody .checkbox_container {
	background: #FFF;
	border-radius: 30px;
	padding: 11px 30px 10px 20px;
	margin-bottom: 20px;
	margin-top: 15px;
}

.ce_form .umfrage-danke .formbody button.submit {
	display: block;
	padding: 10px;
	background: var(--c-cta);
	color: #FFF;
	max-width: fit-content;
	padding: 10px 20px;
	border-radius: 100px;
	transition: all 0.3s ease;
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 400;
	font-size: 1.1rem;
	letter-spacing: 0.5px;
	border: 1px solid var(--c-cta);
	margin: 0 auto 40px auto;
}

/* Artikel in der App */

#gewinnspiel h1 {text-align: center; margin: 30px 0 -10px 0; line-height: 1.5em; font-size: 3em;}
#gewinnspiel h2 {text-align: center;}
#gewinnspiel .content-image img, .content-image.bild img {border-radius: 3px;}
.content-image.bild {display: inline-block; margin-right: 18px;}
.content-image.bild.drei {margin-right: 0;}

.authorbox {border: 2px solid #efefef; padding: 0 25px 5px 25px; display: block; border-radius: 3px;}

.media--right figure {float: right; margin: 0 0 30px 30px; width: 350px; width: fit-content; text-align: right;}
figcaption {font-size: 0.9rem; color: var(--c-text-muted); line-height: 1.5rem; text-align: center; margin-top: 20px; margin-bottom: 25px;}

/* Rechner */
.content-text.rechnerErgebnisse {padding: 0; padding-bottom: 0px !important;}
	.content-text.rechnerErgebnisse .calculator {padding: 80px;	 background-image: linear-gradient( to bottom, rgb(255 241 242) 26%, rgba(182, 223, 241, 0.8) );}
	.content-text.rechnerErgebnisse .calculator h3 {margin-top: 0;text-align: center;
		font-weight: 700;
		font-size: 2.2rem;
		line-height: 2.8rem;
		color: var(--c-deep);
	display: block; border: none;
		}
		.content-text.rechnerErgebnisse .calculator h3 span {display: inline;}
	.content-text.rechnerErgebnisse .calculator h2 {width: 100%;}
	.content-text.rechnerErgebnisse .calculator .form-group {margin-bottom: 20px;}
	.content-text.rechnerErgebnisse .calculator div label {margin: 25px 0 15px; display: block; font-weight: bold;}
	.content-text.rechnerErgebnisse .calculator .select ul li {background: #fff; border-radius: 0; border: none; margin: 0; padding: 3px 0; line-height: 40px; font-size: 0.9rem;}
	.content-text.rechnerErgebnisse .calculator .select ul li:hover {background-color: rgba(126, 150, 179, 0.2);}
	
	.content-text.rechnerErgebnisse .calculator .select .datepicker-panel ul li {background: #fff;
		border-radius: 0;
		border: none;
		margin: 0;
		padding: 0px 0 0px;
		line-height: 32px;
		display: table;}
.content-text.rechnerErgebnisse .calculator .select .datepicker-panel ul li.highlighted {font-weight: bold;}		
	
	.content-text.rechnerErgebnisse .calculator input[type="radio" i] {float: left;}

/* Video Wrapper */
.videoWrapper h2 {}
.videoWrapper div {margin-bottom: 35px; line-height: 1.7em; font-family: var(--font-body); font-weight: bold;}
.videoWrapper p {position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 0; height: 0; margin: 0 0 30px;}
.videoWrapper iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #333; padding: 5px; border-radius: 10px;}

.videoWrapper {background: #fff; padding-bottom: 30px;}
#main .videoWrapper {position: relative; margin: 20px auto 50px; width: 85%; display: block; height: auto;}

.videoWrapper iframe.corona {min-height: 500px; max-width: 800px;}

#main .content-youtube .videoWrapper {
	position: relative;
	  padding-bottom: 56.25%; /* 16:9 */
	  padding-top: 25px;
	  height: 0;
}

/* Videos-Bereich */

.videobereich #main .left {float: left; max-width: 40%; display: inline-block; margin-right: 8%; padding-right: 0; background: #fff; }
.videobereich #main .left h2 {width: 100%;}
.videobereich #main .videoWrapper {width: 52%; padding-bottom: 315px; display: inline-block; -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); border-radius: 7px; overflow: hidden; width: 35%; margin-top: 53px; position: relative;} 
.videobereich #main .videoWrapper iframe {height: 315px;}

.videobereich #main .mod_navigation {margin-bottom: 50px; text-align: center; background: #FFF;}
	.videobereich #main .mod_navigation ul {padding: 20px 0; margin: 0; line-height: 3rem;}
	.videobereich #main .mod_navigation ul li {display: inline-block; list-style: none;    height: auto;}
	.videobereich #main .mod_navigation ul li a:link, .videobereich #main .mod_navigation ul li a:visited, .videobereich .mod_navigation ul li span.active {padding: 8px 16px; background: #FFF; margin: 0 5px; border-radius: 50px; border: 1px solid var(--c-deep); color: var(--c-deep);letter-spacing: 0px;}
	.videobereich #main .mod_navigation ul li a:hover {background: #DDD;}
	.videobereich #main .mod_navigation ul li strong.active, .videobereich #main .mod_navigation ul li strong.forward {background: var(--c-deep); color: #FFF; border: 1px solid var(--c-deep); padding: 8px 16px; margin: 0 5px; border-radius: 50px; letter-spacing: 0px; font-weight: 400;}

/* Dr. Peithner */

/* Animations */

@keyframes fadeInUp {
	from {transform: translate3d(0,40px,0)}
	to {transform: translate3d(0,0,0); opacity: 1}	}

@-webkit-keyframes fadeInUp {
	from {transform: translate3d(0,40px,0)}
	to {transform: translate3d(0,0,0); opacity: 1}	}

@keyframes fadeInDown {
	from {transform: translate3d(0,-40px,0)}
	to {transform: translate3d(0,0,0); opacity: 1}	}

	from {transform: translate3d(0,-40px,0)}
@-webkit-keyframes fadeInDown {
	to {transform: translate3d(0,0,0); opacity: 1}	}
	
@keyframes fadeInPlace {
	from {transform: translate3d(0,0px,0); opacity:0}
	to {transform: translate3d(0,0px,0); opacity: 1}   }    

.animated {animation-duration: 0.5s; animation-fill-mode: both; -webkit-animation-duration: 0.5s; -webkit-animation-fill-mode: both}

.fadeInUp {opacity: 0; animation-name: fadeInUp; -webkit-animation-name: fadeInUp;}
.fadeInDown {opacity: 0; animation-name: fadeInDown; -webkit-animation-name: fadeInDown;}
.fadeInPlace {animation-duration: 1s; opacity: 0; animation-name: fadeInPlace; -webkit-animation-name: fadeInPlace;}

.mod_article .content-text.sswAdvertorial {padding-top: 60px; padding-bottom: 40px; margin-bottom: 30px; overflow: auto;}
.mod_article .content-text.sswAdvertorial h2 {padding-top: 0; width: 100%;}
.mod_article .content-text.sswAdvertorial h3 {display: block; padding: 0; margin: 10px 0 25px 0; font-size: 1.2rem; border: none;}
.mod_article .content-text.sswAdvertorial figure {margin: 0 0 0 5%; float: right; width: 40%; width: 350px;}
.mod_article .content-text.sswAdvertorial .button {display: inline-block; margin-bottom: 10px; border: 1px solid var(--c-cta);}
.mod_article .content-text.sswAdvertorial .button:hover {border: 1px solid var(--c-cta);}
.mod_article .content-text.sswAdvertorial .advertorialMark, #advertorialFull .advertorialMark {float: right; position: relative; top: 0px; margin-bottom: 10px;}
.mod_article .content-text.sswAdvertorial .advertorialMark span, #advertorialFull .advertorialMark span {font-size: 0.9rem; margin-top: 10px; display: block;}

.mod_article .content-text.sswAdvertorial.white {background: #fff;}
.mod_article .content-text.sswAdvertorial.pink {background: var(--c-coral-pale);}
 
.artikelseiten #main {}
.artikelseiten .content-text h2 {padding-bottom: 0;} 
 
#artikel .content-text.advertorialPage, #artikel .content-text.pageAdvertorial {padding-top: 60px; background: var(--c-cream); margin-top: 40px; overflow: auto;} 
	#artikel .content-text.advertorialPage figure, #artikel .content-text.pageAdvertorial figure {margin: 0 0 0 5%; float: right; width: 350px;}
		#artikel .content-text.advertorialPage figure img, #artikel .content-text.pageAdvertorial figure img {max-width: 100%; margin: 0;}
			.mod_article .content-text.pageAdvertorial .advertorialMark, #main .mod_article .content-text.pageAdvertorial .advertorialMark {float: right; position: relative; clear: both; margin-bottom: 10px; line-height: 1.3rem;}
				.mod_article .content-text.pageAdvertorial .advertorialMark span {font-size: 0.9rem;}	
	
.content-text {padding-top: 45px; padding-bottom: 10px; color: var(--c-deep); }
	.content-text:nth-child(3), .artikelseiten #artikel .layout_full h1 {padding-bottom: 35px; }
	.content-text:nth-child(3) p {color: var(--c-deep);}

.content-text.first-child {background: var(--c-cream);}
	.content-text.first-child p {color: var(--c-deep);}	
	
.content-text p {line-height: 1.7rem;}	
   
 .content-text a:link, .content-text a:visited {
	 text-decoration: none;
	 color: var(--c-deep);
	 transition: background 0.25s ease-out 0s, color 0.25s ease-out 0s;
	 background: transparent;
	 border-bottom: 3px solid rgb(255 128 120 / 70%);
	 box-shadow: inset 0 0px 0 rgb(255 128 120 / 70%);
	 text-shadow: 0 10px 10px rgb(255 128 120 / 30%);
	 padding: 0 2px;
 }  
 .content-text a:hover {background: rgb(255 128 120 / 30%);} 
  
 .content-text figure a:link, .content-text figure a:visited, .content-text figure a:hover {padding: 0; box-shadow: none; border-bottom: none; background: none;}
   
.mod_article.first-child .content-text.first-child p {text-align: center; padding: 0 13%;}  
   
.content-text#medelaInt, .content-image#medelaInt {background: transparent; padding-left: 0; margin-left: 80px;}
.content-text#medelaInt img, .content-image#medelaInt img {width: 300px; max-width: none; margin: 0px 0 20px 0px;}

#medelaInt {float: right; right: 0; position: relative; }

#medelaInt .content-download {position: relative;}
	#medelaInt .content-download a:link, #medelaInt .content-download a:visited {display: block; width: 274px; height: 46px; background: transparent; position: absolute; top: 0; left: 13px; cursor: pointer; color: transparent; border-radius: 3px; top: 499px;
	right: 0; position: absolute;right: 13px; left: auto;}
	#medelaInt .content-download a:hover {border: 3px solid var(--c-cta); border-radius: 3px;} 
	#medelaInt .content-download img {display: none;}
	#medelaInt .content-download.schlafsack a {top: 468px;}
	#medelaInt .content-download.matratze a {top: 439px;}
	
	#advertorialFull, .sswAdvertorial {background: var(--c-cream);}
	#advertorialFull figure {position: relative; top: -108px !important;}
	#advertorialFull figure img, #advertorialFull figure video {margin: 60px 0 20px 60px; float: right; max-width: 350px !important; border-radius: 4px;}
	#advertorialFull p {text-align: left; padding: 0;}

	.mod_article .content-text.sswAdvertorial.horizontal figure,
	#artikel .content-text.pageAdvertorial.horizontal figure {width: 500px; height: auto; margin-bottom: 15px;}
	.mod_article .content-text.sswAdvertorial.horizontal .paidi-logo,
	#artikel .content-text.pageAdvertorial.horizontal .paidi-logo {float: left; margin: 8px 34px 27px 0; border-radius: 0;}
	.mod_article .content-text.sswAdvertorial.horizontal figcaption,
	#artikel .content-text.pageAdvertorial.horizontal figcaption {margin: 10px 0 0 0;}	
	
	#artikel .content-text.pageAdvertorial.horizontal img {border-radius: 10px; margin-bottom: 10px;}

/* HUBS */    
	
.hub {}
	
.hub .mod_article.first-child {padding-top: 0;}
.hub .mod_article {margin-bottom: 0;}
	
.hubhead {position: absolute; top: 100px; color: var(--c-deep); z-index: 99;}
	.content-text.hubhead {background: none !important;}
	.hubhead h1 {text-align: left; font-weight: 700; font-size: 2.2rem; line-height: 3rem; color: var(--c-deep); padding-top: 0; margin-left: 0; 	font-family: var(--font-display);
		font-style: italic; 	font-weight: 500;
		font-size: 2.5rem;}
	.hubhead p {margin-bottom: 30px; color: var(--c-deep); width: 40%; line-height: 1.8rem;}
	.hubhead a:link, .hubhead a:visited {display: block; padding: 10px; background: var(--c-cta); color: #FFF; max-width: fit-content; padding: 10px 20px; border-radius: 100px; transition: all 0.3s ease; 	font-family: var(--font-display);
		font-style: italic;
		font-weight: 400;
		font-size: 1.1rem;
		letter-spacing: 0.5px;
	border: 1px solid var(--c-cta);}
	.hubhead a:hover {background: #FFF; color: var(--c-cta); border: 1px solid var(--c-cta);}

.hubhead.right {right: 0;}
	.hubhead.right h1 {text-align: right;}
	.hubhead.right p {margin-left: 60%; text-align: right;}
	.hubhead.right a {text-align: left;}

#hubimage img {width: 100%;}

h2.subhubhead {margin: 30px 0 0; line-height: 3rem; text-align: left; font-size: 1.5rem; color: var(--c-deep); font-weight: 700; border-bottom: 3px solid var(--c-deep)26; top: 30px !important; padding-bottom: 10px !important;}

.hubmodules {display: flex; justify-content: space-between; flex-wrap: wrap; padding-top: 60px; padding-bottom: 50px; position: relative;}
	.hubmodules h2 {flex-basis: 100%;}
	.hubmodules .content-text {flex-basis: 31%; margin: 30px 0; transition: background-color 0.5s ease; padding: 0; border-radius: 10px; background: #FFF;	box-shadow: 0px 0px 5px var(--c-deep)26;}
		.hubmodules.red .content-text:hover {background: var(--c-deep);}
		.hubmodules.red .content-text:hover h3 {color: #FFF;}
		.hubmodules.red .content-text:hover p {color: #FFF;}
		.hubmodules .content-text:hover img {border-radius: 10px 10px 0 0; opacity: 0.7; background: var(--c-deep); transition: all .3s ease-in-out;}
	
		.hubmodules .content-text figure {overflow: hidden;}
		.hubmodules .content-text figure:hover img {transform: scale(1.1) rotate(2deg); opacity: 0.8;}

	.hubmodules .content-text img {border-radius: 10px 10px 0 0; transition: transform .25s ease; width: 100%;}
	.hubmodules .content-text h3, .hubmodules .content-text h4, .hubmodules .content-text p {color: var(--c-deep); padding: 0 25px;}
	.hubmodules .content-text h3 {font-family: var(--font-display); font-size: 1.3rem; line-height: 1.7rem; font-weight: 500; border: none;  font-style: italic;}
	.hubmodules .content-text h4 {font-size: 0.9rem; line-height: 1.4rem; font-weight: 700; color: var(--c-text-muted); margin-bottom: -10px;}
	.hubmodules .content-text p {line-height: 1.4rem; padding-bottom: 15px;}
	.hubmodules .content-text p a:link, 	.hubmodules .content-text p a:visited {}
		.hubmodules .content-text p a:hover {}
	
	.hubmodules .content-hyperlink {position: absolute; right: 8%; top: 70px;}
		.hubmodules .content-hyperlink a:link, .hubmodules .content-hyperlink a:visited {display: block; padding: 7px 65px 5px 30px; border-radius: 50px 10px 0 0; background: rgb(255 128 120 / 10%)  url(/files/design/_icons/pinkArrowRight.svg) 87% 54% / 30px auto no-repeat; transition: all 0.3s ease; border-bottom: 3px solid var(--c-cta); 	font-family: var(--font-display);
			font-style: italic;
			font-weight: 500;
			letter-spacing: 0.5px;
		}
		.hubmodules .content-hyperlink a:hover {background: var(--c-cta) url(/files/design/_icons/whiteArrowRight.svg) 87% 54% / 30px auto no-repeat; color: #FFF;}
	
		.hubmodules.blue, .hubmodules.red  {background: var(--c-cream);}	
		/* .hubmodules.red {background: var(--c-cream) url(/files/design/whiteBubbles.svg) no-repeat; background-size: 20%;} */

		.hubmodules.circles {background: #fff;}
			.hubmodules.circles h2 {margin-bottom: 20px;}
			.hubmodules.circles .content-text {flex-basis: 22%; text-align: center; background: none;  box-shadow: none;}
			.hubmodules.circles .content-text img {	border-radius: 100%;
				width: 50%;
				margin-bottom: 10px;
				border: 3px solid var(--c-cta)20;
				padding: 5px;}
			.hubmodules.circles .content-text img:hover {background: #FFF; transition: none; transform: none; opacity: 1;}	

.hubbar {background: rgba(255, 228, 228, 0.5); padding: 70px 0 50px; border-top: 0px solid rgba(255, 228, 228, 0.8); border-bottom: 0px solid rgba(255, 228, 228, 0.8);}
	.hubbar h1, .hubbar h2, .hubbar h3 {text-align: center;font-weight: 700; font-size: 2.2rem; line-height: 2.5rem; color: var(--c-deep); padding-top: 0; margin: 25px 0 -10px 0; width: 100%; padding: 0 0 15px 0; 	font-family: var(--font-display);
		font-style: italic;
		font-weight: 500;
		font-size: 2.5rem;}
	.hubbar h3 {border-bottom: 0;}
	.hubbar p {color: var(--c-deep); margin-bottom: 20px; text-align: center;}
	.hubbar.pink {background: rgba(255, 228, 228, 0.5);}
		.hubbar.pink h2 {margin-bottom: 25px;}
	.hubbar.white {background: #FFF;}
	
.hubbar a:link, .hubbar a:visited {display: block; padding: 10px; background: var(--c-cta); color: #FFF; padding: 10px 20px; border-radius: 50px;  margin: 20px auto 0px;  display: inline-block; 	border: 1px solid var(--c-cta); font-family: var(--font-display);
	font-style: italic;
	font-weight: 400;
	font-size: 1.1rem;
	letter-spacing: 0.5px;}
	.hubbar a:hover {color: var(--c-cta); background: #FFF; transition: all 0.3s ease;}

.hubbar.categories {padding-top: 30px; padding-bottom: 30px; background: #FFF; border: none;}
	.hubbar.categories h3 {margin: 5px auto; font-size: 1.2rem; letter-spacing: 1px;}
	.hubbar.categories span {display: block; width: 100%; text-align: center; font-weight: 700; font-size: 2.2rem; line-height: 2.5rem; color: #fff; padding-top: 0; margin-bottom: 60px;}	
	.hubbar.categories a img {height: 100%; float: left; border-radius: 3px 0 0 3px; transition: all 0.3s ease;}
	.hubbar.categories a:link, .hubbar.categories a:visited {background: #FFF; color: var(--c-cta); flex-basis: 47%; min-width: 23%; margin-bottom: 20px; height: 45px; padding: 0; border-radius: 50px; border: 1px solid var(--c-deep)4a; flex-grow: 1;    margin-top: 0; max-width: 200px; background: #fff url(/files/design/_icons/pinkArrowRight.svg) 90% 51% / 25px auto no-repeat;}
	.hubbar.categories a:hover {border: 1px solid var(--c-deep); background: var(--c-deep) url(/files/design/_icons/whiteArrowRight.svg) 90% 51% / 25px auto no-repeat;}
	.hubbar.categories a span {display: block;width: 100%;text-align: left;font-weight: 400;padding-top: 0;margin-bottom: 60px; color: var(--c-deep); font-size: 1.1rem; margin: 1px 0 10px 0; padding-left: 8%;}
	.hubbar.categories a:hover span {color: #FFF;}
	.hubbar.categories a:hover img {height: 70%; margin: 6px; border-radius: 3px;}

.subhub .mod_article h1 {margin-top: 35px;}	
.subhub .content-text:nth-child(2) {background: var(--c-cream);}
		
body.subhub.expertinnen .content-text:nth-child(2), body.subhub.checklisten .content-text:nth-child(2), body.subhub.beikostrezepte .content-text:nth-child(2) {background: none;}
	
body.namen .hubbar.categories a {height: auto; line-height: 1.5rem;}
body.namen .hubbar.categories a span {line-height: 1.5rem; padding-top: 8px;}

	.mod_article .content-text.sswAdvertorial .advertorialMark, #advertorialFull .advertorialMark {width: 100%;}
	
/* Overwrites 4 Hub */

body.hub #main .mod_customnav.schwangerschaftsDots {background: none; overflow: hidden; z-index: 1; height: 62px;}

body.hub .mod_breadcrumb {background: none; padding-top: 15px;}	

.mod_search input {outline: none;}
.mod_search input[type=search] {-webkit-appearance: textfield; -webkit-box-sizing: content-box; font-family: inherit; font-size: 100%; position: absolute; right: 0; background: #f5f5f5; border-radius: 50px;}
.mod_search input::-webkit-search-decoration,input::-webkit-search-cancel-button {display: none; }
.mod_search input[type=search] {border: none; width: 100px; border-radius: 0;transition: all .5s;font-size: 0.9rem;text-align: left; background: transparent;position: absolute; right: 0; background: #f5f5f5; border-radius: 4px;}
.mod_search input[type=search]:focus {width: 150px; border-color: var(--c-cta); color: var(--c-deep); background-size: 20px; position: absolute; right: 0; background: #f5f5f5; border-radius: 4px;}
.mod_search input:-moz-placeholder {color: #999;}
.mod_search input::-webkit-input-placeholder {color: #999;}

.ce_accordionSingle {background: var(--c-cream) !important; padding-top: 0; padding-bottom: 20px;}

.content-text, .artikelseiten #artikel .layout_full h1, .ce_comments, .artikelseiten .mod_customnav.schwangerschaftsDots, .mod_breadcrumb, .mod_subscribe, #footer .inside, nav.maintop, .sswAnsicht .mod_article .content-text, .hubmodules, #main .mod_customnav.schwangerschaftsDots, .hubbar, .hubhead, .mod_newslist, .mod_newsarchive, .inArticleApp, .produktprobenLink, #suche .mod_search, .ce_accordionSingle, .videoWrapper, .marken, .filter, .grid, .content-youtube, .mod_eventlist, .mod_eventreader, .mod_EventEditor, .zurSSWanmeldung, .article_jumper, .content-accordion {padding-left: 8%; padding-right: 8%;}

.home .flex div:nth-child(odd) {padding-left: 8%;}
.home .flex div:nth-child(even) {padding-right: 8%;}

#artikel h1.content-headline.first-child {margin: 0px 0 -10px 0; background: var(--c-cream); padding-top: 15px;}    

#main #artikel .ce_sharebuttons {margin: 0 0 0 0;}
#main .ce_sharebuttons {margin: 0 0 30px 0;}
#main #artikel .ce_sharebuttons .sharebuttons {padding: 15px 0 0px;}

body #verzeichnis .content-text.last {padding-left: 0; padding-right: 0; width: 100%; background: transparent;}

#main #article-278 .sharebuttons ul {padding-bottom: 40px;}

/* Share */

#share {width: 70%; padding: 0 15%; margin: 50px auto; text-align: center;}
	#share a {width: 110px; height: 30px; display: inline-block; margin: 8px; border-radius: 3px; font-size: 1rem; color: #fff; transition: all 0.15s linear; background: #3e3a5f; text-decoration: none; padding: 7px 6px 2px 12px; border: 1px solid #3e3a5f; box-shadow: 0 0 10px rgba(62, 58, 95, 0.3); position: relative;}
		#share a:hover {border: 1px solid #3e3a5f; color: #3e3a5f; background: #FFF; position: relative;}
	#share a {padding-left: 40px; width: 90px; text-align: left;}
	#share i {    position: absolute; top: 11px; left: 13px;}
	
	.facebook {background: #3b5998;}
	.twitter {background: #55acee;}
	
	.whatsapp {background: #0077b5;}
	.pinterest {background: #cb2027;}

.blueishBack {background: var(--c-cream) !important; text-align: center;}

/* Mitgliedernav */

.mod_customnav.mitgliedernav {
	padding-top: 1px;
}

.mod_customnav.mitgliedernav ul {
	background: #faf2f2;
	padding: 6px 7px;
	border-radius: 50px;
	margin-top: 0;
	display: flex;
	box-shadow: inset 0 0 13px rgb(247 140 140 / 20%);
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: nowrap;
}
.mod_customnav.mitgliedernav ul li {
	border: none;
	background: none;
	padding: 0;
	margin: 0;
}

.mod_customnav.mitgliedernav ul li a:link, .mod_customnav.mitgliedernav ul li a:visited, .mod_customnav.mitgliedernav ul li .active {
	display: block;
	padding: 10px;
	background: var(--c-cta);
	color: #FFF;
	max-width: fit-content;
	padding: 4px 20px 6px;
	border-radius: 100px;
	transition: all 0.3s ease;
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 400;
	font-size: 1.1rem;
	letter-spacing: 0.5px;
	border: 1px solid var(--c-cta);
}

.mod_customnav.mitgliedernav ul li .active {background: var(--c-deep); border: 1px solid var(--c-deep);}

.mod_customnav.mitgliedernav ul li a:hover {
	color: var(--c-cta);
	background: #FFF;
	transition: all 0.3s ease;
	border: 1px solid var(--c-cta);
}

.mod_personalData .widget .submit {
		text-decoration: none;
		color: var(--c-deep);
		transition: background 0.25s ease-out 0s, color 0.25s ease-out 0s;
		background: transparent;
		border-bottom: 3px solid rgb(255 128 120 / 70%);
		box-shadow: inset 0 0px 0 rgb(255 128 120 / 70%);
		text-shadow: 0 10px 10px rgb(255 128 120 / 30%);
		padding: 0 2px;
		background: var(--c-cta);
		color: #FFF;
		padding: 10px 20px;
		border-radius: 100px;
		margin: 20px 0;
		display: table-cell;
		border: 1px solid var(--c-cta);
		font-family: var(--font-display);
		font-style: italic;
		font-weight: 400;
		font-size: 1.1rem;
		letter-spacing: 0.5px;
		margin-bottom: 20px;
	}
.mod_personalData .widget .submit:hover {
		color: var(--c-cta);
		background: #FFF;
		transition: all 0.3s ease;
		border: 1px solid var(--c-cta);
	}

.mod_personalData .fields {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.mod_personalData .fields .widget {
	width: 47%;
	flex-basis: 47%;
	margin-bottom: 60px;
	position: relative;
}

.mod_personalData .fields label {
	position: absolute;
	left: 0;
	width: 36%;
	background: var(--c-deep);
	padding: 8px 15px;
	border-radius: 5px 0 0 5px;
	color: #FFF;
	display: block;
}

.mod_personalData .fields input, .mod_personalData .fields select {
	position: absolute;
	left: 36%;
	width: 60%;
	padding: 12px 15px 11px;
	border-radius: 0 5px 5px 0;
	border: 1px solid rgb(249 116 143 / 50%);
	border-left: none;
}

.mod_personalData .fields input:focus {
	background: #fff9c4;
}

.zurSSWanmeldung {

}

.zurSSWanmeldung .inside {
	text-align: center;
	margin: 30px 5%; content: ""; background-size: 50%; box-sizing: border-box;
	padding: 20px 25px 1px 25px;
	border-radius: 10px;
	width: fit-content;
	margin: 0 auto;
	background: #FCF0EF; 	
}

.zurSSWanmeldung h2 {
	margin-top: 0;
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 2.5rem;
	color: var(--c-deep);
	padding-bottom: 20px;
	margin-bottom: 10px;
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 500;
}

.zurSSWanmeldung a.button {
	display: block;
	width: fit-content;
	margin: 0 auto 25px;
}

.abonnement_item {width: 45%; flex-basis: 45%;}

.abonnement_item .content-text ul {
	padding-left: 0;
}

/* FAQ NEU 2026 */

.content-accordion {	background: rgb(159 87 255 / 10%) url(/files/design/_icons/boxFAQ.svg) 5% 50% no-repeat; background-size: 100px; padding: 30px 0; margin-bottom: 40px;}	

.handorgel__header__button {padding: 0px;}
.content-accordion h3 {padding: 0px; border-bottom: 0px; margin-bottom: 0;}

.content-accordion .handorgel__header__button, .handorgel__content, .handorgel__content__inner, .mod_article .content-accordion .content-text {background: none; border: none;}

.handorgel__header__button {font-family: var(--font-display);	font-style: italic;
	font-weight: 500;}

.content-accordion div {}

.handorgel__content__inner {padding: 0;}
.mod_article .content-accordion div .content-text {text-align: left; 	padding: 0 15px 0 15px; padding: 0;}
.mod_article .content-accordion div .content-text  p {
	line-height: 1.5rem;
}

/* - - - - - - - - - - */
/* - - - FRAMING - - - */
/* - - - - - - - - - - */

nav.maintop ul.level_1 {
	position: relative;
}

.home .flex div.rte {
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}

@media screen and (min-width: 993px) and (min-width: 1499px) {
.content-text, .artikelseiten #artikel .layout_full h1, .ce_comments, .artikelseiten .mod_customnav.schwangerschaftsDots, .mod_breadcrumb, .mod_subscribe, #footer .inside, nav.maintop, .sswAnsicht .mod_article .content-text, .hubmodules, #main .mod_customnav.schwangerschaftsDots, .hubbar, .hubhead, .mod_newslist, .mod_newsarchive, .inArticleApp, .produktprobenLink, #suche .mod_search, .ce_accordionSingle, .videoWrapper, .verzeichnisseite .grid, #iub-pp-container, .marken, .filter, .grid, .advert-top, .content-youtube, .mod_eventlist, .mod_eventreader, .mod_EventEditor, .mod_newsreader h1, .zurSSWanmeldung, .article_jumper, .content-accordion {padding-left: 8%; padding-right: 8%;}

.home .flex div:nth-child(odd), .gewinnspiel .textlinks {padding-left: 8%;}
.home .flex div:nth-child(even), .gewinnspiel .textrechts {padding-right: 8%;}
.hubmodules .content-hyperlink, .pageselector {right: 8%;}

}

@media screen and (min-width: 1500px) {
.content-text, .artikelseiten #artikel .layout_full h1, .ce_comments, .artikelseiten .mod_customnav.schwangerschaftsDots, .mod_breadcrumb, .mod_subscribe, #footer .inside, nav.maintop, .sswAnsicht .mod_article .content-text, .hubmodules, #main .mod_customnav.schwangerschaftsDots, .hubbar, .hubhead, .mod_newslist, .mod_newsarchive, .inArticleApp, .produktprobenLink, #suche .mod_search, .ce_accordionSingle, .videoWrapper, .verzeichnisseite .grid, #iub-pp-container, .marken, .filter, .grid, .advert-top, .content-youtube, .mod_eventlist, .mod_eventreader, .mod_EventEditor, .mod_newsreader h1, .zurSSWanmeldung, .article_jumper, .content-accordion {padding-left: 14%; padding-right: 14%;}

.home .flex div:nth-child(odd), .gewinnspiel .textlinks {padding-left: 13%;}
.home .flex div:nth-child(even), .gewinnspiel .textrechts {padding-right: 13%;}
.hubmodules .content-hyperlink, .pageselector {right: 14%;}
nav.maintop li:nth-child(9) .level_2, nav.maintop li:nth-child(10) .level_2 {position: absolute; right: 0;}

}

@media screen and (min-width: 1700px) {
.content-text, .artikelseiten #artikel .layout_full h1, .ce_comments, .artikelseiten .mod_customnav.schwangerschaftsDots, .mod_breadcrumb, .mod_subscribe, #footer .inside, nav.maintop, .sswAnsicht .mod_article .content-text, .hubmodules, #main .mod_customnav.schwangerschaftsDots, .hubbar, .hubhead, .mod_newslist, .mod_newsarchive, .inArticleApp, .produktprobenLink, #suche .mod_search, .ce_accordionSingle, .videoWrapper, .verzeichnisseite .grid, #iub-pp-container, .marken, .filter, .grid, .advert-top, .content-youtube, .mod_eventlist, .mod_eventreader, .mod_EventEditor, .mod_newsreader h1, .zurSSWanmeldung, .article_jumper, .content-accordion {padding-left: 17%; padding-right: 17%;}

.home .flex div:nth-child(odd), .gewinnspiel .textlinks {padding-left: 17%;}
.home .flex div:nth-child(even), .gewinnspiel .textrechts {padding-right: 17%;}
.hubmodules .content-hyperlink, .pageselector {right: 17%;}
nav.maintop li:nth-child(9) .level_2, nav.maintop li:nth-child(10) .level_2 {position: absolute; right: 0;}

#hubimage {max-height: 650px; overflow: hidden;}

}

@media screen and (min-width: 1900px) {
.content-text, .artikelseiten #artikel .layout_full h1, .ce_comments, .artikelseiten .mod_customnav.schwangerschaftsDots, .mod_breadcrumb, .mod_subscribe, #footer .inside, nav.maintop, .sswAnsicht .mod_article .content-text, .hubmodules, #main .mod_customnav.schwangerschaftsDots, .hubbar, .hubhead, .mod_newslist, .mod_newsarchive, .inArticleApp, .produktprobenLink, #suche .mod_search, .ce_accordionSingle, .videoWrapper, .verzeichnisseite .grid, #iub-pp-container, .marken, .filter, .grid, .advert-top, .content-youtube, .mod_eventlist, .mod_eventreader, .mod_EventEditor, .mod_newsreader h1, .zurSSWanmeldung, .article_jumper, .content-accordion {padding-left: 22%; padding-right: 22%;}
}

@media screen and (min-width: 2600px) {
.content-text, .artikelseiten #artikel .layout_full h1, .ce_comments, .artikelseiten .mod_customnav.schwangerschaftsDots, .mod_breadcrumb, .mod_subscribe, #footer .inside, nav.maintop, .sswAnsicht .mod_article .content-text, .hubmodules, #main .mod_customnav.schwangerschaftsDots, .hubbar, .hubhead, .mod_newslist, .mod_newsarchive, .inArticleApp, .produktprobenLink, #suche .mod_search, .ce_accordionSingle, .videoWrapper, .verzeichnisseite .grid, #iub-pp-container, .marken, .filter, .grid, .advert-top, .content-youtube, .mod_eventlist, .mod_eventreader, .mod_EventEditor, .mod_newsreader h1, .zurSSWanmeldung, .article_jumper, .content-accordion {padding-left: 25%; padding-right: 25%;}

.home .flex div:nth-child(odd), .gewinnspiel .textlinks {padding-left: 21%;}
.home .flex div:nth-child(even), .gewinnspiel .textrechts {padding-right: 21%;}
.hubmodules .content-hyperlink, .pageselector {right: 21%;}
nav.maintop li:nth-child(9) .level_2, nav.maintop li:nth-child(10) .level_2 {position: absolute; right: 0;}

#hubimage img {position: relative; top: -6vw;}

}	

/* - - - - - - - - - - */
/* HIDE THINGS DESKTOP */
/* - - - - - - - - - - */

/* - - - - - - - - - - - */
/* - - MOBILE QUERY - - */
/* - - - - - - - - - - */

@media screen and (max-width: 992px) {
	
p, div {
	font-size: 1.1rem;
}	
	
.content-text, .artikelseiten #artikel .layout_full h1, .ce_comments, .artikelseiten .mod_customnav.schwangerschaftsDots, .mod_breadcrumb, .mod_subscribe, #footer .inside, nav.maintop, .sswAnsicht .mod_article .content-text, .hubmodules, #main .mod_customnav.schwangerschaftsDots, .hubbar, .hubhead, .mod_newslist, .mod_newsarchive, .inArticleApp, .produktprobenLink, #suche .mod_search, .ce_accordionSingle, .videoWrapper, .verzeichnisseite .grid, #iub-pp-container, .marken, .filter, .grid, .advert-top, .content-youtube h2, .mod_eventlist, .mod_eventreader, .content-youtube, .mod_EventEditor, .mod_newsreader h1, .zurSSWanmeldung, .article_jumper {padding-left: 5%; padding-right: 5%;}

.media--right figure {text-align: unset;}

.float-right.content-youtube {
	float: none;
	text-align: center;
}

.showADdesktop {display: none;}
.showADmobile {background: var(--c-deep); position: relative; top: -5px; padding: 14px 1.5% 4px; text-align: center; width: 100%; height: auto; display: block; margin-bottom: -5px;}
	.showADmobile img {border-radius: 10px; max-width: 650px;}

#container {margin-top: 0; 	padding-top: 58px;}

/* entfernt: #artikel h1 padding !important — Artikelkopf in 8-pages.css */
#main .sharebuttons ul {margin-top: 20px;}

.flex .fifty {width: 100%;}

.home .flex div {width: 100%; text-align: center; padding: 0;}
	.home .flex div p {text-align: center;}
	body.home #main .flex .content-text figure {position: relative; width: 120px; margin: 0 auto 15px; margin-bottom: 20px; float: none; top: 0;}	
	body.home .flex .content-text h2	{padding-left: 0; text-align: center;}
	.home .flex div a:link, .home .flex div a:link, .home .flex div a:link, .home .flex div a:visited {margin: 20px auto; text-align: center; display: block;}

.home .flex div:nth-child(odd) {padding-left: 5%;}
.home .flex div:nth-child(even) {/* padding-right: 5%; */}
	.home .flex div:nth-child(odd) p, .home .flex div:nth-child(even) p {text-align: center;}

.hubmodules .content-hyperlink, .pageselector {right: 5%;}

.hubmodules .content-text {flex-basis: 100%;}

.layout_latest {flex-basis: 100%;}

.videobereich #main .left, .videobereich #main .videoWrapper {max-width: none; width: 100%; margin-right: 0; display: block;}
.videobereich #main .videoWrapper {width: 90%; margin-left: 5%;}

.content-text#medelaInt, .content-image#medelaInt {margin: 0 auto; padding: 0 6% 15px 6%; width: 100%;}
	.content-text#medelaInt .content-download {margin: 0; position: initial;}
	#medelaInt .content-download.matratze a {top: 499px;}
	#medelaInt .content-download.schlafsack a {top: 557px;}
	#medelaInt .content-download a:link, #medelaInt .content-download a:visited {border: none;width: 88%; height: 50px; background: transparent; position: absolute; cursor: pointer; color: transparent; border-radius: 3px;}	

#artikel .layout_full.aktionen-rabatte .rabatt {width: 100%;}
	#artikel .layout_full.aktionen-rabatte .desc img {max-width: none; margin-left: 0;}
	
.ce_comments .widget {flex-basis: 100%;}
.ce_comments button.submit {width: 100%;}

/* .mod_subscribe mobile — nach components.css */

body #verzeichnis .content-text.grid .content-image {min-width: 100%;}
	body #verzeichnis .content-text.grid .content-image h2 {min-width: 70%;}
	
body.verzeichnisseite .grid .content-text, body.verzeichnisseite .grid.foto .content-text {width: 90%; margin: 0 0 30px 0; float: none; display: block;}
	body.verzeichnisseite .filter {margin: 0;} 
	body.verzeichnisseite .filter .button-group {padding: 5px 5px 0 5px; border-radius: 3px;}	
	body.verzeichnisseite .filter .button-group button {background: #FFF;}
	
body.verzeichnisseite .grid.foto .content-text {display: flex;}	
	body.verzeichnisseite .grid.foto .content-text figure {width: 100%;}

body.news .mod_article h1 {margin: 0;}

.content-text ol {margin-left: 0; padding-left: 10%;}

.content-text.first-child {padding-top: 0;}

input {-webkit-appearance: none;}
.formbody input {-webkit-appearance: auto;}

.advert-top {margin: 0px auto -50px; text-align: center; background: var(--c-cream); padding: 10px 2%;}
	.advert-top img {padding-top: 5px; width: 90%;}
	
.hub .advert-top {position: absolute; top: 55px; background: none;}
	.hub .advert-top img {border-radius: 13px;}

.suchIndex {display: none;}

.suchIndex {z-index: 102; position: relative;}
	.suchIndex .mod_search {position: relative; top: 10px; width: auto; background: transparent; }

	.suchIndex .mod_search input[type=search], .suchIndex .mod_search input[type=search]:focus {width: 90%; border-radius: 30px;text-indent: 30px; left: 10px;}
		.suchIndex .mod_search input.submit {top: 8px; right: -104%;}
		.suchIndex .mod_search button.submit {top: 6px; right: revert; left: -2px;}
		.suchIndex .widget-submit {position: relative;
			left: 25px;
			top: 1px;}

.mm-listview .suchIndex {	height: 50px;
		position: relative;
		top: 0px;
		padding: 0px 10px;
		display: block;
		background: var(--c-deep)69;
	}
	
body.subhub.expertinnen .circles {
	display: block;
}	

body.subhub.expertinnen .circles .content-text.review {
	width: 100%;
	display: contents;
}

body.subhub.expertinnen .circles .content-text.review p:last-child {
	margin-bottom: 50px;
}

/* Header */

#header {height: 58px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);}
	.logo {width: 155px; height: 55px;}

.bannerMobileTop {width: 100%; text-align: center; display: block;}

.mod_article.first-child {padding-top: 58px; background: var(--c-cream);}
.mod_article h1 {font-size: 1.8rem; margin: 0; word-break: break-word;}

/* .insideArticle mobile — nach components.css */
	
.mod_article#artikel ul {margin: 30px auto;}	
	
	body.entwicklungsmonate .mod_article.first-child {padding-top: 60px;}
	
/* Hubs */

.hub .mod_article:nth-child(1) {overflow: hidden; margin-top: -34px; /* margin-top: -92px */}
	#hubimage {height: 300px; margin-top: -62px; overflow: hidden;}
	#hubimage figure {width: 200%; margin: 0 0 0 -180px; height: 300px; overflow: hidden;}
	#hubimage img {width: 100%; position: relative;}
	
	.hubhead {position: relative; top: 0; background: var(--c-cream);}
		.content-text.hubhead {background: #fff; padding-top: 10px; padding-bottom: 10px; text-align: center;}
		.hubhead h1 {position: absolute; top: -170px; font-size: 1.4rem; width: 70%; line-height: 2rem;}
		.hubhead p {margin-bottom: 30px; width: 100%; text-align: center;}
	
	.hubmodules .content-hyperlink {top: 0; letter-spacing: -0.5px; position: relative; right: 0; text-align: left; width: 100%;}
		.hubmodules .content-hyperlink a:link, .hubmodules .content-hyperlink a:visited {background: rgba(249, 116, 143, 0.07) url(/files/design/_icons/pinkArrowRight.svg) 90% 54% / 30px auto no-repeat; padding: 11px 50px 9px 15px; border-radius: 0; margin: 0 auto;}
		.hubmodules .content-hyperlink a:hover {background: var(--c-cta) url(/files/design/_icons/whiteArrowRight.svg) 90% 54% / 30px auto no-repeat; color: #FFF;}
		h2.subhubhead {width: 100%; letter-spacing: -1px; font-size: 1.3rem; border-bottom: 0; padding-bottom: 10px !important;}
	
	.hubhead a:link, .hubhead a:visited {max-width: initial;}
	
	.hubbar.categories a:link, .hubbar.categories a:visited {height: auto; width: 45.5%; flex-basis: auto; flex-grow: 0; margin-bottom: 15px;padding: 10px 0px 10px 0;}
	.hubbar.categories a img {width: 23px; margin-left: 7px;}
	.hubbar.categories a span {line-height: 1.3rem; height: auto; margin: 2px 0 0 0;}
	.hubbar.categories a:hover, .hubbar.categories a:focus {background: var(--c-deep); color: #FFF;}
	.hubbar.categories a h2 {font-size: 0.95rem; margin: 9px 0 10px 30%;}
	
	.hubmodules.circles .content-text {flex-basis: 50%; margin: 30px 0 20px;}
		.hubmodules.circles .content-text img { margin-bottom: 10px;}
	
	.mod_article .content-text h2, .mod_article h2.content-headline, .content-gallery h2, .content-youtube h2  {width: 100%; font-size: 1.8rem; letter-spacing: 0.5px;}

	.subhub .mod_article h1 {margin-top: -55px;}
	.subhub.checklisten .mod_article h1, .subhub.beikostrezepte .mod_article h1 {margin-top: -15px; margin-left: 0;}

#artikel .layout_full h1 {font-size: 2rem; margin: 0; padding-top: 0;}
#artikel .layout_full h2 {font-size: 1.6rem; letter-spacing: 0.2px; line-height: 2rem;}
#artikel .layout_full h3 {font-size: 1.5rem; letter-spacing: 0px; font-weight: 700; margin-top: 50px;}

.mod_article#artikel .sharebuttons ul {flex-wrap: nowrap; margin: 10px auto 0; width: 100%;}

.mod_article.first-child .content-text.first-child p {padding: 0;}

.sharebuttons > ul.theme {margin: 0;}

.advertorial {position: absolute; top: -12px; right: 2px; border-radius: 3px 0 0 3px; background: none;}

	#haeufige-fragen-und-antworten .layout_full h1 {text-align: center; font-weight: 700; font-size: 1.7rem; line-height: 2rem; color: var(--c-deep);}
	#haeufige-fragen-und-antworten .layout_full .sharebuttons > ul.theme {margin: 12px auto 30px;}

#haeufige-fragen-und-antworten .content-text {padding-top: 5px; padding-bottom: 5px;}

.sswAnsicht .mod_article .content-text {padding-top: 0;}

#schwangerschaftswochen .sswBoxes p a:link, #schwangerschaftswochen .sswBoxes p a:visited {width: 100%;}
#schwangerschaftswochen .sswBoxes div:last-child a {width: 100%;}
#schwangerschaftswochen .content-text figure {margin: 0; display: block; float: none; width: 100%;}
	#schwangerschaftswochen .content-text figure img {width: 100%;}
	#schwangerschaftswochen .content-text figure figcaption {margin-bottom: 15px; margin-top: 10px;}
	#schwangerschaftswochen .sswBoxes div a {width: 31%;}

body.abc .abcliste p {width: 44%;}
	body.abc .abcliste p:last-child {width: 100%; padding-bottom: 10px;}

.content-download {flex-basis: 100%;}

.laender div {width: 100%;}
.laender .two {margin-top: -30px;}
.girlslist, .boyslist {display: block; width: 100%; vertical-align: top; background-position: 0px 2px;}
.girlslist h2, .boyslist h2 {font-size: 1.5em;}
.ce_accordion {padding-bottom: 20px; margin-bottom: 30px;}

body.news .mod_newslist .layout_latest {min-height: unset; height: auto; padding-bottom: 0;}
body.news .mod_newslist .layout_latest p.more {position: relative;}

.mod_newslist.randomNews .layout_latest {flex-basis: 100%;}

#artikel .layout_full .content-image.interview#produkttest .layout_full .content-image {margin: 0;}
.interview#produkttest .layout_full img {margin-bottom: 30px;}
body.neuheiten .interview.circle .media--right figure {top: 0px; width: 200px; margin-left: 30px;}
body.neuheiten .interview.circle img {width: 175px;}
#artikel #advertorialFull figure img, #artikel .layout_full img, .interview#produkttest .layout_full img, #artikel .layout_full video, #artikel #advertorialFull figure video {max-width: none; margin: 0 0; float: none; width:100%; max-width: none;}
.layout_full #artikel .sswAdvertorial img {margin: 0 0 20px 60px; float: right; max-width: 100%; border-radius: 10px;}

#artikel .mod_newsreader .layout_full .content-text em {width: 100%;}

body.buch .content-text figure {margin: 10px 30px 25px 0;}

.home .flex div.namenUmDenErdballFront a:link, .home .flex div.namenUmDenErdballFront a:visited {display: block; width: 100%; margin-bottom: 10px;}

.sswAnsicht .mod_article h1 {margin-top: -38px; font-size: 1.7rem; margin-bottom: 0;}
.sswAnsicht .mod_article figure {margin: 20px 0; border-radius: 0;width: 100%;}
.sswAnsicht .mod_article figure img {border-radius: 10px; width: 100%;}

.sswAdvertorial figure, .pageAdvertorial figure  {width: 100%; margin-bottom: 10px;}
.mod_article .content-text.sswAdvertorial figure, .mod_article .content-text.pageAdvertorial figure {margin: -5px 0 20px 0; float: none; width: 100%;}

.mod_article .content-text.sswAdvertorial.horizontal figure {width: 100%;}

#artikel .content-text.advertorialPage figure, #artikel .content-text.pageAdvertorial.horizontal figure {width: 100%; float: none;}
#artikel .content-text.advertorialPage figure img, #artikel .content-text.pageAdvertorial.horizontal figure img {border-radius: 10px; margin: 0 0 30px 0; width: 100%;}
#artikel .content-text.advertorialPage figure, #artikel .content-text.pageAdvertorial figure {	margin: 0 0 25px 0;}

#artikel .content-text.advertorialPage.horizontal figure {width: 100%;}
#artikel .content-text.pageAdvertorial.horizontal p img {max-width: 100px; border-radius: 0;}
#artikel .content-text.pageAdvertorial.horizontal figure img {margin-bottom: 0;}
#artikel .content-text.pageAdvertorial.horizontal figure {width: 100%;}

#artikel .content-text.advertorialPage .button, #artikel .content-text.pageAdvertorial .button {display: table; margin-top: 10px;}

#advertorialFull {padding-top: 20px;}
#advertorialFull figure {position: relative; top: 0px !important; margin-top: 20px; margin-bottom: 20px;}
#advertorialFull figure img, #advertorialFull figure video {max-width: 100% !important;}

body.gewinnspiel #container .mod_article h3 {text-align: center;}

body.umfrageseite .content-text.mamtop figure {
	width: 100%;
	margin-left: 0px;
}
.ce_form .umfrage-danke .formbody {display: block;}
.ce_form .umfrage-danke .formbody .checkbox_container span {display: block;}
.ce_form .umfrage-danke .formbody .checkbox_container span.mandatory {display: contents;}

.mod_article .content-text h2, .mod_article h2.content-headline, .content-gallery h2, .content-youtube h2 {font-size: 1.6rem;}

.content-text ul {padding: 0;}
.content-text ul li {margin-right: 0;}

.mod_breadcrumb {position: relative; z-index: 10; top: 0px; padding-bottom: 0px;}

/* body.sswAnsicht .mod_breadcrumb {top: 95px;} */

#main .mod_customnav.schwangerschaftsDots {position: relative; z-index: 100; width: 100%; top: 0px; overflow: hidden; padding-right: 0; padding-left: 0;}
#main .mod_customnav.schwangerschaftsDots ul {position: relative; top: 0; width: 100%; overflow: hidden; overflow-x: scroll; -webkit-overflow-scrolling: touch; padding-right: 13px;
	padding-left: 13px;}
#main .mod_customnav.schwangerschaftsDots li {	margin-right: 5px;}
#main .mod_customnav.schwangerschaftsDots li a:link, #main .mod_customnav.schwangerschaftsDots li a:visited {width: 32px;}
#main .mod_customnav.schwangerschaftsDots li.TrimesterEins.newsletter a {width: auto; padding-left: 18px;}

#main .mod_customnav.schwangerschaftsDots li.last {width: auto;}

#main .mod_customnav.schwangerschaftsDots li a.first-child:link, #main .mod_customnav.schwangerschaftsDots li a.first-child:visited {width: 32px;}
#main .mod_customnav.schwangerschaftsDots li a.last:link, #main .mod_customnav.schwangerschaftsDots li a.last:visited {width: 32px;}

.mod_booknav ul li a:link, .mod_booknav ul li a:visited {border-bottom: 1px solid #ffe4e4;box-shadow: inset 0 -1px 0 #ffe4e4; text-align: center; max-width: fit-content; color: var(--c-cta); background: none; display: inline-block;}
.mod_booknav ul li {list-style: none;display: block;height: 50px;}

.mod_booknav ul li.up a {border-bottom: 0px solid #ffe4e4; box-shadow: none; margin-top: 25px;}

body.home.hub .mod_breadcrumb {display: none;}
body.hub .mod_breadcrumb {position: absolute; padding-top: 70px;}

body .mod_article.first-child {padding-top: 0px;}

#artikel .layout_full .review, .entwicklungsmonate-seite .review, .wbwoche .review,  .sswAnsicht .review {margin: 60px auto; text-align: center; max-width: 90%;}

/* Mobile-Callouts — nach components.css */
body.neuheiten .elterncheck.circle .media--right figure {top: 0px;}

#artikel .content-text.advertorialPage figure {top: 0;}

body.namen .hubbar.categories a {width: 100%; flex-basis: 100%; max-width: 100%;}

/* Entwicklungsmonate */

body.entwicklungsmonate .content-text p {width: 100%;}

body.entwicklungsmonate .media--right figure {margin: 0 0 30px 0; width: 100%;}
	body.entwicklungsmonate .media--right figure img {border-radius: 4px;}
	
	.media--right figure {margin: 0 0 30px 0; width: 100%; float: none;}

/* entwicklungsmonate Callouts — nach components.css */

/* Interview */

#artikel .layout_full .content-image figcaption {top: -10px; right: 0; padding: 0 5%;}
 
/* Entwicklungs - Dots */

#main .mod_customnav.schwangerschaftsDots.entwicklung ul {background: none;}
#main .mod_customnav.schwangerschaftsDots li.entwicklungsPill {flex-basis: auto; background: none; width: auto;}
#main .mod_customnav.schwangerschaftsDots li.entwicklungsPill a:link, #main .mod_customnav.schwangerschaftsDots li.entwicklungsPill a:visited {width: auto; white-space: nowrap;}
#main .mod_customnav.schwangerschaftsDots li.entwicklungsPill:first-child a {margin-left: 0;}

/* Videos */
.videobereich nav {border: none;}
.videobereich #main .mod_navigation {margin: -20px 0 10px;}
.videobereich #main .mod_navigation ul {background: var(--c-cream);}
.videobereich #main .mod_navigation ul li {margin-bottom: 10px;}
.videobereich #main .mod_navigation ul li a:link, .videobereich #main .mod_navigation ul li a:visited, .videobereich .mod_navigation ul li span.active {padding: inherit; padding-left: 10px; padding-right: 10px;}
.videobereich #main .mod_navigation ul {padding: 10px 0 0;}

/* App Download */

.appDownload {width: 48%; display: inline-block; margin: 20px 0 0 0;}

/* Produktneuheiten */

body.neuheiten .content-image img {border-radius: 0; margin: 60px 0 0px 0px; float: none; max-width: none; width: 100%;}

body.neuheiten .content-gallery > ul {display: block;}
body.neuheiten .content-gallery li {width: 100%; margin: 7px 0;}
body.neuheiten .content-gallery img {margin: 0;}

/* Produkttest & Interview */

#produkttest .layout_full img {max-width: 100%; margin: 30px 0;}
	
#produkttest .layout_full .content-text.interview img {max-width: 100%;}

#produkttest .content-gallery > ul {display: block;}
#produkttest .content-gallery li {width: 100%; margin: 7px 0;}
#produkttest .content-gallery img {margin: 0;}

#produkttest .layout_full .content-text.specs ul li {width: 100%;}

#produkttest .videoWrapper p {margin: 0 auto 30px; max-width: none;}

/* Verzeichnis Eintrag */

	/* body.verzeichnisseite .grid .content-text {width: 100%;} */

	#f4 .widget {width: 100%; margin-bottom: 20px;}	

/* Comments */	
	
	.ce_comments h2 {background: var(--c-cream);}
	.ce_comments .checkbox_container input.checkbox {-webkit-appearance: checkbox;}

/* Newsletter */

/* .mod_subscribe narrow — nach components.css */
	
/* Eventkalender */	
	
.mod_eventlist .event a {	
	flex-wrap: wrap;
}

.mod_eventlist .event a h2, .mod_eventlist .event a p, .mod_eventlist .event a .time, .mod_eventlist .event a .location {
	width: 100%;
}

.mod_eventlist .event a .time {
	margin-bottom: -10px;
}

.mod_eventreader .event .info, .mod_eventreader .event .location {
	padding: 0 25px;
	width: 100%;
}

.mod_eventreader .event h1 {
	margin-top: -80px !important;
}

/* TImeline */

.se_timeline .content-text.item {width: 90%; padding-left: 5%; padding-right: 0; text-align: left; margin-bottom: 20px; border-left: 1px solid rgba(77, 91, 109, 0.7); border-right: none; margin-bottom: -1px;} 	
	.subhub .se_timeline .item:nth-of-type(2n) {left: 0;}
	.se_timeline .content-text.item p.dot, .se_timeline .content-text.item:nth-of-type(2n) .dot {left: -5px;}
	.se_timeline .content-text.item {margin-top: -3px;}
		.se_timeline .content-text.item h2:before, .se_timeline .content-text.item:nth-of-type(2n) h2:before {left: 0px; right: auto; top: 30px; width: 6%;}
		.se_timeline .content-text.item img {width: 100%;}

/* Footer */

#footer {padding-top: 50px; top: 0px;}	
	#footer .inside nav {margin: 0 0 50px 0; border: none; flex-basis: 50%;}
	#footer h5 {color: rgba(255, 255, 255, 0.6); padding-left: 5px;}
	#footer .mod_customnav h5 {margin-bottom: 10px;}
	#footer .mod_customnav li a:link, #footer .mod_customnav li a:visited {color: rgba(255, 255, 255, 0.8) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.2); padding: 5px;}
	#footer .mod_customnav li a:hover {}
	#footer .mod_customnav li strong.active {font-size: 0.9rem; border-bottom: 1px solid rgba(255, 255, 255, 0.2); padding: 5px; display: block;}

#sidebar {position: relative; top: -57px; right: auto; background: var(--c-cream);}

/* Hide Things on Mobile */

#header .pageselector select {display: none;}
#header .mod_navigation.maintop {display: none;}
#header .mod_search {right: 5px; top: -8px;}

::-webkit-scrollbar {
	width: 0px;
	height: 0;  /* Remove scrollbar space */
	background: transparent;  /* Optional: just make scrollbar invisible */
}
/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
	background: transparent;
}

/* - - - - - - - - - - */
/* - - MOBILE NAV - - - */
/* - - - - - - - - - - */

/* New NAV */

#nav-icon {width: 40px; height: 40px; position: fixed; display: block; top: 19px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg);-webkit-transition: 1s ease-in-out; -moz-transition: 1s ease-in-out; -o-transition: 1s ease-in-out; transition: 1s ease-in-out;cursor: pointer; z-index: 2000;-webkit-animation-duration: 1s; animation-duration: 1s;}
#nav-icon span {position: fixed; height: 4px; margin-bottom: 4px; width: 25px; background: var(--c-deep); opacity: 1; border-radius: 3px;-webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg);-webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}

#nav-icon span:nth-child(1) {top: 0px;}
	#nav-icon span:nth-child(2) {top: 8px;}
#nav-icon span:nth-child(3) {top: 16px;}

.mm-menu {
	background: var(--c-cream);
}

.mm-navbar {
	background: var(--c-deep);
	color: #FFF;
	padding-top: 0;
	margin-left: 0;
	font-family: var(--font-display);
	font-weight: 700;
	text-transform: uppercase;
}

.mm-menu a, .mm-menu a:active, .mm-menu a:hover, .mm-menu a:link, .mm-menu a:visited {
	letter-spacing: 0;
}

.menuheader {
	color: #c97474;
	background: rgb(255 128 120 / 15%);
	margin-top: 20px;
	padding: 11px 0 10px 20px;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 0.9rem;
}

.menuheader.mm-listitem, .menuheader.mm-listitem:after, .yaababy.mm-listitem:after {
	border-color: transparent;
}

.mm-listitem:last-child {border: 0px solid transparent;}

.yaababy a {
	background: #E0F8E8;
	margin: 18px;
	font-weight: 700;
	letter-spacing: 0px;
}

.ueberblick a {
	background: #fff url(/files/design/_icons/uebersicht.svg) 100% -14px no-repeat;
	background-size: 24%;
}

.ueberblick.mm-listitem:after {
	border-bottom-width: 0;
}

.mm-menu .nobottom {border-bottom: 0;}
.mm-btn:before {border-color: #FFF;}

@-webkit-keyframes flip {
  0% {
	-webkit-transform: perspective(400px) translateZ(0) rotateY(-360deg) scale(1);
	transform: perspective(400px) translateZ(0) rotateY(-360deg) scale(1);
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out;
  }
  40% {
	-webkit-transform: perspective(400px) translateZ(150px) rotateY(-190deg) scale(1);
	transform: perspective(400px) translateZ(150px) rotateY(-190deg) scale(1);
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out;
  }
  50% {
	-webkit-transform: perspective(400px) translateZ(150px) rotateY(-170deg) scale(1);
	transform: perspective(400px) translateZ(150px) rotateY(-170deg) scale(1);
	-webkit-animation-timing-function: ease-in;
	animation-timing-function: ease-in;
  }
  80% {
	-webkit-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(.95);
	transform: perspective(400px) translateZ(0) rotateY(0deg) scale(.95);
	-webkit-animation-timing-function: ease-in;
	animation-timing-function: ease-in;
  }
  100% {
	-webkit-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(1);
	transform: perspective(400px) translateZ(0) rotateY(0deg) scale(1);
	-webkit-animation-timing-function: ease-in;
	animation-timing-function: ease-in;
  }
}
@keyframes flip {
  0% {
	-webkit-transform: perspective(400px) translateZ(0) rotateY(-360deg) scale(1);
	-ms-transform: perspective(400px) translateZ(0) rotateY(-360deg) scale(1);
	transform: perspective(400px) translateZ(0) rotateY(-360deg) scale(1);
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out;
  }
  40% {
	-webkit-transform: perspective(400px) translateZ(150px) rotateY(-190deg) scale(1);
	-ms-transform: perspective(400px) translateZ(150px) rotateY(-190deg) scale(1);
	transform: perspective(400px) translateZ(150px) rotateY(-190deg) scale(1);
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out;
  }
  50% {
	-webkit-transform: perspective(400px) translateZ(150px) rotateY(-170deg) scale(1);
	-ms-transform: perspective(400px) translateZ(150px) rotateY(-170deg) scale(1);
	transform: perspective(400px) translateZ(150px) rotateY(-170deg) scale(1);
	-webkit-animation-timing-function: ease-in;
	animation-timing-function: ease-in;
  }
  80% {
	-webkit-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(.95);
	-ms-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(.95);
	transform: perspective(400px) translateZ(0) rotateY(0deg) scale(.95);
	-webkit-animation-timing-function: ease-in;
	animation-timing-function: ease-in;
  }
  100% {
	-webkit-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(1);
	-ms-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(1);
	transform: perspective(400px) translateZ(0) rotateY(0deg) scale(1);
	-webkit-animation-timing-function: ease-in;
	animation-timing-function: ease-in;
  }
}

}

.zaehlpixel {width: 1px; height: 1px; margin: 0; padding: 0;}

/* PAIDI */
.mod_article .content-text.sswAdvertorial .button.babyzimmer:link, .mod_article .content-text.sswAdvertorial .button.babyzimmer:visited {background: #c15c70; border: 1px solid #c15c70; margin-right: 10px;}
.mod_article .content-text.sswAdvertorial .button.babyzimmer:hover {background: #FFF; color: var(--c-cta); border: 1px solid #c15c70;}
#main .content-text a.button.babyzimmer:link {margin-right: 10px !important;}

.nobottom {padding-bottom: 1px !important; margin-bottom: 0px !important;}
}

/*!
 * mmenu.js
 * mmenujs.com
 *
 * Copyright (c) Fred Heusschen
 * frebsite.nl
 *
 * License: CC-BY-NC-4.0
 * http://creativecommons.org/licenses/by-nc/4.0/
 */

@layer mmenu {
:root{--mm-lineheight:20px;--mm-listitem-size:50px;--mm-navbar-size:50px;--mm-toggle-size:34px;--mm-color-border:rgba(0 0 0 / 0.1);--mm-color-button:rgba(0 0 0 / 0.3);--mm-color-text:rgba(0 0 0 / 0.75);--mm-color-text-dimmed:rgba(0 0 0 / 0.3);--mm-color-background:#f3f3f3;--mm-color-background-highlight:rgba(0 0 0 / 0.05);--mm-color-background-emphasis:rgba(255 255 255 / 0.4);--mm-color-focusring:#06c}.mm-hidden{display:none!important}.mm-wrapper{overflow-x:hidden;position:relative}.mm-btn{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;width:50px;padding:0}.mm-btn:after,.mm-btn:before{border:2px solid var(--mm-color-button)}.mm-btn--next:after,.mm-btn--prev:before{content:"";border-bottom:none;border-right:none;-webkit-box-sizing:content-box;box-sizing:content-box;display:block;width:8px;height:8px;margin:auto;position:absolute;top:0;bottom:0}.mm-btn--prev:before{-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);left:23px;right:auto}.mm-btn--next:after{-webkit-transform:rotate(135deg);-ms-transform:rotate(135deg);transform:rotate(135deg);right:23px;left:auto}.mm-btn--close:after,.mm-btn--close:before{content:"";-webkit-box-sizing:content-box;box-sizing:content-box;display:block;width:5px;height:5px;margin:auto;position:absolute;top:0;bottom:0;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)}.mm-btn--close:before{border-right:none;border-bottom:none;right:18px}.mm-btn--close:after{border-left:none;border-top:none;right:25px}.mm-btnreset{background:0 0;border:none;padding:0;cursor:pointer}[dir=rtl] .mm-btn--next:after{-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);left:23px;right:auto}[dir=rtl] .mm-btn--prev:before{-webkit-transform:rotate(135deg);-ms-transform:rotate(135deg);transform:rotate(135deg);right:23px;left:auto}[dir=rtl] .mm-btn--close:after,[dir=rtl] .mm-btn--close:before{right:auto}[dir=rtl] .mm-btn--close:before{left:25px}[dir=rtl] .mm-btn--close:after{left:18px}.mm-divider{-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;min-height:var(--mm-lineheight);padding:calc(((var(--mm-listitem-size) * .65) - var(--mm-lineheight)) * .5) 20px;font-size:75%;text-transform:uppercase;background:var(--mm-color-background);background-image:-webkit-gradient(linear,left top,left bottom,from(var(--mm-color-background-highlight)),to(var(--mm-color-background-highlight)));background-image:-o-linear-gradient(var(--mm-color-background-highlight),var(--mm-color-background-highlight));background-image:linear-gradient(var(--mm-color-background-highlight),var(--mm-color-background-highlight));opacity:1;-webkit-transition:opacity .4s ease;-o-transition:opacity .4s ease;transition:opacity .4s ease}@supports ((position:-webkit-sticky) or (position:sticky)){.mm-divider{position:-webkit-sticky;position:sticky;z-index:2;top:0}.mm-navbar:not(.mm-hidden)~.mm-listview .mm-divider{top:var(--mm-navbar-size)}}.mm-listview{list-style:none;display:block;padding:0;margin:0}.mm-listitem{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;position:relative;padding:0;margin:0;list-style:none;color:var(--mm-color-text);border-color:var(--mm-color-border)}.mm-listitem:after{content:"";border-color:inherit;border-bottom-width:1px;border-bottom-style:solid;display:block;position:absolute;left:20px;right:0;bottom:0}.mm-listitem__btn,.mm-listitem__text{display:block;padding:calc((var(--mm-listitem-size) - var(--mm-lineheight))/ 2) 0;color:inherit}.mm-listitem__text{-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding-left:20px;padding-right:20px;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:10%;flex-basis:10%}.mm-listitem__btn{background:rgba(3,2,1,0);border-color:inherit;width:auto;padding-right:50px;position:relative}.mm-listitem__btn:not(.mm-listitem__text){border-left-width:1px;border-left-style:solid}.mm-listitem--selected>.mm-listitem__text{background:var(--mm-color-background-emphasis)}.mm-listitem--opened>.mm-listitem__btn,.mm-listitem--opened>.mm-panel{background:var(--mm-color-background-highlight)}[dir=rtl] .mm-listitem:after{left:0;right:20px}[dir=rtl] .mm-listitem__btn{padding-left:50px;border-left-width:0;border-left-style:none}[dir=rtl] .mm-listitem__btn:not(.mm-listitem__text){padding-right:0;border-right-width:1px;border-right-style:solid}.mm-menu{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:0;margin:0;position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;-ms-scroll-chaining:none;overscroll-behavior:none;background:var(--mm-color-background);border-color:var(--mm-color-border);color:var(--mm-color-text);line-height:var(--mm-lineheight);-webkit-tap-highlight-color:var(--mm-color-background-emphasis);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.mm-menu,.mm-menu *{-webkit-box-sizing:border-box;box-sizing:border-box}.mm-menu :focus,.mm-menu :focus-visible,.mm-menu:focus,.mm-menu:focus-visible{outline:0}.mm-menu ::-webkit-input-placeholder{color:var(--mm-color-text-dimmed)}.mm-menu ::-moz-placeholder{color:var(--mm-color-text-dimmed)}.mm-menu :-ms-input-placeholder{color:var(--mm-color-text-dimmed)}.mm-menu ::-ms-input-placeholder{color:var(--mm-color-text-dimmed)}.mm-menu ::placeholder{color:var(--mm-color-text-dimmed)}.mm-menu a:focus,.mm-menu button:focus,.mm-menu label:focus{outline:0}.mm-menu a:focus-visible,.mm-menu button:focus-visible,.mm-menu label:focus-visible{outline:2px solid var(--mm-color-focusring);outline-offset:-5px}.mm-menu input:focus,.mm-menu input:focus-visible,.mm-menu select:focus,.mm-menu select:focus-visible,.mm-menu textarea:focus,.mm-menu textarea:focus-visible{outline:2px solid var(--mm-color-focusring);outline-offset:-2px}.mm-menu a,.mm-menu a:active,.mm-menu a:hover,.mm-menu a:link,.mm-menu a:visited{text-decoration:none;color:inherit}[dir=rtl] .mm-menu{direction:rtl}.mm-navbar{display:-webkit-box;display:-ms-flexbox;display:flex;min-height:var(--mm-navbar-size);padding-top:env(safe-area-inset-top);color:var(--mm-color-text-dimmed);text-align:center;opacity:1;background:var(--mm-color-background);border-bottom:1px solid var(--mm-color-border);-webkit-transition:opacity .4s ease;-o-transition:opacity .4s ease;transition:opacity .4s ease;position:-webkit-sticky;position:sticky;top:0;z-index:2}.mm-navbar>*{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box}.mm-navbar__btn{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0}.mm-navbar__title{-webkit-box-flex:1;-ms-flex:1 1 50%;flex:1 1 50%;display:-webkit-box;display:-ms-flexbox;display:flex;padding:0 20px;overflow:hidden}.mm-navbar__title[href="#"]{pointer-events:none}.mm-navbar__title>span{-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.mm-btn.mm-hidden+.mm-navbar__title:not(:last-child){padding-left:60px;padding-right:10px}.mm-btn:not(.mm-hidden)+.mm-navbar__title:last-child{padding-left:10px;padding-right:60px}[dir=rtl] .mm-navbar{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.mm-panel{visibility:hidden;position:absolute;left:0;right:0;top:0;bottom:0;z-index:1;-webkit-overflow-scrolling:touch;overflow:hidden;overflow-y:auto;-ms-scroll-chaining:none;overscroll-behavior:contain;color:var(--mm-color-text);border-color:var(--mm-color-border);background:var(--mm-color-background);-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);-webkit-transition:visibility 0s linear .4s,left .4s ease 0s,-webkit-transform .4s ease 0s;transition:visibility 0s linear .4s,left .4s ease 0s,-webkit-transform .4s ease 0s;-o-transition:visibility 0s linear .4s,transform .4s ease 0s,left .4s ease 0s;transition:visibility 0s linear .4s,transform .4s ease 0s,left .4s ease 0s;transition:visibility 0s linear .4s,transform .4s ease 0s,left .4s ease 0s,-webkit-transform .4s ease 0s}.mm-panel:after{content:"";display:block;height:var(--mm-listitem-size)}.mm-panel--opened{visibility:visible;z-index:2;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-webkit-transition-delay:0s;-o-transition-delay:0s;transition-delay:0s}.mm-panel--parent{-webkit-transform:translate3d(-30%,0,0);transform:translate3d(-30%,0,0);z-index:0}.mm-panel--highest{z-index:3}.mm-menu--opened .mm-panel--noanimation{-webkit-transition:none!important;-o-transition:none!important;transition:none!important;-webkit-transition-duration:0s!important;-o-transition-duration:0s!important;transition-duration:0s!important}.mm-panel__content{padding:20px 20px 0}[dir=rtl] .mm-panel{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}[dir=rtl] .mm-panel--opened{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}[dir=rtl] .mm-panel--parent{-webkit-transform:translate3d(30%,0,0);transform:translate3d(30%,0,0)}.mm-panels{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;position:relative;height:100%;overflow:hidden;background:var(--mm-color-background);border-color:var(--mm-color-border);color:var(--mm-color-text)}.mm-sronly{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;white-space:nowrap!important;width:1px!important;min-width:1px!important;height:1px!important;min-height:1px!important;padding:0!important;overflow:hidden!important;position:absolute!important}.mm-toggle{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-item-align:center;align-self:center;-webkit-box-flex:calc((var(--mm-toggle-size) * 1.7));-ms-flex:calc((var(--mm-toggle-size) * 1.7)) 0 0px;flex:calc((var(--mm-toggle-size) * 1.7)) 0 0;height:var(--mm-toggle-size);margin-right:10px;-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;border:none!important;border-radius:var(--mm-toggle-size);background:var(--mm-color-border);border:var(--mm-color-border);cursor:pointer;-webkit-transition:background-color .3s ease;-o-transition:background-color .3s ease;transition:background-color .3s ease}.mm-toggle:before{content:"";aspect-ratio:1;margin:1px;border-radius:100%;background:var(--mm-color-background);-webkit-transition:-webkit-transform .2s ease;transition:-webkit-transform .2s ease;-o-transition:transform .2s ease;transition:transform .2s ease;transition:transform .2s ease,-webkit-transform .2s ease}.mm-toggle:checked{background:#4bd963}.mm-toggle:checked:before{-webkit-transform:translateX(calc(var(--mm-toggle-size) * 1.7 - var(--mm-toggle-size)));-ms-transform:translateX(calc(var(--mm-toggle-size) * 1.7 - var(--mm-toggle-size)));transform:translateX(calc(var(--mm-toggle-size) * 1.7 - var(--mm-toggle-size)))}.mm-listitem--vertical>.mm-panel{position:static;width:100%;padding:10px 0 10px 10px;-webkit-transform:none!important;-ms-transform:none!important;transform:none!important;-webkit-transition:none!important;-o-transition:none!important;transition:none!important}.mm-listitem--vertical>.mm-panel:after{content:none;display:none}.mm-listitem--vertical:not(.mm-listitem--opened)>.mm-panel{display:none}.mm-listitem--vertical.mm-listitem--opened>.mm-panel{visibility:visible}.mm-listitem--vertical>.mm-listitem__btn{height:var(--mm-listitem-size);bottom:auto}.mm-listitem--vertical .mm-listitem:last-child:after{border-color:transparent}.mm-listitem--opened>.mm-listitem__btn:after{-webkit-transform:rotate(225deg);-ms-transform:rotate(225deg);transform:rotate(225deg);right:19px}:root{--mm-size:80%;--mm-min-size:240px;--mm-max-size:440px}.mm-menu--offcanvas{position:fixed;right:auto;z-index:0;width:clamp(var(--mm-min-size),var(--mm-size),var(--mm-max-size));-webkit-transition:visibility 0s linear .4s;-o-transition:visibility 0s linear .4s;transition:visibility 0s linear .4s}.mm-menu--offcanvas.mm-menu--opened{-webkit-transition-delay:0s;-o-transition-delay:0s;transition-delay:0s}.mm-menu--offcanvas:not(.mm-menu--opened){visibility:hidden;pointer-events:none}.mm-menu--offcanvas:not(.mm-menu--opened) *{visibility:inherit}.mm-page{-webkit-box-sizing:border-box;box-sizing:border-box;min-height:100vh;background:inherit}.mm-slideout{position:relative;z-index:1;width:100%;-webkit-transition:width .4s ease,-webkit-transform .4s ease;transition:width .4s ease,-webkit-transform .4s ease;-o-transition:width .4s ease,transform .4s ease;transition:width .4s ease,transform .4s ease;transition:width .4s ease,transform .4s ease,-webkit-transform .4s ease}.mm-wrapper--opened .mm-slideout{-webkit-transform:translate3d(clamp(var(--mm-min-size),var(--mm-size),var(--mm-max-size)),0,0);transform:translate3d(clamp(var(--mm-min-size),var(--mm-size),var(--mm-max-size)),0,0)}.mm-wrapper--opened{overflow:hidden}.mm-wrapper--opened body{overflow:hidden}.mm-wrapper__blocker{visibility:hidden;position:fixed;top:0;right:0;bottom:0;left:100%;z-index:2;overflow:hidden;opacity:0;background:rgba(0,0,0,.3);-webkit-transition:opacity .4s ease .4s;-o-transition:opacity .4s ease .4s;transition:opacity .4s ease .4s}.mm-wrapper--opened .mm-wrapper__blocker{visibility:visible;left:0}.mm-wrapper--opened .mm-wrapper__blocker{opacity:.5}.mm-wrapper__blocker:focus{opacity:1}.mm-counter{display:block;padding-left:20px;float:right;text-align:right;color:var(--mm-color-text-dimmed)}[dir=rtl] .mm-counter{text-align:left;float:left;padding-left:0;padding-right:20px}:root{--mm-iconbar-size:50px}.mm-menu--iconbar-left .mm-navbars,.mm-menu--iconbar-left .mm-panels{margin-left:var(--mm-iconbar-size)}.mm-menu--iconbar-right .mm-navbars,.mm-menu--iconbar-right .mm-panels{margin-right:var(--mm-iconbar-size)}.mm-iconbar{display:none;position:absolute;top:0;bottom:0;z-index:2;width:var(--mm-iconbar-size);overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box;border:0 solid;border-color:var(--mm-color-border);background:var(--mm-color-background);color:var(--mm-color-text-dimmed);text-align:center}.mm-menu--iconbar-left .mm-iconbar,.mm-menu--iconbar-right .mm-iconbar{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.mm-menu--iconbar-left .mm-iconbar{border-right-width:1px;left:0}.mm-menu--iconbar-right .mm-iconbar{border-left-width:1px;right:0}.mm-iconbar__bottom,.mm-iconbar__top{width:100%;-webkit-overflow-scrolling:touch;overflow:hidden;overflow-y:auto;-ms-scroll-chaining:none;overscroll-behavior:contain}.mm-iconbar__bottom>*,.mm-iconbar__top>*{-webkit-box-sizing:border-box;box-sizing:border-box;display:block;padding:calc((var(--mm-iconbar-size) - var(--mm-lineheight))/ 2) 0}.mm-iconbar__bottom a,.mm-iconbar__bottom a:hover,.mm-iconbar__top a,.mm-iconbar__top a:hover{text-decoration:none}.mm-iconbar__tab--selected{background:var(--mm-color-background-emphasis)}:root{--mm-iconpanel-size:50px}.mm-panel--iconpanel-0{left:0}.mm-panel--iconpanel-1{left:var(--mm-iconpanel-size)}.mm-panel--iconpanel-2{left:calc(var(--mm-iconpanel-size) * 2)}.mm-panel--iconpanel-3{left:calc(var(--mm-iconpanel-size) * 3)}.mm-panel--iconpanel-first~.mm-panel{left:var(--mm-iconpanel-size)}.mm-menu--iconpanel .mm-panel--parent .mm-divider,.mm-menu--iconpanel .mm-panel--parent .mm-navbar{opacity:0}.mm-menu--iconpanel .mm-panels>.mm-panel--parent{visibility:visible!important;overflow-y:hidden;-webkit-transform:unset;-ms-transform:unset;transform:unset}.mm-menu--iconpanel .mm-panels>.mm-panel:not(.mm-panel--iconpanel-first):not(.mm-panel--iconpanel-0){border-left-width:1px;border-left-style:solid}.mm-panel__blocker{display:block;visibility:hidden;position:absolute;top:0;right:0;left:0;z-index:3;opacity:0;background:var(--mm-color-background)}.mm-panel--parent .mm-panel__blocker{visibility:visible;bottom:-100000px;opacity:.6}[dir=rtl] .mm-menu--iconpanel .mm-panels>.mm-panel{left:0;right:auto;-webkit-transition-property:width,-webkit-transform;transition-property:width,-webkit-transform;-o-transition-property:transform,width;transition-property:transform,width;transition-property:transform,width,-webkit-transform}[dir=rtl] .mm-menu--iconpanel .mm-panels>.mm-panel:not(.mm-panel--iconpanel-first):not(.mm-panel--iconpanel-0){border-left:none;border-right:1px solid;border-color:inherit}.mm-navbars{-ms-flex-negative:0;flex-shrink:0}.mm-navbars .mm-navbar{position:relative;padding-top:0;border-bottom:none}.mm-navbars--top{border-bottom:1px solid var(--mm-color-border)}.mm-navbars--top .mm-navbar:first-child{padding-top:env(safe-area-inset-top)}.mm-navbars--bottom{border-top:1px solid var(--mm-color-border)}.mm-navbars--bottom .mm-navbar:last-child{padding-bottom:env(safe-area-inset-bottom)}.mm-navbar__breadcrumbs{-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;-webkit-box-flex:1;-ms-flex:1 1 50%;flex:1 1 50%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;padding:0 20px;overflow-x:auto;-webkit-overflow-scrolling:touch}.mm-navbar__breadcrumbs>*{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding-right:6px}.mm-navbar__breadcrumbs>a{text-decoration:underline}.mm-navbar__breadcrumbs:not(:last-child){padding-right:0}.mm-btn:not(.mm-hidden)+.mm-navbar__breadcrumbs{padding-left:0}.mm-navbar__tab{padding:0 10px;border:1px solid transparent}.mm-navbar__tab--selected{background:var(--mm-color-background)}.mm-navbar__tab--selected:not(:first-child){border-left-color:var(--mm-color-border)}.mm-navbar__tab--selected:not(:last-child){border-right-color:var(--mm-color-border)}.mm-navbars--top.mm-navbars--has-tabs{border-bottom:none}.mm-navbars--top.mm-navbars--has-tabs .mm-navbar{background:var(--mm-color-background-emphasis)}.mm-navbars--top.mm-navbars--has-tabs .mm-navbar--tabs~.mm-navbar{background:var(--mm-color-background)}.mm-navbars--top.mm-navbars--has-tabs .mm-navbar:not(.mm-navbar--tabs):last-child{border-bottom:1px solid var(--mm-color-border)}.mm-navbars--top .mm-navbar__tab{border-bottom-color:var(--mm-color-border)}.mm-navbars--top .mm-navbar__tab--selected{border-top-color:var(--mm-color-border);border-bottom-color:transparent}.mm-navbars--bottom.mm-navbars--has-tabs{border-top:none}.mm-navbars--bottom.mm-navbars--has-tabs .mm-navbar{background:var(--mm-color-background)}.mm-navbars--bottom.mm-navbars--has-tabs .mm-navbar--tabs,.mm-navbars--bottom.mm-navbars--has-tabs .mm-navbar--tabs~.mm-navbar{background:var(--mm-color-background-emphasis)}.mm-navbars--bottom .mm-navbar__tab{border-top-color:var(--mm-color-border)}.mm-navbars--bottom .mm-navbar__tab--selected{border-bottom-color:var(--mm-color-border);border-top-color:transparent}.mm-searchfield{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;height:var(--mm-navbar-size);padding:0;overflow:hidden}.mm-searchfield__input{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;width:100%;max-width:100%;padding:0 10px;-webkit-box-sizing:border-box;box-sizing:border-box}.mm-searchfield__input input{display:block;width:100%;max-width:100%;height:calc(var(--mm-navbar-size) * .7);min-height:auto;max-height:auto;margin:0;padding:0 10px;-webkit-box-sizing:border-box;box-sizing:border-box;border:none;border-radius:4px;line-height:calc(var(--mm-navbar-size) * .7);font:inherit;font-size:inherit}.mm-searchfield__input input,.mm-searchfield__input input:focus,.mm-searchfield__input input:hover{background:var(--mm-color-background-highlight);color:var(--mm-color-text)}.mm-searchfield__input input::-ms-clear{display:none}.mm-searchfield__btn{display:none;position:absolute;right:0;top:0;bottom:0}.mm-searchfield--searching .mm-searchfield__btn{display:block}.mm-searchfield__cancel{display:block;visibility:hidden;max-width:0;line-height:var(--mm-navbar-size);text-decoration:none;-webkit-transition:none .2s linear;-o-transition:none .2s linear;transition:none .2s linear;-webkit-transition-property:visibility,max-width,padding;-o-transition-property:visibility,max-width,padding;transition-property:visibility,max-width,padding}.mm-searchfield--cancelable .mm-searchfield__cancel{visibility:visible;max-width:75px;padding-right:10px}.mm-panel--search{left:0!important;right:0!important;width:100%!important;border:none!important}.mm-panel__splash{padding:20px}.mm-panel--searching .mm-panel__splash{display:none}.mm-panel__noresults{display:none;padding:40px 20px;color:var(--mm-color-text-dimmed);text-align:center;font-size:150%}.mm-panel--noresults .mm-panel__noresults{display:block}:root{--mm-sectionindexer-size:20px}.mm-sectionindexer{background:inherit;text-align:center;font-size:12px;-webkit-box-sizing:border-box;box-sizing:border-box;width:var(--mm-sectionindexer-size);position:absolute;top:0;bottom:0;right:calc(0px - var(--mm-sectionindexer-size));z-index:5;-webkit-transition:right .4s ease;-o-transition:right .4s ease;transition:right .4s ease;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly}.mm-sectionindexer a{color:var(--mm-color-text-dimmed);line-height:1;text-decoration:none;display:block}.mm-sectionindexer~.mm-panel{padding-right:0}.mm-sectionindexer--active{right:0}.mm-sectionindexer--active~.mm-panel{padding-right:var(--mm-sectionindexer-size)}.mm-menu--selected-hover .mm-listitem__btn,.mm-menu--selected-hover .mm-listitem__text,.mm-menu--selected-parent .mm-listitem__btn,.mm-menu--selected-parent .mm-listitem__text{-webkit-transition:background-color .4s ease;-o-transition:background-color .4s ease;transition:background-color .4s ease}@media (hover:hover){.mm-menu--selected-hover .mm-listview:hover>.mm-listitem--selected:not(:hover)>.mm-listitem__text{background:0 0}.mm-menu--selected-hover .mm-listitem__btn:hover,.mm-menu--selected-hover .mm-listitem__text:hover{background:var(--mm-color-background-emphasis)}}.mm-menu--selected-parent .mm-listitem__btn,.mm-menu--selected-parent .mm-listitem__text{-webkit-transition-delay:.2s;-o-transition-delay:.2s;transition-delay:.2s}@media (hover:hover){.mm-menu--selected-parent .mm-listitem__btn:hover,.mm-menu--selected-parent .mm-listitem__text:hover{-webkit-transition-delay:0s;-o-transition-delay:0s;transition-delay:0s}}.mm-menu--selected-parent .mm-panel--parent .mm-listitem:not(.mm-listitem--selected-parent)>.mm-listitem__text{background:0 0}.mm-menu--selected-parent .mm-listitem--selected-parent>.mm-listitem__btn,.mm-menu--selected-parent .mm-listitem--selected-parent>.mm-listitem__text{background:var(--mm-color-background-emphasis)}:root{--mm-sidebar-collapsed-size:50px;--mm-sidebar-expanded-size:var(--mm-max-size)}.mm-wrapper--sidebar-collapsed .mm-page,.mm-wrapper--sidebar-expanded .mm-page{background:inherit;-webkit-box-sizing:border-box;box-sizing:border-box;min-height:100vh}.mm-wrapper--sidebar-collapsed .mm-menu--sidebar-collapsed,.mm-wrapper--sidebar-expanded .mm-menu--sidebar-expanded{top:0!important;right:auto!important;bottom:0!important;left:0!important;visibility:visible!important}.mm-wrapper--sidebar-collapsed:not(.mm-wrapper--opened) .mm-slideout{width:calc(100% - var(--mm-sidebar-collapsed-size));-webkit-transform:translate3d(var(--mm-sidebar-collapsed-size),0,0);transform:translate3d(var(--mm-sidebar-collapsed-size),0,0)}.mm-wrapper--sidebar-collapsed:not(.mm-wrapper--opened) .mm-panel--opened{visibility:visible}.mm-wrapper--sidebar-collapsed:not(.mm-wrapper--opened) .mm-menu--sidebar-collapsed .mm-divider,.mm-wrapper--sidebar-collapsed:not(.mm-wrapper--opened) .mm-menu--sidebar-collapsed .mm-navbar{opacity:0}.mm-wrapper--sidebar-expanded .mm-menu--sidebar-expanded{width:var(--mm-sidebar-expanded-size);border-right-width:1px;border-right-style:solid}.mm-wrapper--sidebar-expanded.mm-wrapper--opened{overflow:auto}.mm-wrapper--sidebar-expanded.mm-wrapper--opened .mm-wrapper__blocker{display:none!important}.mm-wrapper--sidebar-expanded.mm-wrapper--opened .mm-menu--sidebar-expanded~.mm-slideout{width:calc(100% - var(--mm-sidebar-expanded-size));-webkit-transform:translate3d(var(--mm-sidebar-expanded-size),0,0);transform:translate3d(var(--mm-sidebar-expanded-size),0,0)}.mm-menu__blocker{visibility:visible;display:block;position:absolute;top:0;right:0;left:0;bottom:0;z-index:3;opacity:.5;background:var(--mm-color-background);pointer-events:auto}.mm-menu--opened .mm-menu__blocker{visibility:hidden;bottom:100%;opacity:0}[dir=rtl].mm-wrapper--sidebar-collapsed .mm-slideout{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}[dir=rtl].mm-wrapper--sidebar-expanded .mm-slideout{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}[dir=rtl].mm-wrapper--sidebar-expanded:not(.mm-wrapper--sidebar-closed) .mm-menu--sidebar-expanded.mm-menu--opened~.mm-slideout{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.mm-menu--fullscreen{--mm-size:100%;--mm-min-size:100%;--mm-max-size:100%}.mm-menu--fullscreen.mm-menu--opened~.mm-slideout{--mm-size:100%;--mm-min-size:100%;--mm-max-size:100%}.mm-menu--position-right{left:auto;right:0}.mm-menu--position-right.mm-menu--opened~.mm-slideout{-webkit-transform:translate3d(clamp(calc((1px - 1px) - var(--mm-max-size)),calc((1px - 1px) - var(--mm-size)),calc((1px - 1px) - var(--mm-min-size))),0,0);transform:translate3d(clamp(calc((1px - 1px) - var(--mm-max-size)),calc((1px - 1px) - var(--mm-size)),calc((1px - 1px) - var(--mm-min-size))),0,0)}.mm-menu--position-front{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}.mm-menu--position-front.mm-menu--position-right{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}.mm-menu--position-bottom,.mm-menu--position-top{width:100%;height:clamp(var(--mm-min-size),var(--mm-size),var(--mm-max-size))}.mm-menu--position-top{bottom:auto;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}.mm-menu--position-bottom{top:auto;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}.mm-menu--position-bottom,.mm-menu--position-front,.mm-menu--position-top{z-index:2;-webkit-transition:visibility 0s linear .4s,-webkit-transform .4s ease 0s;transition:visibility 0s linear .4s,-webkit-transform .4s ease 0s;-o-transition:visibility 0s linear .4s,transform .4s ease 0s;transition:visibility 0s linear .4s,transform .4s ease 0s;transition:visibility 0s linear .4s,transform .4s ease 0s,-webkit-transform .4s ease 0s}.mm-menu--position-bottom.mm-menu--opened,.mm-menu--position-front.mm-menu--opened,.mm-menu--position-top.mm-menu--opened{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.mm-menu--position-bottom.mm-menu--opened~.mm-slideout,.mm-menu--position-front.mm-menu--opened~.mm-slideout,.mm-menu--position-top.mm-menu--opened~.mm-slideout{-webkit-transform:none!important;-ms-transform:none!important;transform:none!important}.mm-menu--position-bottom.mm-menu--opened~.mm-wrapper__blocker,.mm-menu--position-front.mm-menu--opened~.mm-wrapper__blocker,.mm-menu--position-top.mm-menu--opened~.mm-wrapper__blocker{z-index:1}.mm-menu--theme-white{--mm-color-border:rgba(0, 0, 0, 0.1);--mm-color-button:rgba(0, 0, 0, 0.3);--mm-color-text:rgba(0, 0, 0, 0.7);--mm-color-text-dimmed:rgba(0, 0, 0, 0.3);--mm-color-background:#fff;--mm-color-background-highlight:rgba(0, 0, 0, 0.06);--mm-color-background-emphasis:rgba(0, 0, 0, 0.03)}.mm-menu--theme-dark{--mm-color-border:rgba(0, 0, 0, 0.3);--mm-color-button:rgba(255, 255, 255, 0.4);--mm-color-text:rgba(255, 255, 255, 0.85);--mm-color-text-dimmed:rgba(255, 255, 255, 0.4);--mm-color-background:#333;--mm-color-background-highlight:rgba(255, 255, 255, 0.08);--mm-color-background-emphasis:rgba(0, 0, 0, 0.1)}.mm-menu--theme-black{--mm-color-border:rgba(255, 255, 255, 0.25);--mm-color-button:rgba(255, 255, 255, 0.4);--mm-color-text:rgba(255, 255, 255, 0.75);--mm-color-text-dimmed:rgba(255, 255, 255, 0.4);--mm-color-background:#000;--mm-color-background-highlight:rgba(255, 255, 255, 0.2);--mm-color-background-emphasis:rgba(255, 255, 255, 0.15)}
}

/* ============================================================
   schwanger.at — pages.css
   Layer: pages  |  Quelle: design.md §3.1 + Referenz SSW-Seite
   Seitentyp-Modifier. Live-Anker: body.sswAnsicht (Legacy-Klasse,
   Backend-API). Optional zusätzlich body.p-ssw.
   Einbindung: Datei 8 im Contao-Seitenlayout, oder via Import
   aus 1-tokens.css (damit der Layer ohne Backend-Änderung lädt).
   ============================================================ */

@layer pages {

  /* ============================================
     SSW-Seite  (body.sswAnsicht)
     Referenz: design/referenz/schwanger_at___SSW-Seite_dc.html
     ============================================ */

  .sswAnsicht #main {
    background: #fff;
    max-width: 1100px;
    margin-inline: auto;
  }

  .sswAnsicht #main .inside {
    max-width: none;
  }

  /* Woche-Navigator: Cream-Mid-Band, volle Spaltenbreite */
  .sswAnsicht .schwangerschaftsDots {
    background: var(--c-cream-mid);
    height: auto;
    margin-inline: calc(-1 * var(--pad-x));
    width: calc(100% + 2 * var(--pad-x));
    padding: 16px var(--pad-x);
    overflow: visible;
  }

  .sswAnsicht .schwangerschaftsDots ul {
    height: auto;
    padding: 0 40px 0 0;
    gap: 8px;
  }

  /* Artikel-Spalte: Lesetext auf --w-prose */
  .sswAnsicht .mod_article > * {
    max-width: var(--w-prose);
    margin-inline: auto;
    width: 100%;
  }

  .sswAnsicht .mod_article {
    padding: 8px 0 0;
  }

  .sswAnsicht h1[data-week]::before {
    content: attr(data-week);
    display: block;
    width: fit-content;
    margin-bottom: 14px;
    background: var(--c-blush);
    color: var(--c-blush-text);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: var(--radius-s);
  }

  .sswAnsicht .mod_breadcrumb {
    max-width: var(--w-prose);
    padding-top: 22px;
    padding-bottom: 0;
  }

  .sswAnsicht .content-text {
    padding-top: 0;
    padding-bottom: 0;
    background: transparent;
    color: var(--c-text);
  }

  .sswAnsicht .content-text h1 {
    margin: 0 0 14px;
    font-weight: 400;
  }

  .sswAnsicht .content-text h2 {
    margin: 32px 0 14px;
    font-weight: 400;
  }

  .sswAnsicht .content-text p {
    font-size: var(--fs-body);
    line-height: 1.75;
    margin-bottom: 18px;
  }

  /* Hero + Embryo: Text links, Blob-Bild rechts
     Markup: h1, figure, .rte  bzw. figure, .rte */
  .sswAnsicht .media--right {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    align-items: flex-start;
    margin-bottom: 34px;
  }

  .sswAnsicht .media--right h1,
  .sswAnsicht .media--right h2 {
    flex: 1 0 100%;
  }

  .sswAnsicht .media--right .rte {
    flex: 1;
    min-width: 260px;
    order: 1;
  }

  .sswAnsicht .media--right figure {
    width: 280px;
    flex: none;
    order: 2;
    margin: 0;
    float: none;
    border-radius: var(--blob-a);
    overflow: hidden;
    aspect-ratio: 3 / 4;
    background: var(--c-cream);
  }

  .sswAnsicht .media--right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
  }

  .sswAnsicht .media--right figcaption {
    text-align: center;
    margin-top: 8px;
  }

  /* Advertorial bricht aus der Prose-Spalte aus */
  .sswAnsicht .sswAdvertorial {
    max-width: none;
    background: var(--c-cream);
    border-radius: 0;
    padding: 0 0 14px;
    margin: 28px 0;
    overflow: hidden;
  }

  .sswAnsicht .sswAdvertorial figure {
    width: 100%;
    float: none;
    margin: 0;
    border-radius: 0;
    aspect-ratio: 21 / 9;
    overflow: hidden;
  }

  .sswAnsicht .sswAdvertorial img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
  }

  .sswAnsicht .sswAdvertorial .rte,
  .sswAnsicht .sswAdvertorial h2,
  .sswAnsicht .sswAdvertorial h3 {
    padding-inline: var(--pad-x);
  }

  .sswAnsicht .sswAdvertorial .button {
    background: var(--c-coral);
    margin-inline: var(--pad-x);
  }

  /* Meilensteine + Checkliste: eigener Marker, kein Coral-Dot */
  .sswMeilensteine ul,
  .sswCheckliste ul {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
  }

  .sswMeilensteine li,
  .sswCheckliste li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 0;
    font-size: 15px;
    line-height: 1.65;
    color: var(--c-text);
    background: none;
    border: none;
  }

  .sswMeilensteine li::before,
  .sswCheckliste li::before {
    content: "♥";
    flex: none;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--c-sage);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
  }

  .sswCheckliste li::before {
    content: "✓";
    background: var(--c-coral-pale);
    color: var(--c-cta);
  }

  .sswBox {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: var(--w-prose);
    margin-inline: auto;
    width: 100%;
  }

  /* Unser Tipp */
  .sswTipp {
    background: var(--c-cream);
    border-radius: var(--radius-l);
    padding: 26px 30px;
    margin: 24px 0;
  }

  .sswTipp h2 {
    margin-top: 0;
  }

  /* FAQ: Trust-Soft-Box, Hairline-Akkordeon */
  .sswAnsicht .content-accordion {
    background: var(--c-trust-soft);
    border-radius: var(--radius-l);
    padding: 30px 30px 10px;
    margin: 0 0 34px;
    max-width: var(--w-prose);
  }

  .sswAnsicht .content-accordion h2 {
    margin: 0 0 18px;
    font-size: 22px;
  }

  .sswAnsicht .handorgel__header {
    border-bottom: var(--border-hair);
    margin: 0;
    padding: 0;
  }

  .sswAnsicht .handorgel__header__button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 0;
    background: none;
    border: none;
    font-family: var(--font-body);
    font-style: normal;
    font-weight: 600;
    font-size: 15px;
    color: var(--c-deep);
    text-align: left;
    cursor: pointer;
  }

  .sswAnsicht .handorgel__header__button::after {
    content: "+";
    flex: none;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--c-trust);
    transition: var(--ease);
  }

  .sswAnsicht .handorgel__header--open .handorgel__header__button::after {
    transform: rotate(45deg);
  }

  .sswAnsicht .handorgel__content__inner {
    padding: 0 0 16px;
  }

  .sswAnsicht .handorgel__content p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--c-text-soft);
    margin: 0;
  }

  /* Expert*innen-Box */
  :is(.sswAnsicht .review, .mod_article > .review) {
    position: relative;
    max-width: var(--w-prose);
    margin: 36px auto;
    padding: 36px 28px;
    background: var(--c-cream-mid);
    border-radius: var(--radius-l);
    text-align: center;
    overflow: hidden;
  }

  :is(.sswAnsicht .review, .mod_article > .review)::before,
  :is(.sswAnsicht .review, .mod_article > .review)::after {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
    opacity: 0.5;
  }

  :is(.sswAnsicht .review, .mod_article > .review)::before {
    width: 110px;
    height: 110px;
    background: var(--c-coral-pale);
    top: -30px;
    left: -24px;
    border-radius: var(--blob-a);
  }

  :is(.sswAnsicht .review, .mod_article > .review)::after {
    width: 80px;
    height: 80px;
    background: var(--c-sage);
    bottom: -24px;
    right: 10%;
    border-radius: var(--blob-b);
  }

  :is(.sswAnsicht .review, .mod_article > .review) h4 {
    position: relative;
    z-index: 1;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 20px;
    color: var(--c-deep);
    margin: 0 0 20px;
    padding: 0;
  }

  :is(.sswAnsicht .review, .mod_article > .review) h4::before {
    content: "Von Expert*innen geprüft";
    display: block;
    font-family: var(--font-hand);
    font-size: 22px;
    font-weight: 600;
    color: var(--c-coral);
    line-height: 1;
    margin-bottom: 2px;
    text-transform: none;
    letter-spacing: 0;
  }

  :is(.sswAnsicht .review, .mod_article > .review) figure {
    position: relative;
    z-index: 1;
    width: 146px;
    height: 146px;
    margin: 0 auto 12px;
    float: none;
    border-radius: var(--blob-a);
    overflow: hidden;
  }

  :is(.sswAnsicht .review, .mod_article > .review) img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    border: none;
    border-radius: 0;
    padding: 0;
    float: none;
  }

  :is(.sswAnsicht .review, .mod_article > .review) .rte,
  :is(.sswAnsicht .review, .mod_article > .review) p {
    position: relative;
    z-index: 1;
    max-width: 480px;
    margin: 0 auto;
    font-size: var(--fs-teaser);
    line-height: 1.65;
    font-style: normal;
    color: var(--c-text-soft);
  }

  :is(.sswAnsicht .review, .mod_article > .review) p strong {
    display: block;
    font-size: var(--fs-teaser);
    font-weight: 600;
    color: var(--c-deep);
    margin-bottom: 2px;
  }

  /* Prev / Next */
  .sswAnsicht .mod_booknav {
    max-width: var(--w-prose);
    margin: 0 auto 28px;
    padding: 6px;
    background: var(--c-cream);
    border-radius: var(--radius-m);
    text-align: center;
  }

  .sswAnsicht .mod_booknav ul {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    padding: 0;
  }

  .sswAnsicht .mod_booknav li {
    flex: 1;
    display: block;
    height: auto;
    margin: 0;
  }

  .sswAnsicht .mod_booknav .up {
    display: none;
  }

  .sswAnsicht .mod_booknav a {
    display: block;
    padding: 12px 16px;
    border: none;
    border-radius: var(--radius-s);
    box-shadow: none;
    font-size: var(--fs-teaser);
    font-weight: 700;
    text-align: center;
    margin: 0;
    max-width: none;
    background: var(--c-white);
    color: var(--c-deep);
  }

  .sswAnsicht .mod_booknav .previous a::before {
    content: "← ";
  }

  .sswAnsicht .mod_booknav .next a {
    background: var(--c-cta);
    color: #fff;
  }

  .sswAnsicht .mod_booknav .next a::after {
    content: " →";
  }

  .sswAnsicht .mod_booknav a:hover {
    background: var(--c-cta-dark);
    color: #fff;
  }

  /* SSW-Newsletter-Band */
  .sswAnsicht .zurSSWanmeldung {
    position: relative;
    background: var(--c-coral-muted);
    padding: 44px var(--pad-x);
    margin: 0 calc(-1 * var(--pad-x)) 0;
    width: calc(100% + 2 * var(--pad-x));
    text-align: center;
    overflow: hidden;
  }

  .sswAnsicht .zurSSWanmeldung::before,
  .sswAnsicht .zurSSWanmeldung::after {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
  }

  .sswAnsicht .zurSSWanmeldung::before {
    width: 140px;
    height: 140px;
    background: var(--c-coral-pale);
    top: -44px;
    left: -20px;
    opacity: 0.5;
    border-radius: var(--blob-a);
  }

  .sswAnsicht .zurSSWanmeldung::after {
    width: 90px;
    height: 90px;
    background: var(--c-coral-pale);
    bottom: -30px;
    right: 12%;
    opacity: 0.6;
    border-radius: var(--blob-b);
  }

  .sswAnsicht .zurSSWanmeldung .inside {
    position: relative;
    z-index: 1;
    max-width: 480px;
    margin-inline: auto;
    padding: 0;
    width: auto;
    background: none;
  }

  .sswAnsicht .zurSSWanmeldung h2 {
    font-size: 21px;
    font-style: normal;
    font-weight: 400;
    margin: 0 0 6px;
    padding: 0;
    color: var(--c-deep);
  }

  .sswAnsicht .zurSSWanmeldung h2::before {
    content: "Für dich & dein Baby";
    display: block;
    font-family: var(--font-hand);
    font-size: var(--fs-hand);
    font-weight: 600;
    color: var(--c-warm-brown);
    line-height: 1;
    margin-bottom: 2px;
  }

  .sswAnsicht .zurSSWanmeldung p {
    font-size: var(--fs-meta);
    color: var(--c-warm-brown);
    margin-bottom: 0;
  }

  .sswAnsicht .zurSSWanmeldung .button {
    margin: 18px auto 16px;
  }

  /* Produktproben: zurückhaltend. Newsletter-Band kommt aus components. */
  .sswAnsicht .produktprobenLink {
    max-width: var(--w-prose);
    margin: 0 auto 24px;
    padding: 24px var(--pad-x);
    background: var(--c-cream);
    border-radius: var(--radius-l);
    text-align: center;
  }

  @media (max-width: 640px) {
    .sswAnsicht .media--right figure {
      width: 100%;
      max-width: 280px;
      margin-inline: auto;
    }

    :is(.sswAnsicht .review, .mod_article > .review),
    .sswAnsicht .sswTipp,
    .sswAnsicht .content-accordion {
      padding-inline: 22px;
    }

    .sswAnsicht .mod_booknav ul {
      flex-direction: column;
    }
  }

  /* ============================================
     Artikel- & Nachrichtenseiten  (.mod_newsreader)
     Gilt für Artikel, News/Neuheiten, Produkttests, Interviews,
     Namen-Artikel und Expert*innen-Profile (gleicher Newsreader).
     Referenz: design/referenz/schwanger_at___Artikelseite_dc.html
     Kopf: H1 links in der Lesespalte, Meta-Zeile mit Hairline,
     Share-Leiste (Desktop: mitlaufend links neben dem Text).
     Abstände nur über --space-*, Schrift nur über die Typo-Skala.
     ============================================ */

  .mod_newsreader .layout_full > h1 {
    width: auto;
    max-width: var(--w-prose);
    margin: var(--space-m) auto 0;
    padding: 0;
    background: none;
    font-family: var(--font-display);
    font-size: var(--fs-h1);
    font-weight: 400;
    font-style: normal;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--c-deep);
    text-align: left;
  }

  .mod_newsreader .layout_full > h1 em {
    font-style: italic;
  }

  .mod_newsreader .letztesUpdate {
    display: block;
    width: auto;
    max-width: var(--w-prose);
    margin: var(--space-s) auto var(--space-m);
    padding: 0 0 var(--space-s);
    background: none;
    border-bottom: var(--border-hair);
    font-size: var(--fs-meta);
    line-height: 1.5;
    color: var(--c-text-muted);
    text-align: left;
  }

  /* Prose: fluide Schrift, Bilder als Ausbrecher auf --w-content.
     Abstand zwischen Textblöcken kommt nur von h2 / p (keine
     zusätzlichen Block-Margins aus Legacy). */
  .mod_newsreader .layout_full > .content-text:not(.pageAdvertorial) {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  .mod_newsreader .content-text p,
  .mod_newsreader .content-text li {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
  }

  .mod_newsreader .content-text h2 {
    margin: var(--space-l) 0 var(--space-s);
  }

  .mod_newsreader .content-text:first-of-type h2:first-child {
    margin-top: 0;
  }

  .mod_newsreader .content-image {
    max-width: var(--w-content);
    margin: var(--space-l) auto;
    padding: 0;
  }

  .mod_newsreader .layout_full .content-image img {
    float: none;
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0;
    border-radius: var(--radius-l);
  }

  .mod_newsreader .layout_full .content-image figcaption {
    position: static;
    padding-top: 8px;
    font-size: var(--fs-meta);
    color: var(--c-text-muted);
    line-height: 1.5;
  }

  .mod_newsreader .content-image + .content-text h2:first-child {
    margin-top: 0;
  }

  /* ---- Share-Leiste ----
     Das Sharebuttons-Plugin lädt unlayered CSS (Sprite, float, 32px).
     Darum: eigene Optik komplett in ::before/::after, Plugin-Werte
     (margin 4px, ul margin -4px, 32px) werden mitgenutzt. */
  #main .sharebuttons {
    width: auto;
    max-width: var(--w-prose);
    margin: var(--space-s) auto 0;
    padding: 0;
    background: none;
  }

  #main .sharebuttons ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: auto;
    margin: -4px;
    padding: 0;
    list-style: none;
  }

  #main .sharebuttons li {
    float: none;
    margin: 0;
    padding: 0;
    background: none;
  }

  #main .sharebuttons li::before {
    content: none;
  }

  #main .sharebuttons a {
    position: relative;
    display: block;
    box-sizing: content-box;
    width: 32px;
    height: 32px;
    margin: 4px;
    padding: 3px;
    overflow: hidden;
    border: none;
    border-radius: 50%;
    box-shadow: none;
    color: var(--c-deep);
    font-size: 0;
    text-indent: 101%;
    white-space: nowrap;
  }

  #main .sharebuttons a::before,
  #main .sharebuttons a::after {
    content: "";
    position: absolute;
    inset: 0;
  }

  #main .sharebuttons a::before {
    border-radius: 50%;
    background: var(--c-white);
    box-shadow: inset 0 0 0 1px var(--c-cream-dark);
    transition: var(--ease);
  }

  #main .sharebuttons a::after {
    margin: auto;
    width: 17px;
    height: 17px;
    background: currentColor;
    -webkit-mask: var(--sw-icon) center / contain no-repeat;
    mask: var(--sw-icon) center / contain no-repeat;
  }

  #main .sharebuttons a:hover,
  #main .sharebuttons a:focus-visible {
    color: #fff;
  }

  #main .sharebuttons a:hover::before,
  #main .sharebuttons a:focus-visible::before {
    background: var(--c-cta);
    box-shadow: none;
  }

  #main .sharebuttons a.facebook {
    --sw-icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M13.5 22v-8h2.7l.4-3.2h-3.1V8.8c0-.9.3-1.6 1.6-1.6h1.7V4.4c-.3 0-1.3-.1-2.5-.1-2.4 0-4.1 1.5-4.1 4.2v2.3H7.5V14h2.7v8z%27/%3E%3C/svg%3E");
  }

  #main .sharebuttons a.mail {
    --sw-icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.8%27 stroke-linejoin=%27round%27%3E%3Crect x=%273%27 y=%275%27 width=%2718%27 height=%2714%27 rx=%272.5%27/%3E%3Cpath d=%27m4 7 8 6 8-6%27/%3E%3C/svg%3E");
  }

  #main .sharebuttons a.pinterest {
    --sw-icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M12 2a10 10 0 0 0-3.6 19.3c-.1-.8-.2-2 0-2.9l1.2-5.1s-.3-.6-.3-1.5c0-1.4.8-2.5 1.8-2.5.9 0 1.3.7 1.3 1.5 0 .9-.6 2.2-.9 3.5-.2 1 .5 1.9 1.6 1.9 1.9 0 3.3-2 3.3-4.9 0-2.6-1.8-4.4-4.5-4.4-3 0-4.8 2.3-4.8 4.6 0 .9.4 1.9.8 2.4l.1.4-.3 1.2c0 .2-.2.3-.4.2-1.4-.7-2.3-2.7-2.3-4.4 0-3.6 2.6-6.9 7.5-6.9 3.9 0 7 2.8 7 6.6 0 3.9-2.5 7.1-5.9 7.1-1.2 0-2.3-.6-2.6-1.3l-.7 2.7c-.3 1-1 2.2-1.4 2.9A10 10 0 1 0 12 2z%27/%3E%3C/svg%3E");
  }

  #main .sharebuttons a.whatsapp {
    --sw-icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm0 18.2c-1.5 0-3-.4-4.2-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8-.2-.1-.4-.1-.6.1l-.8 1c-.1.2-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.3-.4.2-.4.7-1.4.1-.2 0-.3 0-.4l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5c-.2 0-.5.1-.7.3-.2.3-.9.9-.9 2.2s.9 2.5 1 2.7c.1.2 1.8 2.8 4.4 3.9 1.6.7 2.3.8 3.1.6.5-.1 1.5-.6 1.7-1.2.2-.6.2-1.1.2-1.2-.1-.1-.3-.2-.6-.3z%27/%3E%3C/svg%3E");
  }

  /* Teilen-Leiste außerhalb von Artikeln (Hub-/Übersichtsseiten):
     zentrierte Reihe unter dem Seitenkopf statt Legacy-Band */
  #main .ce_sharebuttons {
    margin: 0 auto var(--space-m);
    padding: 0;
    background: none;
  }

  #main .ce_sharebuttons .sharebuttons {
    max-width: none;
    margin: 0;
  }

  #main .ce_sharebuttons .sharebuttons ul {
    justify-content: center;
  }

  /* Desktop: Leiste läuft links neben der Lesespalte mit.
     Nimmt keinen Platz im Fluss ein (negativer margin-bottom = Höhe). */
  @media (min-width: 1100px) {
    #main .mod_newsreader .sharebuttons {
      position: sticky;
      top: 160px;
      z-index: 20;
      width: 46px;
      max-width: none;
      margin: var(--space-m) 0 -192px calc((100% - var(--w-prose)) / 2 - 92px);
    }

    #main .mod_newsreader .sharebuttons ul {
      flex-direction: column;
    }
  }

  /* ---- Weiterführende Artikel (.insideArticle im Text) ---- */
  .mod_newsreader .insideArticle {
    margin: var(--space-m) 0;
    padding: 24px 28px;
    background: var(--c-cream);
    border-radius: var(--radius-l);
  }

  .mod_newsreader .insideArticle p {
    margin: 0 0 12px;
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-style: italic;
    line-height: 1.3;
  }

  .mod_newsreader .insideArticle li {
    padding: 0;
    font-size: var(--fs-teaser);
  }

  .mod_newsreader .insideArticle li::before {
    content: none;
  }

  .mod_newsreader .insideArticle a {
    padding: 4px 0;
    font-size: var(--fs-teaser);
    line-height: 1.4;
    box-shadow: none;
  }

  /* ---- Kommentare ---- */
  .mod_newsreader .ce_comments {
    max-width: var(--w-prose);
    margin: var(--space-l) auto;
    padding: var(--space-m) 0 0;
    border-top: var(--border-hair);
  }

  .mod_newsreader .ce_comments > h2:first-of-type {
    margin: 0 0 var(--space-s);
    font-size: var(--fs-h2);
  }

  /* ---- „Mehr erfahren" (.mod_newslist.randomNews) ----
     gleiche Kartensprache wie die Hub-Raster */
  .mod_newslist.randomNews {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px 20px;
    width: calc(100% - 2 * var(--pad-x));
    max-width: var(--w-inner);
    margin: var(--space-l) auto;
    padding: var(--space-m) 0 0;
    background: none;
    border-top: var(--border-hair);
  }

  .mod_newslist.randomNews h4 {
    grid-column: 1 / -1;
    flex-basis: auto;
    margin: 0;
    padding: 0;
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-style: italic;
    font-weight: 400;
    line-height: 1.3;
    color: var(--c-deep);
    text-align: left;
  }

  .mod_newslist.randomNews .layout_latest {
    display: flow-root;
    height: auto;
    min-height: 0;
    width: auto;
    flex-basis: auto;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
  }

  .mod_newslist.randomNews .image_container {
    float: none;
    width: 100%;
    aspect-ratio: 16 / 10;
    margin: 0 0 10px;
    border-radius: var(--radius-m);
    overflow: hidden;
  }

  .mod_newslist.randomNews .image_container img {
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    object-fit: cover;
    border-radius: 0;
  }

  .mod_newslist.randomNews .layout_latest h2 {
    margin: 0 0 4px;
    padding: 0;
    border: none;
    line-height: 1.35;
  }

  .mod_newslist.randomNews .layout_latest h2 a {
    line-height: 1.35;
    font-family: var(--font-body);
    font-size: var(--fs-teaser);
    font-style: normal;
    font-weight: 600;
    color: var(--c-deep);
    box-shadow: none;
  }

  .mod_newslist.randomNews .layout_latest h2 a:hover {
    color: var(--c-cta);
  }

  .mod_newslist.randomNews .teaser {
    margin: 0;
    padding: 0;
  }

  .mod_newslist.randomNews .teaser p {
    padding: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin: 0;
    font-size: var(--fs-meta);
    line-height: 1.5;
    color: var(--c-text-soft);
  }

  .mod_newslist.randomNews .more {
    display: none;
  }

  @media (max-width: 900px) {
    .mod_newslist.randomNews {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 560px) {
    .mod_newslist.randomNews {
      grid-template-columns: minmax(0, 1fr);
      gap: 18px;
    }

    .mod_newslist.randomNews .image_container {
      float: left;
      width: 112px;
      aspect-ratio: 4 / 3;
      margin: 0;
      border-radius: var(--radius-s);
    }

    .mod_newslist.randomNews .layout_latest h2,
    .mod_newslist.randomNews .teaser {
      margin-left: 126px;
    }
  }

  /* Produktproben-Karte im Artikel: Abstand zum Newsletter-Band */
  .artikelseiten .produktprobenLink {
    margin-bottom: var(--space-l);
  }

  /* ============================================
     Service-Seiten  (body.subhub)
     Gemeinsamer Seitenkopf: H1 + Intro zentriert auf --w-prose
     ============================================ */

  body.subhead .mod_article > .content-text:first-child,
  body.subhub .mod_article > .content-text:first-child {
    max-width: var(--w-prose);
    margin: var(--space-m) auto var(--space-l);
    padding: 0;
    background: none;
    box-shadow: none;
    text-align: center;
  }

  body.subhead .mod_article > .content-text:first-child h1,
  body.subhub .mod_article > .content-text:first-child h1 {
    width: auto;
    margin: 0 0 14px;
    padding: 0;
    background: none;
    font-family: var(--font-display);
    /* lange Einzelwörter („Schwangerschaftsrechner") passen mobil */
    font-size: min(var(--fs-h1), 7.2vw);
    font-style: normal;
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--c-deep);
    text-align: center;
    hyphens: auto;
    overflow-wrap: break-word;
  }

  body.subhead .mod_article > .content-text:first-child p,
  body.subhub .mod_article > .content-text:first-child p {
    max-width: 640px;
    margin: 0 auto 10px;
    font-size: var(--fs-lead);
    line-height: 1.65;
    color: var(--c-text-soft);
    text-align: center;
  }

  /* ---- Verzeichnis: Bild-Kacheln mit Titel auf Verlauf ---- */
  body.verzeichnis .content-text.grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    width: calc(100% - 2 * var(--pad-x));
    max-width: var(--w-inner);
    margin: 0 auto var(--space-l);
    padding: 0;
    background: none;
    box-shadow: none;
  }

  body.verzeichnis .content-text.grid .content-image {
    display: grid;
    position: relative;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radius-l);
    background: var(--c-cream);
    isolation: isolate;
  }

  body.verzeichnis .content-text.grid .content-image > *,
  body.verzeichnis .content-text.grid .content-image::after {
    grid-area: 1 / 1;
  }

  body.verzeichnis .content-text.grid .content-image::after {
    content: "";
    z-index: 1;
    background: linear-gradient(to top, rgba(58, 44, 31, 0.78) 0%, rgba(58, 44, 31, 0.25) 42%, rgba(58, 44, 31, 0) 65%);
    pointer-events: none;
  }

  body.verzeichnis .content-text.grid figure {
    height: 100%;
    margin: 0;
  }

  body.verzeichnis .content-text.grid figure a {
    display: block;
    height: 100%;
  }

  body.verzeichnis .content-text.grid img {
    position: static;
    z-index: auto;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    object-fit: cover;
    border-radius: 0;
    transition: transform 0.5s ease;
  }

  body.verzeichnis .content-text.grid .content-image:hover img {
    transform: scale(1.04);
  }

  body.verzeichnis .content-text.grid h2 {
    position: static;
    z-index: 2;
    align-self: end;
    width: auto;
    margin: 0;
    padding: 18px 20px;
    background: none;
    border: none;
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-style: normal;
    font-weight: 400;
    line-height: 1.25;
    color: #fff;
    text-align: left;
    pointer-events: none;
  }

  /* „Dein Angebot im Verzeichnis?" */
  body.verzeichnis .mod_article > .center.content-text {
    width: calc(100% - 2 * var(--pad-x));
    max-width: var(--w-inner);
    margin: 0 auto var(--space-l);
    padding: var(--space-m) 32px;
    background: var(--c-white);
    border: var(--border-hair);
    border-radius: var(--radius-l);
    text-align: center;
  }

  body.verzeichnis .mod_article > .center.content-text p {
    margin: 0 0 14px;
    font-size: var(--fs-body);
    color: var(--c-text-soft);
  }

  body.verzeichnis .mod_article > .center.content-text p:last-child:empty {
    display: none;
  }

  @media (max-width: 900px) {
    body.verzeichnis .content-text.grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 560px) {
    body.verzeichnis .content-text.grid {
      grid-template-columns: minmax(0, 1fr);
    }

    body.verzeichnis .content-text.grid .content-image {
      aspect-ratio: 16 / 9;
    }
  }

  /* ---- Videos: Text links, Video rechts, Zeile für Zeile ---- */
  body.videobereich .mod_article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: var(--space-l) 40px;
    align-items: center;
    max-width: var(--w-content);
    margin-inline: auto;
    padding-inline: var(--pad-x);
  }

  body.videobereich .mod_article > * {
    grid-column: 1 / -1;
  }

  body.videobereich .mod_article > hr,
  body.videobereich .videoWrapper hr {
    display: none;
  }

  body.videobereich .mod_article > .content-text:first-child {
    margin-bottom: 0;
  }

  /* Filter-Pills ohne weiße Fläche */
  body.videobereich .mod_article > .mod_navigation {
    margin: 0;
    padding: 0;
    background: none;
    box-shadow: none;
  }

  body.videobereich .mod_article > .left.content-text {
    grid-column: 1;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    background: none;
    box-shadow: none;
    text-align: left;
  }

  body.videobereich .left.content-text h2 {
    margin: 0 0 12px;
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-style: normal;
    font-weight: 400;
    line-height: 1.3;
    color: var(--c-deep);
  }

  body.videobereich .left.content-text p {
    margin: 0;
    font-size: var(--fs-teaser);
    line-height: 1.65;
    color: var(--c-text-soft);
  }

  body.videobereich .mod_article > .videoWrapper {
    grid-column: 2;
    position: relative;
    width: auto;
    max-width: none;
    height: auto;
    margin: 0;
    padding: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--c-deep);
    border-radius: var(--radius-l);
  }

  body.videobereich .videoWrapper iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }

  @media (max-width: 800px) {
    body.videobereich .mod_article {
      grid-template-columns: minmax(0, 1fr);
      gap: 16px;
    }

    body.videobereich .mod_article > .left.content-text,
    body.videobereich .mod_article > .videoWrapper {
      grid-column: 1;
    }

    body.videobereich .mod_article > .left.content-text {
      margin-top: var(--space-m);
    }
  }

  /* ---- Apps: Karte mit App-Icon links ---- */
  body.apps .mod_article > .content-text:not(:first-child) {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 0 28px;
    align-items: start;
    width: calc(100% - 2 * var(--pad-x));
    max-width: var(--w-inner);
    margin: 0 auto 20px;
    padding: 32px;
    background: var(--c-white);
    border: var(--border-hair);
    border-radius: var(--radius-l);
    box-shadow: none;
    text-align: left;
  }

  body.apps .mod_article > .content-text:not(:first-child) > h2 {
    grid-column: 2;
    margin: 0 0 8px;
    padding: 0;
    border: none;
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-style: normal;
    font-weight: 400;
    line-height: 1.3;
    color: var(--c-deep);
    text-align: left;
  }

  body.apps .mod_article > .content-text:not(:first-child) > .rte {
    display: contents;
  }

  body.apps .mod_article > .content-text:not(:first-child) > .rte > * {
    grid-column: 2;
  }

  body.apps .mod_article > .content-text:not(:first-child) > .rte > p {
    margin: 0 0 14px;
    font-size: var(--fs-body);
    line-height: 1.65;
    color: var(--c-text-soft);
    text-align: left;
  }

  /* Icon-Absatz in Spalte 1 */
  body.apps .mod_article > .content-text:not(:first-child) > .rte > p:has(img) {
    grid-column: 1;
    grid-row: 1 / span 3;
    margin: 0;
  }

  body.apps .mod_article > .content-text > .rte > p:has(img) a {
    display: block;
    padding: 0;
    background: none;
    box-shadow: none;
  }

  body.apps .mod_article > .content-text > .rte img {
    display: block;
    width: 96px;
    height: 96px;
    max-width: none;
    margin: 0;
    object-fit: cover;
    border-radius: 22px;
    background: var(--c-cream);
    box-shadow: var(--shadow-card);
  }

  /* BabyForum: drei Länder-Kacheln */
  body.apps .mod_article > .content-text > .rte > .flex {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 4px 0 0;
  }

  body.apps .rte > .flex > div {
    width: auto;
    margin: 0;
    padding: 16px;
    background: var(--c-cream);
    border-radius: var(--radius-m);
    text-align: left;
  }

  body.apps .rte > .flex h3 {
    width: auto;
    margin: 0 0 12px;
    padding: 0;
    border: none;
    font-family: var(--font-body);
    font-size: var(--fs-teaser);
    font-style: normal;
    font-weight: 600;
    color: var(--c-deep);
    text-align: left;
  }

  body.apps .rte > .flex p {
    margin: 0 0 8px;
  }

  body.apps .rte > .flex p:last-child {
    margin-bottom: 0;
  }

  body.apps .rte > .flex a.button {
    display: block;
    width: auto;
    margin: 0;
    padding: 9px 12px;
    font-size: var(--fs-meta);
    text-align: center;
  }

  @media (max-width: 700px) {
    body.apps .mod_article > .content-text:not(:first-child) {
      grid-template-columns: 64px minmax(0, 1fr);
      gap: 0 16px;
      padding: 22px;
    }

    body.apps .mod_article > .content-text > .rte img {
      width: 64px;
      height: 64px;
      border-radius: 16px;
    }

    /* Mobil: Icon neben dem Titel, Text volle Breite */
    body.apps .mod_article > .content-text:not(:first-child) > h2 {
      grid-row: 1;
      align-self: center;
      margin: 0;
    }

    body.apps .mod_article > .content-text:not(:first-child) > .rte > * {
      grid-column: 1 / -1;
    }

    body.apps .mod_article > .content-text:not(:first-child) > .rte > p:has(img) {
      grid-column: 1;
      grid-row: 1;
      margin-bottom: 16px;
    }

    body.apps .mod_article > .content-text > .rte > .flex {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  /* ---- Expert*innen: Karten im Raster ---- */
  body.expertinnen .hubmodules.circles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    align-items: start;
    width: calc(100% - 2 * var(--pad-x));
    max-width: var(--w-inner);
    margin: 0 auto var(--space-m);
    padding: 0;
    background: none;
  }

  body.expertinnen .hubmodules.circles > h2 {
    grid-column: 1 / -1;
    width: auto;
    margin: var(--space-m) 0 0;
    padding: 0;
    border: none;
    background: none;
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-style: normal;
    font-weight: 400;
    line-height: 1.3;
    color: var(--c-deep);
    text-align: left;
  }

  body.expertinnen .hubmodules.circles .review {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    width: auto;
    max-width: none;
    flex-basis: auto;
    margin: 0;
    padding: 20px;
    background: var(--c-white);
    border: var(--border-hair);
    border-radius: var(--radius-l);
    box-shadow: none;
    text-align: left;
  }

  body.expertinnen .hubmodules.circles .review figure {
    grid-column: 1;
    grid-row: 1;
    float: none;
    width: 64px;
    height: 64px;
    margin: 0;
    overflow: hidden;
    border-radius: var(--blob-a);
    background: var(--c-coral-pale);
  }

  body.expertinnen .hubmodules.circles .review:nth-child(even) figure {
    border-radius: var(--blob-b);
    background: var(--c-sage);
  }

  body.expertinnen .hubmodules.circles .review img {
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    object-fit: cover;
    border: none;
    border-radius: 0;
  }

  body.expertinnen .hubmodules.circles .review .rte {
    display: contents;
  }

  body.expertinnen .hubmodules.circles .review .rte > p {
    margin: 0;
    font-size: var(--fs-meta);
    font-style: normal;
    line-height: 1.45;
    color: var(--c-text-soft);
    text-align: left;
  }

  body.expertinnen .hubmodules.circles .review .rte > p :is(em, span) {
    font-style: normal;
    color: inherit;
  }

  /* Name + Rolle neben dem Foto */
  body.expertinnen .hubmodules.circles .review .rte > p:first-child {
    grid-column: 2;
    grid-row: 1;
  }

  body.expertinnen .hubmodules.circles .review .rte > p:first-child strong {
    font-size: var(--fs-teaser);
    font-weight: 600;
    color: var(--c-deep);
  }

  /* Artikel-Liste unter dem Kopf */
  body.expertinnen .hubmodules.circles .review .rte > p + p {
    grid-column: 1 / -1;
    padding-top: 12px;
    border-top: var(--border-hair);
  }

  body.expertinnen .hubmodules.circles .review .rte > p + p > strong:first-child {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-text-muted);
  }

  body.expertinnen .hubmodules.circles .review .rte > p + p > strong:first-child br {
    display: none;
  }

  body.expertinnen .hubmodules.circles .review .rte a {
    font-style: normal;
    font-weight: 500;
    color: var(--c-cta);
    text-decoration: none;
    border: none;
    box-shadow: none;
  }

  body.expertinnen .hubmodules.circles .review .rte a:hover {
    color: var(--c-cta-dark);
    text-decoration: underline;
  }

  /* ---- Rechner (Eisprung, Geburt, Schwangerschaft) ----
     Das Widget selbst liegt in rechner.css und wird vom Template geladen.
     Hier nur die Lesebreite des Fließtexts. Der Geburtsterminrechner hat
     keine eigene Body-Klasse; er wird in den leeren Artikel gehängt. */
  body.rechnerSchwangerschaft .mod_article > .content-text,
  body.rechnerEisprung .mod_article > .content-text {
    max-width: var(--w-prose);
    margin-inline: auto;
  }

  body.rechnerSchwangerschaft .rechnerErgebnisse {
    max-width: var(--w-prose);
    margin: 0 auto var(--space-l);
    padding: 0;
    background: none;
    box-shadow: none;
    text-align: left;
  }

  /* ============================================
     Bereichs-Kopf über einem Newsreader
     („Produktneuheiten", „Interviews", „Namen" …) wird zur
     kleinen Rubrik-Zeile; das Intro gehört auf die Übersicht.
     ============================================ */
  body .mod_article > .content-text:first-child:has(~ .mod_newsreader) {
    margin: var(--space-m) auto 0;
    padding: 0;
    background: none;
    box-shadow: none;
    text-align: left;
  }

  body .mod_article > .content-text:first-child:has(~ .mod_newsreader) h1 {
    width: auto;
    margin: 0;
    padding: 0;
    background: none;
    font-family: var(--font-body);
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.12em;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--c-coral);
    text-align: left;
  }

  body .mod_article > .content-text:first-child:has(~ .mod_newsreader) .rte {
    display: none;
  }

  body .mod_article > .content-text:first-child:has(~ .mod_newsreader) + .mod_newsreader .layout_full > h1 {
    margin-top: 8px;
  }

  /* ---- Expert*innen-Profil: Portrait als Blob neben dem Namen ---- */
  .mod_newsreader .layout_full > .letztesUpdate + .content-image:has(img[width="400"][height="400"]) {
    float: left;
    width: 168px;
    max-width: 168px;
    margin: 0 28px 16px calc((100% - var(--w-prose)) / 2);
  }

  .mod_newsreader .layout_full > .letztesUpdate + .content-image:has(img[width="400"][height="400"]) figure {
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--blob-a);
    background: var(--c-coral-pale);
  }

  .mod_newsreader .layout_full > .letztesUpdate + .content-image:has(img[width="400"][height="400"]) img {
    height: 100%;
    object-fit: cover;
    border-radius: 0;
  }

  .mod_newsreader .layout_full > .letztesUpdate + .content-image:has(img[width="400"][height="400"]) + .content-text h2:first-child {
    margin-top: 0;
  }

  .mod_newsreader .layout_full > .letztesUpdate + .content-image:has(img[width="400"][height="400"]) ~ :is(.content-text, .content-hyperlink):last-of-type::after {
    content: "";
    display: block;
    clear: both;
  }

  @media (max-width: 860px) {
    .mod_newsreader .layout_full > .letztesUpdate + .content-image:has(img[width="400"][height="400"]) {
      float: none;
      margin: 0 0 16px;
      width: 140px;
    }
  }

  /* ---- Interviews: Fragen hervorheben ---- */
  .layout_full.interviews .content-text p:has(> strong:first-child + em) {
    margin: var(--space-m) 0 12px;
    padding: 4px 0 4px 18px;
    border-left: 3px solid var(--c-coral-pale);
  }

  .layout_full.interviews .content-text p:has(> strong:first-child + em) em {
    font-family: var(--font-display);
    font-size: var(--fs-lead);
    font-style: italic;
    line-height: 1.5;
    color: var(--c-deep);
  }

  .layout_full.interviews .content-text p:has(> strong:first-child + em) em strong {
    font-weight: 500;
  }

  .layout_full.interviews .content-text p:has(> strong:first-child + em) > strong:first-child {
    display: block;
    margin-bottom: 2px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-coral);
  }

  /* ============================================
     Namen-Seiten  (body.namen)
     ============================================ */

  /* Jahrgangs-Akkordeon */
  body.namen .ce_accordionSingle {
    max-width: var(--w-prose);
    margin: 0 auto 10px;
    padding: 0;
    background: var(--c-white);
    border-radius: var(--radius-m);
    box-shadow: inset 0 0 0 1px var(--c-cream-dark);
    overflow: hidden;
  }

  body.namen .ce_accordionSingle .toggler {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: auto;
    margin: 0;
    padding: 16px 20px;
    background: none;
    border: none;
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-style: normal;
    font-weight: 400;
    color: var(--c-deep);
    text-align: left;
    cursor: pointer;
  }

  body.namen .ce_accordionSingle .accordion {
    padding: 0 20px 20px;
  }

  body.namen .ce_accordionSingle .accordion > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }

  body.namen .ce_accordionSingle .accordion > div > :is(hr, p) {
    grid-column: 1 / -1;
  }

  body.namen :is(.girlslist, .boyslist) {
    float: none;
    width: auto;
    margin: 0;
    padding: 18px 20px;
    border-radius: var(--radius-m);
    background: var(--c-blush);
  }

  body.namen .boyslist {
    background: var(--c-trust-soft);
  }

  body.namen :is(.girlslist, .boyslist) h2 {
    margin: 0 0 10px;
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: 400;
  }

  body.namen :is(.girlslist, .boyslist) ol {
    margin: 0;
    padding: 0 0 0 1.6em;
  }

  body.namen :is(.girlslist, .boyslist) li {
    padding: 3px 0;
    font-size: var(--fs-body);
    border-bottom: 0.5px solid rgba(58, 44, 31, 0.08);
  }

  body.namen :is(.girlslist, .boyslist) li::before {
    content: none;
  }

  @media (max-width: 560px) {
    body.namen .ce_accordionSingle .accordion > div {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  /* Länder-Übersicht: Flaggen-Chips nach Kontinent */
  .laender.content-text {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 24px 28px;
    width: calc(100% - 2 * var(--pad-x));
    max-width: var(--w-inner);
    margin: var(--space-l) auto;
    padding: var(--space-m) 32px;
    background: var(--c-white);
    border-radius: var(--radius-l);
    box-shadow: inset 0 0 0 1px var(--c-cream-dark);
  }

  .laender.content-text > h2 {
    grid-column: 1 / -1;
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: 400;
    text-align: left;
  }

  .laender.content-text > div {
    width: auto;
    margin: 0;
    padding: 0;
    float: none;
  }

  .laender.content-text h3 {
    margin: 0 0 10px;
    font-family: var(--font-body);
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-text-muted);
  }

  .laender.content-text ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
  }

  .laender.content-text li {
    margin: 0;
    padding: 0;
    background: none;
  }

  .laender.content-text li::before {
    content: none;
  }

  .laender.content-text li a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--c-cream);
    border: none;
    border-radius: var(--radius-pill);
    box-shadow: none;
    font-size: var(--fs-meta);
    font-weight: 500;
    color: var(--c-deep);
  }

  .laender.content-text li a:hover {
    background: var(--c-coral-pale);
    color: var(--c-cta-dark);
  }

  .laender.content-text li img {
    width: 16px;
    height: 11px;
    margin: 0;
    border-radius: 2px;
  }

  /* ============================================
     Verzeichnis-Detailseiten  (body.verzeichnisseite)
     Isotope positioniert die Karten absolut → keine Grid-Gaps;
     Abstand über transparenten Rahmen (background-clip).
     ============================================ */
  body.verzeichnisseite .mod_article > .filter {
    width: calc(100% - 2 * var(--pad-x));
    max-width: var(--w-inner);
    margin: 0 auto var(--space-s);
    padding: 0;
    background: none;
  }

  body.verzeichnisseite .filter h3 {
    margin: 0 0 10px;
    font-family: var(--font-body);
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-text-muted);
  }

  body.verzeichnisseite .filterbuttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  body.verzeichnisseite .filterbuttons .button {
    margin: 0;
    padding: 8px 14px;
    background: var(--c-white);
    border: none;
    border-radius: var(--radius-pill);
    box-shadow: inset 0 0 0 1px var(--c-cream-dark);
    font-family: var(--font-body);
    font-size: var(--fs-meta);
    font-weight: 600;
    color: var(--c-deep);
    cursor: pointer;
  }

  body.verzeichnisseite .filterbuttons .button:hover {
    box-shadow: inset 0 0 0 1px var(--c-coral);
  }

  body.verzeichnisseite .filterbuttons .button.is-checked {
    background: var(--c-cta);
    box-shadow: none;
    color: #fff;
  }

  body.verzeichnisseite .grid.foto {
    display: block;
    width: calc(100% - 2 * var(--pad-x) + 20px);
    max-width: calc(var(--w-inner) + 20px);
    margin: 0 auto var(--space-l);
    padding: 0;
    gap: 0;
  }

  body.verzeichnisseite .grid.foto > .content-text {
    box-sizing: border-box;
    float: left;
    width: 33.333%;
    max-width: none;
    min-height: 0;
    margin: 0;
    padding: 0 0 18px;
    background: var(--c-white);
    background-clip: padding-box;
    border: 10px solid transparent;
    border-radius: calc(var(--radius-l) + 10px);
    overflow: hidden;
    text-align: left;
  }

  body.verzeichnisseite .grid.foto > .content-text figure {
    order: 0;
    margin: 0 0 14px;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: 0;
  }

  body.verzeichnisseite .grid.foto > .content-text figure img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    border-radius: 0;
  }

  body.verzeichnisseite .grid.foto > .content-text > h2 {
    display: block;
    width: auto;
    margin: 0;
    padding: 0 18px 6px;
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-style: normal;
    font-weight: 400;
    line-height: 1.3;
    color: var(--c-deep);
  }

  /* Bild über den Titel ziehen */
  body.verzeichnisseite .grid.foto > .content-text {
    display: flex;
    flex-direction: column;
  }

  body.verzeichnisseite .grid.foto > .content-text > figure {
    order: -1;
  }

  body.verzeichnisseite .grid.foto > .content-text .rte {
    padding: 0 18px;
  }

  body.verzeichnisseite .grid.foto > .content-text .rte p {
    margin: 0 0 8px;
    font-size: var(--fs-teaser);
    line-height: 1.55;
    color: var(--c-text-soft);
  }

  body.verzeichnisseite .grid.foto > .content-text .rte a {
    font-weight: 600;
  }

  @media (max-width: 900px) {
    body.verzeichnisseite .grid.foto > .content-text {
      width: 50%;
    }
  }

  @media (max-width: 560px) {
    body.verzeichnisseite .grid.foto > .content-text {
      width: 100%;
    }
  }

  /* ============================================
     Buchempfehlungen  (body.buch): Cover links, Text rechts
     ============================================ */
  body.buch .mod_article > .content-text.media--left {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 4px 24px;
    padding: 24px;
    margin-bottom: 16px;
    background: var(--c-white);
    border-radius: var(--radius-l);
    box-shadow: inset 0 0 0 1px var(--c-cream-dark);
  }

  body.buch .mod_article > .content-text.media--left > h3 {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
  }

  body.buch .mod_article > .content-text.media--left > figure {
    grid-column: 1;
    grid-row: 1 / span 2;
    float: none;
    width: auto;
    margin: 0;
  }

  body.buch .mod_article > .content-text.media--left > figure img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 8px 18px rgba(58, 44, 31, 0.18);
  }

  body.buch .mod_article > .content-text.media--left > .rte {
    grid-column: 2;
  }

  body.buch .mod_article > .content-text.media--left .rte p {
    font-size: var(--fs-teaser);
    line-height: 1.65;
  }

  @media (max-width: 560px) {
    body.buch .mod_article > .content-text.media--left {
      grid-template-columns: 76px minmax(0, 1fr);
      padding: 18px;
    }

    body.buch .mod_article > .content-text.media--left > .rte {
      grid-column: 1 / -1;
    }
  }

  /* ============================================
     Timeline  (body.timeline, .se_timeline)
     Einspaltig mit Linie links statt Zickzack
     ============================================ */
  .se_timeline {
    position: relative;
    max-width: var(--w-prose);
    margin: var(--space-m) auto var(--space-l);
    padding: 0 0 0 36px;
  }

  .se_timeline::before {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 0;
    left: 11px;
    width: 2px;
    background: var(--c-coral-pale);
  }

  .se_timeline .content-text.item,
  .subhub .se_timeline .item:nth-of-type(2n) {
    position: relative;
    float: none;
    width: auto;
    max-width: none;
    margin: 0 0 18px;
    padding: 20px 24px;
    background: var(--c-white);
    border: none;
    border-radius: var(--radius-l);
    box-shadow: inset 0 0 0 1px var(--c-cream-dark);
    text-align: left;
  }

  .se_timeline .content-text.item::before {
    content: "";
    position: absolute;
    top: 24px;
    left: -31px;
    width: 12px;
    height: 12px;
    border: 3px solid var(--c-cream-mid);
    border-radius: 50%;
    background: var(--c-coral);
  }

  .se_timeline .content-text.item h2 {
    display: inline-block;
    width: auto;
    margin: 0 0 10px;
    padding: 4px 12px;
    background: var(--c-blush);
    border: none;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--c-blush-text);
  }

  .se_timeline .content-text.item p {
    margin: 0;
    padding: 0;
    background: none;
  }

  .se_timeline .content-text.item p.dot {
    display: none;
  }

  .se_timeline .content-text.item p.text {
    font-size: var(--fs-teaser);
    line-height: 1.65;
    color: var(--c-text-soft);
  }

  .se_timeline .content-text.item p.text strong:first-child {
    display: block;
    margin-bottom: 4px;
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: 400;
    color: var(--c-deep);
  }

  .se_timeline .content-text.item p.link {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
  }

  .se_timeline .content-text.item p.link br {
    display: none;
  }

  .se_timeline .content-text.item p.link a {
    padding: 5px 12px;
    background: var(--c-cream);
    border-radius: var(--radius-pill);
    box-shadow: none;
    font-size: var(--fs-meta);
    font-weight: 600;
    color: var(--c-cta-dark);
  }

  .se_timeline .content-text.item figure {
    float: none;
    width: 100%;
    max-width: 220px;
    margin: 12px 0 0;
    overflow: hidden;
    border-radius: var(--radius-m);
  }

  /* ============================================
     Gewinnspiele: Rechtstext ruhig, linksbündig
     ============================================ */
  .rechtshinweis.content-text {
    max-width: var(--w-prose);
    margin: var(--space-m) auto;
    padding: 20px 24px;
    background: var(--c-white);
    border-radius: var(--radius-m);
    box-shadow: inset 0 0 0 1px var(--c-cream-dark);
    text-align: left;
  }

  .rechtshinweis.content-text p {
    margin: 0 0 8px;
    line-height: 1.5;
    color: var(--c-text-soft);
    text-align: left;
  }

  /* ============================================
     Bild-Text-Kacheln auf Übersichtsseiten
     (body.subhub, .content-text.media--right / --left)
     Entwicklungsmonate, Schwangerschaftswochen (Trimester) …
     Vorher: Bild in Originalbreite gefloatet → Text daneben
     nur ein Wort breit. Jetzt: Raster Text | Bild als Karte.
     ============================================ */
  body.subhub .mod_article > .content-text:is(.media--right, .media--left) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-auto-flow: row;
    gap: 0 40px;
    align-items: start;
    box-sizing: border-box;
    width: calc(100% - 2 * var(--pad-x));
    max-width: var(--w-inner);
    margin: 0 auto 20px;
    padding: 32px;
    background: var(--c-white);
    border: none;
    border-radius: var(--radius-l);
    box-shadow: inset 0 0 0 1px var(--c-cream-dark);
    text-align: left;
  }

  body.subhub .mod_article > .content-text:is(.media--right, .media--left) > :not(figure) {
    grid-column: 1;
    min-width: 0;
  }

  body.subhub .mod_article > .content-text:is(.media--right, .media--left) > figure {
    grid-column: 2;
    grid-row: 1 / span 6;
    float: none;
    width: auto;
    max-width: none;
    margin: 0;
  }

  body.subhub .mod_article > .content-text.media--left {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  body.subhub .mod_article > .content-text.media--left > figure {
    grid-column: 1;
  }

  body.subhub .mod_article > .content-text.media--left > :not(figure) {
    grid-column: 2;
  }

  body.subhub .mod_article > .content-text:is(.media--right, .media--left) > figure img {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    margin: 0;
    border-radius: var(--radius-m);
  }

  body.subhub .mod_article > .content-text:is(.media--right, .media--left) figcaption {
    padding-top: 8px;
    font-size: var(--fs-meta);
    color: var(--c-text-muted);
  }

  body.subhub .mod_article > .content-text:is(.media--right, .media--left) :is(h2) {
    width: auto;
    margin: 0 0 8px;
    padding: 0;
    border: none;
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-style: normal;
    font-weight: 400;
    line-height: 1.25;
    color: var(--c-deep);
    text-align: left;
  }

  body.subhub .mod_article > .content-text:is(.media--right, .media--left) .rte > h3:first-of-type {
    margin: 0 0 12px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-coral);
  }

  body.subhub .mod_article > .content-text:is(.media--right, .media--left) .rte p {
    margin: 0 0 14px;
    font-size: var(--fs-body);
    line-height: 1.65;
    color: var(--c-text-soft);
    text-align: left;
  }

  /* Wochen-Links (1. SSW …) als Pills, ohne Umbruch im Wort */
  body.subhub .mod_article > .content-text:is(.media--right, .media--left) .rte > .flex {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: auto;
    margin: 8px 0 16px;
    padding: 0;
  }

  body.subhub .mod_article > .content-text:is(.media--right, .media--left) .rte > .flex a {
    flex: none;
    display: inline-block;
    width: auto;
    margin: 0;
    padding: 6px 11px;
    background: var(--c-cream);
    border: none;
    border-radius: var(--radius-pill);
    box-shadow: none;
    font-size: var(--fs-meta);
    font-weight: 600;
    white-space: nowrap;
    color: var(--c-cta-dark);
  }

  body.subhub .mod_article > .content-text:is(.media--right, .media--left) .rte > .flex a:hover {
    background: var(--c-cta);
    color: #fff;
  }

  @media (max-width: 760px) {
    body.subhub .mod_article > .content-text:is(.media--right, .media--left) {
      grid-template-columns: minmax(0, 1fr);
      padding: 20px;
    }

    body.subhub .mod_article > .content-text:is(.media--right, .media--left) > *,
    body.subhub .mod_article > .content-text.media--left > :not(figure) {
      grid-column: 1;
    }

    body.subhub .mod_article > .content-text:is(.media--right, .media--left) > figure {
      grid-column: 1;
      grid-row: auto;
      order: -1;
      margin-bottom: 18px;
    }
  }

}

/* ============================================================
   Rollout Runde 3: Seitentypen, die bisher noch auf Legacy-Regeln
   liefen (Audit 10/2026 mit 27 Beispielseiten)
   ============================================================ */
@layer pages {

  /* ---- News-Übersicht: Überschrift ohne 130px-Cremekasten ----
     Legacy: body.news .mod_article h1 {padding-top: 130px; background}
     (Platzhalter für ein Kopfbild, das es nicht mehr gibt). */
  body.news .mod_article > h1.content-headline {
    width: auto;
    max-width: var(--w-prose);
    margin: var(--space-s) auto var(--space-m);
    padding: 0;
    background: none;
    font-family: var(--font-display);
    font-size: var(--fs-h1);
    font-style: normal;
    font-weight: 400;
    line-height: var(--lh-tight);
    text-align: center;
    color: var(--c-deep);
  }

  /* ---- Kalender: Termin-Module im Artikel auf Inhaltsbreite ----
     Eventliste, Termin-Filter und Termin-Suche lagen ohne Seitenrand über
     die volle Spaltenbreite (Text klebte links am Rand). */
  .mod_article > :is(.mod_eventlist, .mod_eventreader, .module-event-type-filter, .module-community-event-filter) {
    box-sizing: border-box;
    width: calc(100% - 2 * var(--pad-x));
    max-width: var(--w-inner);
    margin-inline: auto;
  }

  /* ---- Verzeichnis ohne Fotos (Babykinos, Beratungsstellen, Kliniken …) ----
     Legacy: Kartenbreite 22 %, horizontales Padding 0 und der Website-Link
     absolut am Kartenboden → er lag über der Adresse. Jetzt dieselbe
     Kartenlogik wie .grid.foto (Isotope positioniert, Abstand über Rahmen). */
  body.verzeichnisseite .grid:not(.foto) {
    display: block;
    width: calc(100% - 2 * var(--pad-x) + 20px);
    max-width: calc(var(--w-inner) + 20px);
    margin: 0 auto var(--space-l);
    padding: 0;
    background: none;
  }

  body.verzeichnisseite .grid:not(.foto) > .content-text {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    float: left;
    width: 33.333%;
    min-height: 0;
    margin: 0;
    padding: 22px 22px 20px;
    background: var(--c-white);
    background-clip: padding-box;
    border: 10px solid transparent;
    border-radius: calc(var(--radius-l) + 10px);
    text-align: left;
  }

  body.verzeichnisseite .grid:not(.foto) > .content-text > h2 {
    width: auto;
    margin: 0 0 10px;
    padding: 0;
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-style: normal;
    font-weight: 400;
    line-height: 1.3;
    color: var(--c-deep);
  }

  body.verzeichnisseite .grid:not(.foto) > .content-text .rte {
    display: block;
  }

  body.verzeichnisseite .grid:not(.foto) > .content-text :is(p, .adresse) {
    position: static;
    margin: 0 0 8px;
    padding: 0;
    font-size: var(--fs-teaser);
    line-height: 1.55;
    color: var(--c-text-soft);
  }

  /* Letzter Absatz = Links: als Textlinks mit Pfeil, unten bündig */
  body.verzeichnisseite .grid:not(.foto) > .content-text .rte > p:last-child {
    margin: 6px 0 0;
    overflow-wrap: anywhere;
  }

  body.verzeichnisseite .grid:not(.foto) > .content-text .rte > p:last-child a {
    font-weight: 600;
  }

  body.verzeichnisseite .grid:not(.foto) > .content-text .rte > p:last-child a::after {
    content: " →";
  }

  @media (max-width: 900px) {
    body.verzeichnisseite .grid:not(.foto) > .content-text {
      width: 50%;
    }
  }

  @media (max-width: 560px) {
    body.verzeichnisseite .grid:not(.foto) > .content-text {
      width: 100%;
    }
  }

  /* ---- Expert*innen-Profil: auch Portraits, die nicht exakt 400 × 400 sind ----
     (Dateien liegen in files/_experten/) */
  .mod_newsreader .layout_full > .letztesUpdate + .content-image:has(img[src*="/_experten/"]) {
    float: left;
    width: 168px;
    max-width: 168px;
    margin: 0 28px 16px calc((100% - var(--w-prose)) / 2);
  }

  .mod_newsreader .layout_full > .letztesUpdate + .content-image:has(img[src*="/_experten/"]) figure {
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--blob-a);
    background: var(--c-coral-pale);
  }

  .mod_newsreader .layout_full > .letztesUpdate + .content-image:has(img[src*="/_experten/"]) img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
  }

  .mod_newsreader .layout_full > .letztesUpdate + .content-image:has(img[src*="/_experten/"]) + .content-text h2:first-child {
    margin-top: 0;
  }

  .mod_newsreader .layout_full > .letztesUpdate + .content-image:has(img[src*="/_experten/"]) ~ :is(.content-text, .content-hyperlink):last-of-type::after {
    content: "";
    display: block;
    clear: both;
  }

  /* leerer Text-Platzhalter am Profilende */
  .mod_newsreader .layout_full > .content-text:has(> .rte:only-child):not(:has(.rte *)) {
    display: none;
  }

  @media (max-width: 860px) {
    .mod_newsreader .layout_full > .letztesUpdate + .content-image:has(img[src*="/_experten/"]) {
      float: none;
      width: 140px;
      margin: 0 0 16px;
    }
  }

  /* ---- ABC der Schwangerschaft: Register + Lexikon-Einträge ---- */
  body.abc .mod_article > .content-text.abcliste {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px 28px;
    box-sizing: border-box;
    width: calc(100% - 2 * var(--pad-x));
    max-width: var(--w-content);
    margin: 0 auto var(--space-l);
    padding: 28px 32px 32px;
    background: var(--c-white);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-card);
  }

  body.abc .abcliste p {
    width: auto;
    margin: 0;
  }

  body.abc .abcliste p span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: 16px 0 6px;
    border: none;
    border-radius: 50%;
    background: var(--c-coral-pale);
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 400;
    color: var(--c-cta-dark);
  }

  body.abc .abcliste p a {
    display: block;
    width: fit-content;
    padding: 3px 0;
    border: none;
    box-shadow: none;
    font-size: var(--fs-teaser);
    line-height: 1.4;
    text-decoration: none;
    color: var(--c-deep);
  }

  body.abc .abcliste p a:hover {
    color: var(--c-cta);
  }

  /* Hinweis „Erklärung: …" als Zeile über dem Register */
  body.abc .abcliste p:last-child {
    order: -1;
    grid-column: 1 / -1;
    width: auto;
    padding: 0;
    font-size: var(--fs-meta);
    color: var(--c-text-muted);
  }

  body.abc .abcliste p:last-child span {
    display: none;
  }

  body.abc .mod_article > .content-text[id] {
    box-sizing: border-box;
    width: calc(100% - 2 * var(--pad-x));
    max-width: var(--w-prose);
    margin: 0 auto;
    padding: 22px 0;
    border-top: 1px solid var(--c-cream-dark);
    scroll-margin-top: 140px;
  }

  body.abc .mod_article > .content-text[id] h2 {
    margin: 0 0 8px;
    padding: 0;
    font-size: var(--fs-h3);
    scroll-margin-top: 140px;
  }

  body.abc .mod_article > .content-text[id] p {
    margin: 0;
  }

  body.abc .mod_article > .content-text[id]:target {
    padding-inline: 20px;
    background: var(--c-coral-pale);
    border-radius: var(--radius-m);
    border-top-color: transparent;
  }

  @media (max-width: 900px) {
    body.abc .mod_article > .content-text.abcliste {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      padding: 20px;
    }
  }

  /* ---- Gewinnspiele (body.gewinnspiel) ---- */
  body.gewinnspiel .mod_article > .content-text {
    box-sizing: border-box;
    width: calc(100% - 2 * var(--pad-x));
    max-width: var(--w-prose);
    margin-inline: auto;
    padding: 0;
    background: none;
  }

  body.gewinnspiel .mod_article > .content-text h3 {
    text-align: left;
  }

  /* Produkt-Teil: Karte, Text links, Bild rechts */
  body.gewinnspiel .mod_article > .content-text.mamtop {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
    gap: 0 36px;
    align-items: start;
    max-width: var(--w-content);
    margin-block: var(--space-m);
    padding: 32px;
    background: var(--c-white);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-card);
  }

  body.gewinnspiel .mod_article > .content-text.mamtop > figure {
    grid-column: 2;
    grid-row: 1 / span 3;
    float: none;
    width: auto;
    max-width: none;
    margin: 0;
  }

  body.gewinnspiel .mod_article > .content-text.mamtop > figure img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-m);
  }

  body.gewinnspiel .mod_article > .content-text.mamtop > :not(figure) {
    grid-column: 1;
  }

  body.gewinnspiel .mod_article > .content-text.mamtop .rte > p:last-child:has(> :only-child:is(br)),
  body.gewinnspiel .mod_article .rte > p:empty {
    display: none;
  }

  /* Bild + Formular nebeneinander */
  body.gewinnspiel .mod_article > .bildUndForm:has(.ce_form) {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 36px;
    align-items: center;
    max-width: var(--w-content);
    margin-block: var(--space-l);
  }

  body.gewinnspiel .bildUndForm > .textlinks,
  body.gewinnspiel .bildUndForm > .textrechts {
    width: auto;
    margin: 0;
    padding: 0;
  }

  body.gewinnspiel .bildUndForm > .textlinks img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-l);
  }

  body.gewinnspiel .bildUndForm > .ce_form {
    padding: 28px;
    background: var(--c-white);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-card);
  }

  body.gewinnspiel .bildUndForm .ce_form .widget {
    margin: 0 0 10px;
  }

  body.gewinnspiel .bildUndForm .ce_form .explanation p {
    margin: 0 0 14px;
    font-size: var(--fs-teaser);
    color: var(--c-text-soft);
  }

  body.gewinnspiel .bildUndForm .ce_form :is(input.text, select) {
    box-sizing: border-box;
    width: 100%;
  }

  body.gewinnspiel .bildUndForm .ce_form label.select {
    display: block;
    margin: 6px 0 4px;
    font-size: var(--fs-meta);
    font-weight: 600;
  }

  body.gewinnspiel .bildUndForm .ce_form .checkbox_container {
    margin: 0;
    padding: 0;
    border: none;
  }

  body.gewinnspiel .bildUndForm .ce_form .checkbox_container > span {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: var(--fs-teaser);
    line-height: 1.45;
  }

  body.gewinnspiel .bildUndForm .ce_form .checkbox_container input {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    -webkit-appearance: checkbox;
    appearance: auto;
    accent-color: var(--c-cta);
  }

  body.gewinnspiel .bildUndForm .ce_form button.submit {
    width: 100%;
    margin-top: 8px;
    padding: 14px 20px;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--c-cta);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
  }

  body.gewinnspiel .bildUndForm .ce_form button.submit:hover {
    background: var(--c-cta-dark);
  }

  /* Kooperations-Absatz mit gefloatetem Partnerlogo (Inline-Styles der Redaktion) */
  body.gewinnspiel .rte p[style*="padding-left"] {
    padding-left: 0 !important;
  }

  body.gewinnspiel .rte img[style*="float"] {
    max-width: 38%;
    height: auto;
  }

  @media (max-width: 860px) {
    body.gewinnspiel .rte img[style*="float"] {
      display: block;
      float: none !important;
      margin: 0 0 14px !important;
    }
  }

  @media (max-width: 860px) {
    body.gewinnspiel .mod_article > .content-text.mamtop,
    body.gewinnspiel .mod_article > .bildUndForm:has(.ce_form) {
      grid-template-columns: minmax(0, 1fr);
      padding: 20px;
    }

    body.gewinnspiel .mod_article > .bildUndForm:has(.ce_form) {
      padding: 0;
    }

    body.gewinnspiel .mod_article > .content-text.mamtop > figure {
      grid-column: 1;
      grid-row: auto;
      order: -1;
      margin-bottom: 16px;
    }
  }

  /* Teilnahmeschluss + Rechtshinweis (Gewinnspiel und Umfrage):
     Redaktion setzt 8–10px per Inline-Style → lesbar machen. */
  :is(body.gewinnspiel, body.umfrageseite) .bildUndForm:not(:has(.ce_form, .content-hyperlink)) {
    display: block;
    box-sizing: border-box;
    width: calc(100% - 2 * var(--pad-x));
    max-width: var(--w-prose);
    margin: var(--space-m) auto;
    padding: 22px 26px;
    background: var(--c-white);
    border-radius: var(--radius-m);
    box-shadow: inset 0 0 0 1px var(--c-cream-dark);
  }

  :is(body.gewinnspiel, body.umfrageseite) .bildUndForm:not(:has(.ce_form, .content-hyperlink)) .content-text {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    background: none;
    box-shadow: none;
  }

  :is(body.gewinnspiel, body.umfrageseite) .bildUndForm:not(:has(.ce_form, .content-hyperlink)) :is(p, span) {
    font-size: 12px !important;
    line-height: 1.55 !important;
    text-align: left !important;
    color: var(--c-text-soft);
  }

  :is(body.gewinnspiel, body.umfrageseite) .bildUndForm:not(:has(.ce_form, .content-hyperlink)) p:first-child,
  :is(body.gewinnspiel, body.umfrageseite) .bildUndForm:not(:has(.ce_form, .content-hyperlink)) p:first-child span {
    font-size: var(--fs-teaser) !important;
    color: var(--c-deep);
  }

  /* ---- Umfrage: Preise als gleich hohe Karten ---- */
  body.umfrageseite .hubmodules.bildUndForm .content-text.media--above {
    overflow: hidden;
    padding: 0 0 20px;
    background: var(--c-white);
    border-radius: var(--radius-l);
  }

  body.umfrageseite .hubmodules.bildUndForm .content-text.media--above figure {
    margin: 0 0 16px;
  }

  body.umfrageseite .hubmodules.bildUndForm .content-text.media--above figure img {
    width: 100%;
    height: auto;
    border-radius: 0;
  }

  body.umfrageseite .hubmodules.bildUndForm .content-text.media--above .rte {
    padding: 0 20px;
    font-family: var(--font-body);
  }

  body.umfrageseite .hubmodules.bildUndForm .content-text.media--above .rte p {
    font-family: var(--font-body);
    font-size: var(--fs-teaser);
    line-height: 1.55;
    color: var(--c-text-soft);
  }

  body.umfrageseite .hubmodules.bildUndForm .content-text.media--above h3 {
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-style: normal;
    font-weight: 400;
    line-height: 1.3;
  }

}

/* ============================================================
   Produkttests & Neuheiten: Bausteine im Newsreader
   Vorhandene Klassen der Redaktion: .specs (Eckdaten oder Testurteil),
   .interview (Testfamilie), .fazit, .company (Hersteller).
   Neu für Redakteur*innen: .sw-pro / .sw-contra (Liste mit ✓ / –).
   ============================================================ */
@layer pages {

  .mod_newsreader .layout_full > .content-text:is(.specs, .fazit, .interview, .company, .sw-pro, .sw-contra) {
    box-sizing: border-box;
    width: calc(100% - 2 * var(--pad-x));
    max-width: var(--w-prose);
    margin: var(--space-m) auto;
    padding: 26px 30px;
    border-radius: var(--radius-l);
  }

  .mod_newsreader .layout_full > .content-text:is(.specs, .fazit, .interview, .company, .sw-pro, .sw-contra) h2 {
    margin: 0 0 14px;
    padding: 0;
    border: none;
    font-size: var(--fs-h3);
  }

  /* ---- Eckdaten: Karte mit Daten-Raster ---- */
  .mod_newsreader .layout_full > .content-text.specs:has(ul) {
    background: var(--c-white);
    box-shadow: var(--shadow-card);
  }

  .mod_newsreader .layout_full > .content-text.specs:has(ul) h2::before {
    content: "Auf einen Blick";
    display: block;
    margin-bottom: 2px;
    font-family: var(--font-hand);
    font-size: var(--fs-hand);
    font-weight: 600;
    line-height: 1.1;
    color: var(--c-coral);
  }

  .mod_newsreader .layout_full > .content-text.specs:has(ul) .rte > p {
    margin: 0 0 12px;
    font-size: var(--fs-teaser);
  }

  .mod_newsreader .layout_full > .content-text.specs ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 28px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .mod_newsreader .layout_full > .content-text.specs ul li {
    display: block;
    width: auto;
    margin: 0;
    padding: 10px 0;
    background: none;
    border: none;
    border-top: 1px solid var(--c-cream-dark);
    border-radius: 0;
    font-size: var(--fs-teaser);
    line-height: 1.5;
    color: var(--c-text-soft);
  }

  .mod_newsreader .layout_full > .content-text.specs ul li::before {
    display: none;
  }

  .mod_newsreader .layout_full > .content-text.specs ul li strong:first-child {
    color: var(--c-deep);
  }

  /* lange Einträge (z. B. „Kompatibel mit …") über beide Spalten */
  .mod_newsreader .layout_full > .content-text.specs ul li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  /* ---- Fazit / Testurteil ---- */
  .mod_newsreader .layout_full > .content-text:is(.fazit, .specs:not(:has(ul))) {
    position: relative;
    background: var(--c-sage);
    box-shadow: none;
  }

  .mod_newsreader .layout_full > .content-text:is(.fazit, .specs:not(:has(ul))) h2 {
    color: var(--c-deep);
  }

  .mod_newsreader .layout_full > .content-text:is(.fazit, .specs:not(:has(ul))) h2::before {
    content: "Unterm Strich";
    display: block;
    margin-bottom: 2px;
    font-family: var(--font-hand);
    font-size: var(--fs-hand);
    font-weight: 600;
    line-height: 1.1;
    color: var(--c-sage-text);
  }

  .mod_newsreader .layout_full > .content-text:is(.fazit, .specs:not(:has(ul))) p {
    color: var(--c-text);
  }

  .mod_newsreader .layout_full > .content-text:is(.fazit, .specs:not(:has(ul))) p:last-child {
    margin-bottom: 0;
  }

  /* ---- Testfamilie: Foto als Blob neben dem Text ---- */
  .mod_newsreader .layout_full > .content-text.interview {
    background: var(--c-coral-pale);
  }

  .mod_newsreader .layout_full > .content-text.interview::after {
    content: "";
    display: block;
    clear: both;
  }

  .mod_newsreader .layout_full > .content-text.interview > figure {
    float: left;
    width: 180px;
    max-width: 40%;
    margin: 4px 24px 12px 0;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--blob-b);
  }

  .mod_newsreader .layout_full > .content-text.interview > figure img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    border-radius: 0;
  }

  .mod_newsreader .layout_full > .content-text.interview p {
    font-size: var(--fs-teaser);
    line-height: 1.65;
  }

  .mod_newsreader .layout_full > .content-text.interview p:has(> em:first-child) {
    margin-top: 18px;
    clear: none;
  }

  /* ---- Hersteller-Box: Logo links, Text klein ---- */
  .mod_newsreader .layout_full > .content-text.company {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 0 22px;
    align-items: start;
    background: var(--c-white);
    box-shadow: inset 0 0 0 1px var(--c-cream-dark);
  }

  .mod_newsreader .layout_full > .content-text.company > figure {
    float: none;
    width: auto;
    max-width: none;
    margin: 0;
  }

  .mod_newsreader .layout_full > .content-text.company > figure img {
    width: 100%;
    height: auto;
    border-radius: 0;
  }

  .mod_newsreader .layout_full > .content-text.company > :not(figure) {
    grid-column: 2;
  }

  .mod_newsreader .layout_full > .content-text.company p {
    margin: 0 0 8px;
    font-size: var(--fs-teaser);
    line-height: 1.6;
    color: var(--c-text-soft);
  }

  /* ---- Pro / Contra (neue Redaktions-Klassen) ---- */
  .content-text:is(.sw-pro, .sw-contra) {
    background: var(--c-white);
    box-shadow: inset 0 0 0 1px var(--c-cream-dark);
  }

  .content-text:is(.sw-pro, .sw-contra) ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .content-text:is(.sw-pro, .sw-contra) ul li {
    position: relative;
    margin: 0 0 10px;
    padding: 0 0 0 34px;
    background: none;
    border: none;
  }

  .content-text:is(.sw-pro, .sw-contra) ul li::before {
    content: "✓";
    position: absolute;
    top: 1px;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--c-sage);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    color: var(--c-sage-text);
  }

  .content-text.sw-contra ul li::before {
    content: "–";
    background: var(--c-blush);
    color: var(--c-blush-text);
  }

  .content-text.sw-pro {
    box-shadow: inset 4px 0 0 var(--c-sage), inset 0 0 0 1px var(--c-cream-dark);
  }

  .content-text.sw-contra {
    box-shadow: inset 4px 0 0 var(--c-blush), inset 0 0 0 1px var(--c-cream-dark);
  }

  @media (max-width: 640px) {
    .mod_newsreader .layout_full > .content-text:is(.specs, .fazit, .interview, .company, .sw-pro, .sw-contra) {
      width: calc(100% - 2 * var(--pad-x));
      padding: 20px;
    }

    .mod_newsreader .layout_full > .content-text.specs ul {
      grid-template-columns: minmax(0, 1fr);
    }

    .mod_newsreader .layout_full > .content-text.interview > figure {
      float: none;
      width: 140px;
      margin: 0 0 14px;
    }

    .mod_newsreader .layout_full > .content-text.company {
      grid-template-columns: minmax(0, 1fr);
    }

    .mod_newsreader .layout_full > .content-text.company > figure {
      width: 100px;
      margin-bottom: 12px;
    }

    .mod_newsreader .layout_full > .content-text.company > :not(figure) {
      grid-column: 1;
    }
  }

}

/* ============================================================
   404-Seite: Baustein .sw-404 (HTML-Element, Code in docs/404-seite.md)
   ============================================================ */
@layer pages {

  .sw-404 {
    box-sizing: border-box;
    width: calc(100% - 2 * var(--pad-x));
    max-width: var(--w-prose);
    margin: var(--space-m) auto var(--space-l);
    text-align: center;
  }

  .sw-404__code {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 132px;
    margin: 0 auto 18px;
    border-radius: var(--blob-a);
    background: var(--c-coral-pale);
    font-family: var(--font-display);
    font-size: 54px;
    font-style: italic;
    line-height: 1;
    color: var(--c-cta-dark);
  }

  .sw-404 h1 {
    margin: 0 0 12px;
    font-size: var(--fs-h1);
  }

  .sw-404 > p {
    margin: 0 auto 22px;
    max-width: 34em;
    color: var(--c-text-soft);
  }

  .sw-404__search {
    display: flex;
    gap: 8px;
    max-width: 480px;
    margin: 0 auto 26px;
  }

  .sw-404__search input {
    flex: 1 1 auto;
    min-width: 0;
    height: 48px;
    padding: 0 20px;
    border: 1px solid var(--c-cream-dark);
    border-radius: var(--radius-pill);
    background: var(--c-white);
    font: inherit;
    font-size: 16px;
    color: var(--c-text);
  }

  .sw-404__search input:focus-visible {
    outline: 2px solid var(--c-coral);
    outline-offset: 1px;
  }

  .sw-404__search button {
    flex: none;
    height: 48px;
    padding: 0 22px;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--c-cta);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
  }

  .sw-404__search button:hover {
    background: var(--c-cta-dark);
  }

  .sw-404__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
  }

  .sw-404__links li {
    margin: 0;
    padding: 0;
  }

  .sw-404__links li::before {
    display: none;
  }

  .sw-404__links a {
    display: inline-block;
    padding: 9px 16px;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--c-white);
    box-shadow: inset 0 0 0 1px var(--c-cream-dark);
    font-size: var(--fs-teaser);
    font-weight: 600;
    text-decoration: none;
    color: var(--c-deep);
  }

  .sw-404 > p:last-child a {
    font-weight: 600;
    color: var(--c-cta);
  }

  .sw-404__links a:hover {
    background: var(--c-cta);
    box-shadow: none;
    color: #fff;
  }

}