/* ====================================================================
   appcode Cloud · Schwarz / Orange, hoher Kontrast
   Markenfarbe #F6580A, aus dem Logo entnommen.

   Kontrastwerte (WCAG) der tragenden Paarungen:
     Orange  auf Schwarz  6,3:1   → Text, Zahlen, Links
     Schwarz auf Orange   6,3:1   → Knopfbeschriftung
     Weiss   auf Orange   3,3:1   → nur für Flächen, nie für Fliesstext
     Weiss   auf Schwarz 21,0:1   → Fliesstext
   Deshalb tragen Knöpfe schwarze Schrift, nicht weisse.
   ==================================================================== */

:root {
  color-scheme: dark;              /* native Felder, Datumswähler und Listen dunkel */

  --orange:        #F6580A;
  --orange-hell:   #FF7536;
  --orange-dunkel: #C34204;
  --orange-schimmer: rgba(246, 88, 10, .14);

  --schwarz:       #000000;
  --flaeche:       #0D0D0D;
  --flaeche-2:     #171717;
  --rand:          #272727;
  --rand-stark:    #3D3D3D;

  --text:          #FFFFFF;
  --text-leise:    #A1A1A1;

  /* Nur als schmale Akzente, damit der Gesamteindruck schwarz-orange bleibt */
  --akzent:        var(--orange);
  --gut:           #35D07F;
  --warn:          var(--orange);
  --fehler:        #FF4438;

  --radius:        10px;
  --radius-karte:  14px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  background: var(--schwarz);
  -webkit-text-size-adjust: 100%;
}

a { color: var(--orange); text-decoration: none; }
a:hover { color: var(--orange-hell); text-decoration: underline; }

/* --- Kopf und Navigation ------------------------------------------ */

.kopf {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 16px;
  padding-top: calc(12px + env(safe-area-inset-top));
  background: var(--schwarz);
  border-bottom: 2px solid var(--orange);
  position: sticky; top: 0; z-index: 10;
}

.marke {
  display: flex; align-items: center; gap: 10px;
  margin-right: auto; color: var(--text); text-decoration: none;
  font-weight: 700; font-size: 17px; letter-spacing: -.01em;
}
.marke:hover { color: var(--text); text-decoration: none; }
.marke .logo { height: 26px; width: auto; display: block; }

.menue-knopf {
  background: none; border: 0; color: var(--orange);
  font-size: 24px; line-height: 1; padding: 2px 6px; cursor: pointer;
}

.haupt-nav { display: none; width: 100%; flex-direction: column; gap: 2px; padding-top: 10px; }
body.menue-offen .haupt-nav { display: flex; }

.haupt-nav a {
  color: var(--text-leise); padding: 10px 14px; border-radius: 999px;
  font-size: 15px; font-weight: 500;
}
.haupt-nav a:hover { color: var(--text); background: var(--flaeche-2); text-decoration: none; }
.haupt-nav a.aktiv { background: var(--orange); color: var(--schwarz); font-weight: 700; }
.haupt-nav .abmelden { color: #6E6E6E; }

@media (min-width: 760px) {
  .menue-knopf { display: none; }
  .haupt-nav { display: flex !important; flex-direction: row; width: auto; padding-top: 0; gap: 6px; }
}

/* --- Inhalt -------------------------------------------------------- */

.inhalt {
  max-width: 1040px; margin: 0 auto;
  padding: 24px 16px 60px;
  padding-bottom: calc(60px + env(safe-area-inset-bottom));
}

h1 {
  font-size: 28px; font-weight: 700; letter-spacing: -.02em;
  margin: 0 0 22px;
}
h2 { font-size: 18px; font-weight: 700; margin: 26px 0 12px; letter-spacing: -.01em; }

.fuss {
  display: flex; justify-content: space-between; gap: 12px;
  max-width: 1040px; margin: 0 auto; padding: 18px 16px;
  color: #5F5F5F; font-size: 13px;
  border-top: 1px solid var(--rand);
}

/* --- Karten und Kacheln -------------------------------------------- */

.karte {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius-karte);
  padding: 20px;
  margin-bottom: 16px;
}

.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(152px, 1fr)); gap: 12px; }

.kachel {
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: var(--radius-karte); padding: 18px;
  color: var(--text); text-decoration: none; display: block;
}
a.kachel:hover { border-color: var(--orange); text-decoration: none; }
.kachel .zahl {
  font-size: 32px; font-weight: 700; line-height: 1.1;
  color: var(--orange); letter-spacing: -.03em;
}
.kachel .bezeichnung {
  color: var(--text-leise); font-size: 13px; margin-top: 2px;
  text-transform: uppercase; letter-spacing: .05em;
}

/* --- Tabellen ------------------------------------------------------ */

.tabelle { width: 100%; border-collapse: collapse; font-size: 15px; }
.tabelle th {
  text-align: left; font-size: 12px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-leise); font-weight: 700;
  padding: 9px 10px; border-bottom: 2px solid var(--orange);
}
.tabelle td { padding: 11px 10px; border-bottom: 1px solid var(--rand); vertical-align: middle; }
.tabelle tr:last-child td { border-bottom: 0; }
.tabelle .rechts { text-align: right; }
.tabelle tbody tr:hover td { background: var(--flaeche-2); }

@media (max-width: 620px) {
  .tabelle thead { display: none; }
  .tabelle tr { display: block; border-bottom: 1px solid var(--rand); padding: 10px 0; }
  .tabelle tbody tr:hover td { background: transparent; }
  .tabelle td { display: flex; justify-content: space-between; gap: 14px; border: 0; padding: 4px 0; }
  .tabelle td::before {
    content: attr(data-spalte); color: var(--text-leise);
    font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
  }
  .tabelle .rechts { text-align: left; }
}

/* --- Formulare ----------------------------------------------------- */

.feld { margin-bottom: 16px; }
.feld label {
  display: block; font-size: 12px; font-weight: 700; margin-bottom: 6px;
  text-transform: uppercase; letter-spacing: .06em; color: var(--text-leise);
}
.feld .hinweis, .hinweis { font-size: 13px; color: var(--text-leise); margin-top: 5px; }

input[type=text], input[type=password], input[type=email], input[type=url],
input[type=number], input[type=date], input[type=month], input[type=search],
input[type=color], select, textarea {
  width: 100%; padding: 12px 13px;
  border: 1px solid var(--rand-stark); border-radius: var(--radius);
  font: inherit; font-size: 16px;      /* 16px verhindert den iOS-Zoom beim Fokus */
  background: var(--schwarz); color: var(--text);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--orange); outline-offset: 1px;
  border-color: var(--orange);
}
input[type=color] { height: 46px; padding: 4px; }
input[type=checkbox] { accent-color: var(--orange); width: 20px; height: 20px; }
textarea { min-height: 96px; resize: vertical; }
::placeholder { color: #5F5F5F; }

.feld-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 620px) { .feld-reihe { grid-template-columns: 1fr; } }

/* --- Knöpfe -------------------------------------------------------- */
/* Schwarze Schrift auf Orange: 6,3:1 statt 3,3:1 bei weisser Schrift.  */

.knopf {
  display: inline-block; padding: 11px 20px;
  border: 2px solid var(--orange); border-radius: 999px;
  background: var(--orange); color: var(--schwarz);
  font: inherit; font-size: 15px; font-weight: 700;
  cursor: pointer; text-decoration: none; text-align: center;
}
.knopf:hover {
  background: var(--orange-hell); border-color: var(--orange-hell);
  color: var(--schwarz); text-decoration: none;
}
.knopf:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

.knopf-leise {
  background: transparent; color: var(--orange); border-color: var(--rand-stark);
}
.knopf-leise:hover { background: var(--orange-schimmer); color: var(--orange-hell); border-color: var(--orange); }

.knopf-gefahr { background: transparent; color: var(--fehler); border-color: var(--fehler); }
.knopf-gefahr:hover { background: var(--fehler); color: var(--schwarz); border-color: var(--fehler); }

.knopf-klein { padding: 7px 14px; font-size: 14px; border-width: 1px; }
.knopf-reihe { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 20px; }

/* --- Meldungen und Abzeichen --------------------------------------- */
/* Farbe nur als schmaler Balken - der Eindruck bleibt schwarz-orange.  */

.meldung {
  padding: 13px 16px; margin-bottom: 18px; font-size: 15px;
  background: var(--flaeche-2); color: var(--text);
  border: 1px solid var(--rand); border-left: 5px solid var(--text-leise);
  border-radius: 0 var(--radius) var(--radius) 0;
}
/* Sehr dunkle Tönung zusätzlich zum Balken - sonst sehen Warnung und
   Fehler auf einen Blick gleich aus. Bleibt praktisch schwarz.          */
.meldung-erfolg  { border-left-color: var(--gut);    background: #0B1A12; border-color: #17331F; }
.meldung-warnung { border-left-color: var(--orange); background: #1D1105; border-color: #3A2008; }
.meldung-fehler  { border-left-color: var(--fehler); background: #1D0A08; border-color: #3C1512; }

.punkt { display: inline-block; width: 11px; height: 11px; border-radius: 50%; vertical-align: -1px; }

.abzeichen {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: .03em;
  background: var(--flaeche-2); border: 1px solid var(--rand-stark); color: var(--text-leise);
}

.leise { color: var(--text-leise); }
.leer  { text-align: center; color: var(--text-leise); padding: 36px 16px; }

code {
  background: var(--flaeche-2); border: 1px solid var(--rand);
  border-radius: 5px; padding: 1px 6px; font-size: 14px; color: var(--orange);
}

/* --- Anmeldeseite --------------------------------------------------- */

.anmelden { max-width: 400px; margin: 9vh auto; padding: 0 16px; }
.anmelden .logo { display: block; height: 56px; width: auto; margin: 0 auto 18px; }
.anmelden h1 { text-align: center; font-size: 22px; margin-bottom: 20px; }
.anmelden .karte { padding: 26px; }

/* --- Eingangsseite --------------------------------------------------- */

body.eingang {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  padding: 0 24px;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

.eingang-kopf {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 64px 0 0;
}
/* 258px ist die native Breite des Bildinhalts. Darueber waere es echtes
   Hochrechnen - mehr Flaeche, aber keine zusaetzliche Schaerfe. */
.eingang-kopf img {
  width: 258px; max-width: 72vw; height: auto; display: block;
}

/* Der Titel als Umriss: gerade noch da, nie aufdringlich. Ohne
   Unterstuetzung fuer text-stroke bleibt es bei dunklem Grau, damit das
   Wort nicht unsichtbar wird. */
.wortmarke {
  font-size: 58px; font-weight: 700; letter-spacing: .02em;
  line-height: 1; color: #3A3A3A;
}
@supports (-webkit-text-stroke: 1px black) {
  .wortmarke {
    color: transparent;
    -webkit-text-stroke: 1px #4A4A4A;
  }
}

/* Das Zitat sitzt oberhalb der Mitte. Genau mittig wirkte es verloren:
   Logo und Knopf ziehen den Blick nach aussen, dazwischen entsteht sonst
   zu viel Leere. Die Bodenfreiheit schiebt es nach oben. */
.eingang-mitte {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 16px 0 16vh;
}
.eingang-mitte .zitat { margin: 0; max-width: 460px; }
.eingang-mitte .zitat blockquote { font-size: 19px; line-height: 1.55; }
.eingang-mitte .zitat .original { font-size: 14px; }

.eingang-fuss {
  display: flex; flex-direction: column; align-items: center;
  padding: 0 0 44px;
}
.signatur {
  margin: 38px 0 0; font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: #3F3F3F;
}

@media (max-width: 620px) {
  .eingang-kopf { padding-top: 44px; }
  .eingang-kopf img { width: 220px; }
  .wortmarke { font-size: 42px; }
  .eingang-mitte { padding-bottom: 10vh; }
  .eingang-mitte .zitat blockquote { font-size: 17px; }
  .eingang-fuss { padding-bottom: 34px; }
  .signatur { margin-top: 30px; }
}

/* --- Zitat unter der Anmeldung -------------------------------------- */

.zitat {
  margin: 30px auto 0; max-width: 400px; text-align: center;
  color: var(--text-leise);
}
.zitat blockquote {
  margin: 0; font-size: 15px; line-height: 1.6; font-style: italic;
  color: var(--text);
}
.zitat .original {
  margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: #6E6E6E;
}
.zitat figcaption {
  margin-top: 14px; font-size: 11px; line-height: 1.7; color: #6E6E6E;
}
/* Nur der Name trägt Farbe - sonst zieht die Zuschreibung mehr Blicke
   auf sich als das Zitat. */
.zitat figcaption .name {
  display: block; color: var(--orange);
  text-transform: uppercase; letter-spacing: .08em;
}

/* --- Kalendergitter ------------------------------------------------- */

.kalender {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px;
  background: var(--rand); border: 1px solid var(--rand);
  border-radius: var(--radius); overflow: hidden;
}
.kalender .wochentag {
  background: var(--flaeche-2); padding: 7px 2px; text-align: center;
  font-size: 12px; font-weight: 700; color: var(--text-leise);
  text-transform: uppercase; letter-spacing: .06em;
}
.kalender .tag {
  background: var(--flaeche); min-height: 64px; padding: 5px 6px;
  color: var(--text); text-decoration: none; display: block;
}
.kalender a.tag:hover { background: var(--flaeche-2); text-decoration: none; }
.kalender .tag.fremd { background: var(--schwarz); }
.kalender .tag.fremd .tagzahl { color: #4A4A4A; }
.kalender .tag.heute { outline: 2px solid var(--orange); outline-offset: -2px; }
.kalender .tag.heute .tagzahl { color: var(--orange); }
.kalender .tagzahl { font-size: 13px; font-weight: 700; }
.kalender .punkte { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 5px; }
.kalender .punkte span { width: 7px; height: 7px; border-radius: 50%; display: block; }

.tagblock { padding: 12px 0; border-bottom: 1px solid var(--rand); }
.tagblock:last-child { border-bottom: 0; }
.tagblock .tagkopf {
  font-weight: 700; font-size: 13px; margin-bottom: 6px;
  color: var(--orange); text-transform: uppercase; letter-spacing: .05em;
}

/* --- Mehrfachauswahl (Verträge an einem Account) --------------------- */

.auswahlliste {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2px; border: 1px solid var(--rand-stark); border-radius: var(--radius);
  padding: 8px; background: var(--schwarz);
}
.auswahlliste label {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: 8px; cursor: pointer;
  font-size: 15px; font-weight: 400; text-transform: none; letter-spacing: 0;
  color: var(--text); margin: 0;
}
.auswahlliste label:hover { background: var(--flaeche-2); }
.auswahlliste input { width: auto; flex: none; }

/* --- Dokumente ------------------------------------------------------ */

.dokumente {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px;
}
.dokument {
  border: 1px solid var(--rand); border-radius: var(--radius);
  padding: 10px; background: var(--schwarz);
}
.dokument > a {
  display: block; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: 6px; background: var(--flaeche-2); margin-bottom: 8px;
}
.dokument img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dokument .pdf {
  display: flex; align-items: center; justify-content: center; height: 100%;
  color: var(--orange); font-weight: 700; letter-spacing: .08em; font-size: 18px;
}
.dokument .titel { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }

input[type=file] {
  width: 100%; padding: 11px 13px; font: inherit; font-size: 15px;
  color: var(--text); background: var(--schwarz);
  border: 1px solid var(--rand-stark); border-radius: var(--radius);
}
input[type=file]::file-selector-button {
  font: inherit; font-weight: 700; font-size: 14px; margin-right: 12px;
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
  background: var(--orange); color: var(--schwarz); border: 0;
}