/* ================================
   Einkaufshistorie als Bestellkarte
   Scope: #div30673
================================ */

#div30673 {
  --oh-text: #333;
  --oh-muted: #777;
  --oh-border: #cfcfcf;
  --oh-light-border: #e6e6e6;
  --oh-purple: #7a3ea1;
  --oh-orange: #f28c28;
  --oh-green: #7ba832;

  padding: 0;
  color: var(--oh-text);
}

/* Überschrift optional dezenter */
#div30673 #head29848_7 {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

/* äußerer Container */
#div30673 #div37602_1 {
  padding: 0;
  margin: 0;
  background: transparent;
}

/* ====== 1) HEADER: war "display:none" → jetzt als Spalten-Header ====== */
/* ERSETZT den bisherigen Block:
   #div30673 #divOrderHistoryHeader { display: none; }
*/
#div30673 #divOrderHistoryHeader {
  display: grid;
  grid-template-columns: 140px 110px 1fr 1fr 1fr 60px;
  column-gap: 16px;
  align-items: center;

  padding: 12px;
  margin-bottom: 16px;

  background: #ececec;
  border-bottom: 2px solid #bdbdbd;

  font-size: 0.95rem;
  font-weight: 700;
  color: #111;
}

/* Bootstrap-Padding der Header-Zellen entfernen (für saubere Ausrichtung) */
#div30673 #divOrderHistoryHeader > [class*="col-"] {
  padding-left: 0;
  padding-right: 0;
}

/* Mobile-Duplikate, Details- und Leerspalten im Header ausblenden */
#div30673 #divOrderHistoryHeader > div[id="div37661_1"],
#div30673 #divOrderHistoryHeader > div[id="txt37608_6"],
#div30673 #divOrderHistoryHeader > div[id="txt37608_7"],
#div30673 #divOrderHistoryHeader > div[id="txt37608_5"],
#div30673 #divOrderHistoryHeader > div[id="txt37608_4"] {
  display: none;
}

/* Zahlenspalten im Header rechtsbündig (passend zu den Werten) */
#div30673 #divOrderHistoryHeader > div[id="txt37606_1"],
#div30673 #divOrderHistoryHeader > div[id="txt37607_1"],
#div30673 #divOrderHistoryHeader > div[id="txt37608_2"] {
  text-align: right;
}






/* ====== 2) .table-data: Grid von 2 Spalten → 6 Spalten umbauen ====== */
/* ERSETZT den bisherigen #div30673 .table-data { ... } Block komplett */
#div30673 .table-data {
  display: grid;
  grid-template-columns: 140px 110px 1fr 1fr 1fr 60px;
 grid-template-areas:
    "belegnr datum netto steuer brutto wkz"
    "details details details details details details"
    "actions actions actions actions actions actions";
  column-gap: 16px;
  row-gap: 6px;

  padding: 10px 12px 14px 12px;
  margin-bottom: 26px;

  border-top: 2px solid #bdbdbd;
  border-bottom: 2px solid #bdbdbd;
  background: #fff;
}

/* Bootstrap-Padding der Meta-Felder entfernen → exakt unter den Headern */
#div30673 .table-data > span[class*="col-"] {
  padding-left: 0;
  padding-right: 0;
}


/* Standard-Bootstrap-Abstände innerhalb der Row neutralisieren */
#div30673 .table-data > * {
  max-width: none;
}


/* ====== 3) Belegnr.: grid-area "meta" → "belegnr", "Nr."-Prefix raus ====== */
/* ERSETZT den bisherigen span[id^="fld37613"] Block
   und LÖSCHT die zugehörige ::before-Regel (content: "Nr.";) komplett */
#div30673 .table-data span[id^="fld37613"] {
  grid-area: belegnr;
  display: block;
  width: auto;
  padding: 4px 0 0 0;
  font-size: 1rem;
  font-weight: 600;
  color: #111;
}




/* ====== 4) Datum: grid-area "meta" → "datum", margin-Hack raus ====== */
/* ERSETZT den bisherigen span[id^="fld37615"] Block */
#div30673 .table-data span[id^="fld37615"] {
  grid-area: datum;
  width: auto;
  padding-top: 4px;
  font-size: 1rem;
  color: #111;
}



/* ====== 5) Netto/Steuer/Brutto/WKZ: aus display:none → sichtbar in Spalten ===== */
/* ERSETZT den bisherigen großen Sammel-Block:
   span[id^="fld37616"], ...37617, ...37618, ...37652, div37661 { display:none; }
*/
#div30673 .table-data span[id^="fld37616"] { grid-area: netto;  }
#div30673 .table-data span[id^="fld37617"] { grid-area: steuer; }
#div30673 .table-data span[id^="fld37618"] { grid-area: brutto; }

#div30673 .table-data span[id^="fld37616"],
#div30673 .table-data span[id^="fld37617"],
#div30673 .table-data span[id^="fld37618"] {
  display: block;
  padding-top: 4px;
  font-size: 1rem;
  color: #111;
  text-align: right;
}

/* Währung: nur Hauptfeld zeigen, Mobile-Duplikate + leere Mobile-Zelle ausblenden */
#div30673 .table-data span[id="fld37652"] {
  grid-area: wkz;
  display: block;
  padding-top: 4px;
  font-size: 1rem;
  color: #111;
}

#div30673 .table-data span[id="fld37652_1"],
#div30673 .table-data span[id="fld37652_2"],
#div30673 .table-data > div[id="div37661"] {
  display: none;
}

/* Detailbereich links */
#div30673 #div37653 {
  grid-area: details;

  width: 100%;
  padding: 0;
  margin: 0;

  overflow: visible;
}

/* Formular neutralisieren */
#div30673 #div37653 form {
  margin: 0;
}

/* ===== Bestellpositionen im Stil der Belegdetails ===== */
#div30673 #lst30708_1,
#div30673 #lst30708_1 tbody {
  display: block;
  width: 100%;
}

/* Geister-Spalten (colgroup) + Kopfzeile ausblenden */
#div30673 #lst30708_1 colgroup { display: none; }
#div30673 #lst30708_1 tr:first-child { display: none; }

/* Produktzeile: 2-Reihen-Grid (wie Belegdetails) */
#div30673 #lst30708_1 tr {
  display: grid;
  grid-template-columns: auto auto auto auto 1fr auto auto;
  grid-template-areas:
    "name  name  name  name  name  gpreis cart"
    "art   preis menge me    .     .      .   ";
  column-gap: 16px;
  row-gap: 4px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--oh-light-border);
}
#div30673 #lst30708_1 tr:last-child { border-bottom: none; }

/* Zellen neutralisieren */
#div30673 #lst30708_1 td {
  display: block;
  padding: 0;
  border: 0;
}

/* Zellen den Grid-Bereichen zuweisen (Artnr,Name,Menge,ME,EPreis,GPreis,Icon) */
#div30673 #lst30708_1 td:nth-child(1) { grid-area: art; }
#div30673 #lst30708_1 td:nth-child(2) { grid-area: name; }
#div30673 #lst30708_1 td:nth-child(3) { grid-area: menge; }
#div30673 #lst30708_1 td:nth-child(4) { grid-area: me; }
#div30673 #lst30708_1 td:nth-child(5) { grid-area: preis; }
#div30673 #lst30708_1 td:nth-child(6) { grid-area: gpreis; }
#div30673 #lst30708_1 td:nth-child(7) { grid-area: cart; }

/* Titelzeile: Name */
#div30673 #lst30708_1 td:nth-child(2) {
  font-size: 15px;
  font-weight: 500;
  color: var(--oh-purple);
}
/* G-Preis rechts, fett */
#div30673 #lst30708_1 td:nth-child(6) {
  justify-self: end;
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
  white-space: nowrap;
  text-align: right !important;
}
/* Icon-Zelle (Lupe) */
#div30673 #lst30708_1 td:nth-child(7) {
  justify-self: end;
  opacity: 0.55;
  cursor: pointer;
}
#div30673 #lst30708_1 td:nth-child(7):hover { opacity: 1; }
#div30673 #lst30708_1 td:nth-child(7) img { width: 16px; height: 16px; display: block; }
/* leere Icon-Zelle (Versandkosten) ausblenden */
#div30673 #lst30708_1 td:nth-child(7):empty { display: none; }

/* Meta-Zeile (klein, grau, nebeneinander) */
#div30673 #lst30708_1 td:nth-child(1),
#div30673 #lst30708_1 td:nth-child(3),
#div30673 #lst30708_1 td:nth-child(4),
#div30673 #lst30708_1 td:nth-child(5) {
  font-size: 12px;
  color: var(--oh-muted);
  white-space: nowrap;
  text-align: left !important;
}
#div30673 #lst30708_1 td:nth-child(1)::before { content: "Artikelnr.: "; }
#div30673 #lst30708_1 td:nth-child(5)::before { content: "Preis: "; }
#div30673 #lst30708_1 td:nth-child(3)::before { content: "Menge: "; }

/* ===== Aktionsbereich (Nachbestellen, PDF-Download, Status, Stornieren) ===== */

/* Container: eigene Zeile in der Karte, block statt flex-column */
#div30673 #div37622_1 {
  grid-area: actions;
  display: block;
  width: 100%;
  max-width: none !important;
  padding: 12px 0 0 0;
  margin: 0 !important;
}

/* Zeile 1: "Nachbestellen: WSxxxx" als EIN klickbarer lila Button */

/* Label-Span ausblenden – Text kommt per ::before in den Link */
#div30673 #div37622_1 span[id^="link37667"] {
  display: none;
}

/* Der Belegnummer-Link wird zum Button */
#div30673 #div37622_1 a[id^="link37667"] {
  display: inline-block;
  background: #662483;
  color: #fff;
  border-radius: 4px;
  padding: 10px 22px;
  margin-bottom: 4px;
  font-family: inherit;       /* Icon-Font von .pe-7s-look neutralisieren */
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease;
}

/* "Nachbestellen: " vor die Belegnummer setzen (steckt im Link → klickbar) */
#div30673 #div37622_1 a[id^="link37667"]::before {
  content: "Nachbestellen: ";
  font-family: inherit;       /* wichtig: sonst Icon-Font-Zeichensalat */
  font-weight: 600;
}

#div30673 #div37622_1 a[id^="link37667"]:hover {
  background: #4c1a63;
  color: #fff;
  text-decoration: none;
}

/* Zeile 2: PDF-Download (eigene Zeile, Icon klebt am Text) */
#div30673 #div37622_1 #cmd37657 {
  display: block;
  width: fit-content;      /* statt width:auto → nur so breit wie der Text */
  position: relative;      /* Icon dockt am Textende an statt am Kartenrand */
  margin-top: 8px;
  font-size: 0.95rem;
  color: var(--oh-purple);
  text-decoration: none;
}

/* Zeile 3: Status-Formular (eigene Zeile) */
#div30673 #div37622_1 form {
  display: block;
  width: 100%;
  margin: 8px 0 0 0;
}

/* "Status:" und Wert nebeneinander */
#div30673 #div37622_1 form > div {
  display: inline;
  font-size: 0.95rem;
  color: var(--oh-text);
}
#div30673 #div37622_1 form > div:first-of-type {
  margin-right: 4px;
}

/* Stornieren-Button in eigener Zeile */
#div30673 #div37622_1 #cmd17658 {
  display: block;
  margin-top: 8px;
}


/* ===== Seite "Meine Tiere" ===== */

/* Haupt-Überschrift "Meine Tiere" */
.contentbox #head41721 {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

/* Tier-Karte: Rahmen + Innenabstand + Abstand nach unten */
.contentbox .mtmh:has(> h1[id^="head41721_"]) {
  border: 1px solid #cfcfcf;
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 16px;
  background: #fff;
  max-width: 480px;
}

/* Überschrift "1. Tier" usw. kleiner */
.contentbox h1[id^="head41721_"] {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 10px 0;
  color: #111;
}

/* Tier-Angaben (Name, Art, Geburtsdatum) etwas luftiger */
.contentbox .mtmh:has(> h1[id^="head41721_"]) span {
  display: inline-block;
  line-height: 1.6;
  color: var(--oh-text);
}

/* "bearbeiten"-Link absetzen */
.contentbox a[id^="kontotierbearbeiten"] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  color: var(--oh-purple);
  text-decoration: none;
  font-size: 0.9rem;
}

.contentbox a[id^="kontotierbearbeiten"]:hover {
  text-decoration: underline;
}


/* ===== Seite "Meine Tiere ändern" (Bearbeiten-Formular) ===== */

/* Seiten-Überschrift "Meine Tiere" + Einleitungstext, linksbündig mit Boxbreite */
#newadrmeinetierept_2 {
  max-width: 640px;
  margin: 24px auto 8px auto;
  padding: 0;
  text-align: left;
}

/* jede Tier-Box: zentriert, mit Rand links/rechts, Rahmen + Innenabstand */
div[id^="form37455_"] {
  max-width: 640px;
  margin: 0 auto 24px auto;
  padding: 20px 24px;

  border: 1px solid #cfcfcf;
  border-radius: 8px;
  background: #fff;
}

/* Überschrift "Tier 1" usw. */
div[id^="form37455_"] h1[id^="head41809"] {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 16px 0;
  color: #111;
}

/* Zeilen-Label (Tiername, Tierart, Geburtsdatum) größer, jeweils eigene Zeile */
div[id^="form37455_"] span[id^="lblfld"] {
  display: block;
  margin-top: 12px;
  margin-bottom: 4px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--oh-text);
}

/* Eingabefelder volle Boxbreite + Abstand nach unten (Luft vor dem Button) */
div[id^="form37455_"] input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  font-size: 0.95rem;
  margin-bottom: 16px;
}

/* Absenden-Button bündig über volle Boxbreite (myfactory-Klassen überschreiben) */
div[id^="form37455_"] button[type="submit"] {
  display: block;
  width: 100% !important;
  margin: 12px 0 0 0 !important;
  float: none !important;
}

/* "Zurück"-Link unten */
#newadrback_2 {
  display: inline-block;
  margin: 8px 0 32px 0;
}

/* ===== Belegdetails – Styling analog Einkaufshistorie ===== */

/* ---- Seite zentrieren + Breite geben ---- */


/* ---- Kopfbereich (Titel + Datum) ---- */
.col-12.d-flex.flex-wrap h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 4px 0;
}
.col-12.d-flex.flex-wrap .col-md-6:first-child > span {
  font-size: 13px;
  color: #8a8a8a;
}

/* ---- Summen rechts (Netto / Steuer / Brutto) ---- */
.col-12.d-flex.flex-wrap .text-right span {
  font-size: 14px;
  color: #666;
  line-height: 1.9;
}
.col-12.d-flex.flex-wrap .text-right > span:nth-last-of-type(2),
.col-12.d-flex.flex-wrap .text-right > span:nth-last-of-type(1) {
  font-size: 17px;
  font-weight: 700;
  color: #1a1a1a;
}

/* ---- Trennlinie ---- */
.col-12.d-flex.flex-wrap hr {
  border: none;
  border-top: 1px solid #e2e2e2;
  margin: 20px 0;
}

/* ---- Button-Basis (Warenkorb + Zurück-Link identisch) ---- */
.btn-cart,
.row:has(.order-pos-table) + a {
  display: inline-block;
  appearance: none;
  background: #662483;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease;
}
.btn-cart:hover,
.row:has(.order-pos-table) + a:hover {
  background: #4c1a63;
  color: #fff;
  text-decoration: none;
}
.quickview-btn-cart { margin-top: 14px; }
.row:has(.order-pos-table) + a { margin-top: 20px; display: inline-block; }  /* "Zurück zur Bestellhistorie" */ 

/* ===== Produkttabelle -> 2-zeiliges Grid-Layout ===== */
.order-pos-table table,
.order-pos-table table tbody {
  display: block;
  width: 100%;
}

/* Text-Kopfzeile ausblenden */
.order-pos-table table tr:first-child { display: none; }

/* Jede Produktzeile: Grid mit 2 Reihen */
.order-pos-table table tr:not(:first-child) {
  display: grid;
  grid-template-columns: auto auto auto auto 1fr auto auto;
  grid-template-areas:
    "name  name  name  name  name  gpreis cart"
    "art   preis menge me    .     .      .   ";
  column-gap: 16px;
  row-gap: 4px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #e6e6e6;
}
.order-pos-table table tr:not(:first-child):last-child { border-bottom: none; }

/* Zellen den Grid-Bereichen zuweisen (DOM-Reihenfolge: Artnr,Name,Menge,ME,EPreis,GPreis,Cart) */
.order-pos-table table td:nth-child(1) { grid-area: art; }     /* Artikelnr. */
.order-pos-table table td:nth-child(2) { grid-area: name; }    /* Name */
.order-pos-table table td:nth-child(3) { grid-area: menge; }   /* Menge */
.order-pos-table table td:nth-child(4) { grid-area: me; }      /* ME */
.order-pos-table table td:nth-child(5) { grid-area: preis; }   /* E-Preis */
.order-pos-table table td:nth-child(6) { grid-area: gpreis; }  /* G-Preis */
.order-pos-table table td:nth-child(7) { grid-area: cart; }    /* Warenkorb */

/* Titelzeile */
.order-pos-table table td:nth-child(2) {
  font-size: 15px;
  font-weight: 500;
  color: #662483;
}
.order-pos-table table td:nth-child(6) {
  justify-self: end;
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
  white-space: nowrap;
}
.order-pos-table table td:nth-child(7) {
  justify-self: end;
  opacity: 0.55;
  cursor: pointer;
}
.order-pos-table table td:nth-child(7):hover { opacity: 1; }
.order-pos-table table td:nth-child(7) img { width: 16px; height: 16px; display: block; }

/* Meta-Zeile (klein, grau, nebeneinander) */
.order-pos-table table td:nth-child(1),
.order-pos-table table td:nth-child(3),
.order-pos-table table td:nth-child(4),
.order-pos-table table td:nth-child(5) {
  font-size: 12px;
  color: #8a8a8a;
  white-space: nowrap;
}
.order-pos-table table td:nth-child(1)::before { content: "Artikelnr.: "; }
.order-pos-table table td:nth-child(5)::before { content: "Preis: "; }
.order-pos-table table td:nth-child(3)::before { content: "Menge: "; }

/* ===== Bestellhistorie: Kopfbereich aufräumen ===== */

/* 1) "Deine Bestellhistorie" linksbündig zur Tabelle + Abstand darunter kleiner */
.contentbox .pssnh > #ptbestell {
  padding-left: 0 !important;        /* .pllh-Einzug raus → nach links */
  margin: 0 0 10px -3px !important;  /* -3px = an Tabellenkante angleichen; bei Bedarf 0…-6px justieren */
}



/* 4) großen Abstand über der Tabelle (Bootstrap mt-4) entfernen */
#div30673 #div37602_1 {
  margin-top: 0 !important;
}