/* SyxMail – Seite „Mailprogramm für Windows“ (mailprogramm.html).
   Baut auf startseite.css auf (Einstieg, Abschnitte, Fragen, Abschluss). */

/* ------------------------------------------------ Vorschau des Programms */
.app { position: relative; background: var(--surface); border: 1px solid #cfd6e2; border-radius: 8px;
  box-shadow: 0 2px 4px rgba(14, 37, 72, .06), 0 30px 60px -24px rgba(14, 37, 72, .35);
  font: 13px/1.4 var(--sans); color: var(--ink); overflow: hidden; animation: mock-in .7s ease-out both; }
.app-bar { display: flex; align-items: center; height: 34px; padding-left: 12px; background: var(--brand); color: #dfe6f3; font-size: 12.5px; }
.app-bar img { width: 16px; height: 16px; margin-right: 8px; filter: brightness(0) invert(1); }
.app-bar .ctl { margin-left: auto; display: flex; height: 100%; }
.app-bar .ctl i { width: 44px; display: grid; place-items: center; position: relative; }
.app-bar .ctl i::before { content: ""; display: block; }
.app-bar .ctl i:nth-child(1)::before { width: 10px; height: 1px; background: currentColor; }
.app-bar .ctl i:nth-child(2)::before { width: 9px; height: 9px; border: 1px solid currentColor; }
.app-bar .ctl i:nth-child(3)::before { width: 12px; height: 12px;
  background: linear-gradient(45deg, transparent 46%, currentColor 46%, currentColor 54%, transparent 54%),
              linear-gradient(-45deg, transparent 46%, currentColor 46%, currentColor 54%, transparent 54%); }
.app-body { display: grid; grid-template-columns: 168px minmax(0, 1fr) minmax(0, 1.15fr); height: 420px; }

.app-side { padding: 12px 10px; border-right: 1px solid #eceef2; background: #fafbfc; display: flex; flex-direction: column; gap: 12px; }
.app-side .mock-compose { margin: 0; }
.app-side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.app-side li { display: flex; align-items: center; gap: 7px; padding: 5px 8px; border-radius: 5px; color: var(--muted); white-space: nowrap; }
.app-side li.on { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.app-side li b { margin-left: auto; font-weight: 600; }
.app-side li.konto { margin-top: 6px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.app-side .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dot.d1 { background: #146efc; } .dot.d2 { background: #4f7a6b; } .dot.d3 { background: #8a5a6e; }

/* kleiner Monatskalender unten in der Leiste */
.app-cal { margin-top: auto; padding: 8px; border: 1px solid #eceef2; border-radius: 6px; background: #fff; }
.app-cal div { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; font-size: 10px; color: var(--muted); }
.app-cal span.k { font-weight: 600; color: var(--faint); }
.app-cal span.t { background: var(--brand); color: #fff; border-radius: 3px; font-weight: 600; }
.app-cal span.e { box-shadow: inset 0 -2px 0 #146efc; }

.app .mock-list { border-right: 1px solid #eceef2; }
.app .mock-row .acc { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }

/* Link-Prüfung über dem Lesebereich */
.app-link { position: absolute; right: 18px; bottom: 18px; width: min(300px, 70%); padding: 12px 14px; border-radius: 8px;
  background: #fff; border: 1px solid #e3b3ae; box-shadow: 0 14px 30px -10px rgba(14, 37, 72, .45);
  animation: toast-in .5s 2.4s ease-out both; }
.app-link b { display: flex; align-items: center; gap: 7px; color: var(--danger); font-size: 13px; }
.app-link b svg { width: 16px; height: 16px; }
.app-link p { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.app-link code { display: block; margin-top: 6px; padding: 5px 8px; border-radius: 5px; background: var(--sunk); font: 11.5px/1.4 ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--ink); word-break: break-all; }

/* ------------------------------------------------------ Download-Kasten */
.download-note { margin: 14px 0 0; font-size: 14px; color: var(--muted); }
.download-box { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 40px; align-items: center;
  padding: clamp(24px, 4vw, 40px); border-radius: 12px; background: var(--surface); border: 2px solid var(--brand); box-shadow: var(--shadow); }
.download-box h2 { margin-bottom: 8px; }
.download-box p { margin: 0; color: var(--muted); }

/* Schritte zur Einrichtung */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; counter-reset: schritt; }
.steps li { position: relative; padding: 26px 24px 24px; border-radius: 12px; background: var(--surface); border: 1px solid var(--rule); counter-increment: schritt; }
.section.alt .steps li { background: var(--paper); }
.steps li::before { content: counter(schritt); display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 14px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 600; }
.steps p { margin: 0; color: var(--muted); font-size: 15.5px; }

/* ---------------------------------------------------------- Bildschirmgrößen */
@media (max-width: 1180px) {
  .app-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  .app-side { display: none; }
}
@media (max-width: 960px) {
  .steps { grid-template-columns: 1fr; }
  .download-box { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .app-body { grid-template-columns: 1fr; height: auto; }
  .app .mock-read { display: none; }
  .app .mock-row:nth-child(n+5) { display: none; }
  .app-link { position: static; width: auto; margin: 0 12px 12px; }
  .download-box .btn { width: 100%; }
}

/* weitere Funktionen unter den drei großen */
.grid-features.weitere { margin-top: clamp(56px, 7vw, 96px); }

/* Überschrift im Einstieg etwas kleiner – sie ist länger als auf der Startseite */
.h1-programm { font-size: clamp(34px, 3.6vw, 50px); }