/* ============================================================
   Aquaristikshop Formularseiten modern
   Für Widerruf, Kontakt und Serviceformulare
   Ergänzung zu cs_shop24.css
   Stand: Juni 2026

   Hinweise:
   - Klassen sind mit .as-form... gekapselt.
   - Bestehende Shopklassen werden nicht überschrieben.
   - Geeignet für breite Contentseiten ohne linkes Menü.
   ============================================================ */

.as-form-page {
  max-width:1160px;
  margin:0 auto;
  padding:28px 10px 42px;
  font-family:"Open Sans",Arial,Verdana,Helvetica,sans-serif;
  color:#1f2933;
  line-height:1.55;
}

.as-form-page * {
  box-sizing:border-box;
}

.as-form-hero {
  background:linear-gradient(135deg, rgba(21,63,115,0.97), rgba(38,104,157,0.94));
  color:#ffffff;
  border-radius:14px;
  padding:28px 30px;
  box-shadow:0 10px 26px rgba(21,63,115,0.10);
}

.as-form-eyebrow {
  margin:0 0 8px;
  font-size:13px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  opacity:0.92;
}

.as-form-hero h1 {
  margin:0 0 10px;
  font-size:30px;
  line-height:1.2;
  font-weight:700;
  color:#ffffff;
}

.as-form-hero p {
  max-width:820px;
  margin:0;
  font-size:16px;
}

.as-form-grid {
  display:grid;
  grid-template-columns:minmax(0, 2fr) minmax(280px, 0.9fr);
  gap:22px;
  margin-top:22px;
  align-items:start;
}

.as-form-card {
  background:#ffffff;
  border:1px solid #d9e2ec;
  border-radius:14px;
  box-shadow:0 10px 26px rgba(21,63,115,0.08);
}

.as-form-card-inner,
.as-form-side {
  padding:26px;
}

.as-form-card h2 {
  margin:0 0 12px;
  font-size:22px;
  color:#153f73;
}

.as-form-card h3 {
  margin:20px 0 8px;
  font-size:17px;
  color:#153f73;
}

.as-form-intro {
  margin:0 0 22px;
  color:#64748b;
}

.as-form-note {
  margin:0 0 18px;
  padding:12px 14px;
  border-left:4px solid #2f8f63;
  background:#eef9f3;
  border-radius:10px;
  color:#23573e;
}

.as-form-note-blue {
  border-left-color:#153f73;
  background:#eaf2fb;
  color:#153f73;
}

.as-form-row {
  margin-bottom:18px;
}

.as-form-two-cols {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.as-form-page label,
.as-form-label {
  display:block;
  margin:0 0 7px;
  font-weight:700;
  color:#1f2933;
}

.as-form-help {
  display:block;
  margin-top:6px;
  color:#64748b;
  font-size:13px;
}

.as-form-required {
  color:#9f2d2d;
  font-weight:700;
}

.as-form-page input[type="text"],
.as-form-page input[type="email"],
.as-form-page select,
.as-form-page textarea {
  width:100%;
  min-height:42px;
  padding:10px 12px;
  border:1px solid #b9c6d3;
  border-radius:10px;
  font:inherit;
  color:#1f2933;
  background:#ffffff;
}

.as-form-page textarea {
  min-height:120px;
  resize:vertical;
}

.as-form-page input:focus,
.as-form-page select:focus,
.as-form-page textarea:focus {
  outline:3px solid rgba(29,112,184,0.18);
  border-color:#1d70b8;
}

.as-form-page fieldset {
  margin:0;
  padding:0;
  border:0;
}

.as-form-radio-group {
  display:grid;
  gap:10px;
}

.as-form-radio {
  display:flex !important;
  gap:10px;
  align-items:flex-start;
  padding:12px;
  border:1px solid #d9e2ec;
  border-radius:10px;
  background:#fbfdff;
  font-weight:normal !important;
}

.as-form-radio input {
  margin-top:4px;
  width:auto !important;
  min-height:auto !important;
}

.as-form-check {
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin-top:10px;
  padding:14px;
  border-radius:10px;
  background:#eaf2fb;
  border:1px solid #bfd5eb;
}

.as-form-check input {
  margin-top:4px;
  width:auto !important;
  min-height:auto !important;
}

.as-form-check label {
  margin:0;
  font-weight:normal;
}

.as-form-submit-row {
  margin-top:22px;
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center;
}

.as-form-button {
  appearance:none;
  border:0;
  border-radius:999px;
  padding:13px 26px;
  font:inherit;
  font-weight:700;
  color:#ffffff;
  background:linear-gradient(135deg, #2f8f63, #24714e);
  cursor:pointer;
  box-shadow:0 8px 18px rgba(47,143,99,0.24);
}

.as-form-button:hover {
  filter:brightness(0.96);
}

.as-form-submit-hint {
  margin:0;
  color:#64748b;
  font-size:13px;
}

.as-form-list {
  margin:0;
  padding-left:20px;
}

.as-form-list li {
  margin-bottom:10px;
  list-style-type:disc;
}

.as-form-provider,
.as-form-info-box {
  margin-top:16px;
  padding:16px;
  border-radius:12px;
  background:#f8fafc;
  border:1px solid #d9e2ec;
}

.as-form-provider p,
.as-form-info-box p {
  margin:0 0 8px;
}

.as-form-provider p:last-child,
.as-form-info-box p:last-child {
  margin-bottom:0;
}

.as-form-provider a,
.as-form-info-box a {
  color:#153f73;
  text-decoration:underline;
}

.as-form-small {
  color:#64748b;
  font-size:13px;
}

.as-form-honeypot {
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

@media (max-width: 860px) {
  .as-form-grid {
    grid-template-columns:1fr;
  }

  .as-form-two-cols {
    grid-template-columns:1fr;
  }

  .as-form-hero {
    padding:24px 20px;
  }

  .as-form-hero h1 {
    font-size:26px;
  }

  .as-form-card-inner,
  .as-form-side {
    padding:21px;
  }
}