/* Haupt-Container: Hält alles links am Rand und zentriert die Elemente untereinander */
#masthead .site-branding {
    display: inline-flex;
    flex-direction: column;
    align-items: center;    /* Zentriert Logo und Text zueinander */
    text-align: center;     /* Zentriert den Text in seinen Zeilen */
}

/* 1. LOGO-GRÖSSE EINSTELLEN */
#masthead .site-branding img.custom-logo {
    max-height: 70px;       /* HIER LOGOHÖHE ÄNDERN (z.B. 60px, 80px, etc.) */
    width: auto;            /* Behält das Seitenverhältnis bei */
}

/* Abstandshalter zwischen Logo und Text */
#masthead .site-branding .custom-logo-link {
    display: block;
    margin-bottom: 8px;     
}

/* 2. TEXTBREITE FÜR UMBRUCH EINSTELLEN */
#masthead .site-description {
    display: block;
    max-width: 120px;       /* HIER TEXTBREITE ÄNDERN (kleinerer Wert = früherer Umbruch) */
    margin: 0;
		text-align: center;
    line-height: 1.3;       /* Angenehmer Zeilenabstand für den Umbruch */
}

#scroll-to-top {
  bottom: 60px !important;
}

#content.site-content {
  font-size: clamp(1rem, 1vw + 0.5rem, 1.12rem);
    margin-bottom: 100px; /* Damit der ganze Seitentext sichtbar ist, auch wenn ein sticky footer gezeigt wird. Passen Sie den Wert an die Höhe Ihres Footers an */
}

h1 {
  font-size: clamp(1.6rem, 2.8vw + 0.4rem, 2.56rem) !important;
  text-align: left !important;
}

h2 {
  font-size: clamp(1.4rem, 2.2vw + 0.3rem, 2.08rem);
  text-align: left !important;
}

h3 {
  font-size: clamp(1.2rem, 1.8vw + 0.25rem, 1.6rem);
  text-align: left !important;
}

h4 {
  font-size: clamp(1.05rem, 1.3vw + 0.25rem, 1.28rem);
  text-align: left !important;
}

h5 {
  font-size: clamp(0.95rem, 1vw + 0.15rem, 1.04rem);
  text-align: left !important;
}

h6 {
  font-size: clamp(0.9rem, 0.8vw + 0.15rem, 0.96rem);
  text-align: left !important;
}

/* 1. LAYOUT: 10% Rand links und rechts (80% Breite) */
.site-content .corp-container {
    max-width: 80% !important;
    width: 80% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
/* Passt die Breite für kleinere Bildschirme an, falls nötig */
@media (min-width: 768px) and (max-width: 1140px) {
    .site-content .corp-container {
        max-width: 90% !important;
        width: 90% !important;
    }
}

/* 2. HYPHENATION: Silbentrennung für alle Texte und Überschriften */
/* Wir sprechen die Tags direkt und die SiteOrigin Widget-Container an */
p, h1, h2, h3, h4, h5, h6, 
.sow-editor-base, 
.sow-headline, 
.so-panel.widget {
    /* Browser-Anweisung zur automatischen Trennung */
    -webkit-hyphens: auto !important;
    -ms-hyphens: auto !important;
    hyphens: auto !important;
    
    /* Umbruch-Verhalten kontrollieren */
    word-break: normal !important; /* Verhindert das Abschneiden ohne Bindestrich */
    overflow-wrap: break-word !important; /* Erlaubt Umbruch bei extrem langen Wörtern */
    
    /* Blocksatz-Optimierung (Optional, falls Sie Blocksatz nutzen) */
    text-align: justify; 
    hyphenate-limit-chars: 6 3 3; /* Mindestlänge 6 Buchstaben, 3 davor, 3 danach */
}

/* 3. KORREKTUR für SiteOrigin Row-Layouts */
/* Stellt sicher, dass Flex-Container den Umbruch nicht verhindern */
.panel-grid-cell .so-panel {
    word-wrap: break-word !important;
    min-width: 0; /* Wichtig für Flexbox-Container */
}

/* 4. Breite des Logos anpassen */
.site-header .site-branding img {
    max-width: 200px !important; /* Hier gewünschte Breite eingeben */
    height: auto !important;
}

/* 5. Optional: Falls Sie ein Retina-Logo verwenden und es zu groß erscheint */
img.alt-logo {
    max-width: 200px !important;
}

/* 6. breadcrumbs ausschalten */
.breadcrumbs {display: none !important}

/* Die Container der Module gleich hoch machen */
.preci-module-row {
  display: flex;
}
.preci-module-row .panel-grid-cell {
  display: flex;
  flex-direction: column;
}
.preci-module-row .panel-first-child {
  flex: 1;
}
.preci-module-row .panel-first-child,
.preci-module-row .panel-first-child .so-rounded,
.preci-module-row .panel-first-child .so-widget-sow-editor,
.preci-module-row .panel-first-child .siteorigin-widget-tinymce {
  height: 100%;
  box-sizing: border-box;
}

/* Stil für Sprachwahlschalter von AI Translate */
/* Sprachschalter - Farb-Overrides + Größenanpassung */
.ai-trans {
  transform: scale(0.8) !important;
	transform-origin: top right !important;
}

.ai-trans .ai-trans-btn {
  background: #005678 !important;
}

.ai-trans .ai-trans-btn:hover {
  background: #f28b00 !important;
}

.ai-trans .ai-trans-menu {
  border-color: #005678 !important;
  min-width: unset !important;
  width: max-content !important;
  padding: 4px !important;
}

.ai-trans .ai-trans-item {
  padding: 4px 5px !important;
}

.ai-trans .ai-trans-item:hover {
  background: #f28b00 !important;
  color: #ffffff !important;
}


/* Der Ausbruch-Mechanismus für die spezifische ID */
#preci_row_fullwidth {
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    max-width: 100vw !important;
    /* Verhindert horizontales Scrollen durch Rundungsfehler */
    overflow: hidden; 
}

/* Alle inneren SiteOrigin-Container dieser Zeile auf Null setzen */
#preci_row_fullwidth .panel-grid-cell,
#preci_row_fullwidth .panel-cell-style,
#preci_row_fullwidth .panel-widget-style {
    padding: 0 !important;
    margin: 0 !important;
}

/* Spezifische Korrektur für das Hero-Widget */
#preci_hero_fullwidth,
#preci_hero_fullwidth .sow-slider-base {
    width: 100% !important;
}

.preci_hero_h1 {
		font-size: clamp(1.6rem, 2.8vw + 0.4rem, 2.56rem) !important;
    display: block !important;              /* Sicherstellen, dass es ein Block-Element ist */
    width: fit-content !important;          /* Rahmen schmiegt sich an den Text an */
    max-width: 80% !important;              /* Verhindert zu breiten Rahmen auf Mobile */
    margin: 3vw auto !important; /* Oben/Unten: 3vw | Links/Rechts: auto (zentriert) */
    text-align: center !important;          /* Zentriert den Text innerhalb des Rahmens */
		color: #f28b00 !important;
		background-color: rgba(0,0,0, 0.5) !important;
    border: 3px solid #f28b00 !important; 
    border-radius: 999px !important; 
    padding: 10px 30px !important;          /* Mehr Padding an den Seiten für den Kapsel-Look */
}

/* Sticky Footer */
#colophon.site-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
}

#main.site-main {
    margin-bottom: 60px; /* Passen Sie den Wert an die Höhe Ihres Footers an */
}