/* ============================================================
   Kundenbereich-Startseite (cd_uebersicht) — Dashboard
   ============================================================
   Begruessung, zwei Kennzahlen (neue Antworten, offene Tickets) und
   vier Schnellzugriff-Kacheln. Alles ruhig auf hellem Grund; die
   Support-Kachel traegt bei neuen Antworten ein rotes Badge.
   ============================================================ */

.cd-portal {
  background: var(--cd-flaeche-2);
}

/* ============================================================
   Kompakter Kopf der Portalseiten (Bauteile/Portalkopf)
   ============================================================
   Ersetzt den grossen Seitentitel-Hero im Kundenbereich: Eyebrow +
   Titel + kurzer Text, rechts eine kleine Grafik in weichem Kreis.
   Wird von Support, Fernwartung u. a. genutzt. */
.cd-portalkopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cd-a5);
  margin-block-end: var(--cd-a5);
  padding-block-end: var(--cd-a5);
  border-block-end: 1px solid var(--cd-linie);
}
.cd-portalkopf__text { max-inline-size: 62ch; }
.cd-portalkopf__eyebrow {
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-mikro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cd-rot);
  margin: 0 0 6px;
}
.cd-portalkopf__titel {
  font-family: var(--cd-schrift-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--cd-tinte);
  margin: 0;
}
.cd-portalkopf__unter {
  margin: var(--cd-a3) 0 0;
  color: var(--cd-text-2);
  line-height: 1.55;
}
.cd-portalkopf__grafik {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  inline-size: 76px;
  block-size: 76px;
  border-radius: 50%;
  background: #FBEBEC;
  color: var(--cd-rot);
}
.cd-portalkopf__grafik .cd-symbol { inline-size: 36px; block-size: 36px; }
@media (max-width: 560px) {
  .cd-portalkopf { gap: var(--cd-a3); }
  .cd-portalkopf__grafik { inline-size: 54px; block-size: 54px; }
  .cd-portalkopf__grafik .cd-symbol { inline-size: 26px; block-size: 26px; }
}

/* ---- Kopf ---- */
.cd-portal__kopf {
  margin-block-end: var(--cd-a5);
  max-inline-size: 60ch;
}
.cd-portal__gruss {
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-mikro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cd-rot);
  margin: 0 0 6px;
}
.cd-portal__titel {
  font-family: var(--cd-schrift-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--cd-tinte);
  margin: 0 0 var(--cd-a3);
}
.cd-portal__unter { color: var(--cd-text-2); line-height: 1.6; margin: 0; }

/* ---- Kennzahlen ---- */
.cd-portal__stand {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cd-a3);
  margin-block-end: var(--cd-a5);
}
.cd-portal__kennzahl {
  display: inline-flex;
  align-items: baseline;
  gap: .6ch;
  padding: 12px 18px;
  background: var(--cd-weiss);
  border: 1px solid var(--cd-linie);
  border-radius: var(--cd-r-karte);
  text-decoration: none;
  transition: border-color var(--cd-zeit) ease, box-shadow var(--cd-zeit) ease;
}
.cd-portal__kennzahl:hover { border-color: var(--cd-linie-stark, #c9d4da); box-shadow: var(--cd-schatten-karte); }
.cd-portal__zahl {
  font-family: var(--cd-schrift-display);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--cd-tinte);
  font-variant-numeric: tabular-nums;
}
.cd-portal__label { color: var(--cd-text-2); font-size: var(--cd-gr-klein); }
.cd-portal__kennzahl--rot { border-color: #F0C9CC; background: #FBEBEC; }
.cd-portal__kennzahl--rot .cd-portal__zahl { color: var(--cd-rot); }
.cd-portal__kennzahl--rot .cd-portal__label { color: #9E0C12; }

/* ---- Kacheln ---- */
.cd-portal__kacheln {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--cd-a3);
}
.cd-portal__kachel {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "icon titel pfeil"
    "icon text  pfeil";
  align-items: center;
  column-gap: var(--cd-a3);
  padding: clamp(18px, 3vw, 26px);
  background: var(--cd-weiss);
  border: 1px solid var(--cd-linie);
  border-radius: var(--cd-r-gross);
  text-decoration: none;
  transition: border-color var(--cd-zeit) ease, box-shadow var(--cd-zeit) ease, transform var(--cd-zeit) ease;
}
.cd-portal__kachel:hover {
  border-color: var(--cd-linie-stark, #c9d4da);
  box-shadow: var(--cd-schatten-karte);
  transform: translateY(-2px);
}
.cd-portal__icon {
  grid-area: icon;
  display: grid;
  place-items: center;
  inline-size: 46px;
  block-size: 46px;
  border-radius: 50%;
  background: #FBEBEC;
  color: var(--cd-rot);
}
.cd-portal__icon .cd-symbol { inline-size: 22px; block-size: 22px; }
.cd-portal__ktitel {
  grid-area: titel;
  align-self: end;
  font-family: var(--cd-schrift-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--cd-tinte);
}
.cd-portal__ktext { grid-area: text; align-self: start; color: var(--cd-text-2); font-size: var(--cd-gr-klein); line-height: 1.4; }
.cd-portal__pfeil {
  grid-area: pfeil;
  color: var(--cd-text-schwach);
  font-size: 1.3rem;
  transition: transform var(--cd-zeit) ease, color var(--cd-zeit) ease;
}
.cd-portal__kachel:hover .cd-portal__pfeil { transform: translateX(3px); color: var(--cd-rot); }

/* Badge (neue Antworten) auf der Support-Kachel. */
.cd-portal__badge {
  position: absolute;
  inset-block-start: 14px;
  inset-inline-start: 40px;
  min-inline-size: 20px;
  block-size: 20px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--cd-rot);
  color: var(--cd-weiss);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--cd-weiss);
}

@media (max-width: 680px) {
  .cd-portal__kacheln { grid-template-columns: minmax(0, 1fr); }
}

/* Auf dem Rechner bildet die Schiene eine eigene Spalte. Die
   Portalbausteine duerfen deshalb etwas mehr innere Ruhe tragen als
   in der einspaltigen Tablet- und Mobilfassung. */
@media (min-width: 1101px) {
  .cd-portalkopf {
    gap: var(--cd-a6);
    margin-block-end: var(--cd-a6);
    padding-block-end: var(--cd-a6);
  }

  .cd-portal__kopf,
  .cd-portal__stand {
    margin-block-end: var(--cd-a6);
  }

  .cd-portal__stand {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--cd-a4);
  }
  .cd-portal__kennzahl {
    min-inline-size: 0;
    min-block-size: 72px;
    align-items: center;
    padding: var(--cd-a4) var(--cd-a5);
  }
  .cd-portal__zahl { font-size: 2rem; }

  .cd-portal__kacheln { gap: var(--cd-a4); }
  .cd-portal__kachel {
    min-block-size: 126px;
    padding: var(--cd-a6);
  }
  .cd-portal__icon {
    inline-size: 50px;
    block-size: 50px;
  }
}

/* ============================================================
   cd_portalkopf — der Kopf als eigenstaendiges Element
   ============================================================
   Die Portal-CTypes rendern den Portalkopf in ihrer eigenen Bahn und
   setzen den Abstand nach unten selbst. Als eigenes Element steht er
   in einer eigenen Bahn, die keinen Bahnabstand mitbringen darf —
   sonst klafft zwischen Kopf und dem Baustein darunter eine Luecke,
   die es auf keiner anderen Portalseite gibt.
   ============================================================ */
.cd-portalkopfbahn {
  padding-block: 0;
}
.cd-portalkopfbahn .cd-portalkopf {
  margin-block-end: 0;
}

/* Die Bahn DIREKT NACH dem Kopf verzichtet auf ihr oberes Polster.
   Sonst klafft zwischen Kopf und Baustein die Summe zweier
   Bahnabstaende — auf „Anfrage absetzen" gemessen rund 220 px
   leere Flaeche. Auf den Portalseiten, deren CType den Kopf selbst
   rendert, gibt es diese Fuge nicht; die Regel stellt denselben
   Anschluss her. */
.cd-portalkopfbahn + .cd-bahn {
  padding-block-start: 0;
}

/* ============================================================
   GEMEINSAMER RHYTHMUS DER PORTALSEITEN
   ============================================================
   Gemessen am 26.08.2026 ueber alle sieben Seiten: Der Grund
   kippte (drei Seiten getoent, drei weiss), der Abstand zwischen
   Kopf und Inhalt lag bei 32, 32, 32, 32 und 72 px, und die
   Bahnbreiten waren wirkungslos. Beim Durchklicken las sich das
   als Unruhe ohne Grund.

   DER SCHALTER IST DIE ANWESENHEIT DES MENUES.
   :has(> .cd-kundenmenue) — das Portalmenue rendert sich nur im
   Kundenbereich und nur fuer Angemeldete. Ein zweites Merkzeichen
   am body waere eine zweite Wahrheit, die auseinanderlaufen kann.

   Dieselbe Bedingung benutzt schon die Schiene weiter unten in
   cd_kundenmenue.css.
   ============================================================ */

/* ---- 1. EIN Grund fuer alle -------------------------------- */
/* Getoent und nicht weiss: Der Kundenbereich ist ein anderer Ort
   als die oeffentliche Website, und die weissen Karten und
   Listenzeilen darauf brauchen einen Grund, von dem sie sich
   abheben. Auf reinem Weiss hielten sie sich nur an einer
   Haarlinie von 1,29:1 fest.

   :not([class*="cd-auf-"]) laesst eine ausdruecklich gewaehlte
   Grundfarbe stehen — wer im Backend „dunkel" waehlt, bekommt
   dunkel. */
.cd-inhalt:has(> .cd-kundenmenue) > .cd-bahn:not([class*="cd-auf-"]) {
  background: var(--cd-flaeche-2);
}

/* ---- 2. EIN Abstand zwischen Kopf und Inhalt --------------- */
/* Der Portalkopf bringt seinen Aussenabstand selbst mit. Wo die
   Bahn darunter zusaetzlich einen Rasterabstand setzt (Fernwartung:
   clamp(24px, 4vw, 40px)), addierten sich beide zu 72 px. */
.cd-inhalt:has(> .cd-kundenmenue) .cd-portalkopf {
  margin-block-end: var(--cd-a5);
}

/* Wo die Bahn ihren Kindern schon einen Rasterabstand gibt, zaehlt
   beides zusammen. Dort nimmt der Kopf seinen Aussenabstand zurueck.

   DIE AUSNAHME STEHT HIER und nicht in cd_fernwartung.css: Bei
   gleicher Staerke entschiede sonst die Reihenfolge der @import-
   Zeilen, wer gewinnt — und die ist kein Ort fuer eine Entscheidung.
   Gemessen war der Abstand dort erst 72, dann 48 statt 24 px. */
.cd-inhalt:has(> .cd-kundenmenue) .cd-fernwartung__inhalt > .cd-portalkopf {
  margin-block-end: 0;
}

/* ---- NEBEN DER SCHIENE KEIN ZWEITER DECKEL ---------------- */
/* Die Portalseiten tragen Lesebreiten-Deckel (52rem Tickets,
   62rem Anfragen und Mitteilungen, 46rem Zugangsdaten). Die sind
   richtig, solange die Bahn ueber die volle Inhaltsspalte laeuft
   — sie halten den Text auf lesbarer Breite.

   NEBEN DER SCHIENE sind sie eine Verengung zu viel: Die Schiene
   hat die Spalte bereits von 1.200 auf 908 px gebracht. Gemessen
   blieben von 908 px dann 752 (Support) und 656 (Zugangsdaten)
   uebrig — der Inhalt stand verloren in einer halben Spalte,
   waehrend rechts daneben Platz frei blieb.

   Deshalb hier EIN Deckel fuer alle Portalbahnen: die
   Inhaltsspalte plus den Platz, den die Schiene sich nimmt. Die
   Staerke (0,4,0) liegt ueber den doppelten Klassenselektoren der
   Einzelseiten (0,2,0).

   Ohne Schiene bleibt alles wie es war — die Deckel gelten dann
   unveraendert weiter. */
@media (min-width: 1101px) {
  [data-kundenmenue^="schiene"] .cd-inhalt:has(> .cd-kundenmenue) .cd-bahn > .cd-bahn__inhalt {
    /* DIE INHALTSSPALTE SELBST und nicht plus Schiene: Der Platz
       der Schiene steckt bereits im padding-inline dieses Kastens.
       Wer ihn hier addiert, sprengt das 1280er Raster — gemessen
       1.580 px Kasten in einem 1.584-px-Fenster, die Spalte lief
       also von Rand zu Rand.

       Mit --cd-inhalt bleibt der Kasten auf dem Raster, und der
       Inhalt bekommt 1.280 minus zweimal Rinne minus Schiene =
       908 px. Dieselbe Breite auf allen sieben Seiten. */
    max-inline-size: var(--cd-inhalt);
  }
}

/* ---- 3. Luft ueber der ersten Bahn ------------------------- */
/* .cd-inhalt > .cd-bahn:first-child greift auf Portalseiten NIE:
   Das Menue ist dort das erste Kind. Ohne diese Regel traegt die
   erste Portalbahn bis zu 118 px Luft, die keine oeffentliche
   Seite hat — und beim Umschalten auf die Schiene sprang der Wert
   von 73,8 px auf 0.

   Ein Wert fuer alle Fassungen und alle Breiten. */
.cd-inhalt:has(> .cd-kundenmenue) > .cd-kundenmenue + .cd-bahn:not(.cd-hero) {
  padding-block-start: var(--cd-a6);
}