/* 1) Box-Sizing überall auf border-box setzen */
*, *::before, *::after {
  box-sizing: border-box;
}

a:link,
a:visited {
  color: #003366;
}

a:active {
  color: #003366;
}

body.startseite {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    background: #f9f9f9;
    color: #333;
}

.site-header {
    background-color: #003366;
    color: white;
    padding: 1.5em 1em;
    display: flex;
    align-items: center;
    gap: 1.5em;
    justify-content: center;
    width: 100%;
}

.logo {
    height: 100px;
    object-fit: contain;
}

/* Text-Container: in eine Spalte setzen */
.site-header .header-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;  /* linksbündig innerhalb des Containers */
  line-height: 1.1;         /* engerer Zeilenabstand für H1/Subtitel */
}

/* -------------------------------
   1) Haupttitel (sans-serif, elegant)
   ------------------------------- */
.site-header .header-text h1 {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 2rem;            /* ca. 32 px */
  font-weight: 500;           /* Medium, nicht zu fett */
  margin: 0;
  letter-spacing: 0.5px;      /* dezenter Abstand zwischen Buchstaben */
  text-transform: none;       /* normale Groß-/Kleinschreibung */
  color: #ffffff;
  line-height: 1.1;
}

/* -------------------------------
   2) Untertitel (leicht, kursiv)
   ------------------------------- */
.site-header .header-text .subtitle {
  font-family: system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;            /* ca. 16 px */
  font-weight: 300;           /* Light */
  margin: 0.2em 0 0 0;        /* kleiner Abstand zum Titel */
  color: #dde7f0;             /* dezentes Hellblau/Grau */
  letter-spacing: 0.2px;      /* feine Spationierung */
  font-style: italic;         /* leichter Kursiv-Effekt */
}

/* -------------------------------
   3) Responsive Anpassung
   ------------------------------- */
@media screen and (max-width: 480px) {
  .site-header .header-text h1 {
    font-size: 1.6rem;        /* ca. 25 px */
    letter-spacing: 0.3px;
  }
  .site-header .header-text .subtitle {
    font-size: 0.9rem;        /* ca. 14 px */
  }
}


.layout-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 3em;
    padding: 2em;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}

.seitlich-panel {
    width: 280px;
    flex-shrink: 0;
    background: white;
    padding: 1.5em;
    border-radius: 6px;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
    align-self: flex-start;
}

.form2-error {
    color: red;
}

.forgot-link {
  color: #555; /* dezentes Grau */
  text-decoration: none;
  font-size: 0.95em;
  font-weight: normal;
}

.forgot-link:hover {
  text-decoration: underline;
  color: #000; /* oder z. B. ein dezenter Blau-Ton */
}

.inhalt-bereich {
    flex: 1;
    max-width: 800px;
    display: flex;
    flex-direction: column;
    gap: 2em;
}

.seiten-footer {
  margin-top: 1em;
  padding: 1.5em 0;
  background-color: #003366;  /* exakt wie .site-header */
  color: white;
  text-align: center;
  font-size: 0.85em;
  border-top: 3px solid #002244;
}

.seiten-footer a {
  color: #dde7f0;  /* gleich wie .subtitle im Header */
  text-decoration: none;
  margin: 0 0.75em;
  font-weight: bold;
}

.seiten-footer a:hover {
  color: white;
  text-decoration: underline;
}

.vin-suche,
.vin-ergebnisse {
    background: white;
    padding: 1.5em;
    border-radius: 6px;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
    width: 100%;
    box-sizing: border-box;
}

form label {
    display: block;
    margin-top: 1em;
    font-weight: bold;
}

form input,
form button {
    width: 100%;
    padding: 0.5em;
    margin-top: 0.25em;
    box-sizing: border-box;
}

/* Breite der Textspalte für bündige Checkbox-Spalte */
.service-form fieldset { --svc-text-col: 260px; }

.service-form .service-group > label.svc{
  display: grid;
  grid-template-columns: var(--svc-text-col) auto; /* Text | Box */
  align-items: center;
  column-gap: .5rem;
}

.service-form .service-group > label.svc > input[type="checkbox"]{
  grid-column: 2;
  justify-self: start;
  width: auto;
  margin: 0;
}

/* "Allgemeine Hinweise": gleiche Breite wie Checkboxbereich, doppelte Höhe */
.service-form #notes {
  max-width: calc(var(--svc-text-col) + 2.5rem); /* Text + Checkboxspalte + Abstand */
  width: 100%;
  box-sizing: border-box;
  min-height: 4em; /* bisher vermutlich ~2em, jetzt doppelt */
}

.service-form #vin + fieldset {
  margin-top: 1rem;
}

.info-icon {
    display: inline-block;
    width: 12px;
    height: 12px;
    line-height: 12px;
    border-radius: 50%;
    background-color: #003366; /* Hintergrundfarbe */
    color: #fff; /* Textfarbe */
    font-size: 12px;
    text-align: center;
    font-family: sans-serif;
    font-weight: bold;
    cursor: help;
    margin-left: 4px;
	vertical-align: middle; /* gleicht Höhe an Text aus */
	position: relative;
	top: -1px; /* optional Feinanpassung */
}
.info-icon:hover {
    background-color: #888; /* Hover-Farbe */
}

.service2-form #notes {
  max-width: calc(var(--svc-text-col) + 2.5rem); /* Text + Checkboxspalte + Abstand */
  width: 100%;
  box-sizing: border-box;
  min-height: 4em; /* bisher vermutlich ~2em, jetzt doppelt */
}

.service2-form #vin + fieldset {
  margin-top: 1rem;
}

form button {
    background-color: #003366;
    color: white;
    border: none;
    cursor: pointer;
    margin-top: 1em;
}

form button:hover {
    background-color: #00509e;
}

.pass-match {
    font-size: 0.9em;
    margin-top: 0.25em;
}

.match {
    color: green;
}

.mismatch {
    color: red;
}

.disabled {
    background: #ccc !important;
    cursor: not-allowed;
}

.form-error {
  display: none;    /* standardmäßig verstecken */
  color: red;
}


@media screen and (max-width: 768px) {
    .layout-container {
        flex-direction: column;
        align-items: center;
    }

    .seitlich-panel,
    .inhalt-bereich {
        width: 100%;
    }
}

.oklahoma {
    position: absolute;
    left: -9999px;
    top: -9999px;
    height: 0;
    width: 0;
    opacity: 0;
    pointer-events: none;
}

/* Fehlerfelder rot markieren */
input.error {
    border: 2px solid red;
}

/* Fehlermeldungen anzeigen */
.error-message {
    color: red;
    font-size: 12px;
    display: block;
    margin-top: 5px;  /* Abstand zwischen Eingabefeld und Fehlermeldung */
}

/* Keine leeren Fehlermeldungen anzeigen */
span.error-message {
    display: block;
}

.form-success {
  background-color: #dff0d8;   /* heller Grünton */
  border: 1px solid #3c763d;   /* dunkler Grünton für den Rahmen */
  color: #3c763d;              /* Text in dunklem Grün */
  padding: 0.75em 1em;
  margin-bottom: 1em;
  border-radius: 4px;
  font-weight: bold;
}

.readonly-field {
    background-color: #e9ecef;
    color: #6c757d;
}

/* services.php */

/* search.php */

/* ==============================
   Suchergebnis-Tabelle
   ============================== */

/* =====================================
   1) Grundstruktur: Rahmen, Abstand, Schrift
   ===================================== */
.results-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1em;
  font-family: Arial, sans-serif;
  font-size: 0.95rem;
}

/* =====================================
   2) Kopfzeile: Dunkelblauer Hintergrund, weiße Schrift
   ===================================== */
.results-table thead {
  background-color: #004080;
  color: white;
}

.results-table thead th {
  border: 1px solid #004080;
  padding: 0.75em 0.5em;
  text-align: left;
}

/* =====================================
   3) Zellenränder, Padding, vertikale Ausrichtung
   ===================================== */
.results-table td,
.results-table th {
  vertical-align: middle;
}

.results-table td {
  border: 1px solid #ddd;
  padding: 0.5em;
}

/* =====================================
   4) Zebra-Striping für die Zeilen
   ===================================== */
.results-table tbody tr:nth-child(even) {
  background-color: #f7faff;
}

/* =====================================
   5) Hover-Effekt für Zeilen
   ===================================== */
.results-table tbody tr:hover {
  background-color: #e6f2ff;
}

/* =====================================
   6) „Arbeiten“-Liste innerhalb einer Zelle
   ===================================== */
.arbeiten-list {
  list-style-type: disc;
  margin: 0.25em 0 0 1.2em;
  padding: 0;
}

/* =====================================
   7) Platzhalter-Text für leere Felder
   ===================================== */
.no-arbeiten,
.no-hinweis {
  color: #888;
  font-style: italic;
}

/* =====================================
   8) Responsive: Mobile-Ansicht bis 600px
   ===================================== */
@media screen and (max-width: 600px) {
  .results-table thead {
    display: none;
  }
  .results-table,
  .results-table tbody,
  .results-table tr,
  .results-table td {
    display: block;
    width: 100%;
  }
  .results-table tr {
    margin-bottom: 0.75em;
  }
  .results-table td {
    position: relative;
    padding-left: 50%;
    text-align: left;
  }
  .results-table td:before {
    position: absolute;
    top: 0.5em;
    left: 0.5em;
    width: 45%;
    white-space: nowrap;
    font-weight: bold;
  }
  .results-table td:nth-of-type(1):before { content: "Datum"; }
  .results-table td:nth-of-type(2):before { content: "Km-Stand"; }
  .results-table td:nth-of-type(3):before { content: "Serviceart"; }
  .results-table td:nth-of-type(4):before { content: "Arbeiten"; }
  .results-table td:nth-of-type(5):before { content: "Hinweise"; }
  .results-table td:nth-of-type(6):before { content: ""; }
}

/* =====================================
   9) Action-Spalte (letzte <td> jeder Zeile) als flexibler Container
   ===================================== */
.results-table td.action-cell {
  padding: 0.5em;        /* passt zu anderen Zellen */
  text-align: left;
}

/* =====================================
   10) Icons nebeneinander arrangieren
   ===================================== */
.action-buttons {
  display: inline-flex;      /* Icons nebeneinander */
  flex-direction: column;
  align-items: center;       /* vertikal zentriert */
  gap: 0.5em;                /* Abstand zwischen Stift und Mülleimer */
}

/* =====================================
   11) Edit-Button (Stift-Icon)
   ===================================== */
.edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  line-height: 0;            /* verhindert, dass SVG verrutscht */
}

.edit-btn svg {
  display: block;
  width: 20px;
  height: 20px;
  stroke: #2c3e50;           /* dunkles Blau/Grau */
  stroke-width: 2.5px;       /* etwas dickere Linien */
  fill: none;
}

.edit-btn:hover svg {
  stroke: #1abc9c;           /* helleres Türkis beim Hover */
}

/* =====================================
   12) Delete-Form & Delete-Button (Mülleimer-Icon)
   ===================================== */
.delete-form {
  display: inline-flex;      /* Nebeneinander mit Edit */
  align-items: center;
  padding: 0;
  margin: 0;
  line-height: 0;
}

.delete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;   /* kein Hintergrund */
  border: none;
  padding: 0;
  cursor: pointer;
  line-height: 0;
}

.delete-btn svg {
  display: block;
  width: 20px;
  height: 20px;
  stroke: #c0392b;           /* dunkles Rot */
  stroke-width: 2.5px;       /* etwas dickere Linien */
  fill: none;
}

/* Hintergrund auf transparent halten und nur Stroke färben */
.delete-btn:hover {
  background: transparent;
}

.delete-btn:hover svg {
  stroke: #e74c3c;           /* helleres Rot beim Hover */
}

/* User-Menue */
.menu-group {
  margin-bottom: 1em;
  text-align: left;
  position: relative;
}

/* Trennlinie vor jeder Gruppe (außer der ersten), linksbündig und kürzer */
.menu-group + .menu-group {
  margin-top: 0.5em;    /* Abstand oberhalb */
  padding-top: 0.5em;   /* Abstand unterhalb der Linie */
//  position: relative;
}

.menu-group + .menu-group::before {
  content: '';
//  display: block;
  width: 30px;           /* Länge der Linie anpassen */
  height: 1px;
  background-color: #ccc;/* dezente Linienfarbe */
  margin-top: 0.5em;
  position: absolute;
  top: 0;
  left: 0;               /* linksbündig */
//  margin-bottom: 0.5em;
}