/* ==========================================================================
   pauer – Komponenten der Umgebung
   Werte aus dem Design «pauer Umgebung» (Claude Design).
   Desktop ab 1280 px, Tablet 768 bis 1279 px, Handy unter 768 px.
   ========================================================================== */

/* ---------- Wortmarke ---------------------------------------------------- */
/* Vektorgrafik aus Jost (siehe parts.js). Die Box entspricht der Textfassung im Design:
   1em hoch, Grundlinie bei 0.7075em, Breite ohne die letzte Laufweite. */
.wortmarke {
  display: block;
  flex-shrink: 0;
  font-size: var(--s, 64px);
  color: var(--farbe, var(--nachtblau));
  overflow: visible;
  user-select: none;
}

.wortmarke--login { --s: 64px; --farbe: var(--flaeche); }
.wortmarke--kopf  { --s: 24px; --farbe: var(--nachtblau); }

/* ---------- Adress-Label, Badge ------------------------------------------ */
.adresse {
  display: inline-block;
  max-width: 100%;
  height: 28px;
  padding: 0 8px;
  overflow: hidden;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 400;
  line-height: 26px;
  color: var(--grau);
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.adresse--hell {
  border-color: var(--nacht-linie);
  color: var(--linie);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--canvas);
  border-radius: var(--radius);
  background: var(--canvas);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: var(--tinte);
  white-space: nowrap;
}

.badge__punkt {
  position: relative;
  flex: none;
  width: 10px;
  height: 10px;
  overflow: hidden;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}

.badge--entwicklung .badge__punkt::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 50%;
  background: currentColor;
}

.badge--geplant {
  border: 1px dashed var(--linie-dunkel);
  background: transparent;
  color: var(--grau);
}

/* ---------- Buttons, Links ----------------------------------------------- */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: max-content;
  min-height: 48px;
  margin: 0;
  padding: 0 20px;
  border: 1px solid var(--blau);
  border-radius: var(--radius);
  background: var(--blau);
  color: var(--weiss);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}

.knopf:hover { filter: brightness(0.94); }
.knopf:active { filter: brightness(0.86); }
.knopf--gross { min-height: 52px; }
.knopf--breit { width: 100%; }

.knopf--sekundaer {
  border-color: var(--linie);
  background: var(--weiss);
  color: var(--blau);
}

.knopf:disabled {
  border-color: var(--linie);
  background: var(--linie);
  color: var(--grau);
  filter: none;
  cursor: not-allowed;
}

.textlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin: 0;
  padding: 0 4px;
  border: 0;
  background: transparent;
  font-size: 16px;
  font-weight: 600;
  color: var(--blau);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ---------- Eingabefeld, Checkbox ---------------------------------------- */
.feld {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.feld__label {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--tinte);
}

.feld__huelle { position: relative; }

.feld__input {
  display: block;
  width: 100%;
  height: 52px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid var(--grau);
  border-radius: var(--radius);
  background: var(--weiss);
  font-size: 16px;
  color: var(--tinte);
  outline: none;
}

.feld__input::placeholder { color: #8A919B; }
.feld__input--pw { padding-right: 112px; }

.feld__input:focus {
  border-color: var(--blau);
  box-shadow: inset 0 0 0 1px var(--blau), 0 0 0 3px var(--fokus-ring);
}

.feld__input[aria-invalid='true'] {
  border-color: var(--fehler);
  box-shadow: inset 0 0 0 1px var(--fehler);
}

.feld__input[aria-invalid='true']:focus {
  box-shadow: inset 0 0 0 1px var(--fehler), 0 0 0 3px #EBCFD1;
}

.feld__aktion {
  position: absolute;
  top: 4px;
  right: 4px;
  height: 44px;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font-size: 15px;
  font-weight: 600;
  color: var(--blau);
  cursor: pointer;
}

.feld__aktion:hover { background: var(--flaeche); }

.feld__meldung {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--fehler);
}

.pruefen {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  font-size: 16px;
  line-height: 1.3;
  color: var(--tinte);
  cursor: pointer;
  user-select: none;
}

.pruefen input {
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0;
  border: 1px solid var(--grau);
  border-radius: 6px;
  background: var(--weiss) center / 18px 18px no-repeat;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.pruefen input:checked {
  border-color: var(--blau);
  background-color: var(--blau);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.5'%3E%3Cpath d='M5 12.75l4.5 4.5L19 7.25'/%3E%3C/svg%3E");
}

/* ---------- Login -------------------------------------------------------- */
.login {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 48px;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 48px 48px 88px;
  background: var(--nachtblau);
  color: var(--tinte);
}

.login__karte {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: 460px;
  padding: 40px;
  border-radius: var(--radius);
  background: var(--flaeche);
}

.login__titel {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}

.login__optionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 16px;
  margin-top: -8px;
}

.login__vergessen--handy { display: none; }

.login__hilfe {
  padding: 12px 16px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--weiss);
  font-size: 15px;
  line-height: 1.45;
  color: var(--grau);
}

.login__demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 460px;
  margin-top: -24px;
}

.login__demo-titel {
  font-size: 13px;
  line-height: 1.3;
  color: var(--linie);
}

.login__demo-liste {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.login__demo-knopf {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 44px;
  padding: 6px 12px;
  border: 1px solid var(--nacht-linie);
  border-radius: var(--radius);
  background: transparent;
  color: var(--flaeche);
  text-align: left;
  cursor: pointer;
}

.login__demo-knopf:hover { border-color: var(--linie-dunkel); }

.login__demo-name {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
}

.login__demo-gruppe {
  font-size: 13px;
  line-height: 1.25;
  color: var(--linie);
}

.login__fuss {
  position: absolute;
  right: 48px;
  bottom: 24px;
  left: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.login__firma {
  font-size: 13px;
  line-height: 1.3;
  color: var(--linie);
}

/* ---------- Menü-Knöpfe und Menüs ---------------------------------------- */
.menue-anker { position: relative; }

.menue-knopf {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  margin: 0;
  padding: 0 10px 0 14px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: transparent;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--tinte);
  cursor: pointer;
}

.menue-knopf:hover { border-color: var(--grau); }

.menue-knopf[aria-expanded='true'] {
  border-color: var(--blau);
  background: var(--blau-hell);
}

.menue-knopf__pfeil,
.menue-knopf__icon {
  display: flex;
  color: var(--grau);
}

.menue-knopf[aria-expanded='true'] .menue-knopf__pfeil { transform: rotate(180deg); }

.menue-knopf--apps {
  gap: 8px;
  padding: 0 10px 0 12px;
  font-weight: 600;
  letter-spacing: 0;
}

.menue {
  width: 300px;
  overflow: hidden;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--weiss);
  box-shadow: var(--schatten-menue);
  color: var(--tinte);
}

.menue-anker > .menue {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 30;
}

.menue--umschalter { width: 320px; }

.menue--flach {
  width: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.menue__person {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
}

.menue--flach .menue__person { padding: 16px 20px; }

.menue__initialen {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  background: var(--canvas);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.menue__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.menue__name {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}

.menue__gruppe {
  font-size: 15px;
  line-height: 1.3;
  color: var(--grau);
}

.menue__trenner {
  flex: none;
  height: 1px;
  background: var(--linie);
}

.menue__ueberschrift {
  padding: 16px 20px 8px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grau);
}

.menue__liste {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
}

.menue__liste--apps { padding-top: 0; }

.menue__eintrag {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--tinte);
  text-align: left;
  cursor: pointer;
}

.menue__eintrag:hover { background: var(--flaeche); }
.menue__eintrag--app:hover { background: transparent; box-shadow: inset 0 0 0 1px var(--linie); }

.menue__eintrag.ist-aktuell {
  background: var(--blau-hell);
  color: var(--blau);
}

.menue__eintrag-icon {
  display: flex;
  color: var(--grau);
}

.menue__eintrag-text {
  flex: 1;
  min-width: 0;
}

.menue__hinweis {
  font-size: 13px;
  font-weight: 400;
  color: var(--grau);
}

/* ---------- Kopfzeile Zentrale ------------------------------------------- */
.kopf-zentrale {
  position: relative;
  z-index: 20;
  border-bottom: 1px solid var(--linie);
  background: var(--flaeche);
}

.kopf-zentrale__innen {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: var(--max-breite);
  height: 72px;
  margin: 0 auto;
  padding: 0 48px;
}

.kopf-zentrale__marke {
  display: flex;
  align-items: center;
  min-height: 44px;
  border-radius: var(--radius);
}

/* ---------- Zentrale ----------------------------------------------------- */
.zentrale {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--canvas);
}

.zentrale__main {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
  max-width: var(--max-breite);
  margin: 0 auto;
  padding: 56px 48px 64px;
}

.zentrale__gruss {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.zentrale__gruss h1 {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.zentrale__datum {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 16px;
  line-height: 1.4;
  color: var(--grau);
}

.zentrale__datum .mono { font-size: 15px; }

.zentrale__apps {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.abschnitt {
  display: flex;
  align-items: center;
  gap: 16px;
}

.abschnitt__titel {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grau);
  white-space: nowrap;
}

.abschnitt__linie {
  flex: 1;
  height: 1px;
  background: var(--linie);
}

.kacheln {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.kacheln > li { display: flex; }

/* Kachel (Desktop) */
.kachel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto 1fr auto auto;
  grid-template-areas:
    'icon badge'
    'kopf kopf'
    'adresse adresse'
    'satz satz'
    'zahl zahl'
    'aktion aktion';
  width: 100%;
  min-height: 288px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche);
  color: var(--tinte);
}

.kachel__icon {
  grid-area: icon;
  display: flex;
  margin: 24px 0 0 24px;
}

.kachel__icon .app-icon { width: 56px; height: 56px; }

.kachel__badge--oben {
  grid-area: badge;
  align-self: start;
  margin: 24px 24px 0 0;
}

.kachel__badge--zeile { display: none; }

.kachel__kopf {
  grid-area: kopf;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 20px 24px 0;
}

.kachel__name {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
}

.kachel__adresse {
  grid-area: adresse;
  justify-self: start;
  margin: 10px 24px 0;
}

.kachel__satz {
  grid-area: satz;
  margin: 20px 24px 24px;
  font-size: 16px;
  line-height: 1.45;
  color: var(--grau);
  text-wrap: pretty;
}

.kachel__zahl {
  grid-area: zahl;
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: -8px 24px 20px;
  font-size: 15px;
  line-height: 1.3;
  color: var(--grau);
}

.kachel__zahl strong { font-size: 22px; font-weight: 600; color: var(--tinte); }
.kachel__zahl--wichtig strong { color: var(--blau); }
.kachel__zahl--wichtig span { color: var(--tinte); font-weight: 600; }

.kachel__aktion {
  grid-area: aktion;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 0 24px;
  border-top: 1px solid var(--linie);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--blau);
}

.kachel__chevron { display: none; }

a.kachel { cursor: pointer; }

a.kachel::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: var(--radius);
  pointer-events: none;
}

a.kachel:hover::after { box-shadow: inset 0 0 0 2px var(--blau); }
a.kachel:active::after { background: rgba(3, 48, 120, 0.06); }

.kachel--geplant {
  border-style: dashed;
  border-color: var(--linie-dunkel);
  background: transparent;
}

.kachel--geplant .kachel__name,
.kachel--geplant .kachel__aktion { color: var(--grau); }

.kachel--geplant .kachel__aktion {
  border-top-style: dashed;
  border-top-color: var(--linie-dunkel);
}

/* Leerzustand */
.leer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 40px;
  border: 1px dashed var(--linie-dunkel);
  border-radius: var(--radius);
}

.leer__text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.leer__titel {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
}

.leer__satz {
  max-width: 46ch;
  font-size: 16px;
  line-height: 1.5;
  color: var(--grau);
  text-wrap: pretty;
}

/* Profil */
.profil { gap: 24px; }
.profil__zurueck { align-self: flex-start; margin-left: -4px; }

.profil__titel {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.profil__karte {
  max-width: 640px;
  overflow: hidden;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche);
}

.profil__zeile {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  min-height: 56px;
  padding: 12px 20px;
}

.profil__zeile + .profil__zeile { border-top: 1px solid var(--linie); }

.profil__zeile dt {
  font-size: 15px;
  font-weight: 600;
  color: var(--grau);
}

.profil__zeile dd {
  margin: 0;
  font-size: 16px;
  overflow-wrap: anywhere;
}

.profil__zeile dd.mono { font-size: 15px; }

.profil__apps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.profil__hinweis {
  font-size: 15px;
  color: var(--grau);
}

/* ---------- Kopfzeile App ------------------------------------------------ */
.kopf-app {
  position: relative;
  z-index: 20;
  display: flex;
  flex: none;
  align-items: center;
  gap: 12px;
  height: 60px;
  padding: 0 12px 0 8px;
  border-bottom: 1px solid var(--linie);
  background: var(--flaeche);
  color: var(--tinte);
}

.kopf-app__home {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
}

.kopf-app__home:hover { background: var(--canvas); }

.kopf-app__trenner {
  flex: none;
  width: 1px;
  height: 28px;
  background: var(--linie);
}

.kopf-app__titel {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding-left: 4px;
}

.kopf-app__name {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.kopf-app__menueknopf {
  display: none;
  gap: 8px;
  padding: 0 14px 0 12px;
  font-weight: 600;
  letter-spacing: 0;
}

/* ---------- App-Rahmen --------------------------------------------------- */
.rahmen {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--canvas);
}

.rahmen__koerper {
  display: flex;
  flex: 1;
  min-height: 0;
}

.seitenleiste {
  display: flex;
  flex: none;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  width: 256px;
  padding: 16px 12px;
  overflow-y: auto;
  border-right: 1px solid var(--linie);
  background: var(--flaeche);
}

.seitenleiste__liste {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.seitenleiste__trenner {
  display: block;
  height: 1px;
  margin: 8px 4px;
  background: var(--linie);
}

.seitenleiste__fuss {
  display: none;
  padding-top: 12px;
  border-top: 1px solid var(--linie);
}

.nav-eintrag {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--tinte);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  user-select: none;
}

.nav-eintrag:hover { box-shadow: inset 0 0 0 1px var(--linie); }

.nav-eintrag__icon {
  display: flex;
  color: var(--grau);
}

.nav-eintrag__text {
  flex: 1;
  min-width: 0;
}

.nav-eintrag[aria-current='page'] {
  background: var(--blau-hell);
  color: var(--blau);
}

.nav-eintrag[aria-current='page'] .nav-eintrag__icon { color: var(--blau); }

.nav-eintrag--zeile { min-height: 56px; }

.inhalt {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
  padding: 40px 48px;
  overflow-y: auto;
}

.inhalt__titel {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.baufeld {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  padding: 24px;
  border: 1px dashed var(--linie-dunkel);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--grau);
  text-align: center;
}

.hinweisband {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 12px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche);
  font-size: 15px;
  line-height: 1.4;
  color: var(--grau);
}

.handy-menue {
  position: absolute;
  top: 56px;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 15;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: var(--flaeche);
}

.handy-menue__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 8px 20px;
}

.handy-menue__titel {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grau);
}

.handy-menue__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 8px 8px;
}

/* ---------- Hinweisseiten ------------------------------------------------ */
.seite-hinweis {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--canvas);
}

.hinweis {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding: 48px 48px 96px;
}

.hinweis__innen {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
  max-width: 520px;
}

.hinweis__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche);
  color: var(--grau);
}

.hinweis__text {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hinweis__titel {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.hinweis__satz {
  font-size: 17px;
  line-height: 1.5;
  color: var(--grau);
  text-wrap: pretty;
}

/* ==========================================================================
   Tablet: 768 bis 1279 px
   ========================================================================== */
@media (max-width: 1279px) {
  .wortmarke--login { --s: 56px; }

  .kopf-zentrale__innen { padding: 0 40px; }

  .zentrale__main {
    gap: 40px;
    padding: 40px 40px 48px;
  }

  .zentrale__gruss h1,
  .profil__titel { font-size: 32px; }

  .kacheln {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  /* Kachel wird zur Zeile */
  .kachel {
    grid-template-columns: 48px minmax(0, 1fr) 32px;
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      'icon kopf chevron'
      'icon adresse chevron'
      'icon satz chevron'
      'icon zahl chevron';
    column-gap: 12px;
    row-gap: 6px;
    min-height: 0;
    padding: 12px 4px 12px 12px;
  }

  .kachel__icon { margin: 0; align-self: start; }
  .kachel__icon .app-icon { width: 48px; height: 48px; }
  .kachel__badge--oben { display: none; }
  .kachel__badge--zeile { display: inline-flex; }

  .kachel__kopf {
    gap: 6px 10px;
    min-height: 28px;
    margin: 0;
  }

  .kachel__name { font-size: 18px; }
  .kachel__adresse { margin: 0; }

  .kachel__satz {
    margin: 0;
    font-size: 15px;
    line-height: 1.4;
  }

  .kachel__aktion { display: none; }
  .kachel__zahl { margin: 2px 0 0; }
  .kachel__zahl strong { font-size: 18px; }

  .kachel__chevron {
    grid-area: chevron;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: 32px;
    height: 44px;
    color: var(--blau);
  }

  a.kachel:hover::after { box-shadow: none; }

  .inhalt { padding: 32px; }

  /* einklappbare Navigation */
  .seitenleiste__fuss { display: block; }

  .rahmen[data-eingeklappt='true'] .seitenleiste {
    width: 112px;
    padding: 16px 8px;
  }

  .rahmen[data-eingeklappt='true'] .seitenleiste .nav-eintrag {
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-height: 68px;
    padding: 10px 4px;
    font-size: 15px;
    line-height: 1.2;
    text-align: center;
  }

  .rahmen[data-eingeklappt='true'] .seitenleiste .nav-eintrag__text { flex: none; }
}

/* ==========================================================================
   Handy: unter 768 px
   ========================================================================== */
@media (max-width: 767px) {
  /* Login */
  .wortmarke--login { --s: 44px; }
  .wortmarke--kopf { --s: 22px; }

  .login {
    gap: 32px;
    padding: 24px 16px 72px;
  }

  .login__karte { padding: 24px; }
  .login__vergessen--gross { display: none; }

  .login__vergessen--handy {
    display: inline-flex;
    align-self: center;
    margin-top: -8px;
  }

  .login__demo { margin-top: -8px; }

  .login__fuss {
    right: 16px;
    left: 16px;
  }

  /* Zentrale */
  .kopf-zentrale__innen {
    height: 64px;
    padding: 0 16px;
  }

  .kopf-zentrale .menue-anker { position: static; }

  .kopf-zentrale .menue-anker > .menue {
    top: 62px;
    right: 12px;
    left: 12px;
    width: auto;
  }

  .zentrale__main {
    gap: 24px;
    padding: 20px 16px 24px;
  }

  .zentrale__gruss h1,
  .profil__titel { font-size: 26px; }

  .kacheln {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .leer { padding: 24px; }

  .profil__zeile {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  /* Kopfzeile App */
  .kopf-app {
    gap: 8px;
    height: 56px;
    padding: 0 8px 0 6px;
  }

  .kopf-app__trenner,
  .kopf-app__apps { display: none; }

  .kopf-app__titel { padding-left: 0; }

  .kopf-app__name {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .kopf-app__titel:not(.kopf-app__titel--ohne-name) .kopf-app__adresse { display: none; }

  .kopf-app--mit-nav .kopf-app__benutzer { display: none; }
  .kopf-app--mit-nav .kopf-app__menueknopf { display: inline-flex; }

  .kopf-app .menue-anker { position: static; }

  .kopf-app .menue-anker > .menue {
    top: calc(100% + 6px);
    right: 12px;
    left: 12px;
    width: auto;
  }

  /* App-Rahmen */
  .seitenleiste { display: none; }

  .inhalt {
    padding: 24px 16px;
  }

  .inhalt__titel { font-size: 24px; }

  /* Hinweisseiten */
  .hinweis { padding: 32px 16px 72px; }
  .hinweis__titel { font-size: 26px; }
}

@media (min-width: 768px) {
  .handy-menue { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .menue-knopf__pfeil { transition: transform 0.15s ease; }
}

/* Suche über alle Apps (Zentrale und #/suche) */
.suche {
  position: relative;
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 720px;
}

.suche__icon {
  position: absolute;
  top: 0;
  left: 14px;
  display: flex;
  align-items: center;
  height: 52px;
  color: var(--grau);
  pointer-events: none;
}

.suche__feld { flex: 1; height: 52px; padding-left: 44px; font-size: 17px; }
.suche .knopf { min-height: 52px; }
.suche__seite { gap: 24px; }
.suche__summe,
.suche__hinweis { font-size: 16px; color: var(--grau); }

.suche__gruppe { display: flex; flex-direction: column; gap: 4px; max-width: 880px; }

.suche__app {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
  font-size: 18px;
  font-weight: 700;
}

.suche__zahl { font-size: 14px; font-weight: 400; color: var(--grau); }

.suche__liste {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche);
}

.suche__liste li + li { border-top: 1px solid var(--linie); }

.suche__treffer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px;
  grid-template-areas: 'titel pfeil' 'text pfeil';
  align-items: center;
  gap: 2px 12px;
  min-height: 56px;
  padding: 10px 16px;
  color: var(--tinte);
  text-decoration: none;
}

.suche__treffer:hover { background: var(--weiss); }
.suche__treffer:focus-visible { outline: 3px solid var(--blau); outline-offset: -3px; border-radius: var(--radius); }
.suche__titel { grid-area: titel; font-size: 16px; font-weight: 600; }
.suche__text { grid-area: text; font-size: 14px; color: var(--grau); }
.suche__pfeil { grid-area: pfeil; color: var(--grau); }

@media (max-width: 767px) {
  .suche .knopf { padding: 0 14px; }
}