@charset "UTF-8";
/* Unterseiten mit Anleitungen (provision.html) – ergänzt main.css, gleiche Schriften und Größen wie die Startseite */

/* Kopf: Logo, Zurück zur Startseite, Zur App */
.guide-back { margin-left: auto; font-family: var(--font-stack); font-size: 1.0625rem; color: var(--text-color); text-decoration: none; transition: color .2s; }
.guide-back:hover { color: var(--accent-color); }

.guide-intro { padding-bottom: clamp(40px, 6vw, 70px); }
.guide-intro .section-head { margin-bottom: 32px; }
.guide-intro h1 { font-size: clamp(1.875rem, 3.8vw, 2.875rem); margin-bottom: 20px; }

.guide-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.guide-actions .button-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* --- Zeitstrahl: drei Phasen, je zwei Spuren (Du / Vertrauensperson) --- */
.timeline-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.timeline-phase {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  padding: 22px 20px 20px; border: 1px solid var(--border-color); border-radius: var(--radius); background: var(--background-color);
}
/* Pfeil zur nächsten Phase */
.timeline-phase + .timeline-phase::before {
  content: ""; position: absolute; top: 34px; left: -15px; width: 12px; height: 12px;
  border-top: 2px solid var(--accent-light-color); border-right: 2px solid var(--accent-light-color); transform: rotate(45deg);
}
.timeline-phase-emergency { background: #fff8ec; border-color: #f0dcb4; }
.timeline-phase-title { display: flex; align-items: center; gap: 10px; font-size: 1.375rem; }
.timeline-phase-title span {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  font-size: 1rem; color: #fff; background: var(--button-color); letter-spacing: 0;
}
.timeline-phase-emergency .timeline-phase-title span { background: #b07a00; }
.timeline-phase-note { margin-top: -10px; font-size: 1rem; color: var(--caption-color); }

.timeline-lane { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 10px; background: var(--card-color); }
.timeline-lane-contact { background: transparent; border: 1px dashed var(--border-color); }
.timeline-lane-label { font-size: .875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--caption-color); }
.timeline-step {
  display: flex; align-items: flex-start; gap: 10px; font-size: 1.0625rem; line-height: 1.35;
  color: var(--strong-text-color); text-decoration: none;
}
.timeline-step b {
  flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%;
  font-size: .875rem; font-weight: 500; color: var(--accent-deep-color); background: var(--accent-soft-color);
}
.timeline-step:hover { color: var(--accent-color); }
.timeline-step-quiet { color: var(--caption-color); }
.timeline-wait {
  position: relative; padding: 8px 12px; border-radius: 8px; font-size: 1rem; line-height: 1.3; color: #6b4b00;
  background: repeating-linear-gradient(-45deg, #fbe7bd 0 10px, #f8deaa 10px 20px);
}

/* --- Schritte --- */
.guide-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.guide-step {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 36px; align-items: center;
  padding: 30px 32px; border-radius: var(--radius); background: var(--card-color); box-shadow: var(--shadow);
}
.guide-step-plain { grid-template-columns: minmax(0, 1fr); }
.guide-step:has(.guide-step-figure-wide) { grid-template-columns: minmax(0, 1fr) 420px; }
.guide-step-phase { font-size: .9062rem; letter-spacing: .12em; text-transform: uppercase; color: var(--caption-color); margin-bottom: 10px; }
.guide-step h3 { display: flex; align-items: center; gap: 14px; font-size: 1.5rem; margin-bottom: 14px; }
.guide-step-number {
  flex: none; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  font-size: 1.125rem; color: #fff; background: var(--button-color); letter-spacing: 0;
}
.guide-step-text p + p { margin-top: 12px; }
.guide-step-text p { color: var(--text-color); }
.guide-step-figure { margin: 0; }
.guide-step-figure img { width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--border-color); }
.guide-figure-note { margin-top: 18px; font-size: 1rem; color: var(--caption-color); }

/* --- Häufige Fragen: offen, damit alles auf dem Papier steht --- */
.guide-facts { margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 40px; }
.guide-facts dt { font-family: var(--font-stack); font-weight: 500; font-size: 1.25rem; color: #1d1d1d; margin-bottom: 8px; }
.guide-facts dd { margin: 0; color: var(--text-color); }
.guide-fact-wide { grid-column: 1 / -1; max-width: 900px; }

.guide-next h2 { font-size: clamp(1.625rem, 3vw, 2.25rem); margin-bottom: 14px; }
.guide-next > p { color: var(--text-color); margin-bottom: 24px; max-width: 760px; }
.guide-print-source { display: none; }

@media (max-width: 900px) {
  .timeline-grid { grid-template-columns: 1fr; }
  .timeline-phase + .timeline-phase::before { top: -15px; left: 34px; transform: rotate(135deg); }
  .guide-step, .guide-step:has(.guide-step-figure-wide) { grid-template-columns: 1fr; gap: 22px; padding: 24px 22px; }
  .guide-step-figure { max-width: 420px; }
  .guide-step-figure-wide { max-width: none; }
  .guide-facts { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .guide-page .header-inner { gap: 16px; }
  .guide-back { font-size: 0; white-space: nowrap; }
  .guide-back::before { content: "← Startseite"; font-size: 1rem; }
  .guide-page .header-inner .button { white-space: nowrap; }
  .guide-actions .button { width: 100%; justify-content: center; }
}

/* ===========================================================================
 * Sicherheitsseite (security.html)
 * ======================================================================== */

/* Vier Grundsätze */
.security-principles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 40px; }
.security-principles li { position: relative; padding-left: 32px; color: var(--text-color); }
.security-principles li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--accent-light-color); font-weight: 700; }
.security-principles strong { display: block; font-family: var(--font-stack); font-weight: 500; color: #1d1d1d; margin-bottom: 2px; }

/* Schlüsselhierarchie */
.key-chart { display: flex; flex-direction: column; align-items: center; gap: 0; max-width: 980px; margin: 0 auto; }
.key-row { display: grid; grid-template-columns: minmax(0, 380px); justify-content: center; gap: 16px; width: 100%; }
.key-row-two { grid-template-columns: repeat(2, minmax(0, 340px)); }
.key-row-three { grid-template-columns: repeat(3, minmax(0, 300px)); }
.key-box {
  display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; border-radius: 12px; text-align: center;
  border: 1.5px solid var(--border-color); background: var(--card-color);
}
.key-box b { font-family: var(--font-stack); font-weight: 500; font-size: 1.1875rem; color: #1d1d1d; }
.key-box span { font-size: 1rem; line-height: 1.35; color: var(--caption-color); }
.key-box-secret { border-color: #1d1d1d; }
.key-box-browser { background: var(--accent-soft-color); border-color: var(--accent-light-color); }
.key-box-stored { background: var(--card-color); border-color: var(--button-color); border-style: dashed; }
.key-box-server { background: #f1f1f1; border-color: #bdbdbd; }
.key-box-paper { background: #fff8ec; border-color: #e0c48a; }
.key-box-data { background: #f1f1f1; border-color: #cfcfcf; }
.key-arrow {
  display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0; padding: 4px 0;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .875rem; color: var(--caption-color); text-align: center;
}
/* Linie über der Beschriftung, Pfeilspitze darunter */
.key-arrow::before { content: ""; width: 2px; height: 14px; background: var(--accent-light-color); }
.key-arrow::after { content: ""; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid var(--accent-light-color); }
.key-legend { list-style: none; margin: 28px auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; font-size: 1rem; color: var(--text-color); }
.key-legend li { display: flex; align-items: center; gap: 8px; }
.key-swatch { display: inline-block; width: 22px; height: 16px; border-radius: 4px; border: 1.5px solid; }

/* Details für Technikinteressierte */
.security-layers .guide-step { padding: 30px 34px; }
.security-details {
  display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px 20px; margin: 20px 0 0; padding: 18px 20px;
  border-radius: 10px; background: var(--background-color); font-size: 1.0312rem; line-height: 1.5;
}
.security-details dt { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .875rem; letter-spacing: .02em; color: var(--accent-deep-color); padding-top: 3px; }
.security-details dd { margin: 0; color: var(--text-color); }
.term { color: inherit; text-decoration: underline dotted var(--accent-light-color); text-underline-offset: 3px; }
.term:hover { color: var(--accent-color); }

/* Was der Server weiß */
.knowledge-columns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.knowledge-column { padding: 26px 28px; border-radius: var(--radius); background: var(--card-color); box-shadow: var(--shadow); }
.knowledge-column h3 { font-size: 1.375rem; margin-bottom: 14px; }
.knowledge-column ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.knowledge-column li { position: relative; padding-left: 30px; color: var(--text-color); }
.knowledge-known li::before { content: "\25CF"; position: absolute; left: 4px; top: 0; font-size: .75em; color: #9a9a9a; }
.knowledge-unknown li::before { content: "\2715"; position: absolute; left: 2px; top: 0; font-weight: 700; color: var(--button-color); }

/* Glossar */
.glossary-list { margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 40px; }
.glossary-list > div { scroll-margin-top: calc(var(--header-height, 79px) + 20px); padding: 6px 0 6px 16px; border-left: 3px solid var(--accent-soft-color); }
.glossary-list > div:target { border-left-color: var(--button-color); background: var(--accent-soft-color); border-radius: 0 8px 8px 0; }
.glossary-list dt { font-family: var(--font-stack); font-weight: 500; font-size: 1.1875rem; color: #1d1d1d; margin-bottom: 4px; }
.glossary-list dd { margin: 0; color: var(--text-color); }

@media (max-width: 900px) {
  .security-principles, .knowledge-columns, .glossary-list { grid-template-columns: 1fr; }
  .key-row-two, .key-row-three { grid-template-columns: minmax(0, 380px); }
  .security-details { grid-template-columns: 1fr; gap: 2px; }
  .security-details dd + dt { margin-top: 10px; }
  .security-layers .guide-step { padding: 24px 22px; }
}

/* --- Ausdruck: schlicht, schwarz auf weiß, ohne Navigation; Adresse und QR-Code am Ende --- */
@media print {
  /* Wie die Ausdrucke der App (keyfiler/public/main.css): Ränder, Kopfzeile „Keyfiler“ links und Titel rechts,
     Fußzeile mit Hinweis und Seitenzahl, Logo 42 mm breit, Titel 18 pt, Zwischenüberschriften grün in Versalien */
  @page {
    size: A4;
    margin: 18mm 16mm 20mm;
    @top-left { content: "Keyfiler"; font-family: "Saira", sans-serif; font-size: 9pt; font-weight: 500; letter-spacing: .04em; color: #059862; }
    @top-right { font-family: "Saira", sans-serif; font-size: 8.5pt; color: #8a8a8a; }
    @bottom-center {
      content: "Keyfiler for Web · © 2026 Markus Heinlein Software & Tools · www.keyfiler.com\A Seite " counter(page) " von " counter(pages);
      font-family: "Saira", sans-serif; font-size: 7.5pt; line-height: 1.6; color: #9a9a9a; text-align: center; white-space: pre;
    }
  }
  html { font-size: 13px; } /* Fließtext knapp 10 pt wie in der App */
  /* Titel oben rechts je Seite über benannte Seiten (Kopfzeile kann keinen Seiteninhalt lesen) */
  .guide-provision { page: provision; }
  .guide-security { page: security; }
  @page provision { @top-right { content: "Keyfiler · Vorsorgeordner mit Notfallzugang"; } }
  @page security { @top-right { content: "Keyfiler · Sicherheit im Detail"; } }
  #footer { display: none; } /* Hinweis und © stehen in der Fußzeile jeder Seite */
  .brand-logo { width: 42mm; height: auto; }
  .eyebrow { font-size: 8.5pt; letter-spacing: .12em; color: #04724a; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  h1, h2, h3 { color: #1d1d1d; }
  body { background: #fff; color: #000; }
  #header { position: static; background: none; backdrop-filter: none; border: 0; }
  #header .guide-back, #header .button, .guide-actions, #footer .footer-links, .guide-figure-note { display: none !important; }
  .header-inner { padding: 0 0 6mm; }
  .section, .section-tinted { padding: 0; margin: 0 0 9mm; background: none; max-width: none; }
  .section-head { margin-bottom: 5mm; max-width: none; }
  .section-head h2 { font-size: 14pt; margin-bottom: 3mm; }
  .guide-intro h1 { font-size: 18pt; letter-spacing: -.01em; }
  .section-lead { font-size: 1.15rem; }
  .timeline-grid { grid-template-columns: repeat(3, 1fr); gap: 5mm; }
  .timeline-phase { break-inside: avoid; padding: 4mm; background: #fff; }
  .timeline-phase-emergency { background: #fffaf0; }
  .timeline-phase + .timeline-phase::before { top: 7mm; left: -4mm; transform: rotate(45deg); }
  .timeline-lane { padding: 2.5mm; border: 1px solid #e6e6e6; }
  .timeline-wait { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .timeline-phase-title span, .timeline-step b, .guide-step-number { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .guide-steps { gap: 5mm; }
  .guide-step, .guide-step:has(.guide-step-figure-wide) {
    grid-template-columns: minmax(0, 1fr) 48mm; gap: 6mm; padding: 4mm 0; box-shadow: none; border-radius: 0;
    border-top: 1px solid #ddd; break-inside: avoid;
  }
  .guide-step-plain { grid-template-columns: 1fr; }
  .guide-step h3 { font-size: 11.5pt; margin-bottom: 2mm; }
  .guide-step-number { width: 8mm; height: 8mm; font-size: 1rem; }
  .guide-step-figure img { border-radius: 4px; }
  #steps { break-before: page; }
  #facts { margin-top: 4mm; padding-top: 6mm; border-top: 1px solid #ddd; }
  .guide-facts { gap: 5mm 8mm; }
  .guide-facts > div { break-inside: avoid; }
  .guide-next { display: none; } /* „Noch Fragen?“ nur am Bildschirm */
  /* Adresse und QR-Code oben rechts auf der ersten Seite */
  .guide-intro { position: relative; }
  .guide-intro .section-head { padding-right: 46mm; }
  .guide-print-source { display: flex; flex-direction: column; align-items: flex-start; gap: 2mm; position: absolute; top: 0; right: 0; width: 40mm; font-size: .85rem; line-height: 1.35; color: #333; }
  .guide-print-source img { width: 26mm; height: 26mm; }
  a { color: #000; text-decoration: none; }
  /* Sicherheitsseite – Papier ist schmaler als 900 px: die Spalten wie am Computer erzwingen */
  .security-principles, .knowledge-columns, .glossary-list { grid-template-columns: repeat(2, 1fr); }
  .key-row { grid-template-columns: minmax(0, 70mm); }
  .key-row-two { grid-template-columns: repeat(2, minmax(0, 62mm)); }
  .key-row-three { grid-template-columns: repeat(3, minmax(0, 54mm)); gap: 3mm; }
  .key-box b { font-size: 1.05rem; }
  .key-box span { font-size: .85rem; }
  .security-details { grid-template-columns: 34mm minmax(0, 1fr); gap: 1.5mm 5mm; }
  .security-details dd + dt { margin-top: 0; }
  .guide-facts { grid-template-columns: repeat(2, 1fr); }
  .key-chart, .security-principles, .knowledge-columns, .knowledge-column { break-inside: avoid; }
  .key-box { padding: 2.5mm 4mm; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .key-arrow { padding: 1mm 0; }
  .key-arrow::before, .key-arrow::after { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .key-legend { margin-top: 4mm; }
  .key-swatch { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  #keys, #layers { break-before: page; }
  #knowledge, #limits { break-inside: avoid; }
  .section-head { break-after: avoid; }
  .security-layers .guide-step { padding: 4mm 0; }
  .security-details { padding: 3mm 4mm; margin-top: 3mm; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .knowledge-column { box-shadow: none; border: 1px solid #ddd; padding: 4mm; }
  #glossary { break-before: page; }
  .glossary-list { gap: 3mm 8mm; }
  .glossary-list > div { break-inside: avoid; }
  .term { text-decoration: none; }
}