/* ============================================================================
   LAZAAR31 – Gemeinsame Bausteine

   Hier stehen die Teile, die auf mehreren Unterseiten gebraucht werden:
   Seitenrand, Formularfelder, Textkarten und kleine Hilfsklassen.

   Warum als Klassen und nicht per style="..."?
   Die Seite liefert eine strenge Content-Security-Policy aus
   (style-src 'self'). Ein Browser, der sie auswertet, verwirft JEDES
   style-Attribut im HTML – die Seite saehe dann anders aus als gedacht.
   Alles Gestalterische gehoert deshalb in eine Datei wie diese.
   ========================================================================= */

/* --- Seitenrand ------------------------------------------------------------
   .shell haelt links und rechts denselben Abstand wie die Hero-Bereiche der
   Unterseiten (--gutter, definiert in site.css). Damit "klebt" kein Inhalt
   mehr am Fensterrand. */
.shell{width:100%;max-width:100%;min-width:0;padding-inline:var(--gutter)}
.shell--flow > * + *{margin-top:20px}

/* --- Ueberschrift im Anton-Schnitt ---------------------------------------- */
.headline{margin:0 0 8px;font-family:'Anton',sans-serif;font-weight:400;letter-spacing:.02em;line-height:1.15;color:var(--text-color)}
.headline--xl{font-size:32px}
.headline--lg{font-size:24px}
.headline--md{font-size:20px}

.lede{margin:0 0 20px;font-size:13px;line-height:1.6;color:var(--text-muted)}
.text-muted{color:var(--text-muted)}
.text-brand{color:var(--brand)}

/* --- Karten mit Fliesstext (Impressum, Datenschutz, Kontaktinfos) ---------- */
.info-card{background:var(--card-bg);border:1px solid var(--border-color);border-radius:14px;padding:24px;box-shadow:var(--shadow-sm)}
.info-card + .info-card{margin-top:20px}
.info-card h3{margin:0 0 8px;font-size:16px;font-weight:800;color:var(--text-color)}
.info-card p{margin:0 0 12px;font-size:14px;line-height:1.6;color:var(--text-muted)}
.info-card p:last-child{margin-bottom:0}
.info-card__mail{font-size:14px;font-weight:800;color:var(--brand)}

.legal-card{background:var(--card-bg);border:1px solid var(--border-color);border-radius:14px;padding:32px;line-height:1.7;color:var(--text-color);box-shadow:var(--shadow-sm)}
.legal-card h2{margin:32px 0 10px;font-family:'Anton',sans-serif;font-weight:400;font-size:24px;letter-spacing:.02em}
.legal-card h2:first-child{margin-top:0}
.legal-card h3{margin:22px 0 6px;font-size:17px;font-weight:800}
.legal-card p{margin:0 0 14px;font-size:15px;color:var(--text-muted)}
.legal-card p strong{color:var(--text-color)}
.legal-card a{color:var(--brand)}

/* --- Formulare -------------------------------------------------------------
   Ein einziger Satz Regeln fuer Kontakt- und Forumsformulare. */
.form{display:flex;flex-direction:column;gap:16px}
.form--tight{gap:12px}

.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field__label{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--text-muted)}

.form-input,
.form-select,
.form-textarea{
  width:100%;
  padding:12px 14px;
  font:inherit;
  font-size:14px;
  line-height:1.45;
  color:var(--text-color);
  background:var(--card-bg);
  border:1px solid var(--border-strong);
  border-radius:10px;
  transition:border-color .25s var(--ease-out),box-shadow .25s var(--ease-out),background-color .25s var(--ease-out);
}
.form-input::placeholder,
.form-textarea::placeholder{color:var(--text-muted);opacity:.75}

.form-input:hover,
.form-select:hover,
.form-textarea:hover{border-color:var(--text-muted)}

.form-input:focus,
.form-select:focus,
.form-textarea:focus{
  outline:none;
  border-color:var(--brand);
  box-shadow:0 0 0 4px var(--brand-tint);
}

.form-textarea{resize:vertical;min-height:110px}

/* Eigener Pfeil, damit das Auswahlfeld in beiden Farbmodi gleich aussieht. */
.form-select{
  appearance:none;
  padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236E6862' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:12px 8px;
}
html[data-theme="dark"] .form-select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23AAA29A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.form-check{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.5;color:var(--text-muted)}
.form-check input{margin-top:3px;accent-color:var(--brand);width:16px;height:16px;flex-shrink:0}
.form-check a{color:var(--brand)}

.form__note{margin:0;font-size:12px;color:var(--text-muted)}
.form__actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* Rueckmeldung nach dem Absenden (wird von motion.js eingeblendet) */
.form__feedback{
  margin:0;
  padding:12px 14px;
  border-radius:10px;
  font-size:13px;
  line-height:1.5;
  background:var(--brand-tint);
  border:1px solid var(--brand);
  color:var(--text-color);
}

/* --- Kleine Helfer -------------------------------------------------------- */
.is-block{display:block}
.w-full{width:100%}

@media (max-width:640px){
  .headline--xl{font-size:26px}
  .headline--lg{font-size:21px}
  .legal-card{padding:22px}
  .info-card{padding:20px}
}

/* --- Listen in Rechtstexten ----------------------------------------------- */
.legal-card ul{margin:0 0 14px;padding-left:22px;font-size:15px;color:var(--text-muted)}
.legal-card li{margin-bottom:5px}