/* Helles, seriöses Theme mit Deutsche-Post-Anmutung */
:root{
  --bg:#fffef8;            /* sehr hell, leicht warm */
  --card:#ffffff;          /* Karten/Panele */
  --muted:#606771;         /* Sekundärtext */
  --text:#1a1d21;          /* Primärtext */
  --brand:#FFCC00;         /* Deutsche Post Gelb */
  --brand-ink:#111111;     /* Kontrast/Schwarz */
  --accent:#996A00;        /* dunkler Gelbton für Hover/Fokus */
  --ok:#1e7f2d;
  --border:#e6e8ec;        /* zarte Rahmenfarbe */
  --surface:#fff9d6;       /* zarte gelbe Fläche (Header/Tables) */
  --shadow:0 8px 24px rgba(17,17,17,.06);
  --danger:#b00020;          /* Fehlermeldungen */
  --danger-bg:#ffe6e9;       /* zarter Rotton im Hintergrund */
}

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.container{max-width:1100px;margin:0 auto;padding:0 20px}

/* Header */
.site-header{
  position:sticky;top:0;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.head-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;gap:12px;align-items:center}
.logo{
  width:36px;height:36px;border-radius:10px;
  background:linear-gradient(135deg,var(--brand),#ffd84d);
  display:grid;place-items:center;font-weight:800;color:var(--brand-ink);
  box-shadow:0 6px 18px rgba(255,204,0,.25);
  border:1px solid #ffe27a;
}
.brand-name{font-size:18px;color:var(--brand-ink);font-weight:700}
.brand-slogan{color:var(--muted);font-size:12px;display:block;margin-top:2px}
.nav a{
  color:var(--muted);text-decoration:none;margin-left:16px;
  padding:6px 8px;border-radius:8px;transition:background .15s ease,color .15s ease;
}
.nav a:hover{background:#fff3b8;color:#3a3a3a}

/* Hinweise/Flash */
.flash{
  background:#fff8db;color:#7a5d00;border:1px solid #ffd24d;
  padding:10px;border-radius:10px;margin:14px 0
}


.rounded-box {
  background-color:#ffcc00;
  border-radius: 6px;        /* Ecken abrunden */
  padding: 3px 10px;         /* Innenabstand: oben/unten 12px, links/rechts 16px */
  display: inline-block;      /* Damit sich das Element an den Inhalt anpasst */
  width: 100%;
}
/* Hero */
.hero { padding: 42px 0; border-bottom: 1px solid var(--border); }

/* 2-spaltiges Grid, Inhalte vertikal mittig ausrichten */
.hero-inner{
  display: grid;
  grid-template-columns: 1.3fr .9fr;
  gap: 28px;
  align-items: center;       /* vertikale Mitte: hero-copy ↔ hero-card */
  justify-items: stretch;    /* volle Breite je Spalte, Card kann 100% nutzen */
}

/* Illustration + Copy: horizontal zentrieren */
.hero-copy{
  display: grid;             /* ermöglicht zentrierte Platzierung ohne Flex */
  justify-items: center;     /* Illustration/Text zentrieren */
  align-content: center;
  text-align: left;
}

/* Illustration im Karten-Stil – gleiche Optik wie .hero-card */
.hero-illustration{
  margin: 0 0 1.25rem 0;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  padding: 12px;
  width: min(360px, 80%);
  justify-self: center;      /* explizit im Grid zentrieren */
}

.hero-illustration img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* Falls du .hero-image verwendest (optional, bleibt zentriert) */
.hero-image{
  width: 50%;
  max-width: 500px;
  height: auto;
  display: block;
  margin: 0 auto 1.5rem auto; /* horizontal zentriert */
  border-radius: 0.75rem;
}

/* Text etwas aufgelockert */
.hero-copy h1{
  margin-top: .5rem;
  font-size: 2rem;
}

/* Card optisch */
.hero-card{
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 0 20px rgba(0,0,0,0.05);
  padding: 2rem;
  height: 100%;              /* darf volle Zeilenhöhe nutzen */
}

.rounded-box{
  background-color: #ffcc00;
  border-radius: 6px;
  padding: 3px 10px;
  display: inline-block;
  width: 100%;
}

.hero-card h2{ margin-top: 0; color: var(--brand-ink); }
.hero-card h3{ color: var(--brand-ink); }

/* 💡 Responsive Breakpoints – weiterhin Grid, nicht Flex */
@media (max-width: 992px){
  .hero-inner{
    grid-template-columns: 1fr;   /* einspaltig */
    justify-items: center;        /* alles zentriert */
  }

  .hero-copy, .hero-card{
    width: min(90%, 600px);
  }

  .hero-card{
    margin-top: 1rem;
  }

  .hero-illustration,
  .hero-image{
    width: 80%;
    max-width: 400px;
  }
}

@media (max-width: 576px){
  .hero{ padding: 2rem 1rem; }

  .hero-illustration,
  .hero-image{
    width: 90%;
    max-width: 320px;
  }

  .hero-copy h1{ font-size: 1.6rem; }
}

/* Typografie-/Abstands-Feintuning */
.hero-copy h1{ margin-top: .25rem; }

/* Formulare */
.form-grid .grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-grid label{display:grid;gap:6px;font-size:14px;color:var(--muted)}
.form-grid input,.form-grid select{
  width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--border);
  background:#ffffff;color:var(--text);outline:none;transition:border-color .15s, box-shadow .15s
}
.form-grid input:focus,.form-grid select:focus{
  border-color:#ffd24d;
  box-shadow:0 0 0 3px rgba(255,204,0,.35)
}
.checkline{display:flex;gap:8px;align-items:center;margin-top:8px}

/* Aktionen/Buttons */
.actions{display:flex;gap:10px;align-items:center;margin-top:10px}
button{
  padding:10px 14px;border-radius:10px;border:1px solid #e0b300;
  background:linear-gradient(135deg,var(--brand),#ffd84d);
  color:var(--brand-ink);font-weight:700;cursor:pointer;
  box-shadow:0 6px 18px rgba(255,204,0,.25);
  transition:filter .12s ease, transform .06s ease, box-shadow .12s ease;
  width: 100%;
}
button:hover{filter:brightness(.98)}
button:active{transform:translateY(1px)}
button.secondary{
  background:#ffffff;border-color:var(--border);color:var(--text);
  box-shadow:0 4px 14px rgba(17,17,17,.05)
}

/* Hinweise unter Inputs */
.form-hint{color:var(--muted);font-size:12px;margin-top:8px}

/* USPs / Kacheln */
.usp{padding:28px 0}
.usp-inner{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.usp-box{
  background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;color:var(--muted);
  box-shadow:var(--shadow)
}

/* Footer */
.site-footer{border-top:1px solid var(--border);margin-top:40px;background:#fff}
.foot-inner{display:flex;justify-content:space-between;align-items:center;padding:18px 0;color:var(--muted)}

/* Generische Panels */
.panel{
  background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px;margin:16px 0;box-shadow:var(--shadow)
}

/* Code/Pre */
pre{
  white-space:pre-wrap;word-break:break-word;background:#f6f8fa;border:1px solid var(--border);
  padding:12px;border-radius:10px;color:#0f172a
}

/* Links */
.linklike{color:#0b3d91;text-decoration:none;margin-left:10px}
.linklike:hover{text-decoration:underline}

/* Tabellen */
.table{
  display:grid;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#fff;overflow-x:auto; font-size: smaller; 
}

.thead,
.trow{
  display:grid;
  grid-template-columns:
    80px            /* ID */
    120px           /* Typ */
    160px           /* Status */
    160px           /* Aktenzeichen Label */
    minmax(160px,1fr)  /* Aktenzeichen Wert lang? */
    200px           /* Erstellt */
    160px           /* E-Mail Status */
    160px           /* E-Mail Verschickt */
    minmax(160px,1fr)  /* E-Mail Fehler kann lang sein */
    120px;          /* Aktionen (Details) */
}
.thead{
  background:var(--surface);
  color:#262b30;font-weight:700;border-bottom:1px solid var(--border)
}
.thead>div,.trow>div{padding:10px;border-bottom:1px solid var(--border)}
.trow:nth-child(even){background:#fafbfc}

/* Key/Value Blöcke */
.kv{
  display:grid;grid-template-columns:200px 1fr;gap:10px;background:var(--card);
  border:1px solid var(--border);border-radius:12px;padding:12px;margin:16px 0;box-shadow:var(--shadow)
}

/* Rechtstexte */
.legal h1{margin-bottom:6px;color:var(--brand-ink)}
.legal p,.legal li{color:var(--text)}

/* Responsiv */
@media (max-width: 900px){
  .hero-inner{grid-template-columns:1fr}
  .form-grid .grid{grid-template-columns:1fr}
  .thead,.trow{grid-template-columns:1fr 1fr}
}

/* Optional: Fokus-sichtbare Skip-Links/Outline für Tastaturbenutzer */
:focus-visible{
  outline:3px solid rgba(255,204,0,.65);
  outline-offset:2px;
}

/* Optional: zarter gelber Headerstreifen (Corporate Touch) */
.site-header::after{
  content:"";display:block;height:2px;background:var(--brand);
  position:absolute;left:0;right:0;bottom:-1px
}

.form-grid label.checkline {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.form-grid label.checkline input[type="checkbox"] {
  width: auto;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
}
.form-grid label.checkline > span { 
  line-height: 1.4; 
  font-size: 12px;
}

.hinweis {
  font-size: 14px;
}

.form-grid .grid label.full {
  grid-column: 1 / -1; /* Nimmt die gesamte Breite (beide Spalten) ein */
}

/* Container-Basis */
.usp {
  padding: clamp(32px, 6vw, 72px) 0;
  background: #fafafa;
}

.usp .usp-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2.5vw, 28px);
  align-items: stretch;
}

/* Boxen */
.usp .usp-box {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 16px;
  padding: clamp(16px, 2.5vw, 28px);
  text-align: left;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.usp .usp-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  border-color: #e5e7eb;
}

/* Icons */
.usp .usp-box i {
  font-size: 28px;
  line-height: 1;
  display: inline-block;
  margin-bottom: 12px;
  /* neutrale Farbe – passt zu beiden Tönen */
  color: #ffcc00; /* Tailwind sky-500 Anmutung */
}

/* Typo */
.usp .usp-box h3 {
  margin: 4px 0 8px;
  font-size: clamp(18px, 1.4vw, 20px);
  font-weight: 700;
  letter-spacing: .2px;
  color: #0f172a; /* slate-900 */
}

.usp .usp-box p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #334155; /* slate-700 */
}

/* Responsivität */
@media (max-width: 1100px) {
  .usp .usp-inner { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .usp .usp-inner { grid-template-columns: 1fr; }
}

/* Dark Mode (optional) */
@media (prefers-color-scheme: dark) {
  .usp { background: #0b1220; }
  .usp .usp-box {
    background: #0f172a;
    border-color: #1f2937;
    box-shadow: 0 2px 12px rgba(0,0,0,0.4);
  }
  .usp .usp-box h3 { color: #e5e7eb; }
  .usp .usp-box p { color: #cbd5e1; }
  .usp .usp-box i { color: #38bdf8; }
}

input::-webkit-contacts-auto-fill-button, 
input::-webkit-credentials-auto-fill-button {
  visibility: hidden;
  position: absolute;
  right: 0;
}

/* ============================
   Adressgrid-Layout
   ============================ */
.address-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;       /* stabilisiert die Ausrichtung */
}

.address-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.address-grid .full-width {
  grid-column: 1 / -1;
}

/* Container soll Kontext für absolute Position bieten */
.address-grid label:first-of-type {
  position: relative;
}

/* Hinweis positioniert sich absolut unter der PLZ-Eingabe */
.coverage-hint {
  color: #c00;
  font-size: 0.9em;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none; /* verhindert Klicks */
}

/* Optional: etwas mehr Platz unterhalb der PLZ-Zeile */
.address-grid label:first-of-type {
  margin-bottom: 1.5em;
}

/* PLZ-Label ist Anker für absolute Positionierung */
.address-grid label.has-coverage-hint {
  position: relative;
  margin-bottom: 1.5em; /* Platz für den absolut positionierten Hinweis */
}

/* Optik des Hinweises (Position kommt aus JS) */
.coverage-hint {
  color: #c00;
  font-size: 0.9em;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
}

button:disabled,
button[disabled],
button.primary:disabled {
  background: #e0e0e0;        /* hellgrau */
  color: #888888;             /* Text etwas dunkler */
  border-color: #cccccc;
  box-shadow: none;           /* Schatten entfernen */
  cursor: not-allowed;        /* visuelles Feedback */
  filter: none;
  transform: none;
}

/* allgemeine Fehlermeldung unter einem Feld */
.form-error {
  display:none;              /* standardmäßig ausgeblendet, JS zeigt es an */
  margin-top:6px;
  padding:8px 2px;
  border-radius:8px;
  font-size:12px;
  line-height:1.5;
  color:var(--danger);
  background:var(--danger-bg);
  border:1px solid rgba(176,0,32,0.3);
  align-items:flex-start;
  gap:6px;
  grid-column: 1 / -1; 
  column-count: 1 !important;
}

/* kleines Icon vor dem Text (Pseudo-Icon, kein echtes <i> nötig) */
.form-error::before{
  content:"!";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  margin-top:2px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  background:var(--danger);
  color:#fff;
}

.form-error.is-visible{
  display:flex;
}

/* falls du es z.B. unterhalb der Adress-Section enger haben willst */
.address-grid + .form-error{
  margin-top:8px;
}

.faq-accordion {
  border-top: 1px solid #e0e0e0;
}

.faq-item {
  border-bottom: 1px solid #e0e0e0;
}

.faq-question {
  width: 100%;
  padding: 0.85rem 1rem;
  background: #f8f9fa;
  border: none;
  outline: none;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}

.faq-question:hover {
  background: #f1f3f5;
}

.faq-question[aria-expanded="true"] {
  background: #e9f2ff;
}

.faq-icon {
  font-weight: 700;
  font-size: 1.2rem;
}

.faq-panel {
  padding: 0.75rem 1rem 1rem;
  font-size: 0.95rem;
  line-height: 1.5;
  background: #fff;
}

.actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 420px;
}

.actions-row {
  display: flex;
  gap: 12px;
}

button.primary {
  background-color: #2563eb;
  /* color: white; */
  padding: 12px 18px;
  border-radius: 8px;
  border: none;
  font-size: 16px;
  cursor: pointer;
  font-weight: 600;
}

button.primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

button.secondary, a.secondary {
  background-color: #f3f4f6;
  color: #111827;
  padding: 12px 18px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  font-size: 16px;
  cursor: pointer;
  font-weight: 500;
  text-decoration: none;
  display: inline-block;
}

button.secondary:hover,
a.secondary:hover {
  background-color: #e5e7eb;
}

.info-box {
  margin: 1rem 0 1.5rem;
  padding: 0.9rem 1.1rem;
  border-radius: 8px;
  border: 1px solid #ffeaa7;
  background: #fffdf4;
}
.info-box .muted {
  font-size: 0.9rem;
  color: #666;
}

.main {
  /*background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("/static/images/bg.png"); */
}

/* ============================
   Flatpickr Theme Anpassung
   ============================ */
.flatpickr-calendar {
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  border-radius: 14px;
  overflow: hidden;
  font-family: inherit;
}

.flatpickr-months {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.flatpickr-current-month,
.flatpickr-monthDropdown-months,
.flatpickr-weekdays {
  color: var(--brand-ink);
}

.flatpickr-weekday {
  color: var(--muted);
  font-weight: 600;
}

.flatpickr-day {
  border-radius: 10px;
}

.flatpickr-day:hover {
  background: #fff3b8;
  border-color: #fff3b8;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-ink);
  font-weight: 700;
}

.flatpickr-day.today {
  border-color: #ffd24d;
}

.flatpickr-day.today:hover {
  background: #fff3b8;
  border-color: #fff3b8;
}

.flatpickr-time input,
.flatpickr-time .flatpickr-am-pm {
  border-radius: 10px;
  border: 1px solid var(--border);
}

/* Pfeile / Navigation */
.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg {
  fill: var(--accent);
}

/* Optional: Kalenderbreite etwas kompakter */
.flatpickr-calendar {
  width: 320px;
}

/* Gesamtgröße */
.flatpickr-calendar {
  width: 280px;                 /* vorher ~320px */
  font-size: 13px;
}

/* Monats-/Headerbereich */
.flatpickr-months {
  padding: 6px 8px;
}

.flatpickr-current-month {
  font-size: 14px;
  font-weight: 600;
}

/* Wochentage */
.flatpickr-weekdays {
  height: 28px;
}

.flatpickr-weekday {
  font-size: 11px;
  line-height: 28px;
}

/* Tageszellen */
.flatpickr-day {
  height: 32px;
  line-height: 32px;
  max-width: 32px;
  font-size: 12px;
}

/* Heute / Auswahl etwas dezenter */
.flatpickr-day.today {
  border-width: 1px;
}

.flatpickr-day.selected {
  box-shadow: none;
}

/* Pfeile kleiner */
.flatpickr-prev-month svg,
.flatpickr-next-month svg {
  width: 12px;
  height: 12px;
}

/* Abstand unten reduzieren */
.flatpickr-innerContainer {
  padding-bottom: 6px;
}

/* Dropdowns im Header optisch wie deine Inputs */
.flatpickr-monthDropdown-months,
.numInput.cur-year {
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 8px;
  background: #fff;
  color: var(--text);
}

.flatpickr-monthDropdown-months:focus,
.numInput.cur-year:focus {
  font-family: inherit;
  border-color: #ffd24d;
  box-shadow: 0 0 0 3px rgba(255,204,0,.35);
  outline: none;
}

/* Monat-Dropdown */
.flatpickr-monthDropdown-months {
  font-family: inherit !important;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--brand-ink);
  background-color: #fff;
}

/* Jahr-Eingabe */
.flatpickr-current-month input.cur-year {
  font-family: inherit !important;
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-ink);
}

/* Dropdown-Optionen (wichtig für Firefox/Chrome) */
.flatpickr-monthDropdown-months option {
  font-family: inherit !important;
  font-size: 14px;
}