/*
Theme Name: degoist
Theme URI: https://degoist.de
Author: degoist Media Solutions
Description: Dunkles Block-Theme für degoist Media Solutions (IT-Service, Mediendesign, Photographie, Entwicklung). Alle Inhalte sind mit dem Block-Editor bearbeitbar.
Version: 2.1.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: degoist
*/

/* ---------- Grundlagen ---------- */
.wp-site-blocks > * { margin-block-start: 0; }
body { -webkit-font-smoothing: antialiased; }
img { height: auto; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }

/* ---------- Header (hell) ----------
   Wichtig: kein backdrop-filter/transform am Header, sonst bleibt das
   mobile Overlay-Menü im Header "gefangen" statt die ganze Seite zu füllen. */
.wp-site-blocks > header {
  position: sticky; top: 0; z-index: 100;
  background: #fff; color: var(--wp--preset--color--contrast);
  border-bottom: 1px solid #d9e2e2;
  box-shadow: 0 6px 20px -14px rgba(0,0,0,.6);
}
.admin-bar .wp-site-blocks > header { top: 32px; }
@media (max-width: 782px) { .admin-bar .wp-site-blocks > header { top: 46px; } }
.wp-site-blocks > header a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.wp-block-navigation a { font-weight: 400; }
.wp-site-blocks > header .wp-block-navigation-item a:hover,
.wp-site-blocks > header .current-menu-item > a { color: var(--wp--preset--color--teal); }
.header-phone { margin: 0; }
.wp-site-blocks > header .header-phone a {
  display: inline-block; padding: .45rem 1rem; border-radius: 999px;
  background: var(--wp--preset--color--deep); color: #fff;
  font-weight: 600; font-size: .9rem; white-space: nowrap;
}
.wp-site-blocks > header .header-phone a:hover { background: var(--wp--preset--color--teal); color: #fff; }
@media (max-width: 900px) { .header-phone { display: none; } }

/* ---------- Mobiles Menü: dunkles Vollbild-Overlay ---------- */
.wp-site-blocks > header .wp-block-navigation__responsive-container.is-menu-open {
  background: var(--wp--preset--color--night); color: #fff; padding: 1.5rem;
}
.wp-site-blocks > header .wp-block-navigation__responsive-container.is-menu-open a {
  color: #fff; font-size: 1.6rem; font-weight: 400;
}
.wp-site-blocks > header .wp-block-navigation__responsive-container.is-menu-open a:hover { color: var(--wp--preset--color--accent); }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { color: #fff; }

/* ---------- Landingpage-Template ---------- */
main.landing > .wp-block-post-content > * { margin-block-start: 0; margin-block-end: 0; }

/* ---------- Sektionen ---------- */
.section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.eyebrow {
  text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; font-weight: 700;
  color: var(--wp--preset--color--accent); margin-bottom: .5rem;
}
.section-intro { color: var(--wp--preset--color--muted); }
.has-surface-background-color { border-block: 1px solid rgba(255,255,255,.06); }

/* ---------- Hero ---------- */
.hero { padding-block: clamp(4rem, 10vw, 8rem); position: relative; overflow: hidden; }
.hero::after {
  content: ""; position: absolute; inset: auto -10% -45% auto; width: 60vw; height: 60vw; max-width: 720px; max-height: 720px;
  background: radial-gradient(circle, rgba(173,208,0,.22), transparent 65%); pointer-events: none;
}
.wp-block-group.hero :is(h1,h2,h3,p) { color: #fff; }
.wp-block-group.hero .eyebrow { color: var(--wp--preset--color--accent); }
.hero h1 { font-size: clamp(2.2rem, 5.5vw, 3.9rem); max-width: 18ch; margin-bottom: 1rem; }
.hero .has-large-font-size { max-width: 52ch; opacity: .95; }
.hero .wp-block-buttons { margin-top: 2rem; }
.hero .is-style-outline .wp-block-button__link { border: 2px solid rgba(255,255,255,.85); color: #fff; background: transparent; }
.hero .is-style-outline .wp-block-button__link:hover { background: #fff; color: var(--wp--preset--color--night); }

/* ---------- Farbige Bänder / Weißer Text ---------- */
.has-base-color :is(h1,h2,h3,h4,h5,h6) { color: inherit; }
.has-base-color a:not(.wp-element-button) { color: var(--wp--preset--color--accent); }

/* ---------- Karten ---------- */
.wp-block-group.is-style-card {
  background: #172529; border: 1px solid rgba(255,255,255,.1); border-top: 4px solid var(--wp--preset--color--accent);
  border-radius: 14px; padding: 1.75rem; height: 100%;
  box-shadow: 0 14px 34px -20px rgba(0,0,0,.9);
  transition: transform .2s ease, border-color .2s ease;
}
.wp-block-group.is-style-card:hover { transform: translateY(-3px); border-color: var(--wp--preset--color--teal); border-top-color: var(--wp--preset--color--accent); }
.wp-block-group.is-style-card h3 { margin-top: 0; font-size: 1.25rem; }
.wp-block-group.is-style-card ul { padding-left: 1.1rem; margin-block: .75rem 0; }
.wp-block-group.is-style-card li { margin-bottom: .45rem; }
.wp-block-group.is-style-card li::marker { color: var(--wp--preset--color--accent); }
.wp-block-columns .wp-block-column > .is-style-card { margin-block: 0; }
.step-no { font-size: 2rem; font-weight: 800; line-height: 1; color: var(--wp--preset--color--teal); margin: 0 0 .5rem; }
.img-round img { border-radius: 16px; box-shadow: 0 20px 44px -22px rgba(0,0,0,.9); }

/* ---------- Galerie ---------- */
.photo-gallery img { border-radius: 10px; transition: transform .25s ease, filter .25s ease; }
.photo-gallery .wp-block-image { overflow: hidden; border-radius: 10px; }
.photo-gallery .wp-block-image:hover img { transform: scale(1.04); filter: brightness(1.08); }
.photo-gallery .wp-block-image img { cursor: zoom-in; }
.gallery-nav .wp-block-button__link { font-size: .95rem; }

/* ---------- Buttons ---------- */
.wp-element-button { transition: transform .15s ease, background-color .15s ease, color .15s ease; }
.wp-element-button:hover { transform: translateY(-1px); }

/* ---------- Footer ---------- */
.site-footer { padding-block: clamp(2.5rem, 5vw, 4rem) 1.5rem; border-top: 3px solid var(--wp--preset--color--deep); }
.site-footer h4 { color: #fff; font-size: 1rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .75rem; }
.site-footer a { color: #dbe5e6; text-decoration: none; }
.site-footer a:hover { color: var(--wp--preset--color--accent); text-decoration: underline; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .4rem; }
.site-footer .footer-legal { border-top: 1px solid rgba(255,255,255,.15); margin-top: 2rem; padding-top: 1.25rem; font-size: .875rem; opacity: .85; }

/* ======= Kontaktformular ======= */
/* =========================================================
   Kontaktformular – passend zum dunklen degoist-Design
   Gilt für: Contact Form 7 (.wpcf7), WPForms (.wpforms-container),
   Fluent Forms (.fluent_form_*) und eigene Formulare mit Klasse .degoist-form
   ========================================================= */

/* Karte um das Formular */
.wpcf7,
div.wpforms-container-full,
.frm-fluent-form,
.degoist-form {
  background: #172529;
  border: 1px solid rgba(255,255,255,.1);
  border-top: 4px solid var(--wp--preset--color--accent, #add000);
  border-radius: 14px;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  box-shadow: 0 14px 34px -20px rgba(0,0,0,.9);
  max-width: 100%;
}
div.wpforms-container-full .wpforms-form { margin: 0; }
div.wpforms-container-full { margin-inline: 0; }

/* Abstände zwischen den Feldern */
.wpcf7 form p,
div.wpforms-container-full .wpforms-field,
.degoist-form p { margin: 0 0 1.25rem; padding: 0; }

/* Beschriftungen */
.wpcf7 label,
div.wpforms-container-full .wpforms-field-label,
.degoist-form label {
  display: block;
  color: #fff;
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .02em;
  margin-bottom: .4rem;
}
div.wpforms-container-full .wpforms-required-label,
.wpcf7 .required { color: var(--wp--preset--color--accent, #add000); }

/* Eingabefelder */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 select,
.wpcf7 textarea,
div.wpforms-container-full .wpforms-form input[type="text"],
div.wpforms-container-full .wpforms-form input[type="email"],
div.wpforms-container-full .wpforms-form input[type="tel"],
div.wpforms-container-full .wpforms-form input[type="url"],
div.wpforms-container-full .wpforms-form input[type="number"],
div.wpforms-container-full .wpforms-form select,
div.wpforms-container-full .wpforms-form textarea,
.degoist-form input[type="text"],
.degoist-form input[type="email"],
.degoist-form input[type="tel"],
.degoist-form select,
.degoist-form textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background: #0f1a1d;
  color: #fff;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 10px;
  padding: .8rem 1rem;
  font: inherit;
  line-height: 1.4;
  min-height: 3rem;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.wpcf7 textarea,
div.wpforms-container-full .wpforms-form textarea,
.degoist-form textarea { min-height: 10rem; resize: vertical; }

.wpcf7 ::placeholder,
div.wpforms-container-full .wpforms-form ::placeholder,
.degoist-form ::placeholder { color: #7f9396; opacity: 1; }

/* Fokus */
.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus,
div.wpforms-container-full .wpforms-form input:focus,
div.wpforms-container-full .wpforms-form select:focus,
div.wpforms-container-full .wpforms-form textarea:focus,
.degoist-form input:focus,
.degoist-form select:focus,
.degoist-form textarea:focus {
  outline: none;
  border-color: var(--wp--preset--color--teal, #00B0B4);
  background: #111f23;
  box-shadow: 0 0 0 3px rgba(0,176,180,.35);
}

/* Auswahlfelder: eigener Pfeil */
.wpcf7 select,
div.wpforms-container-full .wpforms-form select,
.degoist-form select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23add000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}
.wpcf7 select option,
div.wpforms-container-full .wpforms-form select option { background: #0f1a1d; color: #fff; }

/* Checkbox / Radio (z. B. Datenschutz-Einwilligung) */
.wpcf7 input[type="checkbox"],
.wpcf7 input[type="radio"],
div.wpforms-container-full .wpforms-form input[type="checkbox"],
div.wpforms-container-full .wpforms-form input[type="radio"],
.degoist-form input[type="checkbox"],
.degoist-form input[type="radio"] {
  accent-color: var(--wp--preset--color--accent, #add000);
  width: 1.15rem;
  height: 1.15rem;
  margin-right: .55rem;
  vertical-align: -.2em;
}
.wpcf7 .wpcf7-acceptance label,
.wpcf7 .wpcf7-list-item label,
div.wpforms-container-full .wpforms-field-checkbox label,
div.wpforms-container-full .wpforms-field-radio label,
.degoist-form .consent {
  font-weight: 400;
  font-size: .9rem;
  color: var(--wp--preset--color--soft, #dbe5e6);
  letter-spacing: 0;
}
.wpcf7 .wpcf7-list-item { margin: 0 1rem 0 0; }
.wpcf7 a, div.wpforms-container-full .wpforms-form a, .degoist-form a { color: var(--wp--preset--color--accent, #add000); }

/* Absenden-Button */
.wpcf7 input[type="submit"],
.wpcf7 button[type="submit"],
div.wpforms-container-full .wpforms-form button[type="submit"],
div.wpforms-container-full .wpforms-form .wpforms-submit,
.degoist-form button[type="submit"],
.degoist-form input[type="submit"] {
  appearance: none;
  -webkit-appearance: none;
  background: var(--wp--preset--color--accent, #add000);
  color: var(--wp--preset--color--night, #0b1214);
  border: 0;
  border-radius: 10px;
  padding: .85rem 1.9rem;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: transform .15s ease, background-color .15s ease;
}
.wpcf7 input[type="submit"]:hover,
.wpcf7 button[type="submit"]:hover,
div.wpforms-container-full .wpforms-form button[type="submit"]:hover,
div.wpforms-container-full .wpforms-form .wpforms-submit:hover,
.degoist-form button[type="submit"]:hover,
.degoist-form input[type="submit"]:hover {
  background: var(--wp--preset--color--teal, #00B0B4);
  color: var(--wp--preset--color--night, #0b1214);
  transform: translateY(-1px);
}
.wpcf7 input[type="submit"]:focus-visible,
div.wpforms-container-full .wpforms-form button[type="submit"]:focus-visible,
.degoist-form button[type="submit"]:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}
.wpcf7 .wpcf7-spinner { background-color: var(--wp--preset--color--accent, #add000); }

/* Fehler- und Erfolgsmeldungen */
.wpcf7-not-valid-tip,
div.wpforms-container-full .wpforms-form label.wpforms-error,
div.wpforms-container-full .wpforms-form .wpforms-error {
  color: #ff9a8f;
  font-size: .85rem;
  font-weight: 500;
  margin-top: .35rem;
}
.wpcf7 .wpcf7-not-valid,
div.wpforms-container-full .wpforms-form input.wpforms-error,
div.wpforms-container-full .wpforms-form textarea.wpforms-error { border-color: #ff6b5e; }

.wpcf7 form .wpcf7-response-output {
  margin: 1.25rem 0 0;
  padding: .85rem 1.1rem;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 10px;
  color: #fff;
}
.wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--wp--preset--color--accent, #add000);
  background: rgba(173,208,0,.12);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
  border-color: #ff6b5e;
  background: rgba(255,107,94,.12);
}
div.wpforms-container-full .wpforms-confirmation-container-full,
div.wpforms-container-full .wpforms-confirmation-container {
  background: rgba(173,208,0,.12);
  border: 1px solid var(--wp--preset--color--accent, #add000);
  border-radius: 10px;
  color: #fff;
}

/* Zwei Spalten ab Tablet-Breite (z. B. Name + E-Mail nebeneinander).
   In CF7 die beiden Felder in <div class="form-row"> ... </div> setzen. */
.form-row { display: grid; gap: 0 1.25rem; }
@media (min-width: 700px) { .form-row { grid-template-columns: 1fr 1fr; } }