/* Local Life V4: Groessen nach Bildschirmhoehe.
   Ziel: Jeder Abschnitt passt auf gaengigen Bildschirmen (1366 x 768, 1440 x 900, 1536 x 864, 1920 x 1080) in eine Ansicht,
   ohne dass oben oder unten Wichtiges abgeschnitten ist. Schriften, Abstaende und Bildhoehen richten sich deshalb
   nach der kleineren Groesse aus Breite und Hoehe (min(vw, vh)). Gilt nur am Desktop, das Handy scrollt ohnehin. */
@media (min-width: 901px) {
  :root { --fit-pad: clamp(52px, 8.5vh, 124px); --fit-kopf: clamp(20px, 3.6vh, 46px); }

  /* Abstaende der Abschnitte */
  section.block, body.u13 section.block, body.start section.block { padding-top: var(--fit-pad); padding-bottom: var(--fit-pad); }
  section.block .kopfzeile, body.u13 section.block .kopfzeile { margin-bottom: var(--fit-kopf); }
  section.block .kopfzeile .stichwort { margin-bottom: clamp(8px, 1.4vh, 14px); }
  section.block .kopfzeile p { margin-top: clamp(8px, 1.4vh, 14px); }

  /* Ueberschriften */
  body.start section.block .kopfzeile h2 { font-size: clamp(34px, min(5.8vw, 7.4vh), 84px); }
  body.u13 section.block .kopfzeile h2, section.block .kopfzeile h2 { font-size: clamp(32px, min(5vw, 6.6vh), 72px); }
  .v4-dunkel h2, .v4-hell h2 { font-size: clamp(30px, min(4.6vw, 6.2vh), 64px); }
  #service .kopf h2 { font-size: clamp(30px, min(4.2vw, 5.8vh), 60px); }
  .kopf13 h1 { font-size: clamp(40px, min(5.4vw, 8vh), 84px); }

  /* Seitenkopf der Unterseiten: Bild nie hoeher als der Bildschirm */
  body.u13 .kopf13 { min-height: 0; padding-top: calc(var(--nav-h, 96px) + clamp(16px, 4vh, 56px)); padding-bottom: clamp(36px, 7vh, 96px); }
  body.u13 .kopf13 .bild > img { max-height: calc(100vh - var(--nav-h, 96px) - 120px); }
  body.u13 .kopf13 .lead { margin-top: clamp(10px, 2vh, 22px); }
  body.u13 .kopf13 .fakten { margin-top: clamp(14px, 3vh, 32px); padding-top: clamp(12px, 2.4vh, 26px); }
  body.u13 .kopf13 .aktionen { margin-top: clamp(14px, 3vh, 32px); }

  /* Rondelle (Geraete und Sortiment auf der Startseite) */
  .rondell-buehne { height: clamp(300px, min(46vw, 52vh), 600px); }
  .rondell-automaten .rondell-buehne { height: clamp(320px, min(52vw, 50vh), 700px); }
  .rondell-sortiment .rondell-buehne { height: clamp(220px, min(34vw, 36vh), 470px); }
  .rondell-wort { font-size: clamp(80px, min(18vw, 24vh), 280px); }
  .rondell-sortiment .rondell-wort { font-size: clamp(70px, min(15vw, 20vh), 230px); }
  .rondell-karte { margin-top: clamp(10px, 2vh, 32px); padding: clamp(18px, 2.8vh, 32px) 36px; }
  .rondell-leiste { gap: clamp(6px, 1.2vh, 14px); }

  /* Karten mit Bild (Einsatzorte auf der Startseite, Weiterlesen-Kacheln) */
  .karten.drei .karte .bild { aspect-ratio: auto; height: clamp(150px, 26vh, 300px); }
  .karten.drei .karte .text { padding-top: clamp(14px, 2.2vh, 24px); padding-bottom: clamp(16px, 2.6vh, 28px); }

  /* Standortcheck-Formular */
  .anfrage-raster form.formular { gap: clamp(8px, 1.2vh, 14px); padding: clamp(18px, 3vh, 34px); }
  .anfrage-raster .formular input[type="text"], .anfrage-raster .formular input[type="email"], .anfrage-raster .formular input[type="tel"] { padding-top: clamp(9px, 1.4vh, 15px); padding-bottom: clamp(9px, 1.4vh, 15px); }
  .anfrage-raster .formular textarea { min-height: clamp(64px, 10vh, 120px); height: clamp(64px, 10vh, 120px); }
  #anfrage h2 { font-size: clamp(30px, min(4.4vw, 6vh), 60px); }
  #anfrage .person { margin-top: clamp(14px, 2.6vh, 30px); }

  /* Einsatzorte: Standortwaehler in einer Ansicht */
  .ez-kacheln button { padding: clamp(12px, 1.8vh, 24px) clamp(16px, 1.6vw, 24px); }
  .ez-kacheln svg { width: clamp(26px, 3.6vh, 38px); height: clamp(26px, 3.6vh, 38px); margin-bottom: clamp(4px, 1vh, 12px); }
  .ez-tafel { padding: clamp(14px, 2.2vh, 30px); }
  .ez-foto { aspect-ratio: auto; height: clamp(180px, 30vh, 340px); }
  .ez-text h3 { font-size: clamp(22px, min(2.6vw, 3.6vh), 38px); margin-top: clamp(6px, 1vh, 12px); }
  .ez-grund { margin-top: clamp(8px, 1.2vh, 14px); }
  .ez-fakten { margin-top: clamp(10px, 1.6vh, 18px); }
  .ez-fakten li { padding-top: clamp(6px, 1vh, 10px); padding-bottom: clamp(6px, 1vh, 10px); }
  .ez-knoepfe { margin-top: clamp(12px, 2vh, 22px); }
  .mx { margin-top: clamp(14px, 2.2vh, 36px); padding-top: clamp(14px, 2.2vh, 32px); }
  .mx-groesse { margin-bottom: clamp(12px, 2vh, 28px); }
  .mx-bild { aspect-ratio: auto; height: clamp(120px, 21vh, 280px); padding-top: clamp(8px, 1.4vh, 18px); }
  .mx-tag { margin-top: clamp(8px, 1.4vh, 16px); }
  .mx-text { margin-bottom: clamp(12px, 2vh, 22px); }
  .eo-punkt { padding: clamp(16px, 2.6vh, 40px) 0; }
  .eo-zeile { padding: clamp(10px, 1.7vh, 18px) 0; }

  /* Full-Service: der festgehaltene Abschnitt muss ganz in den Bildschirm passen */
  #service .pin { padding: calc(var(--nav-h, 96px) + clamp(0px, 1vh, 16px)) 0 clamp(18px, 3vh, 48px); }
  #service .kopf { margin-bottom: clamp(16px, 3vh, 44px); }
  #service .kopf .leitsatz { margin-top: clamp(8px, 1.4vh, 22px); font-size: clamp(16px, min(1.5vw, 2.3vh), 21px); }
  .stein { padding: clamp(18px, min(3vw, 4vh), 44px); }
  .stein h3 { font-size: clamp(21px, min(2.3vw, 3.4vh), 31px); margin-bottom: clamp(6px, 1.2vh, 12px); }
  .stein p { font-size: clamp(14.5px, 1.9vh, 16px); }
  .nichtmehr { margin-top: clamp(18px, 4vh, 72px); padding-top: clamp(14px, 2.6vh, 40px); }
  .nichtmehr li { padding: clamp(8px, 1.4vh, 14px) 16px; }
  .nichtmehr h3 { font-size: clamp(22px, min(2.8vw, 4vh), 38px); }

  /* Weiterlesen-Kacheln */
  #einstiege { padding-top: var(--fit-pad); padding-bottom: var(--fit-pad); }
  #einstiege .kopf { margin-bottom: var(--fit-kopf); }
  .wk { min-height: clamp(330px, min(42vw, 58vh), 520px); }

  /* Einsatzorte: Tafel zweispaltig, links Foto und Text, rechts Groesse und Automatenmix */
  .ez-tafel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(20px, 2.6vw, 40px); align-items: start; }
  .ez-tafel[hidden] { display: none; }
  .ez-tafel .ez-oben { grid-template-columns: minmax(0, 1fr); gap: clamp(12px, 2vh, 22px); }
  .ez-tafel .ez-foto { height: clamp(150px, 24vh, 300px); }
  .ez-tafel .mx { margin: 0; padding: 0 0 0 clamp(20px, 2.6vw, 40px); border-top: 0; border-left: 1px solid var(--line); }
  .ez-tafel .mx-reihe { grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.4vh, 16px); }
  .ez-tafel .mx-bild { height: clamp(90px, 14vh, 200px); }
  .ez-tafel .mx-geraet b { font-size: clamp(17px, min(1.5vw, 2.4vh), 22px); margin-top: 6px; }
  .ez-tafel .mx-text { font-size: 13.5px; margin-top: 4px; }
  .ez-tafel .mx-geraet::before { display: none; }
  .ez-tafel .mx-groesse { gap: 8px 14px; }

  @media (max-height: 940px) {
    .ez-kacheln button { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 12px; padding-top: 12px; padding-bottom: 12px; }
    .ez-kacheln svg { margin: 0; }
    .ez-kacheln span { flex-basis: 100%; padding-left: calc(clamp(26px, 3.6vh, 38px) + 12px); margin-top: -2px; }
  }
  .ez-tafel .ez-foto { height: clamp(140px, 20vh, 280px); }
  .ez-tafel .mx-bild { height: clamp(80px, 11vh, 190px); }
  .ez-tafel .mx-schalter button { font-size: 13.5px; padding: 8px 14px; }
  .ez-tafel .mx-hinweis { flex-basis: 100%; font-size: 13px; margin-top: -2px; }
  .ez-tafel .mx-tag { margin-top: 10px; }
  .ez-tafel .mx-text { margin-bottom: 14px; }

  /* Automatenseite: weitere Geraete */

  /* Rondell: Buehne und Karte flacher, wenn der Bildschirm niedrig ist */
  .rondell-automaten .rondell-buehne { height: clamp(260px, min(52vw, 42vh), 700px); }
  .rondell-sortiment .rondell-buehne { height: clamp(200px, min(34vw, 32vh), 470px); }
  .rondell-karte { gap: clamp(16px, 2.4vh, 30px); }
  .rk-name { font-size: clamp(24px, min(2.8vw, 4.2vh), 44px); margin: clamp(4px, .8vh, 8px) 0 clamp(4px, .8vh, 10px); }
  .rk-text { font-size: clamp(14px, 1.9vh, 15.5px); }
  .rondell-block .kopfzeile p { max-width: 62ch; margin-inline: auto; }

  /* Automatenseite: technische Daten */
  #daten .wrap.block { padding-top: var(--fit-pad) !important; padding-bottom: var(--fit-pad) !important; }
  #daten h2 { font-size: clamp(30px, min(4.6vw, 6.2vh), 64px); }

  /* Sortiment: Marken-Rondell */
  .rondell-marke .rondell-buehne { height: clamp(260px, min(38vw, 42vh), 520px); }
  .daten-raster, .daten-liste, .layouts { margin-top: clamp(16px, 3vh, 48px); }
  .datum { padding: clamp(12px, 2vh, 22px) 24px clamp(12px, 1.8vh, 20px); }
  .datum b { font-size: clamp(26px, min(3vw, 4.4vh), 44px); }
  .daten-liste div { padding: clamp(7px, 1.2vh, 12px) 0; }

  /* Full-Service: Summe flacher auf niedrigen Bildschirmen, damit der festgehaltene Abschnitt in den Bildschirm passt */
  .summe { padding: clamp(18px, 3.4vh, 56px) clamp(28px, 5vw, 80px); }
  .summe b { font-size: clamp(30px, min(4.6vw, 6.4vh), 64px); }
  .summe p { margin-top: clamp(8px, 1.4vh, 14px); }
  .summe .kat { margin-bottom: clamp(4px, 1vh, 10px); }
}