/* Cresvia - mobile Anpassungen. Greift unterhalb von 900 px.
   Entscheidungen folgen den mobilen Entwuerfen im Canvas. */

@media (max-width: 900px) {

  /* --- Abstaende: 64 px Innenabstand wird 20 px --- */
  header, section, footer, #consent-banner > div {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  section { padding-top: 34px !important; padding-bottom: 34px !important; }
  section > div, footer > div { padding-left: 0 !important; padding-right: 0 !important; }
  /* Abschnitte, deren Inhalt in einem eigenen Rahmen liegt: Abstand am Rahmen */
  section[style*="background:"] > div { padding-left: 0 !important; padding-right: 0 !important; }

  /* --- Raster: alles einspaltig, Team und Strategien zweispaltig --- */
  div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 20px !important; }
  div[style*="repeat(4, minmax"], div[style*="repeat(3, minmax"] { grid-template-columns: 1fr !important; }
  .cards { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
  .cards img { height: auto !important; aspect-ratio: 1 / 1; object-fit: cover; }

  /* --- Flex-Spalten umbrechen --- */
  div[style*="flex-basis"] { flex-basis: 100% !important; }

  /* --- Schriftstaffel wie in den mobilen Entwuerfen --- */
  h1 { font-size: 33px !important; line-height: 1.12 !important; }
  h2 { font-size: 27px !important; line-height: 1.2 !important; }
  h3 { font-size: 19px !important; }
  p, span, a, label, input, textarea, select, li { font-size: 16px; }
  p[style*="font-size: 21px"], p[style*="font-size: 20px"], p[style*="font-size: 19px"] { font-size: 17px !important; line-height: 1.6 !important; }
  p[style*="letter-spacing: 3px"] { font-size: 12px !important; }
  span[style*="font-size: 15px"][style*="letter-spacing"] { font-size: 12px !important; }
  /* grosse Kennzahlen */
  span[style*="font-size: 56px"], span[style*="font-size: 52px"], span[style*="font-size: 48px"] { font-size: 30px !important; }
  span[style*="font-size: 42px"], span[style*="font-size: 40px"] { font-size: 26px !important; }

  /* --- Bilder nicht ueberhoch --- */
  img { max-width: 100%; height: auto; }
  img[style*="height: 520px"], img[style*="height: 480px"], img[style*="height: 420px"] { height: 240px !important; }
  img[style*="height: 620px"], img[style*="height: 560px"] { height: 260px !important; }

  /* --- Navigation: Leiste wird Klappmenue --- */
  header { position: sticky; top: 0; z-index: 50; background: #FFFFFF; }
  header nav {
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: 100%;
    border-top: 1px solid #E8E8E4;
    margin-top: 14px;
  }
  header nav.open { display: flex !important; }
  header nav > a, header nav .navitem > a {
    display: block !important;
    padding: 16px 4px !important;
    border-bottom: 1px solid #F0EEE8;
    font-size: 17px !important;
  }
  header nav .navitem { display: block !important; width: 100%; }
  header nav .submenu { position: static !important; display: block !important; padding-top: 0 !important; }
  header nav .submenu-inner { border: 0 !important; box-shadow: none !important; min-width: 0 !important; }
  header nav .submenu-inner a { padding: 14px 4px 14px 22px !important; font-size: 16px !important; }
  header nav > a.btn-nav {
    display: flex !important; align-items: center; justify-content: center;
    margin-top: 14px; padding: 0 22px !important; border-bottom: 0;
  }
  .navtoggle { display: inline-flex !important; }
  header > a > img[alt="Cresvia Capital"] { height: 40px !important; }
  img.cta-logo { height: 44px !important; }
  img.office-logo { width: auto !important; height: 22px !important; max-width: 70% !important; aspect-ratio: auto !important; object-fit: contain !important; margin: 0 0 8px !important; border: 0 !important; }
  header nav > .langswitch {
    display: flex !important;
    padding: 16px 4px !important;
    border-bottom: 1px solid #F0EEE8;
    font-size: 17px !important;
  }

  /* --- Tabellen: gestapelt statt vierspaltig --- */
  table { display: block !important; }
  table tr { display: flex !important; flex-direction: column; gap: 2px; border-bottom: 1px solid #EFEDE6; padding: 12px 0; }
  table th, table td { display: block !important; padding: 2px 0 !important; border: 0 !important; }
  table tr:first-child { display: none !important; }
  table td[data-label]::before { content: attr(data-label) ": "; font-weight: 600; color: #2A2A2A; }
  table tr > td:first-child { font-weight: 600; color: #8A7B3E; }
  .kf-note { margin: 0 !important; padding: 18px 20px 24px !important; }

  /* --- Wischbaender bleiben, aber ohne seitlichen Ueberhang --- */
  .strip { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* --- Consent-Banner --- */
  #consent-banner > div { flex-direction: column !important; gap: 18px !important; padding-top: 20px !important; padding-bottom: 20px !important; }
  #consent-banner button { font-size: 15px !important; }
}

/* Umschalter nur mobil sichtbar */
.navtoggle { display: none; align-items: center; justify-content: center; width: 46px; height: 46px; border: 1px solid #E8E8E4; background: #FFFFFF; cursor: pointer; }
.navtoggle span { display: block; width: 20px; height: 2px; background: #2A2A2A; position: relative; }
.navtoggle span::before, .navtoggle span::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: #2A2A2A; }
.navtoggle span::before { top: -6px; }
.navtoggle span::after { top: 6px; }

/* --- Gesamtmassstab: Laptop 80 %, grosser Monitor 100 % --- */
/* Laptops liegen bis ca. 1730 px (MacBook Pro 16"), Monitore ab 1920 px (Full HD und groesser) */
@media (min-width: 901px) and (max-width: 1799px) {
  body { zoom: 0.8; }
}

/* --- Alle Textverweise reagieren auf Zeigerueberfahrt --- */
a { transition: color .15s ease; }
a:not(.btn):not(.navlink):not(.tocbtn):hover { color: #8A7B3E !important; }
.tocbtn:hover { color: #2A2A2A; }
a.card:hover, a.doc:hover, a.job:hover, a.strategylink:hover { color: inherit; }

/* ===================================================================
   Mobil: Feinschliff nach den mobilen Entwürfen (bis 900 px)
   =================================================================== */
@media (max-width: 900px) {

  /* --- Fließtext: Entwurf arbeitet mit 16-17 px --- */
  p, li, label, span, a, td, th { font-size: 16px; }
  p[style*="font-size: 2"], p[style*="font-size: 19px"], p[style*="font-size: 18px"] {
    font-size: 17px !important; line-height: 1.6 !important;
  }
  span[style*="font-size: 1"][style*="letter-spacing: 3px"] { font-size: 11px !important; }
  p[style*="letter-spacing: 3px"] { font-size: 11px !important; }
  p[style*="letter-spacing: 2px"], h3[style*="letter-spacing: 2px"] { font-size: 11px !important; }

  /* --- Überschriften --- */
  h1 { font-size: 29px !important; line-height: 1.12 !important; }
  h2 { font-size: 24px !important; line-height: 1.2 !important; }
  h3 { font-size: 18px !important; line-height: 1.3 !important; }

  /* --- Hero: Textkasten bündig an der linken Kante, volle Breite --- */
  section[style*="position: relative"][style*="background: #1E232E"],
  section[style*="position: relative"][style*="background: #2A2A2A"],
  section[style*="position: relative"][style*="background: #273F53"] {
    padding: 0 !important; align-items: stretch !important;
  }
  /* Der Kasten sitzt teils in einem zusaetzlichen Flex-Wrapper */
  section[style*="position: relative"] > div[style*="display: flex"] { width: 100% !important; }
  div[style*="background: rgba(22,28,40"], div[style*="background: rgba(20,26,38"] {
    width: 100% !important; max-width: 100% !important; margin: 0 !important;
    flex-basis: auto !important; flex-grow: 1 !important;
    padding: 26px 20px 30px !important; gap: 14px !important;
  }
  /* Grossbilder: flacher Ausschnitt, Bildmitte bleibt sichtbar */
  img[style*="object-fit: cover"][style*="height: 620px"],
  img[style*="object-fit: cover"][style*="height: 560px"],
  img[style*="object-fit: cover"][style*="height: 520px"],
  img[style*="object-fit: cover"][style*="height: 480px"],
  img[style*="object-fit: cover"][style*="height: 460px"],
  img[style*="object-fit: cover"][style*="height: 440px"],
  img[style*="object-fit: cover"][style*="height: 420px"],
  img[style*="object-fit: cover"][style*="height: 400px"] {
    height: 190px !important; width: 100% !important; flex-basis: auto !important;
  }

  /* Text zuerst, Bild darunter - in allen zweispaltigen Abschnitten */
  section > div[style*="flex-wrap: wrap"] { flex-direction: column !important; gap: 18px !important; }
  section > div[style*="flex-wrap: wrap"] > img { order: 2 !important; }
  section > div[style*="flex-wrap: wrap"] > div { order: 1 !important; }

  /* --- Hinweiskasten mit senkrechtem Balken: kleinere Schrift, Abstand zum Balken --- */
  div[style*="border-left: 3px solid #CCB666"] {
    margin: 0 20px !important;
    padding: 16px 18px 18px 20px !important;
  }
  div[style*="border-left: 3px solid #CCB666"] p {
    font-size: 13px !important; line-height: 1.55 !important;
  }
  div[style*="border-left: 3px solid #CCB666"] p[style*="letter-spacing"] {
    font-size: 10px !important;
  }
  section:has(> div[style*="border-left: 3px solid #CCB666"]) {
    padding-left: 0 !important; padding-right: 0 !important;
    padding-top: 10px !important; padding-bottom: 10px !important;
  }

  /* --- Buttons: gleiche Breite, zentrierte Schrift --- */
  .btn, a[class*="btn"]:not(.tocbtn), button[type="submit"] {
    box-sizing: border-box !important;
    flex: 1 1 100% !important;          /* in Zeilen-Containern: volle Zeile */
    align-self: stretch !important;      /* in Spalten-Containern: volle Breite */
    max-width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    min-height: 50px !important;
    padding: 0 18px !important;
    font-size: 16px !important;
    letter-spacing: 0.5px !important;
  }
  /* Button-Reihen umbrechen lassen, damit jeder Button eine eigene Zeile bekommt */
  div:has(> .btn), div:has(> a[class*="btn"]:not(.tocbtn)) { flex-wrap: wrap !important; }
  .navtoggle { flex: 0 0 auto !important; align-self: center !important; width: 46px !important; }
  /* Buttons in Spalten-Containern: Hoehe nach Inhalt, kein Umbruch in eine zweite Spalte */
  div[style*="flex-direction: column"]:has(> .btn), div[style*="flex-direction: column"]:has(> a[class*="btn"]:not(.tocbtn)) { flex-wrap: nowrap !important; }
  div[style*="flex-direction: column"] > .btn, div[style*="flex-direction: column"] > a[class*="btn"]:not(.tocbtn) { flex: 0 0 auto !important; }
  #consent-banner button { flex: 1 1 100% !important; }

  /* --- Kennzahlen: Raster 2 x 4 mit Trennlinien, wie im mobilen Entwurf --- */
  div.rise[style*="repeat(4, minmax(0, 1fr))"] {
    grid-template-columns: 1fr 1fr !important; gap: 0 !important;
  }
  div.rise[style*="repeat(4, minmax(0, 1fr))"] > div {
    padding: 22px 16px !important; gap: 5px !important;
    border-right: 1px solid #DCD4BE; border-bottom: 1px solid #DCD4BE;
  }
  div.rise[style*="repeat(4, minmax(0, 1fr))"] > div:nth-child(even) { border-right: 0; }
  div.rise[style*="repeat(4, minmax(0, 1fr))"] > div:nth-last-child(-n+2) { border-bottom: 0; }
  div.rise[style*="repeat(4, minmax(0, 1fr))"] > div > span:first-child {
    font-size: 29px !important; line-height: 1.1 !important;
  }
  div.rise[style*="repeat(4, minmax(0, 1fr))"] > div > span:last-child {
    font-size: 13px !important; line-height: 1.35 !important; letter-spacing: 0.5px !important; color: #5A5A5A !important;
  }
  /* --- Kennzahlenkacheln auf About: 2 x 2, kleinere Schrift --- */
  div[style*="grid-template-columns: repeat(4, minmax(0, 1fr))"]:not(.rise) {
    grid-template-columns: 1fr 1fr !important; gap: 10px !important;
  }
  div[style*="background: #F4F0E4"][style*="padding: 36px 32px"] {
    padding: 16px 14px !important; gap: 3px !important;
  }
  div[style*="background: #F4F0E4"][style*="padding: 36px 32px"] > span:first-child {
    font-size: 26px !important; line-height: 1.1 !important;
  }
  div[style*="background: #F4F0E4"][style*="padding: 36px 32px"] > span:last-child {
    font-size: 13px !important; line-height: 1.35 !important; color: #5A5A5A !important;
  }

  /* Abschnitt der Kennzahlen: Innenabstand aus dem Entwurf */
  section:has(> div.rise[style*="repeat(4, minmax(0, 1fr))"]) { padding: 0 !important; }

  span[style*="font-size: 56px"], span[style*="font-size: 52px"],
  span[style*="font-size: 48px"], span[style*="font-size: 46px"],
  span[style*="font-size: 42px"] {
    font-size: 26px !important; line-height: 1.1 !important;
  }

  /* --- Abschnittsabstände --- */
  section { padding-top: 28px !important; padding-bottom: 28px !important; }
  section > div { gap: 16px !important; }

  /* --- Standorte: Wischband statt Liste, wie im mobilen Entwurf --- */
  div[style*="grid-template-columns: repeat(6, minmax(0, 1fr))"] {
    display: flex !important; grid-template-columns: none !important;
    gap: 14px !important; overflow-x: auto !important;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    padding-bottom: 6px !important; margin-right: -20px !important;
  }
  div[style*="grid-template-columns: repeat(6, minmax(0, 1fr))"] > div {
    flex: 0 0 230px !important; scroll-snap-align: start;
  }
  div[style*="grid-template-columns: repeat(6, minmax(0, 1fr))"] > div > div {
    padding: 14px 16px 18px !important; gap: 4px !important;
  }
  div[style*="grid-template-columns: repeat(6, minmax(0, 1fr))"] img {
    height: auto !important; aspect-ratio: 4 / 3;
  }

  /* --- Team: 2 x 4 Raster --- */
  div[style*="grid-template-columns: repeat(3, minmax(0, 1fr))"]:has(> a[href*="team/"]) {
    grid-template-columns: 1fr 1fr !important; gap: 16px 12px !important;
  }
  a[href*="team/"] > h3 { font-size: 17px !important; line-height: 1.25 !important; }
  a[href*="team/"] > p, a[href*="team/"] > span {
    font-size: 11px !important; line-height: 1.35 !important; letter-spacing: 0.8px !important;
  }
  a[href*="team/"] { gap: 7px !important; }
  /* Nur Startseite: Hero-Bild oben sichtbar, Textkasten darunter, Buttons nebeneinander */
  section[style*="background: #2A2A2A"]:has(> img[style*="position: absolute"]) { display: block !important; }
  section[style*="background: #2A2A2A"]:has(> img[style*="position: absolute"]) > img {
    position: static !important; display: block !important; width: 100% !important;
    height: 220px !important; object-position: 50% 62% !important;
  }
  section[style*="background: #2A2A2A"]:has(> img[style*="position: absolute"]) div[style*="background: rgba(22,28,40"] {
    background: #273F53 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }
  section[style*="background: #2A2A2A"]:has(> img[style*="position: absolute"]) div:has(> a.btn-ghost + a.btn-ghost) {
    display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; padding-top: 4px !important;
  }
  section[style*="background: #2A2A2A"]:has(> img[style*="position: absolute"]) a.btn-ghost {
    min-height: 64px !important; padding: 0 10px !important; font-size: 15px !important;
    letter-spacing: 0.5px !important; line-height: 1.25 !important;
  }
  /* Privacy notice: Inhaltsverzeichnis nicht mitlaufen lassen, Text ohne eigenen Scrollbereich */
  div:has(> .toc) { position: static !important; max-width: 100% !important; }
  .tocbtn { font-size: 16px !important; padding: 12px 0 !important; }
  div[style*="height: 720px"][style*="overflow-y: auto"] { height: auto !important; overflow: visible !important; padding-right: 0 !important; }
  /* AIFM "What we take on": Boxen als Wischband mit Punkten */
  .swipe {
    display: flex !important; gap: 14px !important; overflow-x: auto;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; align-items: stretch !important;
  }
  .swipe::-webkit-scrollbar { display: none; }
  .swipe > div { flex: 0 0 84%; box-sizing: border-box; scroll-snap-align: start; }
  .swipe-dots { display: flex !important; justify-content: center; gap: 10px; }
  .swipe-dots button { width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: #DCD8CE; }
  /* Zitate: mobil als Wischband statt Rotator */
  div:has(> #q-img), #q-dots { display: none !important; }
  .swipe-dots button.on { background: #CCB666; }
  /* Stellen- und Dokumentzeilen: untereinander statt vierspaltig */
  a.job[style*="grid-template-columns"], a.doc[style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 6px !important; padding: 18px 16px !important; }
  a.job[style*="grid-template-columns"] > span, a.doc[style*="grid-template-columns"] > span { text-align: left !important; }
  /* Teamraster: mobil nur Name und Position, ohne Kurztext */
  div[style*="grid-template-columns: repeat(3, minmax(0, 1fr))"]:has(> a[href*="team/"]) > a > p + p { display: none !important; }
  /* News: "Read more" auch auf den uebrigen Karten */
  .more-m { display: block !important; }
  /* Nur AIFM Platform: Hero hell und ohne Bild wie im mobilen Entwurf, Bild unter "Important information" */
  section[style*="background: #1E232E"]:has(> img[style*="position: absolute"]) { background: #FFFFFF !important; color: #2A2A2A !important; display: block !important; padding: 0 !important; }
  section[style*="background: #1E232E"]:has(> img[style*="position: absolute"]) > img { display: none !important; }
  section[style*="background: #1E232E"]:has(> img[style*="position: absolute"]) > div[style*="background: rgba(22,28,40"] {
    background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    width: 100% !important; box-sizing: border-box !important; padding: 30px 20px 26px !important; gap: 14px !important;
  }
  section[style*="background: #1E232E"]:has(> img[style*="position: absolute"]) p[style*="letter-spacing: 3px"] { color: #8A7B3E !important; }
  section[style*="background: #1E232E"]:has(> img[style*="position: absolute"]) p[style*="color: #EFEDE7"] { color: #4A4A4A !important; }
  section[style*="background: #1E232E"]:has(> img[style*="position: absolute"]) a.btn-ghost { display: none !important; }
  img.m-only { display: block !important; }

  /* --- News: der oberste Beitrag wie die uebrigen Karten --- */
  a.card[style*="flex-wrap: wrap"] { flex-direction: column !important; }
  a.card[style*="flex-wrap: wrap"] > img {
    order: 1 !important; width: 100% !important; flex-basis: auto !important;
    height: auto !important; aspect-ratio: 16 / 9; border-bottom: 1px solid #E4DFCE;
  }
  a.card[style*="flex-wrap: wrap"] > div {
    order: 2 !important; flex-basis: auto !important; padding: 18px 16px 22px !important;
    justify-content: flex-start !important; gap: 10px !important;
  }

  /* --- Karten und Kacheln --- */
  div[style*="padding: 48px"], div[style*="padding: 44px"], div[style*="padding: 40px"],
  div[style*="padding: 36px"], div[style*="padding: 32px"] {
    padding: 18px 16px !important;
  }
  div[style*="padding: 26px 28px"] { padding: 14px 16px !important; }
  /* verlinkte Kacheln in "Strategies we manage" wie die unverlinkten */
  a.card[style*="background: #F4F0E4"][style*="padding: 26px 28px"] { padding: 14px 16px !important; }

  /* --- Formular --- */
  input, select, textarea { font-size: 16px !important; min-height: 48px !important; }
  textarea { min-height: 120px !important; }
  div[style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }

  /* --- Fußzeile --- */
  footer { padding: 24px 20px !important; }
  footer div[style*="flex"] { gap: 12px !important; }
}

/* News: "Read more" der uebrigen Karten nur mobil */
.more-m { display: none; }

/* Punkte des Wischbands und Zitat-Band nur mobil */
.swipe-dots { display: none; }
.q-swipe { display: none; }

/* Bilder nur fuer die mobile Fassung */
.m-only { display: none !important; }