/*
  Corporate Design CSS v1.0
  Für: DataPilot.at / OnlineSicher.at
  Zweck: Gemeinsame visuelle Basis für eine konsistente Markenfamilie
*/

/* =========================================================
   1. Design Tokens / Grundvariablen
   ========================================================= */
:root{
  /* Hauptfarben */
  --brand-blue:#0B6CFD;
  --brand-dark:#0F172A;
  --brand-gradient:linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-dark) 100%);

  /* Akzentfarben */
  --accent:#22C55E;          /* Erfolg / Checkmark */
  --brand-warning:#F59E0B;   /* Warnhinweise / Security-Themen */
  --brand-danger:#DC2626;    /* Kritische Hinweise */
  --brand-info:#2563EB;      /* Info-Elemente */

  /* Textfarben */
  --brand-text:#1F2937;
  --brand-muted:#6B7280;
  --brand-heading:#0F172A;

  /* Hintergründe */
  --bg:#ffffff;
  --bg-alt:#F3F4F6;
  --bg-soft:#F8FAFC;

  /* Linien / Rahmen */
  --border:#E5E7EB;
  --border-strong:#D1D5DB;

  /* Layout */
  --container-width:1100px;
  --radius:14px;
  --radius-button:10px;
  --shadow-soft:0 10px 25px rgba(15,23,42,.08);
}

/* =========================================================
   2. Reset / Basis
   ========================================================= */
*{box-sizing:border-box}

html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--brand-text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Arial,sans-serif;
  line-height:1.6;
  scroll-behavior:smooth;
}

body{
  min-height:100vh;
}

a{
  color:var(--brand-blue);
  text-decoration:none;
}

a:hover{
  text-decoration:underline;
}

a:focus,
button:focus{
  outline:3px solid rgba(11,108,253,.35);
  outline-offset:2px;
}

img{
  max-width:100%;
  height:auto;
}

.container{
  max-width:var(--container-width);
  margin:0 auto;
  padding:0 20px;
}

/* =========================================================
   3. Header / Hero
   ========================================================= */
header{
  background:var(--brand-gradient);
  color:#fff;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
}

.brand{
  font-weight:700;
  letter-spacing:.2px;
}

nav a{
  color:#fff;
  opacity:.95;
  margin-left:18px;
}

nav a:hover{
  opacity:1;
  text-decoration:underline;
}

.hero{
  padding:64px 0 52px 0;
}

.hero h1{
  font-size:44px;
  line-height:1.15;
  margin:0 0 12px 0;
  color:#fff;
  max-width:900px;
}

.hero p{
  margin:0;
  font-size:19px;
  opacity:.95;
  max-width:780px;
}

/* =========================================================
   4. Hauptlayout / Typografie
   ========================================================= */
main{
  padding:38px 0;
}

section{
  margin:42px 0;
}

h1,h2,h3{
  color:var(--brand-heading);
}

h2{
  font-size:28px;
  line-height:1.25;
  margin:0 0 12px 0;
}

h3{
  font-size:20px;
  line-height:1.3;
  margin:0 0 8px 0;
}

p{
  margin:0 0 12px 0;
}

.muted{
  color:var(--brand-muted);
}

.lead{
  font-size:18px;
  color:var(--brand-text);
  max-width:780px;
}

/* =========================================================
   5. Grid-System
   ========================================================= */
.grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}

.grid-3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}

/* =========================================================
   6. Karten / Boxen
   ========================================================= */
.card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px;
}

.card:hover{
  box-shadow:var(--shadow-soft);
  transition:box-shadow .2s ease;
}

.highlight{
  background:var(--bg-soft);
  border-left:5px solid var(--brand-blue);
}

.info-box{
  background:#EFF6FF;
  border-left:5px solid var(--brand-info);
}

.warning-box{
  background:#FFFBEB;
  border-left:5px solid var(--brand-warning);
}

.danger-box{
  background:#FEF2F2;
  border-left:5px solid var(--brand-danger);
}

/* =========================================================
   7. Listen / Checklisten
   ========================================================= */
ul.checklist{
  list-style:none;
  padding:0;
  margin:0;
}

ul.checklist li{
  padding-left:0;
  margin:10px 0;
  display:flex;
  gap:10px;
  align-items:flex-start;
}

ul.checklist li .icon{
  width:22px;
  height:22px;
  border-radius:999px;
  background:var(--accent);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:800;
  flex:0 0 22px;
  line-height:1;
}

.risk .icon,
.warning .icon{
  background:var(--brand-warning);
}

.danger .icon{
  background:var(--brand-danger);
}

.benefits li{
  margin:8px 0;
}

/* =========================================================
   8. Buttons / Call-to-Action
   ========================================================= */
.cta{
  margin-top:22px;
  display:inline-block;
  background:#fff;
  color:var(--brand-blue);
  padding:12px 18px;
  border-radius:var(--radius-button);
  font-weight:700;
  border:2px solid #fff;
  text-decoration:none;
}

.cta:hover{
  background:transparent;
  color:#fff;
  text-decoration:none;
}

.cta.secondary{
  background:var(--brand-blue);
  color:#fff;
  border:2px solid var(--brand-blue);
}

.cta.secondary:hover{
  background:#084fb8;
  border-color:#084fb8;
  color:#fff;
}

.cta.warning{
  background:var(--brand-warning);
  color:#111827;
  border:2px solid var(--brand-warning);
}

.cta.warning:hover{
  background:#D97706;
  border-color:#D97706;
  color:#111827;
}

.cta.back{
  background:#E5E7EB;
  color:#374151;
  border:1px solid var(--border-strong);
}

.cta.back:hover{
  background:#D1D5DB;
  color:#111827;
}

.cta-row{
  margin-top:6px;
}

/* CTA in weißen Content-Bereichen sichtbar halten */
main .cta{
  background:var(--brand-blue);
  color:#fff;
  border:2px solid var(--brand-blue);
}

main .cta:hover{
  background:#084fb8;
  border-color:#084fb8;
  color:#fff;
}

main .cta.back{
  background:#E5E7EB;
  color:#374151;
  border:1px solid var(--border-strong);
}

main .cta.back:hover{
  background:#D1D5DB;
  color:#111827;
}

/* =========================================================
   9. FAQ Accordion
   ========================================================= */
.accordion{
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  background:#fff;
}

.accordion-item + .accordion-item{
  border-top:1px solid var(--border);
}

.accordion-trigger{
  width:100%;
  text-align:left;
  background:#fff;
  border:0;
  padding:16px 18px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  cursor:pointer;
  font-size:16px;
  line-height:1.4;
}

.accordion-trigger:hover{
  background:#F9FAFB;
}

.accordion-trigger:focus{
  outline:3px solid rgba(11,108,253,.35);
  outline-offset:-2px;
}

.accordion-icon{
  transition:transform .2s ease;
}

.accordion-trigger[aria-expanded="true"] .accordion-icon{
  transform:rotate(180deg);
}

.accordion-panel{
  padding:0 18px 16px 18px;
  display:none;
}

.accordion-panel[data-open="true"]{
  display:block;
}

.accordion-item h3{
  margin:0;
  font-size:18px;
  color:var(--brand-heading);
}

/* =========================================================
   10. Footer
   ========================================================= */
footer{
  background:var(--bg-alt);
  border-top:1px solid var(--border);
  padding:18px 0;
  margin-top:42px;
}

footer .links{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}

/* =========================================================
   11. Accessibility
   ========================================================= */
.skip-link{
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

.skip-link:focus{
  position:static;
  width:auto;
  height:auto;
  padding:8px;
  background:#fff;
  border:2px solid var(--brand-blue);
}

/* =========================================================
   12. Hilfsklassen
   ========================================================= */
.text-center{
  text-align:center;
}

.mt-0{margin-top:0}
.mt-1{margin-top:12px}
.mt-2{margin-top:24px}
.mt-3{margin-top:36px}

.mb-0{margin-bottom:0}
.mb-1{margin-bottom:12px}
.mb-2{margin-bottom:24px}
.mb-3{margin-bottom:36px}

/* =========================================================
   13. Responsive Design
   ========================================================= */
@media (max-width:860px){
  .grid,
  .grid-3{
    grid-template-columns:1fr;
  }

  .hero h1{
    font-size:34px;
  }

  .hero p{
    font-size:18px;
  }

  .topbar{
    align-items:flex-start;
    gap:12px;
  }

  nav{
    font-size:14px;
  }

  nav a{
    margin-left:10px;
  }
}

@media (max-width:560px){
  .topbar{
    flex-direction:column;
  }

  nav a{
    display:inline-block;
    margin:4px 12px 4px 0;
  }

  .hero{
    padding:48px 0 40px 0;
  }

  .hero h1{
    font-size:30px;
  }

  h2{
    font-size:24px;
  }

  .card{
    padding:18px;
  }
}

/* Gemeinsame Ergänzungen für Rechtstexte und Markenfamilie */
.footer-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.legal-hero{padding-top:44px;padding-bottom:38px}
.legal-content section{margin:24px 0}
.legal-card{margin-top:0}