/* ============================================================
   Ozawade · ESS-Awareness — Design-System (Ozawade-CI)
   Blau / Gelb / Orange · Nunito · freundlich-klar
   Gemeinsame Marke für Landing, Fragebogen, Fachbereich, Dashboard.
   Bioprojet = Firma (Footer/Nav). Ozawade = Produkt/Kampagne.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&display=swap');

:root{
  /* Neutrale */
  --ink:#203A4C;          /* tiefes Blau-Slate: Headlines + dunkle Bänder */
  --ink-2:#34505f;
  --text:#43525d;         /* Fließtext */
  --mute:#7e8b95;         /* sekundär */
  --bg:#F3F8FB;           /* App-Hintergrund (kühl, hell) */
  --surface:#FFFFFF;
  --line:#E1E9EE;
  --line-2:#EDF3F6;
  /* Ozawade-Marke — Primär = Blau (über --red-Aliasse für Abwärtskompatibilität) */
  --blue:#1B9DD9; --blue-d:#1683BB; --blue-wash:#E7F4FB;
  --red:#1B9DD9; --red-d:#1683BB; --red-wash:#E7F4FB;   /* Alias: „red" = Ozawade-Blau */
  --yellow:#FFD200; --yellow-d:#FDB813; --orange:#F39200; --orange-wash:#FFF2E0;
  /* Status / Fremdmarken */
  --green:#2F9E63; --amber:#E0A22B; --sev:#D9531E;
  --dc:#0A5BA0;           /* DocCheck-Blau (dunkler als Ozawade-Blau, bewusst) */
  /* Form */
  --r:16px; --r-sm:12px; --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(20,40,60,.05), 0 2px 6px rgba(20,40,60,.05);
  --shadow:0 4px 12px rgba(20,40,60,.07), 0 14px 34px rgba(20,40,60,.08);
  --shadow-lg:0 18px 50px rgba(20,40,60,.16);
  --font-ui:'Nunito', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --maxw:1100px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{ font-family:var(--font-ui); color:var(--text); background:var(--bg); line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
img,svg{ max-width:100%; display:block; }
a{ color:var(--blue); text-decoration:none; }
a:hover{ text-decoration:underline; }

h1,h2,h3,h4{ color:var(--ink); font-weight:800; line-height:1.16; letter-spacing:-.01em; }
h1{ font-size:clamp(2rem,4.2vw,3rem); font-weight:900; }
h2{ font-size:1.5rem; }
h3{ font-size:1.12rem; }
.kicker{ font-weight:800; font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color:var(--blue); }
.lead{ font-size:1.06rem; color:var(--ink-2); }
.muted{ color:var(--mute); }

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

/* ---------- Logo (offizielles Ozawade-PNG) ---------- */
.brandlogo{ display:inline-flex; align-items:center; }
.brandlogo img{ height:30px; width:auto; display:block; }
/* Farbiges Logo auf dunklem Grund (nur noch Footer): dezente weiße Fläche. */
.brandlogo.on-dark{ background:#fff; padding:5px 9px; border-radius:7px; }
.brandlogo.on-dark img{ height:21px; }

/* ---------- Icons ---------- */
.ico{ width:22px; height:22px; flex:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; fill:none; }
.ico.lg{ width:28px; height:28px; }
.ico.sm{ width:17px; height:17px; }
.icon-badge{ width:46px; height:46px; border-radius:13px; display:inline-flex; align-items:center; justify-content:center; }
.icon-badge.red{ background:var(--blue-wash); color:var(--blue); }
.icon-badge.sun{ background:var(--orange-wash); color:var(--orange); }
.icon-badge.ink{ background:#E8EEF2; color:var(--ink); }
.icon-badge.dc{ background:#E7F0F9; color:var(--dc); }

/* ---------- Buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:inherit; font-weight:800; font-size:.95rem; padding:13px 24px; border:none; border-radius:var(--r-pill); cursor:pointer; transition:transform .14s, box-shadow .14s, background .14s, border-color .14s; text-decoration:none; line-height:1; }
.btn:hover{ text-decoration:none; }
.btn .ico{ width:18px; height:18px; stroke-width:2.2; }
.btn-primary{ background:var(--blue); color:#fff; }
.btn-primary:hover{ background:var(--blue-d); box-shadow:0 8px 18px rgba(27,157,217,.3); transform:translateY(-1px); }
.btn-sun{ background:linear-gradient(100deg,var(--orange),var(--yellow-d)); color:#fff; }
.btn-sun:hover{ box-shadow:0 8px 20px rgba(243,146,0,.32); transform:translateY(-1px); }
.btn-ink{ background:var(--ink); color:#fff; }
.btn-ink:hover{ background:var(--ink-2); transform:translateY(-1px); }
.btn-ghost{ background:#fff; color:var(--ink); border:1.5px solid var(--line); }
.btn-ghost:hover{ border-color:var(--blue); color:var(--blue); }
.btn-block{ width:100%; }
.btn-sm{ padding:10px 16px; font-size:.86rem; }
.btn-lg{ padding:15px 28px; font-size:1rem; }

/* ---------- Karten ---------- */
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-sm); }
.card-pad{ padding:26px; }
.card-hover{ transition:transform .18s ease, box-shadow .18s ease, border-color .18s; }
.card-hover:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:#cfdde6; }

/* ---------- Chips / Tags ---------- */
.chip{ display:inline-flex; align-items:center; gap:7px; font-size:.74rem; font-weight:700; padding:5px 12px; border-radius:var(--r-pill); background:#fff; border:1px solid var(--line); color:var(--ink-2); }
.chip.red{ background:var(--blue-wash); border-color:#cbe7f6; color:var(--blue-d); }
.chip .dot{ width:7px; height:7px; border-radius:50%; background:currentColor; }
.tag{ font-size:.64rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:3px 9px; border-radius:7px; background:var(--line-2); color:var(--mute); }
.tag.red{ background:var(--blue-wash); color:var(--blue-d); }
.tag.sun{ background:var(--orange-wash); color:var(--orange); }
.tag.dc{ background:#E7F0F9; color:var(--dc); }

/* ---------- Dunkle Sektion ---------- */
.dark{ background:var(--ink); color:#fff; }
.dark h1,.dark h2,.dark h3{ color:#fff; }

/* ---------- Formfelder ---------- */
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:.85rem; font-weight:700; color:var(--ink-2); margin-bottom:6px; }
.field .req{ color:var(--orange); }
.input, .field input, .field select, .field textarea{ width:100%; padding:12px 14px; font-family:inherit; font-size:.96rem; color:var(--text); background:#fff; border:1.5px solid var(--line); border-radius:var(--r-sm); transition:border-color .15s, box-shadow .15s; }
.field input:focus, .field select:focus, .field textarea:focus, .input:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(27,157,217,.15); }
.field textarea{ min-height:120px; resize:vertical; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink); color:rgba(255,255,255,.72); font-size:.82rem; }
.site-footer a{ color:rgba(255,255,255,.88); }
.site-footer .container{ padding-top:38px; padding-bottom:38px; }

/* ---------- Hinweis-Boxen ---------- */
.callout{ border-radius:var(--r-sm); padding:14px 18px; font-size:.86rem; }
.callout-warn{ background:#FFF7E8; border:1px solid #F2E1BD; color:#7a5b14; }
.callout-info{ background:var(--blue-wash); border:1px solid #CDE7F6; color:#185a7e; }

/* ---------- Utility ---------- */
.center{ text-align:center; }
@media (max-width:760px){
  h1{ font-size:2rem; }
  .card-pad{ padding:20px; }
  /* Eingabefelder min. 16px -> verhindert ungewolltes iOS-Zoom beim Fokus */
  input, select, textarea{ font-size:16px; }
}