/* Nur, was Bootstrap nicht bietet. Layout, Farben und der Knopf kommen
   aus Bootstrap-Klassen in index.html. */

/* Raleway 600, lateinische Teilmenge, selbst gehostet (SIL OFL 1.1, siehe ../fonts/Raleway-OFL.txt) */
@font-face {
  font-family: "Raleway";
  src: url("../fonts/raleway-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

.site-title {
  font-family: "Raleway", var(--bs-body-font-family);
  white-space: nowrap;
  margin-right: 0.5rem;  /* Abstand zum Kontoknopf, wenn es eng wird (#17317) */
}

/* unter 375 px (360 px vieler Android-Geräte, 320 px) passt der einzeilige Titel in fs-5 nicht neben Logo
   und Kontoknopf (#17317, gemessen) */
@media (max-width: 374.98px) {
  .site-title {
    font-size: 0.9rem !important;
  }
}

/* Logo der IT-Bauschmiede (#17317): unter 768 px klein links vom Titel (Variante A aus #16450),
   ab 768 px wie bisher mittig über der ganzen Kopfzeile. Im Dokument steht es vor dem Titel. */
.site-logo {
  flex: none;
  width: 26px;
  height: auto;
  margin-right: 0.5rem;
}

@media (min-width: 768px) {
  .site-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 41px;
    margin-right: 0;
    transform: translate(-50%, -50%);
  }
}

/* Kontoknopf (#17317, session-status.js): unter 768 px nur das Symbol — die E-Mail-Adresse steht im
   Menü, ein Screenreader liest den Namen weiter (visually-hidden wie bei Bootstrap); bis 1200 px
   höchstens 14rem breit mit "…", eine lange Adresse schöbe sonst das Logo bzw. die Seite zur Seite. */
@media (max-width: 767.98px) {
  .profile-name {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
}

@media (max-width: 1199.98px) {
  .profile-name {
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Menü des Kontoknopfs: beim Klicken und am Eintrag der aktuellen Seite ("Profil" auf /profil) hellgrau
   mit dunkler Schrift statt Bootstraps Blau mit weißer Schrift — dasselbe Grau wie "Verlauf anzeigen"
   (.history-switch, #17310). Die Klasse setzt session-status.js. */
.profile-dropdown {
  --bs-dropdown-link-active-bg: var(--bs-secondary-bg);
  --bs-dropdown-link-active-color: var(--bs-body-color);
}

/* Drag-and-drop-Fläche auf der Seite /erstellen. Bootstrap hat keine
   Hilfsklasse für den Rahmenstil, daher stehen nur der gepunktete Stil und die
   Hervorhebung beim Ziehen hier (die Höhe kommt von der Klasse p-5 in
   erstellen.html). */
.dropzone {
  border-style: dotted !important;
  border-color: var(--bs-secondary-color) !important;
  transition: background-color 0.15s ease-in-out;
}

.dropzone-active {
  border-color: var(--bs-dark) !important;
  background-color: var(--bs-secondary-bg);
}

/* Ausklappbare Formularabschnitte (<details>/<summary>) auf /erstellen: ein
   Winkelpfeil vor der Überschrift statt des Listenzeichens des Browsers, das
   über einer Block-Überschrift in einer eigenen Zeile stünde. */
.section-toggle {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  list-style: none;
  cursor: pointer;
}

.section-toggle::-webkit-details-marker {
  display: none;
}

.section-toggle::before {
  content: "";
  flex: none;
  width: 0.5em;
  height: 0.5em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-0.15em) rotate(-45deg);
  transition: transform 0.15s ease-in-out;
}

.form-section[open] > .section-toggle::before {
  transform: translateY(-0.25em) rotate(45deg);
}

/* Ein zugeklappter Abschnitt braucht nur den Abstand darüber. */
.form-section:not([open]) > .section-toggle {
  margin-bottom: 0 !important;
}

/* Verlaufszeilen der Startseite (#16330): gedämpft unter ihrer E-Rechnung. Die Textfarbe der
   Zellen kommt in Bootstraps Tabellen aus --bs-table-color-type, nicht aus der Zeile. */
.invoice-history-row {
  --bs-table-color-type: var(--bs-secondary-color);
  opacity: 0.6;
}

/* dieselbe Dämpfung für den Verlauf in einer Karte (#17318, unter 992 px) */
.invoice-card-history {
  color: var(--bs-secondary-color);
  opacity: 0.6;
}

/* "Verlauf anzeigen" im ⋮-Menü (#16330): ein Schalter, kein Link — beim Klicken hellgrau statt
   Bootstraps blauem :active mit weißer Schrift (#17310). --bs-secondary-bg ist eine Stufe dunkler
   als der Hover (--bs-tertiary-bg); die Schrift bleibt dunkel. Die Klasse setzt home.js. */
.dropdown-item.history-switch:active {
  background-color: var(--bs-secondary-bg);
  color: var(--bs-body-color);
}

/* Englische Zeilen (lang="en") nur, wenn das Backend SHOW_ENGLISH=true gesetzt hat: dann trägt
   <html> data-show-english (app/routes/frontend.py). Ohne Variable bleibt Englisch verborgen.
   !important und die höhere Spezifität schlagen Bootstraps d-block/d-inline. */
/* "storniert" (#17051, #17312): rote halbfette Schrift in der Zeile "Fassung n" der stornierten Fassungen
   im Verlauf ihrer Stornorechnung. 600 statt 500: Windows' Segoe UI hat keine 500. #b02a37 ist Bootstraps
   Rot eine Stufe dunkler (lesbar auf den Streifen und in der gedämpften Zeile). */
.invoice-cancel-mark {
  color: #b02a37;
  font-weight: 600;
}

/* Etikett "Storno" neben der Seriennummer der Stornorechnung (#17312, statt Bootstraps schwarzem
   text-bg-dark "Stornorechnung"): roter Rahmen ohne Fläche, halbfett — dasselbe Rot wie
   "storniert". Kurz, damit es neben die Seriennummer passt; fehlt der Platz, rutscht es darunter. */
.invoice-cancellation-label {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.22rem 0.4rem;
  border: 1px solid #dc3545;
  border-radius: 3px;
  color: #b02a37;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
}

html:not([data-show-english]) [lang="en"] {
  display: none !important;
}

/* Fragezeichen hinter der Bezeichnung (#16688, create.js fieldHelpIcon): auf Höhe der Schrift,
   mit Abstand zur BT-Nummer — das Leerzeichen allein ließ es an der Klammer kleben */
.field-help-icon {
  cursor: help;
  margin-left: 0.25em;
}

/* overflow: visible — der gefüllte Kreis reicht bis an den Rand der Box; auf einer halben
   Pixelposition (Browser-Zoom, Bildschirmskalierung 125 %) schnitt SVG sonst die Kante ab */
.field-help-icon svg {
  vertical-align: -0.125em;
  overflow: visible;
}

/* Tooltip dazu (create.js addFieldHelp): breiter als Bootstraps
   200 px, sonst bricht ein Text von 110 Zeichen in fünf Zeilen um; linksbündig wie Fließtext */
.field-help-tooltip {
  --bs-tooltip-max-width: 22rem;
}

.field-help-tooltip .tooltip-inner {
  text-align: left;
}

/* Filter der Startseite (#16782): ab 1400 px in beiden Zeilen fünf gleich breite Filterspalten und
   rechts eine feste Spalte ("Suchen" + "+ E-Rechnung erstellen" bzw. der ZIP-Download). So steht
   "Käufer" genau unter "Seriennummer" und der ZIP-Download rechtsbündig unter "Erstellen".
   Die Breite der Knopfspalte trägt "Suchen Search" und "+ E-Rechnung erstellen" nebeneinander;
   darunter stehen die Filter zu zweit je Zeile. Ab 1400 px statt 1200 px (#17700): gemessen ist eine Filterspalte bei
   1200 px 126 px breit, "Rechnungsnummer" braucht 156 px (lief bis ~1350 px in "Label") und das Datum
   ~140 px (bis 1280 px abgeschnitten); bei 1400 px sind es 166 px.
   Datumsfelder mit weniger Innenabstand: sonst schneidet das Kalendersymbol knapp darüber das Datum ab. */
@media (min-width: 1400px) {
  .filter-field {
    flex: 0 0 auto;
    width: calc((100% - 28.5rem) / 5);
  }

  .filter-field input[type="date"] {
    padding-left: .5rem;
    padding-right: .5rem;
  }

  .filter-actions {
    flex: 0 0 auto;
    width: 28.5rem;
  }
}

/* Filter hinter dem Knopf "Filter" (#17319, home.js): unter 768 px zugeklappt ohne Felder, "Suchen" und
   "Filter zurücksetzen" — "+ E-Rechnung erstellen" und der ZIP-Download bleiben sichtbar. */
@media (max-width: 767.98px) {
  .filters-collapsed .filter-field,
  .filters-collapsed [data-testid="filter-search"],
  .filters-collapsed [data-testid="filter-reset"] {
    display: none !important;
  }

  /* Knopf und Felder in einer Fläche (index.html .filter-panel): zugeklappt unsichtbar wie eine Zeile des
     Formulars, aufgeklappt hellgrau (#f1f3f5, Bootstraps gray-100, ausgewählt aus zehn Farben) mit Rand vom
     Knopf bis zum letzten Feld — die weißen Felder heben sich davon ab */
  .filter-panel {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    /* Abstand tragen die Felder selbst (.filter-panel > *), sonst stünde alles doppelt eingerückt */
    padding-right: 0;
    padding-left: 0;
    margin-top: 0;
  }

  form:not(.filters-collapsed) > .filter-panel {
    width: calc(100% - var(--bs-gutter-x));
    margin: var(--bs-gutter-y) calc(var(--bs-gutter-x) * 0.5) 0;
    padding-bottom: 1rem;
    background-color: #f1f3f5;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
  }

  /* Bootstraps btn-outline-dark füllt den Knopf beim Antippen dunkel und lässt die Füllung auf
     Touch-Geräten stehen (:hover bleibt bis zum nächsten Tipp) — hier bleibt er hell und lesbar */
  .filter-toggle {
    --bs-btn-hover-color: var(--bs-dark);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: var(--bs-dark);
    --bs-btn-active-color: var(--bs-dark);
    --bs-btn-active-bg: var(--bs-secondary-bg);
    --bs-btn-active-border-color: var(--bs-dark);
  }
}

@media (min-width: 768px) {
  .filter-panel {
    display: contents;
  }
}

/* Bootstraps Spaltenabstand (.row > *) gilt nur für direkte Kinder der Zeile — die Felder in der
   Filter-Fläche bekommen ihn hier (ohne width: die setzen col-12/col-sm-6) */
.filter-panel > * {
  flex-shrink: 0;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-top: var(--bs-gutter-y);
}

/* Unter 576 px (#17317): "Suchen", "+ E-Rechnung erstellen" und der ZIP-Download untereinander in
   voller Breite statt teils links, teils rechts; "Filter zurücksetzen" (btn-link) bleibt Text. */
@media (max-width: 575.98px) {
  .filter-actions > .d-flex {
    flex-direction: column;
    align-items: stretch !important;
  }

  .filter-actions .btn:not(.btn-link) {
    width: 100%;
  }
}

/* Angaben im Dialog "Rechnung stornieren?" (#17701, index.html .cancel-facts): unter 480 px die Bezeichnung über dem
   Wert statt links daneben — in col-5 wären es bei 375 px 121 px, "Rechnungsnummer" braucht 156 px und lief in
   die Rechnungsnummer (zwei Spalten passen gemessen erst ab ~465 px) */
@media (max-width: 479.98px) {
  .cancel-facts > dt,
  .cancel-facts > dd {
    width: 100%;
  }

  .cancel-facts > dd:not(:last-child) {
    margin-bottom: 0.5rem !important;
  }
}

/* Vorschau der Rechnungsvorlage auf /profil (#17095): eine Hochformat-Seite wäre in voller
   Spaltenbreite höher als der Bildschirm — höchstens 28rem hoch, das Seitenverhältnis bleibt. */
.template-preview {
  max-height: 28rem;
  object-fit: contain;
}

/* ohne Vorschau (wird noch erstellt, Umwandlung gescheitert, Bild nicht ladbar): ein Feld in der Größe
   einer kleinen Vorschau, damit Angaben und Knöpfe an derselben Stelle stehen */
.template-placeholder {
  width: 16rem;
  max-width: 100%;
  min-height: 11rem;
}

/* geltende und neue Vorlage nebeneinander (#17134): je ein Rahmen, oben ein Band mit dem Zustand —
   "Gilt jetzt" grün mit weißer, "In Prüfung" gelb mit dunkler Schrift (Kontrast je mindestens 4,5 : 1);
   im Rahmen eine kleinere Vorschau */
.template-frame .template-preview {
  max-width: 14rem;
}

.template-status-active {
  background-color: #198754;
  color: #fff;
}

.template-status-review {
  background-color: #ffc107;
  color: #212529;
}

/* umrandeter Knopf in einem farbigen Hinweis (/freischaltung, "Bestätigungs-E-Mail erneut senden"): eine helle
   Fläche statt der Farbe des Hinweises, Bootstrap "light" #f8f9fa — Hover und Fokus bleiben die von btn-outline-dark */
.btn-outline-dark.btn-on-alert {
  --bs-btn-bg: #f8f9fa;
}

/* Symbole im Menü des Kontoknopfs (#17669, session-status.js): auf Höhe der deutschen Zeile */
.menu-icon {
  line-height: 1;
  padding-top: 0.2rem;
}

/* --- Anleitung (#17669, anleitung.html, assets/js/guide.js) --------------------------------------
   Oben die vier Anleitungen als Knöpfe (zu zweit ab 576 px, zu viert ab 1200 px), darunter der Rundgang.
   Bühne: oben der Name der Seite, darunter der Nachbau in einem <iframe> (guide.js) — dessen Media Queries
   richten sich nach der Breite des Rahmens, der Nachbau sieht also aus wie die echte Seite in dieser Breite.
   Hinweis: weiße Karte mit grünem Rand links, grüner Nummer und Pfeil zum Baustein, der grün umrandet ist. */
.guide-wrap {
  position: relative;
}

.guide-stage {
  overflow: hidden;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.75rem;
  background: var(--bs-tertiary-bg);
}

.guide-stage-label {
  padding: 0.5rem 0.75rem 0;
  color: var(--bs-secondary-color);
  font-size: 0.75rem;
  font-weight: 600;
}

.guide-frame {
  display: block;
  width: 100%;
  border: 0;
}

/* im Rahmen (<body class="guide-page">): Dialoge stehen offen auf der Seite statt darüber */
.guide-page .guide-modal {
  position: static;
  display: block;
}

.guide-page .guide-modal .modal-dialog {
  margin: 0 auto;
}

.guide-page .guide-menu-open {
  position: absolute;
  inset: 100% 0 auto auto;
  z-index: 5;
  display: block;
}

.guide-target {
  border-radius: 0.375rem;
  outline: 3px solid #198754;
  outline-offset: 3px;
}

.guide-callout {
  position: absolute;
  z-index: 10;
  /* auf dem Handy so breit wie der Rahmen, 8 px Rand je Seite (guide.js place) */
  width: min(340px, calc(100% - 16px));
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--bs-border-color);
  border-left: 5px solid #198754;
  border-radius: 0.5rem;
  background: #fff;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
  font-size: 0.9rem;
}

.guide-number {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: #198754;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
}

/* Pfeil: ein gedrehtes Quadrat an der Kante zum Baustein (data-side setzt guide.js) */
.guide-arrow {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid var(--bs-border-color);
  background: #fff;
  transform: rotate(45deg);
}

.guide-callout[data-side="right"] .guide-arrow {
  left: -9px;
  border-top: 0;
  border-right: 0;
  border-color: #198754;
  background: #198754;
}

.guide-callout[data-side="left"] .guide-arrow {
  right: -8px;
  border-bottom: 0;
  border-left: 0;
}

.guide-callout[data-side="bottom"] .guide-arrow {
  top: -8px;
  border-right: 0;
  border-bottom: 0;
}

.guide-callout[data-side="top"] .guide-arrow {
  bottom: -8px;
  border-top: 0;
  border-left: 0;
}

/* "Schritte:" unter 576 px untereinander: in einer umbrechenden Zeile stünden die Kurztitel durcheinander */
@media (max-width: 575.98px) {
  .guide-step-links {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 0.4rem !important;
  }
}

/* englische Zeile im gewählten (dunklen) Knopf lesbar */
.guide-list .btn-dark [lang="en"] {
  color: rgba(255, 255, 255, 0.75);
}


/* CAPTCHA so breit wie der Knopf darunter (/registrieren, /anmelden, /passwort-vergessen): ALTCHA begrenzt sich
   selbst auf 320 px (--altcha-max-width), die Variable reicht in sein Shadow DOM hinein */
.captcha-full-width altcha-widget {
  --altcha-max-width: 100%;
}