/* Shared layout rhythm, readable typography and accessible controls. */
:root { --mg-section:clamp(3rem,6vw,5rem); --mg-reading:52rem; --mg-space:clamp(1rem,2vw,1.5rem); }
body { line-height:1.65; }
#main h1 { font-size:clamp(2.5rem,5vw,4.5rem); line-height:1.08; letter-spacing:-.035em; margin-bottom:1.5rem; overflow-wrap:break-word; }
#main h2 { font-size:clamp(1.85rem,3vw,2.8rem); line-height:1.15; letter-spacing:-.025em; }
#main h3 { line-height:1.3; }
#main .mg-hero h1 { font-size:clamp(3.2rem,7.7vw,7.5rem); }
#main .pdp h1 { font-size:clamp(2.4rem,3.8vw,3.8rem); }
.wrap.schmal { max-width:var(--mg-reading); }
.woocommerce-cart .wrap.schmal,.woocommerce-checkout .wrap.schmal { max-width:var(--mg-max); }
#main > section,.mg-editorial > section { padding-block:var(--mg-section); }
#main .liste-abschnitt { padding-top:0; }
#main .pdp-grid { padding-block:clamp(2rem,4vw,4rem); }
#main p { line-height:1.65; }
#main .mg-grundpreis { font-size:13px; }
#main .mg-preishinweis { font-size:13px; line-height:1.6; }
#main .fliesstext h2,#main .schmal h2 { margin-top:2rem; margin-bottom:.75rem; }
#main .fliesstext p { max-width:68ch; }
.site-footer { margin-top:0; padding-top:var(--mg-section); }
:where(a,button,input,select,textarea,summary):focus-visible { outline:3px solid var(--mg-majorelle); outline-offset:4px; }
.site-footer :focus-visible,.mg-hero :focus-visible { outline-color:var(--mg-lait); }
[id] { scroll-margin-top:6rem; }
button,input,select,textarea { font:inherit; }
input:not([type=checkbox]):not([type=radio]),select,textarea { font-size:16px; }
.usage-nav { display:flex; gap:.6rem; flex-wrap:wrap; margin-block:1.5rem; }
.usage-nav a { display:inline-flex; align-items:center; min-height:44px; padding:.35rem 1rem; border:1px solid var(--mg-linie); border-radius:var(--mg-pill); color:var(--mg-nuit); text-decoration:none; }
.mg-usage .usage-dose { font-weight:650; margin:.6rem 0 .15rem; color:var(--mg-nuit); }
.mg-usage .usage-time { font-size:14px; margin:0 0 .75rem; color:var(--mg-nuit-60); }
.mg-usage .schritte { gap:1.5rem; }
.mg-usage .schritte p { font-size:15px; }
.karte { height:100%; }
.karte-inhalt { gap:0; padding:1.25rem; }
.karte-inhalt h2, .karte-inhalt h3 { min-height:2.6em; font-size:20px; margin:0 0 .4rem; }
.karte-nutzen { min-height:4.8em; margin:0 0 1rem; }
.karte-preis { min-height:10rem; margin-top:auto; }
.karte-preis .sparzeile { font-size:14px; margin-top:.5rem; }
.karte-preis .sparzeile .amount { font-size:inherit; }
.karte .mg-kaufen { margin-top:auto; }
.karte .mg-kaufen .btn { min-height:52px; margin-top:.75rem; }
.karte-details { min-height:44px; display:flex; align-items:center; margin-top:.25rem; }
.karte .bildwechsel { font-size:13px; min-height:44px; }
.karte .bildwechsel:focus-visible { outline-offset:-4px; }
.pdp .galerie { min-width:0; }
.pdp .woocommerce-product-gallery .flex-control-thumbs { display:flex; gap:.65rem; margin-top:.8rem; padding:0; }
.pdp .woocommerce-product-gallery .flex-control-thumbs li { width:calc(25% - .5rem); list-style:none; }
.pdp .woocommerce-product-gallery .flex-control-thumbs img { border-radius:6px; outline-offset:-3px; cursor:pointer; }
.pdp .woocommerce-product-gallery .flex-active { outline:2px solid var(--mg-nuit); }
.product-guide { border-top:1px solid var(--mg-linie); margin-top:1.5rem; }
.product-guide details { padding:1rem 0; }
.product-guide summary { min-height:44px; align-items:center; font-size:16px; }
.product-guide p { font-size:15px; }
.product-guide a { display:inline-block; padding-block:.5rem; font-size:15px; }
#main .story-intro { padding-bottom:2rem; }
#main .story-list { padding-block:0 var(--mg-section); max-width:66rem; }
.story-step { display:grid; grid-template-columns:260px minmax(0,1fr); align-items:center; gap:clamp(1.5rem,4vw,3rem); padding-block:2rem; border-bottom:1px solid var(--mg-linie); }
.story-step figure { margin:0; }
.story-step img { display:block; width:100%; height:240px; object-fit:cover; border-radius:var(--mg-radius-l); }
#main .story-step h2 { margin:.5rem 0 1rem; }
.story-step .eyebrow { margin:0; }
.story-step details { padding:.5rem 0; }
.story-step details summary { min-height:44px; align-items:center; font-size:15px; }
.story-source { background:var(--mg-lait); }
#main .story-source h2 { margin-top:0; }
.woocommerce-cart .wc-block-cart__submit-button { background:var(--mg-majorelle); color:var(--mg-lait); min-height:52px; }
@media(max-width:47.9375rem) {
 .story-step { grid-template-columns:1fr; gap:1rem; padding-block:1.5rem; }
 .story-step figure { max-width:300px; }
 .story-step img { height:190px; }
 .karte-preis { min-height:10rem; }
 .mg-usage .schritte { grid-template-columns:1fr; }
 .mg-usage .schritte figure { max-width:360px; }
 .product-guide { margin-top:1rem; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

/* Mobile application cards: native swipe, compact imagery. */
@media(max-width:47.9375rem) {
 .mg-usage .schritte { display:flex; gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; padding-bottom:1rem; }
 .mg-usage .schritte > article { flex:0 0 100%; min-width:0; scroll-snap-align:start; scroll-snap-stop:always; }
 .mg-usage .schritte figure { width:min(100%,240px); margin:0 0 1rem; }
 .mg-usage .schritte figure img { width:100%; height:180px; aspect-ratio:auto; object-fit:cover; }
}

.mg-rechtsentwurf { border-left:3px solid var(--mg-majorelle); padding:1rem 1.25rem; background:var(--mg-lait); font-size:15px; }

/* Lange Wörter dürfen die Seite nicht breiter machen als das Fenster.
   Deutsche Rechtstexte liefern Wörter wie „Verbraucherstreitbeilegung“,
   und das Muster-Widerrufsformular enthält Unterschriftslinien aus
   Unterstrichen. Beides lief bei 390 Pixeln über den Rand. */
#main h2, #main h3, #main h4, #main h5, #main h6,
#main p, #main li, #main dt, #main dd, #main th, #main td,
#main figcaption, #main address {
  overflow-wrap: break-word;
}

/* Silbentrennung nur im Fließtext der Inhaltsseiten; die Seite ist
   als de-DE ausgezeichnet, der Browser trennt also korrekt. */
#main .fliesstext { hyphens: auto; }

/* Klickflächen in der Fußzeile: Die Links stehen je allein in einem
   Listenpunkt, sind also keine Links im Textfluss. WCAG 2.2 verlangt
   dort mindestens 24 × 24 Pixel (Erfolgskriterium 2.5.8); gemessen
   waren es 19 Pixel Höhe. Der Zeilenabstand wird entsprechend kleiner,
   damit der Abstand insgesamt gleich bleibt. */
.site-footer li a,
.site-footer .menu-item a {
  display: inline-block;
  padding-block: 4px;
  min-height: 24px;
}
.site-footer li { margin-bottom: 0; }
.site-footer .menu { gap: 0; }

/* Dieselbe 24-Pixel-Regel für Brotkrumen, die Größentabelle auf der
   Produktseite und den Passwort-Schalter von WooCommerce. Der Link
   „Versandkosten“ bleibt unverändert: er steht mitten im Satz und ist
   damit von 2.5.8 ausgenommen. */
.breadcrumbs li a,
#main table th a,
#main table td a {
  display: inline-block;
  padding-block: 4px;
  min-height: 24px;
}
.woocommerce-form-login .show-password-input,
.woocommerce-form-register .show-password-input,
#main .show-password-input {
  min-width: 24px;
  min-height: 24px;
}

/* Auch WooCommerces eigener Block im Warenkorb blieb unter 24 Pixeln. */
.wc-block-components-panel__button { min-height: 24px; padding-block: 3px; }

/* Die Navigationsliste auf der 404-Seite steht im Inhaltsbereich und war
   von den Regeln oben nicht erfasst. Gleiche 24-Pixel-Untergrenze. */
#main nav .menu li a,
#main nav ul li a {
  display: inline-block;
  padding-block: 4px;
  min-height: 24px;
}

/* Die Kartenüberschrift darf nicht von der Überschriftenebene abhängen.
   Im Shop-Archiv ist sie h2 (unter der h1), auf der Startseite h3 (unter
   einer Abschnitts-h2). Ohne diese Regel griff im Shop `#main h2` mit bis
   zu 44 Pixeln, und der Link fiel auf die Browser-Voreinstellung zurück —
   blau und unterstrichen. */
#main .karte-inhalt h2 {
  font-family: var(--mg-sans);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: normal;
}
#main .karte-inhalt h2 a,
#main .karte-inhalt h3 a {
  color: var(--mg-nuit);
  text-decoration: none;
}
#main .karte-inhalt h2 a:hover,
#main .karte-inhalt h3 a:hover {
  text-decoration: underline;
  text-underline-offset: .2em;
}

/* Lange Seitentitel auf kleinen Displays lesbar umbrechen. */
@media (max-width: 480px) {
  .inhalt-seite > .wrap.schmal > h1 { font-size: clamp(1.75rem, 7.3vw, 2.25rem); hyphens: auto; }
}

/* Journal und kompakte Produktkommentare. */
.journal-list { padding-bottom:var(--mg-section); }
.journal-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:3rem; }
.journal-card { padding-bottom:2rem; border-bottom:1px solid var(--mg-linie); }
.journal-card img,.journal-cover { width:100%; height:auto; aspect-ratio:21/9; object-fit:cover; border-radius:var(--mg-radius-l); }
.journal-card h2 { margin:.75rem 0; }
.journal-card .eyebrow { margin-top:1.5rem; }
.journal-more,.journal-back a { display:inline-block; padding-block:.75rem; }
.journal-article { padding-block:3rem var(--mg-section); }
.journal-article h1 { font-size:clamp(2rem,5vw,3.5rem); }
.journal-cover { margin-block:2rem; }
.journal-author { margin-block:3rem; padding-block:2rem; border-block:1px solid var(--mg-linie); }
.karte-versand { margin:.75rem 0 0; color:var(--mg-nuit-60); font-size:13px; }
.mg-versandfortschritt { margin:0 0 1.25rem; padding:.8rem 1rem; border:1px solid var(--mg-argan); border-radius:var(--mg-radius-s); background:var(--mg-sable); color:var(--mg-nuit); font-weight:600; }
.mg-kontakt-hilfe { margin:0 0 2rem; padding:clamp(1.25rem,3vw,2rem); border-radius:var(--mg-radius-l); background:var(--mg-sable); }
.mg-kontakt-hilfe h2 { margin-top:0; }
.mg-kontakt-hilfe ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.45rem 1.25rem; margin:1rem 0; padding:0; list-style:none; }
.mg-kontakt-hilfe li { position:relative; padding-left:1rem; }
.mg-kontakt-hilfe li::before { content:''; position:absolute; left:0; top:.65em; width:.35rem; height:.35rem; border-radius:50%; background:var(--mg-argan); }
.mg-faq-suche { margin-top:1.25rem; max-width:38rem; }
.mg-faq-suche label { display:block; margin-bottom:.45rem; font-weight:600; }
.mg-faq-suche input { width:100%; min-height:48px; border:1px solid var(--mg-linie); border-radius:var(--mg-radius-s); padding:.75rem 1rem; background:var(--mg-lait); color:var(--mg-nuit); font:inherit; }
.mg-faq-suche input:focus { outline:2px solid var(--mg-majorelle); outline-offset:2px; }
.product-comments-section { padding-block:3rem; }
.product-comments { font-size:1rem; }
.product-comments h2 { font-size:clamp(1.5rem,3vw,2rem); }
.product-comments .commentlist { list-style:none; padding:0; }
.product-comments .comment { padding-block:1rem; border-bottom:1px solid var(--mg-linie); }
.product-comments .children { padding-left:1.25rem; }
.product-comments .comment-meta,.product-comments .comment-notes { font-size:.875rem; }
.product-comments label { display:block; margin-bottom:.4rem; }
.product-comments input:not([type=submit]),.product-comments textarea { width:100%; padding:.75rem; border:1px solid var(--mg-linie); border-radius:6px; background:transparent; color:inherit; font:inherit; }
.product-comments textarea { resize:vertical; }
@media(min-width:48rem) {
 .story-step:nth-child(even) { grid-template-columns:minmax(0,1fr) 260px; }
 .story-step:nth-child(even) figure { grid-column:2; grid-row:1; }
 .story-step:nth-child(even) > div { grid-column:1; grid-row:1; }
}
@media(max-width:47.9375rem) {
 .story-step { text-align:center; justify-items:center; }
 .story-step figure { width:100%; margin-inline:auto; }
 .story-step details summary { justify-content:center; }
 .journal-grid { grid-template-columns:1fr; gap:2rem; }
 .mg-kontakt-hilfe ul { grid-template-columns:1fr; }
}