/* ============================================================================
   ADURO Vereinsaktion — nur das, was aduro-ui.css noch nicht kennt.
   Farben, Schriften und Radien kommen alle aus der gemeinsamen Datei.
   ========================================================================== */

.ak-kopfzeile{margin-bottom:22px}
.ak-kopfzeile h1{
  font-family:var(--font-head);font-weight:600;font-size:26px;letter-spacing:.02em;
  text-transform:uppercase;color:var(--ink);line-height:1.2;
}
.ak-kopfzeile .ak-verein{
  font-family:var(--font-head);font-size:12.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--green);margin-bottom:6px;
}
.ak-kopfzeile p{color:var(--muted);margin-top:8px;max-width:62ch}

/* ─── Staffelanzeige: das Herzstueck der Seite ──────────────────────────── */
.ak-staffel{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:20px;margin-bottom:20px;
}
.ak-staffel-oben{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap}
.ak-satz{
  font-family:var(--font-head);font-weight:700;font-size:58px;line-height:.9;
  color:var(--green);
}
.ak-satz span{font-size:24px;margin-left:2px}
.ak-satz-text{flex:1;min-width:210px;color:var(--muted);font-size:13.5px;padding-bottom:6px}
.ak-satz-text strong{color:var(--ink)}
.ak-leiter{display:flex;gap:4px;margin-top:16px}
.ak-leiter-stufe{
  flex:1;text-align:center;padding:8px 4px;border:1px solid var(--line-2);
  border-radius:var(--r);background:var(--page);
}
.ak-leiter-stufe.erreicht{background:#e9f1da;border-color:#cfe0b4}
.ak-leiter-stufe.aktuell{background:var(--green);border-color:var(--green);color:#fff}
.ak-leiter-prozent{
  font-family:var(--font-head);font-weight:600;font-size:16px;display:block;
}
.ak-leiter-ab{font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;opacity:.75}
.ak-hinweis-staffel{
  margin-top:14px;padding-top:13px;border-top:1px solid var(--line);
  font-size:13px;color:var(--ink-2);
}

/* ─── Fortschritt bis zur naechsten Stufe ───────────────────────────────── */
.ak-fortschritt{
  height:10px;background:var(--line);border-radius:3px;overflow:hidden;
  margin:16px 0 6px;
}
.ak-fortschritt > span{
  display:block;height:100%;background:var(--green-mid);border-radius:3px;
  transition:width .5s ease;
}
.ak-fortschritt-text{font-size:12.5px;color:var(--muted)}

/* ─── Stufenleiter mit Zusatzgaben ──────────────────────────────────────── */
.ak-leiter{
  display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:16px;
}
@media (max-width:760px){.ak-leiter{grid-template-columns:repeat(3,1fr)}}
@media (max-width:430px){.ak-leiter{grid-template-columns:repeat(2,1fr)}}
.ak-leiter-stufe{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:11px 7px 12px;border:1px solid var(--line-2);border-radius:var(--r);
  background:var(--page);
}
.ak-leiter-stufe.erreicht{background:#e9f1da;border-color:#cfe0b4}
.ak-leiter-stufe.aktuell{
  background:var(--green);border-color:var(--green);color:#fff;
  box-shadow:0 2px 0 0 var(--green-hover);
}
.ak-leiter-prozent{
  font-family:var(--font-head);font-weight:700;font-size:20px;line-height:1;
}
.ak-leiter-ab{
  font-size:10px;letter-spacing:.06em;text-transform:uppercase;opacity:.7;
  margin-top:3px;
}
.ak-leiter-bild{
  width:58px;height:58px;object-fit:contain;margin:9px 0 7px;
  background:#fff;border-radius:var(--r);padding:3px;
}
.ak-leiter-stufe.aktuell .ak-leiter-bild{background:rgba(255,255,255,.92)}
.ak-leiter-leer{
  width:58px;height:58px;margin:9px 0 7px;display:flex;align-items:center;
  justify-content:center;font-size:22px;opacity:.35;
}
.ak-leiter-bonus{
  font-size:11.5px;line-height:1.3;font-weight:600;overflow-wrap:anywhere;
}
.ak-leiter-stufe:not(.aktuell) .ak-leiter-bonus{color:var(--ink-2)}

/* ─── Produktkarten ─────────────────────────────────────────────────────── */
.ak-produkte{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;
  margin:4px 0 6px;
}
.ak-produkt{
  display:flex;flex-direction:column;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;background:var(--card);
  transition:border-color .18s ease;
}
a.ak-produkt:hover{border-color:var(--green-mid)}
.ak-produkt img{
  width:100%;aspect-ratio:4 / 3;object-fit:contain;background:#fff;padding:9px;
}
.ak-produkt-text{padding:10px 12px 12px;border-top:1px solid var(--line)}
.ak-produkt-name{
  font-family:var(--font-head);font-weight:600;font-size:13px;color:var(--ink);
  line-height:1.25;display:block;
}
.ak-produkt-preis{
  font-family:var(--font-mono);font-size:12px;color:var(--muted);
  display:block;margin-top:4px;
}
.ak-produkt-mehr{
  font-family:var(--font-head);font-weight:600;font-size:10.5px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--green);
  display:block;margin-top:6px;
}

/* ─── Bilder vom Handgeraet ─────────────────────────────────────────────── */
.ak-schirme{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:6px 0 14px;
}
@media (max-width:560px){.ak-schirme{grid-template-columns:1fr 1fr}}
.ak-schirm{text-align:center}
.ak-schirm img{
  width:100%;border:1px solid var(--line-2);border-radius:var(--r);display:block;
  background:#000;
}
.ak-schirm span{
  display:block;margin-top:7px;font-size:11.5px;color:var(--muted);
  font-family:var(--font-head);letter-spacing:.05em;text-transform:uppercase;
}

.ak-sprung{
  display:inline-flex;align-items:center;gap:7px;margin-top:14px;
}

/* ─── Zweispaltiges Layout ──────────────────────────────────────────────── */
.ak-spalten{display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start}
@media (max-width:900px){.ak-spalten{grid-template-columns:1fr}}

.ak-block{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:18px;margin-bottom:18px;
}
.ak-block h2{
  font-family:var(--font-head);font-weight:600;font-size:14px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin-bottom:14px;
}
.ak-block h3{
  font-family:var(--font-head);font-weight:600;font-size:14px;color:var(--ink);
  margin:16px 0 6px;
}
.ak-block h3:first-of-type{margin-top:0}
.ak-block p{color:var(--ink-2);margin-bottom:10px}
.ak-block p:last-child{margin-bottom:0}

/* ─── Formular ──────────────────────────────────────────────────────────── */
.ak-felder{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.ak-felder .ak-voll{grid-column:1 / -1}
@media (max-width:600px){.ak-felder{grid-template-columns:1fr}
  .ak-felder .ak-voll{grid-column:auto}}
.ak-feld-fehler{
  color:var(--danger);font-size:12px;margin-top:4px;
}
.ak-feld-fehler:empty{display:none}
input.ak-falsch,select.ak-falsch{border-color:var(--danger)}
.ak-haken{display:flex;gap:9px;align-items:flex-start;margin-top:12px}
.ak-haken input{width:auto;margin-top:2px;flex-shrink:0}
.ak-haken label{
  text-transform:none;letter-spacing:0;font-family:var(--font-body);font-size:13px;
  color:var(--ink-2);margin:0;font-weight:400;line-height:1.45;
}
.ak-fehlerkasten{
  background:var(--danger-bg);border:1px solid var(--danger-line);color:var(--danger);
  border-radius:var(--r);padding:12px 14px;margin-bottom:16px;font-size:13.5px;
}

/* ─── Rechner rechts ────────────────────────────────────────────────────── */
.ak-rechner{position:sticky;top:16px}
.ak-posten{display:flex;justify-content:space-between;gap:12px;padding:7px 0;
  border-bottom:1px solid var(--line);font-size:13.5px}
.ak-posten:last-of-type{border-bottom:none}
.ak-posten .ak-bez{color:var(--ink-2)}
.ak-posten .ak-wert{font-family:var(--font-mono);font-size:13px;color:var(--ink);
  white-space:nowrap}
.ak-summe{display:flex;justify-content:space-between;gap:12px;
  margin-top:12px;padding-top:12px;border-top:2px solid var(--ink);
  font-family:var(--font-head);font-weight:600;font-size:17px}
.ak-ersparnis{margin-top:8px;font-size:12.5px;color:var(--green);text-align:right}
.ak-durchstrichen{text-decoration:line-through;color:var(--muted-2)}

/* ─── Farbwahl je Halsband ──────────────────────────────────────────────── */
.ak-farbzeile{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.ak-farbzeile span{font-size:12.5px;color:var(--muted);min-width:92px}

/* ─── Listen und Meldungen ──────────────────────────────────────────────── */
.ak-liste{list-style:none;margin:0}
.ak-liste li{padding:6px 0 6px 18px;position:relative;color:var(--ink-2);font-size:13.5px}
.ak-liste li::before{content:"";position:absolute;left:2px;top:13px;width:6px;height:6px;
  background:var(--green-mid);border-radius:50%}
.ak-gut{background:#e9f1da;border:1px solid #cfe0b4;color:#3e5a1c;
  border-radius:var(--r);padding:14px 16px;margin-bottom:18px}
.ak-warnung{background:#f8eade;border:1px solid #eed5bb;color:#8a4f1c;
  border-radius:var(--r);padding:14px 16px;margin-bottom:18px}
.ak-zahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px}
.ak-zahl{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:13px 14px}
.ak-zahl b{display:block;font-family:var(--font-head);font-weight:600;font-size:24px;
  color:var(--ink);line-height:1.1}
.ak-zahl span{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}

table.ak-tabelle{width:100%;border-collapse:collapse;font-size:13px}
table.ak-tabelle th{
  font-family:var(--font-head);font-weight:600;font-size:11px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);text-align:left;padding:10px 11px;
  border-bottom:1px solid var(--line-2);white-space:nowrap;
}
table.ak-tabelle td{padding:10px 11px;border-bottom:1px solid var(--line);
  vertical-align:top;color:var(--ink-2)}
table.ak-tabelle tr:last-child td{border-bottom:none}
table.ak-tabelle tr:hover td{background:var(--hover)}
.ak-mono{font-family:var(--font-mono);font-size:12px}

.ak-fuss{max-width:1180px;margin:36px auto 0;padding:20px 18px 34px;
  border-top:1px solid var(--line);color:var(--muted);font-size:12.5px}
.ak-fuss p{margin-bottom:8px}
.ak-klein{font-size:11.5px;color:var(--muted-2);max-width:88ch}

.ak-kopieren{display:flex;gap:8px;align-items:center;margin-top:8px}
.ak-kopieren input{font-family:var(--font-mono);font-size:11.5px}

/* ─── Handy ───────────────────────────────────────────────────────────────
   aduro-ui.css blendet unter 720 px jede .ax-tabelle aus und erwartet dafuer
   eine Kartenansicht. Die gibt es hier nur fuer die Vorstandsliste, alle
   anderen Tabellen sollen deshalb sichtbar bleiben und im eigenen Rahmen
   seitlich scrollen. Sonst ist die Vorstandsseite am Handy leer, und genau
   dort wird Peter sie oeffnen. */
@media (max-width:719px){
  .ax-tabelle{display:block}
}

/* Der Preis gehoert auf dem Handy nach oben, nicht hinter Formular und FAQ.
   Sonst drueckt man auf Bestellen, ohne je eine Summe gesehen zu haben. */
@media (max-width:900px){
  .ak-spalten > aside{order:-1}
}

/* Kartenansicht der Vorstandsliste */
.ak-pruefkarte{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 15px;margin-bottom:11px;
}
.ak-pruefkarte-kopf{display:flex;align-items:center;gap:9px;margin-bottom:9px;
  flex-wrap:wrap}
.ak-pruefkarte-name{flex:1;font-family:var(--font-head);font-weight:600;font-size:15px;
  color:var(--ink);min-width:0}
.ak-pruefkarte .ak-zeile{display:flex;justify-content:space-between;gap:12px;
  padding:5px 0;border-bottom:1px solid var(--line);font-size:13px;color:var(--muted)}
.ak-pruefkarte .ak-zeile:last-of-type{border-bottom:none}
.ak-pruefkarte .ak-zeile > span:last-child{color:var(--ink);font-weight:600;
  text-align:right;overflow-wrap:anywhere}
.ak-pruefkarte form{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.ak-pruefkarte form > button{flex:1;min-width:108px;padding:11px 12px;font-size:12.5px}

/* Bedienelemente, die auch aeltere Daumen treffen */
.ak-haken input[type=checkbox]{width:20px;height:20px}
.btn-delete,.btn-approve,.btn-reject,.btn-detail{min-height:34px}

@media print{
  .ax-top,.ax-nav,.ak-fuss,.ak-nicht-drucken{display:none!important}
  body{background:#fff}
  .ak-block{border:none;padding:0}
}