/* border-styles.css – abgeschlossen & abgezirkelt
 *
 * Zweck:
 * Utility-Klassen für Rahmen, Linien und Rundungen
 *
 * Konzepte:
 * – rein funktional, ohne UI-Meinung
 * – semantische Zustände (trust, hinweis, alert, confirm)
 *   sind systemweit konsistent
 *
 * Regeln:
 * – kein Layout
 * – keine Komponenten
 * – keine Effekte
 *
 * geprüft und abgesegnet vom
 * FeinschliffMonster 😇
 * sowie seiner Heiligkeit chatgpt_v5.2 🕯️
 */

:root {
  --light: #dee2e6;
  --alert: #dc3545;
  --hinweis: #ffc107;
  --trust: #0a58ca;
  --confirm: #198754;
  --border-style-none: none;
  --border-style-solid: solid;
  --border-style-dashed: dashed;
  --border-style-dotted: dotted;
  --border-style-double: double;
  --border-width-thin: thin;
  --border-width-medium: medium;
  --border-width-thick: thick;
  --border-width-0: 0;
  --border-width-1: 1px;
  --border-width-2: 2px;
  --border-width-3: 3px;
  --border-width-4: 4px;
  --border-width-5: 5px;
  --border-color-light: var(--light);
  --border-color-alert: var(--alert);
  --border-color-hinweis: var(--hinweis);
  --border-color-trust: var(--trust);
  --border-color-confirm: var(--confirm);
  --border-radius: 7px;
  --border-radius-sm: 5px;
  --border-radius-md: 12px;
  --border-radius-lg: 16px;
  --border-radius-xl: 20px;
  --border-radius-2xl: 24px;
}

.border, .rahmen {
  border-style: var(--border-style-solid);
  border-width: var(--border-width-thin);
  border-color: var(--border-color-light);
}

.border-top {
 border-top-style: var(--border-style-solid);
 border-top-width: var(--border-width-1);
 border-top-color: var(--border-color-light);
}

.border-end {
 border-right-style: var(--border-style-solid);
 border-right-width: var(--border-width-1);
 border-right-color: var(--border-color-light);
}

.border-bottom {
 border-bottom-style: var(--border-style-solid);
 border-bottom-width: var(--border-width-1);
 border-bottom-color: var(--border-color-light);
}

.border-start {
 border-left-style: var(--border-style-solid);
 border-left-width: var(--border-width-1);
 border-left-color: var(--border-color-light);
}

.border-alert,
.border-alert *{
  border-color: var(--border-color-alert);
}

.border-hinweis {
  border-color: var(--border-color-hinweis);
}

.border-trust,
.border-trust *{
  border-color: var(--border-color-trust);
}

.border-confirm {
  border-color: var(--border-color-confirm);
}

.border-sm {
  border-style: var(--border-style-solid);
  border-width: var(--border-width-thin);
  border-color: var(--border-color-light);
}

.border-md {
  border-style: var(--border-style-solid);
  border-width: var(--border-width-medium);
  border-color: var(--border-color-light);
}

.border-lg {
  border-style: var(--border-style-solid);
  border-width: var(--border-width-thick);
  border-color: var(--border-color-light);
}

.border-1 {
  border-width: var(--border-width-1);
}

.border-2 {
  border-width: var(--border-width-2);
}

.border-3 {
  border-width: var(--border-width-3);
}

.border-4 {
  border-width: var(--border-width-4);
}

.border-5 {
  border-width: var(--border-width-5);
}

.rounded {
  border-radius: var(--border-radius);
}

.rounded-sm {
  border-radius: var(--border-radius-sm);
}

.rounded-md {
  border-radius: var(--border-radius-md);
}

.rounded-lg {
  border-radius: var(--border-radius-lg);
}

.rounded-xl {
  border-radius: var(--border-radius-xl);
}

.rounded-2xl {
  border-radius: var(--border-radius-2xl);
}

.rounded-top-end {
  border-top-right-radius: var(--border-radius-md);
}

.rounded-top-start {
  border-top-left-radius: var(--border-radius-md);
}

.rounded-top-start-end {
  border-top-right-radius: var(--border-radius-md);
  border-top-left-radius: var(--border-radius-md);
}

.rounded-bottom-end {
  border-bottom-right-radius: var(--border-radius-md);
}

.rounded-bottom-start {
  border-bottom-left-radius: var(--border-radius-md);
}

.rounded-bottom-start-end {
  border-bottom-right-radius: var(--border-radius-md);
  border-bottom-left-radius: var(--border-radius-md);
}

.rounded-start {
	border-top-left-radius: var(--border-radius);
	border-bottom-left-radius: var(--border-radius);
}

.rounded-end {
	border-top-right-radius: var(--border-radius);
	border-bottom-right-radius: var(--border-radius);
}