/*
  EUROPEC V30.15.13 – DESKTOP TYPOGRAPHY LIVE
  Production stylesheet. Mobile/tablet below 1024px intentionally unchanged.
  Goal: consistent typography roles + fewer unnecessary desktop line breaks.
*/
@media (min-width: 1024px) {
  /* HERO / H1: one consistent desktop scale */
  h1 {
    font-size: 48px !important;
    line-height: 1.08 !important;
    letter-spacing: -0.02em !important;
  }

  /* Standalone hero headings may use more of the existing content width. */
  h1[class*="max-w-"] {
    max-width: 1120px !important;
  }
  .hero h1 {
    max-width: 1120px !important;
  }

  /* MAIN SECTION / CTA H2: one consistent desktop scale. */
  h2[class*="md:text-[30px]"],
  h2[class*="md:text-[31px]"],
  h2[class*="md:text-[34px]"],
  h2[class*="md:text-[36px]"],
  h2[class*="md:text-[38px]"],
  h2[class*="md:text-[40px]"],
  h2[class*="md:text-[42px]"] {
    font-size: 38px !important;
    line-height: 1.14 !important;
    letter-spacing: -0.02em !important;
  }

  /* Pforzheim/Mannheim landing pages use their own inline CSS. */
  .section-title h2,
  .cta h2 {
    font-size: 38px !important;
    line-height: 1.14 !important;
    letter-spacing: -0.02em !important;
  }

  /* Widen only wrappers whose direct child is a large heading. */
  div.max-w-\[900px\]:has(> h1),
  div.max-w-\[920px\]:has(> h1),
  div.max-w-\[930px\]:has(> h1),
  div.max-w-\[980px\]:has(> h1),
  div.max-w-\[1000px\]:has(> h1),
  div.max-w-\[1050px\]:has(> h1) {
    max-width: 1120px !important;
  }

  div.max-w-\[720px\]:has(> h2),
  div.max-w-\[800px\]:has(> h2),
  div.max-w-\[820px\]:has(> h2) {
    max-width: 1100px !important;
  }

  /* Keep compact card/utility headings deliberately smaller. */
  .location-card h2 {
    font-size: 24px !important;
    line-height: 1.2 !important;
    letter-spacing: normal !important;
  }
}

/*
  EUROPEC V30.15.14 – DESKTOP TYPOGRAPHY FEINSCHLIFF
  Ergänzung zu V30.15.13. Nur Desktop ab 1024px.
  Ziel: nicht nur Überschriften, sondern auch direkte Einleitungs-/Begleittexte
  nutzen die vorhandene Inhaltsbreite sinnvoller. Kartenraster und Mobile bleiben unverändert.
*/
@media (min-width: 1024px) {
  /* Landingpages: Abschnittstitel + erläuternder Satz dürfen die vorhandene Breite nutzen. */
  .section-title {
    max-width: 1080px !important;
  }
  .section-title > p {
    max-width: 1020px !important;
  }

  /* Bild-/Standort-Einleitungen wie "Einblicke in unsere Räume". */
  .pf-gallery-head {
    max-width: 1080px !important;
  }
  .pf-gallery-head > p {
    max-width: 1020px !important;
  }

  /* Erklärtexte direkt nach großen Überschriften auf den Tailwind-Unterseiten. */
  h1 ~ p[class*="max-w-"],
  h2 + p[class*="max-w-"] {
    max-width: 1050px !important;
  }

  /* Weitere bisher zu enge, reine Text-Wrapper verbreitern – keine Karten/Boxen. */
  div.max-w-\[780px\]:has(> h2):not([class*="rounded"]),
  div.max-w-\[850px\]:has(> h2):not([class*="rounded"]),
  div.max-w-\[900px\]:has(> h2):not([class*="rounded"]),
  div.max-w-\[920px\]:has(> h2):not([class*="rounded"]),
  div.max-w-\[940px\]:has(> h2):not([class*="rounded"]) {
    max-width: 1100px !important;
  }

  /* Größere Einleitungsblöcke unter H1: Text soll nicht künstlich früh umbrechen. */
  .hero .lead {
    max-width: 900px !important;
  }

  /* Standort-Foto: große Zwischenüberschrift etwas ruhiger, ohne Kartenbreite zu ändern. */
  .photo-copy h3 {
    font-size: 24px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
  }

  /* CTA-Texte nutzen links den verfügbaren Raum besser; Buttonblock bleibt unangetastet. */
  .cta > div:first-child {
    flex: 1 1 680px !important;
    min-width: 0 !important;
  }
  .cta h2 {
    max-width: 900px !important;
  }
  .cta p {
    max-width: 850px !important;
  }
}

/*
  EUROPEC V30.15.15 – DESKTOP ZEILENBREITE FEINSCHLIFF
  Nur Desktop ab 1024px.
  Ziel: Begleit-/Einleitungssaetze unter Abschnittsueberschriften etwas breiter,
  damit einzelne Schlusswoerter nicht unnoetig in eine neue Zeile rutschen.
  Mobile, Kartenraster und sonstige Layoutbreiten bleiben unveraendert.
*/
@media (min-width: 1024px) {
  /* Landingpages: Textbereiche nahezu die vorhandene Wrap-Breite nutzen lassen. */
  .section-title {
    max-width: 1180px !important;
  }
  .section-title > p {
    max-width: 1160px !important;
  }

  /* Entsprechender Feinschliff fuer klassische Unterseiten. */
  h1 ~ p[class*="max-w-"],
  h2 + p[class*="max-w-"] {
    max-width: 1160px !important;
  }

  /* Bild-/Galerie-Einleitungen ebenfalls etwas grosszuegiger. */
  .pf-gallery-head {
    max-width: 1180px !important;
  }
  .pf-gallery-head > p {
    max-width: 1160px !important;
  }
}

/*
  EUROPEC V30.15.16 – DESKTOP FOTO-/TEXTBLOCK FEINSCHLIFF
  Nur Desktop ab 1024px.
  Ziel: Beim Standort-Aussenansicht-Block sind Foto und rechter Infoblock
  exakt gleich hoch. Mobile/Tablet bleiben unveraendert.
*/
@media (min-width: 1024px) {
  /* Die bisherige vertikale Zentrierung verursachte die kuerzere rechte Karte. */
  .photo-grid {
    align-items: stretch !important;
  }

  /* Beide direkten Spalten nehmen die volle gemeinsame Grid-Zeilenhoehe ein. */
  .photo-grid > .location-photo,
  .photo-grid > .photo-copy {
    height: 100% !important;
  }

  /* Der rechte Block nutzt die Zusatzhoehe sauber; Aktionen bleiben unten. */
  .photo-grid > .photo-copy {
    display: flex !important;
    flex-direction: column !important;
  }
  .photo-grid > .photo-copy .photo-actions {
    margin-top: auto !important;
    padding-top: 22px !important;
  }
}

/*
  EUROPEC V30.15.17 – MANNHEIM FOTO-/TEXTBLOCK ALIGNMENT
  Nur Desktop ab 1024px.
  Ursache: Auf der Mannheim-Landingpage ist .location-photo ein <figure> ohne
  eigenes margin:0. Der Browser-Standardabstand des figure-Elements verschiebt
  den linken Fotoblock gegenueber dem rechten Infoblock.
  Die Regel entfernt ausschliesslich diesen Standardabstand im Foto-Grid.
*/
@media (min-width: 1024px) {
  .photo-grid > .location-photo {
    margin: 0 !important;
  }
}

/*
  EUROPEC V30.15.18 – LANDINGPAGE TOPBAR ENTFERNT
  Teststand: Der alte dunkle Zusatzstreifen oberhalb des hellblauen Headers
  auf den Standortseiten Pforzheim/Mannheim wird ausgeblendet.
  Header, Navigation, Typografie, Fotobloecke und Mobile-Layout bleiben unveraendert.
*/
body > .top {
  display: none !important;
}

/*
  EUROPEC V30.15.24 – DESKTOP GLOBALER BREITEN-/BLOCKRASTER-FEINSCHLIFF
  Nur Desktop ab 1024px.
  Ziele:
  1) Freistehende Einleitungs-/Begleittexte nutzen die vorhandene Inhaltsbreite besser.
  2) Einzelne Inhaltsbloecke, die bisher kuenstlich schmal begrenzt waren, fuellen die Contentzeile.
  3) Gekappte 2-Spalten-Raster nutzen mit beiden Karten gemeinsam die komplette Contentbreite.
  Bewusst NICHT betroffen: Mobile/Tablet, Karteninhalte, FAQ-Karten, Standortkarten,
  Kontaktformular, Footer und bestehende 3-Spalten-Raster.
*/
@media (min-width: 1024px) {
  /* Globale Textbreite: vorhandene max-w-Klassen duerfen auf Desktop bis 1160px nutzen.
     In Karten bleibt die reale Breite weiterhin durch den Karten-Elternblock begrenzt. */
  p[class*="max-w-"] {
    max-width: 1160px !important;
  }

  /* Erfolge/Lernfortschritt: der einzelne Ziel-/Erfolgsblock soll die ganze Contentzeile nutzen. */
  .max-w-\[1240px\] > div.max-w-\[940px\]:has(> h2) {
    width: 100% !important;
    max-width: none !important;
  }

  /* BuT: einzelne hervorgehobene Karten ueber die volle Contentbreite. */
  .max-w-\[1240px\] > div.max-w-\[900px\].rounded-\[24px\] {
    width: 100% !important;
    max-width: none !important;
  }

  /* BuT / gleiches Muster: zwei nebeneinander liegende Karten fuellen zusammen die Zeile. */
  .max-w-\[1240px\] > div.grid.md\:grid-cols-2[class*="max-w-"] {
    width: 100% !important;
    max-width: none !important;
  }
}

/*
  EUROPEC V30.15.25 – DESKTOP FEINSCHLIFF NACH V30.15.24
  Nur Desktop ab 1024px.
  Ziele:
  1) Verbliebenen alten dunklen Zusatz-Topbalken auf den klassischen Unterseiten entfernen.
  2) Auf der Lehrkraefte-Seite nach dem letzten Empfehlungsblock vor dem Footer wieder
     einen kleinen, optisch gleichen Abschlussabstand herstellen.
  3) Die standardisierten Fachseiten-CTAs nach dem Faecher-Ueberblick auf Desktop
     die vorhandene Contentbreite besser nutzen lassen.
  Mobile/Tablet, Footer, Stickybar, Karten, Maps und Standort-Fotobloecke bleiben unveraendert.
*/
@media (min-width: 1024px) {
  /* Alter dunkler Zusatzstreifen oberhalb des hellblauen Headers.
     Im Basisstand kommt dieses exakte direkte Body-Element nur auf den klassischen
     Unterseiten mit der alten Topbar vor. */
  body > div.bg-\[\#0F2C61\].text-white.text-\[12px\].md\:text-\[13px\] {
    display: none !important;
  }

  /* Lehrkraefte: Der zweite Empfehlungsblock soll vor dem Footer wieder denselben
     kleinen Abschlussabstand erhalten, den der erste Block nach oben hat. */
  main > section.py-0.pb-8.bg-white:has(a[href="/erfolge-lernfortschritt/"]) {
    padding-bottom: 2rem !important;
  }

  /* Fachseiten-Familie: Nur der standardisierte CTA direkt nach #faecher.
     Der innere Textbereich darf die komplette vorhandene Contentbreite nutzen. */
  #faecher + section.bg-\[\#0F2C61\].text-white > div.max-w-\[1240px\] > div[class*="max-w-"] {
    width: 100% !important;
    max-width: none !important;
  }

  #faecher + section.bg-\[\#0F2C61\].text-white > div.max-w-\[1240px\] > div[class*="max-w-"] h2 {
    max-width: 1160px !important;
  }

  #faecher + section.bg-\[\#0F2C61\].text-white > div.max-w-\[1240px\] > div[class*="max-w-"] p {
    max-width: 1080px !important;
  }
}

/*
  EUROPEC V30.15.26 – MOBILE RECHTSLINKS + STICKYBAR FEINSCHLIFF
  1) Rechtliches wird in den bisher abweichenden klassischen Unterseiten per HTML/JS
     auf dasselbe Impressum-/Datenschutz-Popup wie auf den bereits korrekten Fachseiten umgestellt.
  2) Nur die gemeinsame #stickybar auf kleinen Smartphones wird kompakter, damit die
     Mannheimer Telefonnummer 0621 39745790 vollständig sichtbar bleibt.
     Standort-spezifische .stickybar-Varianten (Pforzheim/Mannheim) bleiben unberührt.
*/
@media (max-width: 480px) {
  #stickybar > div {
    padding-left: 6px !important;
    padding-right: 6px !important;
    gap: 4px !important;
  }

  #stickybar > div > div:first-child {
    gap: 3px !important;
    font-size: 10px !important;
    letter-spacing: 0 !important;
    overflow: visible !important;
    min-width: 0 !important;
  }

  #stickybar > div > div:first-child > span {
    flex-shrink: 0 !important;
  }

  #stickybar > div > div:last-child {
    gap: 3px !important;
  }

  #stickybar > div > div:last-child > a.md\:hidden {
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-size: 11px !important;
  }
}