@font-face {
  font-family: 'Ubuntu';
  src: url('./fonts/ubuntu/Ubuntu-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Ubuntu';
  src: url('./fonts/ubuntu/Ubuntu-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Ubuntu';
  src: url('./fonts/ubuntu/Ubuntu-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Ubuntu';
  src: url('./fonts/ubuntu/Ubuntu-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Ubuntu';
  src: url('./fonts/ubuntu/Ubuntu-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Ubuntu';
  src: url('./fonts/ubuntu/Ubuntu-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Ubuntu';
  src: url('./fonts/ubuntu/Ubuntu-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Ubuntu';
  src: url('./fonts/ubuntu/Ubuntu-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

body {
  font-family: 'Ubuntu', Arial, sans-serif;
}

:root{
  /* Farbpalette */
  --le-bg: #121417;
  --le-surface-1: #181C21;
  --le-surface-2: #20252C;
  --le-border: #2B313A;

  --le-text: #F3EFE8;
  --le-text-muted: #B8B0A6;

  --le-accent: #7B1E2B;
  --le-accent-hover: #942336;
  --le-accent-dark: #5C1620;

  /* Allgemeine Tokens */
  --le-radius: 10px;
  --le-radius-sm: 8px;
  --le-radius-lg: 16px;

  --le-shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.28);
  --le-shadow-card: 0 14px 40px rgba(0, 0, 0, 0.32);
  --le-shadow-accent: 0 10px 28px rgba(123, 30, 43, 0.30);

  --le-transition: 220ms ease;
  --le-container: 1280px;
}

/* Basis */
html{
  color-scheme: dark;
  scroll-behavior: smooth;
}

body{
  background: var(--le-bg);
  color: var(--le-text);
}

body,
input,
textarea,
select,
button{
  color: var(--le-text);
}

/* Typografie */
h1, h2, h3, h4, h5, h6{
  color: var(--le-text);
  line-height: 1.15;
}

p,
li,
blockquote,
label{
  color: var(--le-text-muted);
}

strong,
b{
  color: var(--le-text);
}

small,
.le-text-muted{
  color: var(--le-text-muted);
}

/* Links */
a{
  color: var(--le-text);
  text-decoration-color: rgba(243, 239, 232, 0.25);
  transition:
    color var(--le-transition),
    text-decoration-color var(--le-transition),
    opacity var(--le-transition);
}

a:hover{
  color: var(--le-text);
  text-decoration-color: rgba(243, 239, 232, 0.55);
}

/* Layout-Helfer */
.le-container{
  width: 100%;
  max-width: var(--le-container);
  margin: 0 auto;
}

.le-section{
  background: var(--le-bg);
  color: var(--le-text);
}

.le-surface-1{
  background: var(--le-surface-1);
  border: 1px solid var(--le-border);
  border-radius: var(--le-radius);
}

.le-surface-2{
  background: var(--le-surface-2);
  border: 1px solid var(--le-border);
  border-radius: var(--le-radius);
}

/* Karten / Boxen */
.le-card{
  background: linear-gradient(180deg, var(--le-surface-1) 0%, var(--le-surface-2) 100%);
  border: 1px solid var(--le-border);
  border-radius: var(--le-radius);
  box-shadow: var(--le-shadow-card);
}

.le-card--flat{
  background: var(--le-surface-1);
  border: 1px solid var(--le-border);
  border-radius: var(--le-radius);
}

/* Linien / Trenner */
hr,
.le-divider{
  border: 0;
  border-top: 1px solid var(--le-border);
}

/* Tags / kleine UI-Elemente */
.le-tag{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 6px 12px;
  background: rgba(123, 30, 43, 0.14);
  color: var(--le-text);
  border: 1px solid rgba(123, 30, 43, 0.34);
  border-radius: 999px;
}

/* Buttons */
/* Nutze idealerweise überall die Klasse .le-btn bzw. .le-btn--ghost */
.le-btn,
button.le-btn,
input[type="submit"].le-btn,
.et_pb_button.le-btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 20px;
  border: 1px solid var(--le-accent);
  border-radius: 10px;
  background: var(--le-accent);
  color: var(--le-text) !important;
  text-decoration: none;
  box-shadow: var(--le-shadow-accent);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition:
    background var(--le-transition),
    border-color var(--le-transition),
    box-shadow var(--le-transition),
    transform var(--le-transition);
}

.le-btn::before,
button.le-btn::before,
input[type="submit"].le-btn::before,
.et_pb_button.le-btn::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      120deg,
      transparent 0%,
      rgba(255,255,255,0.08) 20%,
      rgba(255,255,255,0.18) 35%,
      transparent 55%
    );
  transform: translateX(-130%);
  transition: transform 420ms ease;
}

.le-btn:hover,
button.le-btn:hover,
input[type="submit"].le-btn:hover,
.et_pb_button.le-btn:hover{
  background: var(--le-accent-hover);
  border-color: var(--le-accent-hover);
  box-shadow:
    0 14px 34px rgba(123, 30, 43, 0.42),
    0 0 0 1px rgba(255,255,255,0.04) inset;
  transform: translateY(-1px);
}

.le-btn:hover::before,
button.le-btn:hover::before,
input[type="submit"].le-btn:hover::before,
.et_pb_button.le-btn:hover::before{
  transform: translateX(130%);
}

.le-btn:active,
button.le-btn:active,
input[type="submit"].le-btn:active,
.et_pb_button.le-btn:active{
  transform: translateY(0);
  background: var(--le-accent-dark);
  border-color: var(--le-accent-dark);
}

.le-btn:focus-visible,
button.le-btn:focus-visible,
input[type="submit"].le-btn:focus-visible,
.et_pb_button.le-btn:focus-visible{
  outline: 2px solid rgba(243, 239, 232, 0.75);
  outline-offset: 3px;
}

/* Sekundärer Button */
.le-btn--ghost,
button.le-btn--ghost,
input[type="submit"].le-btn--ghost,
.et_pb_button.le-btn--ghost{
  background: transparent;
  color: var(--le-text) !important;
  border: 1px solid var(--le-border);
  box-shadow: none;
}

.le-btn--ghost:hover,
button.le-btn--ghost:hover,
input[type="submit"].le-btn--ghost:hover,
.et_pb_button.le-btn--ghost:hover{
  background: var(--le-surface-2);
  border-color: var(--le-accent);
  box-shadow: 0 10px 24px rgba(0,0,0,0.22);
}

/* Formulare */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="password"],
input[type="number"],
textarea,
select{
  width: 100%;
  background: var(--le-surface-1);
  color: var(--le-text);
  border: 1px solid var(--le-border);
  border-radius: 10px;
  transition:
    border-color var(--le-transition),
    box-shadow var(--le-transition),
    background var(--le-transition);
}

input::placeholder,
textarea::placeholder{
  color: color-mix(in srgb, var(--le-text-muted) 78%, transparent);
}

input:focus,
textarea:focus,
select:focus{
  outline: none;
  border-color: rgba(123, 30, 43, 0.9);
  box-shadow:
    0 0 0 3px rgba(123, 30, 43, 0.18),
    0 8px 22px rgba(0,0,0,0.18);
  background: var(--le-surface-2);
}

/* Auswahl / Markierung */
::selection{
  background: rgba(123, 30, 43, 0.85);
  color: var(--le-text);
}

/* Bilder / Medien */
img{
  max-width: 100%;
  height: auto;
}

/* Tabellen */
table{
  width: 100%;
  border-collapse: collapse;
  background: var(--le-surface-1);
  border: 1px solid var(--le-border);
  border-radius: var(--le-radius);
  overflow: hidden;
}

th,
td{
  border-bottom: 1px solid var(--le-border);
  color: var(--le-text-muted);
}

th{
  color: var(--le-text);
  background: var(--le-surface-2);
}

/* Optional: globale Section-Flächen */
.le-panel{
  background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.00) 100%), var(--le-surface-1);
  border: 1px solid var(--le-border);
  border-radius: 10px;
  box-shadow: var(--le-shadow-soft);
}