/* ========================================
   BASICS SECTION (clean)
   ======================================== */
#basics{
  /* Designwerte aus deiner Vorlage */
  --card-w: 415px;      /* Breite der weißen Karte */
  --img-w: 198px;       /* Breite der rechten Illustration */
  --pad: 13px;          /* Innenabstand der Karte */
  --gap: 8px;          /* Abstand Text <-> Bild */
  --badge-size: 40px;   /* runde Nummer */
  --badge-offset: 14px; /* Abstand Badge von oben/links */
  --radius: 14px;
  --shadow: 0 10px 22px rgba(0,0,0,.10);
  --text: #1f2937;
  --badge-bg: #f2a900;
  --badge-fg: #1d1d1f;
}

/* Hintergrundverlauf für bessere Lesbarkeit der Karten */
#basics.basics-section{
  background: linear-gradient(
    180deg,
    #EAF7FF 0%,
    #D6F1FF 25%,
    #B8E3F6 50%,
    #7BC4E2 75%,
    #2D8EBF 100%
  );
  overflow-x: hidden;
}

/* Header: Full-bleed kommt aus global.css – hier nur sichergestellt,
   dass der Inhalt darunter startet. */
#basics > .global-header{ margin-bottom: 16px; }

/* Suheadergrafik: 360 px Freiraum oben bleibt erhalten, Bild bleibt unverändert */
.basics-section .basics-subheader img {
  display: block;
  width: 100vw;                     /* immer volle Viewport-Breite */
  max-width: none;                  /* Override evtl. Maximalbreiten */
  margin: 1rem 0;                   /* oben/unten Abstand */
  margin-left: calc(50% - 50vw);    /* horizontal zentrieren */
  margin-right: calc(50% - 50vw);
  height: auto;
  object-fit: cover;
}

/* ---------------------------
   Container & Titel
   --------------------------- */
#basics .basics-container{
  max-width: var(--card-w);
  width: 100%;
  margin-left: auto !important;    /* zentriert – auch in Flex-Layouts */
  margin-right: auto !important;
  padding: 0;                       /* keine seitlichen Paddings, damit 415px „echt“ sind */
  box-sizing: border-box;
  align-self: center;               /* falls Parent flex ist */
}

#basics .basics-title{
  margin: 20px 0 20px 0;
  text-align: center;
  font-size: 16pt;
  line-height: 1.25;
 /* color: var(--text); */
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  color: #616161;
}

/* ---------------------------
   Kartenliste
   --------------------------- */
#basics .basics-list{
  display: grid;
  row-gap: 14px;
  justify-items: center;            /* Karten horizontal zentriert */
  margin: 0;
  padding: 0;
}

/* ---------------------------
   Karte
   --------------------------- */
#basics .basic-card{
  position: relative;
  width: var(--card-w);
  margin-left: auto;                /* falls Liste später anders gebaut wird: doppelt absichern */
  margin-right: auto;
  padding: var(--pad);
  display: grid;
  grid-template-columns: 1fr var(--img-w);  /* Text | Bild */
  column-gap: var(--gap);
  align-items: center;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-decoration: none;
  color: inherit;
  transition: transform .08s ease, box-shadow .2s ease;
}
#basics .basic-card:hover{ transform: translateY(-1px); box-shadow: 0 14px 28px rgba(0,0,0,.12); }
#basics .basic-card:active{ transform: translateY(0); box-shadow: var(--shadow); }

/* Badge: oben links mit gleichem Randabstand */
#basics .card-index{
  position: absolute;
  top: var(--badge-offset);
  left: var(--badge-offset);
  width: var(--badge-size);
  height: var(--badge-size);
  border-radius: 50%;
  background: var(--badge-bg);
  color: var(--badge-fg);
  display: grid;
  place-items: center;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size: 16px;
  color: white;
}

/* Text: links Platz für das Badge, zentriert ausgerichtet */
#basics .card-text{
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-left: calc(var(--badge-offset) + var(--badge-size) + 4px);
}
#basics .card-text span{
  width: 100%;
  color: var(--text);
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.25;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Illustration: rechts mit identischem Innenabstand (oben/rechts/unten gleich) */
#basics .card-illustration{
  width: var(--img-w);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
#basics .card-illustration img{
  width: 100%;
  height: auto;
  max-height: 96px;   /* bei Bedarf auf 84px ändern */
  object-fit: contain;
  display: block;
}

/* ---------------------------
   Responsive: sehr schmale Geräte
   --------------------------- */
@media (max-width: 430px){
  #basics{
    --card-w: 92vw;     /* Karte skaliert zur Gerätebreite, bleibt zentriert */
    --img-w: 44vw;      /* Bild skaliert proportional */
  }
}

/* ---------------------------
   Footer-Sicherheit: Abstand nach unten
   --------------------------- */
@media (pointer: coarse){
  #basics .basics-container{ padding-bottom: 72px; } /* fix gegen überlappende Bottom-Navi */
}

/* ===== BASICS: Headerhöhe festlegen, damit Karten darunter bleiben ===== */
#basics{
  --header-h: 260px;        /* gewünschte sichtbare Höhe der Headergrafik (anpassen) */
}

/* Header bleibt im Dokumentfluss und reserviert Höhe */
#basics > .global-header{
  position: relative !important;  /* falls global etwas anderes setzt */
  height: var(--header-h);        /* reserviert vertikalen Platz */
  margin-bottom: 16px;            /* Abstand zur Überschrift */
  z-index: 0;
}

/* Bild füllt den Header-Container komplett aus */
#basics > .global-header > img{
  width: 100%;
  height: 100%;
  object-fit: cover;               /* zuschneiden statt stauchen */
  display: block;
}

/* Sicherheit: Überschrift & Karten darüber im Stapel, aber NUR darunter positioniert */
#basics .basics-container{ position: relative; z-index: 1; }

/* ===== FIX: Header in #basics als Banner oben, Inhalt darunter ===== */
#basics{
  --header-h: 270px; /* Höhe der Headergrafik – bei Bedarf feinjustieren */
}

/* Header als full-bleed Banner NUR in der Basics-Section */
#basics > .global-header{
  position: absolute !important;
  top: 0;
  left: 50%;
  transform: translateX(-50%); /* full-bleed mittig */
  width: 100vw;                 /* bis an beide Displayränder */
  height: var(--header-h);
  overflow: hidden;
  z-index: 0;
  /* globale Full-bleed-Margins neutralisieren */
  margin: 0 !important;
  right: auto !important;
}

/* Bild füllt den Banner */
#basics > .global-header > img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Der Inhalt der Basics-Section beginnt UNTER dem Banner */
#basics.basics-section{
  position: relative;
  padding-top: calc(var(--header-h) + 16px) !important; /* Platz für Header + Abstand */
}

/* Inhalt liegt sicher über dem Banner */
#basics .basics-container{ position: relative; z-index: 1; }

/* Sicherheitsnetz: Nichts in der Liste ist fixed/absolute */
#basics .basics-list,
#basics .basic-card{ position: static; }

/* ===== BADGE-FIX: Karten sind Positionierungs-Anker ===== */
#basics .basic-card{
  position: relative !important;      /* wichtig: Anker für das Badge */
}

/* Badge immer sichtbar, oben links in der Karte */
#basics .card-index{
  position: absolute;
  top: var(--badge-offset, 14px);
  left: var(--badge-offset, 14px);
  width: var(--badge-size, 40px);
  height: var(--badge-size, 40px);
  border-radius: 50%;
  display: grid !important;           /* nie „verschwinden“ */
  place-items: center;
  font-weight: 800;
  font-size: 18px;
  z-index: 2;
  background: var(--badge-bg, #f2a900); /* per Karte überschreibbar */
  color: var(--badge-fg, #ffffff);
}

/* Text block links Platz für das Badge lassen (falls noch nicht vorhanden) */
#basics .card-text{
  padding-left: calc(var(--badge-offset, 14px) + var(--badge-size, 40px) + 8px);
}

/* Standardfarbe (falls nichts gesetzt): */
#basics .basic-card{ --badge-bg: #f2a900; }

/* Individuelle Farben je Karte: */
#basics .basic-card[data-badge="1"]{ --badge-bg: #1FA4D9; } /* Gelb */
#basics .basic-card[data-badge="2"]{ --badge-bg: #1788C4; } /* Grün */
#basics .basic-card[data-badge="3"]{ --badge-bg: #0F6EAC; } /* Blau */
#basics .basic-card[data-badge="4"]{ --badge-bg: #094D84; } /* Violett */

#basics .basic-card { 
  --badge-fg: #fff;      /* nutzt die bereits vorhandene Variable */
}
/* Falls du lieber ohne Variable arbeitest: */
#basics .card-index {
  color: #fff;
}

/* ===== Karten-Text: max. 2 Zeilen, nutzt Raum unter dem Badge ===== */

/* Start des Textes unterhalb des Badges, links/rechts normaler Karten-Padding */
#basics .card-text{
  display: block;
  padding: calc(var(--badge-offset,14px) + var(--badge-size,40px) + 4px)
           var(--pad,16px)
           var(--pad,16px)
           var(--pad,16px);     /* oben | rechts | unten | links */
  text-align: center;
}

/* 2-Zeilen Clamp (mit Fallbacks) */
#basics .card-text span{
  display: -webkit-box;         /* für WebKit/Blink */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;        /* auf 2 Zeilen begrenzen */
  overflow: hidden;
  text-overflow: ellipsis;

  /* moderne/zusätzliche Eigenschaften */
  line-clamp: 2;                /* neuere Browser */
  hyphens: auto;
  overflow-wrap: anywhere;
  text-wrap: balance;           /* optisch ausgewogene Zeilen, wenn unterstützt */
}

/* optional: minimale Kartenhöhe, damit 2 Zeilen + Bild nicht gequetscht werden */
#basics .basic-card{
  min-height: 104px;
}

/* ========================================
   CURVE-GUIDE (nur für #curve-guide)
   ======================================== */
#curve-guide{
  /* Optik und Maße */
  --header-h: 270px;                 /* sichtbare Höhe des Headerbilds */
  --content-w: 415px;                /* Breite wie bei Karten */
  --text: #1f2937;

  /* eigener Verlauf-Hintergrund (wirkt NUR hier) */
  background: linear-gradient(180deg,#c9d7ee 0%,#bac9e6 24%,#b7c5e0 60%,#b3c0da 100%);
  position: relative;
  overflow-x: hidden;
}

/* weißer Kasten */
#curve-guide .cg-box{
  background:#fff;
  border-radius:12px;
/*  box-shadow:0 10px 22px rgba(0,0,0,.10); */
  padding:16px;
  margin:12px 0;
}

/* Titel im Kasten */
#curve-guide .cg-subtitle{
  margin:0 0 8px;
  font:400 16px/1.3 "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  text-align:center;
  color:#1f2937;
}

/* Fließtext */
#curve-guide .cg-body{
  margin:0;
  font-size:16px;
  text-align: justify;
  line-height:1.5;
  color:#1f2937;
}

/* Full-bleed Header nur in #curve-guide + Platzreservierung */
#curve-guide > .global-header{
  position: absolute !important;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: var(--header-h);
  margin: 0 !important;
  overflow: hidden;
  z-index: 0;
}
#curve-guide > .global-header > img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Inhalt unterhalb des Banners starten */
#curve-guide.basics-section{
  padding-top: calc(var(--header-h) + 16px);
}
#curve-guide .basics-container{
  max-width: var(--content-w);
  width: 100%;
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

/* Überschrift (Open Sans wie bei anderen Titeln) */
#curve-guide .basics-title{
  margin: 16px 0 12px;
  text-align: center;
  font-size: 18pt;
  line-height: 1.25;
  font-weight: 400;
  color: var(--text);
  font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Abschnitsüberschrift (Open Sans wie bei anderen Titeln) */
#curve-guide .basics-subtitle{
  margin: 16px 0 12px;
  text-align: center;
  font-size: 14pt;
  line-height: 1.25;
  font-weight: 600;
  color: var(--text);
  font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Intro-/Fließtext */
#curve-guide .cg-intro{
  margin: 8px 0 12px;
  font-size: 16px;
  line-height: 1.45;
  color: var(--text);
}
#curve-guide .cg-body{
/*  margin: 12px 0 24px;
  padding: 10px; */
  font-size: 14px;
  line-height: 1.5;
  text-align: justify !important;
  color: var(--text);
  background-color: rgba(255, 255, 255, 0.897);
  border: 1px#1d1d1f;
  border-radius: 12px;

}

/* Abbildung mit Bildunterschrift */
#curve-guide .cg-figure{
  margin: 16px 0 10px;
}
#curve-guide .cg-figure img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
}
#curve-guide .cg-figure figcaption{
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.3;
  text-align: center;
  opacity: .8;
}

/* Blocksatz mit automatischer Silbentrennung */
.hyphen-justify{
  text-align: justify;
  text-align-last: left;          /* letzte Zeile nicht gestreckt */
  hyphens: auto;
  -webkit-hyphens: auto;         /* Safari/iOS */
  -ms-hyphens: auto;             /* sehr alte IE */
  word-break: normal;            /* keine harten Wortbrüche */
  overflow-wrap: break-word;     /* Fallback, falls keine Silbentrennung */
  /* optional feinjustieren (unterstützung variiert) */
  hyphenate-limit-chars: 6 3 3;  /* min Wortlänge / vor / nach Trenner */
  -webkit-hyphenate-limit-before: 3;
  -webkit-hyphenate-limit-after: 3;
}

/* angenehme Zeilenlänge (optional als Utility) */
.measure { max-width: 65ch; }

/* Standard-Bullets im weißen Kasten, sauber linksbündig */
#curve-guide .cg-body ul,
#curve-guide .cg-body ol{
  margin: 8px 0 0;
  padding-left: 1.2em;     /* Einzug für Bullets */
  text-align: left;        /* Liste nicht zentrieren */
}

#curve-guide .cg-body li{
  margin: 6px 0;
  line-height: 1.45;
  font-size: 14px;
}

/* OPTIONAL: hübsche Häkchen statt Discs */
#curve-guide .cg-list--check{
  list-style: none;
  padding-left: 0;
}
#curve-guide .cg-list--check li{
  position: relative;
  padding-left: 1.5em;
}
#curve-guide .cg-list--check li::before{
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(0.1em);
  font-weight: 700;
  color: #1a9dbb;          /* gern anpassen */
}

/* ===== Overlap-Textblock (vollständiges Bild, Schatten optional) ===== */
.basics-section .cg-overlap{
  /* Standardmaße deiner Grafik */
  --media-w: 215px;
  --media-h: 225px;
  --overlap: 30px;             /* wie weit das Bild in die Karte hineinragt */
  --radius: 12px;
  --text: #1f2937;
  --media-shadow: none;        /* default: kein Schatten */

  max-width: var(--content-w, 415px);
  width: 100%;
  margin: 28px auto 24px;
  padding: 0 16px;
  box-sizing: border-box;
}

/* Medien-Container: zeigt die Grafik vollständig */
.basics-section .cg-overlap__media{
  position: relative;
  width: var(--media-w);
  height: var(--media-h);
  border-radius: var(--radius);
  overflow: visible;           /* nichts beschneiden */
  margin: 0 auto calc(var(--overlap) * -1);
  box-shadow: var(--media-shadow);
/*  background: #e6eef5;  */       /* Fallback, falls Bild kurz fehlt */
}
.basics-section .cg-overlap__media img{
  width: 100%;
  height: 100%;
  object-fit: contain;         /* Bild vollständig anzeigen */
  object-position: center;
  display: block;
  image-rendering: auto;
}

/* optional: Schatten aktivieren, wenn Klasse gesetzt ist */
.basics-section .cg-overlap.cg-overlap--shadow{ --media-shadow: 0 12px 28px rgba(0,0,0,.22); }

/* optional: kleines Badge an der Grafik (wenn benötigt) */
.basics-section .cg-overlap__badge{
  position: absolute;
  bottom: -8px;
  left: 6px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  color: #fff;
  background: #0e6aae;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

/* Weißer Textkasten */
.basics-section .cg-overlap__card{
  background: #fff;
  border-radius: var(--radius);
/*  box-shadow: 0 10px 22px rgba(0,0,0,.10); */
  padding: calc(var(--overlap) + 12px) 16px 16px; /* Platz für Überlappung */
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  color: var(--text);
}
.basics-section .cg-overlap__title{
  margin: 0 0 8px;
  font-weight: 600;
  font-size: 16px;
}
.basics-section .cg-overlap__text{
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  text-align: justify;
  text-align-last: left;
  hyphens: auto;
  overflow-wrap: break-word;
}

/* OPTIONAL: wenn du doch wieder eine runde Darstellung willst */
.basics-section .cg-overlap--circle .cg-overlap__media{
  border-radius: 50%;
  overflow: hidden;            /* maskiert rund -> kann wieder beschneiden */
  /* bei runder Maske besser object-fit: cover nutzen:
     .cg-overlap--circle .cg-overlap__media img{ object-fit: cover; } */
}

/* Overlap-Wrapper ohne zusätzliches Seiten-Padding */
.basics-section .cg-overlap{
  padding-left: 0;
  padding-right: 0;
}

/* Karte füllt den Wrapper */
.basics-section .cg-overlap__card{
  width: 100%;
}

/* ===== Curve-Guide: Tabelle als Card ===== */
#curve-guide .cg-table-card{
  background:#fff;
  border-radius:12px;
  box-shadow:0 10px 22px rgba(0,0,0,.10);
  padding:12px 16px 14px;
  margin:16px 0 20px;
  font-family:"Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--text, #1f2937);
}

/* Untertitel über der Tabelle */
#curve-guide .cg-table-card .cg-subtitle{
  margin:0 0 8px;
  font-weight:700;
  font-size:16px;
  text-align:center;
  color: var(--text, #1f2937);
}

/* Wrapper erlaubt horizontales Scrollen, falls je nötig */
#curve-guide .cg-table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
}

/* Tabelle */
#curve-guide .cg-table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
  line-height:1.45;
  table-layout: fixed;             /* sauberes Umbruchverhalten */
}

#curve-guide .cg-table th,
#curve-guide .cg-table td{
  padding:10px 10px;
  text-align:left;
  vertical-align:top;
  word-break: normal;
  hyphens:auto;
}

#curve-guide .cg-table thead th{
  font-weight:700;
  background: #eef6fb;             /* sanftes Blau passend zum Verlauf */
  border-bottom:1px solid rgba(0,0,0,.06);
}

#curve-guide .cg-table tbody tr:nth-child(odd){
  background: #f9fcff;             /* leichte Zebra-Optik */
}
#curve-guide .cg-table tbody tr:nth-child(even){
  background: #ffffff;
}

/* Spaltenbreiten (auf mobile optimiert) */
#curve-guide .cg-table th:nth-child(1),
#curve-guide .cg-table td:nth-child(1){ width:72px; }      /* Zone */
#curve-guide .cg-table th:nth-child(2),
#curve-guide .cg-table td:nth-child(2){ width:80px; }      /* SpO2 */
#curve-guide .cg-table th:nth-child(3),
#curve-guide .cg-table td:nth-child(3){ width:auto; }      /* Bedeutung */

/* Zonen-Badge */
#curve-guide .cg-table td.zone{
  padding-right:4px;
}
#curve-guide .zone-badge{
  display:inline-grid;
  place-items:center;
  min-width:34px;
  height:34px;
  padding:0 8px;
  border-radius:999px;             /* Pillenform */
  font-weight:700;
  font-size:14px;
  color:#fff;
}

/* Farben je Zone (grün -> rot Verlauf) */
#curve-guide tr[data-zone="1"] .zone-badge{ background:#2ecc71; }
#curve-guide tr[data-zone="2"] .zone-badge{ background:#8bc34a; }
#curve-guide tr[data-zone="3"] .zone-badge{ background:#ffc107; color:white; }
#curve-guide tr[data-zone="4"] .zone-badge{ background:#ff9800; }
#curve-guide tr[data-zone="5"] .zone-badge{ background:#ff7043; }
#curve-guide tr[data-zone="6"] .zone-badge{ background:#f44336; }
#curve-guide tr[data-zone="7"] .zone-badge{ background:#d32f2f; }

/* Hinweistext unter der Tabelle */
#curve-guide .cg-table-note{
  margin:10px 0 0;
  font-size:12px;
  line-height:1.3;
  text-align:center;
  opacity:.8;
}

/* sehr schmale Geräte: etwas kompakter */
@media (max-width: 360px){
  #curve-guide .cg-table th, 
  #curve-guide .cg-table td{ padding:8px 8px; }
  #curve-guide .zone-badge{ min-width:30px; height:30px; font-size:13px; }
}