/* AG-Auftragsuebersicht -- Figma "ATZ 2026 - Zukunft", Canvas "AG Auftrag
   Uebersicht", Screens ag_m_annehmen / ag_m_warten / ag_m_abgeschlossen und
   ag_d_annehmen / ag_d_warten / ag_d_abgeschlossen.

   Markup:    web/templates/web/partials/_order_owner_view.html
              web/templates/web/partials/_owner_action_tile.html
   Kontext:   web/order_owner.py, docs/adr/0025 (eigene Sicht fuer den AG),
              docs/adr/0020 (Lebenszyklus und Verbindlichkeit)

   Die drei Screens je Plattform sind NICHT drei Seiten, sondern drei
   Lebenszyklus-Zustaende derselben Seite. Der Kopfbereich ist in allen dreien
   gleich; nur das Aktionsfeld des betroffenen Angebots wechselt. Deshalb gibt
   es hier genau einen Satz Regeln, und die Zustaende unterscheiden sich allein
   ueber die Modifikatoren --accept / --waiting / --accepted / --finish, die
   web.order_owner.BID_ACTIONS als `tone` liefert.

   Mobile first: die Basis-Regeln beschreiben das 402px-Layout (Kopfkasten
   einspaltig, jedes Angebot eine Karte), die Media-Query (>=768px) stellt
   daraus die waagerechte Kopfzeile und die Angebotstabelle her. Ein einziger
   Satz Zeilen im Markup bedient beide -- die Umschaltung passiert allein hier
   (gleiches Muster wie web/static/web/css/orders.css).

   Klassenpraefix `own-`, damit sich nichts mit `atz-` (base.css), `ord-`
   (Alle Auftraege), `rev-` (Kundenmeinungen), `dir-` (Firmenverzeichnis),
   `lic-` (Lizenzen), `tur-`/`tup-` (TU-Registrierung, Firmenprofil) oder
   `ow-` (Auftragsformular) ueberschneidet. */

:root {
  --own-shaded: #F5F5F5;
  --own-border: #E7E7E7;
  --own-line: #EFEFEF;
  --own-muted: #7A7A7A;
  --own-red-tint: #FCEAED;
  --own-green-tint: #EAF6EE;
  --own-amber-tint: #FDF4E1;
  --own-star: #F0A741;
  --own-star-off: #DCDCDC;
  --own-radius: 12px;
  --own-radius-sm: 8px;
}

/* Der AG erreicht diese Seite fast immer aus einer E-Mail heraus, also auf dem
   Handy. Auf grossen Schirmen wird sie mittig begrenzt statt aufgeteilt
   (docs/adr/0025) -- 1100px entspricht dem Kasten im Desktop-Entwurf. */
.own-order {
  max-width: 1100px;
  margin: 0 auto;
  color: var(--atz-dark);
  font-size: 15px;
  line-height: 1.5;
}

.own-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------ Kopfbereich */

/* Titel links, "Alle Fahrzeuge" rechts, Auftrags-Nr. darunter. Beim Aufklappen
   nimmt der Kasten eine eigene volle Zeile ein (`[open]` weiter unten) --
   sonst quetschte sich der Fahrzeugblock in die schmale rechte Spalte. */
.own-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-bottom: 16px;
}

.own-title {
  flex: 1 1 12rem;
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
}

.own-id {
  flex: 1 1 100%;
  margin: 0;
  color: var(--own-muted);
  font-size: 13px;
}

/* Die Auftragsnummer nennt der AG bei einer Rueckfrage -- ein Tipp darauf
   markiert sie vollstaendig. */
.own-id strong {
  color: var(--atz-dark);
  user-select: all;
  word-break: break-all;
}

.own-vehicles {
  flex: 0 0 auto;
}

.own-vehicles[open] {
  flex: 1 1 100%;
}

.own-vehicles__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--own-border);
  border-radius: var(--own-radius-sm);
  background-color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.own-vehicles__toggle::-webkit-details-marker {
  display: none;
}

.own-vehicles__body {
  margin-top: 12px;
  padding: 16px;
  border: 1px solid var(--own-border);
  border-radius: var(--own-radius);
  background-color: #fff;
}

.own-panel {
  padding-top: 14px;
  margin-top: 14px;
  border-top: 1px solid var(--own-line);
}

.own-panel:first-child {
  padding-top: 0;
  margin-top: 0;
  border-top: 0;
}

.own-panel__title {
  margin: 0 0 10px;
  color: var(--own-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.own-panel__text {
  margin: 0;
  font-size: 14px;
}

.own-vehicle {
  padding-top: 12px;
  margin-top: 12px;
  border-top: 1px dashed var(--own-line);
}

.own-vehicle:first-of-type {
  padding-top: 0;
  margin-top: 0;
  border-top: 0;
}

.own-vehicle__name {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
}

.own-specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
  margin: 0;
}

.own-spec {
  min-width: 0;
}

.own-spec__label {
  color: var(--own-muted);
  font-size: 12px;
}

.own-spec__value {
  margin: 2px 0 0;
  font-size: 14px;
  font-weight: 600;
}

/* ------------------------------------------------- Status- und Aktionsbox */

.own-box {
  margin-bottom: 24px;
  border: 1px solid var(--own-border);
  border-radius: var(--own-radius);
  background-color: #fff;
}

.own-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px 18px;
  padding: 16px;
}

/* Die Statuskachel traegt das AG-Wort zum Lebenszyklus-Zustand
   (web.order_owner.owner_status) und faerbt sich nach dessen Ton. */
.own-status {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 16px;
  border-radius: var(--own-radius-sm);
  background-color: var(--own-shaded);
}

.own-status__label {
  color: var(--own-muted);
  font-size: 12px;
}

.own-status__value {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.1;
}

.own-status__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: currentColor;
}

.own-status--success {
  background-color: var(--own-green-tint);
  color: var(--atz-green-dark);
}

.own-status--warning {
  background-color: var(--own-amber-tint);
  color: var(--atz-amber-dark);
}

.own-status--muted {
  background-color: var(--own-shaded);
  color: var(--own-muted);
}

.own-fact {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.own-fact__label {
  color: var(--own-muted);
  font-size: 12px;
}

.own-fact__value {
  font-size: 15px;
  font-weight: 700;
}

.own-fact--count {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
}

/* Die Angebotszahl ist die Zahl, wegen der der AG die Seite aufruft. */
.own-fact--count .own-fact__value {
  font-size: 19px;
}

.own-fact--art .own-fact__value {
  display: flex;
  align-items: center;
  gap: 8px;
}

.own-art {
  width: 26px;
  height: auto;
}

/* Aktionsraster. Es behaelt in jedem Zustand seine Form: eine Kachel, die
   nicht ausloesen kann, ist gesperrt und nennt den Grund darunter -- ein
   Tooltip erscheint auf einem Touchgeraet nie (docs/adr/0025). */
.own-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px;
  border-top: 1px solid var(--own-line);
}

.own-action {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.own-action__reason {
  color: var(--own-muted);
  font-size: 12px;
  text-align: center;
}

.own-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px 16px;
  border: 1px solid var(--own-border);
  border-radius: var(--own-radius-sm);
  background-color: #fff;
  color: var(--atz-dark);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.own-btn:hover {
  border-color: var(--atz-gray);
}

.own-btn:disabled {
  color: var(--own-muted);
  background-color: var(--own-shaded);
  cursor: not-allowed;
}

.own-btn--primary {
  background-color: var(--atz-red);
  border-color: var(--atz-red);
  color: #fff;
  font-weight: 700;
}

.own-btn--primary:hover {
  background-color: #9E0720;
  border-color: #9E0720;
}

.own-btn__icon {
  font-size: 15px;
  line-height: 1;
}

/* ---------------------------------------------------------- Angebotsliste */

.own-bids {
  margin-bottom: 8px;
}

.own-bids__title {
  margin: 0 0 14px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
}

/* Im Entwurf steht hier ein Filterkasten. Gefiltert wird an den Angeboten
   nichts -- die Auswahl, die es wirklich gibt, ist die Sortierung
   (web.order_owner.BID_SORTS), und die steht deshalb an dieser Stelle. */
.own-sort {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px 16px;
  border: 1px solid var(--own-border);
  border-radius: var(--own-radius);
  background-color: #fff;
}

.own-sort__icon {
  color: var(--atz-dark);
  line-height: 1;
}

.own-sort__label {
  color: var(--atz-dark);
  font-size: 15px;
  font-weight: 700;
}

.own-sort__select {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid var(--own-border);
  border-radius: var(--own-radius-sm);
  background-color: #fff;
  color: var(--atz-dark);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
}

.own-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Die Spaltenueberschriften gibt es nur in der Tabelle ab 768px. */
.own-legend {
  display: none;
}

.own-bid {
  border: 1px solid var(--own-border);
  border-radius: var(--own-radius);
  background-color: #fff;
}

/* Das Angebot, an dem der AG bereits gehandelt hat (angenommen, bestaetigt,
   abgeschlossen) -- nicht dasselbe wie "aufgeklappt". */
.own-bid--decided {
  border-color: var(--atz-red);
}

.own-bid[open] {
  border-color: var(--atz-red);
}

.own-bid[open] .own-bid__row {
  background-color: var(--own-red-tint);
}

.own-bid__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 12px;
  padding: 14px;
  cursor: pointer;
  list-style: none;
}

.own-bid__row::-webkit-details-marker {
  display: none;
}

.own-cell {
  min-width: 0;
}

.own-cell__label {
  color: var(--own-muted);
  font-size: 12px;
}

.own-cell--company {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
}

.own-meta {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.own-cell--rating {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}

.own-cell--since {
  color: var(--own-muted);
  font-size: 14px;
  white-space: nowrap;
}

.own-meta__sep {
  color: var(--own-muted);
}

.own-cell--price {
  grid-column: 1;
  grid-row: 3;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.own-cell--action {
  grid-column: 2;
  grid-row: 3;
  justify-self: end;
  align-self: end;
}

.own-flag {
  flex-shrink: 0;
  line-height: 1;
}

.own-flag .fi {
  width: 1.6em;
  height: 1.1em;
  border-radius: 2px;
}

.own-company {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.own-stars {
  color: var(--own-star);
  font-size: 14px;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.own-stars__off {
  color: var(--own-star-off);
}

.own-rating__value {
  font-weight: 700;
}

.own-rating__count {
  color: var(--own-muted);
}

.own-price {
  font-size: 19px;
  font-weight: 700;
  white-space: nowrap;
}

.own-details {
  width: auto;
  padding: 9px 16px;
}

/* Der Pfeil am "details"-Knopf zeigt nach unten und dreht sich beim
   Aufklappen. */
.own-caret {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.own-bid[open] .own-details .own-caret {
  transform: translateY(2px) rotate(-135deg);
}

.own-vehicles[open] .own-caret {
  transform: translateY(2px) rotate(-135deg);
}

.own-empty {
  margin: 0;
  padding: 28px 16px;
  border: 1px solid var(--own-border);
  border-radius: var(--own-radius);
  background-color: #fff;
  color: var(--own-muted);
  text-align: center;
}

/* ------------------------------------------- Aufgeklapptes Angebot */

.own-bid__detail {
  border-top: 1px solid var(--own-line);
}

.own-bid__col {
  padding: 16px 14px;
}

.own-bid__col--decide {
  border-top: 1px solid var(--own-line);
  background-color: #FCFCFC;
}

.own-bid__legend {
  margin: 0 0 12px;
  color: var(--own-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.own-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  margin: 0;
}

.own-contact__item {
  min-width: 0;
}

.own-contact__label {
  color: var(--own-muted);
  font-size: 12px;
}

.own-contact__value {
  margin: 2px 0 0;
  font-weight: 700;
  word-break: break-word;
}

.own-remark {
  margin: 14px 0 0;
  color: var(--own-muted);
  font-size: 14px;
}

.own-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

/* Das eine Aktionsfeld des Angebots. Welcher der vier Zustaende hier steht,
   entscheidet web.order_owner.owner_bid_action -- nicht dieses Stylesheet. */
.own-act {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 13px 16px;
  border: 1px solid transparent;
  border-radius: var(--own-radius-sm);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

/* Nur die beiden Zustaende, die wirklich etwas ausloesen ("Angebot annehmen",
   "Als erledigt markieren"), sind Knoepfe -- die uebrigen sind Schilder. */
button.own-act {
  cursor: pointer;
}

.own-act--accept {
  background-color: var(--atz-green);
  border-color: var(--atz-green);
  color: #fff;
}

/* Reiner Zustand, kein Knopf: der AG wartet auf das Transportunternehmen. */
.own-act--waiting {
  background-color: var(--own-star);
  border-color: var(--own-star);
  color: var(--atz-dark);
}

.own-act--accepted {
  background-color: var(--own-green-tint);
  border-color: var(--own-green-tint);
  color: var(--atz-green-dark);
}

.own-act--finish {
  background-color: #fff;
  border-color: var(--own-border);
  color: var(--atz-dark);
}

.own-hint {
  display: flex;
  gap: 8px;
  margin: 10px 0 0;
  padding: 12px 14px;
  border-radius: var(--own-radius-sm);
  background-color: var(--own-shaded);
  color: var(--own-muted);
  font-size: 13px;
}

.own-hint--accept {
  background-color: var(--own-green-tint);
}

.own-hint--waiting {
  background-color: var(--own-amber-tint);
}

.own-hint--accepted {
  background-color: var(--own-green-tint);
}

.own-hint--finish {
  background-color: var(--own-shaded);
}

.own-hint__icon {
  line-height: 1.4;
}

/* ----------------------------------------------------------- Bewertung */

/* Fuer die Bewertung nach FINISHED gibt es in diesem Auftrag keinen eigenen
   Entwurf. Das Sternfeld folgt deshalb dem Muster der Kundenmeinungen
   (web/static/web/css/reviews.css, .rev-rate): die Radio-Knoepfe stehen im
   Quelltext von 5 nach 1 und werden hier zurueckgedreht -- dadurch faerbt
   `:checked ~ ...` beim vierten Stern auch die drei links davon, ohne
   JavaScript. */
.own-rate {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 4px;
}

.own-rate__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.own-rate__option {
  font-size: 28px;
  line-height: 1;
  color: var(--own-star-off);
  cursor: pointer;
}

.own-rate__input:checked ~ .own-rate__option {
  color: var(--own-star);
}

.own-rate__input:focus-visible + .own-rate__option {
  outline: 2px solid var(--atz-dark);
  outline-offset: 2px;
}

.own-rate:hover .own-rate__option {
  color: var(--own-star-off);
}

.own-rate__option:hover,
.own-rate__option:hover ~ .own-rate__option {
  color: var(--own-star);
}

.own-field {
  margin: 0 0 14px;
  padding: 0;
  border: 0;
}

.own-field__label {
  display: block;
  float: none;
  width: auto;
  margin-bottom: 8px;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
}

.own-textarea {
  width: 100%;
  min-height: 96px;
  padding: 11px 12px;
  border: 1px solid var(--own-border);
  border-radius: var(--own-radius-sm);
  background-color: #fff;
  color: var(--atz-dark);
  font-family: inherit;
  font-size: 15px;
  resize: vertical;
}

.own-textarea:focus {
  outline: 2px solid var(--atz-red);
  outline-offset: -1px;
}

.own-rating-box {
  margin-bottom: 24px;
  padding: 16px;
  border: 1px solid var(--own-border);
  border-radius: var(--own-radius);
  background-color: #fff;
}

.own-rating-box__title {
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 700;
}

.own-rating-box__done {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 14px;
}

.own-rating-box__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--own-green-tint);
  color: var(--atz-green-dark);
}

/* Der Kasten um Formular und Hinweisliste. Auf dem Handy untereinander, ab
   768px nebeneinander (Screens act_m_bewerten / act_d_bewerten). */
.own-review {
  margin-bottom: 24px;
}

.own-review__title {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
}

.own-review__lead {
  margin: 0 0 16px;
  color: var(--own-muted);
  font-size: 14px;
}

.own-review__body {
  display: grid;
  gap: 16px;
}

/* Im Bewertungsblock traegt der Kasten selbst keinen Abstand mehr -- den
   setzt das Raster. */
.own-review__body .own-rating-box {
  margin-bottom: 0;
}

/* Die beauftragte Firma -- dieselben Bausteine wie eine Angebotszeile (Flagge,
   Sterne, Preis), aber als einzelne hervorgehobene Karte: sie ist keine Wahl
   mehr, sondern die Feststellung, wer gefahren ist. */
.own-winner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 14px 16px;
  border: 1px solid var(--atz-red);
  border-radius: var(--own-radius);
  background-color: var(--own-red-tint);
}

.own-winner__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.own-winner__name {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.own-winner__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--own-muted);
  font-size: 13px;
}

.own-winner__price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-left: auto;
  text-align: right;
}

.own-winner__label {
  color: var(--own-muted);
  font-size: 12px;
}

.own-review__firm {
  margin: 0;
  padding: 11px 12px;
  border: 1px solid var(--own-border);
  border-radius: var(--own-radius-sm);
  background-color: var(--own-shaded);
  font-weight: 600;
}

.own-notice {
  padding: 16px;
  border: 1px solid var(--own-border);
  border-radius: var(--own-radius);
  background-color: var(--own-shaded);
}

.own-notice__title {
  margin: 0 0 12px;
  color: var(--own-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.own-notice__list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.own-notice__item {
  display: flex;
  gap: 10px;
  color: var(--own-muted);
  font-size: 13px;
}

.own-notice__check {
  flex-shrink: 0;
  color: var(--atz-red);
  font-weight: 700;
}

.own-notice__head {
  display: block;
  color: var(--atz-dark);
  font-size: 14px;
}

/* -------------------------------------------------- Geloeschter Auftrag */

/* Ein geloeschter Auftrag (Zustand CANCELLED) hat keine Verwaltungsflaeche
   mehr -- nur noch die Bestaetigung und die beiden naechsten Schritte
   (Screens act_m_geloescht / act_d_geloescht). */
.own-gone {
  padding: 40px 16px 48px;
  text-align: center;
}

.own-gone__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin-bottom: 20px;
  border: 1px solid var(--own-red-tint);
  border-radius: 50%;
  background-color: #fff;
  color: var(--atz-red);
  font-size: 30px;
}

.own-gone__title {
  margin: 0 0 12px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
}

.own-gone__text {
  max-width: 44ch;
  margin: 0 auto 24px;
  color: var(--own-muted);
}

.own-gone__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 420px;
  margin: 0 auto;
}

/* -------------------------------------------------- E-Mail-Bestaetigung */

/* Der Kasten steht im Aktionskasten zwischen den Eckdaten und dem
   Aktionsraster: solange die Bestaetigung fehlt, ist er der einzige Schritt,
   der die Anfrage weiterbringt (Screens na_m_pending / na_d_pending). */
.own-confirm {
  padding: 16px;
  border-top: 1px solid var(--own-line);
}

.own-confirm__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 12px;
  border-radius: var(--own-radius-sm);
  background-color: var(--own-amber-tint);
  color: var(--atz-amber-dark);
  font-size: 18px;
}

.own-confirm__title {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
}

/* Premium-Schutz-Status (eigener Block, kein Teil des Aktionsrasters --
   siehe _order_owner_view.html). Roter statt amberfarbener Akzent, da
   kein offener Schritt wie bei der E-Mail-Bestaetigung, sondern ein
   aktiver, bezahlter Zustand. */
.own-confirm--premium .own-confirm__icon {
  background-color: var(--atz-red-tint, #fbe9e9);
  color: var(--atz-red);
}

.own-btn--secondary {
  background-color: #fff;
  color: var(--atz-dark, #212529);
  border: 1px solid var(--own-line);
}

.own-btn--secondary:hover {
  background-color: var(--own-amber-tint, #f5f5f5);
}

.own-confirm__text {
  margin: 0 0 14px;
  color: var(--own-muted);
  font-size: 14px;
}

.own-confirm__text strong {
  color: var(--atz-dark);
  word-break: break-word;
}

/* ---------------------------------------------------------- Anzahlung */

.own-deposit {
  margin-bottom: 24px;
}

/* Der Werbeteil: getoenter Kasten, wie im Entwurf. Die Abbildung daneben
   entfaellt -- es gibt sie nicht als Anlage, und ein Platzhalter waere
   Dekoration ohne Aussage. */
.own-deposit__intro {
  padding: 20px 16px;
  border-radius: var(--own-radius);
  background-color: var(--own-red-tint);
}

.own-deposit__title {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
}

.own-deposit__lead {
  margin: 0 0 16px;
  color: var(--own-muted);
  font-size: 14px;
}

.own-perks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.own-perk {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
}

.own-perk__icon {
  color: var(--atz-red);
}

/* --- Die drei waehlbaren Abwicklungs-Zeitraeume.

   Ohne JavaScript: die drei Radio-Knoepfe stehen im Quelltext VOR den Karten
   und vor den drei Zusammenfassungen, alle drei als Geschwister im selben
   Kasten. Damit erreicht `:checked ~ ...` beide -- die angekreuzte Karte wird
   hervorgehoben, ihre Zusammenfassung eingeblendet. Dasselbe Muster wie beim
   Sternfeld (.own-rate), nur ueber zwei Ebenen statt einer.

   Die drei Schluessel stehen ausgeschrieben, weil CSS nicht zaehlen kann,
   welcher Knopf zu welcher Karte gehoert. Es sind dieselben drei wie in
   web/price_estimate.py (PRICE_TIERS) -- kommt eine vierte Stufe dazu, gehoert
   hier eine Zeile mehr hin. */
.own-tiers {
  margin-top: 24px;
}

.own-tiers__title {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
}

.own-tiers__lead {
  margin: 0 0 16px;
  color: var(--own-muted);
  font-size: 14px;
}

.own-tier__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.own-tiers__cards {
  display: grid;
  gap: 12px;
}

.own-tier {
  display: block;
  padding: 14px 16px;
  border: 1px solid var(--own-border);
  border-radius: var(--own-radius);
  background-color: #fff;
  cursor: pointer;
}

.own-tier__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

/* Der Radio-Knopf selbst ist unsichtbar; gezeichnet wird er hier, damit er in
   der Karte sitzt und die ganze Karte anklickbar bleibt. */
.own-tier__dot {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: 2px solid var(--own-star-off);
  border-radius: 50%;
}

.own-tier__name {
  font-size: 15px;
  font-weight: 700;
}

.own-tier__badge {
  margin-left: auto;
  padding: 3px 10px;
  border-radius: 999px;
  background-color: var(--atz-red);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.own-tier__caption {
  display: block;
  color: var(--own-muted);
  font-size: 13px;
}

.own-tier__price {
  display: block;
  margin-top: 2px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
}

.own-tier__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--own-line);
  font-size: 13px;
}

.own-tier__share {
  color: var(--own-muted);
}

.own-tier__deposit {
  color: var(--atz-red);
  font-size: 15px;
  font-weight: 700;
}

.own-tier__input[value="price_flexible"]:checked ~ .own-tiers__cards [data-tier="price_flexible"],
.own-tier__input[value="price_standard"]:checked ~ .own-tiers__cards [data-tier="price_standard"],
.own-tier__input[value="price_express"]:checked ~ .own-tiers__cards [data-tier="price_express"] {
  border-color: var(--atz-red);
  box-shadow: 0 0 0 1px var(--atz-red);
}

.own-tier__input[value="price_flexible"]:checked ~ .own-tiers__cards [data-tier="price_flexible"] .own-tier__dot,
.own-tier__input[value="price_standard"]:checked ~ .own-tiers__cards [data-tier="price_standard"] .own-tier__dot,
.own-tier__input[value="price_express"]:checked ~ .own-tiers__cards [data-tier="price_express"] .own-tier__dot {
  border-color: var(--atz-red);
  border-width: 5px;
}

/* Die Tastatur sieht den unsichtbaren Knopf nicht -- der Rahmen der Karte
   muss den Fokus zeigen, sonst ist die Auswahl blind bedienbar. */
.own-tier__input[value="price_flexible"]:focus-visible ~ .own-tiers__cards [data-tier="price_flexible"],
.own-tier__input[value="price_standard"]:focus-visible ~ .own-tiers__cards [data-tier="price_standard"],
.own-tier__input[value="price_express"]:focus-visible ~ .own-tiers__cards [data-tier="price_express"] {
  outline: 2px solid var(--atz-dark);
  outline-offset: 2px;
}

/* Die Zusammenfassung mit dem Knopf zur Kasse: je Zeitraum eine, sichtbar ist
   die des angekreuzten. */
.own-pay {
  display: none;
  flex-direction: column;
  gap: 14px;
  margin-top: 16px;
  padding: 18px 16px;
  border-radius: var(--own-radius);
  background-color: var(--atz-dark);
  color: #fff;
}

.own-tier__input[value="price_flexible"]:checked ~ .own-pay[data-tier="price_flexible"],
.own-tier__input[value="price_standard"]:checked ~ .own-pay[data-tier="price_standard"],
.own-tier__input[value="price_express"]:checked ~ .own-pay[data-tier="price_express"] {
  display: flex;
}

.own-pay__title {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 700;
}

.own-pay__note {
  margin: 0;
  color: #D6D5D8;
  font-size: 13px;
}

.own-faq {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--own-border);
  border-radius: var(--own-radius);
  background-color: #fff;
}

.own-faq__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.own-faq__title::-webkit-details-marker {
  display: none;
}

.own-faq[open] .own-caret {
  transform: translateY(2px) rotate(-135deg);
}

.own-faq__body {
  margin-top: 12px;
}

.own-faq__text {
  margin: 0 0 10px;
  color: var(--own-muted);
  font-size: 14px;
}

.own-faq__text:last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------ Passende Firmen */

.own-firms {
  margin-bottom: 24px;
}

.own-firms__title {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
}

.own-firms__lead {
  margin: 0 0 20px;
  color: var(--own-muted);
  font-size: 14px;
}

.own-group {
  margin-bottom: 20px;
}

.own-group__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.own-group__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

/* Die Zahl nennt den vollen Bestand der Gruppe, nicht die Zahl der Karten
   (web.order_owner.owner_company_groups). */
.own-group__count {
  color: var(--atz-red);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.own-cards {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.own-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--own-border);
  border-radius: var(--own-radius);
  background-color: #fff;
}

.own-card__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: var(--own-radius-sm);
  background-color: var(--own-red-tint);
  color: var(--atz-red);
  font-size: 14px;
  font-weight: 700;
}

.own-card__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1 1 auto;
}

.own-card__name {
  color: var(--atz-dark);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

.own-card__name:hover {
  text-decoration: underline;
}

.own-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  color: var(--own-muted);
  font-size: 12px;
}

/* Das Abzeichen steht fuer die geprüfte EU-Lizenz -- im Entwurf erst ab der
   breiten Ansicht, hier auch auf dem Handy: es ist eine Zusage, keine
   Zierde. */
.own-card__badge {
  flex: 0 0 auto;
  padding: 4px 9px;
  border-radius: 999px;
  background-color: var(--own-green-tint);
  color: var(--atz-green-dark);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

/* ================================================================ Desktop */

@media (min-width: 768px) {
  .own-title {
    font-size: 32px;
  }

  /* --- Kopfbereich waagerecht: Status, Angebote, Von, Nach, Menge, Strecke
     in einer Zeile, das Fahrzeugsinnbild rechts aussen. */
  .own-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 28px;
    padding: 20px 24px;
  }

  .own-status {
    padding: 12px 20px;
  }

  .own-fact--from {
    padding-left: 28px;
    border-left: 1px solid var(--own-line);
  }

  /* Die Fahrzeugart wird rechts aussen zum Sinnbild -- Beschriftung und Wort
     sagen daneben nichts mehr, was die Zeile nicht schon zeigt. */
  .own-fact--art {
    margin-left: auto;
    padding: 10px 14px;
    border-radius: var(--own-radius-sm);
    background-color: var(--own-red-tint);
  }

  .own-fact--art .own-fact__label,
  .own-fact--art .own-art__text {
    display: none;
  }

  .own-actions {
    padding: 16px 24px;
    flex-wrap: nowrap;
    align-items: flex-start;
  }

  /* "Erledigt" ist der letzte Schritt und steht deshalb abgesetzt rechts. */
  .own-action--finish {
    margin-left: auto;
  }

  .own-bids__title {
    font-size: 26px;
  }

  /* --- Aus den Karten wird eine Tabelle: ein Kasten, Zeilen mit Trennlinie.
     Kopfzeile und Zeile teilen sich dieselben Spaltenbreiten. */
  .own-list {
    display: block;
    border: 1px solid var(--own-border);
    border-radius: var(--own-radius);
    background-color: #fff;
    overflow: hidden;
  }

  .own-legend,
  .own-bid__row {
    display: grid;
    grid-template-columns:
      minmax(0, 1.8fr) 190px 110px minmax(0, 0.7fr) 150px;
    align-items: center;
    gap: 0 12px;
    padding: 14px 20px;
  }

  .own-legend {
    border-bottom: 1px solid var(--own-border);
    color: var(--own-muted);
    font-size: 13px;
  }

  .own-legend__cell--price {
    text-align: right;
  }

  .own-bid {
    border: 0;
    border-top: 1px solid var(--own-line);
    border-radius: 0;
  }

  .own-bid:first-of-type {
    border-top: 0;
  }

  .own-bid--decided {
    border-color: var(--own-line);
  }

  .own-bid[open] {
    border-color: var(--own-line);
  }

  /* Die Metazeile der Karte verschwindet als Kasten und gibt ihre Zellen
     direkt an das Zeilenraster weiter -- nur so stehen Bewertung und "Seit"
     in einer Zeile mit den Spaltenueberschriften. */
  .own-meta {
    display: contents;
  }

  .own-cell--company {
    grid-column: 1;
    grid-row: 1;
    font-size: 15px;
    font-weight: 400;
  }

  .own-cell--rating {
    grid-column: 2;
    grid-row: 1;
  }

  .own-cell--since {
    grid-column: 3;
    grid-row: 1;
  }

  .own-cell--price {
    grid-column: 4;
    grid-row: 1;
    align-items: flex-end;
  }

  .own-cell--action {
    grid-column: 5;
    grid-row: 1;
    justify-self: stretch;
    align-self: center;
  }

  .own-cell__label,
  .own-meta__sep {
    display: none;
  }

  .own-price {
    font-size: 16px;
  }

  .own-details {
    width: 100%;
  }

  /* --- Aufgeklappte Zeile: links Kontakt, rechts der Aktionsbereich. */
  .own-bid__detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
  }

  .own-bid__col {
    padding: 20px 24px;
  }

  .own-bid__col--decide {
    border-top: 0;
    border-left: 1px solid var(--own-line);
  }

  .own-vehicles__body {
    padding: 20px 24px;
  }

  .own-specs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .own-rating-box {
    padding: 20px 24px;
  }

  /* --- Der Bestaetigungskasten steht im Entwurf als eigene Karte rechts
     neben dem Kopfbereich. Hier bleibt er im Aktionskasten, ruecht aber nach
     rechts und behaelt Kartenbreite -- dieselbe Stelle im Blick, ohne die
     Kopfzeile in zwei Spalten zu brechen. */
  .own-confirm {
    max-width: 460px;
    margin-left: auto;
    padding: 20px 24px;
  }

  .own-deposit__intro {
    padding: 28px 32px;
  }

  .own-deposit__title {
    font-size: 28px;
    max-width: 30ch;
  }

  .own-tiers__title {
    font-size: 26px;
  }

  /* Die drei Zeitraeume stehen nebeneinander, wie im Desktop-Entwurf. */
  .own-tiers__cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Hinweis links, Knopf rechts -- auf dem Handy stehen sie untereinander und
     der Knopf nimmt die volle Breite. */
  .own-pay {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
  }

  .own-pay__btn {
    width: auto;
    flex: 0 0 auto;
  }

  .own-review__title {
    font-size: 26px;
  }

  /* Formular links, Hinweisliste rechts daneben. */
  .own-review__body {
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
  }

  .own-gone {
    padding: 72px 24px 88px;
  }

  .own-gone__title {
    font-size: 36px;
  }

  /* Die beiden Schritte nebeneinander und nur so breit wie ihre Beschriftung
     -- auf dem Handy stehen sie untereinander ueber die volle Breite. */
  .own-gone__actions {
    flex-direction: row;
    justify-content: center;
    max-width: none;
  }

  .own-gone__actions .own-btn {
    width: auto;
    padding: 13px 24px;
  }

  .own-firms__title {
    font-size: 26px;
  }

  /* Zwei Karten nebeneinander, wie im Desktop-Entwurf. */
  .own-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}