/*
Theme Name:  Twenty Twenty-Five Child
Template:    twentytwentyfive
Version:     1.0.0
Description: Child-Theme für Twenty Twenty-Five – .netperfection
Author:      .netperfection
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfive-child
*/

/* ──────────────────────────────────────────────
   FIXE NAVIGATION
   ────────────────────────────────────────────── */

/* Template-Part "header" – Twenty Twenty-Five rendert ihn als <header>
   mit der Klasse .wp-block-template-part */
.wp-block-template-part.site-header,
header.wp-block-template-part,
.wp-block-template-part[class*="header"] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background-color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
}

/* Platz für den fixierten Header freigeben.
   Den Wert ggf. an die tatsächliche Header-Höhe anpassen. */
body {
    padding-top: 60px;
}

/* Entfernt den Standard-Fokus-Rahmen von allen WordPress-Buttons */
:root :where(.wp-element-button:focus, .wp-block-button__link:focus),
:root :where(.wp-element-button:focus-visible, .wp-block-button__link:focus-visible) {
    outline: none !important;
    outline-width: 0 !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
}

.wp-block-site-logo.is-default-size img {
  height: auto;
  width: 200px !important;
}

@media (max-width: 990px) {
    /* Zeigt den Hamburger-Button an */
    .wp-block-navigation__responsive-container-open:not(.always-hidden) {
        display: grid !important;
    }

    /* Versteckt die normale, horizontale Desktop-Navigation */
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: none !important;
    }
}

@media (max-width: 990px) {
    /* 1. Das UL-Element auf volle Breite zwingen */
    .wp-block-navigation__responsive-container-content ul.wp-block-navigation__container.is-responsive {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    /* 2. Alle Listenelemente zentrieren */
    .wp-block-navigation__responsive-container-content ul.wp-block-navigation__container.is-responsive li {
        width: 100% !important;
        align-items: center;
  		background-color: inherit;
  		display: flex;
  		position: relative;
    }

    /* 3. NEU: Die inneren Links (a-Tags) selbst zentrieren */
    .wp-block-navigation__responsive-container-content ul.wp-block-navigation__container.is-responsive li a.wp-block-navigation-item__content, .wp-block-navigation__responsive-container-content ul.wp-block-navigation__container.is-responsive li.lang-item a{
       	justify-content: center!important;
    	display: flex !important;
    	width: 100% !important;
    }
}

/* Der Code für das Entfernen des Rahmens bleibt wie zuvor darunter stehen */
.wp-block-navigation__responsive-container-content a,
.wp-block-navigation__responsive-container-content a:focus,
.wp-block-navigation__responsive-container-content a:focus-visible,
.wp-block-navigation__responsive-container-content a:active,
.wp-block-navigation-item__content:focus,
.wp-block-navigation-item__content:focus-visible {
    outline: none !important;
    outline-width: 0 !important;
    box-shadow: none !important;
}

/* 3. Den schwarzen Rahmen beim Anklicken JEDES Menülinks radikal entfernen */
.wp-block-navigation__responsive-container-content a,
.wp-block-navigation__responsive-container-content a:focus,
.wp-block-navigation__responsive-container-content a:focus-visible,
.wp-block-navigation__responsive-container-content a:active,
.wp-block-navigation-item__content:focus,
.wp-block-navigation-item__content:focus-visible {
    outline: none !important;
    outline-width: 0 !important;
    box-shadow: none !important;
}

/* Entfernt den schwarzen Rahmen beim Anklicken des Burger-Menüs */
.wp-block-navigation__responsive-container-open:focus,
.wp-block-navigation__responsive-container-open:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Verhindert den Rahmen auch beim Schließen-Button (X) im geöffneten Menü */
.wp-block-navigation__responsive-container-close:focus,
.wp-block-navigation__responsive-container-close:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* ──────────────────────────────────────────────
   FARBE #ADEEC5  –  Links & Hover
   ────────────────────────────────────────────── */

a,
.wp-block-navigation a,
.wp-block-navigation .wp-block-navigation-item__content {
    color: #1fb5ae;
    text-decoration-color: #1fb5ae;
}

a:hover,
a:focus,
.wp-block-navigation a:hover,
.wp-block-navigation a:focus,
.wp-block-navigation .wp-block-navigation-item__content:hover {
    color: #8fdcb0;          /* leicht abgedunkelt für Kontrast */
    text-decoration-color: #8fdcb0;
}

/* Aktiver Nav-Link */
.wp-block-navigation .current-menu-item > a,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
    color: #1fb5ae;
}

/* ──────────────────────────────────────────────
   FARBE #ADEEC5  –  Überschriften H1 – H6
   ────────────────────────────────────────────── */

h1, .wp-block-heading h1,
h2, .wp-block-heading h2,
h3, .wp-block-heading h3,
h4, .wp-block-heading h4,
h5, .wp-block-heading h5,
h6, .wp-block-heading h6,
.wp-block-post-title,
.wp-block-query-title {
    color: #1fb5ae;
	line-height:1.6em !important;
	padding-top:24px !important;
	padding-bottom:12px !important;
    /*text-shadow: 0 1px 4px rgba(31, 181, 174, 0.20);*/
}

/* ──────────────────────────────────────────────
   RESPONSIVE HEADLINE-GRÖßEN
   ────────────────────────────────────────────── */

/* Tablet  (max. 1024 px) */
@media (max-width: 1024px) {
    h1, .wp-block-heading h1, .wp-block-post-title  { font-size: 2.2rem; }
    h2, .wp-block-heading h2, .wp-block-query-title { font-size: 1.75rem; }
    h3, .wp-block-heading h3                        { font-size: 1.4rem; }
    h4, .wp-block-heading h4                        { font-size: 1.2rem; }
    h5, .wp-block-heading h5                        { font-size: 1.05rem; }
    h6, .wp-block-heading h6                        { font-size: 0.95rem; }
}

/* Smartphone  (max. 600 px) */
@media (max-width: 600px) {
    h1, .wp-block-heading h1, .wp-block-post-title  { font-size: 1.75rem; }
    h2, .wp-block-heading h2, .wp-block-query-title { font-size: 1.4rem; }
    h3, .wp-block-heading h3                        { font-size: 1.2rem; }
    h4, .wp-block-heading h4                        { font-size: 1.05rem; }
    h5, .wp-block-heading h5                        { font-size: 0.95rem; }
    h6, .wp-block-heading h6                        { font-size: 0.875rem; }
}

/* ──────────────────────────────────────────────
   SLIDE-IN VON UNTEN  –  .np_slide_in
   ────────────────────────────────────────────── */

.np_slide_in {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1.6s ease, transform 1.6s ease;
}

.np_slide_in.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Verzögerungen für gestaffelte Gruppen */
.np_slide_in:nth-child(2) { transition-delay: 0.1s; }
.np_slide_in:nth-child(3) { transition-delay: 0.2s; }
.np_slide_in:nth-child(4) { transition-delay: 0.3s; }
.np_slide_in:nth-child(5) { transition-delay: 0.4s; }

/* Barrierefreiheit: Animation deaktivieren wenn Nutzer das bevorzugt */
@media (prefers-reduced-motion: reduce) {
    .np_slide_in {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/*
 * Contact Form 7 – Styling für Twenty Twenty-Five (TT5)
 * Verwendet die CSS Custom Properties des Block-Themes.
 * Einbinden z. B. per Child-Theme style.css oder wp_enqueue_style().
 */

/* ============================================================
   1. WRAPPER & LAYOUT
   ============================================================ */

.wpcf7 {
    width: 100%;
    max-width: var(--wp--style--global--content-size, 640px);
    margin-inline: auto;
}

.wpcf7-form {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--40, 1.5rem);
}

/* Jede Zeile: Label + Feld untereinander */
.wpcf7-form p {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* ============================================================
   2. LABELS
   ============================================================ */

.wpcf7-form label {
    font-size: var(--wp--preset--font-size--small, 0.875rem);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--wp--preset--color--contrast, #111);
    cursor: pointer;
}

/* ============================================================
   3. FELDER: INPUT, TEXTAREA, SELECT
   ============================================================ */

.wpcf7-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.wpcf7-form textarea,
.wpcf7-form select {
    width: 100%;
    box-sizing: border-box;
    padding: 0.75rem 1rem;
    background-color: var(--wp--preset--color--base, #fff);
    color: var(--wp--preset--color--contrast, #111);
    border: 1.5px solid color-mix(in srgb, var(--wp--preset--color--contrast, #111) 20%, transparent);
    border-radius: 4px;
    font-family: inherit;
    font-size: var(--wp--preset--font-size--medium, 1rem);
    line-height: 1.5;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
}

/* Placeholder */
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
    color: color-mix(in srgb, var(--wp--preset--color--contrast, #111) 35%, transparent);
    font-style: italic;
}

/* Focus */
.wpcf7-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
    outline: none;
    border-color: var(--wp--preset--color--contrast, #111);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--contrast, #111) 12%, transparent);
    background-color: var(--wp--preset--color--base, #fff);
}

/* Hover */
.wpcf7-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):hover,
.wpcf7-form textarea:hover,
.wpcf7-form select:hover {
    border-color: color-mix(in srgb, var(--wp--preset--color--contrast, #111) 50%, transparent);
}

/* Textarea */
.wpcf7-form textarea {
    min-height: 140px;
    resize: vertical;
}

/* Select – eigener Pfeil */
.wpcf7-form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    background-size: 1rem;
    padding-right: 2.5rem;
    cursor: pointer;
}

/* ============================================================
   4. CHECKBOX & RADIO
   ============================================================ */

.wpcf7-form .wpcf7-checkbox,
.wpcf7-form .wpcf7-radio {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.wpcf7-form .wpcf7-list-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
}

.wpcf7-form .wpcf7-list-item input[type="checkbox"],
.wpcf7-form .wpcf7-list-item input[type="radio"] {
    width: 1.15rem;
    height: 1.15rem;
    flex-shrink: 0;
    accent-color: var(--wp--preset--color--contrast, #111);
    cursor: pointer;
}

.wpcf7-form .wpcf7-list-item-label {
    font-size: var(--wp--preset--font-size--medium, 1rem);
    color: var(--wp--preset--color--contrast, #111);
    cursor: pointer;
}

/* ============================================================
   5. ACCEPTANCE (Datenschutz-Checkbox)
   ============================================================ */

.wpcf7-form .wpcf7-acceptance {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    font-size: var(--wp--preset--font-size--small, 0.875rem);
    color: color-mix(in srgb, var(--wp--preset--color--contrast, #111) 70%, transparent);
    line-height: 1.5;
}

.wpcf7-form .wpcf7-acceptance input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
    margin-top: 0.15rem;
    accent-color: var(--wp--preset--color--contrast, #111);
    cursor: pointer;
}

/* ============================================================
   6. SUBMIT-BUTTON
   ============================================================ */

.wpcf7-form input[type="submit"],
.wpcf7-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    padding: 0.8rem 2rem;
    background-color: var(--wp--preset--color--contrast, #111);
    color: var(--wp--preset--color--base, #fff);
    border: 2px solid var(--wp--preset--color--contrast, #111);
    border-radius: 4px;
    font-family: inherit;
    font-size: var(--wp--preset--font-size--medium, 1rem);
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
    min-width: 160px;
}

.wpcf7-form input[type="submit"]:hover,
.wpcf7-submit:hover {
    background-color: var(--wp--preset--color--base, #fff);
    color: var(--wp--preset--color--contrast, #111);
}

.wpcf7-form input[type="submit"]:focus-visible,
.wpcf7-submit:focus-visible {
    outline: 3px solid var(--wp--preset--color--contrast, #111);
    outline-offset: 3px;
}

.wpcf7-form input[type="submit"]:active,
.wpcf7-submit:active {
    transform: translateY(1px);
}

/* Lade-Spinner (CF7 sendet per Ajax) */
.wpcf7-form.submitting input[type="submit"],
.wpcf7-form.submitting .wpcf7-submit {
    opacity: 0.6;
    cursor: wait;
    pointer-events: none;
}

/* ============================================================
   7. VALIDIERUNGSFEHLER (einzelne Felder)
   ============================================================ */

.wpcf7-form-control-wrap {
    position: relative;
    display: block;
    width: 100%;
}

/* Ungültiges Feld – rote Umrandung */
.wpcf7-form-control.wpcf7-not-valid {
    border-color: #c0392b !important;
    background-color: color-mix(in srgb, #c0392b 5%, transparent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, #c0392b 15%, transparent) !important;
}

/* Fehlertext unter dem Feld */
.wpcf7-not-valid-tip {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.8rem;
    color: #c0392b;
    font-style: italic;
}

/* ============================================================
   8. RESPONSE-OUTPUT (Erfolg / Fehler / Spam)
   ============================================================ */

.wpcf7-response-output {
    margin-top: var(--wp--preset--spacing--30, 1rem);
    padding: 0.9rem 1.2rem;
    border-radius: 4px;
    font-size: var(--wp--preset--font-size--small, 0.875rem);
    font-weight: 500;
    line-height: 1.5;
    border: 1.5px solid transparent;
}

/* Erfolgreich gesendet */
.wpcf7-form.sent .wpcf7-response-output {
    background-color: color-mix(in srgb, #27ae60 10%, transparent);
    border-color: #27ae60;
    color: #1a6e3c;
}

/* Validierungsfehler */
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output {
    background-color: color-mix(in srgb, #c0392b 8%, transparent);
    border-color: #c0392b;
    color: #8b1a1a;
}

/* Spam */
.wpcf7-form.spam .wpcf7-response-output {
    background-color: color-mix(in srgb, #e67e22 8%, transparent);
    border-color: #e67e22;
    color: #7d4000;
}

/* Sendefehler (Mail-Server-Problem) */
.wpcf7-form.failed .wpcf7-response-output {
    background-color: color-mix(in srgb, #8e44ad 8%, transparent);
    border-color: #8e44ad;
    color: #4a235a;
}

/* ============================================================
   9. AJAX-LOADER (Spinner-GIF von CF7)
   ============================================================ */

.wpcf7 .ajax-loader {
    display: inline-block;
    width: 1.2rem;
    height: 1.2rem;
    margin-left: 0.6rem;
    vertical-align: middle;
    opacity: 0.7;
}

.wpcf7 .ajax-loader:not(.is-active) {
    display: none;
}

/* ============================================================
   10. RESPONSIVE
   ============================================================ */

/* Zwei Felder nebeneinander mit der CSS-Klasse .cf7-zwei-spalten */
@media (min-width: 640px) {
    .wpcf7-form .cf7-zwei-spalten {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--wp--preset--spacing--40, 1.5rem);
    }
}

@media (max-width: 480px) {
    .wpcf7-form input[type="submit"],
    .wpcf7-submit {
        width: 100%;
        align-self: stretch;
    }
}

/* ============================================================
   11. DARK-MODE-UNTERSTÜTZUNG
   ============================================================ */

@media (prefers-color-scheme: dark) {
    .wpcf7-form select {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    }
}