/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  mechoulam · support.css — nur die Bausteine der Unterstuetzen-Seite  ║
   ║  (/unterstuetzen und /en/support). Farben, Schriften und Abstaende    ║
   ║  kommen aus site.css; hier steht bewusst kein zweiter Token-Satz.     ║
   ║  Eine Datei fuer beide Sprachfassungen, damit die Optik nicht in zwei ║
   ║  HTML-Dateien auseinanderlaeuft.                                      ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* Anrisssatz in der Display-Schrift. Die Seite spricht als Person, und der
   Wechsel auf Playfair markiert das vor dem ersten Wort. */
.lead {
  font-family: var(--display);
  font-size: 21px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--ink-2);
  margin: 0 0 22px 0;
}

/* Der Unabhaengigkeitsblock. Er ist die eigentliche Aussage der Seite, also
   steht er als Karte im Textfluss und nicht als Fussnote: zwei Haarlinien und
   Mono in 12px lassen ihn zwischen zwei Absaetzen verschwinden. Das kleine
   "keine" in Orange traegt die Verneinung, das Substantiv dahinter steht in
   der Display-Schrift und ist das, was haengenbleibt. */
.independence {
  margin: 30px 0;
  padding: 24px 26px 26px 26px;
  border: 1px solid var(--rule-strong);
  border-left: 3px solid var(--orange);
  border-radius: 5px;
  background: var(--surface);
}

.independence-head {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 16px 0;
}

.independence ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.independence li {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.independence .no {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 1px;
}

/* Die Zahlungswege. Zeilen mit Haarlinie statt Knopf-Kacheln: der Rest der
   Seite ist typografisch gesetzt, und drei bunte Kacheln waeren der einzige
   Fremdkoerper darin. Die Farbe markiert den Pfeil, nicht die ganze Flaeche. */
.ways {
  margin: 24px 0 8px 0;
  border: 1px solid var(--rule-strong);
  border-radius: 5px;
  background: var(--surface);
  overflow: hidden;
}

.way {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 17px 20px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  text-decoration: none;
  transition: background .16s var(--ease);
}

.way:last-child { border-bottom: 0; }
.way:hover { background: var(--orange-soft); color: var(--ink); }

.way-name {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  flex: 0 0 auto;
}

.way-note {
  font-size: 13px;
  color: var(--muted);
  flex: 1 1 auto;
}

/* Die Herstellerlogos. Beide Dateien liegen unveraendert unter
   frontend/assets/pay/ (Herkunft und Auflagen: HERKUNFT.md daneben). Sie
   stehen rechts vor dem Pfeil, damit die Zeile weiter vom Namen gelesen wird
   und das Logo nur bestaetigt. */
.way-logo {
  flex: 0 0 auto;
  align-self: center;
  height: 22px;
  width: auto;
  margin-left: auto;
}

/* Apple verlangt ringsum einen Freiraum von einem Viertel der Markenhoehe und
   dass die Marke kleiner bleibt als die eigene Wortmarke. Die Marke bringt
   ihren eigenen hellen Grund mit, deshalb steht sie hier ohne Rahmen. */
.way-logo.is-applepay {
  height: 24px;
  margin: 0 0 0 auto;
  padding: 0 6px;
}

/* Steht ein Logo in der Zeile, schiebt es den Hinweis nicht mehr nach rechts:
   der Hinweis hoert vor dem Logo auf. */
.way-logo + .way-go { margin-left: 14px; }

/* Der Pfeil ist das einzige farbige Element der Liste und ruecht beim
   Ueberfahren eine Spur nach rechts. */
.way-go {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--orange);
  flex: 0 0 auto;
  transition: transform .16s var(--ease);
}

.way:hover .way-go { transform: translateX(3px); }

/* Der Ueberweisungsweg klappt auf, statt die Kontodaten dauerhaft in die
   Seite zu stellen. */
.way-bank { display: block; padding: 0; border-bottom: 0; }

.way-bank > summary {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 17px 20px;
  cursor: pointer;
  list-style: none;
  transition: background .16s var(--ease);
}

.way-bank > summary::-webkit-details-marker { display: none; }
.way-bank > summary:hover { background: var(--orange-soft); }
.way-bank[open] > summary { background: var(--orange-soft); }

.bank-details {
  margin: 0;
  padding: 4px 20px 20px 20px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 2;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

.bank-details dt {
  display: inline-block;
  min-width: 12ch;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 10.5px;
}

.bank-details dd { display: inline; margin: 0; }
.bank-details dd::after { content: ""; display: block; }

.ways-note {
  font-size: 13px;
  line-height: 1.6;
  color: var(--faint);
  margin: 12px 0 0 0;
}

/* Unter 480px steht der Hinweis unter dem Namen statt daneben. */
@media (max-width: 480px) {
  .lead { font-size: 19px; }

  .way, .way-bank > summary {
    flex-wrap: wrap;
    gap: 2px 12px;
  }

  .way-name { flex: 1 1 auto; }

  /* Der Hinweis rutscht unter den Namen, der Pfeil bleibt rechts in der ersten
     Zeile stehen. Ohne die Umsortierung landet er allein unter dem Hinweis und
     sieht dort aus wie ein vergessenes Zeichen. Die Vorlesereihenfolge bleibt
     die des Markups. */
  .way-note { flex: 1 1 100%; order: 3; }

  /* Ohne die beiden Werte rutscht der Pfeil vor das Logo: er hat von Haus aus
     order 0 und stuende sonst noch vor dem umsortierten Logo. */
  .way-logo { order: 1; }
  .way-go { order: 2; }

}

/* Unterschrift. Sie schliesst den persoenlichen Teil ab und sagt, wer hinter
   der Bitte steht. Das Portraet ist optional: fehlt das Bild, bleibt die Zeile
   aus Name und Rolle stehen, ohne dass ein Loch entsteht. */
.signature {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 34px 0 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}

.signature-photo {
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--rule-strong);
}

.signature-text { min-width: 0; }

.signature-name {
  display: block;
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.signature-role {
  display: block;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}