/*
Theme Name:   twentytwentyfour Child
Description:  twentytwentyfour Child
Author:           mischgo
Author URI:  https://praxislauradoerfler.mischgo.com
Template:         twentytwentyfour
Version:          1.0.0

 
*/


/* contakt form  anpassen */
/* Basis-Wrapper für CF7 */
.wpcf7 form {
    font-family: var(--wp--preset--font-family--system-ui, system-ui, sans-serif);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--wp--preset--color--foreground, #111);
}

/* Eingabefelder & Textareas */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="url"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="number"],
.wpcf7 textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--wp--preset--color--neutral-300, #ccc);
    border-radius: 0.5rem;
    background: #fff;
    font-size: 1rem;
    line-height: 1.5;

    /* Safari & iOS Fixes */
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    box-shadow: none;
}

/* Fokus-Zustand */
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="url"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 input[type="number"]:focus,
.wpcf7 textarea:focus {
    border-color: var(--wp--preset--color--primary, #000);
    box-shadow: 0 0 0 2px rgba(0,0,0,0.1);
}

/* Placeholder-Farbe für alle Browser inkl. Safari */
.wpcf7 ::placeholder {
    color: #999;
    opacity: 1;
}
.wpcf7 :-ms-input-placeholder {
    color: #999;
}
.wpcf7 ::-ms-input-placeholder {
    color: #999;
}

/* Labels */
.wpcf7 label {
    font-weight: 500;
    margin-bottom: 0.25rem;
    display: block;
}

/* Absende-Button */
.wpcf7 input[type="submit"] {
    display: inline-block;
    background: #000;
    color: #fff;
    border: none;
    border-radius: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;

    /* Safari & iOS Fix */
    -webkit-appearance: none;
    appearance: none;

    transition: background 0.3s ease, transform 0.1s ease;
}

.wpcf7 input[type="submit"]:hover {
    background: #333;
}

.wpcf7 input[type="submit"]:active {
    transform: scale(0.98);
}

/* Fehlermeldungen */
.wpcf7-not-valid-tip {
    color: #d32f2f;
    font-size: 0.875rem;
    margin-top: -0.5rem;
    margin-bottom: 1rem;
}

.wpcf7-response-output {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 0.5rem;
    font-size: 0.9rem;
}

.wpcf7 form.invalid .wpcf7-response-output {
    border: 1px solid #d32f2f;
    background: #fdecea;
    color: #b71c1c;
}

.wpcf7 form.sent .wpcf7-response-output {
    border: 1px solid #388e3c;
    background: #e8f5e9;
    color: #1b5e20;
}


/* Absende-Button schwarz/weiß */
.wpcf7-form input[type="submit"] {
    background-color: #000;      /* schwarz */
    color: #fff;                 /* weißer Text */
    border: none;
    border-radius: 8px;          /* abgerundete Ecken */
    padding: 0.75rem 1.5rem;     /* Innenabstand */
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

/* Hover-Effekt */
.wpcf7-form input[type="submit"]:hover {
    background-color: #333;      /* etwas helleres Schwarz beim Hover */
}

.wpcf7-form-control{
	width: 90% !important;}


/* deine Klasse am Cover: hero */
.hero { 
  min-height: clamp(40vh, 55vh, 75vh);
  overflow: hidden;
}

/* Cover-Bild füllt, aber zentriert */
.hero .wp-block-cover__image-background,
.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* bleibt deckend */
  object-position: center;/* zentrierter Fokus */
}

/* Auf Mobile weniger Höhe -> weniger Crop */
@media (max-width: 600px) {
  .hero { min-height: 45vh; }
}
@media (max-width: 650px) {
.wp-block-cover-image.has-parallax, .wp-block-cover.has-parallax, .wp-block-cover__image-background.has-parallax, video.wp-block-cover__video-background.has-parallax {
  background-size: auto 600px !important;}
 }