/* ============================================================
   Vorlagen zum Kopieren
   ============================================================
   Teil der nach Funktion aufgeteilten Gestaltung (29.08.2026).

   Vorher lag alles in einer seite.css mit 1.940 Zeilen, und jede neue
   Funktion wurde hinten drangehaengt. Max am 29.08.2026: "dass nicht
   alles in App.js reinkommt und in CSS, sondern dass das nach Funktion
   getrennt wird." Beim JavaScript war das laengst so, beim CSS nicht.

   Neue Regeln gehoeren in die Datei ihrer Funktion, nicht ans Ende der
   naechstbesten. Die Einbindereihenfolge in den HTML-Dateien entspricht
   der Reihenfolge, in der die Bloecke vorher in seite.css standen -
   daran haengt die Kaskade. tests/frontend-architecture.test.js prueft
   beides.
   ============================================================ */

/* ---------- Vorlagen zum Kopieren ---------- */

.vorlage { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); overflow: hidden; }
.vorlage-kopf {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 15px;
  background: var(--marke-lighter);
  border-bottom: 1px solid var(--border);
}
.vorlage-titel { font-family: var(--font-titel); font-weight: 700; font-size: .85rem; display: flex; align-items: center; gap: 9px; }
.entwurf {
  font-size: .65rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  background: var(--karte-gelb-hell); color: #713f12;
  border: 1px solid #fde68a; border-radius: 999px; padding: 3px 8px;
}
.kopieren {
  margin-left: auto;
  font: inherit; font-size: .8rem; font-weight: 600;
  padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--card); color: var(--marke-hell);
  cursor: pointer; min-height: 44px;
}
.kopieren:hover { border-color: var(--marke-hell); }
.kopieren.fertig { background: var(--green-light); border-color: var(--green); color: var(--green-dark); }

/* Der Vorlagentext selbst. Monospace, damit man beim Ausfüllen sieht, wo
   die eckigen Klammern anfangen und aufhören. Umbruch erlaubt, sonst
   entsteht auf dem Handy ein waagerechter Schieber. */
.vorlage-text {
  margin: 0;
  padding: 16px 17px;
  font-family: "SF Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: .82rem;
  line-height: 1.75;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text);
}

.quelle { font-size: .78rem; font-style: italic; }

/* Verweise innerhalb des Hinweisbalkens: gleiche Farbfamilie, damit der
   Balken nicht durch ein blaues Link-Blau auseinanderfällt. */
.hinweisbalken a { color: #713f12; font-weight: 700; }

/* Der Ablauf ist die Hauptinformation, die Vorlage erst das Werkzeug dazu.
   Die senkrechte Linie bleibt auch auf dem Handy leicht zu verfolgen. */
.absage-weg {
  max-width: 760px;
  margin: 6px 0 24px;
}

.absage-sprung {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 8px;
  color: var(--marke);
  font-weight: 700;
  text-underline-offset: 3px;
}

#email-spiel { scroll-margin-top: 110px; }
.lehrabend-hinweis { margin-bottom: 10px; }

/* ---------- Die drei Fragen vor dem Ablauf ---------- */

/* Runde 1 des Usability-Tests liess drei Fragen offen: wen benachrichtige
   ich, worueber, bis wann. Als Fliesstext gingen sie beim Ueberfliegen
   unter - deshalb je eine eigene Flaeche mit der Frage als Ueberschrift.
   Der farbige Streifen links bindet die drei zu einer Gruppe zusammen,
   ohne dass ueber ihnen noch eine Zwischenueberschrift stehen muss. */
.absage-kurz {
  display: grid;
  gap: 10px;
  max-width: 760px;
  margin: 14px 0 22px;
  padding: 0;
}

.absage-kurz-punkt {
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--marke);
  border-radius: var(--radius-sm);
  background: var(--card);
}

.absage-kurz dt {
  margin-bottom: 4px;
  font-family: var(--font-titel);
  font-size: .92rem;
  font-weight: 700;
  color: var(--text);
}

.absage-kurz dd {
  margin: 0;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--muted);
}

/* ---------- Zwei Wege aus derselben Vorlage ---------- */

/* Kopieren und Mail-App stehen als Paar zusammen. Der Auto-Rand sitzt
   jetzt an der Gruppe statt am Kopierknopf, sonst schoebe er die beiden
   im Kopf auseinander. */
.vorlage-knoepfe {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-left: auto;
}

.vorlage-knoepfe .kopieren { margin-left: 0; }

/* Der Weg in die Mail-App ist der erwartete (Runde 2 und 3) und deshalb
   der gefuellte Knopf. Ein <a> und kein <button>: es ist ein Verweis auf
   mailto:, und nur so bietet der Browser "Link kopieren" und das Oeffnen
   in einem anderen Programm an. */
.vorlage-mailto {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 9px 16px;
  border: 1px solid var(--marke);
  border-radius: 999px;
  background: var(--marke);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  text-decoration: none;
}

.vorlage-mailto:hover,
.vorlage-mailto:focus-visible { background: var(--marke-dunkel); border-color: var(--marke-dunkel); }

/* Ohne diese Zeile bliebe der Knopf sichtbar, auch wenn das Skript ihn
   versteckt: die Browserregel fuer [hidden] ist "display: none", und ein
   display aus dem Stylesheet der Seite schlaegt sie. Genau deshalb muss
   jedes display: ... neben einem hidden-Schalter diese Regel bekommen. */
.vorlage-mailto[hidden] { display: none; }

/* Steht unter dem Vorlagentext, nicht ueber den Knoepfen: gelesen wird
   der Hinweis erst, wenn der erste Weg nicht funktioniert hat. */
.vorlage-fuss {
  margin: 0;
  padding: 12px 17px 15px;
  border-top: 1px solid var(--border);
  font-size: .82rem;
  line-height: 1.55;
  color: var(--muted);
}