/*
  Responsive-Fix fuer UTO-Webseite
  ---------------------------------
  Problem: Mehrere zentrale Layout-Container in index.css (und vermutlich
  analog in kontakt.css, termine.css, frameberuns.css) haben eine feste
  Breite von 600px. Auf Smartphones (typische Breite 360-430px) fuehrt das
  garantiert zu horizontalem Overflow, unabhaengig vom viewport-Meta-Tag.

  Loesung: width:600px wird durch max-width:600px + width:100% ersetzt.
  Der Container ist dann auf grossen Bildschirmen weiterhin maximal 600px
  breit (Design bleibt erhalten), schrumpft aber auf kleinen Screens
  automatisch mit.

  Zusaetzlich: Ein globaler Baseline-Fix gegen horizontales Scrollen und
  ein paar Breakpoints fuer Schriftgroessen, die auf Mobilgeraeten zu
  gross sind (z.B. 64px Ueberschriften).

  Einbindung: Diese Datei NACH den bestehenden Stylesheets einbinden, z.B.
  in jeder .html-Datei kurz vor </head>:
    <link rel="stylesheet" href="./responsive_fix.css" />
  Dadurch ueberschreiben diese Regeln die alten 600px-Werte, ohne dass du
  die grossen, generierten CSS-Dateien selbst durchsuchen musst.
*/

/* ---- 1) Globaler Schutz gegen horizontales Ueberlaufen ---- */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* ---- 2) Zentrale 600px-Container responsive machen ---- */
/* Startseite */
.startseite-chapter,
.startseite-chapter1,
.startseite-chapter2 {
  width: 100%;
  max-width: 600px;
  box-sizing: border-box;
}

/* Falls in kontakt.css / termine.css / frameberuns.css analoge
   600px-Container mit anderen Klassennamen existieren, hier ergaenzen,
   z.B.: 
.kontakt-chapter { width: 100%; max-width: 600px; box-sizing: border-box; }
.termine-chapter { width: 100%; max-width: 600px; box-sizing: border-box; }
.frameberuns-component4 { width: 100%; max-width: 600px; box-sizing: border-box; }
*/

/* ---- 3) Innenabstand auf kleinen Screens reduzieren, damit der
      Content nicht bis an den Rand oder darueber hinaus reicht ---- */
@media (max-width: 640px) {
  .startseite-frame74,
  .startseite-frame108 {
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }

  /* Grosse Ueberschriften (48px/64px) auf Mobilgeraeten verkleinern,
     damit einzelne Woerter nicht breiter als der Bildschirm sind */
  .header-text-mit-bild-text {
    font-size: 32px !important;
    height: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }

  .chapter-header-text,
  .startseite-text,
  .startseite-text26 {
    font-size: 28px !important;
  }

  /* Header-Navigation: Menüpunkte sollen bei wenig Platz umbrechen statt
     das Layout zu sprengen */
  .uto-header-bar-uto-header-bar {
    padding: 0 12px !important;
  }

  .uto-header-bar-frame86 {
    gap: 16px !important;
    padding: 12px !important;
  }
}

/* ---- 4) Sehr kleine Screens (< 400px), z.B. aeltere/kompakte Handys ---- */
@media (max-width: 400px) {
  .header-text-mit-bild-text {
    font-size: 26px !important;
  }
}

/* ---- 5) Bilder und iFrames nie breiter als ihr Container ---- */
img, iframe, video {
  max-width: 100%;
  height: auto;
}

/*
  Ergaenzung zu responsive_fix.css speziell fuer frameberuns.html
  ------------------------------------------------------------------
  Diese Regeln NICHT als separate Datei einbinden, sondern den Inhalt
  unten in die bereits bestehende responsive_fix.css einfuegen (z.B. an
  das Dateiende anhaengen). Die Datei responsive_fix.css ist bereits in
  frameberuns.html per <link> eingebunden (siehe vorherige Anleitung),
  ein zusaetzlicher <link>-Tag ist NICHT notwendig.

  Gefundene Ursache (analog zum index.css-Problem):
  .frameberuns-component4 hat eine feste width:600px. Auf Smartphones
  (< 600px Breite) ragt dieser Container ueber den Bildschirmrand.
  Zusaetzlich hat die Seitenueberschrift .frameberuns-text08 grosse feste
  Innenabstaende (padding-left/right: 60px) bei 64px Schriftgroesse, was
  auf kleinen Screens zu wenig Platz fuer den Text laesst.
*/

/* ---- 600px-Container von "Über uns" responsive machen ---- */
.frameberuns-component4 {
  width: 100%;
  max-width: 600px;
  box-sizing: border-box;
}

/* ---- Aeussere Frame-Paddings auf kleinen Screens reduzieren ---- */
@media (max-width: 640px) {
  .frameberuns-frame74 {
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box;
  }

  /* Seitenueberschrift "Über uns": Padding und Schriftgroesse verkleinern */
  .frameberuns-text08 {
    font-size: 32px !important;
    height: auto !important;
    padding-top: 20px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-bottom: 20px !important;
  }

  /* Hintergrundbild-Header (Bild von IMG_9000.JPG) niedriger machen,
     damit er auf dem Handy nicht unnoetig viel Platz einnimmt */
  .frameberuns-uto-fonts {
    height: 220px !important;
  }

  /* Kapitelueberschriften (Bebas Neue, 32px) leicht verkleinern */
  .frameberuns-text09,
  .frameberuns-text35,
  .frameberuns-text44 {
    font-size: 26px !important;
  }

  /* Kopfzeile/Navigation: weniger Innenabstand auf kleinen Screens */
  .frameberuns-uto-header-bar {
    padding: 0 12px !important;
  }

  .frameberuns-frame86 {
    gap: 16px !important;
    padding: 12px !important;
  }
}

/* ---- Sehr kleine Screens (< 400px) ---- */
@media (max-width: 400px) {
  .frameberuns-text08 {
    font-size: 26px !important;
  }
}

@media (max-width: 640px) {
  .frameberuns-text46 {
    font-size: 14px !important;
    line-height: 20px !important;
  }
}