/* Runde H3 (01.11.2026): zwei Boxen (Startseite und Landingpages beider Marken, w3/a/h3-boxen.mjs) und neuer Aufbau der Landingpages
   (w3/a/vorlagen.mjs landingW3, w3/a/h3-landing.mjs) nach dem freigegebenen Beispiel Bern. Wird nach dem Hauptstil geladen (Parameter css von
   seite()). Raster-Regeln wie überall: Radien 10, 14, 999; Schriftstärke 400, 500, 700; iPersonal Rot nur für den Hauptknopf. */

/* ---------- 1) Zwei Boxen ---------- */
/* Knöpfe zwei nebeneinander; bei einer ungeraden Zahl steht der erste (Hauptknopf) allein über die ganze Breite, so haben beide Boxen zwei Reihen */
.wege.wege--h3 .weg__knoepfe.weg__knoepfe--h3{grid-template-columns:repeat(2,minmax(0,1fr))}
.wege.wege--h3 .weg__knoepfe--n3>.knopf:first-child,.wege.wege--h3 .weg__knoepfe--n5>.knopf:first-child{grid-column:1 / -1}
/* Korrektur 1 der Runde H3 (Plan-Nachtrag 8): Pillen zur Marke MediPersonal auf der Webseite iPersonal in den Farben von MediPersonal (Grün und
   Blau der Marke), in beiden Boxen; dunkle Schrift auf hellem Grün, Kontrast über 10:1, auch im dunklen Farbschema lesbar */
.wege--h3 .knopf.knopf--zu-medi{background:#EAF6EF;border:1px solid var(--med-gruen);color:#0B3B57}
.wege--h3 .knopf.knopf--zu-medi .sym{color:var(--med-blau)}
.wege--h3 .knopf.knopf--zu-medi:hover{background:#DDF1E5;border-color:var(--med-blau);color:#0B3B57}
@media (max-width:700px){
  .wege--h3{gap:12px}
  .wege--h3 .weg{padding:18px 16px}
  .wege--h3 .weg__titel{font-size:var(--h2);line-height:var(--h2-z);margin:0;--zeile:var(--h2-z)}
  .wege--h3 .weg__titel .sym{width:22px;height:22px}
  .wege--h3 .weg__text{margin:4px 0 12px;font-size:var(--klein);line-height:var(--klein-z);--zeile:var(--klein-z)}
  /* am Handy ruhige Pillen statt vier Knöpfen untereinander; der erste Knopf über die ganze Breite */
  .wege.wege--h3 .weg__knoepfe.weg__knoepfe--h3{display:flex!important;flex-wrap:wrap;gap:8px}
  .wege--h3 .weg__knoepfe--h3>.knopf{flex:1 1 auto;width:auto;min-height:44px;padding:4px 14px;font-size:var(--knopf-klein);line-height:var(--knopf-klein-z);white-space:nowrap;--zeile:var(--knopf-klein-z)}
  .wege--h3 .weg__knoepfe--h3>.knopf .sym{display:none}
  .wege--h3 .weg__knoepfe--h3>.knopf:first-child{flex-basis:100%;min-height:48px;font-size:var(--knopf);line-height:var(--knopf-z);--zeile:var(--knopf-z)}
  .wege--h3 .weg__knoepfe--h3>.knopf:first-child .sym{display:inline-block}
}

/* ---------- 1b) Drei Wege in der Box Jobsuchende (Nacht 02.11.2026, Plan-Nachtrag 7: «drei gleichwertige Wege mit oder») ----------
   Am Computer drei gleich grosse Felder nebeneinander mit «oder» dazwischen, mit der Zusatz-Pille in der Zeile der Knöpfe (Raster aus l2.css:
   Zeile 3 wie die Knöpfe der Box Institutionen, Hülle .weg__wege3); bis 960 px (Tablet mit zwei Boxen nebeneinander, Handy) drei gleich hohe Zeilen
   untereinander, «oder» klein dazwischen. Kein Feld ist hervorgehoben. MediPersonal in Blau der Marke, iPersonal ruhig in Tinte (Rot nur für den
   Hauptknopf). Darunter die Zusatz-Pille (Notfallpool bzw. Zur Medizinbranche) über die ganze Breite. */
.wege3{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);align-items:stretch;gap:0 10px}
.wege3--n2{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
.wege3__knopf{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:104px;padding:14px 10px;border:1px solid var(--akzent);border-radius:14px;background:var(--akzent-zart);color:var(--tinte);text-align:center;text-decoration:none}
.wege3__knopf:hover{background:#fff}
.wege3__knopf:focus-visible{outline:3px solid var(--akzent);outline-offset:2px}
.wege3__knopf>.sym{flex:none;color:var(--akzent)}
.wege3__text{display:flex;flex-direction:column;min-width:0}
.wege3__text strong{font-size:var(--knopf);line-height:var(--knopf-z);font-weight:700;hyphens:manual;overflow-wrap:break-word;--zeile:var(--knopf-z)}
.wege3__text small{display:none}
.wege3__oder{align-self:center;font-size:var(--klein);line-height:var(--klein-z);color:var(--text2);--zeile:var(--klein-z)}
.marke-ipersonal .wege3__knopf{border-color:var(--linie2);background:var(--grau2)}
.marke-ipersonal .wege3__knopf>.sym{color:var(--tinte)}
.marke-ipersonal .wege3__knopf:hover{border-color:var(--tinte);background:#fff}
.marke-ipersonal .wege3__knopf:focus-visible{outline-color:var(--tinte)}
.wege--h3 .weg__knoepfe--zusatz{margin-top:12px}
.wege.wege--h3 .weg__knoepfe--zusatz.weg__knoepfe--n1>.knopf{grid-column:1 / -1}
@media (min-width:961px){
  .wege.wege--h3>.weg>.weg__wege3{grid-row:3;align-self:start}
}
@media (min-width:961px) and (max-width:1180px){
  .wege3{gap:0 6px}
  .wege3__knopf{padding:12px 6px}
  .wege3__text strong{font-size:var(--knopf-klein);line-height:var(--knopf-klein-z);--zeile:var(--knopf-klein-z)}
}
/* bis 960 px: drei Zeilen untereinander, je 48 px (Handy 44 px), Symbol links; «oder» als kleines Schild mittig auf dem Abstand zwischen zwei
   Zeilen (nimmt keine Höhe ein: so bleibt die erste Stellenkarte der Landingpages am Handy in der zweiten Bildschirmhöhe, K04). Grösse und
   Zeilenhöhe als Stufen-Variablen, damit der Bau sie mit der einheitlichen Schrift nicht verändert */
@media (max-width:960px){
  .wege3,.wege3--n2{grid-template-columns:minmax(0,1fr);gap:4px 0}
  .wege3__knopf{flex-direction:row;justify-content:flex-start;gap:12px;min-height:48px;padding:6px 16px;border-radius:999px;text-align:left}
  .wege3__knopf>.sym{width:20px;height:20px}
  .wege3__text strong{font-size:var(--knopf);line-height:var(--knopf-z);--zeile:var(--knopf-z)}
  .wege3__oder{position:relative;z-index:1;justify-self:center;height:var(--klein-z,20px);margin:calc(var(--klein-z,20px) / -2) 0;padding:0 10px;border-radius:999px;background:#fff;font-size:var(--klein);line-height:var(--klein-z);--zeile:var(--klein-z)}
  .wege--h3 .weg__knoepfe--zusatz{margin-top:6px}
  .wege.wege--h3 .weg__knoepfe--zusatz>.knopf:first-child{min-height:44px;font-size:var(--knopf-klein);line-height:var(--knopf-klein-z);--zeile:var(--knopf-klein-z)}
}
@media (max-width:700px){
  .wege3__knopf{min-height:44px;padding:4px 14px}
}

/* ---------- 2) Bühne der Landingpages: kurzer Kopf, darunter die Boxen und die Belege ---------- */
/* drei Klassen wie die Regeln von G5 (sonst gälten deren 24 vw Höhe und 24 px unten); unten Platz für die Boxen, die 64 px hineinragen */
.buehne--voll.buehne--landing.lp3-buehne .buehne__kopf{min-height:clamp(300px,22vw,400px)}
.buehne--voll.buehne--landing.lp3-buehne .buehne__inhalt{padding-top:28px;padding-bottom:96px}
:is(.marke-medipersonal,.marke-ipersonal) .buehne--voll.buehne--landing.lp3-buehne .buehne__oben{grid-template-areas:"h1 h1" "lead ." "stich ."}
.lp3-buehne .buehne__text h1{margin-bottom:12px}
.lp3-buehne .buehne__text .lp3-einleitung{grid-area:lead;max-width:600px;margin:0}
/* Stichworte als ruhige Zeile; Umbruch nur zwischen zwei Stichworten, der Punkt bleibt am Ende der Zeile */
.lp3-stichworte{grid-area:stich;max-width:640px;margin:12px 0 0;padding:0;list-style:none;font-size:var(--klein);line-height:var(--klein-z);color:var(--text2);--zeile:var(--klein-z)}
.lp3-stichworte li{display:inline;white-space:nowrap}
.lp3-stichworte li:not(:last-child)::after{content:"\a0\a0·";margin-right:2px;color:var(--text3)}
.lp3-buehne .buehne__wege{margin-top:-64px}
.lp3-buehne .vl-rahmen,.lp3-buehne .sponsoren-rahmen{margin-top:24px}
@media (min-width:961px){
  .lp3-buehne .weg{padding:24px 28px}
}
@media (min-width:1500px){
  .lp3-buehne .buehne__text .lp3-einleitung{max-width:720px}
  .lp3-stichworte{max-width:720px}
}
@media (max-width:960px){
  .buehne--voll.buehne--landing.lp3-buehne .buehne__inhalt{padding-bottom:0}
  .lp3-buehne .buehne__text .lp3-einleitung{margin:0 var(--rand)}
  .lp3-buehne .buehne__wege{margin-top:20px}
  .lp3-buehne .lp3-stichworte{order:3;margin:10px var(--rand) 0}
}
/* Korrektur 2 der Runde H3 (Tablet, 701 bis 960 px): das Kopfbild war 2/3 der Breite hoch (768 px: 512 px), die Boxen begannen erst bei 832 bis
   991 px. Kopfbild der Landingpages und der Startseiten auf 288 px (ganzzahlig, wie die Regel in l2.css), damit die Titel beider Boxen im
   ersten Bildschirm stehen; das Bild 2 px höher als die Hülle wie in l2.css; dazu die Boxen nebeneinander */
@media (min-width:701px) and (max-width:960px){
  .buehne--voll.buehne--landing.lp3-buehne .buehne__foto,.buehne--voll.buehne--start .buehne__foto{height:288px!important}
  .buehne--voll.buehne--landing.lp3-buehne .buehne__foto img,.buehne--voll.buehne--start .buehne__foto img{height:calc(100% + 2px)!important;aspect-ratio:auto!important;object-fit:cover}
  .buehne--voll.buehne--landing.lp3-buehne .buehne__foto img{object-position:60% 0!important}
  /* die zwei Boxen nebeneinander (bis 960 px sonst untereinander, die zweite begann erst bei rund 1'100 px) mit den ruhigen Pillen wie am
     Handy: erster Knopf über die ganze Breite, die übrigen umbrechend */
  .wege.wege--h3{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .wege--h3 .weg{padding:20px 18px}
  .wege--h3 .weg__titel{font-size:var(--h3);line-height:var(--h3-z);--zeile:var(--h3-z)}
  .wege--h3 .weg__titel .sym{width:22px;height:22px}
  .wege.wege--h3 .weg__knoepfe.weg__knoepfe--h3{display:flex!important;flex-wrap:wrap;gap:8px}
  .wege--h3 .weg__knoepfe--h3>.knopf{flex:1 1 auto;width:auto;min-height:44px;padding:4px 14px;font-size:var(--knopf-klein);line-height:var(--knopf-klein-z);white-space:nowrap;--zeile:var(--knopf-klein-z)}
  .wege--h3 .weg__knoepfe--h3>.knopf:first-child{flex-basis:100%;min-height:48px;font-size:var(--knopf);line-height:var(--knopf-z);--zeile:var(--knopf-z)}
}
@media (max-width:700px){
  .buehne--voll.buehne--landing.lp3-buehne .buehne__inhalt{padding-top:16px}
  /* Foto flacher (ein Drittel der Breite) und knappe Abstände: so steht am Handy auch der Titel der zweiten Box im ersten Bild */
  .lp3-buehne .buehne__foto{height:calc(100vw / 3)!important}
  .lp3-buehne .buehne__text h1{margin-bottom:8px}
  .lp3-buehne .lp3-stichworte{margin-top:8px}
  .lp3-buehne .buehne__wege{margin-top:16px}
  .lp3-buehne .buehne__foto img{height:100%!important;aspect-ratio:auto!important;object-fit:cover;object-position:60% 0!important}
  .lp3-stichworte{font-size:var(--klein);line-height:var(--klein-z);--zeile:var(--klein-z)}
  /* Hinweiszeilen der Boxen am Handy aus (Rückmeldung zum Beispiel, Frage 4): so steht die zweite Box noch im ersten Bild */
  .lp3-buehne .weg__hinweis{display:none}
  /* Satz der Boxen am Handy aus (gleich auf allen Seiten, die Einleitung darüber sagt dasselbe): so bleibt auch mit «Profil erstellen»
     (Update 97) der Titel der zweiten Box im ersten Bild und die erste Stellenkarte in der zweiten Bildschirmhöhe */
  .lp3-buehne .weg__text{display:none}
  .lp3-buehne .weg__titel{margin-bottom:12px}
  .lp3-buehne .profil-knopf{margin-top:10px;padding:10px 14px}
  .lp3-buehne .vl-rahmen,.lp3-buehne .sponsoren-rahmen{margin-top:16px}
  /* Belege am Handy als ruhige Liste statt hoher Kacheln */
  .lp3-buehne .vl-liste{grid-template-columns:1fr;gap:8px}
  .lp3-buehne .vl,.lp3-buehne .vl--seco,.lp3-buehne .vl--tel{grid-column:auto}
  .lp3-buehne .vl__flaeche{flex-direction:row;align-items:center;gap:14px;padding:10px 14px;text-align:left}
  .lp3-buehne .vl__oben{flex:none;width:64px;height:auto}
  .lp3-buehne .vl__siegel{height:44px}
  .lp3-buehne .vl__logo{width:64px}
  .lp3-buehne .vl__rund{width:40px;height:40px}
  .lp3-buehne .vl__text{align-items:flex-start;gap:2px}
  .lp3-buehne .vl__note{justify-content:flex-start}
  .lp3-buehne .vl__titel{font-size:var(--klein);line-height:var(--klein-z);--zeile:var(--klein-z)}
  .lp3-buehne .vl__zeile{font-size:var(--klein);line-height:var(--klein-z);--zeile:var(--klein-z)}
  .lp3-buehne .vl__satz{font-size:var(--klein);line-height:var(--klein-z);--zeile:var(--klein-z)}
  .lp3-buehne .vl__nummer{font-size:var(--h3);line-height:var(--h3-z);--zeile:var(--h3-z)} /* Nacht 01.11.: wie auf der Startseite (Titel 3) */
  .lp3-buehne .sponsoren{grid-template-columns:1fr;grid-auto-rows:auto;gap:8px}
  .lp3-buehne .sponsor__flaeche{flex-direction:row;align-items:center;gap:14px;padding:10px 14px}
  .lp3-buehne .sponsor__links{flex:none;width:64px}
  .lp3-buehne .sponsor__logo--pe{width:auto;height:44px}
  .lp3-buehne .sponsor__logo--ss{width:64px;height:auto}
}

/* ---------- 3) Stellen der Region: drei Spalten, am Handy drei Karten und «Weitere Stellen anzeigen» ---------- */
.lp3-stellen{padding-top:56px}
.lp3-raster{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (min-width:701px) and (max-width:1180px){ .lp3-raster{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} }
.lp3-stellen-schluss{margin-top:28px;text-align:center}
@media (max-width:700px){
  .lp3-stellen{padding-top:32px}
  .lp3-raster{grid-template-columns:minmax(0,1fr);gap:12px}
  .lp3-stellen-auf .lp3-raster .stelle-karte:nth-child(n+4){display:none}
  /* nach «Weitere Stellen anzeigen» behalten die Karten ihren eigenen Aufbau (J2 flex, frühere Karten grid) */
  .lp3-stellen-auf .stellen-auf__schalter:checked~.lp3-raster .stelle-karte--j2:nth-child(n){display:flex}
  .lp3-stellen-auf .stellen-auf__schalter:checked~.lp3-raster .stelle-karte:not(.stelle-karte--j2):nth-child(n){display:grid}
  .lp3-stellen-schluss{margin-top:16px}
  .lp3-stellen-schluss .knopf{width:100%}
}

/* ---------- 4) Inhalt: Kennzahlen, Textabschnitte luftig, Aufklappen ---------- */
.lp3-inhalt{padding-top:16px;padding-bottom:16px}
.lp3-inhalt>.breite>*{max-width:none}
.lp3-zahlen{padding:40px 0 48px}
.lp3-zahlen h2{margin:0 0 12px}
.lp3-einstieg,.lp3-zahlen__lead{max-width:820px;margin:0 0 8px;color:var(--text2)}
/* Kennzahlen über die ganze Breite wie im freigegebenen Beispiel (sonst 820 px aus l2.css, fünf Kacheln zu 145 px mit Trennstrichen) */
.lp3-inhalt .lp3-zahlen .kacheln{max-width:none;margin-top:20px}
@media (min-width:961px){ .lp3-zahlen .kacheln--n5{grid-template-columns:repeat(5,minmax(0,1fr))} }
.lp3-block{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center;padding:56px 0;border-top:1px solid var(--linie)}
.lp3-block--ohne-bild{grid-template-columns:minmax(0,1fr)}
.lp3-block--umgekehrt .lp3-block__bild{order:-1}
.lp3-block__text{max-width:680px}
.lp3-block--ohne-bild>.lp3-block__text{max-width:820px}
.lp3-block__text.textblock{display:block}
.lp3-block__text h2{margin:0 0 16px}
.lp3-block__text p{margin:0 0 12px}
.lp3-block__text>h3,.lp3-block__unter>h3{margin:24px 0 8px;font-size:var(--h3);line-height:var(--h3-z);--zeile:var(--h3-z)}
.lp3-block__unter{margin-top:20px}
.lp3-block__bild{margin:0}
.lp3-block__bild img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:14px}
/* Zusammenführen Runde H3 (K12 ab 1920 px: Bild bis 1'160 px nötig, sizes 720 px): auf grossen Bildschirmen höchstens 600 px breit wie im Rahmen
   von G5 (Fläche 4:3 aus Fotos 16:10, Faktor 1,2 = 720 px wie GROESSEN.textbildLp), am Text ausgerichtet */
@media (min-width:1281px){
  .lp3-block__bild{width:100%;max-width:600px;justify-self:start}
  .lp3-block--umgekehrt .lp3-block__bild{justify-self:end}
}
.lp3-liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 32px;margin:8px 0 12px;padding:0;list-style:none}
.lp3-block:not(.lp3-block--ohne-bild) .lp3-liste{grid-template-columns:minmax(0,1fr)}
.lp3-liste li{display:flex;gap:10px;align-items:flex-start;padding:5px 0;line-height:var(--zeile,24px)}
.lp3-liste .sym{flex:none;margin-top:2px}
.marke-medipersonal .lp3-liste .sym{color:var(--med-gruen)}
.marke-ipersonal .lp3-liste .sym{color:var(--tinte)}
.lp3-klapp{margin-top:10px;border:1px solid var(--linie);border-radius:14px;background:var(--grau2)}
.lp3-klapp>summary{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:52px;padding:12px 18px;cursor:pointer;list-style:none}
.lp3-klapp>summary::-webkit-details-marker,.lp3-block--klapp>summary::-webkit-details-marker{display:none}
.lp3-klapp>summary::marker,.lp3-block--klapp>summary::marker{content:""}
.lp3-klapp>summary h3{margin:0;font-size:var(--fliess);line-height:var(--fliess-z);font-weight:500;--zeile:var(--fliess-z)}
.lp3-klapp__pfeil{flex:none;color:var(--text2);transition:transform .15s}
.lp3-klapp[open]>summary .lp3-klapp__pfeil,.lp3-block--klapp[open]>summary .lp3-klapp__pfeil{transform:rotate(180deg)}
.lp3-klapp__inhalt{padding:0 18px 6px}
.lp3-block--klapp{display:block;padding:0}
.lp3-block--klapp>summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:72px;padding:20px 0;cursor:pointer;list-style:none}
.lp3-block--klapp>summary h2{margin:0}
.lp3-block--klapp>.lp3-block__text{max-width:820px;padding:0 0 32px}
.lp3-block--klapp+.lp3-block--klapp{border-top:1px solid var(--linie)}
.lp3-gesetze{border-bottom:1px solid var(--linie)}
@media (prefers-reduced-motion:reduce){ .lp3-klapp__pfeil{transition:none} }
@media (max-width:960px){
  .lp3-block{grid-template-columns:minmax(0,1fr);gap:20px;padding:40px 0}
  .lp3-block__bild,.lp3-block--umgekehrt .lp3-block__bild{order:-1}
  .lp3-block__text,.lp3-block--ohne-bild>.lp3-block__text{max-width:none}
  .lp3-block__bild img{aspect-ratio:16/9}
}
@media (max-width:700px){
  .lp3-zahlen{padding:28px 0 32px}
  .lp3-block{padding:32px 0;gap:16px}
  .lp3-liste{grid-template-columns:minmax(0,1fr)}
  .lp3-klapp>summary{padding:12px 14px}
  .lp3-klapp__inhalt{padding:0 14px 4px}
  .lp3-block--klapp>summary{min-height:60px;padding:16px 0}
}

/* ---------- 5) Box «Ihr persönlicher Bereich» bzw. Kunden-Bereich, Erklärvideo (iPersonal) ---------- */
.lp3-bereich .bereich-box{margin-top:0}
.lp3-video{margin-top:32px}

/* Zusammenführen Runde H3 (K04 neu bei 360 px, /freie-jobs-fuer-winterthur/ 7 px über der zweiten Bildschirmhöhe mit «Profil erstellen»):
   auf sehr schmalen Handys etwas knappere Abstände zwischen Belegen und Stellen; ab 381 px unverändert; am Schluss der Datei, damit die Regeln nach den Regeln bis 700 px gelten */
@media (max-width:380px){
  .lp3-buehne .vl-rahmen,.lp3-buehne .sponsoren-rahmen{margin-top:12px}
  .lp3-buehne .vl-liste,.lp3-buehne .sponsoren{gap:6px}
  .lp3-stellen{padding-top:20px}
  /* Korrektur 1 der Runde H3 (K04 bei 360 px, /freie-jobs-fuer-winterthur/ erste Stellenkarte 10 px zu tief): der Satz unter der H1 je
     Suchwort (R7) braucht bei kurzen Ortsnamen eine Zeile mehr als «Temporär- und Dauerstellen für …»; die Belege werden dafür knapper
     (je 6 statt 10 px oben und unten, fünf Belege: 40 px), ab 381 px unverändert */
  .lp3-buehne .vl__flaeche,.lp3-buehne .sponsor__flaeche{padding-top:6px;padding-bottom:6px}
}