/* ===========================
   assets/style.css  (clean)
   =========================== */

/* CSS-Variablen / Design-Token */
:root{
  --bg:#f4f7fb;
  --text:#0f172a;
  --muted:#64748b;

  --brand:#0ea5e9;      /* cyan-500 */
  --brand-600:#0284c7;  /* cyan-600 */
  --brand-700:#0369a1;  /* cyan-700 */

  --accent:#ffd34d;     /* gelbe Badge */
  --card:#ffffff;
  --border:#e6eef7;
  --ring:#a5d8ff;
}

/* ===== Reset / Base ===== */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.55;
}
a{ color: var(--brand); text-decoration: none; }
a:hover{ text-decoration: underline; }

/* ===== Container ===== */
.container{ max-width:1200px; margin:0 auto; padding:0 20px; }
.container--app{ max-width:900px; margin:30px auto; background:#fff; padding:20px; border-radius:8px; box-shadow:0 0 10px rgba(0,0,0,.05); }
.container_login{ max-width:400px; margin:30px auto; background:#fff; padding:20px; border-radius:8px; box-shadow:0 0 10px rgba(0,0,0,.05); }

/* ===== Header ===== */
.header{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.9); backdrop-filter:blur(12px); border-bottom:1px solid var(--border); }
.header-row{ display:flex; align-items:center; justify-content:space-between; min-height:68px; }
.brand{ font-weight:800; letter-spacing:.2px; color:var(--brand-700); display:flex; align-items:center; gap:10px; }
.brand img{ height:40px; }
.nav{ display:flex; gap:16px; align-items:center; }
.nav a{ color:#0b1220; }
.nav .btn{ margin-left:6px; }
.lang{ opacity:.8; }

/* ===== Buttons ===== */
.btn{
  display:inline-block; background:var(--brand); color:#fff;
  padding:10px 16px; border-radius:999px; border:1px solid transparent;
  box-shadow:0 8px 20px rgba(3,105,161,.15); transition:.15s all;
}
.btn:hover{ background:var(--brand-600); text-decoration:none; transform:translateY(-1px); }
.btn.ghost{ background:#fff; color:var(--brand); border-color:#dbeafe; box-shadow:none; }
.btn.xl{ padding:13px 20px; font-weight:700; }

/* ===== Forms / Tables ===== */
input, select, textarea{
  width:100%; padding:10px; margin-bottom:16px;
  border:1px solid #b3d4fc; border-radius:6px; box-sizing:border-box;
}
button{
  padding:10px 20px; background:#007bff; color:#fff;
  border:none; border-radius:6px; cursor:pointer;
}
button:hover{ background:#0056b3; }

table{ width:100%; border-collapse:collapse; margin-bottom:20px; }
th, td{ border:1px solid #ddd; padding:10px; }
th{ background:#f0f0f0; text-align:left; }

form .item-group{ display:flex; gap:10px; align-items:center; }
form .item-group input{ flex:1; }

/* ===== Modal ===== */
.modal{
  position:fixed; inset:0; background:rgba(0,0,0,.5);
  display:flex; align-items:center; justify-content:center; z-index:9999;
}
.modal-content{
  background:#fff; border-radius:8px; width:600px;
  max-height:90vh; overflow-y:auto; overflow-x:hidden;
  padding:20px; box-shadow:0 5px 25px rgba(0,0,0,.2); position:relative;
}
.modal-close{
  position:absolute; top:10px; right:10px; background:#007bff; color:#fff;
  border:none; padding:6px 10px; border-radius:4px; cursor:pointer;
}
.modal-close:hover{ background:#0056b3; }

.checkbox-group{ margin:5px 0 10px; }
.checkbox-group label{ display:inline-flex; align-items:center; gap:4px; font-size:14px; cursor:pointer; }
.checkbox-group input[type="checkbox"]{ margin:0; width:16px; height:16px; }

/* ===== Aktionen-Spalte (Listen/Tabellen) ===== */
td.actions{ white-space:nowrap; }
td.actions .icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; font-size:22px; line-height:1;
  border-radius:8px; border:1px solid rgba(0,0,0,.12);
  background:#fff; text-decoration:none; margin-right:6px;
  transition: background .15s, border-color .15s, transform .05s;
}
td.actions .icon-btn:hover{ background:#f0f4ff; border-color:#a9c3ff; }
td.actions .icon-btn.danger:hover{ background:#ffecec; border-color:#ffb1b1; }
td.actions .icon-btn:active{ transform:scale(.98); }

/* ===== Hero ===== */
.hero{
  padding:84px 0;
  background:linear-gradient(180deg, #eaf6ff 0%, #f7fbff 100%);
}
.hero-grid{
  display:grid; grid-template-columns:1.15fr 1fr; gap:36px; align-items:center;
}
.hero h1{ font-size:46px; line-height:1.12; margin:0 0 12px; color:#0b1220; }
.lead{ color:var(--muted); font-size:18px; margin:0 0 18px; }
.hero-cta{ display:flex; gap:10px; margin:16px 0 18px; }
.trust{ list-style:none; padding:0; margin:0; display:grid; gap:6px; }

/* ===== Hero Art / Mockup (ohne Streifen) ===== */
.hero-art{ display:flex; justify-content:flex-end; align-items:center; }

.mockup-card{
  background: linear-gradient(180deg,#eef7ff 0%, #f9fcff 100%);
  border: 1px solid #e2f1ff;
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(14,165,233,.18);
  padding: 0;                 /* kein Innenabstand => kein heller Rand */
  overflow: hidden;           /* Rundung maskiert Bild */
  width: 460px;
  height: 300px;
  line-height: 0;             /* Baseline-Gap killen */
}
.mockup-card img{
  display:block; width:100%; height:100%;
  object-fit:cover; border:0;
}

/* ===== Sections / Cards ===== */
.section{ padding:64px 0; }
.section.alt{ background:#fff; }
h2{ font-size:30px; margin:0 0 18px; }
.muted{ color:var(--muted); }
.small{ font-size:.9rem; }

.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card{
  background:var(--card); border:1px solid var(--border); border-radius:16px;
  padding:18px; box-shadow:0 2px 18px rgba(2,132,199,.06);
}
.card h3{ margin:.2rem 0 .5rem; color:#0b1220; }

.pricing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
  justify-content: center;
  align-items: stretch;
  margin-top: 40px;
}

/* Erzwinge 4 nebeneinander bei Desktop */
@media (min-width: 1100px) {
  .pricing {
    grid-template-columns: repeat(4, 1fr);
  }
}

.price-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
}

.price-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.price-card.featured {
  border: 2px solid #007bff;
  box-shadow: 0 0 20px rgba(0,123,255,0.1);
}

.price-card .badge {
  font-size: 13px;
  color: #007bff;
  font-weight: bold;
  margin-bottom: 10px;
}

.price-card .plan {
  font-size: 1.4rem;
  margin-bottom: 10px;
}

.price-card .price {
  font-size: 2rem;
  color: #007bff;
  font-weight: bold;
  margin-bottom: 5px;
}

.price-card .term {
  color: #666;
  font-size: 0.95rem;
  margin-bottom: 15px;
}

.price-card .features {
  text-align: left;
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
  line-height: 1.6;
}


/* ===== Responsive ===== */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-art{ justify-content:center; margin-top:16px; }
  .mockup-card{ width:100%; height:auto; aspect-ratio: 46 / 30; }
  .mockup-card img{ height:100%; }
}