/*
Theme Name: Alta Via Applications
Description: Custom WordPress Block Theme für Alta Via Applications mit exaktem Design System
Version: 1.0.0
Author: Alta Via Marketing Team
Text Domain: alta-via
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 8.0
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* ==========================================================================
   CSS Custom Properties - Design System
   ========================================================================== */

:root {
  /* Primary Colors */
  --color-dark-blue: #002e64;
  
  /* Sky Blue Variants */
  --color-sky-blue-100: #a8dcf4;
  --color-sky-blue-70: #b8e0f5;
  --color-sky-blue-40: #d1eaf8;
  --color-ice-blue: #eaf3f9;
  
  /* Mid Blue Variants */
  --color-mid-blue-100: #5095cb;
  --color-mid-blue-70: #7fabd4;
  --color-mid-blue-40: #adc7e0;
  
  /* Secondary Colors */
  --color-orange: #f7a600;
  --color-sunny-yellow: #ffd700;
  
  /* Typography */
  --font-family-primary: 'Titillium Web', sans-serif;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* Desktop Typography Scale */
  --font-size-h1-desktop: 69px;
  --font-size-h2-desktop: 55px;
  --font-size-h3-desktop: 44px;
  --font-size-h4-desktop: 35px;
  --font-size-h5-desktop: 28px;
  --font-size-h6-desktop: 24px;
  --font-size-body: 18px;
  --font-size-small: 14px;
  --font-size-smaller: 12px;
  
  /* Mobile Typography Scale */
  --font-size-h1-mobile: 36px;
  --font-size-h2-mobile: 32px;
  --font-size-h3-mobile: 29px;
  --font-size-h4-mobile: 26px;
  --font-size-h5-mobile: 23px;
  --font-size-h6-mobile: 20px;
  
  /* Line Heights */
  --line-height-tight: 110%;
  --line-height-normal: 140%;
  
  /* Typography Scale */
  --type-scale-desktop: 1.25;
  --type-scale-mobile: 1.125;
  
  /* Base Values */
  --base-font-size: 18px;
}

/* ==========================================================================
   Reset & Base Styles
   ========================================================================== */

* {
  box-sizing: border-box;
}

body {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-body);
  line-height: var(--line-height-normal);
  color: var(--color-dark-blue);
  margin: 0;
  padding: 0;
}
/* Verhindert weißen Bereich unter dem Footer */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* Optional: Footer immer am unteren Rand */
.wp-site-blocks {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site-footer {
  margin-top: auto; /* Drückt Footer nach unten */
  border-bottom: none; /* Entfernt den blauen Strich */
}
/* ==========================================================================
   Typography Base
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  margin: 0;
  color: var(--color-dark-blue);
}

/* Desktop Typography */
@media (min-width: 768px) {
  h1 { font-size: var(--font-size-h1-desktop); }
  h2 { font-size: var(--font-size-h2-desktop); }
  h3 { font-size: var(--font-size-h3-desktop); }
  h4 { font-size: var(--font-size-h4-desktop); }
  h5 { font-size: var(--font-size-h5-desktop); }
  h6 { font-size: var(--font-size-h6-desktop); }
}

/* Mobile Typography */
@media (max-width: 767px) {
  h1 { font-size: var(--font-size-h1-mobile); }
  h2 { font-size: var(--font-size-h2-mobile); }
  h3 { font-size: var(--font-size-h3-mobile); }
  h4 { font-size: var(--font-size-h4-mobile); }
  h5 { font-size: var(--font-size-h5-mobile); }
  h6 { font-size: var(--font-size-h6-mobile); }
}

p {
  font-size: var(--font-size-body);
  line-height: var(--line-height-normal);
  margin: 0 0 1rem 0;
}

/* ==========================================================================
   Theme Specific Styles
   ========================================================================== */

.wp-site-blocks {
  padding: 0;
}

.wp-block-group {
  margin-bottom: 0;
}

/* Editor Styles Mirror */
.editor-styles-wrapper {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-body);
  line-height: var(--line-height-normal);
}

/* Seitentitel komplett ausblenden */
.wp-block-post-title {
    display: none !important;
}

/* Oder nur auf Seiten (nicht Beiträgen) */
.page .wp-block-post-title {
    display: none !important;
}

/* Alle Gutenberg-Container oben und unten ohne Abstand */
.wp-block-group,
.wp-block-columns,
.wp-block-cover {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Falls du nur bestimmte Gruppen trennen willst, kannst du hier individueller selektieren, z. B.: */
#wp--skip-link--target .wp-block-group.is-layout-constrained {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* 1. Setze das standardisierte Gutenberg-Gap auf null */
.wp-block-group.is-layout-constrained,
.wp-block-columns {
  --wp--style--block-gap: 0 !important;
}

/* 2. Entferne alle Margins zwischen den direkten Kindern im Entry-Content */
.entry-content > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* 3. Für den Cover-Block ggf. extra */
.wp-block-cover {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* Desktop: Header mit zentriertem Logo */
@media (min-width: 782px) {
  .site-header {
    height: 200px;
    max-height: 200px;
    overflow: hidden;
  }
  
  .site-header .wp-block-group {
    height: 100%;
    max-height: 200px;
    display: flex;
    align-items: center; /* Vertikal zentriert */
    justify-content: center; /* Horizontal zentriert */
  }
  
  .site-branding {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* Option 2: Mit flexbox align-self */
.footer-column-center, 
.footer-column-right {
  padding-top: 10% !important;

}
}

/* Mobile auch zentriert */
@media (max-width: 781px) {
  .site-header .wp-block-group {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
/* Footer Styles – Verbesserte Version */

/* Grundstruktur */
.site-footer {
  background-color: #eaf3f9;
  border-bottom: 15px solid #5095cb;
  width: 100%;
 
  min-height: 264px; /* min-height statt height! */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.site-footer > .wp-block-group {
 
  width: 100%;
  margin: 0 auto;
  min-height: 264px;
  padding: 30px 10px 5px 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  box-sizing: border-box;
  gap: 0; /* Kein Spalt, für bündige Ausrichtung */
}

.footer-column {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0 20px; /* Alle Spalten gleiche Innenabstände */
  box-sizing: border-box;
}

.footer-column-left {
  align-items: flex-start;
  padding-left: 0;
}
.footer-column-center {
  align-items: center;
  text-align: center;
}
.footer-column-right {
  align-items: flex-end;
  text-align: right;
  padding-right: 0;
}

/* Footer-Logo */
.footer-logo {
  margin: 0 0 20px 0;
}

.footer-logo img {
  width: 200px;
  height: auto;
  display: block;
}

/* Footer Text */
.site-footer p {
  margin: 0;
  padding: 0;
  line-height: 1.5;
  color: #002e64;
}

/* Footer Links */
.site-footer a {
  color: #002e64;
  text-decoration: none;
}
.site-footer a:hover {
  text-decoration: underline;
}

/* Footer Navigation */
.footer-navigation .wp-block-navigation__container {
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}
.footer-navigation .wp-block-navigation-item {
  display: block;
  text-align: right;
}
.footer-navigation .wp-block-navigation-item a {
  font-size: 16px;
  line-height: 1.2;
}

/* ================= MOBILE ================= */
@media (max-width: 781px) {
  .site-footer > .wp-block-group {
    flex-direction: column;
    min-height: 0;
    height: auto;
    gap: 0;
    padding: 20px 10px 5px 10px;
  }
  .footer-column {
    width: 100%;
    align-items: flex-start !important;
    text-align: left !important;
    padding: 0;
    border-top: 1px solid #b8e0f5; /* Trennlinie */
  }
  .footer-column:first-child {
    border-top: none;
  }
  .footer-navigation .wp-block-navigation__container {
    align-items: flex-start;
  }
  .footer-navigation .wp-block-navigation-item {
    text-align: left;
  }
  .footer-logo img {
    width: 150px;
  }
}

/* ================= DESKTOP BÜNDIGKEIT ================= */
@media (min-width: 782px) {
  .footer-column {
    /* Gleiche Höhe durch align-items und justify-content */
    min-height: 180px;
  }
  .footer-column-left,
  .footer-column-center,
  .footer-column-right {
    justify-content: flex-start;
    /* padding innerhalb der columns schon oben gesetzt */
  }
}
/* Header und Footer ohne Abstände */
.site-header,
.site-footer {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* WordPress Site Container ohne Abstände */
.wp-site-blocks {
  padding: 0 !important;
  margin: 0 !important;
}

/* Hauptinhalt ohne Abstände zu Header/Footer */
main,
.wp-block-post-content,
.site-main {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Template Parts ohne Abstände */
.wp-block-template-part {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}


.lokalBild {
  margin-top: 10% !important;
}


/* Desktop: Header mit reduziertem Abstand */
@media (min-width: 782px) {
  .site-header {
    height: 150px; /* Deutlich reduziert von 200px */
    max-height: 150px;
    position: relative;
  }
  
  .site-header .wp-block-group {
    height: 100%;
    max-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 15px !important; /* Minimaler Abstand oben */
    padding-bottom: 15px !important; /* Minimaler Abstand unten */
  }
  
  .site-branding {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Logo Größe anpassen */
  .site-branding img,
  .site-logo img,
  .site-header img {
    width: 300px; /* Kleineres Logo für kompakteren Header */
    height: auto;
    max-width: 100%;
  }
}

/* Mobile Header auch kompakter */
@media (max-width: 781px) {
  .site-header {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  
  .site-header .wp-block-group {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  
  .site-branding img,
  .site-logo img,
  .site-header img {
    width: 180px; /* Noch kleiner auf Mobile */
    height: auto;
  }
}

/* Zusätzlich: Falls das Logo selbst Abstände hat */
.site-branding p {
  margin: 0 !important;
  padding: 0 !important;
}

.site-logo {
  margin: 0 !important;
  padding: 0 !important;
}

/* Skip-Link (Zum Hauptinhalt springen) außerhalb des Headers positionieren */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Skip-Link bei Focus sichtbar machen */
.skip-link:focus {
  position: absolute;
  left: 6px;
  top: 7px;
  z-index: 999999;
  width: auto;
  height: auto;
  padding: 8px 16px;
  background-color: #002e64;
  color: white;
  text-decoration: none;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0,0,0,.6);
}

/* Deine eigene Klasse direkt am Bild */
.hero-bild {
  width: 100vw !important;
  max-width: 2000px !important;
  height: auto !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
}

.wp-block-button a.wp-block-button__link::after {
  content: ' ➡' !important; /* Kräftiger, klarer Pfeil */
  font-size: 1em !important;
  margin-left: 12px !important;
  display: inline-block !important;
  vertical-align: middle !important;
  line-height: 0.7 !important;
}




/* Desktop: 70vw Breite 
@media (min-width: 782px) {
  .section2 {
    width: 70vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-bottom: 5% !important;
  }
}


@media (max-width: 781px) {
  .section2 {
    width: 90vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-bottom: 5% !important;
  }
}
/* Mobile: 90vw Breite */