/* Version 1.5.37 – Dackel im Kontaktbereich und Kennzeichnung von KI-Inhalten */

/* ------------------------------------------------------------------
   Dackel im Kontaktbereich der Startseite
   Steht unter den Kontaktdaten und füllt die freie Fläche neben dem
   Formular. Der Schlagschatten hebt ihn vom dunklen Grün ab.
   ------------------------------------------------------------------ */
.contact-dog{
  display:flex;
  justify-content:flex-end;
  margin:44px 0 0;
}
.contact-dog img{
  width:min(300px,92%);
  height:auto;
  filter:drop-shadow(0 26px 34px rgba(0,0,0,.38));
}

@media(max-width:1150px){
  .contact-dog{justify-content:flex-start;margin-top:38px}
  .contact-dog img{width:min(300px,52%)}
}

@media(max-width:760px){
  .contact-dog{justify-content:center;margin-top:34px}
  .contact-dog img{width:min(260px,64%)}
}

/* ------------------------------------------------------------------
   Kennzeichnung von Inhalten, die mit künstlicher Intelligenz erstellt
   oder bearbeitet wurden (Artikel 50 der KI-Verordnung).

   Sichtbar ist zunächst nur ein kleines Zeichen „KI" in der Bildecke.
   Der vollständige Satz klappt bei Mausberührung, bei Fingertipp und bei
   Tastaturfokus aus. Er steht dauerhaft im Dokument und wird deshalb auch
   von Vorlesewerkzeugen erfasst, unabhängig vom Ausklappen.

   Das Zeichen liegt bewusst auf dem Bild und nicht darunter: Die
   Bildflächen der Seitenköpfe sind auf volle Höhe gesetzt und schneiden
   nachfolgende Elemente ab. So bleibt die Kennzeichnung mit dem Bild
   verbunden, auch wenn es geteilt oder abfotografiert wird.
   ------------------------------------------------------------------ */
/* Die Schaltfläche selbst ist unsichtbar und erfüllt mit 44 mal 44 Pixeln
   die Mindestgröße für Klickflächen aus der Barrierefreiheitsregel.
   Sichtbar ist nur die kleine Marke darin. */
.ki-hinweis{
  position:absolute;
  left:14px;
  bottom:3px;
  z-index:4;
  margin:0;
  padding:0;
  border:0;
  background:none;
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  max-width:calc(100% - 28px);
  font-family:inherit;
  line-height:1;
  cursor:pointer;
}
.ki-hinweis:focus-visible{
  outline:2px solid #f4efe5;
  outline-offset:3px;
  border-radius:999px;
}
.ki-pille{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  background:rgba(27,41,34,.6);
  color:#f4efe5;
  transition:background .25s ease;
}
.ki-pille b{
  flex:none;
  padding:6px 9px;
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.1em;
}
.ki-pille>span{
  max-width:0;
  padding:0;
  overflow:hidden;
  white-space:nowrap;
  font-size:.7rem;
  font-weight:600;
  text-align:left;
  transition:max-width .45s ease,padding .45s ease;
}
.ki-hinweis:hover .ki-pille{background:rgba(27,41,34,.85)}

/* Der Satz erscheint erst nach einem Klick oder Tastendruck. */
.ki-hinweis[aria-expanded="true"] .ki-pille{background:rgba(27,41,34,.92)}
.ki-hinweis[aria-expanded="true"] .ki-pille>span{
  max-width:36ch;
  padding:0 12px 0 1px;
}

@media(prefers-reduced-motion:reduce){
  .ki-pille>span{transition:none}
}

@media(max-width:560px){
  .ki-hinweis{left:11px}
  .ki-pille b{padding:5px 8px;font-size:.58rem}
  .ki-pille>span{font-size:.64rem}
  .ki-hinweis[aria-expanded="true"] .ki-pille>span{max-width:24ch}
}