/* WordPress-Ergänzungen zum Designsystem „Azzurro & Prato“ */

/* Seitennummerierung im Magazin */
.mg-pagination { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center; margin-top: var(--s-8); }
.mg-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; padding: 0.35rem 0.95rem;
  font-weight: 750; text-decoration: none; color: var(--ink); background: var(--white);
  border: var(--stroke); border-radius: var(--radius-pill);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.mg-pagination a.page-numbers:hover { transform: translateY(-2px); box-shadow: var(--stamp); }
.mg-pagination .current { background: var(--prato); }
.mg-pagination .dots { border-color: transparent; background: none; }

/* Suche als Formular */
.mg-search { margin: 0; }

/* Beitragsbilder in Karten und Notizen füllen den Rahmen */
.mg-card__img img, .note .frame img { width: 100%; height: 100%; object-fit: cover; }

/* WordPress-Hilfsklassen */
.screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; }
.screen-reader-text:focus { clip: auto !important; clip-path: none; height: auto; width: auto; z-index: 100000; background: var(--white); padding: var(--s-3); }
.article-body iframe, .article-body video, .article-body embed { max-width: 100%; border-radius: var(--radius-m); }
.article-body .wp-block-embed__wrapper { position: relative; }
.article-body .wp-block-buttons { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: var(--s-6) 0; }
.article-body .wp-block-button__link { display: inline-flex; align-items: center; min-height: 3rem; padding: 0.7rem 1.4rem; background: var(--prato); color: var(--ink); border: var(--stroke); border-radius: var(--radius-pill); box-shadow: var(--stamp); font-weight: 800; text-decoration: none !important; }
.article-body .wp-block-columns { display: flex; flex-wrap: wrap; gap: var(--s-6); margin: var(--s-6) 0; }
.article-body .wp-block-column { flex: 1 1 16rem; min-width: 0; }
.article-body .wp-block-media-text { display: grid; gap: var(--s-6); align-items: center; margin: var(--s-6) 0; }
@media (min-width: 40rem) { .article-body .wp-block-media-text { grid-template-columns: 1fr 1fr; } }

/* WPForms im neuen Look */
.article-body .wpforms-container, .form .wpforms-container { margin: 0 !important; }
.wpforms-container input[type="text"], .wpforms-container input[type="email"], .wpforms-container input[type="tel"],
.wpforms-container input[type="number"], .wpforms-container select, .wpforms-container textarea {
  border: var(--stroke) !important; border-radius: var(--radius-s) !important; background: var(--white) !important; font: inherit !important; padding: 0.7rem 0.9rem !important; min-height: 3rem;
}
.wpforms-container button[type="submit"], .wpforms-container .wpforms-submit {
  background: var(--prato) !important; color: var(--ink) !important; border: var(--stroke) !important; border-radius: var(--radius-pill) !important; box-shadow: var(--stamp); font: 800 1rem var(--font-text) !important; padding: 0.8rem 1.6rem !important;
}

/* Kommentare */
.mg-comments { padding-bottom: var(--section); max-width: 46rem; }
.mg-comments .comment-list { list-style: none; padding: 0; }
.mg-comments textarea, .mg-comments input[type="text"], .mg-comments input[type="email"], .mg-comments input[type="url"] { width: 100%; border: var(--stroke); border-radius: var(--radius-s); padding: 0.7rem 0.9rem; font: inherit; background: var(--white); }

/* Adminleiste: Kopfzeile darunter */
.admin-bar .site-header { top: var(--wp-admin--admin-bar--height, 32px); }

/* WPForms im Anfrage-Bereich */
.form--wpforms { background: var(--white); border: var(--stroke-bold); border-radius: var(--radius-m); padding: var(--s-6); box-shadow: 0 6px 0 var(--ink); }
.form--wpforms .wpforms-field-label { font-weight: 800 !important; color: var(--ink) !important; font-size: 1rem !important; }
.form--wpforms .wpforms-field-sublabel, .form--wpforms .wpforms-field-description { color: var(--ink-soft) !important; }
.form--wpforms .wpforms-field { padding: 0 0 var(--s-4) !important; }
.form--wpforms input[type="checkbox"], .form--wpforms input[type="radio"] { accent-color: var(--prato-deep); }
.form--wpforms .wpforms-error, .form--wpforms label.wpforms-error { color: var(--error) !important; }
.form--wpforms .wpforms-confirmation-container-full { background: var(--prato-soft) !important; border: var(--stroke) !important; border-radius: var(--radius-s); color: var(--ink) !important; }

/* Meer von oben: Azzurro-Flächen in verschiedenen Blautönen (tiefe und flache Stellen) */
:root {
  --mare-deep: #3C8FCB;     /* tiefes Wasser */
  --mare-mid: #5BAEE3;      /* offenes Meer */
  --mare-shallow: #86D0EE;  /* Sandbank, flaches Wasser */
  --mare-teal: #6CC3DA;     /* türkiser Schimmer */
  --mare-noise-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0024' numOctaves='4' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.10 0 0 0 0 0.36 0 0 0 0 0.66 0 0 0 2.6 -1.15'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --mare-noise-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0032' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.80 0 0 0 0 0.86 0 0 0 2.2 -1.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --mare:
    var(--mare-noise-light),
    var(--mare-noise-dark),
    radial-gradient(ellipse 55% 45% at 12% 18%, color-mix(in srgb, var(--mare-shallow) 70%, transparent), transparent 70%),
    radial-gradient(ellipse 40% 55% at 88% 82%, color-mix(in srgb, var(--mare-deep) 80%, transparent), transparent 72%),
    radial-gradient(ellipse 45% 35% at 70% 20%, color-mix(in srgb, var(--mare-teal) 60%, transparent), transparent 70%),
    radial-gradient(ellipse 60% 50% at 30% 90%, color-mix(in srgb, var(--mare-mid) 90%, transparent), transparent 75%),
    linear-gradient(160deg, var(--mare-mid), var(--azzurro) 45%, var(--mare-deep));
}
.section--azzurro, .page-hero--azzurro, .level--sport, .tile--plain:nth-of-type(even) {
  background-color: var(--azzurro);
  background-image: var(--mare);
  background-size: 900px 900px, 1100px 1100px, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}
.closing.section--azzurro { background-position: 0 0, 300px 200px, 0 0, 0 0, 0 0, 0 0, 0 0; }
/* Auf großen Bildschirmen fließt das Meer über aufeinanderfolgende blaue Bereiche hinweg */
@media (min-width: 62rem) and (prefers-reduced-motion: no-preference) {
  .section--azzurro, .page-hero--azzurro { background-attachment: fixed; }
}

/* WPForms: Auswahlfelder nicht abschneiden (WPForms setzt eine feste Höhe) */
div.wpforms-container-full .wpforms-form select,
.wpforms-container select {
	height: auto !important;
	min-height: 2.9rem;
	padding-block: .55rem !important;
	line-height: 1.4 !important;
}