/* ========= 2nd Life IT Solutions – Public Pages Theme ========= */
:root{
  --brand:#049908;
  --brand-600:#037f07;
  --brand-50:#e9f5ec;
  --ink:#262626;
  --muted:#6b7280;
  --bg:#F5F5F5;
  --card:#FFFFFF;
  --border:#E5E7EB;
  --focus:#0ea5e9;
  --radius:10px;
}

*{box-sizing:border-box}
html,body{
  margin:0; padding:0;
  background:linear-gradient(180deg,var(--bg) 0%, var(--brand-50) 100%);
  color:var(--ink);
  font:16px/1.55 "Helvetica Neue","Arial Nova","Nimbus Sans",Arial,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* Layout */
main, .container, .content, .lm-container{ max-width:760px; margin:24px auto; padding:0 16px; }
.card, .panel, .box, form{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}

/* Header (JS fügt .site-header ein; CSS-Only Fallback darunter) */
.site-header{ max-width:760px; margin:24px auto 12px; padding:0 16px; text-align:center; }
.site-header a{ display:inline-block; text-decoration:none }
.site-logo{ width:150px; max-width:100%; height:auto; display:inline-block; }

/* Nur falls JS blockiert ist: kleines Logo per CSS anzeigen */
body.no-js-header::before{
  content:"";
  display:block; margin:24px auto 12px; width:150px; height:0;
  background:url("https://mailer.2ndlife.ch/uploads/ohne_Hintergrund_PNG.png") no-repeat center/contain;
  padding-top:0; /* img-aspect not known; we keep height auto via JS normally */
}

/* Typografie */
h1,h2,h3{ color:var(--brand); margin:0 0 8px 0; line-height:1.25; }
p{ margin:0 0 12px 0; color:var(--ink) }
small,.help,.hint{ color:var(--muted) }
a{ color:var(--brand); text-underline-offset:2px }
a:hover{ filter:brightness(.95) }

/* Formulare */
form{ padding:20px }
label{ display:block; font-weight:600; margin:12px 0 6px; color:var(--ink) }
input[type="text"], input[type="email"], input[type="number"],
input[type="url"], input[type="password"], select, textarea{
  width:100%; border:1px solid var(--border); border-radius:8px;
  padding:10px 12px; background:#fff; color:var(--ink);
  outline:none; transition:border-color .15s, box-shadow .15s;
}
textarea{ min-height:110px }
input:focus, select:focus, textarea:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent);
}

/* Checkbox/Radio grün */
input[type="checkbox"], input[type="radio"]{ accent-color:var(--brand) !important; }

/* ===== Buttons: Bulma-Override (macht "Anmelden" grün) ===== */
/* Generisch */
button, .btn, input[type="submit"], .button{
  -webkit-appearance:none; appearance:none;
  background:var(--brand) !important; border:1px solid var(--brand) !important; color:#fff !important;
  padding:12px 16px; border-radius:8px; font-weight:700; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px; text-decoration:none !important;
  transition:transform .06s ease, filter .15s ease;
}
/* Bulma-Varianten */
.button.is-primary,
.button.is-link,
.button.is-info,
.button.is-success{
  background-color:var(--brand) !important;
  border-color:var(--brand) !important;
  color:#fff !important;
}
.button:hover,
.button.is-primary:hover,
.button.is-link:hover,
.button.is-info:hover,
.button.is-success:hover,
button:hover, .btn:hover, input[type="submit"]:hover{
  background:var(--brand-600) !important; border-color:var(--brand-600) !important;
}
.button:focus, .button.is-primary:focus,
button:focus, .btn:focus, input[type="submit"]:focus{
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent) !important;
}
.button:active, button:active, .btn:active, input[type="submit"]:active{ transform:translateY(1px); }

/* Sekundär-Button (outlined) */
button.secondary, .btn.secondary, .button.is-light{
  background:#fff !important; color:var(--brand) !important; border:1px solid var(--brand) !important;
}

/* Meldungen */
.alert, .notice, .error, .success{ margin:12px 0; padding:12px 14px; border-radius:8px; border:1px solid var(--border); }
.success{ background:#ecfdf5; border-color:#10b98133; }
.error{ background:#fef2f2; border-color:#ef444433; }
.notice{ background:#eff6ff; border-color:#3b82f633; }

/* Tabellen */
table{ width:100%; border-collapse:collapse; margin:12px 0; background:#fff }
th,td{ border:1px solid var(--border); padding:10px; text-align:left }
th{ background:#fafafa; color:#111827; font-weight:700 }

/* Footer (JS fügt .site-footer ein) */
.site-footer{
  max-width:760px; margin:16px auto 32px; padding:0 16px; text-align:center; color:var(--muted); font-size:13px;
}
.site-footer a{ color:var(--brand); text-decoration:underline }

/* Focus-visible */
:focus-visible{ outline:3px solid color-mix(in srgb, var(--focus) 70%, transparent); outline-offset:2px; border-radius:6px; }

/* Mobile */
@media (max-width:600px){
  .site-header{ margin-top:16px }
  form{ padding:16px }
  button, .btn, input[type="submit"], .button{ width:100%; justify-content:center }
}

/* ===== Spinner/Loading ersetzen (optional) ===== */
.lm-spinner, .spinner, .loading{ display:none !important; } /* Original-Spinner verstecken */
.loading-logo{ display:block; text-align:center; margin:20px 0; }
.loading-logo img{ width:135px; height:auto; }

/* === 1) Listmonk-Logo ausblenden (robust) === */
.navbar .navbar-brand img,
img[alt*="listmonk" i],
img[src*="listmonk" i],
.logo {
  display: none !important;
}

/* === 2) Dünne Linie/Schatten unter dem Header entfernen === */
.navbar,
.navbar .navbar-menu,
.hero, .hero-head, .hero-body,
.header, .header .container {
  border: 0 !important;
  box-shadow: none !important;
}

/* Oberer Bereich nahtlos weiss */
.hero, .hero-head, .hero-body,
.header, .header .container,
.section:first-of-type {
  background: #fff !important;
}

/* Eventuelle <hr> Divider ausblenden */
hr, .divider, .is-divider {
  display: none !important;
  border: 0 !important;
}

/* === 3) Formular-„Karte“: saubere, symmetrische Abstände === */
form,
.card, .panel, .box {
  background: #fff !important;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px !important;       /* gleichmäßiger Innenabstand */
}

/* === 4) Anmelde-Button mittig mit symmetrischem Weissraum === */
form .field.is-grouped,
form .actions,
form .buttons,
.controls.is-grouped {
  display: flex !important;
  justify-content: center !important;
  gap: 12px;
  margin: 18px 0 !important;      /* gleicher Abstand oben/unten */
}

button[type="submit"],
.button[type="submit"],
input[type="submit"] {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 !important;           /* Symmetrie kommt über den Container oben */
  min-width: 220px;               /* wirkt hochwertiger auf Desktop */
}

/* === 5) Responsive Feinschliff === */
@media (max-width: 600px) {
  form, .card, .panel, .box {
    padding: 16px !important;
  }
  button[type="submit"],
  .button[type="submit"],
  input[type="submit"] {
    width: 100% !important;       /* große Tap-Fläche auf Mobile */
    min-width: 0;
  }
  form .field.is-grouped,
  form .actions,
  form .buttons,
  .controls.is-grouped {
    margin: 14px 0 !important;
  }
}

/* === Button-Text exakt mittig === */
button[type="submit"],
.button[type="submit"],
input[type="submit"] {
  display: inline-flex !important;
  align-items: center !important;   /* vertikal mittig */
  justify-content: center !important; /* horizontal mittig */
  line-height: 1.2 !important;      /* verhindert zu viel Höhe */
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

/* === Button-Text exakt zentriert (vertikal + horizontal) === */
button[type="submit"],
.button[type="submit"],
input[type="submit"] {
  display: inline-flex !important;
  align-items: center !important;       /* vertikal mittig */
  justify-content: center !important;   /* horizontal mittig */
  line-height: 1.2 !important;
  padding: 12px 20px !important;        /* gleichmäßige Abstände links/rechts */
  text-align: center !important;        /* Text-Zentrierung */
  width: auto;                          /* keine erzwungene Breite */
  min-width: 220px;                     /* wirkt hochwertiger auf Desktop */
}

/* Falls Bulma "float" oder "margin" am Button setzt → neutralisieren */
button[type="submit"], .button[type="submit"], input[type="submit"] {
  float: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: flex !important;
}

/* === Hover-Effekt === */
button[type="submit"]:hover,
.button[type="submit"]:hover,
input[type="submit"]:hover {
  background: #037f07 !important; /* dunkleres Grün */
  border-color: #037f07 !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15); /* subtiler Schatten */
  transform: translateY(-1px);             /* leichter "Lift" beim Hover */
  transition: all 0.15s ease-in-out;
}

/* === Button-Text wirklich pixelgenau mittig ===================== */

/* 1) Symmetrische Innenabstände + echte Zentrierung */
button[type="submit"],
.button[type="submit"],
input[type="submit"] {
  display: inline-flex !important;
  align-items: center !important;       /* vertikal mittig */
  justify-content: center !important;   /* horizontal mittig */
  text-align: center !important;
  padding: 12px 24px !important;        /* links = rechts */
  line-height: 1.2 !important;
  min-width: 220px;                      /* Desktop-Ästhetik */
}

/* 2) Bulma-Icons/Spacer im Button neutralisieren (ziehen nach links) */
.button .icon,
.button .icon.is-left,
.button .icon:first-child {
  display: none !important;              /* falls ein (leeres) Icon drin ist */
  margin: 0 !important;
  width: 0 !important;
}

/* 3) Pseudo-Elemente am Button abschalten (z.B. Pfeile/Spinner) */
.button::before,
.button::after {
  content: none !important;
}

/* 4) Falls ein internes .control den Button „zieht“, neutralisieren */
.field.is-grouped .control {
  float: none !important;
  margin: 0 !important;
}
.field.is-grouped {
  display: flex !important;
  justify-content: center !important;    /* Button-Gruppe mittig */
}

/* 5) Sicherheit: keine extr. linke Einrückung durch Text */
.button[type="submit"] span {
  display: inline-block;
  margin: 0 !important;
  padding: 0 !important;
  text-indent: 0 !important;
}

/* 6) Hover-Effekt (dezenter Lift & Schatten) */
button[type="submit"]:hover,
.button[type="submit"]:hover,
input[type="submit"]:hover {
  background: #037f07 !important;
  border-color: #037f07 !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  transform: translateY(-1px);
  transition: all 0.15s ease-in-out;
}

/* 0) Härtefall: Vollzentrierung per Grid (überstimmt alles) */
button[type="submit"],
.button[type="submit"],
input[type="submit"]{
  display: grid !important;           /* statt inline-flex */
  place-items: center !important;     /* vertikal + horizontal exakt mittig */
  padding: 12px 24px !important;      /* symmetrisch */
  text-align: center !important;
  min-width: 220px;
}

/* 1) Versteckte Icons/Spacer neutralisieren (häufige Ursache) */
.button .icon,
.button .icon.is-left,
.button .icon.is-right,
.button svg {
  display: none !important;
  margin: 0 !important;
  width: 0 !important;
}

/* 2) Pseudo-Elemente (z. B. Pfeile/Spinner) deaktivieren */
.button::before,
.button::after,
.button.is-primary::before,
.button.is-primary::after {
  content: none !important;
}

/* 3) Gruppierungen dürfen den Button nicht ziehen */
.field.is-grouped { justify-content: center !important; }
.field.is-grouped .control { margin: 0 !important; float: none !important; }

/* 4) Falls irgendwo asymmetrische Innenabstände kommen → hart gleichsetzen */
.button,
button { padding-left: 24px !important; padding-right: 24px !important; }

/* 5) Schöner Hover-Effekt */
button[type="submit"]:hover,
.button[type="submit"]:hover,
input[type="submit"]:hover{
  background: #037f07 !important;
  border-color: #037f07 !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  transform: translateY(-1px);
  transition: all .15s ease-in-out;
}