/* Mitte (mitte.textil.team) - ergänzt stil.css. Mobil zuerst, Tabellen scrollen in ihrem Rahmen. */

.mitte { --mitte-akzent: #54b3a3; --mitte-rosa: #d6207a; }
.mitte .mitte__inhalt { max-width: 1240px; width: 100%; min-width: 0; margin-inline: auto; }  /* mittig, auch am iMac; sonst waechst der Bereich mit der breitesten Chip-Reihe */

.mitte__marke { display: flex; align-items: center; gap: 12px; text-decoration: none; min-height: 48px; }
.mitte__marke img { height: 40px; width: auto; }
.mitte__marke span { font-size: 20px; font-weight: 700; letter-spacing: .02em; }
.mitte__person { display: flex; align-items: center; gap: 4px; min-width: 0; }
.mitte__name { color: var(--gedaempft); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }
@media (max-width: 480px) { .mitte__name { display: none; } }

.auswertung__kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.auswertung__kopf h1 { margin-bottom: 4px; }
.auswertung__unter { margin: 0 0 16px; font-weight: 600; }
.auswertung__zeit { color: var(--gedaempft); font-weight: 400; }
.auswertung__hinweis { color: var(--gedaempft); font-size: 13px; margin: 8px 0 0; }

/* Filter */
.filter { display: grid; gap: 10px; margin: 0 0 24px; }
.filter__shops, .filter__zeiten { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.filter__shops::-webkit-scrollbar, .filter__zeiten::-webkit-scrollbar { display: none; }
.chip {
  flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px;
  border: 1px solid var(--linie); border-radius: 20px; text-decoration: none; font-size: 15px; white-space: nowrap;
}
.chip--aktiv { background: var(--schrift); border-color: var(--schrift); color: #fff; }
.filter__frei { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--gedaempft); }
.filter__frei input { min-height: 40px; padding: 0 8px; border: 1px solid var(--linie); border-radius: var(--radius); font: inherit; color: var(--schrift); }

/* Kennzahlen */
.karten { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .karten { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; } }
.karte { border: 1px solid var(--linie); border-radius: var(--radius); padding: 12px 14px; min-width: 0; }
.karte__name { margin: 0; font-size: 13px; color: var(--gedaempft); }
.karte__wert { margin: 2px 0 0; font-size: 22px; font-weight: 700; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.karte__zusatz { margin: 2px 0 0; font-size: 13px; color: var(--gedaempft); }
.trend { font-size: 12px; font-weight: 600; padding: 1px 6px; border-radius: 10px; background: var(--flaeche); color: var(--gedaempft); }
.trend--hoch { background: #e3f4ea; color: #1f6b3a; }
.trend--runter { background: #fbe7ee; color: #9b1c4a; }

.block { margin: 32px 0 0; }
.block h2 { font-size: 18px; margin: 0 0 12px; }
.bloecke { display: grid; gap: 0 24px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .bloecke { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .bloecke { grid-template-columns: repeat(4, 1fr); } }

/* Verlauf */
/* Seit 06.10.2026: Säulen = Besuche (Türkis), darunter eine Reihe Bestellungen je Tag (Pink), alle auf einer Höhe. */
.verlauf { display: flex; align-items: flex-end; gap: 3px; height: 210px; padding-bottom: 50px; overflow-x: auto; }
.verlauf__tag { flex: 1 0 18px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; position: relative; }
.verlauf--dicht .verlauf__tag { flex-basis: 6px; }
.verlauf__saeule { width: 100%; min-height: 2px; background: var(--mitte-akzent); border-radius: 3px 3px 0 0; }
.verlauf__datum { position: absolute; bottom: -20px; font-size: 11px; color: var(--gedaempft); white-space: nowrap; }
.verlauf__bestellung {
  position: absolute; bottom: -46px; min-width: 22px; height: 20px; padding: 0 5px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mitte-rosa); color: #fff; font-size: 11px; font-weight: 700; line-height: 1;
}
.verlauf__bestellung--null { background: var(--flaeche); color: var(--gedaempft); font-weight: 400; }
.verlauf--dicht .verlauf__bestellung { min-width: 0; padding: 0 2px; font-size: 9px; height: 16px; }
.verlauf__legende { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: -4px 0 12px; font-size: 13px; color: var(--gedaempft); }
.verlauf__legende span { display: inline-flex; align-items: center; gap: 6px; }
.verlauf__legende span::before { content: ""; width: 12px; height: 12px; border-radius: 3px; }
.verlauf__legende-besuche::before { background: var(--mitte-akzent); }
.verlauf__legende-bestellungen::before { background: var(--mitte-rosa); border-radius: 6px; }
/* Umsatz je Tag (06.10.2026): dritte Reihe unter den Bestellungen, ganze Euro, dunkle Schrift; Säulen-Bereich unten höher. */
.verlauf--umsatz { height: 230px; padding-bottom: 70px; }
/* Jede Tagesspalte mindestens 37 px, damit Datum, Bestellung und Umsatz nie ineinanderlaufen (30 Tage passen am Desktop,
   am Handy wird der Verlauf seitlich wischbar und beginnt beim neuesten Tag). */
.verlauf--umsatz .verlauf__tag { flex: 1 0 37px; }
.verlauf__umsatz { position: absolute; bottom: -66px; font-size: 11px; font-weight: 600; color: var(--schrift); white-space: nowrap; font-variant-numeric: tabular-nums; }
.verlauf__umsatz--null { color: var(--gedaempft); font-weight: 400; }
.verlauf__legende-umsatz::before { background: var(--schrift); }

/* Uhrzeiten-Raster */
.stundenraster { border-collapse: separate; border-spacing: 2px; font-size: 11px; }
.stundenraster th { color: var(--gedaempft); font-weight: 400; padding: 0 4px 0 0; text-align: right; }
.stundenraster thead th { text-align: left; }
.stundenraster td {
  width: 22px; height: 20px; border-radius: 3px;
  background: color-mix(in srgb, var(--mitte-akzent) calc(var(--staerke) * 100%), var(--flaeche));
}

/* Anteile */
.anteile { list-style: none; margin: 0; padding: 0; }
.anteile li { position: relative; display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; margin: 0 0 4px; border-radius: 6px; overflow: hidden; }
.anteile__name, .anteile__wert { position: relative; z-index: 1; font-size: 15px; }
.anteile__wert { font-weight: 600; }
.anteile__balken { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--mitte-akzent) 22%, transparent); }

/* Tabellen */
.tabelle-rahmen { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabelle { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabelle th, .tabelle td { padding: 8px 10px; border-bottom: 1px solid var(--linie); text-align: right; white-space: nowrap; }
.tabelle th:first-child, .tabelle td:first-child { text-align: left; }
.tabelle thead th { font-weight: 600; color: var(--gedaempft); font-size: 13px; }
.tabelle__artikel { display: flex; align-items: center; gap: 10px; min-width: 220px; white-space: normal !important; }
.tabelle__artikel img { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; background: var(--flaeche); flex: none; }

/* Drucken / PDF */
@media print {
  .nicht-drucken, .mitte__person, .fuss__recht { display: none !important; }
  .kopf { position: static; }
  .block, .karte { break-inside: avoid; }
  .tabelle-rahmen, .verlauf { overflow: visible; }
  body { min-height: 0; }
  .stundenraster td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .verlauf__saeule, .verlauf__bestellung, .verlauf__legende span::before, .anteile__balken, .trend, .chip--aktiv { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Reiter Auswertung / Gutscheine */
.mitte__kopf { flex-wrap: wrap; row-gap: 0; }
/* Breite Bildschirme: Inhalt der Kopfleiste auf denselben Kanten wie die Seite (1240 px mittig, 24 px Rand);
   Hintergrund und Linie laufen weiter über die volle Breite. Darunter gilt der normale Rand. */
@media (min-width: 1240px) {
  .mitte .mitte__kopf { padding-inline: calc((100% - 1240px) / 2 + 24px); }
}
.mitte__nav { display: flex; gap: 4px; margin-left: auto; }
.mitte__reiter { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: var(--radius); text-decoration: none; font-weight: 600; color: var(--gedaempft); }
.mitte__reiter--aktiv { color: var(--schrift); background: var(--flaeche); }
@media (max-width: 600px) {
  .mitte__nav { order: 3; width: 100%; margin: 4px 0 0; }
  .mitte__reiter { flex: 1; justify-content: center; }
}
.filter__shops + .auswertung__unter { margin-top: 12px; }

/* Bericht teilen */
.teilen-bericht { border: 1px solid var(--linie); border-radius: var(--radius); padding: 16px; }
.teilen-bericht__link { display: flex; gap: 8px; margin: 12px 0; }
.teilen-bericht__link input { flex: 1; min-width: 0; min-height: 44px; padding: 0 10px; border: 1px solid var(--linie); border-radius: var(--radius); font: inherit; font-size: 14px; }
.teilen-bericht__formular { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0; }
.teilen-bericht__formular select { min-height: 40px; margin-left: 6px; border: 1px solid var(--linie); border-radius: var(--radius); font: inherit; padding: 0 8px; background: var(--grund); }
.geteilt { background: #e9f5f2; }
/* In Mitte klebt die Fußzeile nie (das gilt nur für Gäste im Partnershop),
   und der Hinweis zum geteilten Bericht bleibt stehen. */
.mitte .fuss { position: static; padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
.meldung.geteilt { animation: none; }

/* ---- Shop-Auswahl: Kacheln mit App-Symbol --------------------------------
   Kacheln brechen um, die Seite schiebt nie seitlich (seit 15.10.2026, vorher eine waagerecht
   scrollende Leiste): am Handy 3 je Zeile, ab 480 px 4, ab 760 px so viele wie passen. */
.shopwahl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 2px 0 6px;
}
@media (min-width: 480px) { .shopwahl { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 760px) { .shopwahl { grid-template-columns: repeat(auto-fill, 104px); } }
.shopwahl__kachel {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 10px 6px 8px;
  border: 1px solid var(--linie);
  border-radius: 14px;
  background: var(--grund);
  text-decoration: none;
  color: var(--schrift);
  -webkit-tap-highlight-color: transparent;
}
.shopwahl__kachel--aktiv { border: 2px solid var(--schrift); padding: 9px 5px 7px; background: var(--flaeche); }
.shopwahl__kachel:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }
.shopwahl__symbol {
  width: 48px; height: 48px; border-radius: 11px; object-fit: contain; background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .06);
}
.shopwahl__symbol--text {
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 20px; color: var(--gedaempft); background: var(--flaeche);
}
.shopwahl__name {
  font-size: 13px; line-height: 1.25; text-align: center; font-weight: 600;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.5em; /* ein- und zweizeilige Namen gleich hoch */
}
.shopwahl + .auswertung__unter, .filter .shopwahl { margin-top: 4px; }
.auswertung__unter { margin-top: 12px; }

/* ---- Einheitliche Bedienelemente in Mitte --------------------------------
   Alle Knöpfe, Felder, Auswahlen und Chips 48 px hoch, gleiche Schrift und Rundung;
   in Zeilen stehen sie bündig auf einer Linie. */
.mitte { --hoehe: 48px; }
.mitte .knopf,
.mitte .knopf--klein,
.mitte .chip,
.mitte .mitte__reiter,
.mitte .feld input,
.mitte .feld select,
.mitte .filter__frei input,
.mitte .teilen-bericht__link input,
.mitte .teilen-bericht__formular select,
.mitte .reftab__zeile input[type="text"],
.mitte .reftab__zeile input[type="url"],
.mitte .refhoch__paare input,
.mitte .reftab__pfeil {
  min-height: var(--hoehe);
  height: var(--hoehe);
  font-size: 15px;
  border-radius: var(--radius);
}
.mitte .knopf, .mitte .knopf--klein { padding: 0 18px; white-space: nowrap; }
.mitte .chip { padding: 0 16px; }
.mitte .feld input[type="date"] { min-height: var(--hoehe); }
.mitte .menue__punkt { min-height: var(--hoehe); }

/* Formulare: Felder und Knöpfe unten bündig, auch wenn Beschriftungen umbrechen. */
.mitte .kasten__formular,
.mitte .suche,
.mitte .korrektur,
.mitte .filter__frei,
.mitte .teilen-bericht__formular,
.mitte .vzeile__aktionen { align-items: end; }
.mitte .feld { margin: 0; min-width: 0; }
.mitte .feld__name { min-height: 2.6em; display: flex; align-items: flex-end; }
.mitte .filter__frei label, .mitte .teilen-bericht__formular label { display: flex; align-items: center; gap: 6px; }
.mitte .vzeile__aktionen { display: flex; flex-wrap: wrap; gap: 8px; }
.mitte .vzeile__aktionen form { margin: 0; }

@media (min-width: 760px) {
  .mitte .kasten__formular { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .mitte .kasten__formular .feld:has(input[type="email"]),
  .mitte .kasten__formular .feld:has(input[name="notiz"]) { grid-column: span 2; }
  .mitte .suche { grid-template-columns: minmax(0, 1fr) auto auto; }
  .mitte .korrektur { grid-template-columns: 200px minmax(0, 1fr) auto; }
}
@media (max-width: 759px) {
  .mitte .kasten__formular .knopf, .mitte .suche .knopf, .mitte .korrektur .knopf { width: 100%; }
  .mitte .feld__name { min-height: 0; }
}

/* Nie seitlich schieben: breite Inhalte bleiben in ihren eigenen Rahmen. */
.mitte .auswertung, .mitte .block, .mitte .kasten, .mitte .vzeile { min-width: 0; max-width: 100%; }
.mitte .vzeile__angaben, .mitte .vzeile__code { overflow-wrap: anywhere; }
/* Schmale Felder füllen in Mitte ihre Rasterzelle - keine Lücken zwischen Feldern. */
.mitte .feld--schmal { max-width: none; }
/* Ausstellen-Formular ab Tablet: genau 4 Spalten, zwei volle Zeilen ohne Lücke:
   Wert | Anzahl | E-Mail (2)  //  Gültig bis | Notiz (2) | Ausstellen */
@media (min-width: 760px) {
  .mitte .kasten__formular { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Zeitraum von-bis: am Handy zwei gleich breite Felder, darunter "Anzeigen" über die volle Breite. */
.auswertung__kopf { margin-bottom: 12px; }
.mitte .filter__frei label { flex-direction: column; align-items: stretch; gap: 4px; }
.mitte .filter__frei label span { font-size: 13px; }
.mitte .filter__frei input { width: 100%; min-width: 0; }
@media (max-width: 759px) {
  .mitte .filter__frei { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .mitte .filter__frei .knopf { grid-column: 1 / -1; width: 100%; }
}

/* ---- Gutscheine: Unterreiter Einzeln / Serien ---- */
.unterreiter { display: flex; gap: 4px; margin: 16px 0 0; border-bottom: 1px solid var(--linie); }
.unterreiter__punkt {
  display: inline-flex; align-items: center; min-height: var(--hoehe); padding: 0 16px;
  text-decoration: none; font-weight: 600; color: var(--gedaempft); border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.unterreiter__punkt--aktiv { color: var(--schrift); border-bottom-color: var(--schrift); }

/* ---- Serie anlegen: Code-Baukasten ---- */
.baukasten {
  grid-column: 1 / -1; min-width: 0; margin: 4px 0; padding: 12px 14px 14px;
  border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche);
  display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end;
}
.baukasten legend { padding: 0 6px; font-weight: 700; font-size: 15px; }
.baukasten__vorschau { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; }
.baukasten__vorschau .feld__name { min-height: 0; }
.baukasten__code {
  font: 700 18px/1.2 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .04em;
  background: #fff; border: 1px dashed var(--linie); border-radius: var(--radius); padding: 10px 14px;
  overflow-wrap: anywhere; max-width: 100%;
}
.baukasten__info { font-size: 14px; }
.baukasten__info--gut { color: var(--gut); }
.baukasten__info--warnung { color: #9b1c4a; font-weight: 600; }
@media (min-width: 760px) {
  .baukasten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mitte .serie-formular .feld--breit2, .mitte .etiketten-formular .feld--breit2 { grid-column: span 2; }
  .mitte .etiketten-formular { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .etiketten-eigene { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.mitte .serie-formular, .mitte .etiketten-formular { display: grid; gap: 10px; align-items: end; }
.mitte .etiketten-formular .knopf { width: 100%; }
.feld--haken { display: flex; align-items: center; gap: 10px; min-height: var(--hoehe); }
.feld--haken input { width: 22px; height: 22px; min-height: 0; margin: 0; }
.serie__ausgabe h2 { font-size: 16px; margin: 18px 0 10px; }
.vzeile__angaben code { font-size: 13px; overflow-wrap: anywhere; }
@media (min-width: 1024px) {
  .baukasten { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ---- Schule: Anleitungen ---- */
.schule__liste { list-style: none; margin: 0; padding: 0; }
.schule__eintrag {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 12px 16px; margin: 0 0 10px;
}
.schule__titel { font-weight: 600; text-decoration: none; }
.anleitung__vorspann { color: var(--gedaempft); margin: 0 0 18px; max-width: 70ch; }

.anleitung { max-width: 80ch; }
.anleitung h2 { font-size: 20px; margin: 30px 0 10px; padding-top: 14px; border-top: 1px solid var(--linie); }
.anleitung h3 { font-size: 16px; margin: 22px 0 8px; }
.anleitung p, .anleitung li { overflow-wrap: anywhere; }
.anleitung ul, .anleitung ol { margin: 0 0 14px; padding-left: 20px; }
.anleitung li { margin: 0 0 6px; }
.anleitung code { background: var(--flaeche); border-radius: 4px; padding: 1px 5px; font-size: 14px; }
.anleitung pre {
  background: var(--flaeche); border-radius: var(--radius); padding: 12px 14px;
  overflow-x: auto; font-size: 14px;
}
.anleitung pre code { background: none; padding: 0; }
/* Haken zum Abarbeiten - nur als Zeichen, nichts wird gespeichert. */
.anleitung__haken { list-style: none; padding-left: 0; }
.anleitung__haken li { display: flex; gap: 10px; align-items: flex-start; }
.anleitung__haken li::before {
  content: ""; flex: none; width: 18px; height: 18px; margin-top: 3px;
  border: 2px solid var(--linie); border-radius: 4px;
}
.anleitung__tabelle { margin: 0 0 16px; }
.anleitung table { width: 100%; border-collapse: collapse; font-size: 15px; }
.anleitung th, .anleitung td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--linie); }
.anleitung th { font-size: 13px; color: var(--gedaempft); font-weight: 600; }

/* Am Handy nie seitlich schieben: Tabellenzeilen stapeln sich mit ihrer Spaltenbezeichnung. */
@media (max-width: 759px) {
  .anleitung thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .anleitung tr { display: block; border: 1px solid var(--linie); border-radius: var(--radius); padding: 8px 10px; margin: 0 0 10px; }
  .anleitung td { display: block; border: 0; padding: 4px 0; }
  .anleitung td::before { content: attr(data-spalte); display: block; font-size: 12px; color: var(--gedaempft); font-weight: 600; }
}

@media print {
  .anleitung { max-width: none; }
  .anleitung h2, .anleitung h3 { break-after: avoid; }
  .anleitung tr, .anleitung li, .anleitung pre { break-inside: avoid; }
}

/* Schalter im Kopf: eigene Besuche mitzählen oder nicht */
.mitte__zaehlschalter { margin: 0; }
.mitte__zaehlen {
  border: 1px solid var(--linie); background: var(--grund); font: inherit; font-weight: 600;
  color: var(--gedaempft); cursor: pointer; white-space: nowrap;
}
.mitte__zaehlen--an { color: var(--schrift); border-color: var(--schrift); }
/* Am Handy: Logo und Abmelden in einer Zeile, darunter die Reiter, ganz unten schmal der Schalter. */
@media (max-width: 600px) {
  .mitte__person { margin-left: auto; }
  .mitte__zaehlschalter { order: 4; width: 100%; margin: 4px 0 6px; }
  .mitte__zaehlen { width: 100%; min-height: 36px; justify-content: center; font-size: 14px; padding: 0 10px; }
}

/* Zugang je Shop: Anmeldung · Passwort · offen (nur für das Team, mitte/routen/zugang.php) */
.zugang { scroll-margin-top: 180px; }
.zugang__liste { list-style: none; margin: 0 0 10px; padding: 0; }
.zugang__eintrag { padding: 14px 0; border-bottom: 1px solid var(--linie); }
.zugang__eintrag:last-child { border-bottom: 0; }
.zugang__formular { display: grid; gap: 10px 16px; align-items: end; margin: 0; }
.zugang__shop { margin: 0; font-weight: 700; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
.zugang__shop a { font-weight: 400; font-size: 14px; color: var(--gedaempft); overflow-wrap: anywhere; }
.zugang__schalter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.zugang__schalter .chip { justify-content: center; background: none; color: inherit; font: inherit; font-size: 15px; cursor: pointer; }
.zugang__schalter .chip--aktiv { background: var(--schrift); border-color: var(--schrift); color: #fff; }
.zugang__passwort { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; min-width: 0; }
.zugang__passwort input { width: 100%; }
.zugang__meldung { grid-column: 1 / -1; margin: 0; padding: 10px 14px; border-radius: var(--radius); font-size: 15px; }
.zugang__meldung--gut { background: #e7f6ec; color: #135c2c; }
.zugang__meldung--hinweis { background: #fdf0e1; color: #7a4100; }
@media (max-width: 480px) { .zugang__passwort { grid-template-columns: 1fr; } }
.zugang__stand { grid-column: 1 / -1; margin: 0; color: var(--gedaempft); font-size: 14px; }
@media (min-width: 760px) {
  .zugang__formular { grid-template-columns: minmax(150px, 0.8fr) minmax(300px, 1.2fr) minmax(300px, 1.4fr); }
  .zugang__shop { align-self: center; flex-direction: column; }
}

/* Zugangs-Tags je Shop (nur für das Team) */
.zugangstags__liste { list-style: none; margin: 0 0 10px; padding: 0; }
.zugangstags__eintrag {
  display: grid; gap: 6px 16px; padding: 10px 0; border-bottom: 1px solid var(--linie);
}
.zugangstags__eintrag:last-child { border-bottom: 0; }
.zugangstags__shop { font-weight: 700; }
.zugangstags__paar { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.zugangstags__was { color: var(--gedaempft); font-size: 14px; }
.zugangstags code { font-size: 15px; font-weight: 700; background: var(--flaeche); border-radius: 6px; padding: 3px 8px; overflow-wrap: anywhere; }
@media (min-width: 760px) {
  .zugangstags__eintrag { grid-template-columns: minmax(160px, 1fr) auto auto; align-items: center; }
  .zugangstags__paar { justify-content: flex-start; }
}

/* Referenzen (Galerie des Hauptshops) - Tabelle: Nr | Bild | Text | Kunde+Link | Aktionen, darunter "Mehr". */
.reftab__erklaerung { margin: 0 0 16px; max-width: 80ch; }
.reftab__standard { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.reftab__gruppe { font-size: 18px; margin: 32px 0 8px; }
.reftab__kopf { display: none; }
.reftab__zeile {
  display: grid; gap: 10px 12px; align-items: start;
  grid-template-columns: 28px 72px minmax(0, 1fr);
  grid-template-areas: "nr bild text" "kunde kunde kunde" "aktionen aktionen aktionen" "mehr mehr mehr";
  padding: 14px 0; border-top: 1px solid var(--linie); scroll-margin-top: 80px;
}
.reftab__nr { grid-area: nr; font-weight: 700; color: var(--gedaempft); padding-top: 26px; font-variant-numeric: tabular-nums; }
.reftab__bild { grid-area: bild; padding-top: 22px; }
.reftab__bild { position: relative; }
.reftab__bildhinweis {
  display: block; margin-top: 4px; font-size: 11px; font-weight: 700; line-height: 1.2; color: #8a4b00;
  background: #fff4e0; border-radius: 4px; padding: 2px 4px; text-align: center; white-space: nowrap;
}
.reftab__bildhinweis-lang { color: #8a4b00; }
.reftab__warnung { margin: 0 0 16px; padding: 10px 12px; border-radius: var(--radius); background: #fff4e0; color: #6b3a00; font-size: 14px; }
.reftab__bild img { display: block; width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius); background: var(--flaeche); }
.reftab__ohnebild { display: grid; place-items: center; width: 72px; height: 72px; border-radius: var(--radius); background: var(--flaeche); font-size: 12px; color: var(--gedaempft); }
.reftab__feld--text { grid-area: text; }
.reftab__feld--kunde { grid-area: kunde; display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
.reftab__name { display: block; font-size: 13px; font-weight: 600; color: var(--gedaempft); margin-bottom: 4px; }
.reftab__zeile textarea, .reftab__zeile input[type="text"], .reftab__zeile input[type="url"] {
  width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--linie); border-radius: var(--radius);
  font: inherit; font-size: 15px; color: var(--schrift); background: var(--grund);
}
.reftab__zeile textarea { resize: vertical; min-height: 72px; line-height: 1.35; }
.reftab__aktionen { grid-area: aktionen; display: grid; gap: 8px; align-content: start; }
.reftab__speichern { width: 100%; }
.reftab__pfeile { display: flex; gap: 8px; }
.mitte .reftab__pfeil {
  flex: 1 1 0; min-width: var(--hoehe); border: 1px solid var(--linie); background: var(--grund);
  font-size: 20px; line-height: 1; cursor: pointer; color: var(--schrift);
}
.reftab__pfeil:disabled { opacity: .35; cursor: default; }
.reftab__mehr { grid-area: mehr; }
.reftab__mehr summary { cursor: pointer; color: var(--gedaempft); font-size: 14px; width: max-content; }
.reftab__mehrinhalt { display: grid; gap: 16px; margin-top: 10px; }
.reftab__gross { display: block; width: 100%; max-width: 360px; height: auto; border-radius: var(--radius); background: var(--flaeche); }
.reftab__daten { display: grid; grid-template-columns: max-content 1fr; gap: 8px 14px; margin: 0; font-size: 14px; align-items: center; }
.reftab__daten dt { font-weight: 600; color: var(--gedaempft); }
.reftab__daten dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.reftab__status { display: inline-flex; gap: 8px; align-items: center; }
.reftab__zeile--entwurf .reftab__bild img { opacity: .45; }
.reftab__zeile--entwurf .reftab__nr::after { content: " Entwurf"; font-size: 11px; font-weight: 600; display: block; }
.reftab__zeile--geaendert { box-shadow: inset 3px 0 0 var(--mitte-rosa); padding-left: 8px; }
.reftab__zeile--geaendert .reftab__speichern { background: var(--akzent); color: var(--akzent-schrift); border-color: var(--akzent); }
.reftab__leiste {
  position: sticky; bottom: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin: 16px 0 0; padding: 10px 12px; background: var(--grund); border: 1px solid var(--linie); border-radius: var(--radius);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, .08);
}
.reftab__leiste[hidden] { display: none; }
/* Während gespeichert wird: Knöpfe gedämpft, Warte-Zeiger (Klicks ignoriert das Skript). */
.reftab--sendet button { opacity: .6; cursor: progress; }


@media (min-width: 900px) {
  .reftab__kopf {
    display: grid; grid-template-columns: 32px 88px minmax(0, 1.4fr) minmax(0, 1fr) 210px; gap: 14px;
    font-size: 13px; font-weight: 600; color: var(--gedaempft); padding: 0 0 6px;
  }
  .reftab__zeile {
    grid-template-columns: 32px 88px minmax(0, 1.4fr) minmax(0, 1fr) 210px; gap: 8px 14px;
    grid-template-areas: "nr bild text kunde aktionen" "nr bild mehr mehr mehr";
  }
  .reftab__nr, .reftab__bild { padding-top: 0; }
  .reftab__bild img, .reftab__ohnebild { width: 88px; height: 88px; }
  .reftab__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .reftab__feld--kunde { grid-template-columns: 1fr; }
  .reftab__aktionen { flex-direction: column; align-items: stretch; }
  .reftab__pfeile { justify-content: center; }
  .reftab__mehrinhalt { grid-template-columns: minmax(0, 360px) 1fr; align-items: start; }
}

/* Referenzen: Fotos hochladen und Löschen */
.refhoch { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 14px; margin: 0 0 20px; padding: 14px; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); }
.refhoch__feld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.refhoch__feld { flex: 1 1 260px; }
/* Dateiauswahl: Browser-Knopf unsichtbar (bleibt bedienbar), dafür ein normaler Mitte-Knopf. */
.refhoch__datei { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
.mitte .refhoch__waehlen { width: 100%; box-sizing: border-box; gap: 10px; background: var(--grund); }
.refhoch__datei:focus-visible + .refhoch__waehlen { outline: 3px solid var(--akzent); outline-offset: 2px; }
.refhoch__waehlen[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.refhoch__auswahl { margin: 0; font-size: 14px; color: var(--gedaempft); overflow-wrap: anywhere; }
.refhoch__auswahl--fehler { color: #9b1c1c; font-weight: 600; }
.refhoch .knopf:disabled { opacity: .45; cursor: default; }

/* Fortschritt beim Hochladen */
.refhoch__fortschritt { flex: 1 1 100%; display: grid; gap: 8px; }
.refhoch__fortschritt[hidden] { display: none; }
.refhoch__balken { position: relative; height: 12px; border-radius: 6px; background: var(--linie); overflow: hidden; }
.refhoch__balkenfuellung { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--mitte-akzent); transition: width .2s linear; }
.refhoch__stand { margin: 0; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.refhoch__fortschritt--arbeitet .refhoch__balkenfuellung {
  width: 100% !important;
  background: repeating-linear-gradient(-45deg, var(--mitte-akzent) 0 12px, #7fcabd 12px 24px);
  background-size: 34px 100%; animation: refhoch-laeuft 1s linear infinite;
}
@keyframes refhoch-laeuft { to { background-position: 34px 0; } }
@media (prefers-reduced-motion: reduce) { .refhoch__fortschritt--arbeitet .refhoch__balkenfuellung { animation: none; } }
.refhoch__fortschritt--fehler .refhoch__stand { color: #9b1c1c; }
.refhoch__fortschritt--fehler .refhoch__balken { display: none; }
.refhoch__fortschritt--fehler .refhoch__hinweis { display: none; }
.refhoch .knopf { width: 100%; }
.refhoch__hinweis { flex: 1 1 100%; margin: 0; font-size: 13px; color: var(--gedaempft); }
.reftab__name--sichtbar { position: static; width: auto; height: auto; clip: auto; font-size: 14px; }
.reftab__loeschen { display: grid; gap: 10px; justify-items: stretch; }
.reftab__daten dd .knopf { width: 100%; }
.reftab__mehr summary, .refhoch__regeln summary { min-height: var(--hoehe); display: flex; align-items: center; }
.reftab__weg { color: #9b1c1c; border-color: #e6b8b8; }
.refhoch__regeln { flex: 1 1 100%; }
.refhoch__regeln summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--gedaempft); width: max-content; }
.refhoch__regelfeld { display: grid; gap: 10px; margin-top: 10px; justify-items: start; }
.refhoch__paare { display: grid; gap: 10px 16px; grid-template-columns: repeat(auto-fit, minmax(150px, 200px)); width: 100%; }
.refhoch__paare input { width: 100%; box-sizing: border-box; min-height: 40px; padding: 0 10px; border: 1px solid var(--linie); border-radius: var(--radius); font: inherit; background: var(--grund); color: var(--schrift); }

/* Handy: alle Bedienelemente der Referenzen gleich hoch (48 px) und über die volle Breite. */
@media (max-width: 899px) {
  .reftab__aktionen { grid-template-columns: 1fr; }
  .reftab__daten { grid-template-columns: 1fr; gap: 6px 0; }
  .reftab__daten dt { margin-top: 8px; }
  .refhoch__paare { grid-template-columns: 1fr 1fr; }
  .reftab__leiste { flex-wrap: wrap; }
  .reftab__leiste .knopf { flex: 1 1 100%; }
}
@media (min-width: 900px) {
  /* Alle Knöpfe der Referenzen gleich breit. */
  .refhoch .knopf, .reftab__speichern, .reftab__daten dd .knopf { width: 210px; min-width: 210px; }
  .mitte .refhoch__waehlen { width: 210px; }

  /* Hochladen: Überschrift, darunter „Fotos auswählen“ und „Hochladen“ nebeneinander auf einer Höhe,
     darunter die Statuszeile; alles Weitere über die volle Breite. */
  .refhoch { display: grid; grid-template-columns: 210px 210px minmax(0, 1fr); column-gap: 12px; row-gap: 10px; align-items: center; }
  .refhoch__feld { display: contents; }
  .refhoch #refhoch-titel { grid-column: 1 / -1; grid-row: 1; }
  .refhoch__waehlen { grid-column: 1; grid-row: 2; }
  .refhoch__senden { grid-column: 2; grid-row: 2; }
  .refhoch__auswahl { grid-column: 1 / -1; grid-row: 3; }
  .refhoch__fortschritt, .refhoch__regeln, .refhoch > .refhoch__hinweis { grid-column: 1 / -1; }
}
.refhoch__hinweis code { font-size: 12px; background: var(--grund); padding: 1px 5px; border-radius: 4px; }

/* Kachel „Referenz-Galerie auf www.textil.team“ unten auf der Auswertung (nur TEXTIL.Team) */
.galerie { border: 1px solid var(--linie); border-radius: var(--radius); padding: 16px; margin-top: 40px; }
.galerie h3 { font-size: 16px; margin: 24px 0 10px; }
.galerie .block--klein { margin-top: 0; }
@media (min-width: 760px) { .galerie__karten { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) {
  .galerie__karten { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .galerie .bloecke { grid-template-columns: repeat(3, 1fr); }
}
.galerie__kunde { display: block; font-size: 13px; color: var(--gedaempft); }
.galerie__tabelle td:not(:first-child), .galerie__tabelle th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
@media print { .galerie { break-inside: auto; } }

/* Auswertung der Infoseite partnershop.textil.team: acht Kennzahlen in zwei Viererreihen */
@media (min-width: 760px) { .karten--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); } }