/* ============================================================
   Eigene Anpassungen
   Glasmalerei Dr. H. Oidtmann
   ============================================================

   Diese Datei laedt NACH stil.css und ueberschreibt sie.
   Hier koennen kleine Aenderungen gemacht werden, ohne die
   Hauptdatei anzufassen.

   ACHTUNG: In dieser Datei ausschliesslich reines ASCII
   verwenden, keine Umlaute. Sie machen beim FTP-Upload
   Probleme. Das gilt NUR fuer CSS-Dateien, nicht fuer
   sichtbare Website-Texte.
   ============================================================ */


/* ============================================================
   ANIMATIONEN VERFEINERN

   Die Grundlage steht in stil.css. Hier wird sie verfeinert:
   sanftere Kurve, laengerer Weg, leichter Zoom. Die Staffelung
   (welche Kachel wann kommt) macht das JavaScript.
   ============================================================ */

/* --- Der Grundzustand: unsichtbar, etwas tiefer, minimal kleiner --- */
.reveal,
.reveal-left,
.reveal-right{
  opacity:0;
  transition:
    opacity 1s cubic-bezier(.16,.8,.24,1),
    transform 1s cubic-bezier(.16,.8,.24,1);
  will-change:opacity, transform;
}

.reveal{
  transform:translateY(38px) scale(.985);
}

/* Chronik: abwechselnd von links und rechts */
.reveal-left{
  transform:translateX(-50px);
}

.reveal-right{
  transform:translateX(50px);
}

/* --- Angekommen --- */
.reveal.in,
.reveal-left.in,
.reveal-right.in{
  opacity:1;
  transform:translate(0,0) scale(1);
}

/* --- Die Leistungs-Kacheln bekommen etwas mehr Weg --- */
.svc-grid .svc.reveal{
  transform:translateY(48px) scale(.97);
}

.svc-grid .svc.reveal.in{
  transform:translateY(0) scale(1);
}

/* --- Die Kennzahlen zaehlen sich sanft herein --- */
.stats .stat.reveal{
  transform:translateY(24px);
}

/* --- Galeriebilder: kurzer Weg, sonst wirkt es hektisch --- */
.gal-grid .gal-item.reveal{
  transform:translateY(28px) scale(.99);
}

/* ============================================================
   RUHIGE DARSTELLUNG

   Manche Menschen stellen im Betriebssystem ein, dass sie
   keine Bewegung sehen wollen. Bewegung kann Uebelkeit und
   Schwindel ausloesen. Das respektieren wir: Inhalte sind
   dann sofort da, ohne Animation.
   ============================================================ */

@media (prefers-reduced-motion: reduce){

  .reveal,
  .reveal-left,
  .reveal-right,
  .svc-grid .svc.reveal,
  .stats .stat.reveal,
  .gal-grid .gal-item.reveal{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
    transition-delay:0s !important;
  }

  .hero-slide{
    transition:none !important;
  }
}


/* ============================================================
   REVEAL-ABSICHERUNG FUER LANGE TEXTSEITEN

   Der Reveal-Effekt blendet Elemente erst ein, wenn sie ins
   Bild scrollen. Bei sehr langen Textbloecken (Datenschutz,
   Impressum) ist der Block aber vielfach hoeher als das
   Fenster. Der Ausloeser verlangt 15 Prozent Sichtbarkeit,
   die nie erreicht werden. Ergebnis: der Text bleibt auf
   opacity 0 stehen, also unsichtbar.

   Deshalb: Auf Textseiten wird der prose-Block IMMER sofort
   angezeigt, ohne auf den Ausloeser zu warten. Der sanfte
   Effekt bleibt auf der Startseite und den Galerien erhalten,
   wo die Bloecke ins Fenster passen.
   ============================================================ */

.page-sec .prose.reveal{
  opacity:1 !important;
  transform:none !important;
}

/* Die Unterkacheln einer Leistungs-Detailseite (Glasgestaltung,
   Weitere Leistungen) stehen weit unten nach einem langen Text.
   Damit sie nicht durch den Reveal-Effekt unsichtbar bleiben,
   werden sie hier ebenfalls sofort angezeigt. */
.page-sec .leist-grid .leist-card.reveal{
  opacity:1 !important;
  transform:none !important;
}


/* ============================================================
   COOKIE-BALKEN
   Erscheint unten, bis der Besucher entschieden hat.
   ============================================================ */

.cookie-bar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:9000;
  background:var(--ink-2);
  border-top:1px solid var(--gold);
  padding:1.6rem 2rem;
  transform:translateY(100%);
  transition:transform .45s cubic-bezier(.2,.7,.3,1);
}

.cookie-bar.sichtbar{
  transform:translateY(0);
}

.cb-inner{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2.5rem;
}

.cb-text strong{
  display:block;
  font-family:'Inter',system-ui,sans-serif;
  font-size:.72rem;
  font-weight:400;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:.5rem;
}

.cb-text p{
  margin:0;
  font-size:.88rem;
  font-weight:300;
  line-height:1.65;
  color:var(--cream-dim);
  max-width:70ch;
}

.cb-text a{
  color:var(--gold);
  text-decoration:none;
  border-bottom:1px solid rgba(201,162,74,.35);
  padding-bottom:1px;
  transition:border-color .25s ease;
}

.cb-text a:hover{
  border-bottom-color:var(--gold);
}

.cb-btns{
  display:flex;
  gap:.7rem;
  flex-shrink:0;
}

.cb-btn{
  background:transparent;
  border:1px solid rgba(239,233,220,.25);
  border-radius:0;
  color:var(--cream-dim);
  font-family:'Inter',system-ui,sans-serif;
  font-size:.72rem;
  font-weight:400;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:.85rem 1.6rem;
  cursor:pointer;
  white-space:nowrap;
  transition:border-color .25s ease, color .25s ease, background .25s ease;
}

.cb-btn:hover{
  border-color:var(--cream);
  color:var(--cream);
}

/* Der Zustimmen-Knopf, gold hervorgehoben */
.cb-btn.cb-ja{
  background:var(--gold);
  border-color:var(--gold);
  color:var(--ink);
  font-weight:500;
}

.cb-btn.cb-ja:hover{
  background:transparent;
  color:var(--gold);
}

@media(max-width:820px){
  .cookie-bar{
    padding:1.3rem 1.4rem;
  }
  .cb-inner{
    flex-direction:column;
    align-items:stretch;
    gap:1.2rem;
  }
  .cb-text p{
    font-size:.82rem;
  }
  .cb-btns{
    justify-content:stretch;
  }
  .cb-btn{
    flex:1;
    text-align:center;
    padding:.9rem 1rem;
  }
}


/* ============================================================
   AENDERUNGSWUENSCHE OIDTMANN (Stand aktuell)
   ============================================================ */

/* --- 1. Intro-Titel untereinander sauber zentriert ---
   Der Umbruch kommt aus header.php (aus " | " wird <br>).
   Hier sorgen wir fuer den passenden Zeilenabstand. */
.intro-gate .ig-title{
  line-height:1.15;
}
.intro-gate .ig-title br{
  display:block;
  content:"";
}

/* --- 2. Schriftarten generell etwas groesser --- */

/* Fliesstext (Grundschrift der Seite) */
body{
  font-size:1.07rem;
}

/* Menue oben (Hauptnavigation) */
.nav a{
  font-size:1.46rem;
}

/* Menue mobil (im ausklappbaren Menue) */
@media(max-width:980px){
  .nav a{
    font-size:1.5rem;
  }
}

/* Fliesstext in den Inhaltsbereichen etwas groesser */
.prose p,
.prose ul li{
  font-size:1.05rem;
}
.svc p,
.leist-body p{
  font-size:1rem;
}

/* --- Bessere Lesbarkeit: Fliesstext heller ---
   Der gedaempfte Beigeton war auf dem dunklen Hintergrund fuer
   aeltere Augen zu kontrastarm. Wir heben die Textfarbe in den
   Inhaltsbereichen auf das hellere Cream an und geben etwas
   mehr Zeilenabstand fuer angenehmeres Lesen. */
.prose p,
.prose ul li,
.prose ol li{
  color:var(--cream);
  line-height:1.8;
}
/* Auch die Kachel- und Timeline-Texte etwas heller */
.leist-body p,
.svc p,
.tl-item p,
.subhero .subhero-lede,
.sec-head .intro{
  color:var(--cream);
}
/* Die Aufzaehlungspunkte etwas heller, damit die Rauten und
   der Text zusammen gut sichtbar sind. */
.prose ul li::before,
.prose ul li::marker{
  color:var(--gold);
}

/* --- 3. Chronik: Bild-Oberkante auf Hoehe des NAMENS ---
   Bild und Text liegen nebeneinander. Der Text beginnt mit der
   Jahreszahl, darunter der Name. Das Bild soll nicht auf Hoehe
   der Jahreszahl starten, sondern auf Hoehe des Namens.
   Deshalb schieben wir das Bild um die Hoehe der Jahreszahl-
   Zeile nach unten. */
.tl-item{
  align-items:start;
}
.tl-item .portrait{
  margin-top:2.2rem;
}
/* Bei den von rechts kommenden Zeilen (Bild links) gilt dasselbe. */
.tl-item:nth-child(even) .portrait{
  margin-top:2.2rem;
}

/* --- 4. Raute exakt auf Hoehe der JAHRESZAHL zentrieren ---
   Die Jahreszahl ist die erste Zeile im Textblock. Ihre
   vertikale Mitte liegt bei etwa 0.9rem ab Oberkante (halbe
   Zeilenhoehe der 1.4rem grossen Schrift). Die Raute wird mit
   ihrer eigenen Mitte genau dorthin gesetzt. */
.tl-item::before{
  top:0.9rem;
  transform:translate(-50%,-50%) rotate(45deg);
}

/* Die Jahreszahl selbst ohne oberen Abstand, damit sie sauber
   an der Oberkante beginnt und die Raute daneben passt. */
.tl-item .yr{
  margin-top:0;
  line-height:1;
}

/* --- Breite Portraits (zwei Personen) groesser darstellen ---
   Die hochformatigen Portraits sind 230px breit, wirken durch
   ihre Hoehe aber groesser. Ein Querformat-Bild mit 230px wirkt
   dagegen klein. Wir geben breiten Portraits mehr Breite, damit
   sie gleichwertig neben den hochformatigen stehen. */
.tl-item .portrait.wide{
  max-width:340px;
  width:100%;
}
.tl-item .portrait.wide img{
  aspect-ratio:3 / 2;
  object-fit:cover;
}
/* Damit das breite Bild rechts buendig zum Strahl bleibt wie
   die anderen, die Ausrichtung beibehalten. */
.tl-item:nth-child(even) .portrait.wide{
  justify-self:start;
}

/* --- 5. Leistungs-Unterkacheln zentrieren ---
   Das Raster hat vier Spalten. Sind aber nur zwei oder drei
   Unterkacheln vorhanden (z. B. Restaurierung: Fenster und
   Mosaike), standen sie linksbuendig und wirkten unausgewogen.
   Wir stellen von starrem Raster auf einen zentrierten,
   umbrechenden Fluss um. Die Kachelbreite entspricht weiterhin
   einer Spalte des Vierer-Rasters, sodass volle Reihen genauso
   aussehen wie bisher, wenige Kacheln aber mittig stehen. */
.leist-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:1.4rem;
}
.leist-grid .leist-card{
  /* Breite einer Spalte im alten Vierer-Raster:
     (Gesamtbreite minus drei Zwischenraeume) geteilt durch vier */
  flex:0 1 calc((100% - 3 * 1.4rem) / 4);
  max-width:calc((100% - 3 * 1.4rem) / 4);
}

@media(max-width:1100px){
  /* Zweispaltig: Kachelbreite entspricht einer Spalte von zwei */
  .leist-grid .leist-card{
    flex-basis:calc((100% - 1.4rem) / 2);
    max-width:calc((100% - 1.4rem) / 2);
  }
}
@media(max-width:560px){
  /* Einspaltig: volle Breite */
  .leist-grid .leist-card{
    flex-basis:100%;
    max-width:100%;
  }
}


/* ============================================================
   AUSFUEHRLICHES KONTAKTFORMULAR (eigenes Formular)
   Anrede, Titel, Name, Adresse, Telefon, E-Mail, Betreff,
   Nachricht und Datei-Upload. Im Oidtmann-Design.
   ============================================================ */

.kf-form{
  margin-top:0;
  display:flex;
  flex-direction:column;
  gap:1.3rem;
}

/* Zeilen mit zwei Feldern nebeneinander */
.kf-reihe{
  display:grid;
  gap:1.3rem;
}
.kf-reihe-2{
  grid-template-columns:1fr 1fr;
}
/* Strasse breiter als Hausnummer */
.kf-reihe-strasse{
  grid-template-columns:3fr 1fr;
}
/* PLZ schmaler als Ort */
.kf-reihe-ort{
  grid-template-columns:1fr 2fr;
}

/* Einzelnes Feld (Label ueber dem Eingabefeld) */
.kf-feld{
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.kf-feld > span{
  font-family:'Inter',system-ui,sans-serif;
  font-size:.7rem;
  font-weight:400;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--cream-dim);
}
.kf-feld > span b{
  color:var(--gold);
  font-weight:400;
}

/* Eingabefelder, Auswahl und Textfeld */
.kf-form input[type=text],
.kf-form input[type=email],
.kf-form input[type=tel],
.kf-form select,
.kf-form textarea{
  width:100%;
  background:var(--ink-2);
  border:1px solid var(--lead);
  border-radius:2px;
  padding:.9rem 1.05rem;
  color:var(--cream);
  font-family:'Inter',system-ui,sans-serif;
  font-size:.95rem;
  font-weight:300;
  line-height:1.5;
  transition:border-color .25s ease, background .25s ease, box-shadow .25s ease;
  -webkit-appearance:none;
  appearance:none;
}

.kf-form textarea{
  min-height:150px;
  resize:vertical;
}

/* Auswahlfeld (Anrede) bekommt einen kleinen Pfeil */
.kf-form select{
  cursor:pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--gold) 50%),
    linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position:
    calc(100% - 20px) calc(1.15em),
    calc(100% - 15px) calc(1.15em);
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  padding-right:2.5rem;
}

.kf-form input::placeholder,
.kf-form textarea::placeholder{
  color:var(--muted);
  opacity:.7;
}

.kf-form input:focus,
.kf-form select:focus,
.kf-form textarea:focus{
  outline:none;
  border-color:var(--gold);
  background:var(--ink-3);
  box-shadow:0 0 0 3px rgba(201,162,74,.12);
}

/* Datei-Upload */
.kf-upload input[type=file]{
  width:100%;
  color:var(--cream-dim);
  font-family:'Inter',system-ui,sans-serif;
  font-size:.9rem;
  padding:.5rem 0;
}
.kf-upload input[type=file]::file-selector-button{
  background:transparent;
  border:1px solid var(--gold);
  border-radius:0;
  color:var(--gold);
  font-family:'Inter',system-ui,sans-serif;
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:.7rem 1.3rem;
  margin-right:1rem;
  cursor:pointer;
  transition:background .3s ease, color .3s ease;
}
.kf-upload input[type=file]::file-selector-button:hover{
  background:var(--gold);
  color:var(--ink);
}
.kf-upload small{
  color:var(--muted);
  font-size:.78rem;
  font-weight:300;
}

/* Absende-Knopf */
.kf-senden{
  align-self:flex-start;
  margin-top:.4rem;
  border:0;
  cursor:pointer;
}

.kf-hinweis{
  font-size:.8rem;
  color:var(--muted);
  margin:0;
}
.kf-hinweis b{
  color:var(--gold);
  font-weight:400;
}

/* Honeypot: fuer Menschen unsichtbar, nur fuer Bots sichtbar */
.kf-hp{
  position:absolute;
  left:-5000px;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* Erfolgsmeldung */
.kf-erfolg{
  background:var(--ink-3);
  border:1px solid var(--gold);
  border-radius:2px;
  padding:1.8rem 1.9rem;
}
.kf-erfolg strong{
  display:block;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.5rem;
  font-weight:500;
  color:var(--cream);
  margin-bottom:.6rem;
}
.kf-erfolg p{
  margin:0;
  color:var(--cream-dim);
  font-weight:300;
  line-height:1.7;
}

/* Fehlermeldung */
.kf-fehler{
  background:rgba(178,58,58,.12);
  border:1px solid rgba(178,58,58,.5);
  border-radius:2px;
  padding:1.2rem 1.4rem;
  margin-bottom:1.6rem;
}
.kf-fehler p{
  margin:0 0 .4rem;
  color:#e2a5a5;
  font-size:.9rem;
  font-weight:300;
}
.kf-fehler p:last-child{
  margin-bottom:0;
}

/* Auf schmalen Bildschirmen alles untereinander */
@media(max-width:640px){
  .kf-reihe-2,
  .kf-reihe-strasse,
  .kf-reihe-ort{
    grid-template-columns:1fr;
  }
  .kf-form input[type=text],
  .kf-form input[type=email],
  .kf-form input[type=tel],
  .kf-form select,
  .kf-form textarea{
    font-size:16px; /* verhindert das Hineinzoomen auf iPhones */
  }
  .kf-senden{
    width:100%;
    text-align:center;
  }
}


/* ============================================================
   FLUENT FORMS - Ergaenzung fuer die neuen Felder
   (Anrede-Auswahl, Telefon, Adresse, Datei-Upload)
   Damit das ausfuehrliche Formular sauber im Oidtmann-Design
   sitzt. Die Grundstile stehen in stil.css und weiter oben.
   ============================================================ */

/* Auswahlfelder (z. B. Anrede) wie die Textfelder gestalten */
.fluentform select,
.fluentform .ff-el-input--content select{
  width:100%;
  background:var(--ink-2) !important;
  border:1px solid var(--lead) !important;
  border-radius:2px !important;
  padding:.95rem 2.5rem .95rem 1.1rem !important;
  color:var(--cream) !important;
  font-family:'Inter',system-ui,sans-serif !important;
  font-size:.95rem !important;
  font-weight:300 !important;
  line-height:1.5 !important;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--gold) 50%),
    linear-gradient(135deg, var(--gold) 50%, transparent 50%) !important;
  background-position:
    calc(100% - 20px) calc(1.15em),
    calc(100% - 15px) calc(1.15em) !important;
  background-size:5px 5px, 5px 5px !important;
  background-repeat:no-repeat !important;
  transition:border-color .25s ease, background-color .25s ease;
}
.fluentform select:focus{
  outline:none;
  border-color:var(--gold) !important;
  background-color:var(--ink-3) !important;
}

/* Telefonfeld wie die anderen Textfelder */
.fluentform input[type=tel]{
  width:100%;
  background:var(--ink-2) !important;
  border:1px solid var(--lead) !important;
  border-radius:2px !important;
  padding:.95rem 1.1rem !important;
  color:var(--cream) !important;
  font-family:'Inter',system-ui,sans-serif !important;
  font-size:.95rem !important;
  font-weight:300 !important;
}
.fluentform input[type=tel]:focus{
  outline:none;
  border-color:var(--gold) !important;
  background:var(--ink-3) !important;
  box-shadow:0 0 0 3px rgba(201,162,74,.12) !important;
}

/* Zwei Felder nebeneinander (Fluent-Forms-Spalten) im
   Oidtmann-Abstand. Fluent Forms nutzt ff-el-group mit
   ff-t-cell fuer nebeneinanderliegende Felder. */
.fluentform .ff-el-group.ff-el-form-top .ff-t-container{
  gap:1.4rem;
}

/* Datei-Upload im Design */
.fluentform .ff-el-input--content input[type=file],
.fluentform input[type=file]{
  width:100%;
  color:var(--cream-dim) !important;
  font-family:'Inter',system-ui,sans-serif !important;
  font-size:.9rem !important;
  padding:.5rem 0 !important;
  background:transparent !important;
  border:0 !important;
}
.fluentform input[type=file]::file-selector-button{
  background:transparent;
  border:1px solid var(--gold);
  border-radius:0;
  color:var(--gold);
  font-family:'Inter',system-ui,sans-serif;
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:.7rem 1.3rem;
  margin-right:1rem;
  cursor:pointer;
  transition:background .3s ease, color .3s ease;
}
.fluentform input[type=file]::file-selector-button:hover{
  background:var(--gold);
  color:var(--ink);
}

/* Die Upload-Flaeche von Fluent Forms (Drag-and-drop-Feld) */
.fluentform .ff-upload-progress,
.fluentform .ff_upload_btn,
.fluentform .ff-el-file-upload .ff_upload_btn{
  background:transparent !important;
  border:1px solid var(--gold) !important;
  border-radius:0 !important;
  color:var(--gold) !important;
  font-family:'Inter',system-ui,sans-serif !important;
  font-size:.72rem !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  padding:.8rem 1.4rem !important;
  cursor:pointer;
  transition:background .3s ease, color .3s ease;
}
.fluentform .ff_upload_btn:hover{
  background:var(--gold) !important;
  color:var(--ink) !important;
}


/* ============================================================
   WERKE: FILTER-LEISTE
   ============================================================ */

.werk-filter{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.6rem;
  margin:0 0 3.5rem;
  padding:0 1rem;
}

.wf-btn{
  background:transparent;
  border:1px solid rgba(239,233,220,.18);
  border-radius:0;
  color:var(--cream-dim);
  font-family:'Inter',system-ui,sans-serif;
  font-size:.72rem;
  font-weight:300;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:.65rem 1.2rem;
  cursor:pointer;
  transition:border-color .25s ease, color .25s ease, background .25s ease;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  line-height:1;
}

.wf-btn:hover{
  border-color:var(--gold);
  color:var(--cream);
}

/* Der aktive Knopf */
.wf-btn.aktiv{
  border-color:var(--gold);
  background:var(--gold);
  color:var(--ink);
  font-weight:400;
}

/* Die kleine Zahl im Knopf */
.wf-zahl{
  font-size:.65rem;
  opacity:.6;
  letter-spacing:.05em;
}

.wf-btn.aktiv .wf-zahl{
  opacity:.75;
}

/* Bilder, die der Filter ausblendet */
.gal-item.wf-aus{
  display:none;
}

/* Meldung, wenn eine Kategorie leer ist */
.werk-leer{
  text-align:center;
  color:var(--muted);
  font-weight:300;
  padding:3rem 0;
}

@media(max-width:640px){
  .werk-filter{
    gap:.45rem;
    margin-bottom:2.5rem;
  }
  .wf-btn{
    font-size:.65rem;
    padding:.55rem .9rem;
    letter-spacing:.08em;
  }
}


/* ============================================================
   KONTAKTFORMULAR (Fluent Forms)
   Das Plugin bringt eigene Stile mit. Hier holen wir das
   Formular ins Oidtmann-Design zurueck.
   ============================================================ */

.fluentform{
  margin-top:2.5rem;
}

/* --- Abstand zwischen den Feldern --- */
.fluentform .ff-el-group{
  margin-bottom:1.5rem;
}

/* --- Beschriftungen --- */
.fluentform .ff-el-input--label label{
  font-family:'Inter',system-ui,sans-serif;
  font-size:.72rem;
  font-weight:400;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:.6rem;
  display:block;
}

/* Sternchen bei Pflichtfeldern in Gold */
.fluentform .ff-el-is-required.asterisk-right label:after{
  color:var(--gold);
  margin-left:.25rem;
}

/* --- Eingabefelder --- */
.fluentform input[type=text],
.fluentform input[type=email],
.fluentform input[type=tel],
.fluentform input[type=url],
.fluentform input[type=number],
.fluentform textarea,
.fluentform select{
  width:100%;
  background:var(--ink-3);
  border:1px solid rgba(239,233,220,.12);
  border-radius:0;
  padding:.95rem 1.1rem;
  color:var(--cream);
  font-family:'Inter',system-ui,sans-serif;
  font-size:.95rem;
  font-weight:300;
  line-height:1.6;
  transition:border-color .25s ease, background .25s ease;
  box-shadow:none;
  -webkit-appearance:none;
  appearance:none;
}

.fluentform textarea{
  min-height:150px;
  resize:vertical;
}

/* --- Platzhaltertext --- */
.fluentform input::placeholder,
.fluentform textarea::placeholder{
  color:var(--muted);
  opacity:.7;
}

/* --- Feld hat den Fokus --- */
.fluentform input[type=text]:focus,
.fluentform input[type=email]:focus,
.fluentform input[type=tel]:focus,
.fluentform input[type=url]:focus,
.fluentform input[type=number]:focus,
.fluentform textarea:focus,
.fluentform select:focus{
  outline:none;
  border-color:var(--gold);
  background:var(--ink-2);
}

/* --- Absende-Knopf --- */
.fluentform .ff-btn-submit,
.fluentform button[type=submit]{
  display:inline-block;
  background:var(--gold);
  color:var(--ink);
  border:1px solid var(--gold);
  border-radius:0;
  padding:1rem 2.4rem;
  font-family:'Inter',system-ui,sans-serif;
  font-size:.75rem;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .3s ease, color .3s ease;
  box-shadow:none;
  margin-top:.5rem;
}

.fluentform .ff-btn-submit:hover,
.fluentform button[type=submit]:hover{
  background:transparent;
  color:var(--gold);
}

/* --- Fehlermeldungen --- */
.fluentform .error,
.fluentform .text-danger,
.fluentform .ff-el-is-error .error{
  color:#d98a8a;
  font-size:.82rem;
  font-weight:300;
  margin-top:.4rem;
}

.fluentform .ff-el-is-error input,
.fluentform .ff-el-is-error textarea{
  border-color:#d98a8a;
}

/* --- Erfolgsmeldung nach dem Absenden --- */
.fluentform .ff-message-success,
.ff-message-success{
  background:var(--ink-3);
  border:1px solid var(--gold);
  border-radius:0;
  padding:1.6rem 1.8rem;
  color:var(--cream);
  font-weight:300;
  line-height:1.7;
}

.ff-message-success p{
  margin:0;
  color:var(--cream);
}

/* --- Ladeanzeige --- */
.fluentform .ff_submitting .ff-btn-submit{
  opacity:.6;
  cursor:wait;
}

/* --- Auf kleinen Bildschirmen --- */
@media(max-width:640px){
  .fluentform input[type=text],
  .fluentform input[type=email],
  .fluentform textarea{
    padding:.85rem 1rem;
    font-size:16px; /* verhindert das Hineinzoomen auf iPhones */
  }

  .fluentform .ff-btn-submit,
  .fluentform button[type=submit]{
    width:100%;
    text-align:center;
  }
}


/* ============================================================
   UEBER UNS: BILDBEREICHE
   Geschaeftsfuehrer-Foto, Gebaeude-Galerie, Archiv-Skizzen.
   ============================================================ */

/* --- Foto der Geschaeftsfuehrer --- */
.uu-gf{
  padding:1rem 0 4rem;
}
.uu-gf .wrap{
  max-width:1000px;
  margin:0 auto;
  padding:0 2rem;
}
.uu-gf-figur{
  margin:0;
}
.uu-gf-figur img{
  width:100%;
  height:auto;
  display:block;
  border:1px solid rgba(239,233,220,.1);
}
.uu-gf-figur figcaption{
  margin-top:1rem;
  text-align:center;
  font-family:'Inter',system-ui,sans-serif;
  font-size:.8rem;
  font-weight:300;
  letter-spacing:.05em;
  color:var(--cream-dim);
}

/* --- Gemeinsamer Block-Rahmen fuer Gebaeude und Archiv --- */
.uu-block{
  padding:4rem 0;
  border-top:1px solid rgba(239,233,220,.08);
}
.uu-block .wrap{
  max-width:1200px;
  margin:0 auto;
  padding:0 2rem;
}
.uu-block .sec-head{
  text-align:center;
  margin-bottom:2.8rem;
}
.uu-block .sec-head h2{
  font-size:2.2rem;
  margin:0 0 .8rem;
}
.uu-block .sec-head .intro{
  max-width:60ch;
  margin:0 auto;
  color:var(--cream);
  font-weight:300;
  line-height:1.7;
}

/* --- Gebaeude-Galerie --- */
.uu-galerie{
  display:grid;
  gap:1.4rem;
}
/* Drei Bilder nebeneinander */
.uu-galerie-3{
  grid-template-columns:repeat(3,1fr);
}
/* Zwei Bilder */
.uu-galerie-2{
  grid-template-columns:repeat(2,1fr);
}
/* Ein Bild: mittig, nicht ueber die volle Breite gezogen */
.uu-galerie-1{
  grid-template-columns:minmax(0, 720px);
  justify-content:center;
}
.uu-galerie figure{
  margin:0;
  overflow:hidden;
}
.uu-galerie img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  aspect-ratio:4 / 3;
  border:1px solid rgba(239,233,220,.1);
  transition:transform .6s cubic-bezier(.16,.8,.24,1);
}
.uu-galerie figure:hover img{
  transform:scale(1.04);
}

/* --- Archiv-Skizzen --- */
.uu-archiv-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:2.5rem;
  max-width:900px;
  margin:0 auto;
}
.uu-archiv-grid figure{
  margin:0;
}
.uu-archiv-grid img{
  width:100%;
  height:auto;
  display:block;
  border:1px solid rgba(239,233,220,.12);
  background:var(--ink-3);
}
.uu-archiv-grid figcaption{
  margin-top:.9rem;
  text-align:center;
  font-family:'Inter',system-ui,sans-serif;
  font-size:.8rem;
  font-weight:300;
  font-style:italic;
  color:var(--cream-dim);
  line-height:1.5;
}

/* --- Mobil --- */
@media(max-width:900px){
  .uu-galerie-3,
  .uu-galerie-2{
    grid-template-columns:1fr 1fr;
  }
}
@media(max-width:600px){
  .uu-galerie-3,
  .uu-galerie-2,
  .uu-galerie-1,
  .uu-archiv-grid{
    grid-template-columns:1fr;
  }
  .uu-block .sec-head h2{
    font-size:1.8rem;
  }
  .uu-archiv-grid{
    gap:2rem;
  }
}

/* --- Reveal-Animation fuer die Ueber-uns-Bereiche ---
   Die Bloecke sollen beim Hereinscrollen sanft aufsteigen.
   Das .in wird vom vorhandenen JavaScript gesetzt, sobald der
   Block ins Bild kommt. Grundzustand: unsichtbar, leicht tiefer
   und minimal kleiner. */
.uu-gf .wrap.reveal,
.uu-block .sec-head.reveal,
.uu-galerie.reveal,
.uu-archiv-grid.reveal{
  opacity:0;
  transform:translateY(42px) scale(.99);
  transition:
    opacity 1.1s cubic-bezier(.16,.8,.24,1),
    transform 1.1s cubic-bezier(.16,.8,.24,1);
  will-change:opacity, transform;
}
.uu-gf .wrap.reveal.in,
.uu-block .sec-head.reveal.in,
.uu-galerie.reveal.in,
.uu-archiv-grid.reveal.in{
  opacity:1;
  transform:translateY(0) scale(1);
}

/* Die einzelnen Bilder in den Galerien kommen leicht gestaffelt
   und einzeln herein, das wirkt lebendiger als ein Block. */
.uu-galerie.reveal figure,
.uu-archiv-grid.reveal figure{
  opacity:0;
  transform:translateY(26px) scale(.98);
  transition:
    opacity 1s cubic-bezier(.16,.8,.24,1),
    transform 1s cubic-bezier(.16,.8,.24,1);
}
.uu-galerie.reveal.in figure,
.uu-archiv-grid.reveal.in figure{
  opacity:1;
  transform:translateY(0) scale(1);
}
/* Staffelung: das zweite und dritte Bild kommen etwas spaeter */
.uu-galerie.reveal.in figure:nth-child(2),
.uu-archiv-grid.reveal.in figure:nth-child(2){
  transition-delay:.14s;
}
.uu-galerie.reveal.in figure:nth-child(3){
  transition-delay:.28s;
}

/* Das Geschaeftsfuehrer-Foto bekommt einen sanften Zoom beim
   Erscheinen. */
.uu-gf .wrap.reveal .uu-gf-figur img{
  transform:scale(1.03);
  transition:transform 1.4s cubic-bezier(.16,.8,.24,1);
}
.uu-gf .wrap.reveal.in .uu-gf-figur img{
  transform:scale(1);
}

@media(prefers-reduced-motion:reduce){
  .uu-gf .wrap.reveal,
  .uu-block .sec-head.reveal,
  .uu-galerie.reveal,
  .uu-archiv-grid.reveal,
  .uu-galerie.reveal figure,
  .uu-archiv-grid.reveal figure{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}


/* ============================================================
   EDLER GOLDENER SCHEIN + RAUTEN HINTER UEBERSCHRIFTEN
   Ein weicher, goldener Lichtschein hinter den Sektions-
   Ueberschriften, mit Weichzeichner, damit keine harte Kante
   sichtbar ist. Dazu je eine offene Raute links und rechts vom
   Titel. Gilt auf allen Seiten (alle .sec-head).
   ============================================================ */

.sec-head{
  position:relative;
  isolation:isolate;
}

/* Der weiche Lichtschein hinter dem Kopf.
   Mehrere Verlaufsstufen plus Weichzeichner loesen die Kante
   vollstaendig auf. */
.sec-head::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:640px;
  max-width:120%;
  height:340px;
  pointer-events:none;
  background:radial-gradient(
    ellipse 50% 50% at 50% 50%,
    rgba(201,162,74,.20),
    rgba(201,162,74,.10) 22%,
    rgba(201,162,74,.04) 48%,
    transparent 78%
  );
  filter:blur(22px);
}

/* Die Ueberschrift bekommt eine offene Raute links und rechts.
   Die Rauten sitzen als Pseudo-Elemente am h2 und werden ueber
   negative Aussenabstaende neben den Text gesetzt. */
.sec-head h2{
  position:relative;
  display:inline-block;
}
.sec-head h2::before,
.sec-head h2::after{
  content:"";
  position:absolute;
  top:50%;
  width:7px;
  height:7px;
  border:1px solid var(--gold);
  transform:translateY(-50%) rotate(45deg);
}
.sec-head h2::before{
  left:-1.8rem;
}
.sec-head h2::after{
  right:-1.8rem;
}

/* Auf schmalen Bildschirmen: Schein kleiner, Rauten enger,
   damit sie nicht ueber den Bildschirmrand ragen. */
@media(max-width:600px){
  .sec-head::before{
    width:100%;
    height:240px;
    filter:blur(18px);
  }
  .sec-head h2::before{
    left:-1.3rem;
  }
  .sec-head h2::after{
    right:-1.3rem;
  }
}

/* Sehr schmale Titel oder lange Ueberschriften: wenn die Rauten
   zu nah an den Rand kommen, lieber ausblenden. Greift, wenn
   der Titel fast die ganze Breite nutzt. */
@media(max-width:380px){
  .sec-head h2::before,
  .sec-head h2::after{
    display:none;
  }
}

/* ============================================================
   SUBHERO (grosse Titel ueber dem Bild): LESBARKEIT + RAUTEN
   Ueber Fotos kann die weisse Schrift je nach Bild schlecht
   lesbar sein. Loesung: ein dunkler, weicher Schein mittig
   hinter dem Text (Bildraender bleiben hell) plus ein dezenter
   Schatten an der Schrift. Dazu die gleichen Rauten wie bei den
   Abschnitts-Ueberschriften, damit es seitenweit einheitlich
   wirkt. KEIN goldener Schein hier, der braucht dunklen Grund.
   ============================================================ */

/* Dunkler Lese-Schein mittig hinter dem Text.
   Liegt ueber dem Bild (das Bild ist im ::after der stil.css
   mit z-index -1), aber unter dem Textinhalt. */
.subhero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:radial-gradient(
    ellipse 65% 55% at 50% 50%,
    rgba(20,24,26,.70),
    rgba(20,24,26,.30) 78%,
    transparent 100%
  );
}
/* Der Textinhalt liegt darueber */
.subhero .wrap{
  position:relative;
  z-index:1;
}

/* Schatten an der Schrift, damit sie auf jedem Bild steht */
.subhero h1{
  text-shadow:0 2px 18px rgba(0,0,0,.9);
}
.subhero .eyebrow{
  text-shadow:0 2px 12px rgba(0,0,0,.9);
}
.subhero .subhero-lede{
  color:var(--cream);
  text-shadow:0 2px 10px rgba(0,0,0,.9);
}

/* Hinweis: Bei den Subhero-Titeln stehen Label (eyebrow) und
   Titel in derselben Zeile. Deshalb bekommen sie KEINE Rauten
   (die sassen sonst zwischen Label und Titel). Die Rauten sind
   den Abschnitts-Ueberschriften (.sec-head) vorbehalten, wo der
   Aufbau dafuer passt. */

/* ============================================================
   KONTAKTSEITE: Einleitungstext mit Bereichs-Zeile
   "Sprechen Sie uns an" plus die drei Bereiche (sakral,
   oeffentlich, privat) als goldene Zeile mit Rauten.
   ============================================================ */

.prose .k-lede{
  text-align:center;
  max-width:52ch;
  margin:0 auto 1.6rem;
  color:var(--cream);
}

/* Die goldene Bereichs-Zeile */
.prose .k-bereiche{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:1.2rem;
  margin:0 auto;
}
.prose .k-bereiche span{
  font-family:'Inter',system-ui,sans-serif;
  font-size:.8rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold);
}
/* Die kleinen Rauten zwischen den Begriffen */
.prose .k-bereiche .k-raute{
  width:4px;
  height:4px;
  background:var(--gold);
  transform:rotate(45deg);
  display:inline-block;
  flex-shrink:0;
}

@media(max-width:480px){
  .prose .k-bereiche{
    gap:.9rem;
  }
  .prose .k-bereiche span{
    font-size:.72rem;
  }
}

/* ============================================================
   KONTAKTSEITE: Kunstwerk (Glasstele)
   Freigestelltes Bild unter den Kontaktdaten, schwebt frei
   mit weichem goldenem Schein dahinter. Bildunterschrift mit
   Kuenstlername darunter.
   ============================================================ */

.k-kunstwerk{
  margin:2.5rem 0 0;
  padding-top:2rem;
  border-top:1px solid rgba(239,233,220,.08);
  text-align:center;
  position:relative;
}
/* Weicher goldener Schein hinter dem Kunstwerk */
.k-kunstwerk::before{
  content:"";
  position:absolute;
  z-index:0;
  top:52%;
  left:50%;
  transform:translate(-50%,-50%);
  width:340px;
  max-width:120%;
  height:440px;
  pointer-events:none;
  background:radial-gradient(
    ellipse 45% 50% at 50% 45%,
    rgba(201,162,74,.16),
    rgba(201,162,74,.06) 40%,
    transparent 70%
  );
  filter:blur(24px);
}
.k-kunstwerk img{
  position:relative;
  z-index:1;
  display:block;
  margin:0 auto;
  max-width:230px;
  width:100%;
  height:auto;
  /* Sanfter Schatten, damit die Stele auf dem dunklen Grund
     Tiefe bekommt. */
  filter:drop-shadow(0 15px 40px rgba(0,0,0,.45));
}
.k-kunstwerk figcaption{
  position:relative;
  z-index:1;
  margin-top:1.4rem;
  font-family:'Inter',system-ui,sans-serif;
  font-size:.78rem;
  font-style:italic;
  font-weight:300;
  letter-spacing:.03em;
  color:var(--cream-dim);
  line-height:1.5;
}

/* ============================================================
   LEISTUNGEN: "So entsteht ein Glasfenster"
   Kleine Vorschau-Reihe der fuenf Collagen. Ein Klick zeigt
   die gewaehlte Collage gross in der Buehne darueber. Haelt
   die Seite ruhig und gibt bei Interesse den Detailblick.
   ============================================================ */

.handwerk-sec{
  margin:4.5rem 0 1rem;
  padding-top:3.5rem;
  border-top:1px solid rgba(239,233,220,.08);
}
.handwerk-sec .sec-head{
  text-align:center;
  margin-bottom:3rem;
}

.handwerk-viewer{
  max-width:620px;
  margin:0 auto;
}

/* --- Grosse Buehne (aktuell gewaehlter Schritt) --- */
.handwerk-buehne{
  text-align:center;
  margin-bottom:2.2rem;
}
.handwerk-buehne img{
  display:block;
  width:100%;
  max-width:460px;
  height:auto;
  margin:0 auto;
  filter:drop-shadow(0 14px 34px rgba(0,0,0,.42));
  /* Sanftes Einblenden beim Wechsel */
  animation:handwerkFade .4s ease;
}
@keyframes handwerkFade{
  from{ opacity:0; transform:scale(.98); }
  to{ opacity:1; transform:scale(1); }
}
.handwerk-buehne-titel{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:.7rem;
  margin-top:1.4rem;
}
.handwerk-buehne-no{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:2rem;
  font-style:italic;
  line-height:1;
  color:var(--gold);
}
#handwerk-gross-titel{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.6rem;
  color:var(--cream);
}

/* --- Kleine Vorschau-Reihe --- */
.handwerk-thumbs{
  display:flex;
  justify-content:center;
  gap:1rem;
  flex-wrap:wrap;
}
.handwerk-thumb{
  background:none;
  border:none;
  padding:0;
  margin:0;
  cursor:pointer;
  text-align:center;
  width:96px;
  transition:transform .3s cubic-bezier(.16,.8,.24,1);
}
.handwerk-thumb img{
  display:block;
  width:80px;
  height:80px;
  object-fit:contain;
  margin:0 auto .5rem;
  opacity:.55;
  transition:opacity .3s ease, filter .3s ease;
  filter:grayscale(.3);
}
.handwerk-thumb-label{
  display:block;
  font-family:'Inter',system-ui,sans-serif;
  font-size:.7rem;
  letter-spacing:.02em;
  color:var(--muted);
  line-height:1.3;
  transition:color .3s ease;
}
/* Hover und aktiver Zustand */
.handwerk-thumb:hover img{
  opacity:.85;
  filter:grayscale(0);
}
.handwerk-thumb:hover{
  transform:translateY(-3px);
}
.handwerk-thumb.aktiv img{
  opacity:1;
  filter:grayscale(0);
}
.handwerk-thumb.aktiv .handwerk-thumb-label{
  color:var(--gold);
}

/* --- Mobil --- */
@media(max-width:520px){
  .handwerk-thumb{
    width:72px;
  }
  .handwerk-thumb img{
    width:60px;
    height:60px;
  }
  .handwerk-thumb-label{
    font-size:.62rem;
  }
  #handwerk-gross-titel{ font-size:1.4rem; }
}

/* ============================================================
   FOOTER: WAPPEN
   Das freigestellte Firmenwappen ueber dem Logo in der ersten
   Footer-Spalte. Dezent, als Traditionszeichen auf jeder Seite.
   ============================================================ */

.foot-marke .foot-wappen{
  display:block;
  width:auto;
  height:72px;
  margin:0 0 1.2rem;
  /* Falls das Wappen dunkle Bereiche hat, sorgt ein leichter
     heller Schein fuer Kontrast auf dem dunklen Footer. */
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.35));
}

/* ============================================================
   KONTAKTFORMULAR (Eigenbau)
   Dunkle Felder, Gold-Akzent beim Fokus, passend zum Design.
   ============================================================ */

.kf-form{
  display:flex;
  flex-direction:column;
  gap:1.3rem;
}

/* Zwei Felder nebeneinander */
.kf-reihe{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.3rem;
}
/* Strasse breit, Hausnummer schmal (und PLZ/Ort umgekehrt) */
.kf-reihe .kf-breit{ }
.kf-reihe .kf-schmal{ }
.kf-reihe:has(.kf-breit) {
  grid-template-columns:3fr 1fr;
}
.kf-reihe:has(.kf-schmal):not(:has(.kf-breit)){
  grid-template-columns:1fr 1fr;
}

.kf-feld{
  display:flex;
  flex-direction:column;
  gap:.45rem;
}

.kf-feld label{
  font-family:'Inter',system-ui,sans-serif;
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}
.kf-stern{
  color:var(--gold);
}

/* Eingabefelder */
.kf-form input[type="text"],
.kf-form input[type="email"],
.kf-form input[type="tel"],
.kf-form select,
.kf-form textarea{
  width:100%;
  background:var(--ink-2);
  border:1px solid var(--lead);
  border-radius:3px;
  padding:.85rem 1rem;
  font-family:'Inter',system-ui,sans-serif;
  font-size:.95rem;
  font-weight:300;
  color:var(--cream);
  transition:border-color .3s ease, box-shadow .3s ease;
}
.kf-form input::placeholder,
.kf-form textarea::placeholder{
  color:var(--muted);
  opacity:.7;
}
.kf-form select{
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23c9a24a' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1rem center;
  background-size:.7rem;
  padding-right:2.4rem;
  cursor:pointer;
}
.kf-form textarea{
  resize:vertical;
  min-height:140px;
  line-height:1.6;
}

/* Fokus: goldener Rand */
.kf-form input:focus,
.kf-form select:focus,
.kf-form textarea:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 1px rgba(201,162,74,.35);
}

/* Datei-Upload: echter Input versteckt, eigener Knopf davor */
.kf-upload-box{
  display:flex;
  align-items:center;
  gap:1rem;
  background:var(--ink-2);
  border:1px dashed var(--lead);
  border-radius:3px;
  padding:.7rem .9rem;
}
/* Der echte Datei-Input wird ausgeblendet, aber bleibt
   funktionsfaehig (das Label oeffnet ihn). */
.kf-upload-box input[type="file"]{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
}
.kf-upload-btn{
  flex-shrink:0;
  font-family:'Inter',system-ui,sans-serif;
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gold);
  background:transparent;
  border:1px solid var(--gold);
  border-radius:3px;
  padding:.55rem 1.1rem;
  cursor:pointer;
  transition:background .3s ease, color .3s ease;
}
.kf-upload-btn:hover{
  background:var(--gold);
  color:var(--ink);
}
.kf-upload-name{
  font-family:'Inter',system-ui,sans-serif;
  font-size:.85rem;
  color:var(--cream-dim);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.kf-upload-hint{
  font-family:'Inter',system-ui,sans-serif;
  font-size:.72rem;
  color:var(--muted);
  margin-top:.15rem;
}

/* Honeypot komplett verstecken */
.kf-hp{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* Absende-Knopf */
.kf-senden{
  align-self:flex-start;
  margin-top:.5rem;
  background:var(--gold);
  color:var(--ink);
  border:1px solid var(--gold);
  border-radius:3px;
  font-family:'Inter',system-ui,sans-serif;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:.95rem 2.2rem;
  cursor:pointer;
  transition:background .3s ease, color .3s ease;
}
.kf-senden:hover{
  background:transparent;
  color:var(--gold);
}

/* Danke- und Fehlermeldung */
.kf-danke{
  background:var(--ink-2);
  border:1px solid rgba(201,162,74,.3);
  border-radius:6px;
  padding:2.5rem 2rem;
  text-align:center;
}
.kf-danke h3{
  color:var(--gold);
  font-size:1.6rem;
  margin:0 0 .8rem;
}
.kf-danke p{
  color:var(--cream-dim);
  margin:0;
}
.kf-fehler{
  display:flex;
  flex-direction:column;
  gap:.3rem;
  background:rgba(150,60,50,.14);
  border:1px solid rgba(180,80,70,.4);
  border-radius:5px;
  padding:1rem 1.2rem;
  margin-bottom:1.5rem;
}
.kf-fehler strong{
  color:#e8b4ac;
  font-family:'Inter',system-ui,sans-serif;
  font-size:.9rem;
}
.kf-fehler span{
  color:var(--cream-dim);
  font-family:'Inter',system-ui,sans-serif;
  font-size:.85rem;
}

/* Mobil: Felder untereinander */
@media(max-width:600px){
  .kf-reihe,
  .kf-reihe:has(.kf-breit),
  .kf-reihe:has(.kf-schmal):not(:has(.kf-breit)){
    grid-template-columns:1fr;
  }
}