/* ==================================================
   SONORO MANUAL - GLOBAL STYLESHEET
   --------------------------------------------------
   Ziel dieser Datei:
   - einheitliche, wartbare Struktur
   - robuste Darstellung in mehreren Sprachen
   - möglichst gleiche Optik wie bisher
   - keine Änderung der Icon- und Bildgrößen
================================================== */


/* ==================================================
   01) DESIGN TOKENS
   --------------------------------------------------
   Zentrale Variablen für Layout, Farben, Radien,
   Schatten, Übergänge und Typografie.
================================================== */

/* =========================
   SONORO FONT (Avenir)
   ========================= */

/* =====================================================
   SONORO FONT (Avenir) – GLOBAL SETUP
   ===================================================== */

/* ---------- Font Faces ---------- */

@font-face {
  font-family: "Sonoro";
  src: url("../assets/fonts/AvenirNextLTPro-UltLt.otf") format("opentype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sonoro";
  src: url("../assets/fonts/AvenirNextLTPro-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sonoro";
  src: url("../assets/fonts/AvenirNextLTPro-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* ---------- Material Theme Override ---------- */

:root {
  --md-text-font: "Sonoro", Arial, sans-serif;
}


/* ---------- Base Typography ---------- */

body {
  font-family: "Sonoro", Arial, sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* =====================================================
   TYPOGRAFIE FEINJUSTIERUNG (SONORO STYLE)
   ===================================================== */

/* Fließtext */
.md-typeset {
  line-height: 1.5;
  letter-spacing: 0.01em;
}

/* Paragraphen + Listen */
.md-typeset p,
.md-typeset li,
.md-typeset td,
.md-typeset th {
  font-weight: 300;
}

/* Headlines */
.md-typeset h1 {
  font-weight: 700;
  letter-spacing: 0.02em;
}

.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  font-weight: 700;
  letter-spacing: 0.01em;
}


/* =====================================================
   UI ELEMENTE (NAV / HEADER / BUTTONS / SEARCH)
   ===================================================== */

/* Sidebar Navigation */
.md-nav {
  font-weight: 300;
}

/* Header */
.md-header__title,
.md-header__topic {
  font-weight: 700;
}

/* Buttons */
.md-button {
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Search */
.md-search__input {
  font-weight: 300;
}

.md-search-result__title {
  font-weight: 400;
}

.md-search-result__teaser {
  font-weight: 300;
}



:root {
  /* Layout */
  --container-max: 1560px;
  --content-measure: 62rem;
  --content-measure-tight: 58rem;

  /* Colors */
  --color-white: #ffffff;
  --color-black: #222;
  --color-ink-900: #0f172a;

  --color-slate-700: #475569;
  --color-slate-500: #64748b;

  --color-border: #cfd5df;
  --color-border-soft: #d7dce3;
  --color-border-light: #dce7f3;
  --color-border-ui: #e5eaf1;
  --color-border-muted: #8f8f8f;

  --color-surface-strong: #f1f5f9;
  --color-surface-soft: #f8fafc;
  --color-surface-note: #f7fbff;
  --color-surface-neutral: #f7f7f7;
  --color-surface-muted: #f2f2f2;
  --color-surface-warning: #eedcdf;

  --color-accent: #9aa7ff;
  --color-danger: #ff2346;

  /* Radius */
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-xl: 16px;
  --radius-2xl: 18px;
  --radius-3xl: 22px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-card: 0 8px 22px rgba(15, 23, 42, 0.08);
  --shadow-card-strong: 0 10px 28px rgba(15, 23, 42, 0.1);
  --shadow-image: 0 8px 24px rgba(0, 0, 0, 0.06);

  /* Motion */
  --transition-card:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;

  --transition-ui: opacity 0.2s ease, transform 0.2s ease;

  /* Type */
  --text-xs: 0.78rem;
  --text-sm: 0.8rem;
  --text-sm-plus: 0.82rem;
  --text-base-sm: 0.84rem;
  --text-base: 0.88rem;
  --text-md: 0.9rem;
  --text-lg: 0.92rem;
  --text-xl: 0.96rem;
  --text-2xl: 0.98rem;
  --text-3xl: 1rem;
  --text-4xl: 1.02rem;
  --text-5xl: 1.05rem;

  /* Common symbols */
  --symbol-arrow: "▶";
  --symbol-bullet: "•";
}


/* ==================================================
   02) GLOBAL HARDENING / BASICS
   --------------------------------------------------
   Sicherheitsnetz für lange Übersetzungen und
   stabilere Grid-/Flex-Layouts.
================================================== */

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

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

img {
  max-width: 100%;
}

.md-grid {
  max-width: var(--container-max);
}

:where(
  .feature-item,
  .delivery-item,
  .device-part-card,
  .device-card,
  .device-card__content,
  .status-led-state,
  .status-led-definition,
  .tech-specs__label,
  .tech-specs__value,
  .startup-step__content,
  .startup-step__media,
  .source-list li,
  .device-note,
  .delivery-hint,
  .portal-hero,
  .md-typeset .fn-hero__content,
  .md-typeset .fn-block__body,
  .md-typeset .bt-intro__content,
  .md-typeset .aura-intro__content,
  .md-typeset .marks-item__text,
  .md-typeset .conformity-content,
  .md-typeset .safety-callout__body,
  .md-typeset .safety-legend-card,
  .md-typeset .disposal-packaging__content,
  .md-typeset .disposal-device__content,
  .md-typeset .disposal-device__battery
) {
  min-width: 0;
}

:where(
  .portal-hero__lead,
  .delivery-label,
  .device-card__content h2,
  .device-part-title,
  .status-led-label,
  .tech-specs__label,
  .tech-specs__value,
  .startup-step__bullet,
  .md-typeset .fn-hero__lead,
  .md-typeset .fn-block__body h2,
  .md-typeset .lock-section h2,
  .md-typeset .bt-intro__content h2,
  .md-typeset .bt-block h3,
  .md-typeset .aura-block h2,
  .md-typeset .battery-warning__title,
  .md-typeset .trouble-block h2,
  .md-typeset .care-block h2,
  .md-typeset .disposal-packaging__alert-title,
  .md-typeset .disposal-device__alert-title,
  .md-typeset .safety-page h2,
  .md-typeset .safety-page h3,
  .md-typeset .safety-callout__label,
  .md-typeset .safety-legend-card__title,
  .md-typeset .safety-section-label__text
) {
  overflow-wrap: break-word;
  hyphens: auto;
}

:where(
  .feature-item p,
  .delivery-hint,
  .device-note,
  .status-led-definition,
  .tech-specs__value,
  .startup-step__content p,
  .startup-note,
  .md-typeset .fn-block__body > p,
  .md-typeset .fn-mode p,
  .md-typeset .fn-status p,
  .md-typeset .lock-section p,
  .md-typeset .bt-status p,
  .md-typeset .aura-status p,
  .md-typeset .marks-item__text p,
  .md-typeset .conformity-content p,
  .md-typeset .safety-page > p,
  .md-typeset .safety-callout__body p
) {
  overflow-wrap: break-word;
  hyphens: auto;
}


/* ==================================================
   03) SHARED COMPONENTS
================================================== */

.feature-badge,
.device-part-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: var(--radius-pill);
  background: var(--color-ink-900);
  color: var(--color-white);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}

.feature-item,
.delivery-item,
.device-part-card {
  border: 1px solid var(--color-border);
  background: var(--color-white);
  transition: var(--transition-card);
}

.feature-item:hover,
.delivery-item:hover,
.device-part-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-card);
  transform: translateY(-1px);
}


/* ==================================================
   04) LIST RESET SYSTEM
   --------------------------------------------------
   Einheitlicher Reset für alle manuell gestalteten
   Listen innerhalb der Dokumentseiten.
================================================== */

.md-typeset :is(
  .fn-bullets,
  .fn-sublist,
  ul.fn-bullets,
  ul.fn-sublist,
  .lock-list,
  ul.lock-list,
  .bt-steps,
  .bt-bullets,
  ul.bt-steps,
  ul.bt-bullets,
  .aura-steps,
  .aura-bullets,
  .battery-steps,
  .battery-substeps,
  ul.battery-steps,
  ul.battery-substeps,
  .trouble-list,
  ul.trouble-list,
  .care-list,
  ul.care-list,
  .disposal-packaging__list,
  ul.disposal-packaging__list,
  .disposal-device__list,
  ul.disposal-device__list,
  .safety-list,
  ul.safety-list
) {
  margin: 0;
  padding: 0;
  list-style: none !important;
}

.md-typeset :is(
  .fn-bullets li,
  .fn-sublist li,
  ul.fn-bullets li,
  ul.fn-sublist li,
  .lock-list li,
  ul.lock-list li,
  .bt-steps li,
  .bt-bullets li,
  ul.bt-steps li,
  ul.bt-bullets li,
  .aura-steps li,
  .aura-bullets li,
  .battery-steps li,
  .battery-substeps li,
  ul.battery-steps li,
  ul.battery-substeps li,
  .trouble-list li,
  ul.trouble-list li,
  .care-list li,
  ul.care-list li,
  .disposal-packaging__list li,
  ul.disposal-packaging__list li,
  .disposal-device__list li,
  ul.disposal-device__list li,
  .safety-list li,
  ul.safety-list li
) {
  list-style: none !important;
}

.md-typeset :is(
  .fn-bullets li::marker,
  .fn-sublist li::marker,
  ul.fn-bullets li::marker,
  ul.fn-sublist li::marker,
  .lock-list li::marker,
  ul.lock-list li::marker,
  .bt-steps li::marker,
  .bt-bullets li::marker,
  ul.bt-steps li::marker,
  ul.bt-bullets li::marker,
  .aura-steps li::marker,
  .aura-bullets li::marker,
  .battery-steps li::marker,
  .battery-substeps li::marker,
  ul.battery-steps li::marker,
  ul.battery-substeps li::marker,
  .trouble-list li::marker,
  ul.trouble-list li::marker,
  .care-list li::marker,
  ul.care-list li::marker,
  .disposal-packaging__list li::marker,
  ul.disposal-packaging__list li::marker,
  .disposal-device__list li::marker,
  ul.disposal-device__list li::marker,
  .safety-list li::marker,
  ul.safety-list li::marker
) {
  content: "" !important;
}


/* ==================================================
   05) HERO IMAGE
================================================== */

.hero-image {
  margin: 1.5rem 0 2.5rem;
  text-align: center;
}

.hero-image img {
  width: 100%;
  max-width: 920px;
  height: auto;
}


/* ==================================================
   06) FEATURE GRID
================================================== */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.feature-item {
  padding: 1.2rem 1.3rem;
  border-radius: var(--radius-xl);
}

.feature-item h3 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: var(--text-5xl);
  font-weight: 700;
  line-height: 1.2;
  min-width: 0;
}


/* ==================================================
   07) SOURCE LIST
================================================== */

.source-list {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}

.source-list li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  column-gap: 0.9rem;
  margin-bottom: 0.75rem;
  line-height: 1.35;
}

.source-list li:last-child {
  margin-bottom: 0;
}

.source-icon-img {
  width: 20px;
  height: 20px;
  display: block;
  object-fit: contain;
  justify-self: center;
  align-self: center;
}

.source-icon-img[src$="radio.svg"] {
  width: 30px;
  height: 30px;
}

.source-icon-img[src$="streamingservices.svg"],
.source-icon-img[src$="externequellen.svg"] {
  width: 20px;
  height: 20px;
}

.source-icon-img[src$="bt.svg"],
.source-icon-img[src$="auracast.svg"] {
  width: 18px;
  height: 18px;
}

.source-icon-img[src$="FAV.svg"] {
  width: 24px;
  height: 24px;
}

.source-icon-img[src$="preset1.svg"],
.source-icon-img[src$="preset2.svg"],
.source-icon-img[src$="preset3.svg"] {
  width: 14px;
  height: 14px;
  opacity: 0.85;
}

.source-label {
  display: none;
}


/* ==================================================
   08) LIEFERUMFANG
================================================== */

.delivery-section {
  margin-top: 2rem;
}

.delivery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}

.delivery-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.2rem 1.3rem;
  border-radius: var(--radius-xl);
  text-align: center;
}

.delivery-item img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: 140px;
  object-fit: contain;
}

.delivery-item--small img {
  height: 120px;
}

.delivery-item .feature-badge {
  margin: 0 auto 0.9rem;
}

.delivery-label {
  margin: 0 auto;
  max-width: 280px;
  text-align: center;
  font-weight: 600;
  line-height: 1.35;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: auto;
}

.delivery-note {
  margin-top: 2rem;
}

.delivery-hint {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.9rem;
  padding: 0.7rem 0.8rem;
  border-radius: var(--radius-md);
  background: var(--color-surface-strong);
  color: var(--color-slate-700);
  font-size: var(--text-md);
  line-height: 1.45;
  text-align: left;
}

.delivery-hint-icon {
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
  margin-top: 0.1rem;
  color: var(--color-slate-500);
  flex-shrink: 0;
}


/* ==================================================
   09) PORTAL HERO / STARTSEITE
================================================== */

.portal-hero {
  margin: 0 0 2.5rem;
  padding: 2rem 2rem 1.8rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-3xl);
  background: linear-gradient(180deg, var(--color-white) 0%, var(--color-surface-soft) 100%);
}

.portal-hero__eyebrow {
  margin: 0 0 0.5rem;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-slate-500);
}

.portal-hero h1 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05;
}

.portal-hero__lead {
  max-width: 860px;
  margin: 1rem 0 0;
  font-size: var(--text-5xl);
  line-height: 1.65;
  color: var(--color-slate-700);
}


/* ==================================================
   10) GERÄTEPORTAL / STARTSEITE
================================================== */

.device-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.device-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  background: var(--color-white);
  overflow: hidden;
  transition: var(--transition-card);
  height: 100%;
}

.device-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-card-strong);
  transform: translateY(-2px);
}

.device-card__image {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  min-height: 230px;
  background: linear-gradient(180deg, var(--color-surface-soft) 0%, var(--color-surface-strong) 100%);
  border-bottom: 1px solid var(--color-border-ui);
}

.device-card__image img {
  max-width: 100%;
  max-height: 170px;
  object-fit: contain;
  display: block;
}

.device-card__content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 1.2rem 1.3rem 1.3rem;
  gap: 0.5rem;
}

.device-card__kicker {
  display: none;
}

.device-card__content h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.device-card__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.8rem;
  padding: 0.6rem 1.2rem;
  border-radius: var(--radius-pill);
  background: var(--color-ink-900);
  color: var(--color-white) !important;
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.2;
  width: fit-content;
  max-width: 100%;
  text-align: center;
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: normal;
  overflow-wrap: break-word;
  hyphens: auto;
}

.device-card__button:hover {
  transform: translateY(-1px);
  opacity: 0.92;
}




/* ==================================================
   12) GERÄTEÜBERSICHT
================================================== */

.device-overview {
  margin-top: 1.5rem;
}

.device-hero {
  margin: 0 0 2rem;
  text-align: center;
}

.device-hero img {
  display: block;
  width: 100%;
  max-width: 920px;
  height: auto;
  margin: 0 auto;
  border-radius: 1rem;
  background: var(--color-surface-neutral);
  padding: 0.75rem;
  box-shadow: var(--shadow-image);
}

.device-parts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 0 0 1.5rem;
}

.device-part-card {
  display: grid;
  grid-template-columns: 56px 34px minmax(0, 1fr);
  align-items: center;
  column-gap: 1rem;
  padding: 1.2rem 1.3rem;
  border-radius: var(--radius-xl);
}

img.device-part-icon {
  display: block;
  width: 22px;
  height: 22px;
  object-fit: contain;
  justify-self: center;
  align-self: center;
}

img.device-part-icon[src$="onoff.svg"] {
  width: 18px;
  height: 18px;
}

img.device-part-icon[src$="skipBack.svg"],
img.device-part-icon[src$="skipFor.svg"],
img.device-part-icon[src$="playpause.svg"],
img.device-part-icon[src$="fuesse.svg"],
img.device-part-icon[src$="netzanschluss.svg"],
img.device-part-icon[src$="akku.svg"] {
  width: 22px;
  height: 22px;
}

img.device-part-icon[src$="volumeDown.svg"],
img.device-part-icon[src$="volumeUp.svg"],
img.device-part-icon[src$="tropfschutz.svg"],
img.device-part-icon[src$="diebstahlschutz.svg"] {
  width: 20px;
  height: 20px;
}

img.device-part-icon[src$="bt.svg"],
img.device-part-icon[src$="auracastsym.svg"] {
  width: 18px;
  height: 18px;
}

img.device-part-icon[src$="eqboost.svg"] {
  width: 24px;
  height: 24px;
}

img.device-part-icon[src$="statusschwarz.svg"] {
  width: 16px;
  height: 30px;
}

.device-part-title {
  font-size: var(--text-5xl);
  line-height: 1.3;
  font-weight: 500;
  color: var(--color-black);
}

.device-note {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.1rem;
  border-radius: 1rem;
  border: 1px solid var(--color-border-light);
  background: var(--color-surface-note);
  color: #314256;
}

.device-note-icon {
  font-size: var(--text-5xl);
  line-height: 1.2;
  flex-shrink: 0;
}

.device-part-card--no-icon {
  grid-template-columns: 56px minmax(0, 1fr);
}

.device-part-hint {
  font-size: 0.85rem;
  color: var(--color-slate-500);
  font-weight: 400;
  margin-left: 0.35rem;
  white-space: normal;
  overflow-wrap: break-word;
  hyphens: auto;
}


/* ==================================================
   13) STATUS LED
================================================== */

.status-led-table {
  display: grid;
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
  column-gap: 2rem;
  row-gap: 1.4rem;
  margin-top: 2rem;
}

.status-led-head {
  font-weight: 700;
  font-size: var(--text-5xl);
}

.status-led-row {
  display: contents;
}

.status-led-state {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.status-led-blink-group {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  flex-shrink: 0;
}

.status-led-icon {
  display: block;
  width: 18px;
  height: 30px;
  object-fit: contain;
  flex-shrink: 0;
}

.status-led-label {
  font-weight: 500;
  white-space: normal;
}

.status-led-definition {
  line-height: 1.6;
  min-width: 0;
}


/* ==================================================
   14) TECHNISCHE DATEN
================================================== */

.tech-specs {
  margin-top: 1.5rem;
  border-top: 1px solid var(--color-border-muted);
}

.tech-specs__row {
  display: grid;
  grid-template-columns: minmax(220px, 290px) minmax(0, 1fr);
  gap: 1.5rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--color-border-muted);
  align-items: start;
}

.tech-specs__label {
  font-weight: 500;
  line-height: 1.35;
}

.tech-specs__value {
  line-height: 1.5;
}

.tech-specs__list {
  margin: 0;
  padding-left: 1.2rem;
}

.tech-specs__list li {
  margin: 0.15rem 0;
}

.tech-specs__note {
  margin-top: 2rem;
  line-height: 1.4;
}


/* ==================================================
   15) INBETRIEBNAHME
================================================== */

.startup-step {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  margin-bottom: 60px;
}

.startup-step__media {
  background: var(--color-surface-neutral);
  border: 1px solid var(--color-border-ui);
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
}

.startup-step__media img {
  max-width: 100%;
  max-height: 260px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.startup-step__content {
  max-width: 100%;
}

.startup-step__bullet {
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 12px;
}

.startup-step__content p {
  color: var(--color-slate-700);
  line-height: 1.6;
  margin: 0 0 12px;
}

.startup-note {
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--color-surface-strong);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  color: var(--color-slate-700);
}

.startup-status {
  margin-top: 40px;
}

.startup-status-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  min-width: 0;
}

.startup-status-item img {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}


/* ==================================================
   16) FUNKTION & NAVIGATION
================================================== */

.md-typeset .fn-page {
  margin-top: 0.1rem;
}

.md-typeset .fn-hero {
  display: grid;
  grid-template-columns: minmax(220px, 360px) minmax(280px, 1fr);
  gap: 2rem;
  align-items: center;
  margin: 0 0 2.6rem;
}

.md-typeset .fn-hero__media img {
  display: block;
  width: 100%;
  height: auto;
}

.md-typeset .fn-hero__content {
  max-width: 30rem;
}

.md-typeset .fn-hero__lead {
  margin: 0 0 0.8rem;
  font-size: 1.22rem;
  line-height: 1.2;
  font-weight: 500;
}

.md-typeset .fn-hero__content p:last-child {
  margin: 0;
  font-size: var(--text-md);
  line-height: 1.45;
}

.md-typeset .fn-block {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  margin: 0 0 2.2rem;
}

.md-typeset .fn-block__icon {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 0.08rem;
}

.md-typeset .fn-block__icon img {
  display: block;
  width: 1.35rem;
  height: auto;
}

.md-typeset .fn-block__body h2 {
  margin: 0 0 0.35rem;
  font-size: 1.1rem;
  line-height: 1.2;
  font-weight: 500;
}

.md-typeset .fn-block__body > p {
  margin: 0 0 0.3rem;
  font-size: 0.85rem;
  line-height: 1.4;
}

.md-typeset .fn-mode + .fn-mode {
  margin-top: 0.7rem;
}

.md-typeset .fn-mode h3 {
  margin: 0 0 0.15rem;
  font-size: 0.87rem;
  line-height: 1.3;
  font-weight: 700;
}

.md-typeset .fn-mode p {
  margin: 0 0 0.2rem;
  font-size: 0.85rem;
  line-height: 1.4;
}

.md-typeset .fn-bullets > li {
  position: relative;
  margin: 0 0 0.34rem;
  padding-left: 0.95rem;
  font-size: 0.85rem;
  line-height: 1.42;
}

.md-typeset .fn-bullets > li::before {
  content: var(--symbol-arrow);
  position: absolute;
  left: 0;
  top: 0.14rem;
  font-size: 0.52rem;
  line-height: 1;
}

.md-typeset .fn-sublist {
  margin-top: 0.18rem;
}

.md-typeset .fn-sublist > li {
  position: relative;
  margin: 0 0 0.2rem;
  padding-left: 0.7rem;
  font-size: var(--text-sm);
  line-height: 1.38;
}

.md-typeset .fn-sublist > li::before {
  content: var(--symbol-bullet);
  position: absolute;
  left: 0;
  top: 0;
  font-size: 0.72rem;
  line-height: 1;
}

.md-typeset .fn-inline-note {
  margin-top: 0.12rem;
  font-size: var(--text-sm);
  line-height: 1.38;
}

.md-typeset .fn-status {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.5rem;
  align-items: start;
  margin-top: 0.45rem;
}

.md-typeset .fn-status__icons {
  display: flex;
  align-items: center;
  gap: 0.08rem;
  padding-top: 0.04rem;
}

.md-typeset .fn-status__icons img {
  display: block;
  width: 0.56rem;
  height: auto;
}

.md-typeset .fn-status p {
  margin: 0;
  max-width: 34rem;
  font-size: 0.84rem;
  line-height: 1.42;
}

.md-typeset .fn-block--volume {
  align-items: center;
}

.md-typeset .fn-block__icon--volume {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.38rem;
  padding-top: 0;
}

.md-typeset .fn-block__icon--volume img {
  display: block;
  width: 1.18rem;
  height: auto;
}


/* ==================================================
   17) TASTENSPERRE
================================================== */

.md-typeset .lock-page {
  margin-top: 0.15rem;
}

.md-typeset .lock-section {
  margin: 0 0 2rem;
}

.md-typeset .lock-section h2 {
  margin: 0 0 0.55rem;
  font-size: var(--text-4xl);
  line-height: 1.3;
  font-weight: 700;
}

.md-typeset .lock-section p {
  margin: 0.35rem 0 0;
  max-width: 48rem;
  font-size: var(--text-lg);
  line-height: 1.6;
}

.md-typeset .lock-list li {
  position: relative;
  margin: 0;
  padding-left: 1.1rem;
  font-size: var(--text-lg);
  line-height: 1.6;
}

.md-typeset .lock-list li::before,
.md-typeset ul.lock-list li::before {
  content: var(--symbol-arrow);
  position: absolute;
  left: 0;
  top: 0.18rem;
  font-size: 0.62rem;
  line-height: 1;
}

.md-typeset .inline-icon {
  display: inline-flex;
  align-items: center;
  vertical-align: -0.12em;
  margin: 0 0.15em;
}

.md-typeset .inline-icon img {
  display: block;
  width: 1.05em;
  height: auto;
}

.md-typeset .inline-icon--playpause img {
  width: 1.1em;
}

.md-typeset .inline-icon--eqboost {
  vertical-align: -0.15em;
}

/* ==================================================
   18) BLUETOOTH
================================================== */

.md-typeset .bt-page {
  margin-top: 0.1rem;
}

.md-typeset .bt-intro {
  display: block;
  margin: 0 0 1.6rem;
}

.md-typeset .bt-intro__content h2 {
  margin: 0 0 0.35rem;
  font-size: 0.98rem;
  line-height: 1.25;
  font-weight: 700;
}

.md-typeset .bt-steps > li {
  position: relative;
  margin: 0 0 0.35rem;
  padding-left: 0.9rem;
  font-size: 0.84rem;
  line-height: 1.42;
}

.md-typeset .bt-steps > li::before {
  content: var(--symbol-arrow);
  position: absolute;
  left: 0;
  top: 0.14rem;
  font-size: 0.5rem;
}

.md-typeset .bt-status {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.42rem;
  align-items: start;
  margin: 0.25rem 0 0.7rem;
}

.md-typeset .bt-status__icons {
  display: flex;
  align-items: center;
  gap: 0.06rem;
  padding-top: 0.02rem;
}

.md-typeset .bt-status__icons img {
  display: block;
  width: 0.58rem;
  height: auto;
}

.md-typeset .bt-status--single .bt-status__icons img {
  width: 0.62rem;
}

.md-typeset .bt-status p {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.42;
}

.md-typeset .bt-block {
  margin: 0 0 1.35rem;
}

.md-typeset .bt-block h3 {
  margin: 0 0 0.35rem;
  font-size: var(--text-lg);
  line-height: 1.25;
  font-weight: 700;
}

.md-typeset .bt-bullets > li {
  position: relative;
  margin: 0 0 0.28rem;
  padding-left: 0.8rem;
  font-size: 0.84rem;
  line-height: 1.42;
}

.md-typeset .bt-bullets > li::before {
  content: var(--symbol-bullet);
  position: absolute;
  left: 0;
  top: 0;
  font-size: 0.75rem;
}

.md-typeset .bt-inline-icon {
  display: inline-flex;
  align-items: center;
  vertical-align: -0.08em;
}

.md-typeset .bt-inline-icon img {
  display: block;
  height: auto;
}

.md-typeset .bt-inline-icon--bt {
  margin: 0 0.08em;
}

.md-typeset .bt-inline-icon--bt img {
  width: 0.62em;
}

.md-typeset .bt-inline-icon--heading {
  margin-left: 0.12em;
  vertical-align: -0.1em;
}

.md-typeset .bt-inline-icon--heading img {
  width: 0.68em;
}

/* ==================================================
   19) AURACAST
================================================== */

.md-typeset .aura-page {
  margin-top: 0.1rem;
}

.md-typeset .aura-intro {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 0.9rem;
  align-items: start;
  margin: 0 0 1.6rem;
}

.md-typeset .aura-intro__aside {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 0.02rem;
}

.md-typeset .aura-intro__press {
  display: block;
  width: 2.2rem;
  height: auto;
}

.md-typeset .aura-intro__content p {
  margin: 0 0 0.42rem;
  font-size: 0.84rem;
  line-height: 1.45;
}

.md-typeset .aura-linkline {
  margin-top: 0.28rem;
  font-size: var(--text-sm);
}

.md-typeset .aura-block {
  margin: 0 0 1.35rem;
}

.md-typeset .aura-block h2 {
  margin: 0 0 0.35rem;
  font-size: var(--text-lg);
  font-weight: 700;
}

.md-typeset .aura-steps > li {
  position: relative;
  margin: 0 0 0.34rem;
  padding-left: 0.92rem;
  font-size: 0.84rem;
  line-height: 1.45;
}

.md-typeset .aura-steps > li::before {
  content: var(--symbol-arrow);
  position: absolute;
  left: 0;
  top: 0.14rem;
  font-size: 0.5rem;
}

.md-typeset .aura-bullets > li {
  position: relative;
  margin: 0 0 0.3rem;
  padding-left: 0.8rem;
  font-size: 0.84rem;
  line-height: 1.45;
}

.md-typeset .aura-bullets > li::before {
  content: var(--symbol-bullet);
  position: absolute;
  left: 0;
  font-size: 0.74rem;
}

.md-typeset .aura-status {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.42rem;
  align-items: start;
  margin-top: 0.3rem;
}

.md-typeset .aura-status__icons {
  display: flex;
  align-items: center;
  gap: 0.06rem;
  padding-top: 0.02rem;
}

.md-typeset .aura-status__icons img {
  display: block;
  width: 0.58rem;
  height: auto;
}

.md-typeset .aura-status--single .aura-status__icons img {
  width: 0.62rem;
}

.md-typeset .aura-status p {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.42;
}

.md-typeset .aura-inline-icon {
  display: inline-flex;
  align-items: center;
  vertical-align: -0.08em;
  margin: 0 0.08em;
}

.md-typeset .aura-inline-icon img {
  width: 0.72em;
}

.md-typeset .aura-tips {
  margin-top: 1.45rem;
  padding: 0.75rem 0.9rem;
  border-radius: 0.4rem;
  background: rgba(0, 0, 0, 0.04);
  border-left: 3px solid var(--md-primary-fg-color);
}

.md-typeset .aura-tips ul {
  margin: 0;
  padding: 0;
  list-style: none !important;
}

.md-typeset .aura-tips li {
  position: relative;
  margin: 0 0 0.3rem;
  padding-left: 0.8rem;
  font-size: 0.84rem;
}

.md-typeset .aura-tips li::before {
  content: var(--symbol-bullet);
  position: absolute;
  left: 0;
  font-size: 0.74rem;
}

.md-typeset .aura-bullets a,
.md-typeset .aura-intro__content a {
  font-weight: 600;
  color: var(--md-primary-fg-color);
  text-decoration: none;
}

.md-typeset .aura-bullets a:hover {
  text-decoration: underline;
}


/* ==================================================
   20) EQ BOOST
================================================== */

.md-typeset .eqboost-inline-icon {
  display: inline-flex;
  align-items: center;
  vertical-align: baseline;
  margin-left: 0.3rem;
}

.md-typeset .eqboost-inline-icon img {
  width: 1.2rem;
  height: auto;
  display: block;
}

.md-typeset .eqboost-list {
  list-style: none !important;
  margin: 1.2rem 0 0;
  padding: 0;
}

.md-typeset .eqboost-list > li {
  position: relative;
  margin: 0 0 1.6rem;
  padding-left: 1.5rem;
  font-size: var(--text-base);
  line-height: 1.45;
}

.md-typeset .eqboost-list > li::before {
  content: var(--symbol-arrow);
  position: absolute;
  left: 0;
  top: 0.05rem;
  font-size: 0.95rem;
}

.md-typeset .eqboost-status {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.75rem;
  margin-top: 0.55rem;
}

.md-typeset .eqboost-status__icons img {
  width: 0.58rem;
  height: auto;
  display: block;
}

.md-typeset .eqboost-status p {
  margin: 0;
  font-size: var(--text-base);
}


/* ==================================================
   21) APP
================================================== */

.md-typeset .app-intro {
  display: grid;
  grid-template-columns: 5.2rem minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  margin: 0 0 1.4rem;
}

.md-typeset .app-intro__icon img {
  width: 100%;
  max-width: 5rem;
  height: auto;
  display: block;
  border-radius: 0.8rem;
}

.md-typeset .app-intro__text p {
  margin: 0;
}

.md-typeset .app-store-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin: 0.85rem 0 1.4rem;
}

.md-typeset .app-store-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.1rem;
  padding: 0.45rem 0.9rem;
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm-plus);
  line-height: 1.2;
  text-decoration: none;
  transition: var(--transition-ui);
  max-width: 100%;
  text-align: center;
  white-space: normal;
  overflow-wrap: break-word;
  hyphens: auto;
}

.md-typeset .app-store-button:hover {
  opacity: 0.82;
  transform: translateY(-1px);
}

.md-typeset .app-feature-list,
.md-typeset .app-feature-list ul,
.md-typeset .app-feature-list ol,
.md-typeset .app-update-steps,
.md-typeset .app-update-steps ul,
.md-typeset .app-update-steps ol {
  margin-left: 0;
}

.md-typeset .app-feature-list {
  list-style: none !important;
  padding-left: 0;
  margin-top: 0.7rem;
}

.md-typeset .app-feature-list > li {
  position: relative;
  padding-left: 1rem;
  margin: 0 0 0.45rem;
}

.md-typeset .app-feature-list > li::before {
  content: var(--symbol-bullet);
  position: absolute;
  left: 0;
  top: 0;
}

.md-typeset .app-update-steps {
  margin-top: 0.8rem;
  padding-left: 1.4rem;
}

.md-typeset .app-update-steps > li {
  margin: 0 0 0.65rem;
  padding-left: 0.15rem;
}

.md-typeset .app-update-steps ul {
  list-style: none !important;
  padding-left: 0;
  margin: 0.55rem 0 0;
}

.md-typeset .app-update-steps ul > li {
  position: relative;
  padding-left: 1rem;
  margin: 0 0 0.3rem;
}

.md-typeset .app-update-steps ul > li::before {
  content: var(--symbol-bullet);
  position: absolute;
  left: 0;
  top: 0;
}

.md-typeset .doc-link {
  text-decoration: underline;
}

.md-typeset .break-link {
  word-break: break-word;
  overflow-wrap: anywhere;
}


/* ==================================================
   22) DIEBSTAHLSCHUTZ
================================================== */

.md-typeset .theft-image {
  margin: 1.6rem 0 1.6rem;
  text-align: center;
}

.md-typeset .theft-image img {
  display: block;
  width: 100%;
  max-width: 22rem;
  height: auto;
  margin: 0 auto;
}

.md-typeset .theft-note {
  margin-top: 0.4rem;
  max-width: var(--content-measure-tight);
}

.md-typeset .theft-note p {
  margin: 0;
  font-size: var(--text-md);
  line-height: 1.5;
}


/* ==================================================
   23) TRAVELCASE
================================================== */

.md-typeset .travelcase-image {
  margin: 1.6rem 0 1.6rem;
  text-align: center;
}

.md-typeset .travelcase-image img {
  display: block;
  width: 100%;
  max-width: 22rem;
  height: auto;
  margin: 0 auto;
}

.md-typeset .travelcase-linkline {
  margin-top: 0.5rem;
  font-size: var(--text-md);
  line-height: 1.45;
}

.md-typeset .travelcase-linkline a {
  font-weight: 600;
  text-decoration: none;
}

.md-typeset .travelcase-linkline a:hover {
  text-decoration: underline;
}


/* ==================================================
   24) BATTERIEWECHSEL
================================================== */

.md-typeset .battery-page {
  margin-top: 0.1rem;
}

.md-typeset .battery-steps > li {
  position: relative;
  margin: 0 0 0.48rem;
  padding-left: 1rem;
  font-size: var(--text-base);
  line-height: 1.45;
}

.md-typeset .battery-steps > li::before {
  content: var(--symbol-arrow);
  position: absolute;
  left: 0;
  top: 0.12rem;
  font-size: 0.56rem;
  line-height: 1;
}

.md-typeset .battery-substeps {
  margin-top: 0.35rem;
}

.md-typeset .battery-substeps > li {
  position: relative;
  margin: 0 0 0.28rem;
  padding-left: 0.82rem;
  font-size: 0.84rem;
  line-height: 1.42;
}

.md-typeset .battery-substeps > li::before {
  content: var(--symbol-arrow);
  position: absolute;
  left: 0;
  top: 0.14rem;
  font-size: 0.5rem;
  line-height: 1;
}

.md-typeset .battery-image {
  margin: 1.2rem 0 1.4rem;
  text-align: center;
}

.md-typeset .battery-image img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.md-typeset .battery-image--wide img {
  max-width: 14rem;
}

.md-typeset .battery-image-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
  align-items: start;
  margin: 1.4rem 0 1.6rem;
}

.md-typeset .battery-image--small {
  margin: 0;
}

.md-typeset .battery-image--small img {
  max-width: 16rem;
}

.md-typeset .battery-warning {
  margin-top: 1.2rem;
  padding: 1rem 1.1rem;
  border-radius: 0.9rem;
  border: 1px solid var(--color-border-soft);
  background: var(--color-surface-neutral);
}

.md-typeset .battery-warning__title {
  margin: 0 0 0.45rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
}

.md-typeset .battery-warning p {
  margin: 0;
  font-size: var(--text-base);
  line-height: 1.45;
  font-weight: 600;
}


/* ==================================================
   25) STÖRUNGSBEHEBUNG
================================================== */

.md-typeset .trouble-page {
  margin-top: 0.1rem;
}

.md-typeset .trouble-page > p {
  margin-bottom: 0.7rem;
}

.md-typeset .trouble-legend {
  margin: 0 0 1.8rem;
}

.md-typeset .trouble-legend p {
  margin: 0 0 0.2rem;
  font-size: var(--text-base);
  line-height: 1.45;
}

.md-typeset .trouble-reference {
  margin-top: 0.25rem;
  font-size: 0.84rem;
  line-height: 1.4;
}

.md-typeset .trouble-block {
  margin: 0 0 1.6rem;
}

.md-typeset .trouble-block h2 {
  margin: 0 0 0.35rem;
  font-size: 0.96rem;
  line-height: 1.3;
  font-weight: 700;
}

.md-typeset .trouble-list--bullet > li {
  position: relative;
  margin: 0 0 0.15rem;
  padding-left: 0.9rem;
  font-size: var(--text-base);
  line-height: 1.45;
}

.md-typeset .trouble-list--bullet > li::before {
  content: var(--symbol-bullet);
  position: absolute;
  left: 0;
  top: 0;
  font-size: 0.78rem;
  line-height: 1;
}

.md-typeset .trouble-list--arrow {
  margin-top: 0.15rem;
}

.md-typeset .trouble-list--arrow > li {
  position: relative;
  margin: 0 0 0.18rem;
  padding-left: 1rem;
  font-size: 0.86rem;
  line-height: 1.43;
}

.md-typeset .trouble-list--arrow > li::before {
  content: var(--symbol-arrow);
  position: absolute;
  left: 0;
  top: 0.14rem;
  font-size: 0.52rem;
  line-height: 1;
}


/* ==================================================
   26) REINIGUNG UND PFLEGE
================================================== */

.md-typeset .care-page {
  margin-top: 0.1rem;
}

.md-typeset .care-block {
  margin: 0 0 1.7rem;
}

.md-typeset .care-block p {
  margin: 0 0 0.55rem;
  font-size: var(--text-md);
  line-height: 1.52;
}

.md-typeset .care-alert {
  margin: 0 0 0.35rem;
  font-weight: 400;
}

.md-typeset .care-block h2 {
  margin: 0 0 0.45rem;
  font-size: 1rem;
  line-height: 1.3;
  font-weight: 700;
}

.md-typeset .care-list > li {
  position: relative;
  margin: 0 0 0.34rem;
  padding-left: 1rem;
  font-size: var(--text-md);
  line-height: 1.5;
}

.md-typeset .care-list > li::before {
  content: var(--symbol-arrow);
  position: absolute;
  left: 0;
  top: 0.16rem;
  font-size: 0.55rem;
  line-height: 1;
}

.md-typeset .care-note {
  margin: 0 0 1.55rem;
}

.md-typeset .care-note p {
  margin: 0;
  font-size: var(--text-md);
  line-height: 1.5;
}


/* ==================================================
   27) VERPACKUNG ENTSORGEN
================================================== */

.md-typeset .disposal-packaging {
  margin-top: 0.1rem;
}

.md-typeset .disposal-packaging__alert {
  margin: 0 0 1.7rem;
}

.md-typeset .disposal-packaging__alert-title {
  margin: 0 0 0.45rem;
  font-size: 1.05rem;
  line-height: 1.2;
  font-weight: 700;
}

.md-typeset .disposal-packaging__alert-text {
  margin: 0 0 0.55rem;
  font-size: var(--text-lg);
  line-height: 1.5;
}

.md-typeset .disposal-packaging__divider {
  margin: 1.5rem 0 1.7rem;
  border: 0;
  border-top: 1px solid var(--color-black);
}

.md-typeset .disposal-packaging__content > p {
  margin: 0 0 0.65rem;
  font-size: var(--text-lg);
  line-height: 1.52;
  max-width: var(--content-measure-tight);
}

.md-typeset .disposal-packaging__list > li {
  position: relative;
  margin: 0 0 0.4rem;
  padding-left: 1rem;
  font-size: var(--text-lg);
  line-height: 1.5;
}

.md-typeset .disposal-packaging__list > li::before {
  content: var(--symbol-arrow);
  position: absolute;
  left: 0;
  top: 0.16rem;
  font-size: 0.56rem;
  line-height: 1;
}

.md-typeset .disposal-packaging__list--alert {
  margin-top: 0.35rem;
}

.md-typeset .disposal-packaging__footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: end;
  margin-top: 0.7rem;
}

.md-typeset .disposal-packaging__icon {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.md-typeset .disposal-packaging__icon img {
  display: block;
  width: 4.2rem;
  height: auto;
}


/* ==================================================
   28) GERÄT ENTSORGEN
================================================== */

.md-typeset .disposal-device {
  margin-top: 0.1rem;
}

.md-typeset .disposal-device__alert {
  margin: 0 0 1.7rem;
}

.md-typeset .disposal-device__alert-title {
  margin: 0 0 0.45rem;
  font-size: 1.05rem;
  line-height: 1.2;
  font-weight: 700;
}

.md-typeset .disposal-device__alert-text {
  margin: 0 0 0.55rem;
  font-size: var(--text-lg);
  line-height: 1.5;
}

.md-typeset .disposal-device__divider {
  margin: 1.5rem 0 1.7rem;
  border: 0;
  border-top: 1px solid var(--color-black);
}

.md-typeset .disposal-device__content > p,
.md-typeset .disposal-device__battery > p {
  margin: 0 0 0.65rem;
  font-size: var(--text-lg);
  line-height: 1.52;
  max-width: var(--content-measure-tight);
}

.md-typeset .disposal-device__list > li {
  position: relative;
  margin: 0 0 0.4rem;
  padding-left: 1rem;
  font-size: var(--text-lg);
  line-height: 1.5;
}

.md-typeset .disposal-device__list > li::before {
  content: var(--symbol-arrow);
  position: absolute;
  left: 0;
  top: 0.16rem;
  font-size: 0.56rem;
  line-height: 1;
}

.md-typeset .disposal-device__list--alert {
  margin-top: 0.35rem;
}

.md-typeset .disposal-device__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: end;
  margin-top: 0.2rem;
}

.md-typeset .disposal-device__icons {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 0.8rem;
}

.md-typeset .disposal-device__icons img {
  display: block;
  height: auto;
}

.md-typeset .disposal-device__icons img:first-child,
.md-typeset .disposal-device__icons img:last-child {
  width: 3.7rem;
}

.md-typeset .disposal-device__battery {
  margin-top: 1.5rem;
}


/* ==================================================
   29) PRÜFZEICHEN
================================================== */

.md-typeset .marks-page {
  margin-top: 0.1rem;
}

.md-typeset .marks-item {
  display: grid;
  grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
  gap: 1.3rem;
  align-items: start;
  margin: 0 0 2rem;
}

.md-typeset .marks-item__logo {
  display: flex;
  align-items: center;
}

.md-typeset .marks-item__logo img {
  display: block;
  max-width: 200px;
  height: auto;
}

.md-typeset .marks-item__logo img[src$="btmarke.svg"] {
  max-width: 220px;
}

.md-typeset .marks-item__logo img[src$="auracastMarke.svg"] {
  max-width: 200px;
}

.md-typeset .marks-item__logo img[src$="aptxbt.svg"] {
  max-width: 180px;
}

.md-typeset .marks-item__text p {
  margin: 0;
  font-size: var(--text-md);
  line-height: 1.52;
}

.md-typeset .marks-note {
  margin: 2.4rem 0 0;
  max-width: var(--content-measure-tight);
  font-size: var(--text-md);
  line-height: 1.52;
}


/* ==================================================
   30) KONFORMITÄTSERKLÄRUNG
================================================== */

.md-typeset .conformity-page {
  margin-top: 0.1rem;
}

.md-typeset .conformity-header {
  display: grid;
  grid-template-columns: minmax(15rem, 24rem) auto;
  gap: 2.2rem;
  align-items: start;
  margin: 0 0 2.4rem;
}

.md-typeset .conformity-manufacturer p {
  margin: 0 0 0.22rem;
  font-size: var(--text-lg);
  line-height: 1.5;
}

.md-typeset .conformity-manufacturer__title {
  margin-bottom: 0.55rem !important;
}

.md-typeset .conformity-manufacturer__spacer {
  margin: 0 0 0.9rem !important;
}

.md-typeset .conformity-mark {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding-top: 0.25rem;
}

.md-typeset .conformity-mark img {
  display: block;
  width: 8.5rem;
  height: auto;
}

.md-typeset .conformity-content {
  max-width: var(--content-measure-tight);
}

.md-typeset .conformity-content p {
  margin: 0 0 1.25rem;
  font-size: var(--text-lg);
  line-height: 1.55;
}

.md-typeset .conformity-content p:last-child {
  margin-bottom: 0;
}


/* ==================================================
   31) SICHERHEITSINFORMATIONEN
================================================== */

.md-typeset .safety-page {
  margin-top: 0.1rem;
}

.md-typeset .safety-page > p {
  margin: 0 0 0.95rem;
  max-width: var(--content-measure);
  font-size: var(--text-lg);
  line-height: 1.58;
}

.md-typeset .safety-page h2,
.md-typeset .safety-page h3 {
  margin: 0;
}

.md-typeset .safety-page h2 {
  margin: 2rem 0 0.7rem;
  font-size: var(--text-4xl);
  line-height: 1.28;
  font-weight: 700;
}

.md-typeset .safety-page h3 {
  margin: 1.5rem 0 0.55rem;
  font-size: var(--text-xl);
  line-height: 1.3;
  font-weight: 700;
}

.md-typeset .safety-page hr {
  margin: 1.8rem 0;
  border: 0;
  border-top: 1px solid var(--color-border-soft);
}

/* -----------------------------------------
   Listen
----------------------------------------- */

.md-typeset .safety-list,
.md-typeset ul.safety-list {
  margin: 0.15rem 0 0;
}

.md-typeset .safety-list li,
.md-typeset ul.safety-list li {
  position: relative;
  margin: 0 0 0.42rem;
  padding-left: 1.05rem;
  font-size: var(--text-lg);
  line-height: 1.56;
}

.md-typeset .safety-list > li::before,
.md-typeset ul.safety-list > li::before {
  content: var(--symbol-arrow);
  position: absolute;
  left: 0;
  top: 0.16rem;
  font-size: 0.54rem;
  line-height: 1;
}

.md-typeset .safety-list--dot > li::before {
  content: var(--symbol-bullet);
  top: 0.02rem;
  font-size: 0.8rem;
}

.md-typeset .safety-list--round > li::before {
  content: var(--symbol-bullet);
  top: 0.02rem;
  font-size: 1rem;
}

/* -----------------------------------------
   Callout System
----------------------------------------- */

.md-typeset .safety-callout {
  margin: 1rem 0 1.6rem;
  border: 2px solid var(--color-border-soft);
  border-radius: 1rem;
  overflow: hidden;
  background: var(--color-white);
}

.md-typeset .safety-callout__header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1.15rem;
  min-width: 0;
}

.md-typeset .safety-callout__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 700;
  line-height: 1;
}

.md-typeset .safety-callout__label {
  font-size: var(--text-xl);
  line-height: 1.2;
  font-weight: 700;
  min-width: 0;
}

.md-typeset .safety-callout__body {
  padding: 1.25rem 1.2rem 1.25rem;
}

.md-typeset .safety-callout__body p {
  margin: 0 0 0.82rem;
  font-size: var(--text-lg);
  line-height: 1.58;
}

.md-typeset .safety-callout__body p:last-child {
  margin-bottom: 0;
}

.md-typeset .safety-callout__title {
  margin: 0 0 0.8rem !important;
  font-size: 0.98rem !important;
  line-height: 1.3 !important;
  font-weight: 700;
}

.md-typeset .safety-callout .safety-list {
  margin-top: 0.3rem;
}

.md-typeset .safety-callout .safety-list li:last-child {
  margin-bottom: 0;
}

.md-typeset .safety-callout--warning {
  border-color: var(--color-danger);
}

.md-typeset .safety-callout--warning .safety-callout__header {
  background: var(--color-surface-warning);
}

.md-typeset .safety-callout--warning .safety-callout__icon {
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-pill);
  background: var(--color-danger);
  color: var(--color-white);
  font-size: 1rem;
}

/* vorbereitet für später */
.md-typeset .safety-callout--info .safety-callout__header,
.md-typeset .safety-callout--danger .safety-callout__header {
  background: transparent;
}

/* -----------------------------------------
   Legende
----------------------------------------- */

.md-typeset .safety-legend {
  display: grid;
  gap: 1rem;
  margin: 1rem 0 1.7rem;
}

.md-typeset .safety-legend-card {
  padding: 1rem 1.1rem;
  background: var(--color-surface-muted);
  border-radius: 0;
}

.md-typeset .safety-legend-card__head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.55rem;
  min-width: 0;
}

.md-typeset .safety-legend-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}

.md-typeset .safety-legend-card__title {
  font-size: 0.98rem;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.md-typeset .safety-legend-card p {
  margin: 0;
  font-size: var(--text-lg);
  line-height: 1.58;
}

/* -----------------------------------------
   Abschnittslabel
----------------------------------------- */

.md-typeset .safety-section-label {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0.15rem 0 0.8rem;
  min-width: 0;
}

.md-typeset .safety-section-label__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.45rem;
  height: 1.45rem;
  font-size: 1.1rem;
  line-height: 1;
  flex-shrink: 0;
}

.md-typeset .safety-section-label__text {
  font-size: 0.98rem;
  line-height: 1.2;
  font-weight: 800;
  text-transform: uppercase;
}


/* ==================================================
   32) RESPONSIVE
   --------------------------------------------------
   Breakpoints bewusst konservativ gehalten.
   Layout bleibt ähnlich, wird aber sprachrobuster.
================================================== */

@media (min-width: 1200px) {
  .md-typeset .fn-block {
    grid-template-columns: 3.4rem minmax(0, 1fr);
  }

  .md-typeset .fn-block__icon img {
    width: 1.45rem;
  }

  .md-typeset .fn-block__icon--volume img {
    width: 1.22rem;
  }
}

@media (max-width: 1100px) {
  .delivery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .device-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1000px) {
  .md-typeset .marks-item {
    grid-template-columns: 14rem minmax(0, 1fr);
    gap: 1rem;
  }

  .md-typeset .marks-item__logo img[src$="btmarke.svg"] {
    max-width: 200px;
  }

  .md-typeset .marks-item__logo img[src$="auracastMarke.svg"] {
    max-width: 180px;
  }

  .md-typeset .marks-item__logo img[src$="aptxbt.svg"] {
    max-width: 160px;
  }

  .md-typeset .marks-item__text p,
  .md-typeset .marks-note {
    font-size: 0.86rem;
  }
}

@media (max-width: 900px) {
  .feature-grid,
  .device-parts-grid,
  .md-typeset .fn-hero,
  .startup-step,
  .status-led-table {
    grid-template-columns: 1fr;
  }

  .device-card__content h2 {
    white-space: normal;
  }

  .startup-step__media {
    min-height: auto;
  }

  .startup-step__media {
    min-height: auto;
  }

  .startup-step__content,
  .md-typeset .fn-hero__content {
    max-width: 100%;
  }

  .delivery-item img {
    height: 120px;
  }

  .delivery-item--small img {
    height: 100px;
  }

  .portal-hero {
    padding: 1.4rem 1.2rem 1.3rem;
    border-radius: var(--radius-2xl);
  }

  .portal-hero__lead {
    font-size: 1rem;
  }

  .device-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .device-card__image {
    min-height: 190px;
    padding: 1.2rem;
  }

  .device-card__image img {
    max-height: 140px;
  }

  .device-part-card {
    grid-template-columns: 1fr;
  }

  .status-led-head {
    display: none;
  }

  .status-led-state {
    margin-top: 0.25rem;
  }

  .status-led-definition {
    margin-bottom: 0.9rem;
  }

  .tech-specs__row {
    grid-template-columns: 1fr;
    gap: 0.4rem;
    padding: 0.9rem 0;
  }

  .md-typeset .fn-hero {
    gap: 1.2rem;
    margin-bottom: 2rem;
  }

  .md-typeset .fn-hero__lead {
    font-size: 1.08rem;
  }

  .md-typeset .fn-hero__content p:last-child {
    font-size: 0.84rem;
  }

  .md-typeset .fn-block {
    grid-template-columns: 2.8rem minmax(0, 1fr);
    gap: 0.85rem;
    margin-bottom: 1.8rem;
  }

  .md-typeset .fn-block__icon img {
    width: 1.2rem;
  }

  .md-typeset .fn-block__icon--volume img {
    width: 1.05rem;
  }

  .md-typeset .fn-block__body h2 {
    font-size: 1rem;
  }

  .md-typeset .lock-section {
    margin-bottom: 1.7rem;
  }

  .md-typeset .lock-section h2 {
    font-size: 0.98rem;
  }

  .md-typeset .lock-section p,
  .md-typeset .lock-list li {
    font-size: 0.88rem;
  }

  .md-typeset .bt-intro {
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0.65rem;
  }

  .md-typeset .bt-intro__hand {
    width: 1.6rem;
  }

  .md-typeset .bt-intro__content h2 {
    font-size: 0.94rem;
  }

  .md-typeset .bt-steps > li,
  .md-typeset .bt-bullets > li,
  .md-typeset .bt-status p {
    font-size: 0.8rem;
  }

  .md-typeset .aura-intro {
    grid-template-columns: 2.6rem 1fr;
  }

  .md-typeset .aura-intro__press {
    width: 1.9rem;
  }

  .md-typeset .aura-intro__content p,
  .md-typeset .aura-steps > li,
  .md-typeset .aura-bullets > li,
  .md-typeset .aura-status p {
    font-size: 0.8rem;
  }

  .md-typeset .theft-image img {
    max-width: 20rem;
  }

  .md-typeset .theft-note p {
    font-size: 0.86rem;
  }

  .md-typeset .travelcase-image img {
    max-width: 20rem;
  }

  .md-typeset .travelcase-linkline {
    font-size: 0.86rem;
  }

  .md-typeset .battery-steps > li,
  .md-typeset .battery-warning p {
    font-size: 0.84rem;
  }

  .md-typeset .battery-substeps > li {
    font-size: 0.8rem;
  }

  .md-typeset .battery-image--wide img {
    max-width: 22rem;
  }

  .md-typeset .battery-image--small img {
    max-width: 14rem;
  }

  .md-typeset .trouble-block h2 {
    font-size: 0.92rem;
  }

  .md-typeset .trouble-list--bullet > li,
  .md-typeset .trouble-list--arrow > li,
  .md-typeset .trouble-legend p,
  .md-typeset .trouble-reference {
    font-size: 0.82rem;
  }

  .md-typeset .care-block h2 {
    font-size: 0.95rem;
  }

  .md-typeset .care-block p,
  .md-typeset .care-list > li,
  .md-typeset .care-note p {
    font-size: 0.84rem;
  }

  .md-typeset .disposal-packaging__alert-title {
    font-size: 1rem;
  }

  .md-typeset .disposal-packaging__alert-text,
  .md-typeset .disposal-packaging__content > p,
  .md-typeset .disposal-packaging__list > li {
    font-size: 0.86rem;
  }

  .md-typeset .disposal-packaging__icon img {
    width: 3.8rem;
  }

  .md-typeset .disposal-device__alert-title {
    font-size: 1rem;
  }

  .md-typeset .disposal-device__alert-text,
  .md-typeset .disposal-device__content > p,
  .md-typeset .disposal-device__battery > p,
  .md-typeset .disposal-device__list > li {
    font-size: 0.86rem;
  }

  .md-typeset .disposal-device__icons img:first-child,
  .md-typeset .disposal-device__icons img:last-child {
    width: 3.3rem;
  }

  .md-typeset .conformity-header {
    grid-template-columns: 1fr;
    gap: 1.2rem;
    margin-bottom: 2rem;
  }

  .md-typeset .conformity-mark img {
    width: 7rem;
  }

  .md-typeset .conformity-manufacturer p,
  .md-typeset .conformity-content p {
    font-size: 0.86rem;
  }

  .md-typeset .safety-page > p,
  .md-typeset .safety-list li,
  .md-typeset .safety-legend-card p,
  .md-typeset .safety-callout__body p {
    font-size: 0.86rem;
  }

  .md-typeset .safety-page h2 {
    font-size: 0.96rem;
  }

  .md-typeset .safety-page h3,
  .md-typeset .safety-callout__title,
  .md-typeset .safety-legend-card__title,
  .md-typeset .safety-section-label__text {
    font-size: 0.9rem !important;
  }

  .md-typeset .safety-callout__header {
    padding: 0.78rem 1rem;
  }

  .md-typeset .safety-callout__body,
  .md-typeset .safety-legend-card {
    padding: 1rem;
  }
}

@media (max-width: 700px) {
  .delivery-grid,
  .device-grid {
    grid-template-columns: 1fr;
  }

  .delivery-label {
    max-width: 100%;
  }

  .md-typeset .eqboost-inline-icon img {
    width: 1.1rem;
  }

  .md-typeset .app-intro {
    grid-template-columns: 4.4rem minmax(0, 1fr);
    gap: 0.85rem;
  }

  .md-typeset .app-intro__icon img {
    max-width: 4.2rem;
    border-radius: 0.7rem;
  }

  .md-typeset .app-store-links {
    flex-direction: column;
    align-items: stretch;
  }

  .md-typeset .app-store-button {
    width: 100%;
  }

  .md-typeset .marks-item {
    grid-template-columns: 1fr;
    gap: 0.8rem;
    margin-bottom: 1.6rem;
  }

  .md-typeset .marks-item__logo {
    max-width: 13rem;
  }

  .md-typeset .marks-item__text p,
  .md-typeset .marks-note {
    font-size: 0.82rem;
    line-height: 1.46;
  }

  .md-typeset .marks-note {
    margin-top: 1.8rem;
  }
}

@media (max-width: 680px) {
  .md-typeset .fn-block {
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }

  .md-typeset .fn-block__icon,
  .md-typeset .fn-block__icon--volume {
    justify-content: flex-start;
  }

  .md-typeset .fn-status {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }

  .md-typeset .fn-block__body h2 {
    font-size: 0.96rem;
  }

  .md-typeset .fn-mode h3 {
    font-size: 0.82rem;
  }

  .md-typeset .fn-bullets > li,
  .md-typeset .fn-sublist > li,
  .md-typeset .fn-status p,
  .md-typeset .fn-mode p,
  .md-typeset .fn-block__body > p {
    font-size: 0.8rem;
  }

  .md-typeset .lock-section h2 {
    font-size: 0.94rem;
  }

  .md-typeset .lock-section p,
  .md-typeset .lock-list li {
    font-size: 0.84rem;
    line-height: 1.55;
  }

  .md-typeset .lock-list li {
    padding-left: 1rem;
  }

  .md-typeset .bt-intro {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .md-typeset .bt-intro__aside {
    justify-content: flex-start;
  }

  .md-typeset .bt-block h3 {
    font-size: 0.88rem;
  }

  .md-typeset .bt-steps > li,
  .md-typeset .bt-bullets > li,
  .md-typeset .bt-status p {
    font-size: 0.78rem;
  }

  .md-typeset .aura-intro {
    grid-template-columns: 1fr;
  }

  .md-typeset .aura-intro__press {
    width: 1.7rem;
  }

  .md-typeset .aura-steps > li,
  .md-typeset .aura-bullets > li,
  .md-typeset .aura-status p {
    font-size: 0.78rem;
  }

  .md-typeset .theft-image {
    margin: 1.2rem 0 1.4rem;
  }

  .md-typeset .theft-image img {
    max-width: 100%;
  }

  .md-typeset .theft-note p {
    font-size: 0.82rem;
    line-height: 1.48;
  }

  .md-typeset .travelcase-image {
    margin: 1.2rem 0 1.4rem;
  }

  .md-typeset .travelcase-image img {
    max-width: 100%;
  }

  .md-typeset .travelcase-linkline {
    font-size: 0.82rem;
  }

  .md-typeset .battery-image-row {
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 1.2rem 0 1.4rem;
  }

  .md-typeset .battery-image--wide img,
  .md-typeset .battery-image--small img {
    max-width: 100%;
  }

  .md-typeset .battery-steps > li,
  .md-typeset .battery-warning p {
    font-size: 0.8rem;
    line-height: 1.42;
  }

  .md-typeset .battery-substeps > li {
    font-size: 0.78rem;
  }

  .md-typeset .battery-warning {
    padding: 0.9rem 1rem;
    border-radius: 0.8rem;
  }

  .md-typeset .battery-warning__title {
    font-size: 0.94rem;
  }

  .md-typeset .trouble-legend {
    margin-bottom: 1.5rem;
  }

  .md-typeset .trouble-block {
    margin-bottom: 1.35rem;
  }

  .md-typeset .trouble-block h2 {
    font-size: 0.88rem;
  }

  .md-typeset .trouble-list--bullet > li,
  .md-typeset .trouble-list--arrow > li,
  .md-typeset .trouble-legend p,
  .md-typeset .trouble-reference {
    font-size: 0.78rem;
    line-height: 1.4;
  }

  .md-typeset .care-block {
    margin-bottom: 1.45rem;
  }

  .md-typeset .care-note {
    margin-bottom: 1.35rem;
  }

  .md-typeset .care-block h2 {
    font-size: 0.9rem;
  }

  .md-typeset .care-block p,
  .md-typeset .care-list > li,
  .md-typeset .care-note p {
    font-size: 0.8rem;
    line-height: 1.45;
  }

  .md-typeset .disposal-packaging__divider {
    margin: 1.25rem 0 1.4rem;
  }

  .md-typeset .disposal-packaging__footer {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    align-items: start;
  }

  .md-typeset .disposal-packaging__icon {
    justify-content: flex-start;
  }

  .md-typeset .disposal-packaging__alert-title {
    font-size: 0.94rem;
  }

  .md-typeset .disposal-packaging__alert-text,
  .md-typeset .disposal-packaging__content > p,
  .md-typeset .disposal-packaging__list > li {
    font-size: 0.8rem;
    line-height: 1.45;
  }

  .md-typeset .disposal-packaging__icon img {
    width: 3.3rem;
  }

  .md-typeset .disposal-device__divider {
    margin: 1.25rem 0 1.4rem;
  }

  .md-typeset .disposal-device__row {
    grid-template-columns: 1fr;
    gap: 0.8rem;
    align-items: start;
  }

  .md-typeset .disposal-device__icons {
    justify-content: flex-start;
  }

  .md-typeset .disposal-device__alert-title {
    font-size: 0.94rem;
  }

  .md-typeset .disposal-device__alert-text,
  .md-typeset .disposal-device__content > p,
  .md-typeset .disposal-device__battery > p,
  .md-typeset .disposal-device__list > li {
    font-size: 0.8rem;
    line-height: 1.45;
  }

  .md-typeset .disposal-device__icons img:first-child,
  .md-typeset .disposal-device__icons img:last-child {
    width: 3rem;
  }

  .md-typeset .conformity-header {
    gap: 1rem;
    margin-bottom: 1.6rem;
  }

  .md-typeset .conformity-mark img {
    width: 6rem;
  }

  .md-typeset .conformity-manufacturer p,
  .md-typeset .conformity-content p {
    font-size: 0.8rem;
    line-height: 1.48;
  }

  .md-typeset .safety-page > p,
  .md-typeset .safety-list li,
  .md-typeset .safety-legend-card p,
  .md-typeset .safety-callout__body p {
    font-size: 0.82rem;
    line-height: 1.48;
  }

  .md-typeset .safety-page h2 {
    font-size: 0.9rem;
  }

  .md-typeset .safety-page h3 {
    font-size: 0.84rem;
  }

  .md-typeset .safety-callout {
    border-radius: 0.85rem;
  }

  .md-typeset .safety-callout__header {
    gap: 0.65rem;
    padding: 0.72rem 0.9rem;
  }

  .md-typeset .safety-callout__body {
    padding: 0.92rem 0.9rem 1rem;
  }

  .md-typeset .safety-callout--warning .safety-callout__icon {
    width: 1.8rem;
    height: 1.8rem;
    font-size: 0.92rem;
  }

  .md-typeset .safety-legend-card__icon,
  .md-typeset .safety-section-label__icon {
    width: 1.35rem;
    height: 1.35rem;
    font-size: 1rem;
  }
}

@media (max-width: 600px) {
  .device-hero img {
    padding: 0.5rem;
    border-radius: 0.75rem;
  }

  .device-part-card {
    grid-template-columns: 48px 30px minmax(0, 1fr);
    column-gap: 0.85rem;
    padding: 1rem 1rem;
    border-radius: var(--radius-lg);
  }

  .device-part-card--no-icon {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .device-part-letter {
    width: 2.15rem;
    height: 2.15rem;
    font-size: 0.95rem;
  }

  img.device-part-icon {
    width: 20px;
    height: 20px;
  }

  img.device-part-icon[src$="onoff.svg"] {
    width: 17px;
    height: 17px;
  }

  img.device-part-icon[src$="eqboost.svg"] {
    width: 22px;
    height: 22px;
  }

  img.device-part-icon[src$="statusschwarz.svg"] {
    width: 14px;
    height: 26px;
  }

  .device-part-title {
    font-size: 0.98rem;
  }

  .device-note {
    padding: 0.9rem 1rem;
    border-radius: var(--radius-lg);
    font-size: 0.95rem;
  }

  .status-led-state {
    gap: 0.6rem;
  }

  .status-led-icon {
    width: 16px;
    height: 28px;
  }

  .status-led-label {
    font-size: 0.98rem;
  }

  .status-led-definition {
    line-height: 1.55;
  }
}

@media (max-width: 500px) {
  .delivery-hint {
    font-size: 0.85rem;
  }
}


:root {
  --md-primary-fg-color: #000000;
  --md-primary-fg-color--light: #000000;
  --md-primary-fg-color--dark: #000000;
  --sonoro-black: #000000;
  --sonoro-white: #ffffff;
}

/* =========================
   HEADER
   ========================= */

.md-header {
  background-color: var(--sonoro-black) !important;
  color: var(--sonoro-white) !important;
  box-shadow: none !important;
}

.md-header__inner {
  height: 52px;
  align-items: center !important;
}

.md-header,
.md-header__button,
.md-header__title,
.md-header__source,
.md-header__option,
.md-header__button .md-icon,
.md-search__icon,
.md-search__input {
  color: var(--sonoro-white) !important;
}

.md-header__topic:first-child {
  display: none !important;
}

.md-header__button.md-logo {
  padding: 0.2rem 0.3rem !important;
  margin: 0 !important;
}

.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 22px !important;
  width: auto !important;
  display: block;
}

/* =========================
   SEARCH
   ========================= */

.md-search__form {
  background: #111111 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

.md-search__input {
  color: #ffffff !important;
  caret-color: #ffffff !important;
}

/* wenn die Suche geöffnet ist */
.md-search--active .md-search__form,
.md-search--active .md-search__input {
  background: #ffffff !important;
  color: #111111 !important;
  caret-color: #111111 !important;
}

.md-search__input::placeholder {
  color: rgba(255, 255, 255, 0.7) !important;
}

.md-search--active .md-search__input::placeholder {
  color: rgba(0, 0, 0, 0.35) !important;
}

/* Overlay / Ergebnisbox */
.md-search__output,
.md-search__scrollwrap,
.md-search-result {
  background: #1a1a1a !important;
  color: #ffffff !important;
}

.md-search__output {
  border-radius: 10px;
  padding: 0.35rem 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Meta-Zeile */
.md-search-result__meta {
  color: rgba(255, 255, 255, 0.68) !important;
  padding: 0 1rem 0.5rem;
  font-size: 0.82rem;
}

/* einzelne Treffer */
.md-search-result__item {
  padding: 0.75rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.md-search-result__item:first-child {
  border-top: 0;
}

.md-search-result__item:hover,
.md-search-result__item:focus-within {
  background: rgba(255, 255, 255, 0.05) !important;
}

/* Titel */
.md-search-result__title {
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.35;
  color: #ffffff !important;
}

/* Links */
.md-search-result__title,
.md-search-result__title a,
.md-search-result__link,
.md-search-result__article,
.md-search-result__article a {
  color: #ffffff !important;
  text-decoration: none !important;
}

.md-search-result__title a:hover,
.md-search-result__link:hover,
.md-search-result__article a:hover {
  color: #d7ddff !important;
}

/* Teaser */
.md-search-result__teaser,
.md-search-result__teaser *,
.md-search-result__more,
.md-search-result__more summary {
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: 0.82rem;
  line-height: 1.5;
}

/* Highlight */
mark {
  background: #1f3a8a;
  color: #ffffff;
  padding: 0 3px;
  border-radius: 3px;
}

/* Icon */
.md-search-result__icon,
.md-search-result__icon .md-icon,
.md-search-result__icon svg {
  color: rgba(255, 255, 255, 0.9) !important;
  fill: rgba(255, 255, 255, 0.9) !important;
}

/* Scrollbar */
.md-search__scrollwrap::-webkit-scrollbar {
  width: 10px;
}

.md-search__scrollwrap::-webkit-scrollbar-track {
  background: #1a1a1a;
}

.md-search__scrollwrap::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
}

.md-search__scrollwrap::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.28);
}

/* =========================
   FOOTER
   ========================= */

.md-footer,
.md-footer-meta,
.md-footer__inner,
.md-footer-meta__inner,
.md-footer-nav {
  background: #000 !important;
  color: #fff !important;
}

.md-copyright,
.md-copyright__highlight {
  display: none !important;
}

.md-footer-meta__inner {
  min-height: 14px !important;
  padding-top: 0.15rem !important;
  padding-bottom: 0.15rem !important;
}




/* =========================
   MOBILE
   ========================= */

.md-nav--primary .md-nav__title[for="__drawer"] {
  background: #000 !important;
  color: #fff !important;
}

/* =========================
   FIX: HEADLINES NO BREAK
   ========================= */

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  hyphens: none !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  text-wrap: balance;
}



/* =========================
   MOBILE NAV BACK
   ========================= */

@media (max-width: 76.24em) {
  /* Nur Unterseiten / Back-Titel stylen, NICHT den Root-Drawer */
  .md-nav--primary .md-nav__title:not([for="__drawer"]) {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    padding: 0.9rem 1rem 0.9rem 2.2rem;
    position: relative;
  }

  .md-nav--primary .sonoro-back-label {
    display: inline-block;
    font-size: 0.85rem;
    line-height: 1.2;
    font-weight: 600;
    opacity: 0.8;
  }

  .md-nav--primary .md-nav__title:not([for="__drawer"]) > span:not(.sonoro-back-label) {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
  }

  /* Root-Drawer oben: nur Logo zeigen, Text "Sonoro Manual" ausblenden */
  .md-nav--primary .md-nav__title[for="__drawer"] {
    font-size: 0 !important;
    line-height: 0 !important;
    padding: 0.85rem 1rem !important;
  }

  .md-nav--primary .md-nav__title[for="__drawer"] .md-nav__button,
  .md-nav--primary .md-nav__title[for="__drawer"] .md-logo {
    font-size: initial !important;
    line-height: normal !important;
  }

  .md-nav--primary .md-nav__title[for="__drawer"] .md-logo img,
  .md-nav--primary .md-nav__title[for="__drawer"] .md-logo svg {
    height: 22px !important;
    width: auto !important;
    display: block;
  }
}



/* =========================
   CUSTOM FOOTER LINKS
   ========================= */

.sonoro-footer-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 0.15rem 0;
  font-size: 0.78rem;
  line-height: 1.3;
}

.sonoro-footer-links a {
  color: #fff;
  text-decoration: none;
  opacity: 0.9;
}

.sonoro-footer-links a:hover {
  text-decoration: underline;
  opacity: 1;
}

@media (max-width: 700px) {
  .sonoro-footer-links {
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.74rem;
    text-align: center;
  }
}


/* =========================
   SEARCH UI STABILITY FIX
   ========================= */

.md-search {
  min-width: 0;
}

.md-search__form {
  min-width: 0;
}

.md-search__input {
  min-width: 0;
}

.md-search__output {
  max-width: min(92vw, 42rem);
  right: 0;
  left: auto;
}

.md-search-result__item {
  overflow: hidden;
}

.md-search-result__title,
.md-search-result__teaser,
.md-search-result__more {
  overflow-wrap: break-word;
  word-break: normal;
}

html,
body {
  overflow-x: hidden;
}

@media (max-width: 700px) {
  .md-search__output {
    width: 100%;
    max-width: 100%;
    left: 0;
    right: 0;
    border-radius: 0;
    box-sizing: border-box;
  }
}



/* =========================
   DEVICE CARD BUTTON ALIGNMENT
   ========================= */

.device-card__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.device-card__content h2 {
  min-height: 2.6em;
  display: flex;
  align-items: flex-start;
}

.device-card__button {
  margin-top: auto;
}
/* =========================
   LANGUAGE SWITCH
   ========================= */

/* Container */
.md-header__option {
  display: inline-flex;
  align-items: center;
}

/* Echten Trigger behalten */
.md-header__option .md-select {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  position: relative;
}

/* Das echte Material-Symbol explizit ausblenden */
.md-header__option .md-select__icon,
.md-header__option .md-select .md-icon,
.md-header__option .md-select svg,
.md-header__option > .md-icon,
.md-header__option > svg {
  display: none !important;
}

/* Originaltext im Header unsichtbar machen */
.md-header__option .md-select > .md-select__inner {
  font-size: 0 !important;
  color: transparent !important;
}

/* Eigene sichtbare Darstellung */
.md-header__option .md-select::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 0.14rem;
  background-color: #fff;
  -webkit-mask: url("../assets/images/language-globe.svg") no-repeat center / contain;
  mask: url("../assets/images/language-globe.svg") no-repeat center / contain;
}

.md-header__option .md-select::after {
  content: attr(data-lang-code);
  display: inline-block;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
}

/* Dropdown-Inhalte explizit wieder sichtbar machen */
.md-select__list {
  color: #111 !important;
}

.md-select__link,
.md-select__link:link,
.md-select__link:visited {
  color: #111 !important;
  font-size: 0.82rem !important;
  opacity: 1 !important;
}

.md-select__link:hover,
.md-select__link:focus {
  color: #111 !important;
}

@media (min-width: 76.25em) {
  .md-nav--primary .md-nav__title {
    display: none !important;
  }
}

/* =========================
   MANUAL LINKS BOX
   ========================= */

.manual-links-box {
  margin-top: 2.2rem;
  padding: 1.5rem 1.5rem 1.4rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  background: linear-gradient(180deg, var(--color-white) 0%, var(--color-surface-soft) 100%);
}

.manual-links-box__eyebrow {
  margin: 0 0 0.4rem;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-slate-500);
}

.manual-links-box h2 {
  margin: 0 0 0.6rem;
  font-size: 1.2rem;
  line-height: 1.2;
  font-weight: 700;
}

.manual-links-box p:last-of-type {
  margin: 0;
  max-width: 52rem;
  color: var(--color-slate-700);
  line-height: 1.6;
}

.manual-links-box__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 1.2rem;
}

.manual-links-box__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.7rem 1.15rem;
  border-radius: var(--radius-pill);
  text-decoration: none !important;
  font-size: var(--text-md);
  font-weight: 700;
  line-height: 1.2;
  transition: var(--transition-card);
  max-width: 100%;
  text-align: center;
}

.manual-links-box__button--primary {
  background: var(--color-ink-900);
  color: var(--color-white) !important;
}

.manual-links-box__button--secondary {
  background: transparent;
  color: var(--color-ink-900) !important;
  border: 1px solid var(--color-border);
}

.manual-links-box__button:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-card);
}

@media (max-width: 700px) {
  .manual-links-box {
    padding: 1.2rem 1rem 1.1rem;
    border-radius: var(--radius-xl);
  }

  .manual-links-box h2 {
    font-size: 1.05rem;
  }

  .manual-links-box__actions {
    flex-direction: column;
  }

  .manual-links-box__button {
    width: 100%;
  }
}
/* =========================================
   FINAL MOBILE OVERFLOW FIX (SONORO)
   ========================================= */

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

@supports (overflow: clip) {
  html,
  body {
    overflow-x: clip;
  }
}

/* verhindert, dass Layout-Container breiter werden */
.md-container,
.md-main,
.md-main__inner,
.md-content,
.md-content__inner {
  max-width: 100%;
}

/* verhindert Grid-Overflow durch Padding/Border */
.portal-hero,
.manual-links-box,
.device-grid,
.device-card,
.feature-grid,
.delivery-grid,
.device-parts-grid {
  max-width: 100%;
  box-sizing: border-box;
}

/* iOS Safari Fix für viewport-bugs */
@media (max-width: 700px) {
  .md-search__output {
    width: 100%;
    max-width: 100%;
    left: 0;
    right: 0;
    box-sizing: border-box;
  }
}

/* =========================================
   DEBUG: CSS VERSION INDICATOR
   ========================================= */

body::after {
  content: "v8"; /* ← HIER Version ändern */
  position: fixed;
  bottom: 10px;
  right: 10px;
  background: #22c55e; /* grün */
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 6px;
  border-radius: 6px;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.9;
}

/* =========================================
   MOBILE LANGUAGE SWITCH FIX
   ========================================= */

@media (max-width: 76.24em) {
  .md-header__inner {
    padding-right: 0.75rem;
  }

  .md-header__option {
    margin-left: auto;
    padding-right: 0.35rem;
    flex-shrink: 0;
  }

  .md-header__option .md-select {
    padding-right: 0.15rem;
  }

  .md-header__option .md-select::before {
    margin-right: 0.2rem;
  }

  .md-header__option .md-select::after {
    font-size: 0.78rem;
  }

  .md-select__list {
    min-width: 12rem;
    max-width: calc(100vw - 1rem);
    right: 0.5rem !important;
    left: auto !important;
    box-sizing: border-box;
  }

  .md-select__link,
  .md-select__link:link,
  .md-select__link:visited {
    white-space: nowrap;
  }
}

/* =========================================
   DESKTOP NAV: TRENNLINIE + AKTIVER PUNKT
   ========================================= */

@media (min-width: 76.25em) {
  .md-sidebar--primary {
    padding-right: 1rem;
  }

  .md-sidebar--primary .md-sidebar__scrollwrap {
    border-right: 1px solid #d7dce3;
    padding-right: 1rem;
  }

  .md-main__inner {
    column-gap: 1.8rem;
  }

  .md-nav__link--active,
  .md-nav__link[aria-current="page"] {
    font-weight: 700 !important;
    color: #000 !important;
    text-decoration: underline;
    text-underline-offset: 0.18em;
  }
}

  /* aktive Parent-Ebene ebenfalls stärker */
  .md-nav__item--active > .md-nav__link {
    font-weight: 700 !important;
    color: #000 !important;
  }


  /* =========================================
   DEVICE CARD BUTTON GROUP
   ========================================= */

.device-card__actions {
  display: flex;
  gap: 0.65rem;
  margin-top: auto;
  flex-wrap: wrap;
}

.device-card__actions .device-card__button {
  margin-top: 0;
}

.device-card__button--secondary {
  background: transparent;
  color: var(--color-ink-900) !important;
  border: 1px solid var(--color-border);
}

.device-card__button--secondary:hover {
  background: rgba(0, 0, 0, 0.04);
}

@media (max-width: 700px) {
  .device-card__actions {
    flex-direction: column;
    width: 100%;
  }

  .device-card__actions .device-card__button {
    width: 100%;
  }
}