/* Stil der Zimmer-Magazinseite, eingefasst in .zpm (26.09.2026). Erzeugt von zimmer-stil-einfassen.py -- NICHT von Hand aendern, die Quellen liegen in zimmer-preise/stil/. */ /* ===== heft.css ===== */ /* Zimmer und Preise, Heft-Fassungen A/B/C (21.09.2026). Ueberarbeitet nach Michaels Rueckmeldung: - Schrift: nur zwei Stimmen (Cormorant fuer Namen und Zahlen, Abhaya fuer Text), Inter nur als winziges Etikett in EINER Groesse. Vorher waren es fuenf Stimmen (Titel, Riesenzahl, Inter-Versalien, Abhaya, DM Mono) auf drei Groessenachsen: Wirrwarr. - Kennzahlen als geordnetes Paar (Etikett darueber, Wert darunter), Zahlen in Versalienziffern. - Keine Haarlinie unter jedem Listenpunkt (das las sich wie eine Zeitung). - Knopf: nie mehr der breite dunkle Balken; pro Fassung eine eigene, kleine Form. - Bilder in strengen Modulen auf dem 12/8/4-Spaltenraster. */.zpm{--grund:#F3EEE7;--tinte:#3D3733;--grau:#6E6862;--text:#5C554F;--linie:#DDD5C9;--tafel:#4A453F; --sp:12;--gasse:24px;--rand:40px;--seite:160px;--bh:clamp(260px,28vw,420px);--kurve:cubic-bezier(.23,1,.32,1);--breite:1435px} @media (max-width:1199px){.zpm{--sp:8;--gasse:20px;--rand:32px;--seite:120px;--bh:clamp(240px,36vw,400px)}} @media (max-width:809px){.zpm{--sp:4;--gasse:16px;--rand:20px;--seite:88px;--bh:clamp(220px,64vw,340px)}}.zpm *, .zpm *::before, .zpm *::after{box-sizing:border-box}.zpm{-webkit-text-size-adjust:100%;scroll-behavior:smooth}.zpm{margin:0;background:var(--grund);color:var(--tinte);font:17px/28px "Abhaya Libre",'Abhaya Ersatz',Georgia,serif;-webkit-font-smoothing:antialiased}.zpm img{display:block;width:100%;height:auto;object-fit:cover;background:#E6DFD4}.zpm a{color:inherit}.zpm h1, .zpm h2, .zpm h3, .zpm p, .zpm ul, .zpm figure, .zpm dl, .zpm dd{margin:0;padding:0}.zpm ::selection{background:var(--tinte);color:var(--grund)}.zpm a:focus-visible{outline:2px solid var(--tinte);outline-offset:4px}.zpm main, .zpm .kopf{max-width:var(--breite);margin:0 auto;padding-left:var(--rand);padding-right:var(--rand)}.zpm h1, .zpm h2, .zpm .satz, .zpm dd.zahl, .zpm .fakt dd{font-family:"Cormorant Garamond",'Cormorant Ersatz',Georgia,serif;font-weight:300;font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}.zpm .etikett, .zpm .fakt dt, .zpm .aus h3, .zpm .aus>span, .zpm .kat dt, .zpm .folio, .zpm .laufkopf, .zpm .f figcaption{font:400 11px/16px Inter,system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--grau)}.zpm .schalter{position:fixed;left:8px;top:8px;z-index:99;display:flex;background:#3D3733}.zpm .schalter a{font:500 12px/1 "DM Mono",ui-monospace,monospace;letter-spacing:.14em;color:#F6F2EA;text-decoration:none;padding:12px 16px}.zpm .schalter a[aria-current]{background:#F1ECE3;color:#35302B}.zpm .kopf{display:flex;justify-content:space-between;align-items:baseline;padding-top:32px;padding-bottom:28px}.zpm .wortmarke{font:300 22px/1 Oswald,Impact,sans-serif;letter-spacing:.42em;text-decoration:none}.zpm .auftakt{display:grid;grid-template-columns:repeat(var(--sp),minmax(0,1fr));column-gap:var(--gasse);padding-top:clamp(56px,9vw,140px)}.zpm .auftakt h1{grid-column:1/-1;font-size:clamp(34px,5.4vw,84px);line-height:.98;letter-spacing:-.02em}.zpm .einl{grid-column:8/span 5;margin-top:clamp(24px,4vw,64px);max-width:44ch;color:var(--text);text-wrap:pretty}.zpm .auftakt .f{grid-column:1/-1;margin-top:clamp(40px,6vw,96px)}.zpm .f{position:relative;overflow:hidden;margin:0}.zpm .f figcaption{padding-top:12px}.zpm .js .f{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s var(--kurve)}.zpm .js .f.ein{clip-path:inset(0)}.zpm .js .f img{transform:scale(1.08);transition:transform 1.6s var(--kurve)}.zpm .js .f.ein img{transform:none} /* Inhalt: links die Zimmer, rechts steht ein Foto fest und wechselt. Es folgt dem Zeiger nicht und verdeckt nichts. */.zpm .inhalt{display:grid;grid-template-columns:repeat(var(--sp),minmax(0,1fr));column-gap:var(--gasse);padding-top:var(--seite);align-items:start}.zpm .liste{grid-column:1/9;display:grid;grid-template-columns:subgrid;border-top:1px solid var(--tinte)}.zpm .zeile{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--linie);text-decoration:none;transition:opacity .25s ease}.zpm .zeile .tn{grid-column:1/span 5;font:300 clamp(24px,2.5vw,36px)/1.1 "Cormorant Garamond",'Cormorant Ersatz',Georgia,serif;text-transform:uppercase;letter-spacing:.03em}.zpm .zeile .tq, .zpm .zeile .tp{color:var(--grau);font-variant-numeric:lining-nums}.zpm .zeile .tq{grid-column:6/span 1}.zpm .zeile .tp{grid-column:7/span 2} @media (hover:hover) and (pointer:fine){.zpm .liste:hover .zeile{opacity:.42}.zpm .liste .zeile:hover{opacity:1}}.zpm .vorschau{grid-column:9/13;position:sticky;top:32px;aspect-ratio:4/5;overflow:hidden;background:#E6DFD4}.zpm .vorschau img{position:absolute;inset:0;height:100%;opacity:0;transition:opacity .45s ease}.zpm .vorschau img.an{opacity:1} /* Raum: gemeinsame Bausteine */.zpm .raum{display:grid;grid-template-columns:repeat(var(--sp),minmax(0,1fr));column-gap:var(--gasse);row-gap:calc(var(--gasse)*1.5);padding-top:var(--seite);align-items:start;scroll-margin-top:24px}.zpm .raum h2{font-size:clamp(44px,5.2vw,80px);line-height:.95;letter-spacing:.015em;text-transform:uppercase;text-wrap:balance}.zpm .fakt{display:flex;gap:clamp(32px,4vw,56px)}.zpm .fakt div{display:flex;flex-direction:column;gap:10px}.zpm .fakt dd{font-size:clamp(28px,2.6vw,38px);line-height:1}.zpm .lead{color:var(--text);font-size:19px;line-height:30px;max-width:34ch;text-wrap:pretty}.zpm .cta{display:flex;flex-direction:column;gap:16px;align-items:flex-start}.zpm .preis{font-size:16px;line-height:24px;color:var(--text)}.zpm .pf{position:relative;display:inline-block;flex:0 0 auto;width:34px;height:1px;background:currentColor;transition:width .32s var(--kurve)}.zpm .pf::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg);transform-origin:center}.zpm .folio{grid-column:1/-1;display:flex;justify-content:space-between;gap:24px;margin-top:calc(var(--seite)*.3);padding-top:16px;border-top:1px solid var(--linie)}.zpm .f0 img, .zpm .f1 img, .zpm .f2 img{height:100%} /* Fassung A: 1+2. Grosses Bild und zwei gestapelte, Text darunter in drei Spalten */.zpm .va .raum h2{grid-column:1/9;grid-row:1;align-self:end}.zpm .va .fakt{grid-column:9/13;grid-row:1;align-self:end;padding-bottom:6px}.zpm .va .modul{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:subgrid;row-gap:var(--gasse)}.zpm .va .modul .f0{grid-column:1/9}.zpm .va .modul .f0:only-child{grid-column:1/-1}.zpm .va .stapel{grid-column:9/13;display:grid;grid-template-rows:1fr 1fr;gap:var(--gasse);min-height:0}.zpm .va .stapel .f{min-height:0;height:100%}.zpm .va .lead{grid-column:1/5;grid-row:3}.zpm .va .aus{grid-column:5/9;grid-row:3;font-size:16px;line-height:26px;color:var(--text);text-wrap:pretty}.zpm .va .aus>span{display:block;margin-bottom:10px}.zpm .va .cta{grid-column:9/13;grid-row:3}.zpm .va .cta-a{display:inline-flex;align-items:center;gap:20px;font:300 28px/1.1 "Cormorant Garamond",'Cormorant Ersatz',Georgia,serif;text-decoration:none;padding-bottom:12px;border-bottom:1px solid var(--tinte)} @media (hover:hover) and (pointer:fine){.zpm .va .cta-a:hover .pf{width:56px}} /* Fassung B: Namen gross, dann eine Bildreihe in gleicher Hoehe (6/3/3 Spalten), dann eine Faktenzeile in vier Spalten */.zpm .vb .raum h2{grid-column:1/-1;font-size:clamp(56px,8.6vw,136px);line-height:.9;letter-spacing:-.01em}.zpm .vb .reihe{grid-column:1/-1;display:grid;grid-template-columns:subgrid}.zpm .vb .reihe .f{height:var(--bh)}.zpm .vb .reihe .f0{grid-column:1/7}.zpm .vb .reihe .f1{grid-column:7/10}.zpm .vb .reihe .f2{grid-column:10/13}.zpm .vb .reihe.n1 .f0{grid-column:1/-1}.zpm .vb .fakten{grid-column:1/-1;display:grid;grid-template-columns:subgrid;padding-top:28px;border-top:1px solid var(--tinte);row-gap:32px}.zpm .vb .fakt{grid-column:1/4}.zpm .vb .lead{grid-column:4/7}.zpm .vb .aus{grid-column:7/10}.zpm .vb .cta{grid-column:10/13}.zpm .vb .aus h3{margin-bottom:12px}.zpm .vb .aus ul{list-style:none;font-size:16px;line-height:26px;color:var(--text)}.zpm .vb .cta-b{display:flex;justify-content:space-between;align-items:center;width:100%;height:56px;padding:0 22px;border:1px solid var(--tinte);text-decoration:none; font:400 12px/1 Inter,system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;transition:background-color .25s ease,color .25s ease} @media (hover:hover) and (pointer:fine){.zpm .vb .cta-b:hover{background:var(--tinte);color:var(--grund)}.zpm .vb .cta-b:hover .pf{width:48px}} /* Fassung C: links ein Bildmodul (1 gross, 2 klein) ueber sechs Spalten, rechts der Text ueber fuenf; dazwischen eine Spalte Luft */.zpm .vc .links{grid-column:1/7;display:flex;flex-direction:column;gap:var(--gasse)}.zpm .vc .paar{display:grid;grid-template-columns:1fr 1fr;gap:var(--gasse)}.zpm .vc .rechts{grid-column:8/13;display:flex;flex-direction:column;gap:32px}.zpm .vc .raum h2{font-size:clamp(40px,4.6vw,72px)}.zpm .vc .kat{display:grid;row-gap:22px}.zpm .vc .kat div{display:grid;grid-template-columns:minmax(72px,1fr) 4fr;column-gap:var(--gasse);align-items:baseline}.zpm .vc .kat dd{font-size:16px;line-height:24px;color:var(--text)}.zpm .vc .cta-c{display:flex;width:100%;height:56px;text-decoration:none}.zpm .vc .cta-c span{flex:1;display:flex;align-items:center;padding:0 22px;border:1px solid var(--tinte);border-right:0;font:400 12px/1 Inter,system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase}.zpm .vc .cta-c b{width:56px;display:flex;align-items:center;justify-content:center;background:var(--tafel);color:#F6F2EA;transition:background-color .25s ease}.zpm .vc .cta-c .pf{width:22px} @media (hover:hover) and (pointer:fine){.zpm .vc .cta-c:hover b{background:#35302B}.zpm .vc .cta-c:hover .pf{width:28px}}.zpm .schluss{display:grid;grid-template-columns:repeat(var(--sp),minmax(0,1fr));column-gap:var(--gasse);row-gap:40px;padding:var(--seite) 0}.zpm .satz{grid-column:1/span 8;font-size:clamp(40px,6.4vw,104px);line-height:.98;letter-spacing:-.03em}.zpm .schluss .cta{grid-column:1/span 4}.zpm .va .schluss .cta{grid-column:1/span 4} @media (prefers-reduced-motion:reduce){.zpm .js .f, .zpm .js .f img, .zpm .zeile, .zpm .vorschau img, .zpm .pf{transition:none!important;clip-path:none!important;transform:none!important}} /* Tablet 8 Spalten */ @media (min-width:810px) and (max-width:1199px){.zpm .einl{grid-column:4/span 5}.zpm .liste{grid-column:1/-1}.zpm .vorschau{display:none}.zpm .zeile .tn{grid-column:1/span 4}.zpm .zeile .tq{grid-column:5/span 2}.zpm .zeile .tp{grid-column:7/span 2}.zpm .va .raum h2{grid-column:1/-1}.zpm .va .fakt{grid-column:1/-1;grid-row:2;padding:0}.zpm .va .modul{grid-row:3}.zpm .va .modul .f0{grid-column:1/-1}.zpm .va .stapel{grid-column:1/-1;grid-template-rows:none;grid-template-columns:1fr 1fr}.zpm .va .stapel .f{height:auto}.zpm .va .stapel img{aspect-ratio:4/3}.zpm .va .lead{grid-column:1/5;grid-row:4}.zpm .va .aus{grid-column:5/9;grid-row:4}.zpm .va .cta{grid-column:1/-1;grid-row:5}.zpm .vb .reihe .f{height:auto}.zpm .vb .reihe img{aspect-ratio:4/3}.zpm .vb .reihe .f0{grid-column:1/-1}.zpm .vb .reihe .f1{grid-column:1/5}.zpm .vb .reihe .f2{grid-column:5/9}.zpm .vb .fakt{grid-column:1/5}.zpm .vb .lead{grid-column:5/9}.zpm .vb .aus{grid-column:1/5}.zpm .vb .cta{grid-column:5/9}.zpm .vc .links, .zpm .vc .rechts{grid-column:1/-1}.zpm .satz{grid-column:1/-1} } /* Handy 4 Spalten: alles in Lesereihenfolge untereinander */ @media (max-width:809px){.zpm .kopf{padding-top:24px;padding-bottom:20px}.zpm .wortmarke{font-size:18px}.zpm .einl{grid-column:1/-1}.zpm .liste{grid-column:1/-1}.zpm .vorschau{display:none}.zpm .zeile{padding:12px 0}.zpm .zeile .tn{grid-column:1/-1}.zpm .zeile .tq{grid-column:1/span 2}.zpm .zeile .tp{grid-column:3/span 2}.zpm .raum>*, .zpm .modul, .zpm .reihe, .zpm .fakten, .zpm .links, .zpm .rechts{grid-column:1/-1!important;grid-row:auto!important}.zpm .modul, .zpm .reihe, .zpm .fakten, .zpm .links, .zpm .rechts{display:flex!important;flex-direction:column;gap:var(--gasse)}.zpm .va .stapel{display:flex;flex-direction:column;gap:var(--gasse)}.zpm .va .stapel .f{height:auto}.zpm .va .stapel img, .zpm .vb .reihe img, .zpm .f1 img, .zpm .f2 img{height:auto;aspect-ratio:4/3}.zpm .vb .reihe .f{height:auto}.zpm .f0 img{aspect-ratio:4/3!important;height:auto}.zpm .satz, .zpm .schluss .cta{grid-column:1/-1}.zpm .folio{flex-direction:column;gap:4px}.zpm .raum h2, .zpm .vb .raum h2{font-size:clamp(34px,9.6vw,52px);letter-spacing:.01em;hyphens:auto;overflow-wrap:anywhere} } /* ===== heft3.css ===== */ /* Fassung B weitergedacht (22.09.2026). Schriften: Cormorant fuer Namen, Abhaya fuer Text, DM Mono fuer alle Daten und Beschriftungen (Inter entfaellt). B1 folgt Michaels Skizze: das erste Bild links ist hoeher als die zwei anderen, seine Unterkante liegt auf der Linie, an der der Text endet. B2 Datenblatt in Mono. B3 gespiegelt, Standfirst, grosse Mono-Zahlen. */.zpm{--mono:"DM Mono",ui-monospace,monospace;--bh1:clamp(230px,25vw,370px)} @media (max-width:1199px){.zpm{--bh1:clamp(200px,30vw,320px)}}.zpm :is(.vb1,.vb2,.vb3) :is(.et,.fakt dt,.aus h3,.aus>span,.kat dt,.folio,.laufkopf,.f figcaption,.lname){font:400 11px/16px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--grau)}.zpm :is(.vb1,.vb2,.vb3) .zeile :is(.tq,.tp){font:400 13px/1 var(--mono);letter-spacing:.02em;font-variant-numeric:tabular-nums}.zpm :is(.vb1,.vb2,.vb3) .fakt dd{font:400 clamp(20px,1.9vw,28px)/1 var(--mono);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--tinte)}.zpm :is(.vb1,.vb2,.vb3) .raum h2{grid-column:1/-1;font-size:clamp(56px,8.6vw,136px);line-height:.9;letter-spacing:-.01em}.zpm :is(.vb1,.vb2,.vb3) .preis{font:400 12px/20px var(--mono);letter-spacing:.06em;color:var(--text)}.zpm :is(.vb1,.vb2,.vb3) .knopf{display:flex;justify-content:space-between;align-items:center;width:100%;height:52px;padding:0 20px;border:1px solid var(--tinte);text-decoration:none;font:500 11px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;transition:background-color .25s ease,color .25s ease} @media (hover:hover) and (pointer:fine){.zpm :is(.vb1,.vb2,.vb3) .knopf:hover{background:var(--tinte);color:var(--grund)}.zpm :is(.vb1,.vb2,.vb3) .knopf:hover .pf{width:48px}}.zpm :is(.vb1,.vb2,.vb3) .schluss .cta{grid-column:1/span 4} /* gemeinsames Modul: zwei Zeilen, links das hohe Erstbild, rechts zwei Fotos und darunter der Text */.zpm .raum.g1 .modul, .zpm .raum.g2 .modul, .zpm .raum.g3 .modul{grid-column:1/-1;display:grid;grid-template-columns:subgrid;grid-template-rows:var(--bh1) auto;row-gap:var(--gasse);align-items:stretch}.zpm .raum .modul .f{margin:0;min-height:0}.zpm .raum .modul .f img{height:100%}.zpm .raum .tb{display:grid;grid-template-columns:subgrid;align-content:space-between;row-gap:24px;padding-top:24px;border-top:1px solid var(--tinte);min-width:0} /* B1 */.zpm .g1 .f0{grid-column:1/7;grid-row:1/3}.zpm .g1 .f1{grid-column:7/10;grid-row:1}.zpm .g1 .f2{grid-column:10/13;grid-row:1}.zpm .g1 .tb{grid-column:7/13;grid-row:2}.zpm .g1 .fakt{grid-column:1/-1}.zpm .g1 .lead{grid-column:1/4;font-size:18px;line-height:29px}.zpm .g1 .aus{grid-column:4/7;font-size:15px;line-height:24px;color:var(--text)}.zpm .g1 .cta{grid-column:1/-1;max-width:calc(50% - 12px)}.zpm .g1.n0 .f0{grid-column:1/8}.zpm .g1.n0 .tb{grid-column:8/13;grid-row:1/3;border-top:0;padding-top:0;display:flex;flex-direction:column;justify-content:space-between} /* B2 Datenblatt */.zpm .g2 .f0{grid-column:1/6;grid-row:1/3}.zpm .g2 .f1{grid-column:6/10;grid-row:1}.zpm .g2 .f2{grid-column:10/13;grid-row:1}.zpm .g2 .tb{grid-column:6/13;grid-row:2}.zpm .g2 .fakt{grid-column:1/4;flex-direction:column;gap:18px}.zpm .g2 .lead{grid-column:4/8;font-size:18px;line-height:29px}.zpm .g2 .kat{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);column-gap:var(--gasse);row-gap:14px;border-top:1px solid var(--linie);padding-top:18px}.zpm .g2 .kat div{display:flex;flex-direction:column;gap:8px}.zpm .g2 .kat dd{font:400 12px/20px var(--mono);letter-spacing:.01em;color:var(--text)}.zpm .g2 .cta{grid-column:1/-1}.zpm .g2 .cta .knopf{max-width:320px}.zpm .g2.n0 .f0{grid-column:1/8}.zpm .g2.n0 .tb{grid-column:8/13;grid-row:1/3;border-top:0;padding-top:0} /* B3 gespiegelt */.zpm .g3 .f0{grid-column:1/7;grid-row:1/3}.zpm .g3 .f1{grid-column:7/11;grid-row:1}.zpm .g3 .f2{grid-column:11/13;grid-row:1}.zpm .g3 .tb{grid-column:7/13;grid-row:2}.zpm .g3.mir .f0{grid-column:7/13}.zpm .g3.mir .f1{grid-column:3/7}.zpm .g3.mir .f2{grid-column:1/3}.zpm .g3.mir .tb{grid-column:1/7}.zpm .g3 .stand{grid-column:1/-1;font:300 clamp(24px,2.2vw,32px)/1.24 "Cormorant Garamond",'Cormorant Ersatz',Georgia,serif;text-wrap:balance;max-width:26ch}.zpm .g3 .fakt{grid-column:1/4;gap:32px}.zpm .g3 .fakt dd{font-size:clamp(28px,3vw,44px);font-weight:300}.zpm .g3 .aus{grid-column:4/7;font:400 12px/20px var(--mono);letter-spacing:.01em;color:var(--text)}.zpm .g3 .aus .et{margin-bottom:8px}.zpm .g3 .cta{grid-column:1/-1}.zpm .g3 .cta .knopf{max-width:calc(50% - 12px)}.zpm .g3.n0 .f0{grid-column:1/8}.zpm .g3.n0 .tb{grid-column:8/13;grid-row:1/3;border-top:0;padding-top:0}.zpm .g3.n0.mir .f0{grid-column:6/13}.zpm .g3.n0.mir .tb{grid-column:1/6} /* Tablet 8 Spalten */ @media (min-width:810px) and (max-width:1199px){.zpm .raum .modul{grid-template-rows:var(--bh1) auto auto}.zpm .g1 .f0, .zpm .g2 .f0, .zpm .g3 .f0, .zpm .g3.mir .f0{grid-column:1/-1;grid-row:1;height:auto}.zpm .raum .f0 img{aspect-ratio:4/3;height:auto}.zpm .g1 .f1, .zpm .g2 .f1, .zpm .g3 .f1, .zpm .g3.mir .f1{grid-column:1/5;grid-row:2}.zpm .g1 .f2, .zpm .g2 .f2, .zpm .g3 .f2, .zpm .g3.mir .f2{grid-column:5/9;grid-row:2}.zpm .g1 .tb, .zpm .g2 .tb, .zpm .g3 .tb, .zpm .g3.mir .tb{grid-column:1/-1;grid-row:3}.zpm .g1 .lead, .zpm .g2 .lead{grid-column:1/5}.zpm .g1 .aus{grid-column:5/9}.zpm .g2 .fakt{grid-column:1/4}.zpm .g2 .lead{grid-column:4/9}.zpm .g2 .kat{grid-template-columns:repeat(2,1fr)}.zpm .g3 .fakt{grid-column:1/5}.zpm .g3 .aus{grid-column:5/9}.zpm .g1 .cta, .zpm .g3 .cta .knopf{max-width:none}.zpm .raum.n0 .f0, .zpm .raum.n0.mir .f0{grid-column:1/-1;grid-row:1}.zpm .raum.n0 .tb, .zpm .raum.n0.mir .tb{grid-column:1/-1;grid-row:2;border-top:1px solid var(--tinte);padding-top:24px;display:grid}.zpm .raum.n0 .modul{grid-template-rows:auto auto} } /* Handy 4 Spalten */ @media (max-width:809px){.zpm .raum .modul{display:flex;flex-direction:column;gap:var(--gasse)}.zpm .raum .modul .f img, .zpm .raum .f0 img{height:auto;aspect-ratio:4/3}.zpm .raum .tb{display:flex;flex-direction:column;gap:22px}.zpm .g1 .cta, .zpm .g3 .cta .knopf, .zpm .g2 .cta .knopf{max-width:none}.zpm .g2 .kat{grid-template-columns:1fr 1fr}.zpm :is(.vb1,.vb2,.vb3) .raum h2{font-size:clamp(34px,9.6vw,52px);overflow-wrap:anywhere;hyphens:auto} }.zpm .raum .aus .et{display:block;margin-bottom:8px} /* b-2: Seitenrand ca. 50 px breiter (40 + 50 = 90 px am Desktop) */.zpm .vb2 main, .zpm .vb2 .kopf{padding-left:calc(var(--rand) + 50px);padding-right:calc(var(--rand) + 50px)} @media (max-width:1199px){.zpm .vb2 main, .zpm .vb2 .kopf{padding-left:calc(var(--rand) + 24px);padding-right:calc(var(--rand) + 24px)}} @media (max-width:809px){.zpm .vb2 main, .zpm .vb2 .kopf{padding-left:var(--rand);padding-right:var(--rand)}} /* b-2: Textblock rueckt links (vom Foto) und rechts weiter ein */ @media (min-width:1200px){.zpm .vb2 .g2 .tb{padding-left:56px;padding-right:56px}} @media (min-width:810px) and (max-width:1199px){.zpm .vb2 .g2 .tb{padding-left:24px;padding-right:24px}} /* b-2: Preishinweis links, Knopf rechts in einer Zeile */ @media (min-width:640px){.zpm .vb2 .g2 .cta{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:24px}.zpm .vb2 .g2 .cta .preis{margin:0}.zpm .vb2 .g2 .cta .knopf{width:320px;flex:none}} /* b-2: ohne Preishinweis, Knopf rechts */ @media (min-width:640px){.zpm .vb2 .g2 .cta{justify-content:flex-end}} /* ===== heft17.css ===== */ /* fb-m2: eine Kategorie. modul enthaelt nur die drei Fotos (eine Reihe, hoehe var(--bh1)); Laufleiste und Textblock liegen als eigene Zeilen direkt im .raum-Raster, nicht mehr im modul. */.zpm .m2 .g2 .modul{grid-template-rows:var(--bh1)} /* Laufleiste: duenne Linie ueber die volle Breite, dunkler Abschnitt endet dort, wo die Typografie (Spalte 6) beginnt -- ueber Raster, nicht per Prozentwert */.zpm .m2 .g2 .lauf{grid-column:1/-1;display:grid;grid-template-columns:subgrid;position:relative;height:24px;margin:32px 0 40px}.zpm .m2 .g2 .lauf::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--linie)}.zpm .m2 .g2 .lauf i{grid-column:1/6;height:1px;background:var(--tinte);align-self:start;margin:0}.zpm .m2 .g2 .lauf span{grid-column:11/13;justify-self:end;align-self:start;margin-top:-14px;padding-left:16px;background:var(--grund);font:400 13px/24px var(--mono);letter-spacing:.06em;color:var(--grau);font-variant-numeric:tabular-nums;white-space:nowrap}.zpm .m2 .g2 .tb{grid-column:6/13;grid-row:auto;border-top:0;padding-top:0;display:flex;flex-direction:column;gap:24px} @media (min-width:1200px){.zpm .m2 .g2 .kat{grid-template-columns:repeat(3,1fr)}} @media (max-width:1199px){.zpm .m2 .g2 .tb, .zpm .m2 .g2 .lauf{grid-column:1/-1}.zpm .m2 .g2 .kat{grid-template-columns:1fr}}.zpm .js .f{clip-path:none!important}.zpm .js .f img{transform:none!important} /* fb-m2: Knopf tiefer und ueber die volle Breite der Typografie (Textspalte) */.zpm .m2 .g2 .cta{margin-top:40px}.zpm .m2 .g2 .cta .knopf{max-width:none;width:100%} /* ===== heft20.css ===== */ /* fb-m5: Groesse (fakt) links, Erklaertext (lead) in der zweiten Spalte daneben -- nicht mehr untereinander. Darunter weiter die drei Spalten Ausstattung/Ausrichtung/Extras. */ @media (min-width:1200px){.zpm .m2 .g2 .tb{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gasse);row-gap:24px}.zpm .m2 .g2 .fakt{grid-column:1/2;flex-direction:column;gap:18px}.zpm .m2 .g2 .lead{grid-column:2/4;font-size:18px;line-height:29px;max-width:44ch}.zpm .m2 .g2 .kat{grid-column:1/-1}.zpm .m2 .g2 .cta{grid-column:1/-1} } /* Fliesstext: schmalerer Umbruch wie in der kompakten Fassung, mehr Luft zwischen den Bloecken (Schweizer Grit: ruhige Spalten, grosszuegiger Abstand) */ @media (min-width:1200px){.zpm .m2 .g2 .lead{max-width:32ch;line-height:32px}.zpm .m2 .g2 .tb{row-gap:40px}.zpm .m2 .g2 .kat{padding-top:24px}.zpm .m2 .g2 .cta{margin-top:56px} } /* ===== heft21.css ===== */ /* Drei Bildvarianten fuer eine Zimmerkategorie. Schweizer Grit: strenges 12-Spalten-Raster, grosszuegige Gassen, keine Effekte. */ /* V1: vertikal geteilt -- links ein Bild ueber die volle Hoehe, rechts oben zwei kleine Bilder, rechts unten der Text. Drei Bloecke (links / rechts-oben / rechts-unten), kein Lauf. */.zpm .v1 .modul{grid-column:1/-1;display:grid;grid-template-columns:subgrid;grid-template-rows:var(--bh1) auto;row-gap:var(--gasse);align-items:stretch}.zpm .v1 .f0{grid-column:1/7;grid-row:1/3}.zpm .v1 .f1{grid-column:7/10;grid-row:1}.zpm .v1 .f2{grid-column:10/13;grid-row:1}.zpm .m2.g2.v1 .tb{grid-column:7/13;grid-row:2;display:flex;flex-direction:column;gap:32px;padding-top:24px;border-top:1px solid var(--tinte)} @media (min-width:1200px){.zpm .m2.g2.v1 .tb .fakt{flex-direction:row;gap:40px}.zpm .m2.g2.v1 .tb .kat{display:grid;grid-template-columns:1fr;row-gap:32px}} @media (max-width:1199px){.zpm .v1 .f0{grid-column:1/-1;grid-row:1;height:auto}.zpm .v1 .f0 img{aspect-ratio:4/3;height:auto}.zpm .v1 .f1{grid-column:1/5;grid-row:2}.zpm .v1 .f2{grid-column:5/9;grid-row:2}.zpm .m2.g2.v1 .tb{grid-column:1/-1;grid-row:3}} /* V2: oben ein Panoramafoto ueber die volle Breite, darunter zwei kleinere Bilder nebeneinander, dann Text (wie m2/m4). */.zpm .v2 .modul{grid-template-rows:calc(var(--bh1)*.62) var(--bh1)}.zpm .v2 .f0{grid-column:1/-1;grid-row:1}.zpm .v2 .f0 img{aspect-ratio:16/7;height:auto}.zpm .v2 .f1{grid-column:1/7;grid-row:2}.zpm .v2 .f2{grid-column:7/13;grid-row:2} @media (max-width:1199px){.zpm .v2 .f1, .zpm .v2 .f2{grid-column:1/5}.zpm .v2 .f2{grid-column:5/9}} /* V3: zwei gleich grosse Bilder nebeneinander (redaktionelles Paar), Text darunter. */.zpm .v3 .modul{grid-template-rows:var(--bh1)}.zpm .v3 .f0{grid-column:1/7;grid-row:1}.zpm .v3 .f1{grid-column:7/13;grid-row:1} @media (max-width:1199px){.zpm .v3 .f0{grid-column:1/5}.zpm .v3 .f1{grid-column:5/9}} /* ===== heft22.css ===== */ /* Drei Typografie-Varianten auf gleicher Bildkomposition und gleichem Grundgeruest (fakt|lead, drei Spalten, Knopf). Kein Strich mehr zwischen Bild und Text -- Trennung nur durch Abstand (Swiss Grid: Luft statt Linie). Nur die Hausschriften: Cormorant Garamond, Abhaya Libre, DM Mono, Inter, Oswald. */.zpm .m2.t1 .lauf, .zpm .m2.t2 .lauf, .zpm .m2.t3 .lauf{display:none}.zpm .t1 .g2 .tb, .zpm .t2 .g2 .tb, .zpm .t3 .g2 .tb{border-top:0;padding-top:0}.zpm .t1 .g2 .modul, .zpm .t2 .g2 .modul, .zpm .t3 .g2 .modul{margin-bottom:64px}.zpm .t1 .g2 .kat, .zpm .t2 .g2 .kat, .zpm .t3 .g2 .kat{border-top:0} /* T1 -- knapp und zeitgemaess: Kopfzeile in Inter-Versalien statt Cormorant, Lead in Abhaya schmucklos, DM Mono nur fuer Zahlen. */.zpm .t1 .g2 h2{font:400 15px/1 "Inter",sans-serif;letter-spacing:.28em;text-transform:uppercase;margin-bottom:40px}.zpm .t1 .g2 .fakt dt, .zpm .t1 .g2 .kat dt{font:500 10px/16px "Inter",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--grau)}.zpm .t1 .g2 .fakt dd{font:400 30px/1 "DM Mono",monospace;letter-spacing:-.02em}.zpm .t1 .g2 .lead{font:400 17px/27px "Abhaya Libre",'Abhaya Ersatz',Georgia,serif;letter-spacing:0;max-width:34ch}.zpm .t1 .g2 .kat dd{font:400 15px/24px "Abhaya Libre",'Abhaya Ersatz',Georgia,serif} /* T2 -- ruhig und technisch: alles in DM Mono, sehr klein und praezise, viel Weissraum, Cormorant bleibt nur der Titel. */.zpm .t2 .g2 h2{font:300 clamp(40px,4.6vw,64px)/1 "Cormorant Garamond",'Cormorant Ersatz',Georgia,serif;letter-spacing:0;text-transform:none;margin-bottom:56px}.zpm .t2 .g2 .fakt dt, .zpm .t2 .g2 .kat dt{font:400 10px/16px "DM Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--grau)}.zpm .t2 .g2 .fakt dd{font:400 22px/1 "DM Mono",monospace;letter-spacing:-.01em}.zpm .t2 .g2 .lead{font:400 13px/22px "DM Mono",monospace;letter-spacing:-.005em;max-width:40ch;color:var(--tinte)}.zpm .t2 .g2 .kat dd{font:400 13px/22px "DM Mono",monospace;letter-spacing:-.005em} /* T3 -- warm und grosszuegig: Cormorant 300 fuer Titel und Lead in groesserer Type, Oswald-Versalien als feine Etiketten, mehr Zeilenabstand. */.zpm .t3 .g2 h2{font:300 clamp(44px,5vw,72px)/1 "Cormorant Garamond",'Cormorant Ersatz',Georgia,serif;letter-spacing:.01em;margin-bottom:64px}.zpm .t3 .g2 .fakt dt, .zpm .t3 .g2 .kat dt{font:400 11px/1 "Oswald",sans-serif;letter-spacing:.32em;text-transform:uppercase;color:var(--grau)}.zpm .t3 .g2 .fakt dd{font:400 26px/1 "Cormorant Garamond",'Cormorant Ersatz',Georgia,serif;letter-spacing:0}.zpm .t3 .g2 .lead{font:300 22px/34px "Cormorant Garamond",'Cormorant Ersatz',Georgia,serif;letter-spacing:.005em;max-width:28ch}.zpm .t3 .g2 .kat dd{font:400 16px/27px "Abhaya Libre",'Abhaya Ersatz',Georgia,serif}.zpm .t3 .g2 .tb{row-gap:48px} /* Kombination V1-Bildanordnung + T1-Typografie: Strich zwischen Bild und Text auch hier weg */.zpm .t1 .m2.g2.v1 .tb, .zpm .t1 .g2.v1 .tb{border-top:0;padding-top:0}.zpm .t1 .g2.v1 .fakt{gap:40px} /* ===== zt2-a.css ===== */ /* Block-2-Vorschlag A: Register mit laufender Nummer (22.09.2026). Nummer statt Aufzaehlungspunkt, eine ruhige Zeile statt drei Spalten, Zahlen zu einer Angabe zusammengefasst, feine Zeilenbewegung beim Zeigen. */.zpm .insA .liste{grid-column:1/9;display:flex;flex-direction:column;border-top:1px solid var(--tinte)}.zpm .insA .zeile{display:flex;align-items:baseline;gap:28px;padding:26px 0;border-bottom:1px solid var(--linie)}.zpm .insA .zeile .num{flex:0 0 auto;font:400 12px/1 var(--mono,"DM Mono",monospace);letter-spacing:.02em;color:var(--grau);font-variant-numeric:tabular-nums;transition:color .3s var(--kurve)}.zpm .insA .zeile .tn{flex:1 1 auto;grid-column:auto;font:300 clamp(22px,2.3vw,32px)/1.15 "Cormorant Garamond",'Cormorant Ersatz',Georgia,serif;text-transform:none;letter-spacing:0;transition:transform .3s var(--kurve)}.zpm .insA .zeile .spec{flex:0 0 auto;grid-column:auto;font:400 12px/1 var(--mono,"DM Mono",monospace);letter-spacing:.06em;color:var(--grau);font-variant-numeric:tabular-nums;white-space:nowrap}.zpm .insA .liste:hover .zeile{opacity:1} @media (hover:hover) and (pointer:fine){.zpm .insA .zeile:hover .num{color:var(--tinte)}.zpm .insA .zeile:hover .tn{transform:translateX(6px)} }.zpm .insA .vorschau{border:1px solid var(--linie)} @media (prefers-reduced-motion:reduce){.zpm .insA .zeile .tn, .zpm .insA .zeile .num{transition:none}} @media (max-width:809px){.zpm .insA .liste{grid-column:1/-1}.zpm .insA .zeile{flex-wrap:wrap;gap:4px 16px;padding:18px 0}.zpm .insA .zeile .spec{flex-basis:100%;order:3} }.zpm .schalter{left:auto;right:8px} /* ===== zt6.css ===== */ /* L7 und L8 (23.09.2026): Kopfzeile mit Zimmername links und Kennzahlen rechts, darunter ein dunkler Strich, dann Fließtext, dann die Gruppen als beschriftete Zeilen mit Haarlinien, zuletzt der Knopf über die ganze Breite. L7 setzt Name und Zahlen in IBM Plex Mono, L8 in Cormorant Garamond. Fließtext und Listen sind in beiden Abhaya Libre. */.zpm .lz .raum{padding-top:48px}.zpm .lz .kopf{padding-bottom:16px}.zpm .schalter.rand{top:44px}.zpm .schalter.sicht{top:80px} /* Kopfzeile, Strich, Fließtext, Gruppen, Knopf */ @media (min-width:1200px){.zpm .lz .m2.g2.v1 .tb{display:grid!important;grid-template-columns:1fr auto auto;column-gap:48px;row-gap:0;align-content:start; padding-left:var(--textrand,48px)!important;padding-right:var(--textrand,48px)!important;padding-top:0!important;border-top:0!important}.zpm .lz .g2 .tb h2{grid-column:1;grid-row:1;align-self:end;margin:0}.zpm .lz .g2.v1 .fakt{display:contents!important}.zpm .lz .g2 .fakt div:nth-child(1){grid-column:2;grid-row:1;text-align:right;align-self:end}.zpm .lz .g2 .fakt div:nth-child(2){grid-column:3;grid-row:1;text-align:right;align-self:end}.zpm .lz .g2 .linie{grid-column:1/-1;grid-row:2;margin:18px 0 0;border:0;border-top:1px solid var(--tinte)}.zpm .lz .m2.g2.v1 .lead{grid-column:1/-1;grid-row:3;margin:56px 0 0;padding-left:220px;max-width:46ch}.zpm .lz .m2.g2.v1 .kat{grid-column:1/-1;grid-row:4;margin-top:56px;padding-top:0!important;display:grid;grid-template-columns:200px 1fr;column-gap:32px;row-gap:0}.zpm .lz .g2 .kat div{display:grid;grid-template-columns:subgrid;grid-column:1/-1;align-items:start;padding:20px 0;border-bottom:1px solid var(--linie)}.zpm .lz .g2 .kat div:first-child{padding-top:0}.zpm .lz .g2 .kat dt{grid-column:1;padding-top:4px}.zpm .lz .g2 .kat dd{grid-column:2;margin:0}.zpm .lz .m2.g2.v1 .cta{grid-column:1/-1;grid-row:5;margin-top:40px}.zpm .lz .g2 .cta{align-items:stretch!important;width:100%}.zpm .lz .g2 .cta .knopf{max-width:none!important;width:100%} } /* Gemeinsame Schriften */.zpm .lz .g2 .fakt dt, .zpm .lz .g2 .kat dt{font:400 9px/1.6em "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--grau)}.zpm .lz .m2.g2.v1 .lead{font:400 19px/1.55em "Abhaya Libre",'Abhaya Ersatz',Georgia,serif;color:var(--tinte)}.zpm .lz .g2 .kat dd{font:400 16px/1.55em "Abhaya Libre",'Abhaya Ersatz',Georgia,serif;color:var(--text)}.zpm .lz .g2 .cta .knopf{font:400 10px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.22em;text-transform:uppercase} /* L7: Name und Zahlen in Mono, weit gesperrt */.zpm .lz7 .g2 .tb h2{font:300 34px/1em "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.24em;text-transform:uppercase}.zpm .lz7 .g2 .fakt dd{font:300 34px/1em "IBM Plex Mono",ui-monospace,monospace;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--tinte);margin-top:8px} /* L8: Name und Zahlen in Cormorant, Etiketten bleiben Mono */.zpm .lz8 .g2 .tb h2{font:300 46px/1em "Cormorant Garamond",'Cormorant Ersatz',Georgia,serif;letter-spacing:-.015em;text-transform:none}.zpm .lz8 .g2 .fakt dd{font:300 36px/1em "Cormorant Garamond",'Cormorant Ersatz',Georgia,serif;letter-spacing:0;font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1;color:var(--tinte);margin-top:6px} /* Nachbesserung: Umschalter nach rechts (überdeckte die Wortmarke) und der Zimmername in L7 bleibt einzeilig -- Mono mit weiter Sperrung braucht Platz. */.zpm .lz .schalter{left:auto;right:8px}.zpm .lz7 .g2 .tb h2{font-size:24px;letter-spacing:.2em;white-space:nowrap} /* L7: Kennzahlen so groß wie der Zimmername, Etiketten linksbündig über der jeweiligen Angabe (nicht mehr rechts ausgerichtet). */ @media (min-width:1200px){.zpm .lz7 .g2 .fakt div{text-align:left!important} }.zpm .lz7 .g2 .fakt dd{font:300 24px/1em "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.04em;font-variant-numeric:tabular-nums;color:var(--tinte);margin-top:10px} /* L8: Zimmername und Kennzahlen etwas kleiner (46/36 -> 38/28). */.zpm .lz8 .g2 .tb h2{font-size:38px}.zpm .lz8 .g2 .fakt dd{font-size:28px;margin-top:8px}.zpm .schalter.name{top:116px} /* Tablet (810 bis 1199 px): der Text steht zweispaltig -- links Fließtext, rechts die Gruppen. Kopfzeile bleibt Name links, Kennzahlen rechts. */ @media (min-width:810px) and (max-width:1199px){.zpm .lz .m2.g2.v1 .tb{display:grid!important;grid-template-columns:1fr 1fr;column-gap:32px;row-gap:0;align-content:start; padding:0!important;border-top:0!important}.zpm .lz .g2 .tb h2{grid-column:1;grid-row:1;align-self:end;margin:0}.zpm .lz .g2.v1 .fakt{display:flex!important;flex-direction:row!important;gap:32px;grid-column:2;grid-row:1;align-self:end;justify-content:flex-end}.zpm .lz .g2 .fakt div{text-align:left}.zpm .lz .g2 .linie{grid-column:1/-1;grid-row:2;margin:16px 0 0;border:0;border-top:1px solid var(--tinte)}.zpm .lz .m2.g2.v1 .lead{grid-column:1;grid-row:3;margin:32px 0 0;padding-left:0;max-width:32ch}.zpm .lz .m2.g2.v1 .kat{grid-column:2;grid-row:3;margin-top:32px;padding-top:0!important;display:grid;grid-template-columns:1fr;row-gap:0}.zpm .lz .g2 .kat div{display:block;padding:14px 0;border-bottom:1px solid var(--linie)}.zpm .lz .g2 .kat div:first-child{padding-top:0}.zpm .lz .g2 .kat dt{padding:0}.zpm .lz .g2 .kat dd{margin-top:6px}.zpm .lz .m2.g2.v1 .cta{grid-column:1/-1;grid-row:4;margin-top:32px}.zpm .lz .g2 .cta{align-items:stretch!important;width:100%}.zpm .lz .g2 .cta .knopf{max-width:none!important;width:100%}.zpm .lz7 .g2 .tb h2{font-size:20px;letter-spacing:.18em}.zpm .lz7 .g2 .fakt dd{font-size:20px}.zpm .lz8 .g2 .tb h2{font-size:32px}.zpm .lz8 .g2 .fakt dd{font-size:24px} } /* Diaschau im Auftakt */.zpm .auftakt .schau{grid-column:1/-1;margin-top:clamp(40px,6vw,96px)}.zpm .folien{position:relative;aspect-ratio:12/5;overflow:hidden;background:#E6DFD4}.zpm .folie{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .6s var(--kurve)}.zpm .folie.an{opacity:1}.zpm .folie img{width:100%;height:100%;object-fit:cover}.zpm .schausteuer{display:flex;align-items:center;gap:20px;padding-top:14px}.zpm .pfeil{width:34px;height:24px;padding:0;border:0;background:transparent;cursor:pointer;position:relative}.zpm .pfeil::before{content:"";position:absolute;left:0;right:0;top:11px;height:1px;background:var(--tinte)}.zpm .pfeil::after{content:"";position:absolute;top:8px;width:7px;height:7px;border-top:1px solid var(--tinte);border-right:1px solid var(--tinte)}.zpm .pfeil.vor::after{right:0;transform:rotate(45deg)}.zpm .pfeil.zurueck::after{left:0;transform:rotate(-135deg)}.zpm .zaehler{font:400 11px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.16em;color:var(--grau);font-variant-numeric:tabular-nums} @media (hover:hover) and (pointer:fine){.zpm .pfeil:hover::before{background:var(--grau)}} @media (prefers-reduced-motion:reduce){.zpm .folie{transition:none}} /* ================================================================= * * Kopfzeile: drei Fassungen zum Vergleich (23.09.2026) * K1 Name links, rechts EINE stille Zeile "30 m² · 2–4 Personen" * K2 Name links, Kennzahlen als kleine Zeile DARUNTER, rechts Luft * K3 Name groß, darunter zwei beschriftete Spalten (Swiss Grid) * ================================================================= */ @media (min-width:1200px){ /* K1 */.zpm .kz1 .m2.g2.v1 .tb{grid-template-columns:1fr auto!important}.zpm .kz1 .g2.v1 .fakt{display:flex!important;flex-direction:row!important;grid-column:2;grid-row:1;align-self:end;gap:0 10px;align-items:baseline}.zpm .kz1 .g2 .fakt div{flex-direction:row!important;gap:0}.zpm .kz1 .g2 .fakt dt{display:none}.zpm .kz1 .g2 .fakt dd{font:400 15px/1.6em "IBM Plex Mono",ui-monospace,monospace!important;letter-spacing:.02em;margin:0!important;color:var(--grau)}.zpm .kz1 .g2 .fakt div+div::before{content:"·";color:var(--grau);margin-right:10px;font:400 15px/1.6em "IBM Plex Mono",ui-monospace,monospace}.zpm .kz1 .g2 .fakt div+div dd::after{content:" Personen"} /* K2 */.zpm .kz2 .m2.g2.v1 .tb{grid-template-columns:1fr auto!important}.zpm .kz2 .g2 .tb h2{grid-column:1;grid-row:1;align-self:end}.zpm .kz2 .g2.v1 .fakt{display:flex!important;flex-direction:row!important;grid-column:1;grid-row:2;gap:0 10px;align-items:baseline;margin-top:10px}.zpm .kz2 .g2 .fakt div{flex-direction:row!important;gap:0}.zpm .kz2 .g2 .fakt dt{display:none}.zpm .kz2 .g2 .fakt dd{font:400 14px/1.6em "IBM Plex Mono",ui-monospace,monospace!important;letter-spacing:.06em;margin:0!important;color:var(--grau)}.zpm .kz2 .g2 .fakt div+div::before{content:"·";color:var(--grau);margin-right:10px;font:400 14px/1.6em "IBM Plex Mono",ui-monospace,monospace}.zpm .kz2 .g2 .fakt div+div dd::after{content:" Personen"}.zpm .kz2 .g2 .linie{grid-row:3!important;margin-top:20px!important}.zpm .kz2 .m2.g2.v1 .lead{grid-row:4!important}.zpm .kz2 .m2.g2.v1 .kat{grid-row:5!important}.zpm .kz2 .m2.g2.v1 .cta{grid-row:6!important} /* K3 */.zpm .kz3 .m2.g2.v1 .tb{grid-template-columns:repeat(4,minmax(0,1fr))!important;column-gap:30px}.zpm .kz3 .g2 .tb h2{grid-column:1/-1;grid-row:1;margin-bottom:28px}.zpm .kz3 .g2.v1 .fakt{display:contents!important}.zpm .kz3 .g2 .fakt div:nth-child(1){grid-column:1;grid-row:2;text-align:left!important}.zpm .kz3 .g2 .fakt div:nth-child(2){grid-column:2;grid-row:2;text-align:left!important}.zpm .kz3 .g2 .fakt dd{font:300 28px/1em "Cormorant Garamond",'Cormorant Ersatz',Georgia,serif!important;margin-top:8px!important}.zpm .kz3 .g2 .linie{grid-row:3!important;margin-top:24px!important}.zpm .kz3 .m2.g2.v1 .lead{grid-row:4!important;grid-column:1/-1!important;padding-left:0!important;max-width:40ch}.zpm .kz3 .m2.g2.v1 .kat{grid-row:5!important;grid-column:1/-1!important;grid-template-columns:200px 1fr!important}.zpm .kz3 .m2.g2.v1 .cta{grid-row:6!important;grid-column:1/-1!important} }.zpm .schalter.kopf-schalter{top:8px} /* ===== zt7.css ===== */ /* Drei NEUE Bildanordnungen (23.09.2026). Ziel: die Fotos kommen groß zur Geltung, Typografie bleibt die freigegebene L8-Fassung (Cormorant-Name, Mono-Etiketten). B1 Panorama über die ganze Breite, darunter der Text, unten ein Bildpaar B2 drei Hochformate nebeneinander, Text darunter über die ganze Breite B3 versetztes Raster: großes Bild links, zwei hohe rechts auf Versatz, Text links unten */.zpm .bv .raum{padding-top:48px}.zpm .bv .kopf{padding-bottom:16px}.zpm .bv .schalter{left:auto;right:8px}.zpm .schalter.bild{top:44px}.zpm .schalter.erk{top:80px}.zpm .schalter.sicht{top:116px} @media (min-width:1200px){ /* Grundlage für alle drei: das Modul ist das 12-Spalten-Raster des Zimmers */.zpm .bv .raum.g2 .modul{display:grid!important;grid-template-columns:subgrid;grid-template-rows:none!important; row-gap:14px;column-gap:14px;align-items:start;margin-bottom:0!important}.zpm .bv .raum .modul .f{height:auto!important}.zpm .bv .raum .modul .f img{width:100%;height:100%;object-fit:cover}.zpm .bv .m2.g2.v1 .tb{padding-left:0!important;padding-right:0!important;border-top:0!important;padding-top:0!important} /* ---------- B1: Panorama oben, Text, Bildpaar unten ---------- */.zpm .bv1 .raum .modul .f0{grid-column:1/-1;grid-row:2}.zpm .bv1 .raum .modul .f0 img{aspect-ratio:16/7;object-position:center center}.zpm .bv1 .m2.g2.v1 .tb{grid-column:1/-1!important;grid-row:3!important;margin:56px 0 64px}.zpm .bv1 .raum .modul .f1{grid-column:1/7;grid-row:4}.zpm .bv1 .raum .modul .f2{grid-column:7/13;grid-row:4}.zpm .bv1 .raum .modul .f1 img, .zpm .bv1 .raum .modul .f2 img{aspect-ratio:4/3} /* ---------- B2: drei Hochformate nebeneinander, Text darunter ---------- */.zpm .bv2 .raum .modul .f0{grid-column:1/5;grid-row:2}.zpm .bv2 .raum .modul .f1{grid-column:5/9;grid-row:2}.zpm .bv2 .raum .modul .f2{grid-column:9/13;grid-row:2}.zpm .bv2 .raum .modul .f img{aspect-ratio:3/4}.zpm .bv2 .m2.g2.v1 .tb{grid-column:1/-1!important;grid-row:3!important;margin-top:56px} /* ---------- B3: versetztes Raster ---------- */.zpm .bv3 .raum .modul{row-gap:0}.zpm .bv3 .raum .modul .f0{grid-column:1/9;grid-row:1}.zpm .bv3 .raum .modul .f0 img{aspect-ratio:4/3}.zpm .bv3 .raum .modul .f1{grid-column:9/13;grid-row:1;margin-top:96px}.zpm .bv3 .raum .modul .f2{grid-column:9/13;grid-row:2;margin-top:14px}.zpm .bv3 .raum .modul .f1 img, .zpm .bv3 .raum .modul .f2 img{aspect-ratio:3/4}.zpm .bv3 .m2.g2.v1 .tb{grid-column:1/9!important;grid-row:2!important;margin-top:48px} } /* Tablet: alle drei stapeln ruhig, Text zweispaltig (wie in zt6.css) */ @media (min-width:810px) and (max-width:1199px){.zpm .bv .raum.g2 .modul{display:grid!important;grid-template-columns:repeat(8,minmax(0,1fr));column-gap:14px;row-gap:14px}.zpm .bv .raum .modul .f0{grid-column:1/-1}.zpm .bv .raum .modul .f1{grid-column:1/5}.zpm .bv .raum .modul .f2{grid-column:5/9}.zpm .bv .raum .modul .f img{width:100%;height:auto}.zpm .bv1 .raum .modul .f0 img{aspect-ratio:16/9}.zpm .bv2 .raum .modul .f img, .zpm .bv3 .raum .modul .f1 img, .zpm .bv3 .raum .modul .f2 img{aspect-ratio:3/4}.zpm .bv .m2.g2.v1 .tb{grid-column:1/-1!important;margin-top:40px} } /* Der Zimmername steht zusätzlich VOR den Bildern, weil die Fotos so groß sind. Der echte h2 bleibt unten im Textblock, der Vorlauf ist nur Schmuck (aria-hidden). */.zpm .vorname{display:none} @media (min-width:1200px){.zpm .bv1 .vorname, .zpm .bv2 .vorname, .zpm .bv6 .vorname{display:block;grid-column:1/-1;grid-row:1;margin:0 0 22px; font:300 38px/1em "Cormorant Garamond",'Cormorant Ersatz',Georgia,serif;letter-spacing:-.015em;color:var(--tinte)}.zpm .bv1 .raum.g2 .modul, .zpm .bv2 .raum.g2 .modul, .zpm .bv6 .raum.g2 .modul{grid-template-rows:auto} } /* ---------- B6: großes Foto randlos bis zur Fensterkante, Text links ---------- */ @media (min-width:1200px){.zpm .bv6 .raum .modul .f0{grid-column:6/-1;grid-row:2;margin-right:calc((100vw - var(--breite)) / -2 - 90px);width:auto}.zpm .bv6 .raum .modul .f0 img{aspect-ratio:4/3}.zpm .bv6 .m2.g2.v1 .tb{grid-column:1/6!important;grid-row:2!important;align-self:center}.zpm .bv6 .raum .modul .f1{grid-column:1/7;grid-row:3;margin-top:56px}.zpm .bv6 .raum .modul .f2{grid-column:7/13;grid-row:3;margin-top:56px}.zpm .bv6 .raum .modul .f1 img, .zpm .bv6 .raum .modul .f2 img{aspect-ratio:4/3} /* schmale Textspalte: Gruppen untereinander statt nebeneinander */.zpm .bv6 .m2.g2.v1 .tb{grid-template-columns:1fr!important;row-gap:28px!important}.zpm .bv6 .m2.g2.v1 .kat{grid-template-columns:1fr!important}.zpm .bv6 .g2 .kat div{display:block!important;padding:14px 0!important}.zpm .bv6 .g2 .kat dt{padding:0!important}.zpm .bv6 .g2 .kat dd{margin-top:6px!important}.zpm .bv6 .g2 .tb h2{font-size:32px}.zpm .bv6 .m2.g2.v1 .lead{grid-column:1!important;padding-left:0!important;padding-right:0!important;margin:0!important; max-width:none!important;font:300 23px/1.45em "Cormorant Garamond",'Cormorant Ersatz',Georgia,serif;color:var(--tinte)}.zpm .bv6 .erklaer{display:none} } /* ---------- Textblock auf DREI Spalten (B1, B2, B3): Lead Spalte 1, Erklaertext E1 = nur Spalte 2 (wie Vorlage), E2 = Spalte 2 und 3. Listen darunter auf denselben drei Spalten, Knopf ueber die ganze Breite. ---------- */ @media (min-width:1200px){.zpm .bv1 .m2.g2.v1 .tb, .zpm .bv2 .m2.g2.v1 .tb, .zpm .bv3 .m2.g2.v1 .tb{grid-template-columns:repeat(3,minmax(0,1fr))!important; column-gap:64px!important;row-gap:56px!important}.zpm .bv1 .g2 .tb h2, .zpm .bv2 .g2 .tb h2, .zpm .bv3 .g2 .tb h2{grid-column:1/3;grid-row:1}.zpm .bv1 .g2 .fakt div:nth-child(1), .zpm .bv2 .g2 .fakt div:nth-child(1), .zpm .bv3 .g2 .fakt div:nth-child(1){grid-column:3;grid-row:1;justify-self:end;text-align:right}.zpm .bv1 .g2 .fakt div:nth-child(2), .zpm .bv2 .g2 .fakt div:nth-child(2), .zpm .bv3 .g2 .fakt div:nth-child(2){grid-column:3;grid-row:1;justify-self:end;text-align:right;margin-right:150px}.zpm .bv1 .g2 .linie, .zpm .bv2 .g2 .linie, .zpm .bv3 .g2 .linie{grid-column:1/-1;grid-row:2;margin:18px 0 0}.zpm .bv1 .m2.g2.v1 .lead, .zpm .bv2 .m2.g2.v1 .lead, .zpm .bv3 .m2.g2.v1 .lead{grid-column:1!important;grid-row:3!important; padding-left:0!important;padding-right:0!important;margin:0!important;max-width:none!important; font:300 24px/1.45em "Cormorant Garamond",'Cormorant Ersatz',Georgia,serif;color:var(--tinte)}.zpm .bv1 .erklaer, .zpm .bv2 .erklaer, .zpm .bv3 .erklaer{display:block;grid-row:3;margin:0; font:400 17px/1.7em "Abhaya Libre",'Abhaya Ersatz',Georgia,serif;color:var(--text)} /* E1: Erklaertext nur in Spalte 2 */.zpm .ev1.bv1 .erklaer, .zpm .ev1.bv2 .erklaer, .zpm .ev1.bv3 .erklaer{grid-column:2} /* E2: Erklaertext ueber Spalte 2 und 3, zweispaltig gesetzt */.zpm .ev2.bv1 .erklaer, .zpm .ev2.bv2 .erklaer, .zpm .ev2.bv3 .erklaer{grid-column:2/4!important;columns:2;column-gap:64px} /* E3: Erklaertext EIN Block ueber Spalte 2 und 3, Zeilen laufen durch */.zpm .ev3.bv1 .erklaer, .zpm .ev3.bv2 .erklaer, .zpm .ev3.bv3 .erklaer{grid-column:2/4!important}.zpm .bv1 .m2.g2.v1 .kat, .zpm .bv2 .m2.g2.v1 .kat, .zpm .bv3 .m2.g2.v1 .kat{grid-column:1/-1!important;grid-row:4!important;margin:0!important; grid-template-columns:repeat(3,minmax(0,1fr))!important;column-gap:64px!important}.zpm .bv1 .g2 .kat div, .zpm .bv2 .g2 .kat div, .zpm .bv3 .g2 .kat div{display:block!important;padding:0!important;border-bottom:0!important; grid-row:auto!important}.zpm .bv1 .g2 .kat div:nth-child(1), .zpm .bv2 .g2 .kat div:nth-child(1), .zpm .bv3 .g2 .kat div:nth-child(1){grid-column:1!important}.zpm .bv1 .g2 .kat div:nth-child(2), .zpm .bv2 .g2 .kat div:nth-child(2), .zpm .bv3 .g2 .kat div:nth-child(2){grid-column:2!important}.zpm .bv1 .g2 .kat div:nth-child(3), .zpm .bv2 .g2 .kat div:nth-child(3), .zpm .bv3 .g2 .kat div:nth-child(3){grid-column:3!important}.zpm .bv1 .g2 .kat dt, .zpm .bv2 .g2 .kat dt, .zpm .bv3 .g2 .kat dt{padding:0!important}.zpm .bv1 .g2 .kat dd, .zpm .bv2 .g2 .kat dd, .zpm .bv3 .g2 .kat dd{margin-top:12px!important}.zpm .bv1 .m2.g2.v1 .cta, .zpm .bv2 .m2.g2.v1 .cta, .zpm .bv3 .m2.g2.v1 .cta{grid-column:1/-1!important;grid-row:5!important;margin:0!important} }.zpm .erklaer{display:none} /* ===== zt9.css ===== */ /* Zweite Fassung der Zimmerkarten (23.09.2026, Michaels Abbildung): Hauptbild links quadratisch, daneben ZWEI HOCHFORMATE, der Text laeuft darunter ueber die ganze Breite -- also unter das Hauptbild hinaus. Die Typografie kommt aus zt7 (.bv1 + .ev3), hier stehen nur die Bilder. */ @media (min-width:1200px){.zpm .bv7 .raum .modul{row-gap:20px!important;column-gap:20px!important}.zpm .bv7 .raum .modul .f0{grid-column:1/7!important;grid-row:2!important}.zpm .bv7 .raum .modul .f0 img{aspect-ratio:1/1!important}.zpm .bv7 .raum .modul .f1{grid-column:7/10!important;grid-row:2!important}.zpm .bv7 .raum .modul .f2{grid-column:10/13!important;grid-row:2!important}.zpm .bv7 .raum .modul .f1 img, .zpm .bv7 .raum .modul .f2 img{aspect-ratio:3/4!important}.zpm .bv7 .m2.g2.v1 .tb{grid-column:1/-1!important;grid-row:3!important;margin:56px 0 0!important} /* kein Vorlauf-Name: der Name steht unten im Textblock, sonst stuende er zweimal da */.zpm .bv7 .vorname{display:none!important}.zpm .bv7 .raum.g2 .modul{grid-template-rows:auto auto!important} } /* Tablet: aus zt7 kam ein 16/7-Panorama (698x243 gemessen) -- zu flach fuer diese Fassung. Hauptbild 4/3, die zwei Hochformate bleiben hochkant. */ @media (min-width:810px) and (max-width:1199px){.zpm .bv7 .raum.g2 .modul{grid-template-rows:auto!important;grid-auto-rows:auto!important}.zpm .bv7 .raum .modul .f0, .zpm .bv7 .raum .modul .f1, .zpm .bv7 .raum .modul .f2{height:auto!important}.zpm .bv7 .raum .modul .f0 img{aspect-ratio:4/3!important;height:auto!important}.zpm .bv7 .raum .modul .f1 img, .zpm .bv7 .raum .modul .f2 img{aspect-ratio:3/4!important} } /* ===== zt10.css ===== */ /* Drei Varianten fuer Michaels Anordnung (23.09.2026): Bild 1 links gross bleibt. Bild 2 wird QUERFORMAT ueber die Breite von Bild 2+3 zusammen, etwas flacher. Bild 3 kommt DARUNTER, links anschliessend an Bild 1. Unterschied der drei: Breite und Hoehe von Bild 3. */ @media (min-width:1200px){.zpm .cv .raum .modul{row-gap:20px!important;column-gap:20px!important}.zpm .cv .raum .modul .f0{grid-column:1/7!important;grid-row:2/4!important;align-self:start!important}.zpm .cv .raum .modul .f0 img{aspect-ratio:1/1!important}.zpm .cv .raum .modul .f1{grid-column:7/13!important;grid-row:2!important;align-self:start!important}.zpm .cv .raum .modul .f2{grid-row:3!important;align-self:start!important}.zpm .cv .m2.g2.v1 .tb{grid-column:1/-1!important;grid-row:4!important;margin:56px 0 0!important}.zpm .cv .raum.g2 .modul{grid-template-rows:auto!important;grid-auto-rows:auto!important} /* C1: Bild 3 halb so breit wie Bild 2, buendig links unter ihm. Bild 1 schliesst UNTEN mit Bild 3 ab: es spannt beide Reihen und wird gedehnt, das Foto fuellt mit object-fit. Kein aspect-ratio, sonst rechnet es sich seine eigene Hoehe aus. */.zpm .cv1 .raum .modul .f0{align-self:stretch!important;height:auto!important}.zpm .cv1 .raum .modul .f0 img{aspect-ratio:auto!important;height:100%!important;object-fit:cover!important}.zpm .cv1 .raum .modul .f1 img{aspect-ratio:16/9!important}.zpm .cv1 .raum .modul .f2{grid-column:7/10!important}.zpm .cv1 .raum .modul .f2 img{aspect-ratio:4/3!important} /* C2: Bild 2 flacher (3/1), Bild 3 breiter (zwei Drittel) und hoeher */.zpm .cv2 .raum .modul .f1 img{aspect-ratio:3/1!important}.zpm .cv2 .raum .modul .f2{grid-column:7/11!important}.zpm .cv2 .raum .modul .f2 img{aspect-ratio:4/3!important} /* C3: beide gleich breit gestapelt, Bild 3 als flaches Band */.zpm .cv3 .raum .modul .f1 img{aspect-ratio:2/1!important}.zpm .cv3 .raum .modul .f2{grid-column:7/13!important}.zpm .cv3 .raum .modul .f2 img{aspect-ratio:5/2!important} }.zpm .schalter.bild3{left:auto;right:8px;top:44px} /* ===== zt11.css ===== */ /* Handy-Typografie der Zimmerkarten (23.09.2026, Michaels Ansage: "Arbeite an der Typografie bei Breakpoint Mobil"). Gemessen vorher bei 390 px: Luecke Name -> GROESSE 72 px, Zahl 28 px, Groesse und Personen untereinander, Trennstrich 2x2 px. Hier: Angaben NEBENEINANDER, engere Abstaende, kleinere Zahlen. */ @media (max-width:809px){ /* Trennstrich war ein Punkt: er stand als Gitterkind in einer auto-Spalte */.zpm .lz .g2 .linie{grid-column:1/-1!important;width:100%!important;justify-self:stretch!important; height:0!important;border:0!important;border-top:1px solid var(--tinte)!important;margin:18px 0 0!important}.zpm .lz .m2.g2.v1 .tb{display:grid!important;grid-template-columns:1fr 1fr!important; column-gap:24px!important;row-gap:0!important;padding-left:0!important;padding-right:0!important} /* Zimmername */.zpm .lz8 .g2 .tb h2{grid-column:1/-1!important;grid-row:1!important;margin:0!important; font-size:30px!important;line-height:1.05em!important} /* Groesse und Personen nebeneinander, direkt unter dem Namen */.zpm .lz .g2.v1 .fakt{display:contents!important}.zpm .lz .g2 .fakt div:nth-child(1){grid-column:1!important;grid-row:2!important;margin:22px 0 0!important;text-align:left!important}.zpm .lz .g2 .fakt div:nth-child(2){grid-column:2!important;grid-row:2!important;margin:22px 0 0!important;text-align:left!important}.zpm .lz .g2 .fakt dt{padding:0!important;font-size:9px!important} /* Werte in derselben Mono wie auf Tablet und Desktop (Michael, 23.09.2026), nicht in der Serifenschrift -- gemessen dort: IBM Plex Mono 15px/24px */.zpm .lz .g2 .fakt dd{margin:6px 0 0!important;font:400 15px/24px "IBM Plex Mono",ui-monospace,monospace!important; letter-spacing:.02em!important}.zpm .lz .g2 .linie{grid-row:3!important} /* Beschreibung */.zpm .lz .m2.g2.v1 .lead{grid-column:1/-1!important;grid-row:4!important; margin:22px 0 0!important;padding:0!important;max-width:34ch!important; font:400 17px/1.5em "Abhaya Libre",'Abhaya Ersatz',Georgia,serif!important} /* Gruppen */.zpm .lz .m2.g2.v1 .kat{grid-column:1/-1!important;grid-row:5!important;margin:26px 0 0!important; display:grid!important;grid-template-columns:1fr!important;row-gap:0!important}.zpm .lz .g2 .kat div{display:block!important;padding:14px 0!important;border-bottom:1px solid var(--linie)!important}.zpm .lz .g2 .kat div:first-child{padding-top:0!important}.zpm .lz .g2 .kat div:last-child{border-bottom:0!important}.zpm .lz .g2 .kat dt{padding:0!important;font-size:9px!important}.zpm .lz .g2 .kat dd{margin:6px 0 0!important;font:400 15px/1.5em "Abhaya Libre",'Abhaya Ersatz',Georgia,serif!important} /* Knopf */.zpm .lz .m2.g2.v1 .cta{grid-column:1/-1!important;grid-row:6!important;margin:24px 0 0!important} } /* Tablet trug als einziger Haltepunkt noch die Serifenzahl (Cormorant 24px), gemessen am 23.09.2026 bei 810 px. Dieselbe Mono wie Handy und Desktop. */ @media (min-width:810px) and (max-width:1199px){.zpm .lz .g2 .fakt dd{font:400 15px/24px "IBM Plex Mono",ui-monospace,monospace!important; letter-spacing:.02em!important;margin-top:6px!important} } /* ===== zt12.css ===== */ /* Modern Nord: oberer Bildrand (Decke, Vorhangschiene) soll weg, und die Bilder muessen unten auf derselben Linie abschliessen wie in den anderen Zimmern. Michael am 23.09.2026: "Warum schliessen die Bilder unten nicht gleich ab. Mach dieses Bild groesser. Du kannst es links abschneiden." ZWEI FALLEN, beide gemessen: 1. transform:scale wirkt hier nicht -- heft.css setzt unter @media (prefers-reduced-motion:reduce) ein transform:none!important auf `.js .f img`, und der Messbrowser meldet genau das. 2. `height:118%` am Bild verkuerzte den RAHMEN auf 530 px (andere Zimmer 592 px) -- dadurch stimmten die Unterkanten nicht mehr. Deshalb: Rahmenhoehe unberuehrt (height:100%), das Bild nur BREITER und nach links aus dem Rahmen geschoben. Beschnitt links, unten bleibt bündig. */ 3. Die RAHMENHOEHE kam bei f1/f2 aus dem aspect-ratio des BILDES. Mit einem breiteren Bild wuchs sie mit (618x438 statt 618x347). Deshalb traegt jetzt der RAHMEN das Format, und das Bild fuellt ihn nur noch aus. */.zpm #modern-nord .f{overflow:hidden}.zpm #modern-nord .f1{aspect-ratio:16/9}.zpm #modern-nord .f2{aspect-ratio:4/3}.zpm #modern-nord .f img{aspect-ratio:auto!important;width:126%;height:100%;object-fit:cover;margin-left:-26%} /* ---- Handy: Bilder groesser, Michael am 28.09.2026 ---- Vorher lagen alle Zimmerfotos am Handy auf aspect-ratio 4/3 und im Satzspiegel: gemessen 350 x 263 px, mittlere Bildflaeche 69.803. Jetzt hochkant 4/5 und randlos -- derselbe Griff wie auf den Themenseiten. Steht bewusst am DATEIENDE: zpm.css ist erzeugt, die Regeln oben bleiben unberuehrt und diese hier gewinnen ueber die Reihenfolge. */ @media (max-width:809px){ .zpm .f{margin-inline:calc(var(--rand) * -1)} .zpm .f img, .zpm .f0 img, .zpm .va .stapel img, .zpm .vb .reihe img, .zpm .raum .modul .f img, .zpm .raum .f0 img{aspect-ratio:4 / 5 !important;height:auto} .zpm .v2 .f0 img{aspect-ratio:3 / 2 !important} /* das Panorama bleibt quer */ .zpm .f figcaption{padding-inline:var(--rand)} }