/* =========================================================================
   newsletter-form.css  –  GEMEINSAMER STYLE IM HIGH-END BRAND DESIGN
   (Optimiert für permanente Zentrierung & Custom Checkbox-Look)
   ========================================================================= */

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

:root {
  --tcn-ink:#ffffff;         /* Weißer Text für perfekten Kontrast */
  --tcn-muted:#b3b3b3;       /* Dezent aufgehelltes Grau für Fließtext */
  --tcn-bg:#141414;          /* Tiefdunkler Seitenhintergrund */
  --tcn-card:#1c1c1c;        /* Die typische dunkle Formular-Insel */
  --tcn-line:#262626;        /* Dezente Rahmenlinien im High-End-Look */
  --tcn-teal:#00b4ab;        /* Dein charakteristisches Key-Brand-Türkis */
  --tcn-teal-700:#00d2cb;    /* Aufgehelltes Türkis für Hover-Effekte */
  --tcn-gold:#00b4ab;        /* Eyebrow-Farbe ebenfalls auf Türkis angepasst */
}

/* --- Seitenflächen je Variante --- */
html, body { margin:0; padding:0; }
body.tcn-standalone {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:var(--tcn-bg); padding:24px;
}
body.tcn-embed { background:transparent; padding:0; }

/* --- Komponente (für beide identisch) --- */
.tcn-nl {
  box-sizing:border-box; 
  display:flex; 
  flex-direction:column !important; /* Erzwingt, dass Logo oben und Card unten steht */
  align-items:center !important;    /* Zentriert Logo und Card permanent horizontal zueinander */
  justify-content:center;
  width:100%; 
  max-width:560px;                  /* Fixiert die Gesamtbreite der Komponente */
  margin:0 auto;                    /* Zentriert das gesamte Konstrukt auf der standalone-Seite */
  padding:8px;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--tcn-ink); 
  line-height:1.55;
}
.tcn-nl *, .tcn-nl *::before, .tcn-nl *::after { box-sizing:border-box; }

/* --- Logo-Styling (Fixiert über der Kachel) --- */
.tcn-nl__logo {
  text-align: center !important;
  margin-bottom: 24px;              /* Definierter Abstand zur Kachel */
  width: 100%;
}

.tcn-nl__logo img {
  max-width: 160px;                 /* Harmonische Größe analog zur Mail-Variante */
  height: auto;
  display: inline-block;
}

/* Die zentrale Kachel */
.tcn-nl__card {
  width:100%; background:var(--tcn-card);
  border:1px solid var(--tcn-line); border-radius:16px; padding:40px 36px;
  box-shadow:0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Typografie im wœrk-Stil */
.tcn-nl__eyebrow { margin:0 0 8px; font-size:.78rem; letter-spacing:.1em;
  text-transform:lowercase; font-weight:600; color:var(--tcn-gold); }
.tcn-nl__title { margin:0 0 12px; font-family:'Inter',sans-serif;
  font-weight:700; font-size:1.75rem; line-height:1.2; color:var(--tcn-ink); letter-spacing:-0.5px; }
.tcn-nl__lead { margin:0 0 26px; color:var(--tcn-muted); font-size:.95rem; line-height:1.6; }

/* Formular-Elemente */
.tcn-nl__form { display:flex; flex-direction:column; gap:20px; }
.tcn-nl__row { display:flex; gap:16px; }
.tcn-nl__row .tcn-nl__field { flex:1; }
.tcn-nl__field { display:flex; flex-direction:column; gap:8px; }
.tcn-nl__label { font-size:.88rem; font-weight:600; color:var(--tcn-ink); }
.tcn-nl__input { width:100%; padding:12px 16px; font-size:.95rem; font-family:inherit;
  color:var(--tcn-ink); background:#1a1a1a; border:1px solid #3a3a3a;
  border-radius:10px; transition:border-color .2s ease, box-shadow .2s ease; }
.tcn-nl__input:focus { outline:none; border-color:var(--tcn-teal); box-shadow:none; }

/* Einwilligungen / Custom Checkboxen */
.tcn-nl__consents { border:none; margin:10px 0 2px; padding:0; display:flex; flex-direction:column; gap:14px; }
.tcn-nl__legend { padding:0; margin:0 0 10px; font-size:.88rem; font-weight:600; }
.tcn-nl__check { display:flex; gap:12px; align-items:flex-start; font-size:.9rem; color:var(--tcn-muted); cursor:pointer; line-height:1.5; }

/* Custom Checkbox Look (Ersetzt die weißen Browser-Blöcke) */
.tcn-nl__check input { 
  appearance: none;
  -webkit-appearance: none;
  margin-top: 2px; 
  width: 18px; 
  height: 18px; 
  flex: 0 0 auto;
  background-color: #1a1a1a;
  border: 1px solid #3a3a3a;
  border-radius: 6px;
  position: relative;
  cursor: pointer; 
}
.tcn-nl__check input:checked {
  background-color: var(--tcn-teal);
  border-color: var(--tcn-teal);
}
.tcn-nl__check input:checked::after {
  content: '\2713';
  font-size: 12px;
  color: #1a1a1a;
  position: absolute;
  top: -1px;
  left: 4px;
  font-weight: 900;
}
.tcn-nl__check em { font-style:normal; color:#888888; font-size:13px; font-weight:400; }

/* Primärer Action-Button */
.tcn-nl__button { margin-top:10px; padding:14px 24px; font-size:.95rem; font-weight:700;
  font-family:inherit; color:#1a1a1a; background:var(--tcn-teal);
  border:none; border-radius:12px; cursor:pointer;
  transition:background .2s ease, transform .05s; }
.tcn-nl__button:hover { background:var(--tcn-teal-700); }
.tcn-nl__button:active { transform:translateY(1px); }
.tcn-nl__button:disabled { opacity:.6; cursor:progress; }

/* Hinweise & Links */
.tcn-nl__note { margin:8px 0 0; font-size:.8rem; color:#888888; text-align:center; line-height:1.6; }
.tcn-nl__link { color:var(--tcn-teal); text-decoration:none; }
.tcn-nl__link:hover { text-decoration:underline; }
.tcn-nl__error { margin:10px 0 0; font-size:.88rem; font-weight:500; color:#ff4a4a; text-align:center;
  background:rgba(255, 74, 74, 0.1); border:1px solid rgba(255, 74, 74, 0.2); padding:10px; border-radius:8px; }

/* Erfolgs-Ansicht (Done-Screen) */
.tcn-nl__done { text-align:center; padding:20px 8px 6px; }
.tcn-nl__mark { width:64px; height:64px; margin:0 auto 20px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.7rem; color:var(--tcn-teal); background:rgba(0, 180, 171, 0.1); border:1px solid var(--tcn-line); }
.tcn-nl__doneTitle { margin:0 0 12px; font-family:'Inter',sans-serif; font-weight:700; font-size:1.45rem; color:var(--tcn-ink); }
.tcn-nl__doneText { margin:0; color:var(--tcn-muted); font-size:0.95rem; line-height:1.6; }

/* Mobile Optimierungen */
@media (max-width:480px) {
  .tcn-nl__card { padding:30px 22px; border-radius:14px; }
  .tcn-nl__row { flex-direction:column; gap:20px; }
  .tcn-nl__title { font-size:1.5rem; }
}
@media (prefers-reduced-motion:reduce) { .tcn-nl * { transition:none !important; } }