/*
 * KAHL Film & TV
 * Responsive Erweiterung des bestehenden Originaldesigns
 *
 * Desktop ab 1094 px bleibt vollständig unverändert.
 */

/* =========================================================
   TABLET UND KLEINERE DESKTOPFENSTER
   ========================================================= */

@media screen and (max-width: 1093px) {
  html,
  body {
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
  }

  body,
  body * {
    box-sizing: border-box;
  }

  div#headField,
  div#imageField,
  div#hdField,
  div#bodyField,
  div#footField {
    width: calc(100% - 40px);
    max-width: 1094px;
  }

  /*
   * Kopfbereich
   */

  div#headField {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    height: auto;
    min-height: 138px;
  }

  div#headFieldLeft {
    float: none;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }

  div#headFieldRight {
    float: none;
    flex: 0 0 375px;
    width: 375px;
  }

  div#headFieldRight img {
    display: block;
    width: 100%;
    max-width: 375px;
    height: auto;
  }

  a.navPoint,
  a.navPointActive {
    margin-right: 14px;
    font-size: 23px;
  }

  /*
   * Großes Bild
   */

  div#imageFrame {
    width: 100%;
    background-position: center center;
  }

  div#imageField {
    height: 100%;
  }

  /*
   * Blaue Überschriftszeile
   */

  div#hdField {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding-top: 0;
  }

  div#hdField h1 {
    width: 100%;
  }

  /*
   * Inhaltsbereich
   */

  div#bodyField {
    min-width: 0;
  }

  div.fullContentFrame {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  div.fullContentFrame img.inText {
    max-width: min(45%, 100%);
    height: auto;
  }

  /*
   * Leistungsübersicht
   */

  div.fullTeaserFrame {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 45px 25px;
  }

  div.fullTeaserFrame > div.clear {
    display: none;
  }

  div.teaserBorderFrame,
  div.teaserBorderFrame.lastFrame {
    float: none;
    flex: 0 0 198px;
    width: 198px;
    padding-right: 0;
    background-image: none;
  }

  div.teaserFrame {
    width: 198px;
  }

  /*
   * Footer
   */

  div#footField {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 34px;
  }

  div#footFieldLeft,
  div#footFieldRight {
    float: none;
    width: auto;
  }

  div#footFieldLeft {
    flex: 0 0 287px;
  }

  div#footFieldRight {
    flex: 1 1 auto;
  }

  input.textInput,
  select.textInput,
  textarea,
  div.messageBoxGreen,
  div.messageBoxOrange {
    max-width: 100%;
  }
}

/* =========================================================
   TABLET HOCHKANT UND KLEINE LAPTOPFENSTER
   ========================================================= */

@media screen and (max-width: 920px) {
  div#headField {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 18px 0 20px;
  }

  div#headFieldRight {
    order: 1;
    flex: none;
    width: min(375px, 100%);
    margin: 0;
    text-align: center;
  }

  div#headFieldLeft {
    order: 2;
    width: 100%;
    margin: 16px 0 0;
    text-align: center;
  }

  div#headFieldLeft .clear {
    display: none;
  }

  a.navPoint,
  a.navPointActive {
    margin: 0 10px;
  }

  div#imageFrame {
    height: 500px;
  }

  div#imageField {
    padding-top: 45px;
  }

  div#homeBubble1 {
    width: 330px;
    height: 250px;
    padding-top: 82px;
    border-radius: 165px;
  }

  div.imgBubble strong {
    font-size: 65px;
  }

  div#homeBubble2 {
    top: 315px;
    left: 195px;
  }

  div#hdFrame {
    height: auto;
    min-height: 75px;
  }

  div#hdField {
    padding: 12px 0;
  }

  div#hdField h1 {
    font-size: 44px;
  }

  div#bodyFrame {
    padding-bottom: 0;
  }

  div#bodyField {
    padding-bottom: 65px;
  }

  div#footRow {
    position: static;
    padding: 45px 0 50px;
  }

  div#footField {
    flex-direction: column;
    text-align: center;
  }

  div#footFieldLeft,
  div#footFieldRight {
    flex: none;
    width: 100%;
    text-align: center;
  }
}

/* =========================================================
   SMARTPHONES
   ========================================================= */

@media screen and (max-width: 620px) {
  div#headField,
  div#imageField,
  div#hdField,
  div#bodyField,
  div#footField {
    width: calc(100% - 28px);
  }

  div#headFrame {
    margin-bottom: 5px;
  }

  div#headField {
    min-height: 0;
    padding: 16px 0 18px;
  }

  div#headFieldRight {
    width: min(310px, 100%);
  }

  div#headFieldLeft {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: 7px;
    margin-top: 14px;
  }

  a.navPoint,
  a.navPointActive {
    display: block;
    flex: 1 1 100%;
    width: 100%;
    margin: 0;
    padding: 8px 10px;
    font-size: 21px;
    line-height: 1.25;
    text-align: center;
  }

  a.navPointActive {
    background-position: bottom center;
  }

  div#imageFrame {
    height: 410px;
    margin-bottom: 5px;
  }

  div#imageField {
    padding-top: 34px;
  }

  div#homeBubble1 {
    width: 270px;
    height: 220px;
    max-width: 88vw;
    padding-top: 67px;
    border-radius: 50%;
    font-size: 21px;
  }

  div.imgBubble strong {
    font-size: 52px;
  }

  div#homeBubble2 {
    top: 270px;
    left: auto;
    right: 4px;
    width: 135px;
    height: 118px;
    padding-top: 31px;
    border-radius: 50%;
    font-size: 21px;
  }

  div#hdFrame {
    min-height: 68px;
  }

  div#hdField {
    padding: 12px 0;
  }

  div#hdField h1 {
    font-size: clamp(29px, 9vw, 38px);
    line-height: 1.08;
  }

  div#bodyField {
    padding-top: 34px;
    padding-bottom: 50px;
  }

  div.fullContentFrame {
    margin-bottom: 48px;
    font-size: 16px;
    line-height: 1.7;
  }

  div.fullContentFrame img.inText {
    float: none;
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 0 auto 25px;
  }

  div.fullContentFrame h2 {
    font-size: 29px;
    line-height: 1.15;
  }

  div.fullContentFrame h2.hdLeistungA,
  div.fullContentFrame h2.hdLeistungB,
  div.fullContentFrame h2.hdLeistungC,
  div.fullContentFrame h2.hdLeistungD,
  div.fullContentFrame h2.hdLeistungE {
    min-height: 58px;
    padding-left: 68px;
    background-position: left top;
    background-size: auto 54px;
  }

  div.fullContentFrame h2.hdLeistungE {
    padding-left: 110px;
  }

  div.fullTeaserFrame {
    gap: 42px;
    margin-bottom: 50px;
  }

  div.teaserBorderFrame,
  div.teaserBorderFrame.lastFrame {
    flex-basis: 198px;
  }

  div#footRow {
    padding: 38px 0 42px;
  }

  div#footField {
    gap: 24px;
  }

  div#footFieldRight {
    font-size: 20px;
    line-height: 1.35;
  }

  a#footLogo {
    max-width: 100%;
  }

  input,
  input.textInput,
  select,
  select.textInput,
  textarea,
  div.messageBoxGreen,
  div.messageBoxOrange {
    width: 100%;
  }
}

/* =========================================================
   SEHR KLEINE SMARTPHONES
   ========================================================= */

@media screen and (max-width: 390px) {
  div#homeBubble1 {
    width: 245px;
    height: 205px;
    padding-top: 60px;
  }

  div.imgBubble strong {
    font-size: 46px;
  }

  div#homeBubble2 {
    top: 265px;
    width: 122px;
    height: 108px;
    padding-top: 27px;
    font-size: 19px;
  }

  div#hdField h1 {
    font-size: 28px;
  }

  div.fullContentFrame h2 {
    font-size: 26px;
  }
}

/* RESPONSIVE BACKGROUND CONTAINMENT FIX */

/*
 * Die Originalseite erzeugt den dunklen Kopfbereich über
 * das Hintergrundbild des body. Sobald der responsive Header
 * höher als die ursprünglichen 138px wird, reicht dieses Bild
 * nicht mehr aus. Der Header erhält deshalb mobil eine eigene
 * geschlossene Hintergrundfläche.
 */

@media screen and (max-width: 1093px) {
  div#bodyFrame,
  div#bodyField {
    background-color: #ffffff;
  }
}

@media screen and (max-width: 920px) {
  div#headFrame,
  div#headField,
  div#headFieldLeft,
  div#headFieldRight {
    background-color: #1b1b1b;
  }

  div#headField {
    height: auto;
    overflow: visible;
  }
}

@media screen and (max-width: 620px) {
  a.navPoint,
  a.navPointActive {
    color: #ffffff;
    background-color: transparent;
  }

  a.navPointActive,
  a.navPoint:hover,
  a.navPoint:focus-visible {
    color: #0296d7;
  }

  div.fullTeaserFrame,
  div.teaserBorderFrame,
  div.teaserFrame {
    background-color: #ffffff;
  }
}

/* FIVE ITEM DESKTOP NAVIGATION */

@media screen and (min-width: 1094px) {
  div#headFieldLeft {
    width: 700px;
  }

  div#headFieldLeft a.navPoint,
  div#headFieldLeft a.navPointActive {
    margin-right: 14px;
  }
}

/* KAHL ORIGINAL FINAL MOBILE POLISH V1 */

/*
 * Präsentations-Rückweg auf kleinen Displays nicht direkt
 * am Browserrand platzieren.
 */
@media screen and (max-width: 620px) {
  .presentationBackLink,
  .presentation-back-link,
  .backToSelection,
  .back-to-selection {
    display: inline-block;
    margin: 0;
    padding: 8px 12px;
    box-sizing: border-box;
  }

  /*
   * Falls der Rückweg ohne eigene Klasse direkt als erstes
   * Element innerhalb des body steht.
   */
  body > a:first-child[href*="index"] {
    display: inline-block;
    margin: 0;
    padding: 8px 12px;
    box-sizing: border-box;
  }

  /*
   * Mobile Hauptnavigation etwas kompakter halten, ohne den
   * charakteristischen Originalaufbau zu verändern.
   */
  #navigation,
  #navRow,
  .navigation,
  .mainNavigation {
    box-sizing: border-box;
  }

  a.navPoint,
  a.navPointActive {
    box-sizing: border-box;
    line-height: 1.25;
  }

  /*
   * Sicherheitsregeln für alle verlinkten Leistungsabschnitte.
   * Bilder, Icons und Texte dürfen sich auf Smartphones nicht
   * gegenseitig überlagern.
   */
  #sichten-und-auswerten,
  #waschen-und-reinigen,
  #quellen-und-auffrischen,
  #blankieren-und-glaetten,
  #beschichten-und-schutzueberzug {
    position: relative;
    clear: both;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible;
  }

  #sichten-und-auswerten img,
  #waschen-und-reinigen img,
  #quellen-und-auffrischen img,
  #blankieren-und-glaetten img,
  #beschichten-und-schutzueberzug img {
    max-width: 100%;
    height: auto;
  }

  #sichten-und-auswerten h1,
  #sichten-und-auswerten h2,
  #sichten-und-auswerten h3,
  #waschen-und-reinigen h1,
  #waschen-und-reinigen h2,
  #waschen-und-reinigen h3,
  #quellen-und-auffrischen h1,
  #quellen-und-auffrischen h2,
  #quellen-und-auffrischen h3,
  #blankieren-und-glaetten h1,
  #blankieren-und-glaetten h2,
  #blankieren-und-glaetten h3,
  #beschichten-und-schutzueberzug h1,
  #beschichten-und-schutzueberzug h2,
  #beschichten-und-schutzueberzug h3 {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  /*
   * Spezifische Absicherung des früher beanstandeten letzten
   * Abschnitts. Absolute oder schwebende Elemente werden dort
   * auf Smartphonebreite in den normalen Dokumentfluss gesetzt.
   */
  #beschichten-und-schutzueberzug .icon,
  #beschichten-und-schutzueberzug .serviceIcon,
  #beschichten-und-schutzueberzug .service-icon,
  #beschichten-und-schutzueberzug .leistungIcon,
  #beschichten-und-schutzueberzug .leistung-icon {
    position: static !important;
    float: none !important;
    display: block;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

@media screen and (max-width: 390px) {
  a.navPoint,
  a.navPointActive {
    padding-top: 8px;
    padding-bottom: 8px;
  }
}

/* KAHL TARGETED FIX ROUND V2 */

/* The footer sprite already contains a lossless white logo in its lower half. */
a#footLogo,
a#footLogo:hover,
a#footLogo:focus-visible {
  background-position: 0 -53px;
}

div#footRow {
  padding: 44px 0 48px;
}

div#footField {
  display: grid;
  grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1.25fr);
  align-items: start;
  gap: 64px;
}

div#footFieldLeft,
div#footFieldRight {
  float: none;
  width: auto;
  text-align: left;
}

.classicFooterBrandNote {
  display: block;
  margin-top: 14px;
  color: rgba(255, 255, 255, 0.72);
  font-family: "Open Sans", Tahoma, Arial, Verdana, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  text-transform: none;
}

.classicFooterCompany {
  margin-bottom: 22px;
  font-family: "Open Sans", Tahoma, Arial, Verdana, sans-serif;
  font-size: 15px;
  line-height: 1.65;
  text-transform: none;
}

div#footFieldRight .classicFooterCompany strong,
div#footFieldRight .classicFooterCompany span {
  display: block;
}

div#footFieldRight .classicFooterCompany strong {
  color: #ffffff;
}

div#footFieldRight .classicFooterCompany span {
  color: rgba(255, 255, 255, 0.78);
}

div#footFieldRight .classicFooterCompany a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legalCompanyBlock {
  margin: 0 0 32px;
  padding: 24px 28px;
  border-left: 4px solid #009ee3;
  background: #f2f6f8;
}

.legalCompanyBlock h2 {
  margin-top: 0;
}

.classicFooterLegal {
  display: grid;
  gap: 12px;
}

.classicFooterLegalGroup {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.classicFooterLegal a {
  color: #ffffff;
  font-family: "Open Sans", Tahoma, Arial, Verdana, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  text-transform: none;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.42);
  text-underline-offset: 4px;
}

.classicFooterLegal a:hover,
.classicFooterLegal a:focus-visible {
  color: #53c8f6;
  text-decoration-color: currentColor;
}

@media screen and (min-width: 921px) {
  div#bodyFrame {
    padding-bottom: 270px;
  }
}

@media screen and (max-width: 920px) {
  div#footField {
    grid-template-columns: 1fr;
    gap: 28px;
    text-align: center;
  }

  div#footFieldLeft,
  div#footFieldRight {
    text-align: center;
  }

  .classicFooterLegalGroup {
    justify-content: center;
  }
}

@media screen and (max-width: 620px) {
  div#headFieldLeft {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 8px;
  }

  div#headFieldLeft a.navPoint,
  div#headFieldLeft a.navPointActive {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-height: 44px;
    padding: 7px 6px;
    font-size: clamp(18px, 5vw, 21px);
  }

  div#headFieldLeft a:nth-of-type(5) {
    grid-column: 1 / -1;
    width: min(170px, 52%);
    justify-self: center;
  }

  div#imageFrame {
    height: clamp(410px, 115vw, 500px);
  }

  div#imageField {
    padding-top: 24px;
  }

  div#homeBubble1,
  div#homeBubble2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: clamp(12px, 4vw, 22px);
    line-height: 1.04;
    overflow: hidden;
  }

  div#homeBubble1 {
    width: clamp(238px, 70vw, 300px);
    height: clamp(238px, 70vw, 300px);
    max-width: none;
    padding-top: clamp(12px, 4vw, 22px);
    border-radius: 50%;
    font-size: clamp(17px, 4.9vw, 21px);
  }

  div.imgBubble strong {
    display: block;
    margin: 0.08em 0;
    font-size: clamp(38px, 12vw, 54px);
    line-height: 0.82;
  }

  div#homeBubble2 {
    top: auto;
    right: 0;
    bottom: 10px;
    left: auto;
    width: clamp(112px, 34vw, 142px);
    height: clamp(112px, 34vw, 142px);
    padding-top: clamp(10px, 3vw, 16px);
    border-radius: 50%;
    font-size: clamp(16px, 4.7vw, 20px);
    line-height: 1.02;
  }

  div#footRow {
    padding: 34px 0 38px;
  }

  div#footField {
    gap: 24px;
  }

  .classicFooterCompany {
    margin-bottom: 18px;
  }

  .classicFooterLegal {
    gap: 16px;
  }

  .classicFooterLegalGroup {
    gap: 10px 14px;
  }

  .classicFooterLegal a {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }
}

/* =========================================================
   KAHL FINAL RESPONSIVE COMPONENTS 2026-08-26
   One authoritative bubble model and a layout-stable menu.
   ========================================================= */

.classicNavToggle {
  display: none;
}

.classicMainNav {
  display: block;
}

div#imageField {
  height: 100%;
  position: relative;
  box-sizing: border-box;
}

div#homeBubble1,
div#homeBubble2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  text-align: center;
  overflow: visible;
}

div#homeBubble1 {
  --classic-main-bubble: clamp(350px, 26.4vw, 380px);
  width: var(--classic-main-bubble);
  height: auto;
  aspect-ratio: 1;
  padding: clamp(26px, 2.3vw, 34px);
  border-radius: 50%;
  font-size: clamp(22px, 1.8vw, 25px);
  line-height: 1.05;
}

div.imgBubble strong {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0.08em 0;
  font-family: "Arial Narrow", "Bahnschrift Condensed", "Roboto Condensed", Tahoma, Arial, sans-serif;
  font-size: clamp(54px, 4.05vw, 58px);
  font-stretch: condensed;
  letter-spacing: -0.025em;
  line-height: 0.84;
  white-space: nowrap;
}

div#homeBubble2 {
  top: auto;
  bottom: 24px;
  left: clamp(232px, 21.7vw, 300px);
  width: clamp(145px, 12vw, 170px);
  height: auto;
  aspect-ratio: 1;
  padding: 14px;
  border-radius: 50%;
  font-size: clamp(21px, 1.8vw, 24px);
  line-height: 1.04;
}

@media screen and (min-width: 1094px) {
  div#imageFrame {
    height: clamp(590px, 45vw, 650px);
  }
}

@media screen and (min-width: 621px) and (max-width: 1093px) {
  div#imageFrame {
    height: clamp(540px, 65vw, 600px);
  }

  div#imageField {
    padding-top: 40px;
  }

  div#homeBubble1 {
    --classic-main-bubble: clamp(300px, 40vw, 348px);
    width: var(--classic-main-bubble);
    height: auto;
    padding: clamp(22px, 3vw, 28px);
    font-size: clamp(19px, 2.3vw, 22px);
  }

  div.imgBubble strong {
    font-size: clamp(47px, 5.45vw, 56px);
  }

  div#homeBubble2 {
    bottom: 18px;
    left: clamp(190px, 26vw, 260px);
    width: clamp(138px, 16vw, 155px);
    height: auto;
    padding: 12px;
    font-size: clamp(19px, 2.3vw, 22px);
  }
}

@media screen and (max-width: 920px) {
  div#headFrame,
  div#headField {
    overflow: visible;
  }

  div#headFieldLeft {
    display: block;
    position: relative;
    z-index: 20;
  }

  .classicNavToggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: min(280px, 100%);
    min-height: 46px;
    margin: 0 auto;
    padding: 9px 16px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: #202020;
    color: #ffffff;
    font: 700 18px/1.2 "Open Sans", Tahoma, Arial, Verdana, sans-serif;
    cursor: pointer;
  }

  .classicNavToggle:hover,
  .classicNavToggle:focus-visible,
  .classicNavToggle[aria-expanded="true"] {
    border-color: #0296d7;
    color: #53c8f6;
    outline: none;
  }

  .classicNavToggleIcon {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    width: 22px;
  }

  .classicNavToggleIcon span {
    display: block;
    width: 100%;
    height: 2px;
    background: currentColor;
    transition: transform 160ms ease, opacity 160ms ease;
  }

  .classicNavToggle[aria-expanded="true"] .classicNavToggleIcon span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  .classicNavToggle[aria-expanded="true"] .classicNavToggleIcon span:nth-child(2) {
    opacity: 0;
  }

  .classicNavToggle[aria-expanded="true"] .classicNavToggleIcon span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  .classicMainNav {
    display: none;
    width: min(560px, 100%);
    margin: 0;
  }

  .classicMainNav.is-open {
    display: grid;
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    z-index: 100;
    transform: translateX(-50%);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 8px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: #1b1b1b;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
  }

  div#headFieldLeft .classicMainNav a.navPoint,
  div#headFieldLeft .classicMainNav a.navPointActive {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-height: 44px;
    margin: 0;
    padding: 8px 10px;
    font-size: 20px;
    line-height: 1.2;
  }
}

@media screen and (max-width: 620px) {
  .classicMainNav.is-open {
    grid-template-columns: 1fr;
  }

  div#imageFrame {
    height: clamp(410px, 115vw, 500px);
  }

  div#imageField {
    padding-top: 24px;
  }

  div#homeBubble1 {
    --classic-main-bubble: clamp(238px, 70vw, 300px);
    width: var(--classic-main-bubble);
    height: auto;
    max-width: none;
    padding: clamp(12px, 4vw, 22px);
    font-size: clamp(17px, 4.9vw, 21px);
  }

  div.imgBubble strong {
    font-size: clamp(36px, 10.8vw, 48px);
    letter-spacing: -0.035em;
  }

  div#homeBubble2 {
    right: 0;
    bottom: 10px;
    left: auto;
    width: clamp(112px, 34vw, 142px);
    height: auto;
    padding: clamp(10px, 3vw, 16px);
    font-size: clamp(16px, 4.7vw, 20px);
    line-height: 1.02;
  }
}


/* ==========================================================
   KAHL BUBBLE SIZE TUNING 2026-08-27
   Bewusst nur leicht vergrößert.
   ========================================================== */

div#homeBubble1,
div#homeBubble2 {
  scale: 1.07;
}

div#homeBubble1 {
  transform-origin: center center;
}

div#homeBubble2 {
  transform-origin: center center;
}


/* Mobile etwas kontrollierter positionieren */
@media screen and (max-width: 620px) {

  div#homeBubble1 {
    scale: 1.06;
  }

  div#homeBubble2 {
    scale: 1.06;
    transform-origin: right bottom;
  }

}


/* ==========================================================
   KAHL NARROW MOBILE BUBBLE FIX 2026-08-27
   Entschärft den Bereich um ca. 400–540px.
   ========================================================== */

@media screen and (max-width: 540px) {

  div#homeBubble1 {
    --classic-main-bubble: clamp(232px, 66vw, 285px);
    scale: 1;
    padding: clamp(12px, 3.6vw, 19px);
    font-size: clamp(16px, 4.5vw, 20px);
  }

  div#homeBubble1 strong {
    font-size: clamp(34px, 9.6vw, 44px);
    letter-spacing: -0.035em;
  }

}

/* Auf sehr schmalen Geräten darf sie wieder etwas mehr Raum nutzen. */
@media screen and (max-width: 390px) {

  div#homeBubble1 {
    --classic-main-bubble: clamp(230px, 72vw, 270px);
  }

}