#wrapper .innerWrap, footer {
    padding-left: 5%;
    padding-right: 5%;
}

/*SLIDER NEU*/

.slick-dots li button::before {
      line-height: 0!important;
      height:12px!important;
      width:12px!important;
      content: ''!important;
      border-radius: 50%!important;
      background-color: #000!important;
      font-size: 0!important;
}

.slick-dots li {
  margin: 0 6px!important;
}

div#c4 {
  padding-top: 20px;
  padding-bottom: 30px;
}
/*ENDE*/

/*FOOTER*/

footer {
    padding-bottom: 60px!important;
}

div#new_footer {
    font-size: 1.3rem!important;
    text-align: center!important;
}

a.impressumlink {
  text-decoration: underline;
}

a:hover.impressumlink {
  color:rgba(255,255,255,0.7)!important;
}

/*ENDE*/

/*Multitouch Newsletterformular BEGIN*/

.close-nl-box {
	background-image: url("../images/cross_wb.png")!important;
}

/*Multitouch Newsletterformular END*/


/*Reference logos: disable hover cursor, fix grid shifts*/
.tx-ppm-projects .listview .reference .image {
    width: 260px;
    height: 145px;
    overflow: hidden;
}
.tx-ppm-projects .listview .reference .image img {
    display: block;
}
.tx-ppm-projects .listview .reference {
    cursor: default;
}
/*ENDE*/

/*Overlay Images*/

#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
    background-image: url(../images/fancybox_sprite.png)!important;
}

.fancybox-nav {
    background: transparent url(../images/blank.gif)!important;
  }

.fancybox-overlay {
    background: url(../images/fancybox_overlay.png)!important;
}

/*ENDE*/

/*STICKY FOOTER - Footer soll bei kurzen Seiten automatisch am unteren Rand des Browserfensters bleiben statt direkt unter dem Content zu "schweben" (matthias.lechner, 2026-09-03)*/

body.multitouch {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body.multitouch > #wrapper {
  flex: 1 0 auto;
  min-width: 0;
  width: 100%; /* explizite Breite noetig: die implizite Flexbox-Stretch-Ausrichtung allein reicht bei diesem breiten Inhalt nicht aus, min-width:0 allein loeste das Problem live nicht (matthias.lechner, 2026-09-06) */
}

body.multitouch > footer {
  flex-shrink: 0;
}

/*ENDE*/

/* =========================================================
   Zwei-Klick-Loesung fuer eingebettete Vimeo-Videos
   Der Player wird erst nach aktivem Klick geladen.
   ========================================================= */
.video-consent {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 0;
  box-sizing: border-box;
  background: none;
  color: #e9eef1;
  text-align: center;
}

/* Bild-Bereich (Vorschaubild + Play-Button), proportional im Videoformat.
   Kein dunkles Overlay mehr noetig, da der Datenschutzhinweis nicht mehr
   ueber dem Bild liegt, sondern als eigene Zeile darunter (siehe
   .video-consent__note). */
.video-consent__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-color: #1c2226;
}

/* innerhalb von Bootstrap-embed-responsive-Wrappern korrekt einpassen */
.embed-responsive > .video-consent {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

.video-consent__play {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  border-radius: 2px;
  background: #009ee3;
  color: #ffffff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  padding: 12px 26px;
  cursor: pointer;
}

.video-consent__play::before {
  content: "\25B6";
  margin-right: 10px;
}

.video-consent__play:hover,
.video-consent__play:focus {
  background: #0089c7;
}

.video-consent__play:focus {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.video-consent__note {
  margin: 0 auto;
  max-width: 44em;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  color: #5b6770;
}

.video-consent__note a {
  color: #009ee3;
  text-decoration: underline;
}

/* Wrapper, die video-consent enthalten, sollen mit dem Inhalt (Bild + Hinweistext)
   mitwachsen statt eine feste 16:9-Hoehe zu erzwingen und den Text abzuschneiden. */
.video-consent-wrapper--auto {
  height: auto !important;
  overflow: visible !important;
  padding-bottom: 0 !important;
  padding-top: 0 !important;
}

/* Manche Landingpages binden eine aeltere, eigene Bootstrap-Version ein, die
   das 16:9-Seitenverhaeltnis nicht per padding-bottom auf dem Wrapper selbst,
   sondern per ::before-Pseudo-Element (padding-top:56.25%) erzeugt. Dieser
   Platzhalter-Block bleibt von der obigen Regel unberuehrt und schiebt die
   Box weiterhin nach unten -- daher hier separat ausblenden. */
.video-consent-wrapper--auto::before {
  display: none !important;
}

.video-consent-wrapper--auto > .video-consent {
  position: static !important;
  height: auto !important;
}

/* Manche Wrapper (.video-container) enthalten nach .video-consent noch einen
   generischen Bildunterschrift-Absatz aus der TYPO3-Alteinbindung (immer der
   gleiche Text, kein echter Video-Titel). Der war frueher durch
   overflow:hidden unsichtbar und wird jetzt ausgeblendet. */
.video-consent-wrapper--auto > p {
  display: none;
}

/* nach dem Laden: Platzhalter-Optik entfernen, Player fuellt den Rahmen */
.video-consent--loaded {
  min-height: 0;
  padding: 0;
  background: none;
}

/* Der Datenschutzhinweis bleibt nach dem Laden sichtbar (statt zu verschwinden
   und dadurch nachfolgende Elemente zu verschieben) und wird nur dezent
   ausgegraut, weil er weiterhin zutrifft. */
.video-consent--loaded .video-consent__note {
  opacity: 0.6;
}

.video-consent--loaded iframe {
  display: block;
  max-width: 100%;
  border: 0;
  /* Ueberschreibt die Legacy-Regel ".video-container iframe" (main(1).css), die
     das Iframe absolut positioniert und dadurch aus dem Fluss der Box nimmt --
     die Box kollabiert dann auf height:0 und das Video "verschwindet" optisch,
     obwohl der Ton laeuft. */
  position: static !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
}

/* Datenschutzhinweis unter Kontaktformularen */
.form-privacy {
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}


/* ==========================================================
   Kampagnen-Navigation – Burger-Menü, fixiert oben rechts,
   auf allen Seiten (Startseite + Kampagnenseiten) identisch
   positioniert. Bewusst ohne Abhängigkeit von Bootstrap/main.css,
   damit es überall (inkl. Startseite) gleich aussieht.
   Icon: 3 Striche ohne Umrandung, schwarz, on hover hellblau
   (#009ee3, wie bestehende Link-Hover-Farbe). On click morphen
   die Striche zu einem X und ein Fullscreen-Overlay mit den
   4 Links (großer Schrift) öffnet sich.
   (matthias.lechner, 2026-09-04)
   ========================================================== */
.ppmt-burger {
  position: fixed;
  top: 73px;
  right: 5%;
  z-index: 1001;
  width: 34px;
  height: 26px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  -webkit-tap-highlight-color: transparent;
}

.ppmt-burger-line {
  display: block;
  width: 100%;
  height: 3px;
  background-color: #000000;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease, background-color 0.2s ease;
}

.ppmt-burger:hover .ppmt-burger-line,
.ppmt-burger:focus .ppmt-burger-line,
.ppmt-burger.is-open .ppmt-burger-line {
  background-color: #009ee3;
}

.ppmt-burger.is-open .ppmt-burger-line:nth-child(1) {
  transform: translateY(11.5px) rotate(45deg);
}

.ppmt-burger.is-open .ppmt-burger-line:nth-child(2) {
  opacity: 0;
}

.ppmt-burger.is-open .ppmt-burger-line:nth-child(3) {
  transform: translateY(-11.5px) rotate(-45deg);
}

.ppmt-nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.ppmt-nav-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease;
}

.ppmt-nav-overlay ul {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

.ppmt-nav-overlay li {
  margin: 22px 0;
}

.ppmt-nav-overlay a {
  font-family: "DINPro", Helvetica, "Helvetica Neue", Arial, sans-serif;
  color: #000000;
  font-size: 42px;
	line-height: 1.5;
  font-weight: 700;
  text-decoration: none;
}

.ppmt-nav-overlay a:hover,
.ppmt-nav-overlay a:focus,
.ppmt-nav-overlay a.is-active {
  color: #009ee3;
}

body.ppmt-noscroll {
  overflow: hidden;
}

/* Kampagnenseiten: bestehende rechte Kopfzeilen-Elemente (Slogan,
   Sprachumschalter, Button, etc.) minimal nach links verschieben,
   damit das fixierte Burger-Icon überall gleich Platz hat. */
#header .row.x2 {
  padding-right: 56px;
  box-sizing: border-box;
}

@media (max-width: 544px) {
  .ppmt-burger {
    top: 20px;
    right: 16px;
    width: 28px;
    height: 22px;
  }
  .ppmt-burger.is-open .ppmt-burger-line:nth-child(1) {
    transform: translateY(9.5px) rotate(45deg);
  }
  .ppmt-burger.is-open .ppmt-burger-line:nth-child(3) {
    transform: translateY(-9.5px) rotate(-45deg);
  }
  .ppmt-nav-overlay a {
    font-size: 28px;
  }
  .ppmt-nav-overlay li {
    margin: 16px 0;
  }
  #header .row.x2 {
    padding-right: 44px;
  }
}
/*ENDE*/

/* Startseite: Logo-Groesse & Abstand an Kampagnenseiten angleichen (matthias.lechner, 2026-09-04) */
.size-logo img {
	height: 88px;
}

#c59 {
	margin-top: 35px;
}


/* Overlay-Menue: Impressum/Datenschutz-Links optisch vom Hauptmenue abheben
   (doppelter Abstand vor Impressum, Regular- statt Bold-Schriftschnitt) (matthias.lechner, 2026-09-04) */
.ppmt-nav-overlay li:nth-last-child(2) {
  margin-top: 44px;
}

.ppmt-nav-overlay li:nth-last-child(-n+2) a {
  font-weight: 400;
}

@media (max-width: 544px) {
  .ppmt-nav-overlay li:nth-last-child(2) {
    margin-top: 32px;
  }
}

/* Gemeinsamer Footer im 10-must-haves-Stil fuer Startseite, Impressum, Datenschutz
   und kunden-begeistern (matthias.lechner, 2026-09-04) */
.ppmt-footer-section {
  background-color: #000;
  overflow: hidden;
  position: relative;
}

.ppmt-footer-spacing {
  padding-top: 80px;
}

.ppmt-footer-col {
  min-height: 230px;
}

.ppmt-footer-section img.ppmt-footer-logo {
  max-width: 100%;
  height: auto;
}

.ppmt-footer-tagline {
  color: #eaeaea;
  font-size: 24px;
  font-weight: 400;
  font-family: "DINPro", Helvetica, "Helvetica Neue", Arial, sans-serif;
  padding-top: 40px;
  padding-bottom: 40px;
}

a.ppmt-footer-cta {
  background-color: transparent;
  color: #fff;
  display: inline-block;
  font-size: 24px;
  font-weight: 500;
  font-family: "DINPro", Helvetica, "Helvetica Neue", Arial, sans-serif;
  text-transform: uppercase;
  cursor: pointer;
  padding: 18px;
  text-decoration: none;
  border: 3px solid #ffffff;
  text-align: center;
  margin-top: 46px;
}

.ppmt-footer-brand {
  color: #eaeaea;
  font-size: 24px;
  font-weight: 400;
  font-family: "DINPro", Helvetica, "Helvetica Neue", Arial, sans-serif;
  margin-top: 46px;
  margin-bottom: 80px;
  /* Startseite mobil: .ppmt-footer-image (position:absolute) ueberlappt
     sonst diesen Text und verdeckt ihn optisch teilweise (Matthias, 2026-09-08) */
  position: relative;
  z-index: 2;
}

.ppmt-footer-brand a {
  color: #eaeaea;
  text-decoration: underline;
}

.ppmt-footer-image {
  max-width: 100%;
  height: auto;
  position: absolute;
  bottom: 0;
  right: -10%;
}
@media (max-width: 991px) {
  .ppmt-footer-image { max-width: 50%; height: auto; right: 0; }
}
@media (max-width: 767px) {
  .ppmt-footer-image { max-width: 45%; height: auto; right: -5%; }
}
@media (max-width: 544px) {
  .ppmt-footer-image { max-width: 60%; height: auto; right: -20%; bottom: 18px; }
}

@media (max-width: 991px) {
  .ppmt-footer-tagline, a.ppmt-footer-cta, .ppmt-footer-brand { font-size: 20px; }
}
@media (max-width: 767px) {
  .ppmt-footer-tagline, a.ppmt-footer-cta, .ppmt-footer-brand { font-size: 12px; }
}

/* Impressum/Datenschutz: Fliesstext-Schriftgroessen von 10-must-haves
   uebernehmen (matthias.lechner, 2026-09-04) */
.ppmt-legal-content > p {
  font-family: "DINPro", Helvetica, "Helvetica Neue", Arial, sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.5;
}

@media only screen and (max-width: 1533px) {
  .ppmt-legal-content > p { font-size: 20px; }
}
@media only screen and (max-width: 1320px) {
  .ppmt-legal-content > p { font-size: 17px; }
}
@media only screen and (max-width: 1133px) {
  .ppmt-legal-content > p { font-size: 14px; }
}
@media (max-width: 991px) {
  .ppmt-legal-content > p { font-size: 20px; }
}
@media (max-width: 767px) {
  .ppmt-legal-content > p { font-size: 12px; }
}

/* Startseite: Absatz unter dem Slider auf 10-must-haves-Schriftgroessen
   bringen (matthias.lechner, 2026-09-04) */
.ppmt-copy p {
  font-family: "DINPro", Helvetica, "Helvetica Neue", Arial, sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.5;
}

@media (max-width: 991px) {
  .ppmt-copy p { font-size: 20px; }
}
@media (max-width: 767px) {
  .ppmt-copy p { font-size: 12px; }
}

/* Startseite: Slider-Indikatoren als Kreise, passend zum Kreis im Logo
   (matthias.lechner, 2026-09-04) */
.sliderppmt .slick-dots li,
.sliderppmt .slick-dots li button {
  width: 12px;
  height: 12px;
}

.sliderppmt .slick-dots li.slick-active button:before {
  background-color: #009ee3!important;
}


/* Startseite: DE/EN-Sprachumschalter neben dem Burger-Icon, gleicher
   Text-Stil ("DE | EN") wie auf 10-must-haves/11-chancen/kunden-begeistern
   (matthias.lechner, 2026-09-04) */
.ppmt-lang-toggle {
  position: absolute;
  top: 73px;
  right: calc(14.6% + 13px);
  z-index: 1001;
  font-family: "DINPro", Helvetica, "Helvetica Neue", Arial, sans-serif;
  font-size: 25px !important;
  line-height: normal;
  font-weight: 500;
  color: #000;
  margin: 0;
}

.ppmt-lang-toggle a {
  color: #000;
  text-decoration: underline;
  font-weight: 500;
}

.ppmt-lang-toggle a:hover {
  color: #009ee3;
}

@media (max-width: 767px) {
  .ppmt-lang-toggle { font-size: 20px !important; }
}

@media (max-width: 544px) {
  .ppmt-lang-toggle {
    top: 20px;
    right: calc(16px + 100px);
    font-size: 15px !important;
  }
}

/* Typografie-Angleichung Startseite an Kampagnenseiten-System
   (volle 1:1 Uebernahme des Kampagnenseiten-Systems inkl. Ueberschriften-
   Rohwerte -- die anfangs vorsichtiger proportional skalierten Ueberschriften
   waren Matthias zu klein, Matthias, 2026-09) */
/* Font-Stack 1:1 wie auf den Kampagnenseiten (DINPro, Helvetica, "Helvetica
   Neue", Arial, sans-serif) -- vorher fehlte hier Helvetica/Helvetica Neue,
   wodurch der Font-Fallback auf der Startseite sichtbar von den Kampagnen-
   seiten abwich (Matthias, 2026-09) */
body.multitouch {
  font-family: "DINPro", Helvetica, "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5em; /* entspricht 24px bei 16px */
}
body.multitouch #main h2 {
  font-family: "DINPro", Helvetica, "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 45px !important;
  line-height: 54px;
}
body.multitouch #main h3 {
  font-family: "DINPro", Helvetica, "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
  font-size: 30px !important;
  line-height: 36px;
}
body.multitouch #main h4 {
  font-family: "DINPro", Helvetica, "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
  font-size: 17.6px !important;
  line-height: 28.8px;
}

/* Fliesstext-Groesse im Content-Bereich: die alte TYPO3-Regel
   "#detailseite .slider p, #detailseite #main p { font-size:14px; }"
   (main(1).css) ist spezifischer als body.multitouch und ueberschrieb
   die Typografie-Angleichung an die Kampagnenseiten -- hier explizit
   mit passender Spezifitaet auf 16px DINPro gehoben (Matthias, 2026-09).
   :not(.ppmt-lang-toggle) ausgenommen, weil der DE/EN-Sprachumschalter
   (ebenfalls ein <p> innerhalb #detailseite #main) sonst faelschlich von
   25px auf 16px verkleinert wurde -- Regression durch diese Regel,
   Matthias, 2026-09. :not(.video-consent__note) ausgenommen, weil derselbe
   Konflikt auch den Datenschutzhinweis unter den Videos betraf (sollte
   10px sein, wurde aber durch diese Regel auf 16px angehoben) -- gleiches
   Muster, Matthias, 2026-09 */
#detailseite #main p:not(.ppmt-lang-toggle):not(.video-consent__note) {
  font-family: "DINPro", Helvetica, "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 24px !important;
}

/* Footer: Impressum/Datenschutz eigene Zeilen, vertikal zentriert zwischen
   Tagline und Marken-Zeile (Matthias, 2026-09) */
.ppmt-footer-legal {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin: 16px 0;
}
.ppmt-footer-legal a {
  color: #fff;
  text-decoration: underline;
  font-family: "DINPro", Arial, sans-serif;
  font-size: 16px;
}

/* Referenzen-Logo-Grid: modernes CSS-Grid statt der alten Float/Prozent-
   Konstruktion (behebt horizontalen Overflow) -- nur Mobile, Desktop bleibt
   unangetastet (Matthias, 2026-09) */
@media (max-width: 767px) {
  .multitouch .tx-ppm-projects .listview .references {
    display: grid;
    /* minmax(0, 1fr) statt 1fr: die <img width="260"> HTML-Attribute der
       Referenz-Logos zaehlen sonst als min-content-Breite in die Grid-Spur
       ein und sprengen das Grid auf 3x260px+gaps (Overflow auf Mobile),
       Matthias, 2026-09 */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    margin: 0;
  }
  .multitouch .tx-ppm-projects .listview .references .reference {
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    float: none !important;
  }
  .multitouch .tx-ppm-projects .listview .references .reference .image {
    /* ueberschreibt die feste 260x145px-Legacy-Regel (custom.css Zeile ~59),
       die sonst auch mobil weiter gilt und das Grid sprengt (Matthias, 2026-09-08) */
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 260 / 145;
    background: #eaeaea;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
  }
  .multitouch .tx-ppm-projects .listview .references .reference .image img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
    object-fit: contain;
    padding: 14px;
    box-sizing: border-box;
  }
}

/* Neue Lightbox fuer "Weitere Anwendungsbeispiele" (ppmt-lightbox.js) --
   ersetzt Fancybox nur fuer diese Galerie, fuer Touch/Smartphone optimiert
   (Matthias, 2026-09) */
.ppmt-lb {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.92);
  /* width/height werden beim Oeffnen per JS in px gesetzt (siehe
     ppmt-lightbox.js) statt sich auf inset/vw/vh zu verlassen -- manche
     mobile Browser-Viewports (dynamische Adressleiste, Device-Emulation)
     berechnen 100vw/100vh sonst falsch (Matthias, 2026-09) */
}
.ppmt-lb--open {
  display: flex;
  align-items: center;
  justify-content: center;
}
body.ppmt-lb-locked {
  overflow: hidden;
}
.ppmt-lb__stage {
  max-width: 92vw;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ppmt-lb__img {
  max-width: 92vw;
  max-height: 76vh;
  object-fit: contain;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.ppmt-lb__caption {
  color: #fff;
  font-family: "DINPro", Arial, sans-serif;
  font-size: 14px;
  text-align: center;
  margin-top: 12px;
  max-width: 90vw;
}
.ppmt-lb__counter {
  color: #bbb;
  font-family: "DINPro", Arial, sans-serif;
  font-size: 12px;
  margin-top: 4px;
}
.ppmt-lb__close,
.ppmt-lb__prev,
.ppmt-lb__next {
  position: absolute;
  background: rgba(255, 255, 255, 0.12);
  border: none;
  color: #fff;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ppmt-lb__close {
  top: 16px;
  right: 16px;
  width: 48px;
  height: 48px;
  font-size: 30px;
  line-height: 1;
}
.ppmt-lb__prev,
.ppmt-lb__next {
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  font-size: 32px;
}
.ppmt-lb__prev { left: 12px; }
.ppmt-lb__next { right: 12px; }
@media (max-width: 600px) {
  .ppmt-lb__prev, .ppmt-lb__next { width: 44px; height: 44px; font-size: 26px; }
  .ppmt-lb__close { width: 42px; height: 42px; font-size: 26px; }
}

/* Mobile-Polish Runde 2 (Matthias-Feedback, 2026-09):
   - Video-Datenschutzhinweise weniger dominant (kleiner, blasser)
   - Video-/Sektions-Bezeichnungen (b in .tx-dce-pi1) groesser + blau, wie
     auf den Kampagnenseiten
   - Headline "Weitere Anwendungsbeispiele" auf Mobile kleiner (der manuelle
     Umbruch sitzt direkt im HTML)
   - Footer randlos schwarz + graue Trennlinie an der Handkante */
.video-consent__note {
  font-size: 10px !important;
  color: #9aa3ab !important;
  margin-top: 6px !important;
}

.multitouch .tx-dce-pi1 > b {
  font-family: "DINPro", Helvetica, "Helvetica Neue", Arial, sans-serif;
  font-size: 30px !important;
  font-weight: 700 !important;
  color: #009ee3 !important;
}

/* Mobile-Polish Runde 3 (Matthias-Feedback, 2026-09-06):
   - Startseiten-Ueberschriften "Begeistern Sie Ihre Kunden", "Bereit fuer
     die naechste Stufe..." (beide Vorkommen) einheitlich hellblau und in
     der Groesse von "Begeistern Sie Ihre Kunden" (30px) */
#c126 .csc-firstHeader,
#c295 h3,
#c296 h3 {
  color: #009ee3 !important;
  font-size: 30px !important;
  font-weight: 700 !important;
}

/* Mobile-Polish Runde 4 (Matthias-Feedback, 2026-09-06):
   - "Kontakt:" war zu klein (Standard-h4-Groesse) -> wie
     "Begeistern Sie Ihre Kunden" (30px, fett)
   - Kontakt-Fliesstext (Adresse/Telefon/E-Mail) auf die Groesse des
     Fliesstexts von /10-must-haves/ (20px) angeglichen
   - "Referenzen:" und "Weitere Anwendungsbeispiele:" wie "Uebersicht
     Funktionalitaeten" (hellblau, 30px) */
body.multitouch #main #c135 h4 {
  font-size: 30px !important;
  font-weight: 700 !important;
}
#detailseite #main #c135 p,
#detailseite #main #c232 p {
  font-size: 20px !important;
}
body.multitouch #main #c133 h4,
body.multitouch #main .ppmt-examples-heading {
  color: #009ee3 !important;
  font-size: 30px !important;
}

/* Footer-Markentext Startseite: auf Desktop einzeilig (wie im Footer von
   Impressum/Datenschutz), auf Mobile weiterhin 3-zeiliger Umbruch */
.ppmt-footer-brand-break {
  display: none;
}
@media (max-width: 767px) {
  .ppmt-footer-brand-break {
    display: inline;
  }
}

.ppmt-examples-heading {
  font-size: 45px;
}
@media (max-width: 767px) {
  .ppmt-examples-heading {
    font-size: 32px !important;
    line-height: 1.2 !important;
  }
}

/* Footer randlos: .ppmt-footer-section erbt sonst das 5%-Padding von
   #wrapper .innerWrap und endet dadurch sichtbar VOR dem Viewport-Rand --
   hier per Negativ-Margin wieder bis zum echten Rand ausgedehnt, mit
   Padding kompensiert, damit der Inhalt an derselben Stelle bleibt.
   Zusaetzlich graue Trennlinie an der Unterkante (dort wo die Handgrafik
   endet), Matthias, 2026-09 */
.ppmt-footer-section {
  margin-left: -5%;
  margin-right: -5%;
  padding-left: 5%;
  padding-right: 5%;
  border-bottom: 2px solid #333;
}