/* =========================================================
   BASE CSS – KOMMENTIERTE LERNVERSION
   ---------------------------------------------------------
   Zweck:
   Diese Datei ist nicht nur zum Benutzen da, sondern auch
   zum Verstehen. Sie zeigt die 4 Ebenen eines guten Basis-CSS:

   1. PRIMITIVES
      = Rohwerte. Also Farben, Abstände, Größen, Schriften.
      Diese Ebene kennt noch keine Bedeutung im Interface.
      Beispiel: "dieses Grau", "12px Abstand", "400er Schrift".

   2. SEMANTIC TOKENS
      = Rollen im Interface.
      Beispiel: "Textfarbe", "Hintergrund", "Border", "Form-Control".
      Hier sagst du also nicht mehr WELCHE Farbe es ist,
      sondern WOFÜR sie verwendet wird.

   3. RESET / BASE
      = verlässliche Grundregeln für Browser-Defaults.
      Beispiel: box-sizing, margin reset, max-width für Bilder,
      Grundschrift auf body.

   4. STANDARD HTML
      = Styling der semantischen HTML-Elemente.
      Beispiel: h1-h6, p, ul, blockquote, form, table.

   5. LAYOUT
      = Diese Klassen steuern das Seitenlayout.
      container, grid, columns

   6. Utilities
      = Diese Klassen steuern das Komponentenlayout.
      flex, gap, alignment
      
      

   Der große Vorteil:
   Eine KI kann mit dieser Struktur viel sauberer arbeiten,
   weil sie zwischen Rohwerten, Rollen und Komponenten
   unterscheiden kann.
   ========================================================= */

  @font-face {
    font-family: "Twemoji Country Flags";
    src: url('/common/assets/fonts/TwemojiCountryFlags.woff2') format('woff2');
    font-display: swap;
  }



/* =========================================================
   1. PRIMITIVES
   ---------------------------------------------------------
   Wichtige Regel:
   In Primitives stehen nur Rohwerte.
   Hier sollte noch NICHT stehen:
   - "Textfarbe"
   - "Button-Hintergrund"
   - "Border für Input"

   Sondern nur:
   - konkrete Grauwerte
   - konkrete Abstände
   - konkrete Schriftgrößen
   - konkrete Schatten
   ========================================================= */
:root {
  color-scheme: light dark;
  /* -------------------------------------------------------
     Farb-Primitives
     -------------------------------------------------------
     Diese Werte sind deine Materialsammlung.
     Darunter liegen jetzt auch die früheren "harten" Farben,
     die vorher direkt im Theme standen.

     Gute Denkrichtung:
     - Gray Scale = neutrales UI-Material
     - Accent Colors = Akzent-/Statusfarben
     - Alpha Colors = transparente Farben für Schatten/Overlays
     ------------------------------------------------------- */

  /* Gray scale */
  /* Alter Stand, auskommentiert zur Referenz (vor centralcss-Blaustich-Abgleich):
  --color-gray-0: #ffffff;
  --color-gray-50: #f8f9fa;
  --color-gray-100: #f1f1f1;
  --color-gray-150: #f5f5f5;
  --color-gray-200: #cecdcd;
  --color-gray-300: #c0c0c1;
  --color-gray-400: #bfbfbf;
  --color-gray-420: #b6b6b6;
  --color-gray-450: #999999;
  --color-gray-500: #8a8a8a;
  --color-gray-550: #797979;
  --color-gray-600: #626469;
  --color-gray-650: #4e4e4e;
  --color-gray-700: #4b4a4e;
  --color-gray-750: #3e3f42;
  --color-gray-800: #373737;
  --color-gray-850: #33363b;
  --color-gray-875: #2b2e31;
  --color-gray-900: #242529;
  --color-gray-950: #1a1a1a;
  --color-black: #000000;
  */
  
  --color-gray-50: #f8f9fa;
  --color-gray-100: #f1f1f1;
  --color-gray-150: #f5f5f5;
  --color-gray-200: #cecdcd;
  --color-gray-300: #c4c5c8; /* war #c0c0c1 — real in style.css */
  --color-gray-400: #b9bdc2;
  /*--color-gray-420: #b8bbc3;  war #b6b6b6 — real in style.css/styleBlack.css */
  --color-gray-450: #94999f; /* war #999999 — real in style.css */
  --color-gray-500: #020202;
  --color-gray-550: #6c757d; /* war #797979 — real in wall.css */
  --color-gray-600: #626469;
  --color-gray-650: #4e525a; /* war #4e4e4e — real in styleBlack.css */
  --color-gray-700: #44454a; /* war #4b4a4e — real in style.css */
  --color-gray-750: #3d4046; /* war #3e3f42 — real in styleBlack.css + wall.css */
  --color-gray-800: #35393d; /* war #373737 — real in style.css */
  --color-gray-850: #33363b;
  --color-gray-875: #2b2e31;
  --color-gray-900: #242529;
  --color-gray-950: #1c1d1f; /* war #1a1a1a — real in style.css */
  

  /* ── Panoo outline set (parallel stroke palette) ── */
  --panoo-green:  #41ac38;
  --panoo-yellow: #daac0c;  
  --panoo-blue:   #3358a4;
  --panoo-red:    #ca1426;
  --panoo-purple: #64398e;
  --panoo-orange: #ce4d18;
  --panoo-gray:   #6b6b6b; 

  /* ── Accent primitives (single tones → bare names) ── */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-red:    #e02c2c;
  --color-orange: #ff5900;
  --color-vermilion: #f14a24;
  --color-green:  #2ca02c;

  /* Accent primitives — purple is the only real ramp (light → dark) */
  --color-purple-200: #ce97de;
  --color-purple-300: #c065e0;
  --color-purple-400: #be4ae2;
  --color-purple-500: #983dba;


  /* Transparente Schwarztöne */
  --color-black-alpha-3: rgba(0, 0, 0, 0.03);
  --color-black-alpha-5: rgba(0, 0, 0, 0.05);
  --color-black-alpha-10: rgba(0, 0, 0, 0.1);
  --color-black-alpha-20: rgba(0, 0, 0, 0.2);
  --color-black-alpha-30: rgba(0, 0, 0, 0.3);
  --color-black-alpha-40: rgba(0, 0, 0, 0.4);
  --color-black-alpha-50: rgba(0, 0, 0, 0.5);
  --color-black-alpha-55: rgba(0, 0, 0, 0.55);
  --color-black-alpha-60: rgba(0, 0, 0, 0.6);

  /* Transparente Weißtöne */
  --color-white-alpha-3: rgba(255, 255, 255, 0.03);
  --color-white-alpha-5: rgba(255, 255, 255, 0.05);
  --color-white-alpha-10: rgba(255, 255, 255, 0.1);
  --color-white-alpha-20: rgba(255, 255, 255, 0.2);
  --color-white-alpha-30: rgba(255, 255, 255, 0.3);
  --color-white-alpha-28: rgba(255, 255, 255, 0.28);
  --color-white-alpha-40: rgba(255, 255, 255, 0.4);
  --color-white-alpha-60: rgba(255, 255, 255, 0.6);

  /* -------------------------------------------------------
     Gradients als Primitives
     -------------------------------------------------------
     Das sind ebenfalls Rohwerte.
     Sie beschreiben noch keine UI-Rolle, sondern nur einen
     wiederverwendbaren Verlauf.
     ------------------------------------------------------- */
  --gradient-light-inset: linear-gradient(to bottom, var(--color-white) 0%, var(--color-gray-50) 100%);
  --gradient-dark-inset: linear-gradient(to bottom, var(--color-gray-850) 0%, var(--color-gray-875) 100%);
  --gradient-light-raised: linear-gradient(to bottom, var(--color-white) 0%, var(--color-gray-100) 100%);
  --gradient-dark-raised: linear-gradient(to bottom, var(--color-gray-850) 0%, var(--color-gray-875) 100%);

  /* -------------------------------------------------------
     Spacing-Primitives
     -------------------------------------------------------
     Abstände sollten möglichst in einem kleinen System liegen.
     Eine KI kann dann leichter konsistent bauen.
     ------------------------------------------------------- */
  --space-2xs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 10px; /*das war 12px bisher nutzen wir aber zB input 10px*/
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 40px;
  --space-4xl: 48px;
  --space-5xl: 64px;

  /* Größen-Primitives */
  --size-form-height: 31px;
  --size-button-min-width: 43px;
  --size-layout-max: 1000px;
  --size-scrollbar-width: 7px;
  --size-scrollbar-height: 10px;

  /* Typography-Primitives */
  --font-family-base: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  
  /* emojis für chrome windows fix: https://stackoverflow.com/questions/45631725/color-emoji-support-in-chrome-devtools */
  --font-family-emojiflags: "Twemoji Country Flags", system-ui, sans-serif;

  --font-size-11: 1.1rem;
  --font-size-13: 1.3rem;
  --font-size-15: 1.5rem;
  --font-size-18: 1.8rem;
  --font-size-20: 2rem;
  --font-size-22: 2.2rem;
  --font-size-27: 2.7rem;

  --font-weight-400: 400;
  --font-weight-600: 600;
  --font-weight-700: 700;

  --line-height-tight: 1.2;
  --line-height-base: 1.4;
  --line-height-relaxed: 1.6;

  /* Radius-Primitives */
  --radius-sm: 2px;
  --radius-md: 4px;

  /* Schatten-Primitives */
  --shadow-inset-light: inset 0 2px 3px 0 var(--color-black-alpha-20), 0 1px 0 0 var(--color-black-alpha-30);
  --shadow-inset-dark: 0 1px 0 0 var(--color-white-alpha-28), inset 0 1px 0 0 var(--color-black-alpha-55);
  --shadow-raised-light: 0 1px 4px 0 var(--color-black-alpha-20), inset 0 0 0 1px var(--color-white-alpha-60);
  --shadow-raised-dark: 0 1px 4px 0 var(--color-black-alpha-50), inset 0 0 0 1px var(--color-white-alpha-10);
 

   /* Focus und Hoverauszeichnung */
  --focus-ring-width: max(3px, .2rem);
  --focus-ring-offset: max(1px, .15rem);
  --focus-ring-light: 0 0 0 3px var(--color-purple-200);
  --focus-ring-dark: 0 0 0 3px var(--color-purple-400);

  /* Asset-Primitives
     Auch Icons können als Primitive behandelt werden,
     wenn sie später thematisch getauscht werden sollen. */
  /* fixme: lesbarer wäre hier natürlich: --icon-chevron-down-light und --icon-chevron-down-dark */
  --icon-chevron-down-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320'%3E%3Cpolygon points='212,130 160,205.7 108,130' fill='%23626469'/%3E%3C/svg%3E");
  --icon-chevron-down-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320'%3E%3Cpolygon points='212,130 160,205.7 108,130' fill='%23c0c0c1'/%3E%3C/svg%3E");
}

/* =========================================================
   2. SEMANTIC TOKENS
   ---------------------------------------------------------
   Hier wird aus Rohwerten Bedeutung.

   Merksatz:
   Primitives sagen: "welcher Wert?"
   Semantic Tokens sagen: "welche Rolle?"

   Beispiel:
   - Primitive: --color-gray-950
   - Semantic:  --text-color

   Wenn später das Theme wechselt, bleibt die Rolle gleich,
   nur der dahinterliegende Primitive-Wert ändert sich.
   Genau deshalb ist diese Ebene so wichtig.
   ========================================================= */
:root {
  /* -------------------------------------------------------
     Typografische Rollen
     -------------------------------------------------------
     Hier legst du fest, welche Größe/Zeilenhöhe/Weight im
     Interface welche Aufgabe hat.
     ------------------------------------------------------- */
  --text-size-regular: var(--font-size-15);
  --text-size-small: var(--font-size-13);
  --text-size-tiny: var(--font-size-11);

  --text-weight-regular: var(--font-weight-400);
  --text-weight-bold: var(--font-weight-700);
  --text-weight-medium: var(--font-weight-600);

  --text-weight-heading: var(--font-weight-400);

  --text-line-height-regular: var(--line-height-base);
  --text-line-height-tight: var(--line-height-tight);
  --text-line-height-relaxed: var(--line-height-relaxed);

  --text-line-height-heading: var(--line-height-base);

  --text-size-h1: var(--font-size-27);
  --text-size-h2: var(--font-size-22);
  --text-size-h3: var(--font-size-20);
  --text-size-h4: var(--font-size-18);
  --text-size-h5: var(--font-size-18);
  --text-size-h6: var(--font-size-18);

  
 

  /* -------------------------------------------------------
     Kernrollen des Interface
     -------------------------------------------------------
     Diese Namen sollte eine KI möglichst bevorzugt benutzen.
     Sie sind semantisch und damit austauschbar.
     ------------------------------------------------------- */
  --bg-color: light-dark(var(--color-white), var(--color-gray-900));
  --bg-color-highlight: light-dark(var(--color-gray-100), var(--color-gray-800));
  --bg-color-code: light-dark(var(--color-gray-100), var(--color-gray-950));

  --surface-color: light-dark(var(--color-gray-50), var(--color-gray-875));
  --surface-color-raised: light-dark(var(--color-gray-150), var(--color-gray-850));
  --surface-color-muted: light-dark(var(--color-gray-200), var(--color-gray-950));

  --text-color: light-dark(var(--color-gray-950), var(--color-gray-300));
  --text-color-negative: light-dark(var(--color-gray-300), var(--color-gray-950));
  
  --text-color-muted: light-dark(var(--color-gray-650), var(--color-gray-400));
  --text-color-highlight: light-dark(var(--color-gray-950), var(--color-white));
  --text-color-link: light-dark(var(--color-purple-500), var(--color-purple-300));
  --text-color-error: var(--color-red-500);
  --text-color-success: var(--color-green-500);
  --text-color-onair-shadow: var(--color-orange);
  --text-color-onair: var(--color-vermilion);

  --heading-color: var(--text-color-highlight);
  --subheading-color: var(--text-color);

  --border-color: light-dark(var(--color-gray-400), var(--color-gray-500));
  --border-color-hover: light-dark(var(--color-gray-500), var(--color-gray-450));


  --focus-color: light-dark(var(--color-purple-400), var(--color-purple-200));


  /* -------------------------------------------------------
     Form-Rollen
     -------------------------------------------------------
     Wichtig: Ein Input bekommt nicht direkt ein Gray.
     Er bekommt eine Rolle wie --control-bg-inset oder --control-border.
     ------------------------------------------------------- */
  
  --control-bg-inset: var(--gradient-light-inset);
  --control-bg-raised: var(--gradient-light-raised);
  --control-text: var(--text-color);
  --control-border: var(--border-color);
  --control-border-input: light-dark(var(--color-gray-200), var(--color-gray-900));
  --control-shadow-input: var(--shadow-inset-light);
  --control-shadow-button: var(--shadow-raised-light);
  --control-focus-ring: var(--focus-ring-light);
  --control-icon-chevron-down: var(--icon-chevron-down-light);
  --control-icon-chevron-color: light-dark(var(--color-gray-600), var(--color-gray-300));

  /* Scrollbar-Rollen */
  --scrollbar-color-bg: light-dark(var(--color-gray-50), var(--color-gray-450));
  --scrollbar-color-track: light-dark(var(--color-gray-100), var(--color-gray-800));
  --scrollbar-color-thumb: light-dark(var(--color-gray-450), var(--color-gray-700));
  --scrollbar-color-track-alt: light-dark(var(--color-gray-300), var(--color-gray-550));
}

/* ---------------------------------------------------------
   Theme mode selection
   ---------------------------------------------------------
   Uses light-dark() for semantic color tokens and explicit
   overrides for shadows, gradients, and images since
   light-dark() cannot wrap complex values.
   --------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --control-bg-inset: var(--gradient-dark-inset);
    --control-bg-raised: var(--gradient-dark-raised);
    --control-shadow-input: var(--shadow-inset-dark);
    --control-shadow-button: var(--shadow-raised-dark);
    --control-focus-ring: var(--focus-ring-dark);
    --control-icon-chevron-down: var(--icon-chevron-down-dark);
  }
}

/* ---------------------------------------------------------
   Explizites Dark Theme
   ---------------------------------------------------------
   Diese Variante ist wichtig für einen Theme-Toggle.
   Sie benutzt ebenfalls nur Primitive und keine harten Hexwerte.
   --------------------------------------------------------- */
:root[data-theme='dark'] {
  color-scheme: dark;
  --control-bg-inset: var(--gradient-dark-inset);
  --control-bg-raised: var(--gradient-dark-raised);
  --control-shadow-input: var(--shadow-inset-dark);
  --control-shadow-button: var(--shadow-raised-dark);
  --control-focus-ring: var(--focus-ring-dark);
  --control-icon-chevron-down: var(--icon-chevron-down-dark);
}

:root[data-theme='light'] {
  color-scheme: light;
}

/* =========================================================
   3. RESET / BASE
   ---------------------------------------------------------
   Diese Ebene sorgt dafür, dass HTML sich verlässlich verhält.
   Sie ist noch keine Komponente und auch noch kein spezielles UI.
   ========================================================= */

/* 62.5% bedeutet: 1rem = 10px.
   Viele finden das im Denken einfacher.
   1.5rem = 15px, 2.4rem = 24px usw. */
html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

/* Alle Elemente rechnen Padding und Border in die Gesamtbreite ein.
   Das verhindert viele Layout-Probleme. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Browser-eigene Standardabstände werden neutralisiert.
   Sonst hat jedes Element andere Default-Margins. */
body,
h1, h2, h3, h4, h5, h6,
p, blockquote, pre,
ul, ol, dl,
figure,
table,
fieldset {
  margin: 0;
}

/* Medien werden blockig und responsiv.
   Das ist fast immer sinnvoll als Basis. */
img,
picture,
svg,
canvas,
video {
  display: block;
  max-width: 100%;
}

/* Form-Elemente erben die Schrift.
   Sonst wirken Inputs und Buttons häufig wie aus einem anderen System. */
input,
button,
textarea,
select {
  font: inherit;
}

button,
select {
  cursor: pointer;
}

/* body ist die eigentliche Grundfläche der Seite. */
body {
  min-height: 100vh;
  background: var(--bg-color);
  color: var(--text-color);
  font-family: var(--font-family-base);
  font-size: var(--text-size-regular);
  font-weight: var(--text-weight-regular);
  line-height: var(--text-line-height-regular);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Diese Regeln sind simple Layout-Defaults für eine Demo-/Content-Seite.
   Für komplexe Apps würdest du oft ein separates Layout-System bauen. */
header,
main,
footer {
  width: min(100%, var(--size-layout-max));
  margin-inline: auto;
  padding-inline: var(--space-md);
}

/* header {
  padding-top: var(--space-lg);
} */

main {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-5xl);
}

footer {
  color: var(--text-color-muted);
}

/* Scrollbars bekommen Theme-Farben. */
::-webkit-scrollbar {
  width: var(--size-scrollbar-width);
  height: var(--size-scrollbar-height);
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-color-thumb);
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-color-track);
}

/* Kleine Hilfsklasse für Demo-/Content-Trenner. */
.trenner {
  margin: var(--space-3xl) 0;
  height: var(--space-xs);
  border: 0;
  background: var(--bg-color-highlight);
}

/* =========================================================
   4. STANDARD HTML
   ---------------------------------------------------------
   Ab hier bekommt Standard-HTML eine lesbare, saubere Form.
   Ziel: semantische Elemente sollen schon ohne weitere Klassen
   ordentlich aussehen.
   ========================================================= */

/* Überschriften */
h1, h2, h3, h4, h5, h6 {
  color: var(--heading-color);
  font-weight: var(--text-weight-heading);
  line-height: var(--text-line-height-heading);
  /* margin-bottom: var(--space-md);  */
  padding-bottom: var(--space-xs); 
}
h4, h5, h6 {
  color: var(--subheading-color);
}

h1 { font-size: var(--text-size-h1); text-transform: uppercase; }
h2 { font-size: var(--text-size-h2); text-transform: uppercase; }
h3 { font-size: var(--text-size-h3); text-transform: uppercase; }
h4 { font-size: var(--text-size-h4); }
h5 { font-size: var(--text-size-h5); }
h6 { font-size: var(--text-size-h6); }

/* Content-Blöcke bekommen einen unteren Standardabstand.
   So wirkt Standard-HTML sofort ordentlich rhythmisiert. */
p,
ul,
ol,
dl,
blockquote,
pre,
figure,
form,
table {
  margin-bottom: var(--space-xl);
}

/* Maximale Zeilenlänge verbessert Lesbarkeit. */
p {
  max-width: 75ch;
}

small {
  font-size: var(--text-size-small);
  line-height: var(--text-line-height-tight);
  color: var(--text-color-muted);
}

/* Links */
a {
  color: var(--text-color-link);
  text-decoration: underline;
  text-underline-offset: 0.15em;/*fixme*/
}

a:hover,
a:focus-visible {
  text-decoration-thickness: 0.14em;/*fixme*/
}

/* Listen
   Wichtig: Nicht komplett "wegresetten", wenn du Standard-HTML
   hübsch und KI-tauglich halten willst. */
ul,
ol {
  padding-left: 2rem;
}

ul { list-style: disc; }
ol { list-style: decimal; }

li + li {
  margin-top: var(--space-xs);
}

/* Beschreibungsliste */
dt {
  color: var(--text-color-highlight);
  font-weight: var(--text-weight-medium);
}

dd {
  margin: 0 0 var(--space-sm) 0;
  color: var(--text-color-muted);
}

/* Inline-Semantik */
strong {
  font-weight: var(--text-weight-bold);
}

em,
cite {
  font-style: italic;
}

code,
kbd,
samp,
var {
  font-family: var(--font-family-mono);
}

code,
kbd,
samp {
  background: var(--bg-color-code);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0.15em 0.4em;
}

abbr[title] {
  text-decoration: underline dotted;
  cursor: help;
}

/* Längere Zitate */
blockquote {
  padding-left: var(--space-lg);
  border-left: 4px solid var(--border-color-quote);
  color: var(--text-color-muted);
}

/* Codeblöcke */
pre {
  overflow: auto;
  padding: var(--space-lg);
  background: var(--bg-color-code);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-family: var(--font-family-mono);
  font-size: var(--text-size-small);
  line-height: var(--text-line-height-tight);
}

/* Figuren / Medien  KI ; Use .gap-sm */
figure {
  display: grid;
}

figcaption {
  font-size: var(--text-size-tiny);
  color: var(--text-color-muted);
}

/* ---------------------------------------------------------
   Formulare
   ---------------------------------------------------------
   Hier geht es noch um Base-Styling.
   Sehr spezielle Projektcontrols würden später eher in
   components.css liegen.
   --------------------------------------------------------- */
label {
  display: inline-block;
  margin-bottom: var(--space-xs);
}

input[type='text'],
input[type='email'],
input[type='password'],
input[type='search'],
input[type='url'],
input[type='tel'],
input[type='number'],
input[type='date'],
input[type='time'],
input[type='datetime-local'],
select,
textarea {
  width: 100%;
  min-height: var(--size-form-height);
  padding: 0 var(--space-md);
  color: var(--control-text);
  border-radius: var(--radius-md);
}
input[type='text'],
input[type='email'],
input[type='password'],
input[type='search'],
input[type='url'],
input[type='tel'],
input[type='number'],
input[type='date'],
input[type='time'],
input[type='datetime-local'],
textarea {
  background: var(--control-bg-inset);
  border: 1px solid var(--control-border-input);
  box-shadow: var(--control-shadow-input);
}

textarea {
  min-height: 10rem;
  padding-top: var(--space-md);
  resize: vertical;
}
select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--control-icon-chevron-down), var(--control-bg-raised);
  background-repeat: no-repeat;
  background-position: right center;
  padding-right: var(--space-xl);
  box-shadow: var(--control-shadow-button);
  border: 1px solid var(--control-border);
}
select option {
  background-color: var(--bg-color);
  color:var(--text-color);
}

button {
  min-height: var(--size-form-height);
  min-width: var(--size-button-min-width);
  padding: 0 var(--space-lg);
  color: var(--control-text);
  background: var(--control-bg-raised);
  border: 1px solid var(--control-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--control-shadow-button);
}
::placeholder {
  color: var(--text-color-muted);
  opacity: 1; /* Firefox applies opacity by default, override it */
}

/* Native Checkbox/Radio bleiben weitgehend nativ,
   bekommen aber eine Theme-Farbe. */
input[type='checkbox'],
input[type='radio'] {
  accent-color: currentColor;
}




button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible,
button:hover,
input:hover,
select:hover,
textarea:hover {
  /* outline: none;
  box-shadow: var(--control-focus-ring); */
  outline: var(--focus-ring-width) solid var(--focus-color);
  outline-offset: var(--focus-ring-offset);
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Kleine semantische Rückmeldungen */
.error {
  color: var(--text-color-error);
  font-style: italic;
}

.success {
  color: var(--text-color-success);
  font-style: italic;
}

/* Tabellen-Basis
   Nur die generische HTML-Tabelle.
   Spezialtabellen sollten separat als Komponente laufen. */
.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border-color);
}

th,
td {
  padding: var(--space-md);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border-color);
}

th {
  color: var(--text-color-highlight);
  background: var(--surface-color);
  font-weight: var(--text-weight-medium);
}

tbody tr:hover td {
  background: var(--bg-color-highlight);
}


/* =========================================================
   5. LAYOUT
   ---------------------------------------------------------
   Diese Klassen steuern das Seiten- und Flächenlayout.
   Sie sind bewusst generisch gehalten, damit sie in vielen
   Projekten wiederverwendet werden können.

   Faustregel:
   - Grid = große Layoutflächen und Spalten
   - Flex = Innenlayout von Komponenten
   ========================================================= */
   
 /* =========================================================
   ABSTÄNDE Gap-Helfer
   ---------------------------------------------------------
   Verwende Grid- und Flex-Container ohne eingebautes Gap.
   Setze Abstände immer explizit mit einer .gap-*-Klasse.
   Diese Utilities helfen, Abstände schnell und konsistent
   zu vergeben – sowohl in Grid- als auch Flex-Kontexten.

   Standard:
   - gap-md für Formulare und kompakte UI
   - gap-lg für Seitenabschnitte und größere Layouts
   - gap-sm für enge Toolbars oder kleine Controls
   - gap-xl oder gap-2xl nur für große vertikale Abschnitte
   ========================================================= */


.gap-md  { gap: var(--space-md); }
.gap-lg  { gap: var(--space-lg); }
.gap-sm  { gap: var(--space-sm); }
.gap-xl  { gap: var(--space-xl); }

.gap-2xs { gap: var(--space-2xs); }
.gap-xs  { gap: var(--space-xs); }
.gap-2xl { gap: var(--space-2xl); }
   

/* ---------------------------------------------------------
   Container
   ---------------------------------------------------------
   Container begrenzen die Inhaltsbreite und geben innen
   einen konsistenten horizontalen Abstand.
   --------------------------------------------------------- */
   
.container {
  width: min(100%, 1200px);
  margin-inline: auto;
  padding-inline: var(--space-lg);
}

.container-wide {
  width: min(100%, 1440px);
  margin-inline: auto;
  padding-inline: var(--space-lg);
}

.full-width {
  width: 100%;
}

/* ---------------------------------------------------------
   Grid-Basis
   ---------------------------------------------------------
   Diese Klassen sind für größere Seitenbereiche gedacht,
   also z. B. Content + Sidebar oder gleich breite Spalten.
   --------------------------------------------------------- */
.grid {
  display: grid;
}

/* Panoo Standard Aufteilung  */
.grid-main-sidebar-fixed {
  grid-template-columns: minmax(0, 1fr) 285px;
}

/* Panoo Standard Aufteilung flexible - wird evtl. nicht gebraucht  */
.grid-main-sidebar {
  grid-template-columns: 5fr 2fr;
}

/* 100% */
.grid-1 {
  grid-template-columns: 1fr;
}

/* 50% / 50% */
.grid-2 {
  grid-template-columns: 1fr 1fr;
}

/* 1/4 + 2/4 + 1/4 */
.grid-1-2-1 {
  grid-template-columns: 1fr 2fr 1fr;
}

/* 2/3 + 1/3 */
.grid-2-1 {
  grid-template-columns: 2fr 1fr;
}

/* 1/3 + 2/3 */
.grid-1-2 {
  grid-template-columns: 1fr 2fr;
}


/* Hilfsklassen, wenn ein Element mehrere Spalten belegen soll */
.col-span-2 {
  grid-column: span 2;
}

.col-span-3 {
  grid-column: span 3;
}


/* =========================================================
   6. UTILITIES
   ---------------------------------------------------------
   Innenlayout für Komponenten

   Faustregel:
   - Grid = große Layoutflächen und Spalten
   - Flex = Innenlayout von Komponenten
   ========================================================= */

/* ---------------------------------------------------------
   Flex-Basis
   ---------------------------------------------------------
   Flex ist vor allem für das Innenlayout von Komponenten
   gedacht: Toolbars, Button-Gruppen, Kartenköpfe, Listen.
   --------------------------------------------------------- */
.flex {
  display: flex;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.flex-1 {
  flex: 1 1 auto;
}

.flex-none {
  flex: 0 0 auto;
}

/* Ausrichtung */
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }

.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }

/* ---------------------------------------------------------
   State Utilities
   ---------------------------------------------------------
   Universelle Klassen für JS-gesteuerte Zustände.
   --------------------------------------------------------- */
.is-hidden  { display: none  !important; }
.is-visible { display: block !important; }

/* ---------------------------------------------------------
   Responsive Verhalten
   ---------------------------------------------------------
   Unter 800px werden die mehrspaltigen Raster automatisch
   einspaltig, damit die Layouts mobil lesbar bleiben.
   --------------------------------------------------------- */
@media (max-width: 800px) {
  .grid-main-sidebar-fixed,
  .grid-main-sidebar,
  .grid-2,
  .grid-1-2-1,
  .grid-2-1,
  .grid-1-2 {
    grid-template-columns: 1fr;
  }

  .col-span-2,
  .col-span-3 {
    grid-column: auto;
  }
}