@font-face {
  font-display: swap;
  font-family: "piq-forum";
  src: url("../fonts/forum-400.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "piq-questrial";
  src: url("../fonts/questrial-400.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "piq-script";
  src: url("../fonts/dancing-script-400.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "piq-caudex";
  src: url("../fonts/caudex-400.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "piq-caveat";
  src: url("../fonts/caveat-400.woff2") format("woff2");
}

/* Nur auf /kiosk/: die pinke Zeile "Der neue InklusionsKiosk" */
@font-face {
  font-display: swap;
  font-family: "piq-josefin";
  font-weight: 700;
  src: url("../fonts/josefin-sans-700.woff2") format("woff2");
}

/*
 * Ersatz fuer Avenir LT W01 85 Heavy.
 *
 * Die Vorlage setzt einzelne grosse Ueberschriften in Avenir. Die gehoert
 * Monotype; Wix lizenziert sie fuer seine Kunden, diese Lizenz deckt eine
 * eigene WordPress-Installation nicht ab. Nunito Sans ExtraBold ist der
 * gebraeuchliche freie Ersatz - gleiche geometrisch-humanistische Anmutung,
 * SIL Open Font License. Siehe docs/unterseiten-vermessung.md.
 */
@font-face {
  font-display: swap;
  font-family: "piq-nunito";
  font-weight: 800;
  src: url("../fonts/nunito-sans-800.woff2") format("woff2");
}

/* Ersatz fuer Avenir LT W01 35 Light - grosse Ueberschriften der Unterseiten */
@font-face {
  font-display: swap;
  font-family: "piq-nunito";
  font-weight: 300;
  src: url("../fonts/nunito-sans-300.woff2") format("woff2");
}

:root {
  --piq-blue: #486573;
  --piq-blue-soft: #b6c8d0;
  --piq-cream: #f4eee9;
  --piq-paper: #fffaf6;
  --piq-panel: #efe4df;
  --piq-text: #314346;
  --piq-muted: #6b7678;
  --piq-sand: #d8c2b5;
  --piq-line: #ded7d1;
  --piq-green: #26d448;
}

html {
  scroll-behavior: smooth;
}

/*
 * Grundschrift ist Forum, nicht Questrial.
 *
 * Am echten Original nachgemessen (docs/typografie-original.md): Wix laedt
 * dort eine hochgeladene Fassung von Forum und nennt Questrial nur als
 * Ersatznamen im Schriftstapel. Der Nachbau hatte den Ersatznamen fuer die
 * echte Schrift gehalten.
 *
 * Das erklaert auch, warum der Fliesstext gedrungener wirkte: der
 * Zeilenabstand stimmt mit 22px, aber Questrial hat eine groessere x-Hoehe
 * als Forum und fuellt die Zeile dadurch staerker aus.
 */
body {
  background: var(--piq-cream);
  color: var(--piq-text);
  font-family: "piq-forum", Georgia, "Times New Roman", serif;
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}

a {
  color: inherit;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #caa36d;
  outline-offset: 2px;
}

.skip-link {
  background: var(--piq-blue);
  color: #fff;
  left: 1rem;
  padding: 0.75rem 1rem;
  position: fixed;
  top: -5rem;
  z-index: 200;
}

.skip-link:focus {
  top: 1rem;
}

.site-header {
  background: transparent;
  box-shadow: none;
  left: 0;
  min-height: 193px;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 100;
}

.site-header__nav {
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.26);
  margin-left: 80px;
  min-height: 136px;
  position: relative;
  width: calc(100% - 80px);
}

.brand-mark {
  display: inline-flex;
  left: 20px;
  position: absolute;
  top: 20px;
}

.brand-mark img {
  display: block;
  height: 98px;
  object-fit: cover;
  width: 274px;
}

.header-nav {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  height: 50px;
  justify-content: flex-start;
  left: auto;
  overflow: visible;
  position: absolute;
  right: 86px;
  top: 54px;
  width: auto;
}

.header-nav a {
  color: #22495a;
  font-family: "piq-forum", Georgia, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 50px;
  padding: 0 10px;
  text-decoration: none;
  white-space: nowrap;
}

.header-nav a:hover,
.header-nav a:focus {
  text-decoration: underline;
}

.site-header__bar {
  align-items: stretch;
  color: #fff;
  display: grid;
  font-family: "piq-questrial", Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 400;
  grid-template-columns: 650px 330px;
  letter-spacing: 0;
  margin: 0 auto;
  min-height: 57px;
  position: relative;
  text-align: center;
  width: 980px;
  z-index: 2;
}

.site-header__bar span,
.site-header__bar a {
  align-items: center;
  display: flex;
  justify-content: center;
  line-height: 1;
}

.site-header__bar span {
  background: var(--piq-blue);
  box-sizing: border-box;
  justify-content: flex-start;
  padding-left: 31px;
}

.site-header__bar a {
  background: var(--piq-blue-soft);
  box-sizing: border-box;
  justify-content: flex-start;
  padding-left: 25px;
  text-decoration: none;
}

.main-shell {
  margin-block-start: 0 !important;
  max-width: none !important;
  overflow-x: clip;
  padding-top: 0;
  position: relative;
  width: 100%;
}

/*
 * ".beitrag-flaeche" ist ausgenommen.
 *
 * Diese Regel hebt die Breitenbegrenzung fuer die Abschnitte der Startseite
 * auf, die ueber die volle Breite laufen. Die Flaeche der Beitragsseite ist
 * dagegen bewusst 980 breit - ohne die Ausnahme lief sie ebenfalls ueber die
 * ganze Seite, weil das "!important" hier jede eigene Angabe ueberstimmt.
 */
.main-shell > :where(:not(.alignleft):not(.alignright):not(.alignfull):not(.beitrag-flaeche)) {
  margin-block-start: 0;
  max-width: none !important;
}

#main > section:not(.hero-care) {
  position: relative;
  z-index: 2;
}

#main > .founder-section,
#main > .quote-section,
#main > .local-contact,
#main > .faces-section,
#main > .locations-original {
  background: var(--piq-cream);
}

#main > .contact-card {
  background: #fff;
}

#main > section.founder-section {
  z-index: 3;
}

#main > section.quote-section {
  z-index: 2;
}

.button-link,
.wpcf7-submit {
  background: var(--piq-blue);
  border: 0;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  justify-content: center;
  min-height: 38px;
  padding: 0.8rem 1.2rem;
  text-decoration: none;
}

.hero-care {
  background: #fff;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 1191px;
  position: relative;
  z-index: 1;
}

.hero-care__video {
  background: #d8d8d8;
  min-height: 1191px;
  overflow: hidden;
  position: relative;
}

.hero-care__video video {
  display: block;
  height: 100vh;
  left: 0;
  object-fit: cover;
  object-position: center;
  position: fixed;
  top: 0;
  width: 50vw;
  z-index: 0;
}

.hero-care__video::after {
  background-image: url("../img/wix-diagonal-lines.png");
  background-repeat: repeat;
  content: "";
  height: 100vh;
  left: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  width: 50vw;
  z-index: 1;
}

.hero-care__copy {
  align-self: start;
  justify-self: center;
  max-width: 491px;
  padding: 312px 0 56px;
  position: relative;
  z-index: 2;
}

.hero-care h1 {
  color: #47626c;
  font-family: "piq-script", Georgia, "Times New Roman", serif;
  font-size: 40px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.2;
  margin: 0 0 26px;
}

.hero-care p {
  color: #516064;
  font-family: "piq-forum", Georgia, "Times New Roman", serif;
  font-size: 20px;
  line-height: 1.2;
  margin: 0 0 16px;
}

.hero-care .hero-ukraine-note {
  color: #687393;
}

/*
 * Unten mehr Luft als oben.
 *
 * Die Beschriftung "NEU: WHATSAPP" haengt unter dem runden Knopf und ragt
 * damit aus diesem Block heraus. Ohne den zusaetzlichen Abstand lief die
 * naechste Zeile ("Sie koennen uns auch schreiben") genau dort hindurch. Die
 * Vorlage hat an dieser Stelle ebenfalls freien Raum.
 */
.hero-contact {
  align-items: center;
  display: flex;
  gap: 18px;
  margin: 20px 0 52px;
}

/*
 * Groessen am Original nachgemessen: die Zeile "Bitte rufen Sie uns an:"
 * steht dort in 22px fett, die Rufnummer in 26px fett, beides in #22495a.
 * Der uebernommene Stand hatte 20px und 22px in einem helleren Blaugrau.
 */
.hero-contact p {
  color: #22495a;
  font-family: "piq-forum", Georgia, "Times New Roman", serif;
  font-size: 22px;
  font-weight: 700;
  margin: 0;
}

.hero-contact a:not(.whatsapp-pill) {
  color: #22495a;
  font-size: 26px;
  font-weight: 700;
  text-decoration: none;
}

.whatsapp-pill {
  align-items: center;
  background: #3dbd2c url("../img/whatsapp.svg?ver=0.1.35") center / 68px 68px no-repeat;
  border-radius: 200px;
  color: transparent;
  display: inline-flex;
  font-size: 0;
  height: 89px;
  justify-content: center;
  text-decoration: none;
  width: 86px;
}

.whatsapp-pill,
.local-whatsapp {
  transition: box-shadow 160ms ease, transform 160ms ease;
}

.whatsapp-pill:hover,
.whatsapp-pill:focus-visible,
.local-whatsapp:hover,
.local-whatsapp:focus-visible {
  box-shadow: 0 5px 12px rgba(21, 105, 39, 0.25);
  transform: translateY(-2px);
}

.founder-section {
  background: var(--piq-cream);
  padding: 260px 0 0;
  position: relative;
}

.founder-section::before {
  background: var(--piq-cream);
  content: "";
  height: 1164px;
  left: 50%;
  pointer-events: none;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: 100vw;
  z-index: 0;
}

.founder-wrap {
  background: var(--piq-cream);
  margin: 0 auto;
  min-height: 833px;
  position: relative;
  width: 980px;
  z-index: 1;
}

.founder-copy {
  left: 2px;
  position: absolute;
  top: 0;
  width: 491px;
  z-index: 2;
}

.founder-name {
  background: var(--piq-blue);
  box-sizing: border-box;
  color: #fff;
  font-family: "piq-caveat", Georgia, "Times New Roman", serif;
  font-size: 40px;
  font-weight: 400;
  height: 139px;
  line-height: 1;
  margin: 0;
  padding: 86px 20px 0;
  width: 491px;
}

.founder-name__pronouns {
  font-family: "piq-forum", Georgia, "Times New Roman", serif;
  font-size: 16px;
}

.founder-role {
  color: #9f958d;
  font-family: "piq-caudex", Georgia, "Times New Roman", serif;
  font-size: 16px;
  margin: 17px 0 58px 20px;
}

.founder-copy p:not(.founder-role) {
  color: #414141;
  font-family: "piq-forum", Georgia, "Times New Roman", serif;
  font-size: 20px;
  line-height: 1.12;
  margin: 0 0 21px 18px;
  width: 396px;
}

.founder-signoff {
  color: var(--piq-blue);
  font-family: "piq-caveat", Georgia, "Times New Roman", serif !important;
  font-size: 26px !important;
  line-height: 1.15 !important;
}

.founder-collage {
  inset: 0;
  min-height: 833px;
  position: absolute;
}

.founder-collage img {
  display: block;
}

.founder-ukraine {
  background: #3e3e3e;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.22);
  height: 140px;
  left: 527px;
  position: absolute;
  top: 43px;
  width: 309px;
}

.rating-card-link {
  height: 160px;
  left: 423px;
  position: absolute;
  top: 215px;
  width: 160px;
  z-index: 3;
}

.rating-card {
  border-radius: 9px;
  box-shadow: 0 8px 14px rgba(0, 0, 0, 0.18);
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.founder-work {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);
  height: 261px;
  left: 411px;
  object-fit: cover;
  position: absolute;
  top: 415px;
  width: 196px;
  z-index: 4;
}

.founder-photo {
  --slide-h: 472px;
  --slide-w: 354px;
  --slide-x-1: -354px;
  --slide-x-2: -708px;
  --slide-x-3: -1062px;
  --signature-offset-x: -21px;
  --signature-offset-y: 86px;
  background: transparent;
  height: 558px;
  left: 527px;
  margin: 0;
  overflow: visible;
  padding: 0;
  position: absolute;
  top: 265px;
  width: 359px;
}

.founder-slider {
  height: var(--slide-h);
  left: 2.5px;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: var(--slide-w);
  z-index: 2;
}

.founder-track {
  animation: founder-track 42s ease-in-out infinite;
  display: flex;
  height: 100%;
  width: max-content;
}

.founder-slide {
  flex: 0 0 var(--slide-w);
  filter: grayscale(1);
  height: var(--slide-h);
  object-fit: cover;
  object-position: center top;
  width: var(--slide-w);
}

@keyframes founder-track {
  0%,
  21% {
    transform: translateX(0);
  }

  27%,
  48% {
    transform: translateX(var(--slide-x-1));
  }

  54%,
  75% {
    transform: translateX(var(--slide-x-2));
  }

  81%,
  99.9% {
    transform: translateX(var(--slide-x-3));
  }

  100% {
    transform: translateX(0);
  }
}

.founder-photo figcaption {
  background: var(--piq-blue);
  box-shadow: 10px 10px 16px rgba(0, 0, 0, 0.22);
  height: var(--slide-h);
  left: var(--signature-offset-x);
  position: absolute;
  top: var(--signature-offset-y);
  width: var(--slide-w);
  z-index: 1;
}

.founder-photo figcaption img {
  bottom: 11px;
  display: block;
  filter: invert(1) brightness(2.7);
  height: 51px;
  opacity: 0.86;
  position: absolute;
  right: 22px;
  transform: rotate(-4.475deg);
  width: 78px;
}

.competence-band {
  background: var(--piq-blue);
  box-sizing: border-box;
  height: 200px;
  margin: 71px auto 0;
  min-height: 0;
  position: relative;
  text-align: center;
  width: calc(100% - 160px);
  z-index: 4;
}

.competence-band h2 {
  align-items: center;
  background: transparent;
  box-sizing: border-box;
  color: #fff;
  display: flex;
  font-family: "piq-caudex", Georgia, "Times New Roman", serif;
  font-size: 40px;
  font-weight: 400;
  height: 77px;
  justify-content: center;
  line-height: normal;
  margin: 0;
  width: 100%;
}

.competence-tabs {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: 197px;
  left: 50%;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 77px;
  transform: translateX(-50%);
  width: min(980px, calc(100% - 140px));
  z-index: 3;
}

.competence-tabs a {
  align-items: center;
  background: #fff;
  border-left: 1px solid #ddd4ce;
  color: #59666b;
  display: flex;
  font-family: "piq-caudex", Georgia, "Times New Roman", serif;
  font-size: 18px;
  height: 197px;
  justify-content: center;
  line-height: 1.22;
  min-height: 197px;
  padding: 0 22px;
  text-decoration: none;
}

.competence-tabs a:first-child {
  border-left: 0;
}

.quote-section {
  background: var(--piq-cream);
  margin-top: -116px;
  padding-bottom: 112px;
  position: relative;
  z-index: 1;
}

.quote-visual {
  height: 735px;
  overflow: clip;
  position: relative;
  z-index: 1;
}

.quote-media {
  inset: 0;
  overflow: clip;
  position: absolute;
}

.quote-media video {
  display: block;
  height: max(100vh, 735px);
  object-fit: cover;
  object-position: 50% 100%;
  position: absolute;
  top: 0;
  width: 100%;
  will-change: transform;
}

.quote-visual::after {
  background-image: url("../img/wix-diagonal-lines.png");
  background-repeat: repeat;
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.quote-visual p {
  bottom: 61px;
  color: #fff;
  font-family: "piq-caudex", Georgia, "Times New Roman", serif;
  font-size: 40px;
  font-style: italic;
  left: calc(50% + 12px);
  line-height: normal;
  margin: 0;
  min-height: 117px;
  position: absolute;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  transform: translateX(-50%);
  width: min(896px, calc(100% - 40px));
  z-index: 2;
}

.quote-visual small {
  display: inline-block;
  font-family: "piq-caudex", Georgia, "Times New Roman", serif;
  font-size: 12px;
  font-style: italic;
  font-weight: 700;
  transform: translate(10px, -5px);
  white-space: nowrap;
}

.quote-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: -62px auto 0;
  position: relative;
  width: 980px;
  z-index: 2;
}

.quote-cards blockquote {
  background: #fff;
  color: var(--piq-blue);
  font-family: "piq-forum", Georgia, "Times New Roman", serif;
  font-size: 18px;
  line-height: 1.2;
  margin: 0;
  min-height: 213px;
  padding: 21px 22px;
}

.quote-cards p {
  margin: 0 0 22px;
}

.quote-cards cite {
  color: var(--piq-blue);
  display: block;
  font-family: "piq-caudex", Georgia, "Times New Roman", serif;
  font-size: 12px;
  font-style: italic;
  line-height: 1.2;
}

.quote-cards blockquote:nth-child(2) {
  background: var(--piq-panel);
}

.local-contact {
  background: var(--piq-cream);
  box-shadow: 0 0 0 100vmax var(--piq-cream);
  clip-path: inset(0 -100vmax);
  margin: 0 auto;
  padding: 41px 0 23px;
  width: 980px;
}

.local-card {
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  height: 134px;
  margin: 0 0 63px 2px;
  width: 491px;
}

.local-card span {
  color: #b04a5f;
  display: block;
  font-family: "piq-caveat", Georgia, "Times New Roman", serif;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  padding: 80px 0 0 20px;
}

.local-columns {
  display: grid;
  gap: 58px;
  grid-template-columns: repeat(3, 234px);
  margin: 0 0 0 21px;
  width: 818px;
}

.local-columns h3 {
  color: #943814;
  font-family: "piq-forum", Georgia, "Times New Roman", serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0;
  margin: 0 0 16px;
  text-transform: uppercase;
}

.local-columns p {
  color: #414141;
  font-family: "piq-forum", Georgia, "Times New Roman", serif;
  font-size: 18px;
  line-height: normal;
  margin: 0 0 20px;
}

.local-columns a {
  color: inherit;
  text-decoration: none;
}

.local-phone {
  display: inline-block;
  font-size: 20px;
  font-weight: 700;
  margin-top: 6px;
}

.local-whatsapp {
  align-items: center;
  background: #3dbd2c url("../img/whatsapp.svg?ver=0.1.35") center / 37px 37px no-repeat;
  border-radius: 200px;
  color: transparent !important;
  display: inline-flex;
  font-size: 0;
  height: 46px;
  justify-content: center;
  margin: 0 0 0 8px;
  vertical-align: middle;
  width: 46px;
}

.local-leaf {
  height: 30px;
  margin-left: 7px;
  transform: translateY(-8px);
  vertical-align: top;
  width: 53px;
}

.form-intro {
  color: #414141;
  font-family: "piq-forum", Georgia, "Times New Roman", serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0;
  margin: 199px auto 30px;
  text-align: center;
  text-transform: uppercase;
  width: 630px;
}

.form-intro span {
  display: block;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.45;
  margin-top: 8px;
  text-transform: none;
}

.contact-card {
  background: #fff;
  box-shadow: 0 0 0 100vmax var(--piq-cream);
  box-sizing: border-box;
  clip-path: inset(0 -100vmax);
  margin: 0 auto;
  min-height: 1189px;
  padding: 26px 24px 30px;
  width: 630px;
}

/*
 * Am Original: Avenir LT Light, 21px, normal, #414141 - also deutlich
 * kleiner und leichter als hier bisher angenommen. Avenir gehoert Wix und
 * laesst sich nicht mitnehmen; Nunito Sans steht als naechste Groteske
 * stellvertretend. Groesse, Gewicht und Farbe sind uebernommen.
 */
.contact-card h2 {
  color: #414141;
  font-family: "piq-nunito", Arial, Helvetica, sans-serif;
  font-size: 21px;
  font-weight: 400;
  line-height: 31.5px;
  margin: 0 0 22px;
  text-align: center;
}

.piq-contact-form,
.wpcf7 form {
  display: block;
  font-family: "piq-questrial", Arial, Helvetica, sans-serif;
  min-height: 1070px;
  width: 100%;
}

.piq-contact-form p,
.wpcf7 form p {
  margin: 0 0 9px;
}

.piq-contact-form label,
.wpcf7 label {
  color: #414141;
  display: block;
  font-size: 14px;
  font-weight: 400;
  text-transform: none;
}

.piq-contact-form > .form-field {
  margin-bottom: 26px;
}

.piq-contact-form fieldset {
  border: 0;
  display: block;
  margin: 49px 0 0;
  padding: 0;
}

.piq-contact-form legend {
  color: #414141;
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 27px;
}

.piq-contact-form fieldset label {
  margin-bottom: 23px;
}

input,
select,
textarea {
  background: #fff;
  border: 1px solid #cfd5d7;
  border-radius: 0;
  box-sizing: border-box;
  color: #2a3d42;
  font: inherit;
  font-size: 16px;
  min-height: 42px;
  padding: 6px 8px;
  width: 100%;
}

textarea {
  min-height: 140px;
}

.piq-contact-form input:not([type="checkbox"]):not([type="file"]),
.piq-contact-form select,
.piq-contact-form textarea {
  border-color: #999;
  color: #414141;
  font-family: "piq-questrial", Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 700;
  margin-top: 10px;
  min-height: 42px;
  padding: 8px 12px;
}

.piq-contact-form input::placeholder,
.piq-contact-form textarea::placeholder {
  color: #999997;
  opacity: 1;
}

.phone-field {
  border: 1px solid #999;
  display: grid;
  grid-template-columns: 42px 1fr;
  margin-top: 10px;
  min-height: 42px;
}

.phone-prefix {
  align-items: center;
  display: flex;
  justify-content: center;
  position: relative;
}

.phone-prefix::before {
  background: linear-gradient(#111 0 33.333%, #d00 33.333% 66.666%, #ffce00 66.666%);
  content: "";
  height: 12px;
  width: 21px;
}

.phone-prefix::after {
  border-bottom: 1px solid #777;
  border-right: 1px solid #777;
  content: "";
  height: 6px;
  margin-left: 6px;
  transform: rotate(45deg) translateY(-2px);
  width: 6px;
}

.piq-contact-form .phone-field input {
  border: 0;
  margin: 0;
  min-height: 40px;
  padding-left: 0;
}

.phone-help,
.upload-help {
  color: #999997;
  display: block;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
  margin-top: 8px;
}

.message-field {
  font-size: 18px !important;
  font-weight: 700 !important;
  margin-top: 31px;
}

.piq-contact-form .message-field textarea {
  font-weight: 700;
  margin-top: 25px;
  min-height: 92px;
  resize: vertical;
}

.file-field {
  color: #414141;
  font-size: 14px;
  margin-top: 25px;
}

.piq-contact-form .file-upload {
  align-items: center;
  background: var(--piq-sand);
  color: #fff;
  cursor: pointer;
  display: flex;
  font-size: 16px;
  height: 40px;
  margin-top: 11px;
  padding: 0 15px;
  width: fit-content;
}

.file-upload > span {
  font-size: 24px;
  font-weight: 300;
  margin-right: 9px;
}

.file-upload input {
  height: 1px;
  overflow: hidden;
  position: absolute;
  width: 1px;
  clip-path: inset(50%);
}

.piq-contact-form .acceptance {
  align-items: start;
  display: grid;
  gap: 8px;
  grid-template-columns: 18px 1fr;
  font-size: 12px;
  line-height: 1.35;
  margin-top: 33px;
  text-transform: none;
}

.piq-contact-form .acceptance input {
  min-height: 18px;
  padding: 0;
  width: 18px;
}

.piq-contact-form .acceptance a {
  color: inherit;
  text-decoration: underline;
}

.piq-contact-form button,
.wpcf7-submit {
  background: var(--piq-sand);
  border: 0;
  color: #fff;
  cursor: pointer;
  font-weight: 700;
  font-size: 16px;
  font-weight: 400;
  margin-top: 30px;
  min-height: 41px;
  width: 100%;
}

.faces-section {
  background: var(--piq-cream);
  box-shadow: 0 0 0 100vmax var(--piq-cream);
  clip-path: inset(0 -100vmax);
  padding: 57px 0 70px;
}

.faces-row {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, 319px);
  margin: 0 auto;
  width: 980px;
}

.faces-card-main {
  color: inherit;
  display: block;
  text-decoration: none;
}

.faces-row article {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(232, 230, 230, 0.75);
  box-shadow: none;
  display: flex;
  flex-direction: column;
  font-size: 16px;
  height: 443.875px;
  min-width: 0;
  overflow: hidden;
}

.faces-row img {
  display: block;
  height: 178.875px;
  margin: -1px;
  object-fit: cover;
  width: 319px;
}

.faces-card-copy {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 224px;
  padding: 18px 16px 0;
}

.faces-badge {
  background: rgb(216, 199, 189);
  border: 0 solid rgb(216, 199, 189);
  border-radius: 0;
  color: #fff;
  display: inline-block;
  font-family: "piq-forum", Georgia, "Times New Roman", serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 17px;
  margin: 0 0 10px;
  max-width: min-content;
  overflow: hidden;
  padding: 6px 12px;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

.faces-row h3 {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  color: rgb(24, 34, 38);
  display: -webkit-box;
  font-family: "piq-caudex", Georgia, "Times New Roman", serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 27px;
  margin: 0 0 11px;
  overflow: hidden;
  overflow-wrap: break-word;
  word-break: break-word;
}

.faces-row p {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  color: rgb(34, 73, 90);
  display: -webkit-box;
  font-family: "piq-forum", Georgia, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  margin: 0;
  overflow: hidden;
}

.faces-card-footer {
  align-items: center;
  border-top: 1px solid rgba(34, 73, 90, 0.2);
  color: rgb(34, 73, 90);
  display: flex;
  font-family: "piq-forum", Georgia, "Times New Roman", serif;
  font-size: 12px;
  height: 41px;
  justify-content: space-between;
  line-height: 18px;
  margin: 0 16px;
  padding-top: 8px;
}

.faces-stat,
.faces-like {
  align-items: center;
  color: inherit;
  display: inline-flex;
  gap: 6px;
}

.faces-like {
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
  padding: 0;
}

.faces-stat svg,
.faces-like svg {
  fill: none;
  height: 15px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 15px;
}

.faces-like.is-liked svg path {
  fill: currentColor;
}

.faces-pagination {
  align-items: center;
  color: rgb(34, 73, 90);
  display: flex;
  font-family: system-ui, sans-serif;
  font-size: 16px;
  justify-content: center;
  line-height: 1;
  margin: 16px auto 30px;
  position: relative;
  width: 980px;
  z-index: 2;
}

.faces-pagination a,
.faces-pagination button {
  align-items: center;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: flex;
  font: inherit;
  justify-content: center;
  line-height: 1;
  margin: 0 3px;
  min-height: 36px;
  min-width: 36px;
  padding: 0;
  text-decoration: none;
}

.faces-pagination button {
  appearance: none;
}

.faces-pagination .is-active {
  color: rgb(72, 101, 115);
  cursor: default;
}

.faces-pagination .is-disabled {
  cursor: default;
  opacity: 0.4;
}

.faces-pagination svg {
  fill: currentColor;
}

.locations-original {
  background: var(--piq-cream);
  box-shadow: 0 0 0 100vmax var(--piq-cream);
  clip-path: inset(0 -100vmax -120px -100vmax);
  padding: 0 0 86px;
}

.locations-original h2 {
  background: var(--piq-blue);
  box-sizing: border-box;
  color: #fff;
  font-family: "piq-caudex", Georgia, "Times New Roman", serif;
  font-size: 40px;
  font-weight: 400;
  height: 103px;
  line-height: 52px;
  margin: 0 auto;
  padding: 21px 0 0;
  text-align: center;
  width: calc(100% - 160px);
}

.locations-map {
  background: #e8ece8;
  height: 1247px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  touch-action: none;
  width: 980px;
}

.map-consent {
  align-items: center;
  background:
    linear-gradient(rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.72)),
    repeating-linear-gradient(
      45deg,
      #d9dedb 0,
      #d9dedb 1px,
      #eff2ef 1px,
      #eff2ef 10px
    );
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 28px;
  position: absolute;
  z-index: 8;
}

.privacy-map.is-loaded .map-consent {
  display: none;
}

.map-consent-card {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #d5dad8;
  box-shadow: 0 18px 38px rgba(35, 52, 58, 0.14);
  box-sizing: border-box;
  color: #414141;
  max-width: 420px;
  padding: 36px 38px 38px;
  text-align: center;
}

.map-consent-kicker {
  color: var(--piq-blue);
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.map-consent-card h3 {
  color: var(--piq-blue);
  font-family: "piq-caudex", Georgia, "Times New Roman", serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 16px;
}

.map-consent-card p {
  font-size: 16px;
  line-height: 1.55;
  margin: 0 0 24px;
}

.map-load-button {
  background: var(--piq-blue);
  border: 0;
  color: #fff;
  cursor: pointer;
  font-family: "piq-avenir", Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  min-height: 44px;
  padding: 12px 28px;
}

.map-load-button:focus-visible,
.privacy-map button:focus-visible,
.privacy-map a:focus-visible {
  outline: 3px solid #943814;
  outline-offset: 3px;
}

.privacy-map-stage {
  display: none;
  inset: 0;
  position: absolute;
}

.privacy-map.is-loaded .privacy-map-stage {
  display: block;
}

.privacy-map-canvas {
  background: #e6ece8;
  cursor: grab;
  height: 100%;
  inset: 0;
  overflow: hidden;
  position: absolute;
  user-select: none;
  width: 100%;
}

.privacy-map-canvas.is-dragging {
  cursor: grabbing;
}

.privacy-map-tiles,
.privacy-map-markers {
  inset: 0;
  position: absolute;
}

.privacy-map-tiles img {
  display: block;
  height: 256px;
  position: absolute;
  width: 256px;
}

.privacy-marker {
  align-items: center;
  background: #cf304b;
  border: 0;
  box-shadow: 0 6px 12px rgba(29, 44, 49, 0.24);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  gap: 6px;
  left: 0;
  min-height: 36px;
  padding: 5px 9px 5px 5px;
  position: absolute;
  top: 0;
  transform: translate(-50%, -100%);
  white-space: nowrap;
}

.privacy-marker::after {
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 12px solid #cf304b;
  bottom: -11px;
  content: "";
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
}

.privacy-marker-logo {
  align-items: center;
  background: #fff;
  color: var(--piq-blue);
  display: inline-flex;
  font-family: "piq-caudex", Georgia, "Times New Roman", serif;
  font-size: 11px;
  font-weight: 700;
  height: 26px;
  justify-content: center;
  line-height: 1;
  width: 34px;
}

.privacy-marker-name {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.privacy-marker.is-active {
  background: var(--piq-blue);
  z-index: 3;
}

.privacy-marker.is-active::after {
  border-top-color: var(--piq-blue);
}

.privacy-map-popup {
  background: #fff;
  box-shadow: 0 10px 26px rgba(29, 44, 49, 0.2);
  box-sizing: border-box;
  color: #414141;
  display: none;
  font-size: 14px;
  line-height: 1.42;
  min-width: 232px;
  padding: 15px 16px 16px;
  position: absolute;
  width: 252px;
  z-index: 4;
}

.privacy-map-popup.is-visible {
  display: block;
}

.privacy-map-popup strong {
  color: var(--piq-blue);
  display: block;
  font-family: "piq-caudex", Georgia, "Times New Roman", serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.1;
  margin-bottom: 8px;
}

.privacy-map-popup a {
  color: var(--piq-blue);
  display: inline-block;
  font-weight: 700;
  margin-top: 8px;
  text-decoration: none;
}

.privacy-map-controls {
  display: grid;
  gap: 8px;
  position: absolute;
  right: 18px;
  top: 18px;
  z-index: 5;
}

.privacy-map-controls button {
  background: #fff;
  border: 1px solid #d8dfdd;
  box-shadow: 0 2px 8px rgba(29, 44, 49, 0.14);
  color: var(--piq-blue);
  cursor: pointer;
  font-size: 26px;
  font-weight: 400;
  height: 44px;
  line-height: 1;
  width: 44px;
}

.map-location-list {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 22px rgba(29, 44, 49, 0.16);
  display: grid;
  gap: 1px;
  left: 18px;
  max-width: 268px;
  position: absolute;
  top: 18px;
  width: calc(100% - 96px);
  z-index: 5;
}

.map-location-button {
  background: #fff;
  border: 0;
  color: #414141;
  cursor: pointer;
  font-family: "piq-avenir", Arial, sans-serif;
  min-height: 52px;
  padding: 10px 13px;
  text-align: left;
}

.map-location-button strong {
  color: var(--piq-blue);
  display: block;
  font-family: "piq-caudex", Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.1;
}

.map-location-button span {
  display: block;
  font-size: 12px;
  line-height: 1.35;
  margin-top: 3px;
}

.map-location-button.is-active {
  background: var(--piq-blue);
  color: #fff;
}

.map-location-button.is-active strong {
  color: #fff;
}

.map-attribution {
  background: rgba(255, 255, 255, 0.86);
  bottom: 6px;
  color: #445052;
  font-size: 10px;
  left: 8px;
  padding: 2px 5px;
  position: absolute;
}

/* =========================================================================
   Fussbereich

   Nach der Vorlage neu aufgebaut. Der uebernommene Stand war hier deutlich
   daneben: 650px breit statt 980, durchgaengig 12px Schrift statt 16 bis 26,
   Auszeichnungslogos auf 74px Hoehe gestaucht und ein weisses Band ueber die
   volle Fensterbreite statt einer 980px breiten Flaeche auf Creme.

   Alle Werte am 30.07.2026 an www.pflege2.de gemessen (Fenster 1613px):
     Flaeche   980px, 42px oben / 21px unten
     Reihe 1   Logo 225px links, Kontaktblock rechtsbuendig
     Firma     Forum 26px  #22495a
     Zusatz    Questrial 16px  #2b2b2b
     Anschrift Questrial 18px/19px  #2b2b2b
     Werte     Questrial 20px fett  #22495a, zentriert
     Logos     323 / 160 / 330px breit, vertikal mittig
     Rechtl.   Questrial 16px/22.4px  #414141, zentriert
   ====================================================================== */

/*
 * Flaechenfarbe: Die Vorlage legt Weiss mit 49% Deckkraft ueber das cremefarbene
 * Seitenlayout. Ausgerechnet ergibt das #f9f6f4 - hier direkt gesetzt, damit
 * keine Transparenz noetig ist.
 */
/*
 * Das Band traegt die cremefarbene Flaeche ueber die volle Fensterbreite und
 * den Schlagschatten, mit dem die Vorlage den Fussbereich nach oben absetzt:
 * 5px weich, ohne Versatz. Sichtbar ist davon vor allem eine feine Linie an
 * der Oberkante.
 *
 * Vorher lag beides als Schlagschatten mit 100vmax Ausdehnung auf dem
 * Fussbereich selbst. Damit liess sich kein zweiter, dunkler Schatten mehr
 * ergaenzen - die Creme haette ihn ueberdeckt.
 *
 * Ohne die deckende Flaeche schiene links und rechts neben dem 980px breiten
 * Fussbereich das fest stehende Hero-Video durch.
 */
.site-footer-band {
  background: var(--piq-cream);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
  position: relative;
  width: 100vw;
  z-index: 2;
}

.site-footer {
  background: #f9f6f4;
  box-sizing: border-box;
  color: var(--piq-text-dark, #2b2b2b);
  font-size: 16px;
  margin: 0 auto;
  max-width: 980px;
  padding: 42px 20px 21px;
  position: relative;
  z-index: 2;
}

.site-footer a {
  color: inherit;
}

.footer-main {
  align-items: start;
  display: grid;
  gap: 42px;
  grid-template-columns: 225px 1fr;
}

.footer-brand img {
  display: block;
  height: auto;
  width: 225px;
}

.footer-contact {
  text-align: right;
}

.footer-company {
  color: #22495a;
  font-family: "piq-forum", Georgia, "Times New Roman", serif;
  font-size: 26px;
  line-height: 1.1;
  margin: 0;
}

.footer-tagline {
  color: #2b2b2b;
  font-size: 16px;
  line-height: 1.15;
  margin: 4px 0 0;
}

.site-footer address {
  color: #2b2b2b;
  font-size: 18px;
  font-style: normal;
  line-height: 19px;
  margin-top: 38px;
}

.footer-values {
  color: #22495a;
  font-size: 20px;
  font-weight: 700;
  line-height: 42px;
  margin: 19px 0 0;
  text-align: center;
}

/*
 * Die drei Logos sitzen in der Vorlage auf einer gemeinsamen Mittellinie und
 * fuellen die Inhaltsbreite mit gleichmaessigen Zwischenraeumen. Die Breiten
 * stehen fest, weil die Seitenverhaeltnisse der Dateien exakt zu den
 * gemessenen Kaesten passen; die Hoehe folgt daraus von selbst.
 */
.footer-badges {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 35px 0 0;
}

/*
 * min-width: 0 hebt die Mindestbreite auf, die Bilder in einer Flexbox von
 * ihrer Eigengroesse erben. Ohne sie ragte die Logoreihe zwischen 760px und
 * 980px Fensterbreite ueber den Rand hinaus, weil 323 + 160 + 330 Pixel dort
 * nicht mehr nebeneinander passen und die Bilder nicht schrumpfen durften.
 * Das Seitenverhaeltnis bleibt erhalten, weil width und height am Bild stehen.
 */
.footer-badges img {
  display: block;
  height: auto;
  max-width: 100%;
  min-width: 0;
}

.footer-badges img:nth-child(1) {
  width: 323px;
}

.footer-badges img:nth-child(2) {
  width: 160px;
}

.footer-badges img:nth-child(3) {
  width: 330px;
}

/*
 * Einzige Stelle, an der das Original tatsaechlich Questrial rendert - ueberall
 * sonst ist Questrial dort nur der Ersatzname im Schriftstapel. Deshalb hier
 * ausdruecklich gesetzt, obwohl die Grundschrift Forum ist.
 */
.footer-legal {
  color: #414141;
  font-family: "piq-questrial", Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 22.4px;
  margin: 53px 0 0;
  text-align: center;
}

/*
 * Unterstreichung bewusst behalten. Die Vorlage zeichnet die drei Verweise
 * ebenfalls unterstrichen aus; ohne sie waeren sie im gleichfarbigen
 * Fliesstext daneben nicht mehr als Verweise erkennbar (WCAG 1.4.1).
 */
.footer-legal a {
  text-decoration: underline;
}

.section-band {
  padding: 4rem 0;
}

/*
 * Platz fuer den Kopfbereich freihalten.
 *
 * .site-header steht ab 981px auf "fixed" und belegt deshalb keinen Platz im
 * Textfluss. Auf der Startseite ist das gewollt - der Hero bringt seinen
 * eigenen Abstand mit. Auf den Unterseiten lief der Inhalt dadurch unter den
 * Kopfbereich: die Ueberschrift von /kiosk/ stand halb hinter dem Logo.
 *
 * 193px ist die gemessene Hoehe des Kopfbereichs, 12px der Abstand, den auch
 * die Vorlage laesst. Unterhalb von 981px steht der Kopfbereich auf "sticky"
 * und nimmt seinen Platz selbst ein; dort bleibt es bei 4rem.
 */
@media (min-width: 981px) {
  .main-shell.section-band {
    padding-top: 205px;
  }
}

/*
 * Inhaltsspalte der Unterseiten.
 *
 * Der Inhaltsblock selbst bleibt so breit wie die Seite - nur so koennen
 * einzelne Bloecke spaeter ueber die volle Breite laufen. Begrenzt werden
 * seine Kinder.
 *
 * 980px ist die Spaltenbreite der Vorlage, dieselbe wie bei den Abschnitten
 * der Startseite. Vorher standen hier 760px, die aber wirkungslos blieben:
 * ".main-shell > ... { max-width: none !important }" ueberstimmt sie. Und weil
 * der Inhaltsblock auf "flow" stand, erbten die Kinder gar keine Breite - alle
 * Unterseiten liefen linksbuendig ueber die volle Fensterbreite.
 *
 * calc(100% - 40px) haelt auf schmalen Fenstern einen Rand frei.
 */
/*
 * Nur bei "constrained", nicht bei "flow".
 *
 * Die Unterseiten binden ihren Inhalt als begrenzten Block ein, die
 * Startseite bewusst nicht - ihre Abschnitte laufen ueber die volle Breite.
 * Ohne diese Einschraenkung schrumpfte auch die Startseite auf 980px: Die
 * weisse Flaeche neben dem Hero-Video reichte nicht mehr an den Fensterrand,
 * der Text rutschte nach links ins Video hinein und die Baender der
 * Kernkompetenzen und des Zitats brachen auseinander.
 */
.wp-block-post-content.is-layout-constrained > :where(:not(.alignfull):not(.alignwide)) {
  margin-left: auto;
  margin-right: auto;
  max-width: min(980px, calc(100% - 40px));
}

/*
 * Bilder fuellen ihre Spalte, laufen aber nie darueber hinaus.
 *
 * Ausgenommen das Aufmacherfoto: Das soll sein Rasterfeld ausfuellen und
 * bekommt seine Hoehe weiter unten. Ohne die Ausnahme gewann "height: auto"
 * hier, und das Foto stand nur auf zwei Dritteln der Bandhoehe.
 */
.wp-block-post-content .wp-block-image:not(.unterseite-hero__bild) img {
  height: auto;
  max-width: 100%;
}

/* =========================================================================
   Aufmacher der Unterseiten

   Dieselbe Anordnung wie auf der Startseite - Bild links, Textspalte rechts,
   Ueberschrift auf 312px - nur mit einem stehenden Bild statt des Videos.
   Gemessen an /beratung/ und /city/: Band 1613 breit, Bild 807 x 1307,
   Textspalte 400 bei x=987, H1 491 breit bei x=967.
   ====================================================================== */

.unterseite-hero {
  background: #fff;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
  /*
   * 1252px, am echten Original nachgemessen: so hoch ist dort das Video.
   * Der Abschnitt darunter wird um 165px daruebergezogen - die Plakette
   * beginnt in der Vorlage bei y1087, also deutlich vor dem Videoende.
   * Siehe docs/layout-original.md.
   */
  min-height: 1252px;
  position: relative;
  width: 100vw;
}

.unterseite-hero__bild {
  background: #d8d8d8;
  overflow: hidden;
  position: relative;
}

/*
 * Aufmacher mit Video statt Standbild.
 *
 * Anders als auf der Startseite steht das Video hier nicht fest, sondern
 * fuellt sein Rasterfeld und scrollt mit - so macht es auch die Vorlage
 * (hasBgScrollEffect ist dort leer).
 */
.unterseite-hero__video .wp-block-video,
.unterseite-hero__video figure {
  height: 100%;
  margin: 0;
}

.unterseite-hero__video video {
  display: block;
  height: 100%;
  inset: 0;
  object-fit: cover;
  object-position: center;
  position: absolute;
  width: 100%;
}

/*
 * Feines Schraffurmuster ueber dem Aufmacherfoto.
 *
 * Dieselbe 6x6-Kachel wie hinter dem Hero-Video der Startseite - die Vorlage
 * legt sie auf allen Unterseiten ueber das Bild. Ohne sie wirkt das Foto
 * deutlich anders: glatt statt strukturiert.
 */
.unterseite-hero__bild::after {
  background-image: url("../img/wix-diagonal-lines.png");
  background-repeat: repeat;
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

/*
 * Absolut im Rasterfeld statt "height: 100%".
 *
 * Der Bild-Baustein gibt seine Hoehe nicht an das Bild weiter; auf /city/
 * fuellte das Foto nur 595 der 906 Pixel und liess darunter eine graue
 * Flaeche stehen. Absolut positioniert fuellt es das Feld zuverlaessig.
 */
.unterseite-hero__bild img {
  /*
   * aspect-ratio: auto ist noetig. WordPress schreibt Breite und Hoehe als
   * Attribute ins Bild; daraus leitet der Browser ein Seitenverhaeltnis ab,
   * das die Hoehenangabe ueberstimmt. Das Foto blieb dadurch auf 595 statt
   * 906 Pixel stehen.
   */
  aspect-ratio: auto;
  display: block;
  height: 100%;
  inset: 0;
  object-fit: cover;
  object-position: center;
  position: absolute;
  width: 100%;
}

/* Das Rasterfeld ist so hoch wie das Band, das Bild fuellt es */
.unterseite-hero__bild.wp-block-image {
  margin: 0;
}

/*
 * Der Aufmacher beginnt ganz oben, der Kopfbereich liegt darueber - genau wie
 * auf der Startseite. Die 205px Innenabstand, die alle anderen Unterseiten
 * brauchen, werden hier wieder herausgerechnet.
 */
.entry-content > .unterseite-hero:first-child {
  margin-top: -205px;
}

/*
 * Feste Breite, nicht nur max-width.
 *
 * "justify-self: center" nimmt dem Rasterfeld die volle Breite; es schrumpft
 * dann auf seinen Inhalt. Auf /bewerbung/ war die Spalte dadurch nur 400
 * statt 491 breit, weil die Absaetze selbst auf 400 begrenzt sind - die
 * Ueberschrift sass entsprechend zu weit rechts.
 */
.unterseite-hero__text {
  align-self: start;
  box-sizing: border-box;
  justify-self: center;
  max-width: 100%;
  padding: 312px 0 56px;
  width: 491px;
}

/*
 * Abweichende Masse einzelner Seiten.
 *
 * Der Aufbau ist ueberall gleich, nur Bandhoehe und Hoehe der Ueberschrift
 * unterscheiden sich. Beides am Original gemessen.
 */
.unterseite-hero--bewerbung {
  min-height: 939px;
}

.unterseite-hero--bewerbung .unterseite-hero__text {
  padding-top: 240px;
}

/* Standortseiten: Band 880 hoch, Ueberschrift auf 260 (gemessen an /city/) */
.unterseite-hero--standort {
  min-height: 880px;
}

.unterseite-hero--standort .unterseite-hero__text {
  padding-top: 260px;
}

/*
 * Ohne Aufmacherfoto - so ist es auf /roemerberg/. Dann nimmt die Textspalte
 * die ganze Breite der Inhaltsspalte ein, statt in der rechten Haelfte zu
 * kleben.
 */
.unterseite-hero--ohne-bild {
  grid-template-columns: 1fr;
  min-height: 0;
}

.unterseite-hero--ohne-bild .unterseite-hero__text {
  justify-self: center;
  padding-top: 60px;
}

/*
 * Fliesstext der Standortseiten. In der Vorlage 20px in einer Spalte von
 * 396px, Zwischenueberschriften 40px.
 */
.standort-text,
.standort-kompetenzen {
  margin-bottom: 50px;
}

.standort-text p,
.standort-kompetenzen p {
  font-size: 20px;
  line-height: 1.35;
  margin: 0 0 20px;
  max-width: 620px;
}

.standort-text h3,
.standort-kompetenzen h3 {
  color: #414141;
  font-family: "piq-nunito", Arial, Helvetica, sans-serif;
  font-size: 30px;
  font-weight: 300;
  line-height: 1.2;
  margin: 34px 0 16px;
}

/* Die Unterschrift unter dem Kontaktblock des Aufmachers */
.standort-unterschrift {
  margin: 10px 0 0;
  max-width: 223px;
}

.standort-unterschrift img {
  display: block;
  height: auto;
  width: 100%;
}

/*
 * Kein Blockabstand innerhalb des Aufmachers.
 *
 * WordPress setzt zwischen aufeinanderfolgenden Bloecken 24px. Die Textspalte
 * ist der zweite Block im Aufmacher und sass dadurch 24px zu tief - die
 * Ueberschrift lag auf 336 statt auf den gemessenen 312.
 */
.unterseite-hero > *,
.unterseite-hero__text > :first-child {
  margin-block-start: 0;
}

.unterseite-hero__text > h1 {
  color: #414141;
  font-family: "piq-nunito", Arial, Helvetica, sans-serif;
  font-size: 40px;
  font-weight: 300;
  line-height: 1.2;
  margin: 0 0 20px;
}

.unterseite-hero__text > p {
  color: #414141;
  font-size: 20px;
  line-height: 1.1;
  margin: 0 0 22px;
  max-width: 400px;
}

/*
 * Ueberschrift auf blauer Plakette.
 *
 * Wiederkehrendes Element der Unterseiten: ein 491 x 134 grosser Kasten in
 * #486573, auf dem die Abschnittsueberschrift sitzt.
 */
/*
 * Linksbuendig in der Inhaltsspalte, nicht mittig: In der Vorlage sitzt die
 * Plakette am linken Rand der 980er-Spalte. 18px Innenabstand ergeben die
 * gemessenen 134px Hoehe bei zweizeiliger Ueberschrift.
 */
/*
 * Der aeussere Block bleibt die normale, mittige Inhaltsspalte. Die blaue
 * Flaeche traegt die Ueberschrift selbst.
 *
 * Der naheliegende Weg - dem Block selbst die blaue Flaeche geben und ihn
 * linksbuendig setzen - scheitert an WordPress: Der Blockeditor zentriert
 * jeden Block in einer begrenzten Spalte mit "margin-left: auto !important".
 * Dagegen haette nur ein zweites "!important" geholfen, und das haette die
 * Plakette aus der Spalte heraus an den Fensterrand gezogen.
 */
/*
 * Kein Abstand nach unten: der Untertitel folgt in der Vorlage dicht auf die
 * Plakette (15 bis 19px). Die 40px hier haben zusammen mit weiteren
 * Aussenabstaenden 98px ergeben.
 */
.abschnitt-plakette {
  margin-block: 0;
}

/*
 * Nur die Plakette ragt in den Aufmacher hinein, nicht der ganze Abschnitt.
 *
 * In der Vorlage: Video von y0 bis y1252, Plakette ab y1087 - also 165px
 * Ueberlappung. Zog man dafuer den gesamten Folgeabschnitt hoch, legte sich
 * dessen beiger Hintergrund ueber die unteren 165px des Aufmachers und
 * schnitt ihn optisch ab. Deshalb bekommt die Plakette selbst den negativen
 * Abstand.
 *
 * z-index 2 haelt sie ueber dem Video, aber unter dem Kopfbereich (z-index 100).
 */
.unterseite-hero + * > .abschnitt-plakette:first-child,
.unterseite-hero + .abschnitt-plakette {
  margin-top: -165px;
  position: relative;
  z-index: 2;
}

.abschnitt-plakette h2 {
  background: var(--piq-blue);
  box-sizing: border-box;
  color: #fff;
  font-family: "piq-nunito", Arial, Helvetica, sans-serif;
  font-size: 40px;
  font-weight: 300;
  line-height: 1.2;
  margin: 0;
  max-width: 491px;
  /* 15px seitlich: so bleiben 461px Textbreite wie in der Vorlage */
  padding: 0 15px 4px;
  /*
   * 134px hoch, am Original nachgemessen (docs/layout-original.md).
   *
   * Der Text steht darin NICHT mittig, sondern unten: Kasten von y1087 bis
   * y1221, Textzeile von y1167 bis y1217 - also 4px Rand nach unten und rund
   * 80px darueber. Genau dieser hohe Kopfraum laesst den Kasten in der
   * Vorlage so massig wirken.
   */
  align-items: flex-end;
  /*
   * Schlagschatten nach optischem Befund. Im Original ist er im DOM nicht
   * auffindbar - weder als box-shadow noch als Filter oder Pseudo-Element;
   * Wix erzeugt ihn vermutlich in der Rasterung des Abschnitts. Die Werte
   * sind daher nachempfunden, nicht gemessen.
   */
  box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.25);
  display: flex;
  min-height: 134px;
}

/*
 * Ueberschriften in Schreibschrift.
 *
 * Die Vorlage nutzt auf den Unterseiten dieselben beiden Schreibschriften wie
 * auf der Startseite: Dancing Script fuer die Seitenueberschrift, Caveat fuer
 * die Ueberschrift auf der blauen Plakette. Der Paragrafenzusatz steht klein
 * daneben beziehungsweise darunter.
 */
/*
 * Der Selektor nennt die Textspalte mit, sonst gewinnt die allgemeine Regel
 * ".unterseite-hero__text > h1" und die Ueberschrift stuende in Nunito.
 */
.unterseite-hero__text > h1.schreib-titel,
.schreib-titel {
  color: #22495a;
  font-family: "piq-script", "Segoe Script", cursive;
  font-size: 40px;
  font-weight: 400;
  line-height: 1.2;
  margin: 0 0 18px;
}

.schreib-titel .schreib-zusatz {
  color: #414141;
  font-family: "piq-forum", Georgia, "Times New Roman", serif;
  font-size: 16px;
  white-space: nowrap;
}

.abschnitt-plakette h2.schreib-plakette {
  font-family: "piq-caveat", "Segoe Script", cursive;
  font-size: 40px;
  font-weight: 400;
}

.abschnitt-zusatz {
  color: #414141;
  font-family: "piq-forum", Georgia, "Times New Roman", serif;
  font-size: 16px;
  /* 17px Abstand zur Plakette, am Original gegengemessen. */
  margin: 17px 0 34px;
}

/* Der Zusatz unter "Kontakt" steht in der Vorlage zurueckhaltender */
.abschnitt-zusatz--leise {
  color: #6d6d6b;
  font-family: "piq-caudex", Georgia, "Times New Roman", serif;
}

/*
 * Die Niederlassungen kommen als fertiger Abschnitt von der Startseite.
 * Hier nur der Abstand; Spalten, Ueberschriften und WhatsApp-Knoepfe bringen
 * ihre Gestaltung aus dem Startseiten-Abschnitt mit.
 */
.niederlassungen {
  margin-bottom: 50px;
}

/*
 * Niederlassungen dreispaltig.
 *
 * Die Vorlage stellt sie in drei Spalten zu je 234px nebeneinander. Als
 * Mehrspaltensatz bleibt die Liste im Editor eine ganz normale Folge von
 * Absaetzen - der Kunde kann eine Niederlassung ergaenzen, ohne sich mit
 * Spalten auseinanderzusetzen.
 */
.standort-spalten,
.beratung-standorte {
  column-gap: 96px;
  columns: 3;
  font-size: 18px;
  margin-bottom: 40px;
}

.standort-spalten p,
.beratung-standorte p {
  break-inside: avoid;
  margin: 0 0 6px;
}

/* Ortsnamen als Abschnittsmarke, 22px wie in der Vorlage */
.standort-spalten p:first-child {
  font-size: 22px;
}

/*
 * Bildkomposition: derselbe Baustein wie auf der Startseite.
 *
 * .founder-collage, .founder-photo, .founder-slider, .founder-track,
 * .founder-slide und .founder-work sind bereits weiter oben beschrieben. Hier
 * steht nur, was sich auf dieser Seite unterscheidet:
 *
 *   - kein kununu-Siegel, kein Ukraine-Bild, keine Unterschrift
 *   - Fotos in Farbe statt in Grau
 *   - das Ganze sitzt weiter oben, weil darueber kein Gruenderwort steht
 *
 * Die waagerechten Werte bleiben unveraendert: Laufband bei 527px, kleines
 * Foto bei 411px innerhalb der Inhaltsspalte - genau die Werte, die auch am
 * Original dieser Seite gemessen wurden.
 */
.beratung-kurse {
  margin-bottom: 50px;
  min-height: 620px;
  position: relative;
}

.beratung-kurse__text {
  /* 384px Textbreite wie in der Vorlage */
  max-width: 384px;
}

.beratung-collage .founder-photo {
  top: 0;
}

.beratung-collage .founder-work {
  top: 143px;
}

/* Das petrolfarbene Quadrat; auf der Startseite traegt es die Unterschrift */
.beratung-collage .founder-photo figcaption {
  height: 512px;
  left: -20px;
  top: 46px;
}

/* Fotos in Farbe - die Graufaerbung gehoert zum Gruenderwort der Startseite */
.beratung-collage .founder-slide {
  filter: none;
}

@media (max-width: 980px) {
  /*
   * Auf schmalen Geraeten kann sich nichts ueberlappen, ohne unlesbar zu
   * werden. Dort steht die Komposition schlicht unter dem Text.
   */
  .beratung-kurse {
    min-height: 0;
  }

  .beratung-collage {
    margin-top: 30px;
    min-height: 560px;
    position: relative;
  }

  .beratung-collage .founder-photo {
    left: 0;
  }

  .beratung-collage .founder-work,
  .beratung-collage .founder-photo figcaption {
    display: none;
  }
}

/* =========================================================================
   /bewerbung/ - Karriere
   ====================================================================== */

/*
 * Das kununu-Siegel sitzt in der Vorlage auf der Kante zwischen Bild und
 * Textspalte, 162 x 213 gross.
 */
.bewerbung-siegel {
  left: 50%;
  margin: 0;
  position: absolute;
  top: 247px;
  transform: translateX(-60px);
  width: 162px;
  z-index: 2;
}

.bewerbung-siegel img {
  display: block;
  height: auto;
  width: 162px;
}

/*
 * Bewerbungsknopf.
 *
 * Schrift in Weiss statt Schwarz: Schwarz auf dem dunklen Rot der Vorlage
 * erreicht nur 2.3:1 und ist damit nicht lesbar (WCAG 1.4.3 verlangt 4.5:1).
 * Weiss kommt auf 8.8:1.
 */
.bewerben-knopf {
  margin: 30px 0 0;
}

/* Der Knopf-Baustein schrumpft sonst auf die Textbreite */
.bewerben-knopf .wp-block-button {
  max-width: 400px;
  width: 100%;
}

.bewerben-knopf .wp-block-button__link {
  background: #990906;
  border-radius: 0;
  color: #fff;
  display: block;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.12em;
  line-height: 40px;
  max-width: 400px;
  padding: 0;
  text-align: center;
}

.bewerben-knopf .wp-block-button__link:hover,
.bewerben-knopf .wp-block-button__link:focus-visible {
  background: #7a0705;
}

/*
 * Offene Stellen zweispaltig. Die Stellenbezeichnungen sind in der Vorlage
 * gegenueber dem Einleitungssatz eingerueckt.
 */
.stellen-liste {
  column-gap: 114px;
  columns: 2;
  margin-bottom: 50px;
}

.stellen-liste p {
  break-inside: avoid;
  font-size: 20px;
  line-height: 1.1;
  margin: 0 0 22px;
}

/* =========================================================================
   Beitragsseite

   Gemessen an https://www.pflege2.de/post/faces-mit-stella-steil
   (Fenster 1626px):

     Flaeche       980 breit, Weiss mit 29% ueber Creme = #f7f3ef
     Kategorien    980 x 80 in Sand #d8c7bd, Eintraege 18px Questrial
                   in #574f4b (4.9:1 auf Sand)
     Kopfzeile     14px, Datum und Lesezeit
     Ueberschrift  40px Caudex #414141
     Textspalte    740 breit, 120px vom Rand der Flaeche
     Fliesstext    18px Forum #414141
     Zitat         24px Forum, 3px Rahmen links in #486573
     Bilder        528 breit, mittig in der Textspalte
   ====================================================================== */

.beitrag-flaeche {
  background: #f7f3ef;
  box-sizing: border-box;
  margin-inline: auto;
  max-width: 980px;
  padding-bottom: 90px;
}

.beitrag-kategorien {
  background: #d8c7bd;
  padding: 27px 20px;
}

.beitrag-kategorien ul {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.beitrag-kategorien a {
  color: #574f4b;
  font-family: "piq-questrial", Arial, Helvetica, sans-serif;
  font-size: 18px;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.beitrag-kategorien a:hover,
.beitrag-kategorien a:focus-visible {
  text-decoration: underline;
}

/* Die aufgeschlagene Kategorie bleibt erkennbar, auch ohne Farbe */
.beitrag-kategorien a[aria-current="page"] {
  font-weight: 700;
  text-decoration: underline;
}

/* 780 abzueglich 2x20 Innenabstand ergibt die gemessenen 740 Textbreite */
.beitrag-inhalt {
  box-sizing: border-box;
  margin-inline: auto;
  max-width: 780px;
  padding: 57px 20px 0;
}

.beitrag-kopf {
  color: #414141;
  font-family: "piq-questrial", Arial, Helvetica, sans-serif;
  font-size: 14px;
  margin: 0 0 22px;
}

.beitrag-inhalt .wp-block-post-title {
  color: #414141;
  font-family: "piq-caudex", Georgia, "Times New Roman", serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 1.25;
  margin: 0 0 44px;
  max-width: none;
}

.beitrag-inhalt .entry-content p,
.beitrag-inhalt .entry-content li {
  color: #414141;
  font-family: "piq-forum", Georgia, "Times New Roman", serif;
  font-size: 18px;
  line-height: 1.5;
  margin: 0 0 24px;
}

/*
 * Zwischenueberschriften sehen aus wie fetter Fliesstext - so macht es die
 * Vorlage: 18px, fett, dieselbe Schrift. Bei uns sind es trotzdem echte
 * Ueberschriften, damit die Gliederung fuer Screenreader und Suchmaschinen
 * lesbar bleibt.
 */
.beitrag-inhalt .entry-content h2,
.beitrag-inhalt .entry-content h3 {
  color: #414141;
  font-family: "piq-forum", Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  margin: 34px 0 12px;
}

/* Der Name in der Zeile unter dem Titel */
.beitrag-inhalt .beitrag-vorspann strong {
  font-weight: 700;
}

/* Autorenzeile kleiner, wie in der Vorlage */
.beitrag-inhalt .entry-content p.beitrag-autor {
  font-size: 14px;
  margin-top: 34px;
}

.beitrag-inhalt .entry-content blockquote {
  border-left: 3px solid var(--piq-blue);
  color: #414141;
  font-family: "piq-forum", Georgia, "Times New Roman", serif;
  font-size: 24px;
  line-height: 1.4;
  margin: 34px 0;
  padding: 6px 0 6px 18px;
}

.beitrag-inhalt .entry-content blockquote p {
  font-size: inherit;
  margin: 0;
}

/* Bilder mittig und deutlich schmaler als die Textspalte */
.beitrag-inhalt .entry-content .wp-block-image {
  margin: 34px auto;
  max-width: 528px;
}

.beitrag-inhalt .entry-content .wp-block-image img {
  display: block;
  height: auto;
  width: 100%;
}

/*
 * Bildbeschriftung, 14px wie in der Vorlage.
 *
 * Bewusst nicht kursiv und nicht heller: Bei 14px waere beides schwerer zu
 * lesen, und die Vorlage setzt sie ebenfalls normal in #414141.
 */
.beitrag-inhalt .entry-content figcaption {
  color: #414141;
  font-family: "piq-questrial", Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  margin: 10px 0 0;
  text-align: left;
}

/* -------------------------------------------------- Beitragsliste

   Gemessen an https://www.pflege2.de/blog/categories/faces:

     Karte     Bild 460 x 345 links, Textflaeche 480 x 335 rechts,
               5px ueberlappend
     Datum     12px #486573, daneben die Lesezeit
     Marke     Kategorie weiss auf #486573, 14px
     Titel     28px Caudex #22495a
     Anriss    16px #486573, drei Zeilen
     Abstand   365px von Karte zu Karte
   ------------------------------------------------------------------------ */

.beitrag-flaeche--liste {
  background: #fff;
}

/* Auf den Listenseiten ist die Kopfleiste heller als auf der Beitragsseite */
.beitrag-flaeche--liste .beitrag-kategorien {
  background: rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid #ded7d1;
}

.beitrag-flaeche--liste .beitrag-kategorien a {
  color: #22495a;
}

.beitrag-flaeche--liste .beitrag-kategorien a[aria-current="page"] {
  color: #182226;
}

.beitragsliste-huelle {
  padding: 20px;
}

/*
 * 20px Abstand von Karte zu Karte: mit je 5px Rahmen ergibt das die
 * gemessenen 365px Rasterschritt und 10px sichtbare Luecke. Die aeusseren
 * Rahmen ragen in den Innenabstand der Huelle, dort ist Platz.
 */
.beitragsliste {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/*
 * Rahmen um die Karte.
 *
 * Die Vorlage setzt "5px solid rgba(232, 230, 230, 0.31)". Ueber der weissen
 * Flaeche ergibt das rechnerisch #f8f7f7 - kaum zu sehen. Sichtbar wird der
 * Rahmen erst dadurch, dass die Karte selbst cremefarben hinterlegt ist und
 * der Rahmen die Kante zwischen Karte und Flaeche zeichnet.
 *
 * Deshalb hier die ausgerechnete Farbe als deckender Wert: gleiche Wirkung,
 * unabhaengig davon, was hinter der Karte liegt.
 */
.beitragskarte {
  /*
   * Als Schlagschatten mit Ausdehnung statt als Rahmen: Ein Rahmen wuerde
   * die Karte entweder breiter machen oder Bild und Textflaeche um 5px
   * schmaler - beides weicht von den gemessenen 460 x 345 und 480 x 335 ab.
   * Der Schatten legt sich aussen an und laesst das Raster unberuehrt.
   */
  box-shadow: 0 0 0 5px #eceaea;
  display: grid;
  grid-template-columns: 460px 1fr;
}

.beitragskarte__bild,
.beitragskarte__bild a {
  display: block;
  height: 100%;
  overflow: hidden;
}

.beitragskarte__bild img,
.beitragskarte__leer {
  aspect-ratio: 460 / 345;
  background: var(--piq-cream);
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/*
 * Die Textflaeche schiebt sich in der Vorlage 5px ueber das Bild und steht
 * oben und unten je 5px eingerueckt.
 */
.beitragskarte__text {
  background: rgba(255, 255, 255, 0.86);
  box-sizing: border-box;
  margin: 5px 0 5px -5px;
  /* 10px links, 15px rechts - so steht der Text wie in der Vorlage */
  padding: 35px 15px 20px 10px;
}

.beitragskarte__daten {
  color: #486573;
  display: flex;
  font-family: "piq-forum", Georgia, "Times New Roman", serif;
  font-size: 12px;
  gap: 8px;
  margin: 0 0 12px;
}

.beitragskarte__marke {
  background: var(--piq-blue);
  color: #fff;
  display: inline-block;
  font-family: "piq-forum", Georgia, "Times New Roman", serif;
  font-size: 14px;
  padding: 4px 12px;
  text-decoration: none;
}

.beitragskarte__titel {
  font-family: "piq-caudex", Georgia, "Times New Roman", serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.25;
  margin: 16px 0 12px;
}

.beitragskarte__titel a {
  color: #22495a;
  text-decoration: none;
}

.beitragskarte__titel a:hover,
.beitragskarte__titel a:focus-visible {
  text-decoration: underline;
}

/*
 * Anriss auf drei Zeilen begrenzt, wie in der Vorlage. line-clamp braucht
 * die alte Schreibweise mit -webkit-, andere Browser kennen sie inzwischen
 * ebenfalls.
 */
.beitragskarte__anriss {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  color: #486573;
  display: -webkit-box;
  font-family: "piq-forum", Georgia, "Times New Roman", serif;
  font-size: 16px;
  line-height: 1.5;
  margin: 0 0 18px;
  overflow: hidden;
}

.beitragskarte__zahlen {
  align-items: center;
  border-top: 1px solid #ded7d1;
  color: #486573;
  display: flex;
  font-family: "piq-questrial", Arial, Helvetica, sans-serif;
  font-size: 14px;
  justify-content: space-between;
  margin: 0;
  padding-top: 12px;
}

.beitragsliste-leer {
  color: #414141;
  font-family: "piq-forum", Georgia, "Times New Roman", serif;
  font-size: 18px;
  padding: 40px 0;
}

.beitragsliste-blaettern ul {
  display: flex;
  gap: 14px;
  justify-content: center;
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
}

.beitragsliste-blaettern a,
.beitragsliste-blaettern span {
  color: #22495a;
  font-family: "piq-questrial", Arial, Helvetica, sans-serif;
  font-size: 16px;
  padding: 8px 12px;
}

.beitragsliste-blaettern .current {
  font-weight: 700;
  text-decoration: underline;
}

@media (max-width: 760px) {
  .beitragskarte {
    grid-template-columns: 1fr;
  }

  .beitragskarte__text {
    margin: -5px 0 0;
    padding: 24px 16px 16px;
  }

  .beitragskarte__titel {
    font-size: 22px;
  }
}

/* -------------------------------------------------- Abschluss des Beitrags */

.beitrag-fuss {
  margin-top: 40px;
}

.beitrag-marken {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
}

.beitrag-marken a {
  color: #414141;
  font-family: "piq-forum", Georgia, "Times New Roman", serif;
  font-size: 18px;
  text-decoration: none;
}

.beitrag-marken a:hover,
.beitrag-marken a:focus-visible {
  text-decoration: underline;
}

.beitrag-fuss hr {
  background: #ded7d1;
  border: 0;
  height: 1px;
  margin: 0 0 14px;
}

.beitrag-zahlen {
  align-items: center;
  color: #414141;
  display: flex;
  font-family: "piq-questrial", Arial, Helvetica, sans-serif;
  font-size: 14px;
  justify-content: space-between;
  margin: 0;
}

/*
 * Der Herzknopf ist derselbe Baustein wie in den FACES-Kacheln - dieselbe
 * Klasse, dieselbe Verarbeitung in site.js.
 */
.beitrag-herz {
  align-items: center;
  background: none;
  border: 0;
  color: #414141;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  gap: 8px;
  padding: 6px;
}

.beitrag-herz::after {
  color: #943814;
  content: "\2665";
  font-size: 16px;
}

.beitrag-herz:focus-visible {
  outline: 3px solid #caa36d;
  outline-offset: 2px;
}

/* ------------------------------------------------- Aktuelle Beitraege */

.beitrag-weitere {
  margin-top: 46px;
}

.beitrag-weitere__kopf {
  align-items: baseline;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.beitrag-weitere__kopf h2 {
  color: #414141;
  font-family: "piq-forum", Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-weight: 400;
  margin: 0;
}

.beitrag-weitere__kopf a {
  color: #414141;
  font-family: "piq-questrial", Arial, Helvetica, sans-serif;
  font-size: 14px;
}

.beitrag-weitere__reihe {
  display: grid;
  gap: 33px;
  grid-template-columns: repeat(3, 1fr);
}

.beitrag-karte a {
  color: #414141;
  display: block;
  text-decoration: none;
}

.beitrag-karte img,
.beitrag-karte__leer {
  aspect-ratio: 291 / 164;
  background: var(--piq-cream);
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.beitrag-karte__titel {
  display: block;
  font-family: "piq-forum", Georgia, "Times New Roman", serif;
  font-size: 18px;
  line-height: 1.35;
  padding: 18px 4px 0;
}

.beitrag-karte a:hover .beitrag-karte__titel,
.beitrag-karte a:focus-visible .beitrag-karte__titel {
  text-decoration: underline;
}

@media (max-width: 760px) {
  .beitrag-weitere__reihe {
    grid-template-columns: 1fr;
  }

  .beitrag-inhalt {
    padding: 40px 20px 0;
  }

  .beitrag-inhalt .wp-block-post-title {
    font-size: 28px;
  }

  .beitrag-kategorien {
    padding: 18px 20px;
  }
}

/* =========================================================================
   /kontakt/
   ====================================================================== */

/*
 * Kopfband: das Empfangsfoto ueber die volle Breite, 541px hoch, darauf eine
 * durchscheinende Karte mit der Ueberschrift.
 *
 * Die Vorlage nimmt fuer die Karte 30% Deckkraft. Die Ueberschrift steht
 * damit unmittelbar auf dem Foto und ist je nach Bildstelle kaum lesbar -
 * gemessen unter 3:1. Hier sind es 88%, wodurch die Ueberschrift auf
 * gesicherte 8.6:1 kommt (WCAG 1.4.3). Das Foto bleibt sichtbar.
 */
/*
 * Der Cover-Baustein zentriert seinen Inhalt senkrecht. Die Vorlage setzt die
 * Karte 86px unter die Bandkante; ohne diese Ausrichtung sass sie 54px zu
 * tief.
 */
.kontakt-kopf .wp-block-cover__inner-container {
  align-self: start;
  /* 72 statt 86: der Cover-Baustein bringt selbst 14px Innenabstand mit */
  padding-top: 72px;
  width: 100%;
}

.kontakt-kopf__karte {
  background: rgba(244, 239, 235, 0.88);
  box-sizing: border-box;
  margin-inline: auto;
  max-width: 600px;
  padding: 72px 53px 137px;
}

.kontakt-kopf__karte h1 {
  color: #414141;
  font-family: "piq-nunito", Arial, Helvetica, sans-serif;
  font-size: 56px;
  font-weight: 300;
  line-height: 1.05;
  margin: 0;
}

/* Ueberschrift ohne blaue Flaeche - auf /kontakt/ steht sie frei */
.abschnitt-plakette--schlicht h2 {
  background: none;
  color: #414141;
  padding-left: 0;
  padding-right: 0;
}

/*
 * Weisse Flaeche um das Kontaktformular, 630 breit wie in der Vorlage.
 *
 * Der Selektor nennt den Inhaltsblock mit, sonst gewinnt die allgemeine
 * Regel fuer die Inhaltsspalte und beide Bloecke waeren 980 breit.
 */
.wp-block-post-content > .kontakt-formular {
  background: #fff;
  box-sizing: border-box;
  margin-inline: auto;
  max-width: 630px;
  /* 30px Abstand zum Einleitungstext wie in der Vorlage */
  margin-top: 30px;
  padding: 26px 24px 30px;
}

.wp-block-post-content > .kontakt-vorspann {
  margin-inline: auto;
  max-width: 630px;
}

.kontakt-vorspann p:first-child {
  font-size: 22px;
}

/* Blaues Band ueber der Standortkarte */
/*
 * 200px hoch, am Original nachgemessen. Die Karte darunter ragt 118px in das
 * Band hinein - das ist in der Vorlage so gewollt und kein Fehler. Deshalb
 * traegt der folgende Block einen negativen Aussenabstand.
 */
/*
 * Band und Karte, beide am Original nachgemessen.
 *
 * Band: 1610 breit, 200 hoch, seitlich eingerueckt - es laeuft nicht bis an
 * den Fensterrand. Die Ueberschrift sitzt im oberen Drittel (21px unter der
 * Bandkante), nicht mittig.
 *
 * Die Karte beginnt 82px nach der Bandkante und ragt unten darueber hinaus.
 * Sie ueberlappt also nur den textfreien Teil - kein z-index noetig, und
 * ausdruecklich kein Flex-Layout: das wuerde die Ueberschrift auf ihre
 * Inhaltsbreite zusammenziehen.
 */
/*
 * Der Selektor nennt alignfull ausdruecklich mit: sonst gewinnt deren Regel
 * mit calc(50% - 50vw) und zieht das Band an den linken Fensterrand.
 */
.standorte-band,
.standorte-band.alignfull {
  background: var(--piq-blue);
  box-sizing: border-box;
  margin-bottom: 0;
  /*
   * Linksbuendig mit dem Kopfbereich und mitwachsend.
   *
   * Der Kopf beginnt bei 80px und laeuft bis zum rechten Rand; das Band
   * folgt derselben Geometrie. Eine feste Breite von 1610px liess es bei
   * breiten Fenstern in der Mitte stehen, statt mit dem Kopf zu fluchten.
   */
  margin-inline: 80px;
  max-width: none;
  min-height: 200px;
  padding: 21px 20px 0;
  width: auto;
}

.standorte-band + * {
  margin-top: -118px;
}

/*
 * Caudex, nicht Nunito Sans: am echten Original nachgemessen. Der Nachbau
 * hatte hier den Avenir-Ersatz eingesetzt, obwohl die Vorlage an dieser
 * Stelle eine Serifenschrift verwendet.
 */
.standorte-band h2 {
  color: #fff;
  font-family: "piq-caudex", Georgia, "Times New Roman", serif;
  font-size: 40px;
  font-weight: 400;
  margin: 0;
  /*
   * Die Karte darunter wird ueber einen negativen Abstand hochgezogen und
   * stuende sonst vor der Ueberschrift - sie kommt im Quelltext spaeter.
   */
  position: relative;
  text-align: center;
  z-index: 2;
}

@media (max-width: 760px) {
  .standort-spalten {
    columns: 1;
  }

  .kontakt-kopf__karte {
    padding: 40px 24px;
  }

  .kontakt-kopf__karte h1 {
    font-size: 32px;
  }

  .standorte-band h2 {
    font-size: 28px;
  }

  .stellen-liste {
    columns: 1;
  }

  .bewerbung-siegel {
    left: auto;
    position: static;
    transform: none;
  }
}

/*
 * 384px Textbreite wie in der Vorlage. Bei voller Spaltenbreite reichte der
 * Text bis unter das kleine Foto, das links aus der Bildkomposition ragt.
 */
.beratung-kurse p {
  font-size: 20px;
  /* 22px wie im Original gemessen, nicht 1.35 (= 27px). */
  line-height: 1.1;
  margin: 0 0 18px;
  max-width: 384px;
}

@media (max-width: 760px) {
  .beratung-standorte {
    columns: 1;
  }
}

@media (max-width: 980px) {
  .unterseite-hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .unterseite-hero__bild {
    min-height: 320px;
  }

  .unterseite-hero__text {
    padding: 40px 20px;
  }

  .abschnitt-plakette h2 {
    font-size: 28px;
  }
}

/* =========================================================================
   Bilderkarussell

   Aufwertung einer normalen core/gallery mit der Klasse "piq-karussell".
   Ohne JavaScript bleibt es eine seitlich schiebbare Reihe; assets/js/
   karussell.js verdoppelt die Bilder, startet den Lauf und ergaenzt den
   Knopf zum Anhalten (WCAG 2.2.2).
   ====================================================================== */

.piq-karussell {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
  overflow: hidden;
  position: relative;
  width: 100vw;
}

/*
 * Karussell innerhalb einer Spalte, nicht ueber die volle Fensterbreite.
 * Auf /beratung/ steht es neben dem Text und darf seine Spalte nicht
 * verlassen.
 */
.piq-karussell.piq-karussell--imfluss {
  margin-left: 0;
  margin-right: 0;
  max-width: 100%;
  width: 100%;
}

/*
 * Ohne JavaScript ist die Galerie eine seitlich schiebbare Reihe. Das gilt
 * fuer beide Bauformen: die alte Liste und die neuere Fassung, in der die
 * Bilder unmittelbar in der Galerie liegen ("has-nested-images").
 */
.piq-karussell.has-nested-images,
.piq-karussell .blocks-gallery-grid,
.piq-karussell ul,
.piq-karussell__spur {
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scroll-snap-type: x proximity;
}

/* Sobald das Skript die Spur angelegt hat, laeuft sie */
.piq-karussell--bereit.has-nested-images {
  display: block;
  overflow-x: hidden;
}

.piq-karussell--bereit .blocks-gallery-grid,
.piq-karussell--bereit ul,
.piq-karussell--bereit .piq-karussell__spur {
  animation: piq-lauf linear infinite;
  overflow-x: hidden;
  width: max-content;
  /*
   * will-change haelt die Bewegung auf einer eigenen Ebene, sodass der
   * Browser bei jedem Bild nur verschiebt statt neu zu berechnen.
   */
  will-change: transform;
}

/* Der Rahmen begrenzt Neuberechnungen auf sich selbst */
.piq-karussell--bereit {
  contain: layout paint;
}

/*
 * Die Kacheln.
 *
 * ":not(#individual-image)" steht hier mit Absicht. Der Galerie-Baustein von
 * WordPress benutzt denselben Kunstgriff, um seine Breitenangabe schwer
 * ueberschreibbar zu machen:
 *
 *   .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image)
 *
 * Der Kennungsteil zaehlt bei der Gewichtung mit, obwohl es kein Element
 * dieser Kennung gibt. Ohne denselben Zusatz verlieren unsere Regeln - die
 * Kacheln wuchsen dann auf ein Vielfaches ihrer Groesse oder fielen auf Hoehe
 * null zusammen.
 */
.wp-block-gallery.piq-karussell figure.wp-block-image:not(#individual-image),
.piq-karussell li {
  display: block;
  flex: 0 0 auto;
  margin: 0;
  scroll-snap-align: start;
  width: 354px;
}

.wp-block-gallery.piq-karussell figure.wp-block-image:not(#individual-image) img,
.piq-karussell li img {
  display: block;
  height: 472px;
  object-fit: cover;
  width: 354px;
}

@keyframes piq-lauf {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    /* Genau die halbe Spur: die zweite Haelfte ist die Kopie der ersten */
    transform: translate3d(-50%, 0, 0);
  }
}

.piq-karussell__knopf {
  background: rgba(24, 34, 38, 0.82);
  border: 0;
  border-radius: 50%;
  bottom: 14px;
  cursor: pointer;
  height: 44px;
  position: absolute;
  right: 14px;
  width: 44px;
  z-index: 2;
}

/* Wiedergabe-Dreieck, wenn angehalten */
.piq-karussell__knopf::before {
  border-color: transparent transparent transparent #fff;
  border-style: solid;
  border-width: 9px 0 9px 14px;
  content: "";
  display: block;
  margin: 0 auto 0 16px;
}

/* Zwei Balken, wenn es laeuft */
.piq-karussell__knopf--laeuft::before {
  border: 0;
  border-left: 5px solid #fff;
  border-right: 5px solid #fff;
  height: 16px;
  margin: 0 auto;
  width: 16px;
}

.piq-karussell__knopf:focus-visible {
  outline: 3px solid #caa36d;
  outline-offset: 2px;
}

/*
 * Breite Kacheln.
 *
 * Auf /diversity/ wechseln in der Vorlage zwei Flyer in Spaltenbreite
 * (975 x 412) statt der schmalen Teamfotos. Gleiches Bauteil, andere
 * Kachelgroesse.
 */
.wp-block-gallery.piq-karussell--breit figure.wp-block-image:not(#individual-image),
.wp-block-gallery.piq-karussell--breit figure.wp-block-image:not(#individual-image) img {
  width: 975px;
}

.wp-block-gallery.piq-karussell--breit figure.wp-block-image:not(#individual-image) img {
  height: 412px;
}

/* Die beiden Leitbilder sind hochformatig */
.wp-block-gallery.piq-karussell--leitbild figure.wp-block-image:not(#individual-image),
.wp-block-gallery.piq-karussell--leitbild figure.wp-block-image:not(#individual-image) img {
  width: 757px;
}

.wp-block-gallery.piq-karussell--leitbild figure.wp-block-image:not(#individual-image) img {
  height: 1072px;
  object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
  .piq-karussell--bereit .blocks-gallery-grid,
  .piq-karussell--bereit ul {
    animation: none;
    overflow-x: auto;
  }
}

@media (max-width: 760px) {
  .piq-karussell figure,
  .piq-karussell li,
  .piq-karussell img {
    width: 240px;
  }

  .piq-karussell img {
    height: 320px;
  }
}

/* =========================================================================
   /kiosk/ - InklusionsKiosk

   Werte am Original gemessen: Band 996px hoch, randlos; erste Zeile
   Josefin Sans 700 in 62px auf #ed1566 mit doppeltem Schatten, 28px unter
   der Bandkante; zweite Zeile 60px in Weiss, 166px darunter.
   Siehe docs/unterseiten-vermessung.md.
   ====================================================================== */

/* Randlos: der Abschnitt bricht aus der 980er-Spalte aus */
.wp-block-post-content > .kiosk-band {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
  width: 100vw;
}

/*
 * Abstand als Innenabstand des Containers, nicht als Aussenabstand der
 * Ueberschrift: Aussenabstaende fallen im Cover-Block mit dem Container
 * zusammen und kommen dadurch nicht an.
 */
.kiosk-band .wp-block-cover__inner-container {
  align-self: start;
  /* 14px, nicht 28: der Cover-Block bringt selbst 14px Innenabstand mit */
  padding-top: 14px;
  width: 100%;
}

.kiosk-titel {
  color: #ed1566;
  font-family: "piq-josefin", "Trebuchet MS", sans-serif;
  font-size: 62px;
  font-weight: 700;
  /* 1.5 ergibt die gemessenen 93px Zeilenhoehe der Vorlage */
  line-height: 1.5;
  margin: 0;
  /* Doppelter Versatzschatten wie in der Vorlage */
  text-shadow:
    3px 3px 0 rgba(10, 189, 240, 0.3),
    -3px -3px 0 rgba(254, 1, 1, 0.3);
}

.kiosk-hinweis {
  color: #fcfcfc;
  font-family: "piq-nunito", Arial, Helvetica, sans-serif;
  font-size: 60px;
  font-weight: 800;
  line-height: 1.18;
  margin: 166px 0 0;
}

/* =========================================================================
   /diversity/

   Gemessen an der Vorlage: Inhaltsspalte 980, dazwischen randlose Baender.
   Ueberschriften Avenir Light 45–56px (Ersatz: Nunito Sans 300),
   Fliesstext Questrial 18px, Hervorhebungen 22–23px.

   Textfarbe: Die Vorlage nutzt #9f7bed. Das erreicht auf Weiss nur 3.22:1
   und reicht damit fuer Fliesstext nicht (WCAG 1.4.3 verlangt 4.5:1).
   #8759e8 ist derselbe Farbton eine Spur dunkler und kommt auf 4.54:1.
   ====================================================================== */

.diversity-text {
  color: #8759e8;
}

.diversity-text strong,
.diversity-text b {
  font-weight: 700;
}

/* Hervorgehobener Satz und Namenszeile */
.diversity-versprechen {
  color: #8759e8;
  font-size: 22px;
  font-weight: 700;
}

.diversity-name {
  color: #8759e8;
  font-size: 18px;
  font-weight: 700;
}

.diversity-willkommen-zeile {
  color: #8759e8;
  font-size: 23px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
}

.diversity-willkommen .diversity-text {
  font-size: 23px;
}

/* Weisse Textflaeche auf dem Rauch-Band */
.diversity-karte {
  background: #fff;
  padding: 70px 60px;
}

.diversity-willkommen {
  background: #fff;
  margin-inline: auto;
  max-width: 918px;
  padding: 80px 90px;
}

.diversity-h2 {
  font-size: 45px;
  margin: 0 0 24px;
}

.diversity-h2-gross {
  font-size: 56px;
  margin: 70px 0 24px;
}

.diversity-spalten {
  gap: 60px;
}

.diversity-portraet img {
  display: block;
  height: 717px;
  object-fit: cover;
  width: 100%;
}

/* Der helle Abschlussabschnitt liegt hinter dem Bannerstreifen */
.diversity-abschluss {
  background: #e8e6e6;
  padding-bottom: 80px;
}

.diversity-bannerstreifen img {
  display: block;
  height: 130px;
  object-fit: cover;
  width: 100%;
}

.diversity-regenbogen .wp-block-cover__image-background {
  object-fit: cover;
}

@media (max-width: 980px) {
  .diversity-h2 {
    font-size: 32px;
  }

  .diversity-h2-gross {
    font-size: 36px;
  }

  .diversity-karte {
    padding: 40px 28px;
  }

  .diversity-willkommen {
    padding: 40px 28px;
  }

  .diversity-portraet img {
    height: auto;
  }
}

.diversity-ueberschrift {
  color: #414141;
  font-family: "piq-nunito", Arial, Helvetica, sans-serif;
  font-weight: 300;
  line-height: 1.15;
}

.diversity-band {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
  width: 100vw;
}

@media (max-width: 760px) {
  .kiosk-titel {
    font-size: 34px;
  }

  .kiosk-hinweis {
    font-size: 32px;
    margin-top: 80px;
  }

  .wp-block-post-content > .kiosk-band {
    min-height: 60vh !important;
  }
}

@media (max-width: 980px) {
  .site-header {
    position: sticky;
  }

  .site-header__nav {
    margin-left: 0;
    min-height: 96px;
    width: 100%;
  }

  .brand-mark {
    left: 18px;
    top: 14px;
  }

  .brand-mark img {
    height: auto;
    width: 132px;
  }

  .header-nav {
    align-content: flex-start;
    flex-wrap: wrap;
    height: auto;
    left: 166px;
    right: auto;
    top: 18px;
    width: calc(100% - 184px);
  }

  .header-nav a {
    font-size: 14px;
    line-height: 25px;
    padding: 0 6px;
  }

  .site-header__bar {
    font-size: 14px;
    grid-template-columns: 1fr 190px;
    min-height: 44px;
    width: 100%;
  }

  .hero-care {
    grid-template-columns: 1fr;
  }

  .hero-care,
  .hero-care__video {
    min-height: 0;
  }

  .hero-care__video {
    height: 62vh;
    position: relative;
    top: auto;
  }

  .hero-care__video video {
    height: 100%;
    position: static;
    width: 100%;
  }

  .hero-care__video::after {
    height: 100%;
    position: absolute;
    width: 100%;
  }

  .hero-care__copy {
    max-width: 620px;
    padding: 48px 28px 70px;
  }

  .founder-wrap {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .founder-copy {
    padding-top: 0;
  }

  .founder-name {
    margin-bottom: 34px;
  }

  .founder-collage {
    margin: 0 auto;
    width: min(430px, 100%);
  }

  .locations-map {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .main-shell {
    padding-top: 0;
  }

  .site-header__nav {
    align-items: start;
    display: block;
    min-height: 0;
    padding: 8px 0;
  }

  .brand-mark {
    margin-bottom: 8px;
    position: static;
  }

  .brand-mark img {
    width: 112px;
  }

  .header-nav {
    gap: 10px 14px;
    justify-content: flex-start;
    left: auto;
    position: static;
    top: auto;
    width: auto;
  }

  .header-nav a {
    font-size: 10px;
  }

  .site-header__bar {
    font-size: 10px;
    grid-template-columns: 1fr 128px;
    width: 100%;
  }

  .hero-care__video {
    height: 46vh;
  }

  .hero-care h1 {
    font-size: 28px;
  }

  .hero-care p {
    font-size: 14px;
  }

  .hero-contact {
    align-items: flex-start;
    flex-direction: column;
  }

  /*
   * Die Regeln zur Bildkomposition stehen jetzt weiter unten in einem
   * eigenen Block mit 980px Grenze - siehe "Bildkomposition schmal".
   */

  .competence-tabs,
  .quote-cards,
  .local-columns,
  .faces-row,
  .footer-main {
    grid-template-columns: 1fr;
  }

  /* Die Logoreihe ist eine Flexbox; auf schmalen Geraeten untereinander */
  .footer-badges {
    align-items: center;
    flex-direction: column;
    gap: 26px;
  }

  .footer-badges img:nth-child(1),
  .footer-badges img:nth-child(2),
  .footer-badges img:nth-child(3) {
    max-width: 100%;
  }

  .footer-contact {
    text-align: left;
  }

  .competence-tabs a {
    min-height: 56px;
  }

  .quote-visual,
  .quote-visual img {
    height: 430px;
    min-height: 430px;
  }

  .quote-visual p {
    font-size: 22px;
  }

  .quote-cards {
    margin-top: -28px;
  }

  .local-columns {
    gap: 10px;
    width: min(390px, calc(100% - 40px));
  }

  .faces-row {
    width: min(360px, calc(100% - 40px));
  }

  .faces-pagination {
    width: min(360px, calc(100% - 40px));
  }

  .locations-map {
    height: 520px;
  }

  .map-consent-card {
    padding: 28px 24px 30px;
  }

  .map-consent-card h3 {
    font-size: 26px;
  }

  .map-location-list {
    bottom: 18px;
    left: 14px;
    max-height: 198px;
    max-width: none;
    overflow: auto;
    right: 14px;
    top: auto;
    width: auto;
  }

  .map-location-button {
    min-height: 46px;
  }

  .map-location-button strong {
    font-size: 16px;
  }

  .privacy-map-controls {
    right: 14px;
    top: 14px;
  }

  .privacy-marker-name {
    display: none;
  }

  .site-footer address {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .hero-care__video video {
    display: none;
  }

  .founder-track {
    animation: none;
    transform: translateX(0);
  }
}

/* =========================================================================
   Bildkomposition schmal

   Die Komposition um das Gruenderfoto ist 980 Bildpunkte breit und stellt
   ihre Teile mit festen Koordinaten auf. Sobald weniger Platz da ist, muss
   sie geschlossen auf die schmale Anordnung wechseln.

   Diese Regeln standen frueher bei 760px. Zwischen 761 und 980 griff dann
   nur die Breitenangabe aus dem 980er Block (430px), waehrend die Teile
   darin ihre Koordinaten fuer 980 behielten - Ukraine-Bild, Foto und
   Unterschrift standen bis zu 200 Bildpunkte ausserhalb, die
   Kompetenzleiste lief mitten durch die Komposition.

   Ein eigener Block statt einer Verschiebung ins bestehende 980er
   Regelwerk: er muss nach jenem stehen, um dessen Breitenangabe
   ueberschreiben zu koennen.
   ====================================================================== */

@media (max-width: 980px) {
  .founder-section {
    padding-top: 70px;
  }

  .founder-wrap {
    min-height: 0;
    width: min(430px, calc(100% - 34px));
  }

  .founder-copy {
    left: auto;
    position: static;
    top: auto;
    width: auto;
  }

  .founder-name {
    height: auto;
    margin-bottom: 24px;
    padding: 24px 28px;
    width: 100%;
  }

  .founder-role {
    margin: 14px 0 24px;
  }

  .founder-copy p:not(.founder-role) {
    margin-left: 0;
    width: auto;
  }

  .founder-collage {
    margin-top: 34px;
    min-height: 520px;
    position: relative;
  }

  .rating-card-link {
    left: 0;
    top: 118px;
  }

  .founder-ukraine {
    left: 54px;
    width: 250px;
  }

  .founder-work {
    height: 168px;
    left: 30px;
    top: 312px;
    width: 150px;
  }

  .founder-photo {
    --slide-h: 344px;
    --slide-w: 250px;
    --slide-x-1: -250px;
    --slide-x-2: -500px;
    --slide-x-3: -750px;
    --signature-offset-x: -14px;
    --signature-offset-y: 64px;
    height: 420px;
    left: 112px;
    top: 150px;
    width: 250px;
  }

  .founder-slide {
    height: var(--slide-h);
    width: var(--slide-w);
  }

  .founder-photo figcaption img {
    bottom: 7px;
    height: 42px;
    width: 64px;
  }
}

@media (max-width: 760px) {
  .local-contact {
    min-height: 0;
    width: min(430px, calc(100% - 34px));
  }

  .competence-band {
    background: transparent;
    height: auto;
    margin-top: 40px;
    min-height: 0;
    padding: 0;
    width: 100%;
  }

  .competence-band h2 {
    background: var(--piq-blue);
    font-size: 28px;
    height: 76px;
  }

  .competence-tabs {
    grid-template-columns: 1fr;
    height: auto;
    left: auto;
    padding: 0;
    position: static;
    transform: none;
    width: 100%;
  }

  .competence-tabs a {
    height: auto;
    min-height: 72px;
  }

  .quote-section {
    margin-top: 0;
  }

  .quote-visual {
    height: 620px;
  }

  .quote-media {
    inset: 0;
  }

  .quote-media video {
    height: 100%;
    position: static;
    transform: none !important;
  }

  .quote-visual p {
    bottom: 44px;
    left: 50%;
    min-height: 0;
    width: min(340px, calc(100% - 36px));
  }

  .quote-cards {
    width: calc(100% - 36px);
  }

  .local-card {
    height: 82px;
    margin: 0 0 44px;
    width: 100%;
  }

  .local-card span {
    font-size: 30px;
    padding: 30px 0 0 24px;
  }

  .local-columns {
    grid-template-columns: 1fr;
    margin: 0;
    width: 100%;
  }

  .form-intro {
    margin-top: 54px;
    width: 100%;
  }

  .contact-card {
    min-height: 0;
    width: min(430px, calc(100% - 40px));
  }

  .piq-contact-form,
  .wpcf7 form {
    min-height: 0;
  }

  .faces-row {
    grid-template-columns: 1fr;
    min-height: 0;
    width: min(319px, calc(100% - 40px));
  }

  .faces-row article {
    height: auto;
    min-height: 443.875px;
  }

  .faces-row img {
    aspect-ratio: 319 / 178.875;
    height: auto;
    width: calc(100% + 2px);
  }

  .faces-pagination {
    flex-wrap: wrap;
    width: min(319px, calc(100% - 40px));
  }

  .locations-original h2 {
    font-size: 28px;
    height: auto;
    line-height: normal;
    padding: 20px 12px;
    width: 100%;
  }

  .locations-map {
    height: 520px;
    width: 100%;
  }

  .privacy-map-popup {
    min-width: 210px;
    width: 226px;
  }
}