/* klangstatt-kern — bewusste Abweichungen vom Drupal-Original (Wünsche von Foerb/Kunde).
   Alles andere bleibt exakt wie in klangstatt.css. */

/* 22.10.2026: Lange Adressen (Links und als Text geschriebene URLs, z. B. in der Datenschutzerklärung)
   brechen um, statt die Seite auf dem Handy seitlich verschiebbar zu machen. break-word bricht nur,
   wenn ein Wort sonst überlaufen würde – der übrige Zeilenfall bleibt wie im Original. */
.pages-body,
.main-content .field--name-body {
  overflow-wrap: break-word;
}

/* 22.10.2026: Zwei Strukturpflug-Auszeichnungen in der Fußzeile (statt eines großen Siegels) –
   kleinere Siegel nebeneinander, Beschriftung in PT Serif kursiv wie die Chat-Zitate. */
.kk-auszeichnungen { text-align: center; padding: 0 15px 10px; }
.kk-auszeichnungen-titel {
  font-family: 'PT Serif', serif;
  font-size: 16px;
  color: #232323;
  margin: 0 0 18px;
}
.kk-auszeichnungen-titel a { color: #a95050; text-decoration: none; }
.kk-auszeichnungen-titel a:hover { color: #7b3232; }
.kk-auszeichnungen-liste,
.kk-auszeichnungen-liste > .wp-block-group__inner-container { /* Block-Gruppe aus dem Element „Fuß: Auszeichnungen“ */
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 10px; /* 22.10.2026 enger: Siegel 70px auseinander */
}
figure.kk-auszeichnung { margin: 0; width: 200px; }
.kk-auszeichnung img {
  display: block;
  margin: 0 auto;
  width: 140px;
  height: auto;
  transition: transform ease-in 0.2s;
}
.kk-auszeichnung a:hover img { transform: scale(1.05); }
.kk-auszeichnung figcaption {
  margin-top: 10px;
  font-family: 'PT Serif', serif;
  font-style: italic;
  font-size: 15px;
  line-height: 1.3;
  color: #5d5d5d;
}
@media (max-width: 400px) {
  .kk-auszeichnungen-liste,
  .kk-auszeichnungen-liste > .wp-block-group__inner-container { gap: 16px; }
  figure.kk-auszeichnung { width: 150px; }
  .kk-auszeichnung img { width: 120px; }
}

/* 22.10.2026: Sprachwahl „en de“ (GTranslate, Widget lang_codes) nach dem Vorbild floriankontny.de –
   am Computer rechts neben „kontakt“, auf dem Handy neben dem Menüknopf; Schrift wie das Menü,
   Farbe = Linkfarbe der Seite, aktive Sprache fett. */
.kk-sprache .gtranslate_wrapper { display: inline; }
.kk-sprache a.glink {
  font-family: 'PT Serif', serif;
  font-size: 14px;
  line-height: 20px;
  text-transform: lowercase;
  color: #a95050;
  text-decoration: none;
  transition: all ease-in 0.2s;
}
.kk-sprache a.glink:hover { color: #7b3232; }
.kk-sprache a.gt-current-lang { font-weight: 700; }
@media (min-width: 768px) {
  .kk-sprache.hidden-xs { float: left; padding: 15px 15px 15px 0; }
}
@media (max-width: 767px) {
  .kk-sprache.visible-xs { float: right; padding: 15px 8px 15px 0; margin-top: 0; }
}

/* 22.10.2026: Linie über „datenschutzerklärung impressum“ wie über den Auszeichnungen (Farbe/Breite der Leistungen-Linie) */
div#block-klangstatt-2020-footer {
  /* !important gegen „.footer .navbar-default{border:none !important}“ aus klangstatt.css */
  border-top: 1px solid #e5e5e5 !important;
  /* Linie mittig zwischen Auszeichnungen und Links (je 23px) */
  margin: 13px 0 0 0;
  padding-top: 7px;
}
@media (max-width: 767px) {
  /* untereinander stehende Links haben mehr Innenabstand – je 25/24px */
  div#block-klangstatt-2020-footer { margin-top: 15px; padding-top: 5px; }
}

/* 23.10.2026: Kein Fokusrahmen beim Anklicken (Bootstrap 3 setzt „a:focus{outline:…}“ auch für Mausklicks).
   Mit der Tastatur (Tab) bleibt der Rahmen sichtbar – :focus-visible unterscheidet beides. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
.btn:focus:not(:focus-visible) {
  outline: none;
}

/* 22.10.2026: Angemeldet – der fixierte Kopf rückt unter die WordPress-Admin-Leiste, damit das Menü bedienbar bleibt.
   Nur betrifft Konten mit Admin-Leiste; unter 768px ist der Kopf ohnehin nicht fixiert. */
body.admin-bar .top-bar { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .top-bar { top: 46px; }
}

/* 23.10.2026: freundlicheres Kontaktformular – zuerst Entwurf (Seitenart „kontakt-entwurf“), seit 1.3.0 das echte
   Formular der Seitenart „kontakt“ (inc/kontakt.php kk_kontaktblock). */
.kk-kf {
  max-width: 760px;
  margin: 0 auto 40px;
  padding: 0 15px;
  text-align: left;
  color: #232323;
}
.kk-kf-kopf { text-align: center; margin-bottom: 30px; }
.kk-kf-titel {
  font-family: 'PT Serif', serif;
  font-style: italic;
  font-size: 28px;
  font-weight: 400;
  margin: 0 0 10px;
}
.kk-kf-intro { font-family: 'Hind', sans-serif; font-weight: 300; font-size: 16px; margin: 0; color: #5d5d5d; }

.kk-kf-formular {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  box-shadow: 2px 2px 10px 1px #00000014; /* Schatten der Kopfleiste */
  padding: 30px;
}
.kk-kf-reihe { display: flex; gap: 20px; }
.kk-kf-reihe > .kk-kf-feld { flex: 1; }
.kk-kf-feld { margin-bottom: 20px; }
.kk-kf-feld label,
.kk-kf-frage label {
  display: block;
  font-family: 'Hind', sans-serif;
  font-weight: 500;
  font-size: 15px;
  margin-bottom: 6px;
}
.kk-kf input[type="text"],
.kk-kf input[type="email"],
.kk-kf input[type="number"],
.kk-kf textarea {
  display: block;
  width: 100%;
  font-family: 'Hind', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #232323;
  background: #fafafa;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 11px 14px;
  transition: border-color ease-in 0.2s, box-shadow ease-in 0.2s, background ease-in 0.2s;
}
.kk-kf textarea { resize: vertical; min-height: 160px; line-height: 1.5; }
/* Sprungziel nach dem Absenden: Abstand zur festen Menüleiste (.top-bar), damit die Meldung nicht darunter liegt */
#block-contactblock { scroll-margin-top: 110px; }
.kk-kf-meldungen { margin-bottom: 20px; }
/* Fehler nach dem Absenden: rote Kante am Feld (die Meldung steht im Formularbereich über dem Formular) */
.kk-kf-fehler input,
.kk-kf-fehler textarea { border-color: #a94442; }
.kk-kf-haken.kk-kf-fehler span,
.kk-kf-frage.kk-kf-fehler label { color: #a94442; }
.kk-kf input::placeholder,
.kk-kf textarea::placeholder { color: #a0a0a0; font-weight: 300; }
.kk-kf input:focus,
.kk-kf textarea:focus {
  outline: none;
  background: #fff;
  border-color: #a95050;
  box-shadow: 0 0 0 3px rgba(169, 80, 80, 0.15);
}

.kk-kf-unten {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding-top: 5px;
}
.kk-kf-haken {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: 'Hind', sans-serif;
  font-weight: 300;
  font-size: 15px;
  cursor: pointer;
  margin: 0;
  max-width: 340px;
}
.kk-kf-haken input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: #a95050; flex: none; }
.kk-kf-frage { flex: none; text-align: right; }
.kk-kf-frage input { margin-left: auto; }
.kk-kf-frage label { font-weight: 300; }
.kk-kf input[type="number"] { width: 90px; }

.kk-kf-senden {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 25px;
  padding-top: 25px;
  border-top: 1px solid #e5e5e5;
}
.kk-kf-knopf { /* Fläche wie .buttonkontakt (Anfrage-Knopf) */
  font-family: 'PT Serif', serif;
  font-size: 17px;
  color: #000;
  background: #f4cbb2;
  border: 1px solid #6c757d;
  border-radius: 5px;
  padding: 9px 22px;
  cursor: pointer;
  transition: background ease-in 0.2s, transform ease-in 0.2s;
}
.kk-kf-knopf:hover { background: #c79c82; }
.kk-kf-knopf:active { transform: translateY(1px); }
.kk-kf-knopf i { margin-right: 6px; }
.kk-kf-pflicht { font-family: 'Hind', sans-serif; font-weight: 300; font-size: 13px; color: #5d5d5d; }

@media (max-width: 767px) {
  .kk-kf-formular { padding: 20px; }
  .kk-kf-reihe,
  .kk-kf-unten,
  .kk-kf-senden { flex-direction: column; align-items: stretch; gap: 0; }
  .kk-kf-frage { margin-top: 20px; text-align: left; }
  .kk-kf-frage input { margin-left: 0; }
  .kk-kf-knopf { width: 100%; }
  .kk-kf-pflicht { margin-top: 10px; text-align: center; }
}
.kk-kf-hinweis { margin: 15px 0 0; font-family: 'Hind', sans-serif; font-weight: 300; font-size: 15px; color: #a95050; }