/* ==========================================================================
   KONTAKTFORMULAR - Materne Fotografie
   --------------------------------------------------------------------------
   Hinweis: Die Seite laeuft im Quirks-Modus (<!DOCTYPE> ohne "html").
   Deshalb gilt hier durchgehend:
     - jede Laenge bekommt eine Einheit (einheitenlose Werte werden ignoriert)
     - box-sizing wird explizit gesetzt
     - Klassennamen exakt wie im HTML (Quirks matcht case-insensitiv)
   Ausserdem werden an den markierten Stellen Materialize-Defaults
   neutralisiert, die Selects ausblenden und Checkboxen unsichtbar machen.
   ========================================================================== */

:root{
    --kfRose:        rgb(171,123,104);   /* Ueberschriften, nur ab 24px  */
    --kfRoseDark:    rgb(158,124,100);   /* Buttons                      */
    --kfRoseDeep:    rgb(136,116,102);   /* Button-Hover                 */
    --kfBeige:       rgb(235,230,222);   /* Flaechen                     */
    --kfBeigeLine:   #d9d0c2;            /* Rahmen                       */
    --kfInk:         #494746;            /* Labels, Eingabetext          */
    --kfInkSoft:     #656565;            /* Fliesstext                   */
    --kfInkMuted:    #6f6a65;            /* Hinweise, Platzhalter        */
    --kfError:       #9e3b2e;            /* Fehler, 6.8:1 auf Weiss      */
    --kfErrorBg:     #fbf2f0;
    --kfSuccessBg:   #f4f0e9;            /* Erfolg bleibt in der Palette */
}

/* Spacer aus rechtliches.css - dort definiert, hier aber nicht eingebunden */
.spacerh1h3{
    position: relative;
    width: 100%;
    height: 15px;
}

/*PARALLAX*/
.parallax-container.contact{
    width: 1000px;
    height: 350px;
    margin-top: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 37px;
}

.parallax-container.contact .parallax img{
    width: 140%;
    height: auto;
}

.parallaxTXT.contact h1.nth-priceParallaxHeading{
    font-family: 'CormorantRegular', sans-serif;
    font-size: 70;
    margin-bottom: 15px;
}

.parallaxTXT.contact h2{
    font-family: 'CormorantRegular';
    font-weight: 400;
    font-size: 36;
    margin-top: 15px;
}

/* Umbruchstellen in den Parallax-Ueberschriften steuern.
   Der Browser darf an jedem Leerzeichen umbrechen. Damit er es nur an
   der gewuenschten Stelle tut, werden die Wortgruppen davor und danach
   zusammengebunden. Passt alles in eine Zeile, bleibt es einzeilig;
   wird es zu schmal, bricht es genau einmal an der vorgesehenen Stelle:
       h1  Lass uns in | Kontakt treten
       h2  Und aus einer Begegnung | Erinnerungen machen
   Bewusst so und nicht mit festen Leerzeichen: Der Text bleibt normal
   markier- und kopierbar. */
.parallaxTXT.contact .zusammen{
    white-space: nowrap;
}

.parallaxTXT.contact h1, .parallaxTXT.contact h2{
    text-align: center;
    color: #fff;
    text-shadow: 0px 0px 10px #444;
}

.row.contentRow.firstRow{
    margin-top: 75px;
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */

.kontaktLayout{
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    margin-top: 40px;
    margin-bottom: 130px;
    text-align: left;
}

.kontaktLayout *{
    box-sizing: border-box;
}

.kontaktFormColumn{
    position: relative;
    width: 60%;
}

.kontaktIntro{
    font-family: 'CormorantRegular', serif;
    font-size: 20px;
    line-height: 1.6;
    color: var(--kfInkSoft);
    margin: 0 0 36px 0;
    max-width: 640px;
}


/* ==========================================================================
   FORMULAR - Grundgeruest
   ========================================================================== */

.kontaktForm{
    position: relative;
    margin: 0;
}

/* Steht unten zwischen Nachricht und Einwilligung. Der obere Abstand muss
   groesser sein als der Aussenabstand des Nachrichtenfeldes (26px), sonst
   setzt er sich nicht durch - benachbarte Aussenabstaende fallen zusammen. */
.formRequiredNote{
    font-family: 'CormorantRegular', serif;
    font-size: 16px;
    color: var(--kfInkMuted);
    margin: 34px 0 0 0;
}

.fieldReq{
    color: var(--kfRoseDark);
    font-size: 17px;
    line-height: 1;
}

.fieldOptional{
    font-family: 'CormorantRegular', serif;
    font-size: 15px;
    color: var(--kfInkMuted);
    letter-spacing: 0;
}

.formField{
    position: relative;
    margin: 0 0 26px 0;
}

/* Zwei Felder nebeneinander. Bewusst ueber Breite + Rand statt ueber
   "gap" geloest, damit auch aeltere Safari-Versionen sauber umbrechen. */
.formRow{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
}

.formRow .formField{
    width: calc(50% - 13px);
    margin-right: 26px;
}

.formRow .formField:last-child{
    margin-right: 0;
}

.kontaktForm .fieldLabel{
    display: block;
    font-family: 'EBGaramond', serif;
    font-size: 18px;
    line-height: 1.3;
    color: var(--kfInk);
    letter-spacing: 0.3px;
    margin: 0 0 8px 0;
    /* Materialize setzt label auf .8rem/#9e9e9e - hier bewusst ueberschrieben */
    text-transform: none;
}


/* ==========================================================================
   EINGABEFELDER
   ========================================================================== */

.kontaktForm .fieldInput,
.kontaktForm .fieldSelect,
.kontaktForm .fieldTextarea{
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    min-height: 52px;
    margin: 0;
    padding: 13px 16px;
    font-family: 'CormorantRegular', serif;
    font-size: 19px;
    line-height: 1.4;
    color: var(--kfInk);
    background-color: #fff;
    border: 1px solid var(--kfBeigeLine);
    border-radius: 12px;
    box-shadow: none;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.kontaktForm .fieldTextarea{
    min-height: 168px;
    line-height: 1.55;
    resize: vertical;
    overflow-x: hidden;
    overflow-y: auto;
}

.kontaktForm .fieldInput::placeholder,
.kontaktForm .fieldTextarea::placeholder{
    color: var(--kfInkMuted);
    opacity: 1;
}
.kontaktForm .fieldInput::-webkit-input-placeholder,
.kontaktForm .fieldTextarea::-webkit-input-placeholder{
    color: var(--kfInkMuted);
}

.kontaktForm .fieldInput:hover,
.kontaktForm .fieldSelect:hover,
.kontaktForm .fieldTextarea:hover{
    border-color: #c9bda9;
}

.kontaktForm .fieldInput:focus,
.kontaktForm .fieldSelect:focus,
.kontaktForm .fieldTextarea:focus{
    border-color: var(--kfRose);
    box-shadow: 0 0 0 3px rgba(171,123,104,0.20);
    background-color: #fffdfb;
}

/* Autofill in Safari/Chrome nicht blau einfaerben */
.kontaktForm .fieldInput:-webkit-autofill,
.kontaktForm .fieldTextarea:-webkit-autofill{
    -webkit-text-fill-color: var(--kfInk);
    -webkit-box-shadow: 0 0 0 1000px #fffdfb inset;
    box-shadow: 0 0 0 1000px #fffdfb inset;
}


/* --- Datumsfeld ---------------------------------------------------------
   Das native <input type="date"> bleibt der Werttraeger und liefert
   weiterhin JJJJ-MM-TT. Der browsereigene Kalender wird abgeschaltet;
   ausgewaehlt wird im eigenen Kalender weiter unten.
   Ohne JavaScript bleibt das native Feld samt Browserkalender bestehen.   */

.dateWrap{
    position: relative;
    display: block;
}

.kontaktForm .fieldDate{
    padding-right: 52px;
    cursor: text;
}

.kontaktForm .fieldDate::-webkit-datetime-edit{
    color: var(--kfInk);
    padding: 0;
}

/* Solange nichts gewaehlt ist, liest sich TT.MM.JJJJ wie ein Platzhalter */
.kontaktForm .fieldDate.isEmpty::-webkit-datetime-edit{
    color: var(--kfInkMuted);
}

/* Erst wenn der eigene Kalender steht, verschwindet der native Knopf */
.dateWrap.isEnhanced .fieldDate::-webkit-calendar-picker-indicator{
    display: none;
    -webkit-appearance: none;
    opacity: 0;
    pointer-events: none;
}

/* Auf Touchgeraeten ist das Feld nur lesbar, damit statt der
   Systemauswahl der eigene Kalender aufgeht */
.kontaktForm .fieldDate[readonly]{
    cursor: pointer;
}


/* --- Kalenderknopf ------------------------------------------------------- */

.dateWrap .dateButton{
    position: absolute;
    top: 50%;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-top: -19px;
    padding: 0;
    background-color: transparent;
    border: none;
    border-radius: 9px;
    color: var(--kfRoseDark);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

.dateWrap .dateButton:hover{
    background-color: var(--kfBeige);
}

.dateWrap .dateButton:focus{
    outline: 2px solid var(--kfRose);
    outline-offset: 1px;
}

.dateWrap .dateButton i{
    font-size: 21px;
}


/* --- Eigener Kalender ---------------------------------------------------- */

.datePicker{
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 70;
    width: 314px;
    max-width: 100%;
    margin-top: 8px;
    padding: 16px 16px 12px 16px;
    background-color: #fff;
    border: 1px solid var(--kfRose);
    border-radius: 16px;
    box-shadow: 0 12px 28px rgba(73,71,70,0.18);
}

/* Nahe am rechten Rand klappt der Kalender nach links auf */
.datePicker.alignRight{
    left: auto;
    right: 0;
}

.datePickerHead{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.datePickerHead .dateNav{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background-color: transparent;
    border: none;
    border-radius: 50%;
    color: var(--kfRoseDark);
    cursor: pointer;
    transition: background-color .2s ease;
}

.datePickerHead .dateNav:hover{
    background-color: var(--kfBeige);
}

.datePickerHead .dateNav:focus{
    outline: 2px solid var(--kfRose);
    outline-offset: 1px;
}

.datePickerHead .dateNav[disabled]{
    opacity: .3;
    cursor: default;
}

.datePickerHead .dateNav i{
    font-size: 22px;
}

.dateMonth{
    flex: 1 1 auto;
    font-family: 'CormorantRegular', serif;
    font-size: 20px;
    color: var(--kfRose);
    text-align: center;
}

.dateWeekdays{
    display: flex;
    flex-direction: row;
    margin-bottom: 4px;
}

.dateWeekdays span{
    flex: 1 1 0;
    font-family: 'EBGaramond', serif;
    font-size: 13px;
    color: var(--kfInkMuted);
    text-align: center;
    letter-spacing: .5px;
}

.dateGrid{
    display: block;
}

.dateRow{
    display: flex;
    flex-direction: row;
}

.dateDay{
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    margin: 1px;
    font-family: 'CormorantRegular', serif;
    font-size: 17px;
    color: var(--kfInk);
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 9px;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.dateDay.isOutside{
    color: #c3bcb4;
}

.dateDay[aria-disabled="true"]{
    color: #cfc9c2;
    cursor: default;
}

.dateDay:not([aria-disabled="true"]):hover{
    background-color: var(--kfBeige);
}

/* Heute bekommt nur einen Rahmen, damit die Auswahl eindeutig bleibt */
.dateDay.isToday{
    border-color: var(--kfBeigeLine);
}

.dateDay[aria-selected="true"]{
    background-color: var(--kfRoseDark);
    border-color: var(--kfRoseDark);
    color: #fff;
}

.dateDay:focus{
    outline: 2px solid var(--kfRose);
    outline-offset: 1px;
}

.datePickerFoot{
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--kfBeige);
}

.datePickerFoot .dateClear{
    padding: 7px 12px;
    font-family: 'EBGaramond', serif;
    font-size: 15px;
    color: var(--kfInkMuted);
    background-color: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

.datePickerFoot .dateClear:hover{
    background-color: var(--kfBeige);
    color: var(--kfInk);
}

.datePickerFoot .dateClear:focus{
    outline: 2px solid var(--kfRose);
    outline-offset: 1px;
}

.formField.hasError .fieldDate{
    border-color: var(--kfError);
    background-color: var(--kfErrorBg);
}


/* --- Select -------------------------------------------------------------
   Grundlage bleibt das native <select> (Materialize setzt
   "select{display:none}", .browser-default im HTML holt es zurueck).
   Ohne JavaScript ist genau dieses Feld sichtbar und bedienbar.
   Mit JavaScript setzt kontakt.js die Klasse .isEnhanced auf den Wrapper:
   dann uebernimmt das eigene Listbox-Widget darunter, und das <select>
   bleibt als stiller Werttraeger fuer den Formularversand erhalten.        */

.selectWrap{
    position: relative;
    display: block;
}

.kontaktForm .fieldSelect{
    display: block;
    padding-right: 48px;
    cursor: pointer;
    /* Materialize-Default (border 1px #f2f2f2, height 3rem) ueberschreiben */
    height: auto;
    min-height: 52px;
    background-color: #fff;
    text-transform: none;
}

.kontaktForm .fieldSelect:invalid,
.kontaktForm .fieldSelect option[value=""]{
    color: var(--kfInkMuted);
}
.kontaktForm .fieldSelect option{
    color: var(--kfInk);
}

.selectWrap .selectArrow{
    position: absolute;
    top: 50%;
    right: 14px;
    margin-top: -12px;
    font-size: 24px;
    color: var(--kfRoseDark);
    pointer-events: none;
    transition: transform .2s ease;
}

/* Das native Feld verschwindet erst, wenn das Widget wirklich steht.
   Nicht display:none - sonst meldet der Browser bei required-Feldern
   "not focusable" und die Formularpruefung bricht ab.                     */
.selectWrap.isEnhanced .fieldSelect{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
}

.selectWrap.isEnhanced > .selectArrow{
    display: none;
}


/* --- Eigenes Dropdown ---------------------------------------------------- */

.selectWrap .selectButton{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    width: 100%;
    min-height: 52px;
    margin: 0;
    padding: 13px 14px 13px 16px;
    font-family: 'CormorantRegular', serif;
    font-size: 19px;
    line-height: 1.4;
    text-align: left;
    color: var(--kfInk);
    background-color: #fff;
    border: 1px solid var(--kfBeigeLine);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.selectWrap .selectButton:hover{
    border-color: #c9bda9;
}

.selectWrap .selectButton:focus{
    border-color: var(--kfRose);
    box-shadow: 0 0 0 3px rgba(171,123,104,0.20);
    background-color: #fffdfb;
    outline: none;
}

.selectWrap .selectButton.isOpen{
    border-color: var(--kfRose);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.selectWrap .selectButton.isPlaceholder .selectButtonText{
    color: var(--kfInkMuted);
}

.selectButtonText{
    flex: 1 1 auto;
    padding-right: 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.selectWrap .selectButton .selectArrow{
    position: static;
    flex: 0 0 auto;
    margin: 0;
    font-size: 24px;
    color: var(--kfRoseDark);
}

.selectWrap .selectButton.isOpen .selectArrow{
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.selectList{
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 60;
    width: 100%;
    max-height: 268px;
    margin: -1px 0 0 0;
    padding: 6px 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    list-style: none;
    background-color: #fff;
    border: 1px solid var(--kfRose);
    border-top: 1px solid var(--kfBeigeLine);
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    box-shadow: 0 10px 24px rgba(73,71,70,0.14);
}

.selectOption{
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    padding: 10px 16px;
    font-family: 'CormorantRegular', serif;
    font-size: 18px;
    line-height: 1.35;
    color: var(--kfInk);
    list-style: none;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.selectOption.isPlaceholder{
    color: var(--kfInkMuted);
}

/* Tastatur- und Mausfokus sehen gleich aus - eine Markierung, eine Regel */
.selectOption.isActive{
    background-color: var(--kfBeige);
    color: var(--kfInk);
}

.selectOption[aria-selected="true"]{
    color: var(--kfRoseDark);
}

.selectOption[aria-selected="true"]:after{
    content: "\2713";
    margin-left: 12px;
    font-family: 'EBGaramond', serif;
    font-size: 16px;
    color: var(--kfRoseDark);
}

.formField.hasError .selectButton{
    border-color: var(--kfError);
    background-color: var(--kfErrorBg);
}

.formField.hasError .selectButton:focus{
    box-shadow: 0 0 0 3px rgba(158,59,46,0.18);
}


/* --- Zeichenzaehler ----------------------------------------------------- */

.fieldMeta{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
}

.fieldMeta .fieldHint{
    margin-right: 16px;
}

.fieldCounter{
    flex: 0 0 auto;
    font-family: 'CormorantRegular', serif;
    font-size: 15px;
    color: var(--kfInkMuted);
    text-align: right;
    margin: 7px 0 0 0;
}

.fieldCounter.isNearLimit{
    color: var(--kfError);
}


/* --- Hinweise & Fehler --------------------------------------------------- */

.fieldHint{
    font-family: 'CormorantRegular', serif;
    font-size: 16px;
    line-height: 1.4;
    color: var(--kfInkMuted);
    margin: 7px 0 0 0;
}

.fieldError{
    position: relative;
    font-family: 'CormorantRegular', serif;
    font-size: 16px;
    line-height: 1.4;
    color: var(--kfError);
    margin: 8px 0 0 0;
    padding-left: 24px;
}

/* Fehler nie nur ueber Farbe - zusaetzlich ein Symbol */
.fieldError:before{
    content: "!";
    position: absolute;
    left: 0;
    top: 1px;
    width: 17px;
    height: 17px;
    font-family: 'EBGaramond', serif;
    font-size: 13px;
    line-height: 17px;
    font-weight: bold;
    text-align: center;
    color: #fff;
    background-color: var(--kfError);
    border-radius: 50%;
}

.formField.hasError .fieldInput,
.formField.hasError .fieldSelect,
.formField.hasError .fieldTextarea{
    border-color: var(--kfError);
    background-color: var(--kfErrorBg);
}

.formField.hasError .fieldInput:focus,
.formField.hasError .fieldSelect:focus,
.formField.hasError .fieldTextarea:focus{
    box-shadow: 0 0 0 3px rgba(158,59,46,0.18);
}


/* ==========================================================================
   HONEYPOT
   Nicht display:none - Bots erkennen das. Stattdessen aus dem Sichtfeld
   geschoben, per aria-hidden und tabindex="-1" fuer Mensch und Screenreader
   unerreichbar.
   ========================================================================== */

.formHoneypot{
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}


/* ==========================================================================
   DSGVO-EINWILLIGUNG
   Materialize blendet mit
   [type="checkbox"]:not(:checked),[type="checkbox"]:checked{position:absolute;
   opacity:0;pointer-events:none} JEDE Checkbox aus - ohne .browser-default-
   Ausnahme. Die folgenden Regeln holen sie mit hoeherer Spezifitaet zurueck.
   ========================================================================== */

.formConsent{
    position: relative;
    margin-top: 34px;
    padding-left: 38px;
}

.kontaktForm .formConsent input.consentCheckbox[type="checkbox"],
.kontaktForm .formConsent input.consentCheckbox[type="checkbox"]:checked,
.kontaktForm .formConsent input.consentCheckbox[type="checkbox"]:not(:checked){
    position: absolute;
    left: 0;
    top: 1px;
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 0;
    opacity: 1;
    pointer-events: auto;
    cursor: pointer;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 18px 18px;
    border: 1px solid var(--kfBeigeLine);
    border-radius: 6px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.kontaktForm .formConsent input.consentCheckbox[type="checkbox"]:hover{
    border-color: #c9bda9;
}

.kontaktForm .formConsent input.consentCheckbox[type="checkbox"]:checked{
    background-color: var(--kfRoseDark);
    border-color: var(--kfRoseDark);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3 8.4l3.2 3.2L13 4.9'/%3E%3C/svg%3E");
}

.kontaktForm .formConsent input.consentCheckbox[type="checkbox"]:focus{
    border-color: var(--kfRose);
    box-shadow: 0 0 0 3px rgba(171,123,104,0.30);
}

/* Materialize formatiert "[type=checkbox] + label" - hier zuruecksetzen */
.kontaktForm .formConsent label.consentLabel{
    position: static;
    display: block;
    height: auto;
    top: auto;
    left: auto;
    padding-left: 0;
    font-family: 'CormorantRegular', serif;
    font-size: 17px;
    line-height: 1.55;
    color: var(--kfInk);
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    -webkit-transform: none;
    transform: none;
}

.kontaktForm .formConsent a.consentLink{
    color: var(--kfRoseDark);
    text-decoration: underline;
}
.kontaktForm .formConsent a.consentLink:hover,
.kontaktForm .formConsent a.consentLink:focus{
    color: var(--kfRoseDeep);
}

.formConsent.hasError input.consentCheckbox[type="checkbox"]{
    border-color: var(--kfError);
}

.formConsent .fieldError{
    margin-left: 0;
}

.formPrivacyNote{
    font-family: 'CormorantRegular', serif;
    font-size: 15px;
    line-height: 1.55;
    color: var(--kfInkMuted);
    margin: 16px 0 0 0;
    padding-left: 38px;
}

.formPrivacyNote a{
    color: var(--kfRoseDark);
    text-decoration: underline;
}


/* ==========================================================================
   ABSENDEN
   Button uebernimmt das kippende Eck-Radius-Spiel des bookButton
   ========================================================================== */

.formSubmitRow{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 34px;
}

.kontaktForm .submitButton{
    min-width: 230px;
    min-height: 58px;
    padding: 0 32px;
    border: solid 3px var(--kfBeige);
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 0px;
    border-top-right-radius: 0px;
    overflow: hidden;
    background-color: var(--kfBeige);
    font-family: 'EBGaramond', serif;
    font-size: 21px;
    letter-spacing: 0.4px;
    color: var(--kfRoseDark);
    cursor: pointer;
    transition: .3s;
}

.kontaktForm .submitButton:hover{
    border-color: var(--kfRoseDark);
    background-color: rgb(235,230,222);
    color: var(--kfRoseDark);
    border-bottom-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 0px;
    border-top-left-radius: 0px;
    transition: .3s;
}

.kontaktForm .submitButton:focus{
    outline: 2px solid var(--kfRose);
    outline-offset: 3px;
    border-color: var(--kfRoseDark);
}

.kontaktForm .submitButton[disabled]{
    opacity: .6;
    cursor: default;
}

.formTlsNote{
    display: flex;
    align-items: center;
    font-family: 'CormorantRegular', serif;
    font-size: 15px;
    color: var(--kfInkMuted);
    margin: 0 0 0 22px;
}

.formTlsNote .tlsIcon{
    font-size: 17px;
    margin-right: 6px;
    color: var(--kfInkMuted);
}


/* ==========================================================================
   STATUS: FEHLERUEBERSICHT & ERFOLGSMELDUNG
   ========================================================================== */

.formErrorSummary{
    /* sitzt unter dem Absenden-Button, nicht darueber */
    position: relative;
    margin: 32px 0 0 0;
    padding: 22px 26px;
    background-color: var(--kfErrorBg);
    border: 1px solid rgba(158,59,46,0.35);
    border-radius: 16px;
}

.errorSummaryHeading{
    display: flex;
    align-items: center;
    font-family: 'EBGaramond', serif;
    font-size: 19px;
    color: var(--kfError);
    margin: 0 0 10px 0;
}

.errorSummaryIcon{
    font-size: 22px;
    margin-right: 9px;
}

.errorSummaryList{
    margin: 0;
    padding-left: 20px;
    list-style: disc;
}

.errorSummaryList li{
    font-family: 'CormorantRegular', serif;
    font-size: 17px;
    line-height: 1.6;
    color: var(--kfInk);
    list-style: disc;
}

.errorSummaryList li a{
    color: var(--kfError);
    text-decoration: underline;
}

/* Sitzt unter dem Absenden-Knopf, nicht darueber. Der obere Abstand
   muss derselbe sein wie bei .formErrorSummary, damit Erfolgsmeldung
   und Fehlermeldung an derselben Stelle erscheinen. */
.formStatus{
    position: relative;
    margin: 32px 0 0 0;
    padding: 26px 30px;
    background-color: var(--kfSuccessBg);
    border: 1px solid rgba(158,124,100,0.35);
    border-radius: 16px;
}

.formStatusHeading{
    display: flex;
    align-items: center;
    font-family: 'CormorantRegular', serif;
    font-size: 26px;
    color: var(--kfRose);
    margin: 0 0 8px 0;
}

.formStatusIcon{
    font-size: 22px;
    margin-right: 10px;
    color: var(--kfRoseDark);
}

.formStatusText{
    font-family: 'CormorantRegular', serif;
    font-size: 18px;
    line-height: 1.55;
    color: var(--kfInkSoft);
    margin: 0;
}

[hidden]{
    display: none !important;
}


/* ==========================================================================
   INFO-SPALTE
   ========================================================================== */

.kontaktInfo{
    /* bleibt auf grossen Schirmen stehen, statt Weissraum neben dem
       deutlich laengeren Formular zu hinterlassen                     */
    position: -webkit-sticky;
    position: sticky;
    top: 40px;
    width: calc(40% - 60px);
    margin-left: 60px;
    padding: 36px 34px 38px 34px;
    background-color: var(--kfBeige);
    border-radius: 27px;
}

/* Portraet neben Ueberschrift und Einleitung */
.kontaktInfoIntro{
    display: flex;
    flex-direction: row;
    align-items: center;
    /* setzt die Kontaktdaten darunter deutlich ab */
    margin-bottom: 38px;
}

.kontaktInfoIntro .kontaktInfoPortrait{
    flex: 0 0 auto;
    width: 104px;
    height: 104px;
    margin-right: 20px;
    border-radius: 50%;
    /* Ausschnitt mittig, damit Hochformat nicht verzerrt */
    object-fit: cover;
    object-position: 50% 30%;
    background-color: #fff;
    /* heller Ring, damit der Kreis sich von der beigen Flaeche abhebt */
    box-shadow: 0 0 0 4px rgba(255,255,255,0.75),
                0 6px 16px rgba(73,71,70,0.14);
}

.kontaktInfoIntroText{
    flex: 1 1 auto;
    min-width: 0;
}

.kontaktInfo .kontaktInfoHeading{
    font-family: 'CormorantRegular', serif;
    font-size: 30px;
    line-height: 1.2;
    color: var(--kfRose);
    margin: 0 0 10px 0;
    text-align: left;
}

.kontaktInfoText{
    font-family: 'CormorantRegular', serif;
    font-size: 18px;
    line-height: 1.55;
    color: var(--kfInkSoft);
    margin: 0 0 20px 0;
}

.kontaktInfoIntroText .kontaktInfoText{
    margin-bottom: 0;
}

.kontaktInfoList{
    margin: 0;
    padding: 0;
    list-style: none;
}

.kontaktInfoItem{
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    margin: 0 0 18px 0;
    font-family: 'CormorantRegular', serif;
    font-size: 18px;
    line-height: 1.5;
    color: var(--kfInk);
    list-style: none;
}

.kontaktInfoItem .kontaktInfoIcon{
    flex: 0 0 auto;
    font-size: 20px;
    margin-right: 12px;
    margin-top: 3px;
    color: var(--kfRoseDark);
}

.kontaktInfoItem a{
    color: var(--kfInk);
    word-break: break-word;
    text-decoration: none;
    border-bottom: 1px solid rgba(158,124,100,0.5);
}

.kontaktInfoItem a:hover{
    color: var(--kfRoseDark);
    border-bottom-color: var(--kfRoseDark);
    text-decoration: none;
}

.kontaktInfoDivider{
    width: 100%;
    height: 1px;
    margin: 26px 0 24px 0;
    background-color: rgba(158,124,100,0.28);
}

.kontaktInfoSocial{
    display: flex;
    flex-direction: row;
    align-items: center;
}

.kontaktInfoSocial a{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-right: 12px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.55);
    color: #494746;
    transition: background-color .2s ease, color .2s ease;
}

.kontaktInfoSocial a:hover{
    background-color: #fff;
    color: var(--kfRoseDark);
}

.kontaktInfoSocial a i{
    font-size: 21px;
}


/* ==========================================================================
   FOKUS
   :focus als Basis (aeltere Safari-Versionen kennen :focus-visible nicht),
   :focus-visible schaltet den Ring bei reiner Mausbedienung wieder ab.
   ========================================================================== */

.kontaktLayout a:focus,
.kontaktLayout .consentLabel:focus,
.formErrorSummary:focus{
    outline: 2px solid var(--kfRose);
    outline-offset: 3px;
    border-radius: 3px;
}

.kontaktLayout a:focus:not(:focus-visible){
    outline: none;
}

.kontaktLayout a:focus-visible{
    outline: 2px solid var(--kfRose);
    outline-offset: 3px;
}

.formErrorSummary:focus{
    outline-offset: 4px;
}


/* ==========================================================================
   RESPONSIVE
   Breakpoints an die bestehenden der Seite angelehnt
   ========================================================================== */

@media screen and (max-width: 1320px){
    .kontaktFormColumn{
        width: 58%;
    }

    .kontaktInfo{
        width: calc(42% - 46px);
        margin-left: 46px;
        padding: 32px 28px 34px 28px;
    }

    /* Die Infospalte wird hier schmaler, das Portraet gibt Textbreite ab */
    .kontaktInfoIntro .kontaktInfoPortrait{
        width: 92px;
        height: 92px;
        margin-right: 17px;
    }

    .kontaktInfoIntro{
        margin-bottom: 34px;
    }

    /*PARALLAX*/
    .parallax-container.contact{
        width: 950px; /*800*0,7*/
    }
    
    .parallax-container.contact .parallax img{
        width: 130%;
    }
    
    .parallaxTXT.contact h1.nth-priceParallaxHeading{
        font-size: 60;
        margin-bottom: 15px;
    }
    
    .parallaxTXT.contact h2{
        font-size: 35;
        margin-top: 15px;
    }
    
    .parallaxTXT.contact h1, .parallaxTXT.contact h2{
        text-shadow: 0px 0px 36px #343434;
    }
    
    .row.contentRow.firstRow{
        margin-top: 40px;
    }
}

@media screen and (max-width: 1000px){
    .kontaktLayout{
        display: block;
        margin-bottom: 100px;
    }

    .kontaktFormColumn{
        width: 100%;
    }

    .kontaktInfo{
        position: relative;
        top: auto;
        width: 100%;
        margin-left: 0;
        margin-top: 60px;
        padding: 34px 32px 36px 32px;
    }

    .kontaktIntro{
        max-width: none;
    }
    
    /*PARALLAX*/
    .parallax-container.contact{
        width: 94%;
    }
    
    .parallaxTXT.contact h1.nth-priceParallaxHeading{
        font-size: 50;
        margin-bottom: 10px;
    }
    
    .parallaxTXT.contact h2{
        font-size: 28;
        margin-top: 10px;
    }
    
    .row.contentRow.firstRow{
        margin-top: 20px;
    }
}

@media screen and (max-width: 710px){
    .row.contentRow.firstRow{
        margin-top: 0px;
    }
    
    .kontaktLayout{
        margin-top: 30px;
        margin-bottom: 80px;
    }

    .kontaktIntro{
        font-size: 19px;
        margin-bottom: 30px;
    }

    .kontaktForm .fieldInput,
    .kontaktForm .fieldSelect,
    .kontaktForm .fieldTextarea{
        font-size: 17px;
        min-height: 50px;
        padding: 12px 14px;
    }

    /* 16px verhindert das automatische Hineinzoomen von iOS Safari beim Fokus */
    .kontaktForm .fieldInput,
    .kontaktForm .fieldSelect,
    .kontaktForm .fieldTextarea{
        font-size: 17px;
    }

    /* Zwei Felder nebeneinander werden hier zu schmal */
    .formRow{
        display: block;
    }

    .formRow .formField{
        width: 100%;
        margin-right: 0;
    }

    .kontaktForm .submitButton{
        width: 100%;
        min-width: 0;
    }

    .formSubmitRow{
        display: block;
    }

    .formTlsNote{
        justify-content: center;
        margin: 16px 0 0 0;
    }
}

@media screen and (max-width: 600px){

    /* Hier bricht der Parallax-Text um, und zwar erzwungen:
       Von selbst wuerde er erst bei rund 545px umbrechen, weil er bis
       dahin noch in eine Zeile passt. display:block macht aus jeder
       Wortgruppe eine eigene Zeile, der Umbruch sitzt also an der
       vorgesehenen Stelle.
           h1  Lass uns in / Kontakt treten
           h2  Und aus einer Begegnung / Erinnerungen machen */
    .parallaxTXT.contact .zusammen{
        display: block;
    }

    .kontaktForm .fieldLabel{
        font-size: 17px;
    }

    .kontaktForm .fieldTextarea{
        min-height: 150px;
    }

    .formConsent{
        padding-left: 36px;
    }

    .formPrivacyNote{
        padding-left: 0;
    }

    .kontaktInfo{
        padding: 28px 22px 30px 22px;
        border-radius: 20px;
    }

    .kontaktInfo .kontaktInfoHeading{
        font-size: 27px;
    }

    /* Auf schmalen Schirmen bleibt neben dem Kreis sonst zu wenig Text uebrig */
    .kontaktInfoIntro .kontaktInfoPortrait{
        width: 84px;
        height: 84px;
        margin-right: 16px;
        box-shadow: 0 0 0 3px rgba(255,255,255,0.75),
                    0 5px 14px rgba(73,71,70,0.14);
    }

    .formErrorSummary,
    .formStatus{
        padding: 20px 18px;
    }

    .kontaktInfoSocial a{
        width: 44px;
        height: 44px;
    }
}


/* --------------------------------------------------------------------------
   PORTRAET UEBER DER UEBERSCHRIFT
   In zwei Bereichen wird es neben "Lieber direkt?" zu eng, dort wandert das
   Bild darueber:
     1060px bis 1001px - die Infospalte steht noch seitlich und ist schmal
     320px und darunter - die Spalte fuellt zwar die Breite, die ist aber klein
   Dazwischen (1000px bis 321px) ist die Spalte breit genug fuer nebeneinander.
   Muss nach den Regeln oben stehen: gleiche Spezifitaet, der spaetere gewinnt.
   -------------------------------------------------------------------------- */

@media screen and (max-width: 1060px) and (min-width: 1001px){
    .kontaktInfoIntro{
        display: block;
    }

    /* display:block statt inline - sonst haengt unter dem Bild der
       Zeilenabstand als Luecke, im Quirks-Modus besonders sichtbar */
    .kontaktInfoIntro .kontaktInfoPortrait{
        display: block;
        margin: 0 0 16px 0;
    }
}

@media screen and (max-width: 320px){
    .kontaktInfoIntro{
        display: block;
    }

    .kontaktInfoIntro .kontaktInfoPortrait{
        display: block;
        margin: 0 0 14px 0;
    }
}


/* ==========================================================================
   BEDIENHILFEN
   ========================================================================== */

@media (prefers-reduced-motion: reduce){
    .kontaktLayout *,
    .kontaktForm .submitButton{
        transition: none !important;
    }
}

@media print{
    .kontaktInfo{
        background-color: transparent;
        border: 1px solid #999;
    }
}