/* WhatsConnect — Design-System (design/DESIGN-SYSTEM.md), verbindlich für alle Views. */

:root{
--color-deep-sea:#075e54; --color-surfie:#128c7e; --color-meadow:#25d366;
--color-gossip:#dcf8c6; --color-picton:#34b7f1; --color-pearl-bush:#ece5dd;
--gray-900:#1f2a2e; --gray-700:#333333; --gray-500:#6b7680; --gray-400:#8a949c;
--gray-200:#e2e6e9; --gray-100:#f5f6f7; --white:#ffffff;
--text-heading:var(--color-deep-sea); --text-subheading:var(--color-surfie);
--text-body:var(--gray-700); --text-caption:var(--gray-400); --text-inverse:var(--white);
--text-link:var(--color-surfie);
--surface-page:var(--white); --surface-card:var(--white); --surface-chat:var(--color-pearl-bush);
--surface-bubble-in:var(--color-gossip); --surface-bubble-out:var(--color-meadow);
--action-primary:var(--color-meadow); --action-primary-hover:#1fb956;
--action-secondary:var(--color-surfie); --action-secondary-hover:#0f7568;
--accent:var(--color-picton); --border-default:var(--gray-200); --border-focus:var(--color-picton);
--font-sans:'Inter',-apple-system,'Segoe UI',sans-serif;
--fs-h1:32px; --fw-h1:700; --fs-h2:24px; --fw-h2:600; --fs-body:16px; --fw-body:400;
--fs-caption:12px; --fw-caption:400; --fs-label:14px; --lh-tight:1.2; --lh-body:1.5;
--space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px;
--radius-sm:6px; --radius-md:8px; --radius-lg:12px; --radius-full:999px;
--shadow-card:0 1px 3px rgba(7,94,84,.08),0 1px 2px rgba(0,0,0,.04);
--shadow-focus:0 0 0 3px rgba(52,183,241,.25);
--color-danger:#a3242b; --surface-danger:#fdecec;
--color-success:var(--color-meadow); --surface-success:var(--color-gossip);
}

@font-face{
  font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/assets/fonts/inter-latin-400.woff2') format('woff2');
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap;
  src:url('/assets/fonts/inter-latin-600.woff2') format('woff2');
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap;
  src:url('/assets/fonts/inter-latin-700.woff2') format('woff2');
}

*, *::before, *::after{ box-sizing:border-box; }

body{
  margin:0; font-family:var(--font-sans); font-size:var(--fs-body); font-weight:var(--fw-body);
  color:var(--text-body); background:var(--gray-100);
}

h1{ font-size:var(--fs-h1); font-weight:var(--fw-h1); color:var(--text-heading); line-height:var(--lh-tight); margin:0 0 var(--space-2); }
h2{ font-size:var(--fs-h2); font-weight:var(--fw-h2); color:var(--text-subheading); line-height:var(--lh-tight); margin:0 0 var(--space-1); }
p{ line-height:var(--lh-body); margin:0 0 var(--space-4); }

a{ color:var(--text-link); font-weight:600; text-decoration:none; }
a:hover{ color:var(--action-secondary-hover); text-decoration:underline; }

/* ---------------- Logo / Wortmarke ---------------- */
.logo{ display:inline-flex; align-items:center; gap:10px; }
.logo svg{ color:var(--color-meadow); }
.logo span{ font-weight:700; font-size:.9em; color:var(--text-heading); }

/* ---------------- Header ---------------- */
.header{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
  background:var(--white);
  border-bottom:1px solid var(--border-default); padding:14px 28px;
}
.header .logo{ flex-shrink:0; white-space:nowrap; }
.header__nav{ display:flex; align-items:center; gap:var(--space-4); min-width:0; }
.header__nav a{ display:inline-flex; align-items:center; color:var(--color-surfie); flex-shrink:0; }
.header__nav svg{ width:22px; height:22px; }
.header__wer{
  font-size:13px; color:var(--text-caption); margin-right:var(--space-2);
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
@media (max-width:560px){
  .header{ padding:12px 16px; }
  .header__wer{ display:none; } /* Identität steht im Dashboard; Platz gehört dem Logo */
}

/* ---------------- Seiten-Layout ---------------- */
.page-center{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:var(--space-5);
}
.page-main{
  max-width:880px; margin:var(--space-6) auto; padding:0 var(--space-5);
  display:grid; gap:var(--space-5); grid-template-columns:1fr;
}
@media (min-width:760px){
  .page-main{ grid-template-columns:1fr 1fr; }
  .card--wide{ grid-column:1 / -1; }
}

/* ---------------- Karte ---------------- */
.card{
  background:var(--surface-card); border-radius:var(--radius-lg); box-shadow:var(--shadow-card);
  padding:40px 48px; width:100%;
}
.card--narrow{ max-width:420px; text-align:center; }
.card--form{ max-width:420px; }
@media (max-width:600px){
  .card{ padding:24px; }
}

/* ---------------- Button ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--action-primary); color:var(--text-inverse); border:none;
  border-radius:var(--radius-sm); padding:10px 20px; font-size:14px; font-weight:600;
  font-family:inherit; cursor:pointer; transition:background .15s ease-out;
  text-decoration:none;
}
.btn:hover{ background:var(--action-primary-hover); text-decoration:none; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.btn--secondary{ background:var(--action-secondary); }
.btn--secondary:hover{ background:var(--action-secondary-hover); }
.btn--block{ width:100%; }

/* ---------------- Formularfelder ---------------- */
.field{ display:block; margin-top:var(--space-3); text-align:left; }
.field label{ display:block; font-size:var(--fs-label); font-weight:600; margin-bottom:var(--space-1); color:var(--text-body); }
.input, .field input{
  width:100%; font-size:15px; font-weight:400; font-family:inherit; color:var(--text-body);
  border:2px solid var(--border-focus); border-radius:var(--radius-md); padding:10px 14px;
  outline:none; background:var(--white);
}
.input:focus, .field input:focus{ box-shadow:var(--shadow-focus); }
.input[readonly]{ background:var(--gray-100); font-family:ui-monospace,Menlo,monospace; }

/* ---------------- Textlink ---------------- */
.textlink{ font-size:14px; font-weight:600; color:var(--text-link); }
.textlink:hover{ color:var(--action-secondary-hover); text-decoration:underline; }
.textlink::after{ content:'\203A'; margin-left:4px; }

/* ---------------- Badge / Alert ---------------- */
.badge{
  display:inline-block; padding:4px 12px; border-radius:var(--radius-full); font-size:12.5px;
  font-weight:600; color:var(--text-inverse);
}
.badge--success{ background:var(--color-meadow); }
.badge--warn{ background:#b45309; }
.badge--danger{ background:var(--color-danger); }

.alert{
  border-radius:var(--radius-md); padding:10px 14px; font-size:13.5px; margin-bottom:var(--space-4);
  text-align:left;
}
.alert--error{ background:var(--surface-danger); color:var(--color-danger); }
.alert--success{ background:var(--surface-success); color:var(--color-deep-sea); }

/* ---------------- QR-Rahmen ---------------- */
.qr-frame{
  display:inline-flex; align-items:center; justify-content:center; position:relative;
  width:232px; height:232px; padding:8px; background:var(--white);
  border:1px solid var(--border-default); border-radius:var(--radius-md);
}
.qr-frame img{ width:100%; height:100%; object-fit:contain; }
.qr-frame--connected img{ filter:blur(3px); opacity:.35; }
.qr-frame__check{
  display:none; position:absolute; inset:0; align-items:center; justify-content:center;
}
.qr-frame--connected .qr-frame__check{ display:flex; }
.qr-frame__check span{
  width:64px; height:64px; border-radius:50%; background:var(--color-meadow);
  display:flex; align-items:center; justify-content:center; color:var(--white);
}

.status{ display:flex; align-items:center; gap:var(--space-2); margin-top:var(--space-3); }
.status-dot{ width:8px; height:8px; border-radius:50%; background:var(--gray-400); flex:none; }
.status--connected .status-dot{ background:var(--color-meadow); }
.status__text{ font-size:13px; font-weight:600; color:var(--text-caption); }
.status--connected .status__text{ color:var(--color-surfie); }

/* ---------------- Schritte-Liste ---------------- */
.steps{ text-align:left; margin:var(--space-4) 0 0; padding-left:20px; color:var(--text-body); font-size:14px; }
.steps li{ margin:var(--space-1) 0; }
.steps + .caption{ margin-top:var(--space-3); }

.caption{ font-size:var(--fs-caption); font-weight:var(--fw-caption); color:var(--text-caption); line-height:var(--lh-body); }

/* ---------------- Code / Copy-Block ---------------- */
code, .code{
  background:var(--gray-100); padding:2px 6px; border-radius:5px; font-size:13px;
  font-family:ui-monospace,Menlo,monospace;
}
.copy-block{
  display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; margin-top:var(--space-3);
}
.box{ background:var(--gray-100); border-radius:var(--radius-md); padding:14px; margin-top:var(--space-3); text-align:left; }

/* ---------------- Dienstprogramme ---------------- */
.row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:10px; }
.muted{ color:var(--text-caption); font-size:13px; }

/* Mobile-Feinschliff */
.copy-block .input{ flex:1 1 220px; min-width:0; }
.card{ overflow-wrap:anywhere; }
@media (max-width:560px){
  .card{ padding:24px; }
  .btn{ width:auto; }
}