:root {
  --atz-red: #BD0926;
  --atz-dark: #3D3C3F;
  --atz-gray: #7A7A7A;
  --atz-light-gray: #E7E7E7;
  --atz-green: #2E9E4F;
  --atz-green-dark: #2E7D32;
  --atz-amber: #E8A33D;
  --atz-amber-dark: #B26A00;
}

.fi-null {
  background: grey;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.7em;
}

@font-face {
  font-family: "Open Sans";
  src: url("../fonts/OpenSans-Regular.3ed9575dcc48.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

html,
body {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  font-family: "Open Sans", "Helvetica Neue", sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  overflow-x: hidden;
}

main {
  flex: 1;
}

a {
  text-decoration: none;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

/* Schlägt die HTML-Attribute width/height — feste Bildgrößen gehören ins
   Stylesheet. Siehe docs/adr/0024-bildgroessen-kommen-aus-dem-stylesheet.md */
img {
  max-width: 100%;
  height: auto;
}

/* Navbar */
.atz-navbar {
  border-bottom: 1px solid var(--atz-light-gray);
}

.atz-navbar__logo {
  height: 32px;
  width: auto;
}

@media (min-width: 992px) {
  .atz-navbar__logo {
    height: 40px;
  }
}

/* Bootstrap zeichnet das Burger-Icon nur unter .navbar-light/.navbar-dark; beide
   würden .atz-navbar .nav-link überschreiben. Also zeichnen wir es selbst.
   stroke = --atz-dark, in einer data-URI nicht als var() möglich. */
.atz-navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%233D3C3F' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.atz-navbar .nav-link {
  color: rgba(0, 0, 0, 0.7);
  text-transform: uppercase;
  font-size: 0.9rem;
}

.atz-navbar .nav-link.active {
  color: var(--atz-red);
}

.atz-navbar .btn-atz-login {
  background-color: var(--atz-red);
  color: #fff;
  border: none;
}

/* Footer */
.atz-footer-wrap {
  background-color: var(--atz-dark);
  color: #fff;
  padding: 0 20px;
}

.atz-footer-wrap a {
  color: inherit;
  overflow-wrap: anywhere;
}

.atz-footer {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 54px 0 88px;
}

.atz-footer__content {
  display: flex;
  color: #fff;
  line-height: 1.5;
  gap: 56px;
  flex-direction: column;
}

.atz-footer__company {
  flex: 0 0 280px;
}

.atz-footer__brand {
  margin-top: 32px;
}

.atz-footer__address {
  margin: 32px 0;
}

.atz-footer__telefon {
  margin-bottom: 16px;
}

.atz-footer__links {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 32px;
  min-width: 0;
}

.atz-footer__link-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  width: 100%;
}

.atz-footer__link-column {
  min-width: 0;
}

.atz-footer__link-column a {
  display: block;
  margin-bottom: 4px;
}

.atz-footer__link-column a:last-child {
  margin-bottom: 0;
}

.atz-footer__link-title {
  font-size: 1.125rem;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 16px;
}

@media (min-width: 768px) {
  .atz-footer__link-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
  }
}

@media (min-width: 992px) {
  .atz-footer__content {
    flex-direction: row;
    justify-content: space-between;
  }

  .atz-footer__link-columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
  }

  .atz-footer__link-title {
    margin-bottom: 32px;
  }
}

.atz-copyright-footer-wrap {
  background-color: var(--atz-light-gray);
}

.atz-copyright-footer {
  max-width: 1220px;
  width: 100%;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  gap: 12px;
  text-align: center;
  color: var(--atz-gray);
  font-size: 0.85rem;
}

.atz-copyright-footer a {
  color: var(--atz-gray);
}

.atz-copyright-footer__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  margin: 0;
  padding: 0;
}

.atz-copyright-footer__list li {
  border-left: 1px solid var(--atz-gray);
  padding-left: 8px;
  margin-left: 8px;
}

.atz-copyright-footer__list li:first-child {
  border-left: 0;
  margin-left: 0;
  padding-left: 0;
}

@media (min-width: 992px) {
  .atz-copyright-footer {
    flex-direction: row;
    text-align: left;
  }
}

/* Icon links (navbar) */
.atz-icon-link {
  color: var(--atz-dark);
  font-size: 1.1rem;
}

.atz-icon-link--language svg {
  display: block;
}

/* Kontomenue im Kopf (Figma "Profil Auftraggeber", prof_m_menu / prof_d_menu).
   Steht in base.css statt in einem Seiten-Stylesheet, weil der Kopf auf jeder
   Seite steht. Auf schmalen Bildschirmen bleibt nur der Kreis mit dem
   Anfangsbuchstaben, der Name wuerde dort die Zeile sprengen. */
.atz-account__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 220px;
  padding: 4px 10px 4px 4px;
  border: 1px solid var(--atz-light-gray);
  border-radius: 999px;
  background: #fff;
  color: var(--atz-dark);
  font-size: 0.85rem;
}

.atz-account__chip:hover {
  border-color: var(--atz-red);
  color: var(--atz-dark);
}

.atz-account__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 50%;
  background: var(--atz-red);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
}

.atz-account__name {
  display: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.atz-account__caret {
  font-size: 0.7rem;
  line-height: 1;
  color: var(--atz-gray);
}

.atz-account__menu {
  min-width: 240px;
  padding: 6px 0;
}

.atz-account__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border: 0;
  background: transparent;
  font-size: 0.9rem;
  color: var(--atz-dark);
}

.atz-account__item-icon {
  width: 18px;
  font-size: 0.9rem;
  line-height: 1;
  color: var(--atz-gray);
}

.atz-account__item--danger,
.atz-account__item--danger .atz-account__item-icon {
  color: var(--atz-red);
}

.atz-account__item--danger:hover,
.atz-account__item--danger:focus {
  color: var(--atz-red);
}

@media (min-width: 576px) {
  .atz-account__name {
    display: inline;
  }
}

.atz-notifications__badge {
  position: absolute;
  top: -0.35rem;
  right: -0.5rem;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background-color: var(--atz-red);
  color: #fff;
  font-size: 0.65rem;
  line-height: 1.1rem;
  text-align: center;
}

.atz-notifications__panel {
  width: 320px;
  max-height: 400px;
  overflow-y: auto;
}

.atz-notifications__item {
  white-space: normal;
}

.atz-notifications__item.unread {
  background-color: rgba(0, 0, 0, 0.03);
  font-weight: 600;
}

.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active {
  background-color: var(--atz-red);
  color: #fff;
}

/* Hero / home */
.atz-hero {
  padding: 1.5rem 0 2.5rem;
}

@media (min-width: 768px) {
  .atz-hero {
    padding: 2.5rem 0 3.5rem;
    max-width: 720px;
  }
}

/* Wider hero variant for content-heavy pages (e.g. transporter registration, public profile) */
@media (min-width: 992px) {
  .atz-hero--wide {
    max-width: 1200px;
  }

  .atz-hero--wide h1 {
    font-size: 1.75rem;
  }
}

/* Lizenz-Checkout (/account/license-checkout/<id>/, license_payment.html):
   .atz-hero setzt "padding: 1.5rem 0 2.5rem" -- das ist ein Shorthand und
   ueberschreibt damit auch die horizontalen .container-Gutter von Bootstrap
   auf 0. Auf Desktop faellt das wegen .atz-hero's max-width + auto-Zentrierung
   kaum auf (der scheinbare Seitenabstand ist dort reiner AUSSEN-Rand, kein
   Innenabstand), auf Mobilgeraeten (volle Breite, kein max-width) liegen
   Lizenzbox, Formularfelder und Button dadurch direkt am Bildschirmrand.
   Bewusst nur fuer diese Seite (.lpay) gefixt, nicht site-weit an .atz-hero
   geaendert -- andere Seiten verlassen sich evtl. auf das bisherige
   Verhalten. */
.lpay {
  padding-left: 16px;
  padding-right: 16px;
  overflow-x: hidden;
  max-width: 100%;
}

.lpay .atz-premium-summary,
.lpay .form-control,
.lpay form {
  max-width: 100%;
}

.red-square {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 0.5rem;
  background-color: var(--atz-red);
}

.atz-usp-list li {
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
}

/* Rating badge */
.atz-rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
}

.atz-rating-badge__label {
  font-weight: 700;
  letter-spacing: 0.02em;
}

.atz-rating-badge__score {
  font-weight: 700;
}

.atz-rating-badge__stars {
  color: #F5A623;
  letter-spacing: 1px;
}

/* Price calculator form */
.atz-price-form .atz-field {
  position: relative;
  margin-bottom: 0.75rem;
}

.atz-price-form .atz-field--invalid .atz-field__input,
.atz-price-form .atz-field--invalid input,
.atz-price-form .atz-field--invalid select {
  border: 1px solid #dc3545;
}

/* Flatpickr Kalender-Theme in Markenfarbe */
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: var(--atz-red);
  border-color: var(--atz-red);
}

.flatpickr-day.today {
  border-color: var(--atz-red);
}

.flatpickr-day:hover {
  background: var(--atz-light-gray);
}

.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
span.flatpickr-weekday {
  color: var(--atz-red);
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: var(--atz-red);
}

.atz-price-form .atz-field__input {
  background-color: #fff;
  border: 1.5px solid #707070;
  border-radius: 4px;
  height: 48px;
  color: var(--atz-dark);
  font-size: 0.95rem;
}

.atz-price-form .atz-field--pin .atz-field__input {
  padding-left: 2.5rem;
}

.atz-price-form .atz-field--pin::before {
  content: "";
  position: absolute;
  left: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 5;
}

.atz-price-form .atz-field--pin-from::before {
  background-image: url("../img/location_from.59369b438ec2.svg");
}

.atz-price-form .atz-field--pin-to::before {
  background-image: url("../img/location_to.65551ddff0fc.svg");
}

.atz-link-detailed {
  color: var(--atz-red);
  font-size: 0.85rem;
}

.btn-atz-primary {
  background-color: var(--atz-red);
  color: #fff;
  border: none;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
}

.btn-atz-primary:hover {
  background-color: #9c0720;
  color: #fff;
}

/* Current requests card */
.atz-request-card {
  max-width: 220px;
  background-color: #fff;
  border-radius: 4px;
  padding: 1rem;
  text-align: center;
}

.atz-request-card__flag {
  height: 60px;
  border-radius: 4px;
  background: linear-gradient(to bottom, #000 33%, #DD0000 33%, #DD0000 66%, #FFCE00 66%);
}

/* Feature blocks */
.atz-feature-block {
  padding: 1.5rem 0;
  border-top: 1px solid var(--atz-light-gray);
  text-align: left;
}

.atz-feature-block .btn-atz-primary {
  padding: 0.6rem 1.25rem;
}

/* Secondary (blue) call-to-action button */
.btn-atz-secondary {
  background-color: #1F87C9;
  color: #fff;
  border: none;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
}

.btn-atz-secondary:hover {
  background-color: #196c9f;
  color: #fff;
}

/* Field labels above inputs (create-transport form) */
.atz-field-label {
  display: block;
  font-size: 0.8rem;
  color: var(--atz-gray);
  margin-bottom: 0.25rem;
}

/* Price estimate cards */
.atz-price-estimate {
  background-color: var(--atz-light-gray);
  border-radius: 4px;
  padding: 0.75rem 0.5rem;
  text-align: center;
}

.atz-price-estimate__icon {
  font-size: 1.5rem;
  line-height: 1;
}

.atz-price-estimate__price {
  font-weight: 600;
  margin-top: 0.25rem;
}

.atz-price-estimate__time {
  font-size: 0.7rem;
  color: var(--atz-gray);
}

/* Transport type option cards */
.atz-option-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  border: 2px solid var(--atz-light-gray);
  border-radius: 4px;
  padding: 1rem 0.5rem;
  text-align: center;
  font-size: 0.85rem;
  cursor: pointer;
}

.atz-option-card__icon {
  font-size: 1.75rem;
}

.atz-option-card__icon-img {
  display: block;
  width: 2rem;
  height: 2rem;
  object-fit: contain;
}

.atz-option-card input:checked ~ * ,
.atz-option-card:has(input:checked) {
  border-color: var(--atz-red);
  color: var(--atz-red);
}

/* Contact tabs */
.atz-contact-tabs .nav-link {
  color: var(--atz-gray);
}

.atz-contact-tabs .nav-link.active {
  color: var(--atz-red);
  border-color: var(--atz-red) var(--atz-red) #fff;
}

/* Language tags */
.atz-tag {
  background-color: var(--atz-light-gray);
  color: var(--atz-dark);
  font-weight: 400;
  padding: 0.4rem 0.75rem;
}

/* Order card (transport-orders list) */
.atz-order-card {
  background-color: #fff;
  border: 1px solid var(--atz-light-gray);
  border-radius: 4px;
  padding: 1rem;
}

.atz-order-card__id {
  color: var(--atz-red);
  font-weight: 600;
  font-size: 0.85rem;
}

.atz-order-card__vehicle {
  font-weight: 600;
}

.atz-order-card__meta {
  font-size: 0.8rem;
  color: var(--atz-gray);
}

/* Status card (request-details) */
.atz-status-card {
  background-color: var(--atz-light-gray);
  border-radius: 4px;
  padding: 1rem;
}

.atz-status-badge {
  font-weight: 700;
  font-size: 0.9rem;
}

.atz-status-badge--active {
  color: #2E7D32;
}

.atz-status-badge--pending {
  color: var(--atz-red);
}

.atz-info-box {
  background-color: #FFF6D9;
  border-radius: 4px;
  padding: 1rem;
}

/* Deposit teaser box */
.atz-deposit-box {
  border: 1px solid var(--atz-light-gray);
  border-radius: 4px;
  padding: 1.5rem 1rem;
}

.atz-deposit-box__icon {
  font-size: 2rem;
}

/* Modal bullet list (Premium upsell) */
.atz-modal-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.atz-modal-list .red-square {
  margin-top: 0.4rem;
  flex-shrink: 0;
}

/* Premium-Upsell-Dialog (Figma 'ATZ 2026 - Zukunft', Node 251-141,
   "Premium-Schutz-Paket – Angebot im Auftrag"). .modal-content traegt die
   Klasse zusaetzlich, damit der Header randlos und randoben-abgerundet an
   den Bootstrap-Modal-Rahmen anschliesst (Bootstrap haette sonst eigenes
   Padding/Border auf .modal-header). */
.atz-premium-dialog {
  overflow: hidden;
}

.atz-premium-dialog__header {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.25rem 1.5rem;
  background: var(--atz-red);
  color: #fff;
}

.atz-premium-dialog__icon {
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.atz-premium-dialog__heading {
  flex: 1;
}

.atz-premium-dialog__header .modal-title {
  color: #fff;
  margin-bottom: 0.15rem;
}

.atz-premium-dialog__subtitle {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
}

.atz-premium-dialog__guarantee {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  background: #EAF7EC;
  border: 1px solid var(--atz-green);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}

.atz-premium-dialog__guarantee-icon {
  flex-shrink: 0;
  font-size: 1.2rem;
  line-height: 1.4rem;
  color: var(--atz-green-dark);
}

.atz-premium-dialog__price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-top: 1px solid var(--atz-light-gray);
  padding-top: 0.75rem;
  margin-bottom: 0.75rem;
}

.atz-premium-dialog__price-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--atz-red);
}

.atz-premium-dialog__note {
  font-size: 0.75rem;
  color: #6c757d;
  text-align: center;
}

/* Premium payment page */
.atz-premium-summary {
  background-color: var(--atz-red);
  color: #fff;
  border-radius: 8px;
  padding: 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.atz-premium-summary__icon {
  font-size: 2rem;
}

/* Anzahlung/Premium-Checkout: Stepper + Bestelluebersichts-Karte
   (Figma 'ATZ 2026 - Zukunft', Node 244-141/247-141). */
.atz-payment-steps__item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--atz-gray, #6c757d);
  font-size: 0.85rem;
}

.atz-payment-steps__item + .atz-payment-steps__item::before {
  content: '';
  display: inline-block;
  width: 1.5rem;
  height: 1px;
  background: var(--atz-light-gray, #dee2e6);
  margin-right: 0.4rem;
}

.atz-payment-steps__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--atz-light-gray, #dee2e6);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
}

.atz-payment-steps__item--active {
  color: var(--atz-dark, #212529);
  font-weight: 600;
}

.atz-payment-steps__item--active .atz-payment-steps__dot {
  background: var(--atz-red);
}

.atz-payment-summary {
  overflow: hidden;
}

.atz-payment-summary__head {
  background-color: var(--atz-red);
  color: #fff;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.atz-payment-summary__facts div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.2rem 0;
}

.atz-payment-summary__facts dt {
  color: var(--atz-gray, #6c757d);
  font-weight: 400;
}

.atz-payment-summary__facts dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
}

.atz-payment-summary__bullets li {
  display: flex;
  gap: 0.5rem;
  color: var(--atz-gray, #6c757d);
  margin-bottom: 0.4rem;
}

.atz-payment-summary__bullets li::marker {
  content: none;
}

.atz-payment-success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #e6f4ea;
  color: #1e7e34;
  font-size: 1.75rem;
  margin: 0 auto;
}

.atz-payment-method {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--atz-light-gray);
  border-top: none;
  cursor: pointer;
}

.atz-payment-methods label:first-child {
  border-top: 1px solid var(--atz-light-gray);
  border-radius: 4px 4px 0 0;
}

.atz-payment-methods label:last-child {
  border-radius: 0 0 4px 4px;
}

.atz-payment-method__icon {
  width: 28px;
  text-align: center;
  font-weight: 700;
}

/* Einheitliche Darstellung der Zahlungsmethoden-Icons (Ueberweisung,
   Kreditkarte, PayPal) quer ueber alle drei Checkout-Templates
   (license_payment/b2b_payment/transport_payment.html) -- vorher hatte
   jedes Template eine andere Hoehe (24px/20px/24px) direkt am <img>, und
   die drei SVGs selbst hatten unterschiedliche Groessen/Stile (Linien-Icon,
   winziges 10x8-Icon, vollfarbiges Markenlogo). Die Chip-Box normalisiert
   die SICHTBARE Groesse unabhaengig vom intrinsischen Seitenverhaeltnis
   der Quelldatei (object-fit: contain) -- PayPals offizielles Logo bleibt
   bewusst unveraendert/farbig (Markenzeichen werden nicht umgefaerbt),
   wirkt durch die gleich grosse, neutrale Box trotzdem wie Teil eines
   zusammengehoerigen Sets statt wie ein Fremdkoerper. */
.atz-payment-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 30px;
  padding: 3px;
  background: #fff;
  border: 1px solid var(--atz-light-gray);
  border-radius: 6px;
}

.atz-payment-icon img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.atz-payment-method__icon-img {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.atz-payment-method:has(input:checked) {
  background-color: var(--atz-light-gray);
  color: var(--atz-red);
}

.atz-btn-pay {
  background-color: #000;
  color: #fff;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
}

.atz-btn-pay:hover {
  background-color: #222;
  color: #fff;
}

/* Toast notifications (django.contrib.messages) */
.atz-toast-success {
  background-color: #2e7d32;
}

.atz-toast-error {
  background-color: var(--atz-red);
}

.atz-toast-warning {
  background-color: #b8860b;
}

.atz-toast-info,
.atz-toast-debug {
  background-color: #1F87C9;
}

/* Sortable admin table column headers */
.atz-sort-link {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.atz-sort-link:hover {
  color: var(--atz-red);
  text-decoration: underline;
}

/* Section headings (registration / profile forms) */
.atz-section-title {
  color: var(--atz-red);
  font-weight: 400;
  font-size: 1.375rem;
}

/* Ja/Nein toggle pair (transporter registration "Leistungen" questions) */
.atz-yesno {
  display: flex;
  gap: 1.5rem;
}

.atz-yesno__option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.atz-yesno__dot {
  display: inline-block;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1px solid var(--atz-gray);
}

.atz-yesno__option:has(input:checked) {
  color: var(--atz-red);
}

.atz-yesno__option:has(input:checked) .atz-yesno__dot {
  border-color: var(--atz-red);
  background-color: var(--atz-red);
  box-shadow: inset 0 0 0 3px #fff;
}

/* Live-Validierungshinweise Passwort (transporter registration) */
.atz-password-rules {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.atz-password-rule {
  font-size: 0.875rem;
  color: var(--atz-gray);
}

.atz-password-rule--met {
  color: var(--atz-green, #2e7d32);
}

/* Selectable language pills (registration "Kommunikation in folgenden Sprachen") */
.atz-tag-select {
  cursor: pointer;
}

.atz-tag-select:has(input:checked) {
  background-color: var(--atz-red);
  color: #fff;
}

/* Vehicle fleet count fields (registration "Ihr Unternehmen") */
.atz-fleet-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--atz-light-gray);
  border-radius: 4px;
  padding: 0.5rem 0.75rem;
}

.atz-fleet-field__icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.atz-fleet-field__icon-img {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  object-fit: contain;
  flex-shrink: 0;
}

.atz-fleet-field input {
  border: none;
  width: 100%;
  min-width: 0;
  color: var(--atz-gray);
}

.atz-fleet-field input:focus {
  outline: none;
}

/* Desktop layout for the transporter registration form */
@media (min-width: 992px) {
  .atz-option-card__icon {
    font-size: 2rem;
  }

  .atz-option-card__icon-img {
    width: 2.25rem;
    height: 2.25rem;
  }
}

/* Home hero title */
.atz-hero-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--atz-dark);
  margin-bottom: 0.75rem;
}

.atz-hero-title__highlight {
  color: var(--atz-red);
}

.atz-hero-subtitle {
  color: var(--atz-gray);
  max-width: 620px;
}

/* Home hero background image */
.atz-hero-background {
  position: relative;
  height: 0;
  overflow: visible;
}

.atz-hero-background::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 420px;
  background: url("../img/atz-background-hero.efeee9fa6308.jpg") no-repeat center;
  background-size: cover;
  z-index: -1;
}

/* Slimmed-down price-calculation form + "oder" CTA on the home page */
.atz-price-form-wrap {
  max-width: 680px;
  width: 100%;
}

.atz-price-form-wrap--cta {
  max-width: 420px;
}

.atz-price-form-card {
  background-color: #EEEEEE;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  border-radius: 7px;
  padding: 2.5rem 2rem;
}

.atz-price-form-card__title {
  color: var(--atz-red);
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.atz-price-form-card__subtitle {
  color: var(--atz-gray);
  margin-bottom: 1.25rem;
}

.atz-oder-divider {
  text-align: center;
  margin: 1.5rem 0;
  font-size: 1.1rem;
}

/* Vehicle type icon row */
.atz-vehicle-type-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border: 1px solid #707070;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 1.25rem;
  background-color: #fff;
}

.atz-vehicle-type-option {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 0.4rem;
  cursor: pointer;
  border-left: 1px solid #707070;
}

.atz-vehicle-type-option:first-child {
  border-left: none;
}

.atz-vehicle-type-option img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

/* Current requests preview section */
.atz-current-requests-section {
  position: relative;
  max-width: 1200px;
  margin: 3rem auto 0;
  padding: 2.5rem 1rem;
}

.atz-request-card-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

.atz-request-card-list .atz-request-card {
  flex: 0 0 220px;
}

.atz-request-card__route {
  font-weight: 600;
  text-align: center;
}

/* Section heading (home page) */
.atz-section-heading {
  text-align: center;
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 2rem;
  color: var(--atz-dark);
}

.atz-section-heading::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  background: var(--atz-red);
  margin: 0.6rem auto 0;
}

/* Full-bleed alternating section background (matches Angular price-calculator page) */
.atz-section-shaded::before,
.atz-section-shaded--alt::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  z-index: -1;
}

.atz-section-shaded::before {
  background: #F7F7F7;
}

.atz-section-shaded--alt::before {
  background: #ECECEC;
}

/* Advantages section */
.atz-advantages {
  position: relative;
  max-width: 1200px;
  margin: 3rem auto 0;
  padding: 2.5rem 1rem;
}

.atz-advantages-list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
}

@media (max-width: 900px) {
  .atz-advantages-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 500px) {
  .atz-advantages-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

.atz-advantage-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--atz-dark);
}

.atz-advantage-icon {
  width: 48px;
  height: 48px;
}

/* Sliders (transporters / reviews) */
.atz-slider-section {
  max-width: 1200px;
  margin: 3rem auto 0;
  padding: 0 1rem;
}

.atz-slider-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.atz-slider-track {
  display: flex;
  gap: 1.5rem;
  overflow-x: hidden;
  scroll-behavior: smooth;
  flex: 1;
  padding: 0.5rem 0;
}

.atz-slider-btn {
  background: var(--atz-red);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.atz-slider-btn:hover {
  background: #9a0720;
}

.atz-transporter-card {
  flex: 0 0 calc(25% - 18px);
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px 0 #0000001a;
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
}

.atz-transporter-card__logo {
  width: 120px;
  height: 60px;
  object-fit: contain;
}

.atz-transporter-card__name {
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--atz-dark);
}

.atz-transporter-card__place {
  font-size: 0.75rem;
  color: var(--atz-gray);
}

.atz-transporter-card__desc {
  font-size: 0.75rem;
  color: var(--atz-dark);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 900px) {
  .atz-transporter-card {
    flex: 0 0 calc(50% - 12px);
  }
}

@media (max-width: 500px) {
  .atz-transporter-card {
    flex: 0 0 100%;
  }
}

/* How it works section */
.atz-how-it-works {
  position: relative;
  max-width: 1200px;
  margin: 3rem auto 0;
  padding: 2.5rem 1rem;
}

.atz-how-it-works-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

@media (max-width: 700px) {
  .atz-how-it-works-steps {
    flex-direction: column;
  }
}

.atz-how-it-works-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  flex: 1;
  min-width: 100px;
  max-width: 140px;
  text-align: center;
}

.atz-how-it-works-step__number {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--atz-red);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.atz-how-it-works-step__icon {
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.atz-how-it-works-step__label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--atz-dark);
  line-height: 1.3;
}

.atz-how-it-works-arrow {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  opacity: 0.4;
  margin-top: -2rem;
}

@media (max-width: 700px) {
  .atz-how-it-works-arrow {
    transform: rotate(90deg);
    margin-top: 0;
  }
}

/* Reviews section */
.atz-reviews {
  max-width: 1200px;
  margin: 3rem auto 0;
  padding: 0 1rem;
}

.atz-reviews-widgets {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  margin-bottom: 2rem;
}

.atz-rating-widget {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  background-color: #f7f7f7;
  border-radius: 8px;
  color: inherit;
}

.atz-rating-widget__title {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--atz-dark);
}

.atz-rating-widget__rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.atz-rating-widget__value {
  font-weight: 700;
}

.atz-rating-widget__stars {
  color: #F5A623;
  letter-spacing: 1px;
}

.atz-review-card {
  flex: 0 0 calc(33.333% - 16px);
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px 0 #0000001a;
  border-top: 3px solid var(--atz-red);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.atz-review-card__content {
  font-size: 0.875rem;
  color: var(--atz-dark);
  line-height: 1.6;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.atz-review-card__name {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--atz-gray);
}

.atz-review-card__name::before {
  content: "\2014 ";
}

@media (max-width: 900px) {
  .atz-review-card {
    flex: 0 0 calc(50% - 12px);
  }
}

@media (max-width: 500px) {
  .atz-review-card {
    flex: 0 0 100%;
  }
}

/* ==========================================================================
   Auth pages: login, role selection, transporter registration
   ========================================================================== */

.atz-auth-title {
  color: var(--atz-red);
  font-weight: 700;
  font-size: 2rem;
}

.atz-auth-subtitle {
  color: var(--atz-dark);
  font-size: 1.5rem;
  font-weight: 400;
}

.atz-auth-grid {
  align-items: stretch;
}

.atz-auth-card {
  height: 100%;
  border-radius: 6px;
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
}

.atz-auth-card--login {
  background-color: #fff;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.08);
  align-items: stretch;
}

.atz-auth-card__logo {
  display: block;
  height: 44px;
  width: auto;
  margin: 0 auto 1.5rem;
}

.atz-auth-card--register {
  background-color: var(--atz-dark);
  color: #fff;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1.25rem;
}

.atz-auth-card__person {
  color: #fff;
  line-height: 0;
}

.atz-auth-card__lead {
  font-size: 1.4rem;
  margin: 0;
}

/* Input with a leading icon (login fields) */
.atz-auth-field {
  display: flex;
  align-items: center;
  border: 1px solid var(--atz-light-gray);
  border-radius: 4px;
  overflow: hidden;
}

.atz-auth-field__icon {
  padding: 0 0.6rem;
  color: var(--atz-red);
}

.atz-auth-field .form-control {
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.atz-auth-field:focus-within {
  border-color: var(--atz-red);
}

.atz-auth-link {
  color: var(--atz-gray);
  font-size: 0.85rem;
}

.atz-auth-link:hover {
  color: var(--atz-red);
}

/* White panel wrapping content-heavy forms (transporter registration) */
.atz-auth-panel {
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.08);
  padding: 2rem 1.75rem;
}

.atz-auth-panel__intro {
  color: var(--atz-gray);
  font-size: 0.95rem;
}

/* Role selection ("Wer sind Sie?") */
.atz-role-grid {
  align-items: stretch;
}

.atz-role-card {
  height: 100%;
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.08);
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.atz-role-card__icon {
  color: var(--atz-dark);
  line-height: 0;
}

.atz-role-card__rule {
  width: 100%;
  max-width: 180px;
  height: 2px;
  background-color: var(--atz-red);
}

.atz-role-card__title {
  font-size: 1.15rem;
  color: var(--atz-dark);
}

.atz-role-card__cta {
  margin-top: auto;
}

.atz-role-card__cta-arrow {
  margin-right: 0.25rem;
}

/* Logo upload click-box (transporter registration) */
.atz-logo-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  min-height: 96px;
  border: 1px dashed var(--atz-light-gray);
  border-radius: 4px;
  padding: 0.75rem;
  text-align: center;
  cursor: pointer;
}

.atz-logo-upload:hover {
  border-color: var(--atz-red);
}

.atz-logo-upload__icon {
  color: var(--atz-red);
  font-size: 1.25rem;
  line-height: 1;
}

.atz-logo-upload__hint {
  color: var(--atz-gray);
  font-size: 0.8rem;
}

.atz-logo-upload .form-control {
  font-size: 0.8rem;
}

/* ============================================================= */
/* Breadcrumb sub-navigation                                     */
/* ============================================================= */
.atz-breadcrumb {
  border-bottom: 1px solid var(--atz-light-gray);
  background-color: #fff;
}

.atz-breadcrumb__list {
  list-style: none;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.6rem 0;
  font-size: 0.85rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.atz-breadcrumb__list::-webkit-scrollbar {
  display: none;
}

.atz-breadcrumb__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}

.atz-breadcrumb__item + .atz-breadcrumb__item::before {
  content: "›";
  color: var(--atz-gray);
}

.atz-breadcrumb__item a {
  color: var(--atz-gray);
  text-decoration: none;
}

.atz-breadcrumb__item a:hover {
  color: var(--atz-red);
  text-decoration: underline;
}

.atz-breadcrumb__item [aria-current="page"] {
  color: var(--atz-dark);
  font-weight: 600;
}

/* ============================================================= */
/* Unified order component (Auftrags-Kopf + Detail)              */
/* ============================================================= */
.atz-order__title {
  font-weight: 700;
  line-height: 1.2;
}

.atz-order__subtitle {
  color: var(--atz-gray);
  margin-bottom: 1rem;
}

/* Horizontal summary bar: Art · von · nach · Entfernung · Anzahl · Datum */
.atz-order-summary {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid var(--atz-light-gray);
  border-radius: 6px;
  background-color: #fff;
}

.atz-order-summary__cell {
  flex: 1 1 auto;
  min-width: 120px;
  padding: 0.75rem 1rem;
  border-left: 1px solid var(--atz-light-gray);
}

.atz-order-summary__cell:first-child {
  border-left: 0;
}

.atz-order-summary__label {
  font-size: 0.75rem;
  color: var(--atz-gray);
  margin-bottom: 0.15rem;
}

.atz-order-summary__value {
  font-weight: 600;
  font-size: 0.9rem;
}

/* Drucken: print just the order component, drop chrome and interactive bits.
   Minimal on purpose - fuller parity with the Angular print view is a later
   comparison (see the design session's open items). */
@media print {
  .atz-navbar,
  .atz-breadcrumb,
  .atz-footer-wrap,
  .atz-copyright-footer-wrap,
  .atz-order-actions,
  .atz-order-map,
  .atz-notifications,
  .modal {
    display: none !important;
  }

  .atz-order-body {
    grid-template-columns: 1fr;
  }
}

/* "Art" column icon: hand-drawn vehicle-type SVG (matches the index selector). */
.atz-order-art {
  width: 1.5rem;
  height: 1.5rem;
  object-fit: contain;
  vertical-align: middle;
}

.atz-order-map img {
  max-height: 360px;
  object-fit: cover;
}

/* Two-column body */
.atz-order-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1rem;
}

@media (min-width: 992px) {
  .atz-order-body {
    grid-template-columns: 2fr 1fr;
  }
}

.atz-order-panel {
  border: 1px solid var(--atz-light-gray);
  border-radius: 6px;
  padding: 1.25rem;
  background-color: #fff;
}

.atz-order-panel__heading {
  color: var(--atz-red);
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 0.75rem;
}

/* Price / CTA card (right column) */
.atz-order-cta {
  text-align: center;
}

.atz-order-cta__from {
  color: var(--atz-gray);
  font-size: 0.85rem;
}

.atz-order-cta__price {
  color: var(--atz-red);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.1;
}

/* FAQ accordion */
.atz-faq__item {
  border-top: 1px solid var(--atz-light-gray);
  padding: 0.6rem 0;
}

.atz-faq__item:first-child {
  border-top: 0;
}

.atz-faq__q {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--atz-dark);
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}

.atz-faq__q[aria-expanded="true"] {
  color: var(--atz-red);
}

.atz-faq__a {
  font-size: 0.85rem;
  color: var(--atz-gray);
  padding-top: 0.5rem;
}

/* Beispiel-Transport SEO sub-section */
.atz-beispiel-note {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid var(--atz-light-gray);
  border-radius: 6px;
  padding: 1rem 1.25rem;
  color: var(--atz-gray);
  font-size: 0.9rem;
}

.atz-similar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

@media (min-width: 576px) {
  .atz-similar {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .atz-similar {
    grid-template-columns: repeat(4, 1fr);
  }
}

.atz-similar__card {
  border: 1px solid var(--atz-light-gray);
  border-radius: 6px;
  padding: 1rem;
  text-decoration: none;
  color: inherit;
  display: block;
}

.atz-similar__card:hover {
  border-color: var(--atz-red);
}

.atz-similar__route {
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 0.35rem;
}

.atz-similar__meta {
  font-size: 0.8rem;
  color: var(--atz-gray);
}

.atz-similar__price {
  color: var(--atz-red);
  font-weight: 700;
  font-size: 0.85rem;
  margin-top: 0.5rem;
}

/* Transport-Vorschau teaser (Zwischenseite between homepage estimate and
   create-transport). Reuses .atz-price-estimate / .atz-how-it-works-step. */
.atz-vorschau-route {
  padding: 0.75rem 1rem;
  background-color: var(--atz-light-gray);
  border-radius: 4px;
}

.atz-vorschau-estimate {
  text-align: center;
}

.atz-price-estimate__reason {
  margin-top: 0.25rem;
  line-height: 1.2;
}

/* Vertical, arrow-less "so geht's weiter" variant of the how-it-works steps. */
.atz-how-it-works-steps--compact {
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
}

.atz-how-it-works-steps--compact .atz-how-it-works-step {
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  max-width: none;
  text-align: left;
}

.atz-advantages-list--inline {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  justify-content: center;
}


/* --------------------------------------------------- Rueckfragedialog ----
   Der geteilte Dialog vor einer Aktion, die sich nicht zuruecknehmen laesst
   (web/templates/web/partials/_confirm_modal.html,
   web/static/web/js/confirm-submit.js). Figma "ATZ 2026 - Zukunft", Screens
   act_m_stop / act_m_neu / act_m_loeschen / act_m_erledigt.

   Er steht in base.html und kann deshalb auf jeder Seite auftauchen -- seine
   Regeln gehoeren hierher und nicht in ein Seiten-Stylesheet. Bootstrap
   steuert nur noch das Ein- und Ausblenden; Karte, Sinnbild und Knoepfe
   kommen von hier.

   Der Farbton benennt den Charakter der Aktion und haengt an EINEM Attribut
   am Dialog (`data-confirm-tone`), das das Skript aus dem Formular
   uebernimmt: amber = umkehrbarer Eingriff, red = endgueltig, green =
   Abschluss. */
.atz-confirm-modal .modal-dialog {
  max-width: 420px;
}

.atz-confirm-modal__card {
  padding: 24px;
  border: 0;
  border-radius: 16px;
}

.atz-confirm-modal__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 16px;
  border-radius: 12px;
  background-color: #FCEAED;
  color: var(--atz-red);
  font-size: 18px;
}

.atz-confirm-modal[data-confirm-tone="amber"] .atz-confirm-modal__icon {
  background-color: #FDF4E1;
  color: var(--atz-amber-dark);
}

.atz-confirm-modal[data-confirm-tone="green"] .atz-confirm-modal__icon {
  background-color: #EAF6EE;
  color: var(--atz-green-dark);
}

.atz-confirm-modal__title {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
}

.atz-confirm-modal__body {
  margin: 0 0 20px;
  color: var(--atz-gray);
  font-size: 14px;
  line-height: 1.5;
}

/* Im Quelltext fuehrt der bestaetigende Knopf (auf dem Handy oben, volle
   Breite); ab 768px dreht die Zeile sich um, damit "Abbrechen" links steht. */
.atz-confirm-modal__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.atz-confirm-modal__btn {
  padding: 12px 20px;
  border: 1px solid var(--atz-light-gray);
  border-radius: 10px;
  background-color: #fff;
  color: var(--atz-dark);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}

.atz-confirm-modal__cancel:hover {
  border-color: var(--atz-gray);
}

.atz-confirm-modal__confirm {
  border-color: var(--atz-red);
  background-color: var(--atz-red);
  color: #fff;
  font-weight: 700;
}

.atz-confirm-modal__confirm:hover {
  background-color: #9E0720;
  border-color: #9E0720;
}

.atz-confirm-modal[data-confirm-tone="amber"] .atz-confirm-modal__confirm {
  border-color: var(--atz-amber);
  background-color: var(--atz-amber);
  color: var(--atz-dark);
}

.atz-confirm-modal[data-confirm-tone="amber"] .atz-confirm-modal__confirm:hover {
  border-color: #D18F22;
  background-color: #D18F22;
}

.atz-confirm-modal[data-confirm-tone="green"] .atz-confirm-modal__confirm {
  border-color: var(--atz-green);
  background-color: var(--atz-green);
  color: #fff;
}

.atz-confirm-modal[data-confirm-tone="green"] .atz-confirm-modal__confirm:hover {
  border-color: var(--atz-green-dark);
  background-color: var(--atz-green-dark);
}

@media (min-width: 768px) {
  .atz-confirm-modal__actions {
    flex-direction: row-reverse;
    justify-content: flex-end;
  }

  .atz-confirm-modal__btn {
    min-width: 150px;
  }
}

/* Die AG-Sicht auf den eigenen Auftrag hat seit dem Figma-Umbau ein eigenes
   Stylesheet: web/static/web/css/order-owner.css (Praefix `own-`). Die
   frueheren `.atz-owner-*`- und `.atz-bid-card`-Regeln standen hier und sind
   dorthin gewandert -- siehe docs/adr/0025. */

/* Der Cookie-Consent-Banner hat eine eigene Datei:
   web/static/web/css/cookie-consent.css */