/* Fahrplaner-Look für das Ideen-Portal (Fider), 25.10.2026.
   Einfügen unter Fider › Administration › Erweitert › Custom CSS.
   Farben = App-Tokens (app/lib/design/fp_tokens.dart, FpPalette), Schrift
   Atkinson Hyperlegible Next wie in der App, Radien 16 (Knöpfe) / 20 (Karten).
   Nur einfache Selektoren (Fider-Empfehlung), Farben über Fiders eigene
   Variablen (--primary-color …, --colors-*), hell und dunkel. */

@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:wght@400;600;700;800&display=swap");

/* Hell */
body {
  --primary-color: #0D7264;        /* brand */
  --primary-color-dark: #095A4F;   /* brandText */
  --primary-color-light: #CCE4DC;  /* brandSoft */
  --colors-white: #EEF2F0;         /* surface (Karten, Felder) */
  --colors-black: #0E1B17;         /* ink */
  --colors-gray-50: #DFE6E2;       /* ground */
  --colors-gray-100: #E2E9E5;      /* surface2 */
  --colors-gray-200: #D3DDD8;      /* surface3 */
  --colors-gray-300: #C3CFCA;      /* line */
  --colors-gray-400: #AEBCB6;
  --colors-gray-500: #8A9A93;
  --colors-gray-600: #4A5953;      /* ink3 */
  --colors-gray-700: #3B4A44;      /* ink2 */
  --colors-gray-800: #24322D;
  --colors-gray-900: #0E1B17;      /* ink */
  --colors-blue-50: #E6F1ED;
  --colors-blue-100: #CCE4DC;
  --colors-blue-200: #A9D3C6;
  --colors-blue-500: #0D7264;
  --colors-blue-600: #0D7264;
  --colors-blue-700: #095A4F;
  --colors-blue-800: #095A4F;
  background-color: #DFE6E2;
  color: #0E1B17;
  font-family: "Atkinson Hyperlegible Next", "Inter", system-ui, sans-serif;
}

/* Dunkel (Fider-Umschalter setzt data-theme="dark") */
body[data-theme=dark] {
  --primary-color: #3CC3AA;        /* brandDark */
  --primary-color-dark: #80E0CC;   /* brandTextDark */
  --primary-color-light: #123A31;  /* brandSoftDark */
  --colors-white: #111D1A;         /* surfaceDark */
  --colors-black: #E8F1ED;         /* inkDark */
  --colors-gray-50: #0A1311;       /* groundDark */
  --colors-gray-100: #1A2A26;      /* surface2Dark */
  --colors-gray-200: #22362F;      /* surface3Dark */
  --colors-gray-300: #26382F;      /* lineDark */
  --colors-gray-400: #3A4F47;
  --colors-gray-500: #5E726A;
  --colors-gray-600: #93A69E;      /* ink3Dark */
  --colors-gray-700: #B4C4BD;      /* ink2Dark */
  --colors-gray-800: #CFDCD6;
  --colors-gray-900: #E8F1ED;      /* inkDark */
  --colors-blue-50: #0F2A24;
  --colors-blue-100: #123A31;
  --colors-blue-200: #1B4D42;
  --colors-blue-500: #3CC3AA;
  --colors-blue-600: #3CC3AA;
  --colors-blue-700: #80E0CC;
  --colors-blue-800: #80E0CC;
  background-color: #0A1311;
  color: #E8F1ED;
}

/* Schrift auch in Feldern und Knöpfen */
input, textarea, select, button {
  font-family: inherit;
}

/* Knöpfe wie in der App: rund, kräftig */
.c-button {
  border-radius: 16px;
  font-weight: 700;
}
.c-button--primary {
  color: #FFFFFF;
}
body[data-theme=dark] .c-button--primary {
  color: #03201A;                  /* onBrandDark */
}

/* Karten und Eingaben */
.c-input, .c-textarea, .c-select {
  border-radius: 12px;
}
.c-modal-window, .c-response-details__card, .c-comment-input-card {
  border-radius: 20px;
}

/* Abstimmen: aktive Stimme in Markenfarbe */
.c-vote-counter__button--voted {
  border-color: var(--colors-primary-base);
  color: var(--colors-primary-base);
}

/* Tags als ruhige Pillen */
.c-tag {
  border-radius: 999px;
  font-weight: 700;
}

/* Fokus gut sichtbar (Barrierefreiheit) */
a:focus-visible, button:focus-visible, .c-button:focus-visible,
input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--colors-primary-base);
  outline-offset: 2px;
}

/* Abstände und Flächen (25.10.2026): Fider malt einige Flächen mit festen
   Farbklassen statt Variablen - u. a. den hellen Kasten (bg-gray-100), der
   genau an der Textkante endete, und die weiße Kopfzeile (bg-white). */
body[data-theme=light] .bg-gray-100 { background-color: #DFE6E2; }  /* ground: kein Kasten */
body[data-theme=light] .bg-gray-50 { background-color: #E2E9E5; }
body[data-theme=light] .bg-gray-200 { background-color: #D3DDD8; }
body[data-theme=light] .bg-white { background-color: #EEF2F0; }
body[data-theme=light] .bg-blue-50, body[data-theme=light] .bg-blue-100 { background-color: #CCE4DC; }
body[data-theme=dark] .bg-gray-100 { background-color: #0A1311; }
body[data-theme=dark] .bg-gray-50 { background-color: #1A2A26; }
body[data-theme=dark] .bg-gray-200 { background-color: #22362F; }
body[data-theme=dark] .bg-white { background-color: #111D1A; }
body[data-theme=dark] .bg-blue-50, body[data-theme=dark] .bg-blue-100 { background-color: #123A31; }
/* Inhaltsbereich als Karte mit Innenabstand (26.10.2026: Texte klebten
   links/rechts am Rand der hellen Fläche). Kante fluchtet mit dem Logo. */
.page {
  background-color: var(--colors-white);
  border-radius: 24px;
  margin-top: 24px;
  margin-bottom: 32px;
  padding: 32px;
}
@media (max-width: 640px) {
  .page {
    border-radius: 0;
    margin-top: 0;
    padding: 20px 16px;
  }
}