@font-face{font-family:'PJS';font-style:normal;font-weight:400;font-display:swap;src:url(data:font/woff2;base64,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) format('woff2');} @font-face{font-family:'PJS';font-style:normal;font-weight:700;font-display:swap;src:url(data:font/woff2;base64,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) format('woff2');} :root{ color-scheme: light only; /* Farben des Portfolio-Designs, gemessen an der Vorlage */ --paper:#EDEFF6; --surface:#FFFFFF; --surface-2:#E4E8F3; --ink:#131A38; --ink-2:#5A6180; --ink-3:#8B92AB; --rule:#DDE1EE; --rule-strong:#C8CEE2; --accent:#B5651D; --accent-soft:#F6EADC; --accent-ink:#8A4C14; --patina:#00918A; --slate:#6A4AB0; --vacant:#9A9691; --vacant-soft:#EDECE8; --critical:#A8382A; --shadow:0 1px 3px rgba(19,26,56,.05), 0 12px 34px rgba(19,26,56,.05); --schatten-tief:0 18px 50px rgba(19,26,56,.14); --dunkel:#0E1430; --dunkel-2:#1B2450; --auf-dunkel:#F2F4FB; --auf-dunkel-2:#A3ACCB; --f-display:'PJS',"Plus Jakarta Sans","Avenir Next",Avenir,"Segoe UI",system-ui,sans-serif; --f-body:var(--f-display); --f-mono:var(--f-display); --r-gross:34px; --r-mittel:22px; --r-klein:14px; --luft:clamp(18px,4vw,30px); --spalt:clamp(12px,1.6vw,20px); --band:clamp(52px,8vw,104px); --breite:1180px; --kopf:60px; /* Die Bauteile stammen aus der Vorfassung und sprechen diese Namen an. */ --v2-akzent:var(--accent); --v2-grund:var(--paper); --v2-karte:var(--surface); --v2-linie:var(--rule); --v2-tinte:var(--ink); --v2-tinte-2:var(--ink-2); --v2-tinte-3:var(--ink-3); --v2-dunkel:var(--dunkel); --v2-dunkel-2:var(--dunkel-2); --v2-auf-dunkel:var(--auf-dunkel); --v2-auf-dunkel-2:var(--auf-dunkel-2); --v2-f:var(--f-display); --v2-luft:var(--luft); --v2-spalt:var(--spalt); --v2-max:var(--breite); --v2-r-gross:var(--r-gross); --v2-schatten:var(--shadow); } /* ═══════════════════════════════════ Seitenrahmen */ *{box-sizing:border-box} html{scroll-behavior:smooth} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--f-body); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:clip;} img,svg{max-width:100%} a{color:var(--accent-ink)} .wrap{max-width:var(--breite); margin:0 auto; padding:0 clamp(16px,3vw,28px) clamp(56px,8vw,96px);} section{margin-top:var(--band); scroll-margin-top:calc(var(--kopf) + 16px);} section:first-of-type{margin-top:clamp(26px,4vw,44px)} h1{font-size:clamp(34px,6.4vw,68px); font-weight:700; line-height:1; letter-spacing:-.035em; margin:0;} h1 i{font-style:italic} /* Zweite Zeile der Hauptüberschrift: aufrecht und halb so groß. */ .h1-zusatz{display:inline-block; font-style:normal; font-size:.5em; font-weight:700; letter-spacing:-.015em; line-height:1.15} h2{font-size:clamp(25px,3.6vw,42px); font-weight:700; line-height:1.06; letter-spacing:-.03em; margin:0 0 14px; text-transform:none; border:none; padding:0;} h3{font-size:clamp(17px,2vw,23px); font-weight:700; line-height:1.2; letter-spacing:-.02em; margin:34px 0 10px; text-transform:none; border:none; padding:0; color:var(--ink);} h4{font-size:15px; font-weight:700; letter-spacing:-.01em; margin:22px 0 8px;} p{margin:0 0 14px} .lede{font-size:clamp(17px,1.6vw,21px); line-height:1.58; color:var(--ink-2); max-width:66ch;} .klein{font-size:13.5px; line-height:1.62; color:var(--ink-3);} /* ═══════════════════════════════════ Kopf mit Hamburger */ .kopf{position:sticky; top:0; z-index:70; background:rgba(237,239,246,.9); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid var(--rule);} .kopf-in{max-width:var(--breite); margin:0 auto; height:var(--kopf); padding:0 clamp(16px,3vw,28px); display:flex; align-items:center; gap:14px;} .burger{display:flex; align-items:center; gap:10px; background:none; border:none; padding:8px 12px 8px 0; cursor:pointer; color:var(--ink); font:inherit;} .burger span{display:block; width:20px; height:2px; background:currentColor; position:relative;} .burger span::before,.burger span::after{content:""; position:absolute; left:0; width:20px; height:2px; background:currentColor;} .burger span::before{top:-6px} .burger span::after{top:6px} .burger b{font-size:12.5px; font-weight:700; letter-spacing:.02em} .marke{margin-left:auto; font-size:12.5px; font-weight:700; color:var(--ink); text-decoration:none; white-space:nowrap;} .marke span{color:var(--ink-3); font-weight:400} .menue{position:fixed; inset:var(--kopf) 0 auto 0; z-index:69; background:var(--surface); border-bottom:1px solid var(--rule); box-shadow:var(--schatten-tief); transform:translateY(-101%); transition:transform .2s ease; will-change:transform;} .menue[data-offen="ja"]{transform:translateY(0)} .menue-in{max-width:var(--breite); margin:0 auto; padding:18px clamp(16px,3vw,28px) 26px; display:grid; gap:4px; grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));} .menue a{display:flex; flex-direction:column; gap:2px; padding:12px 14px; border-radius:var(--r-klein); text-decoration:none; color:var(--ink);} .menue a:hover{background:var(--paper)} .menue a[aria-current="page"]{background:var(--ink); color:#fff} .menue a[aria-current="page"] i{color:var(--auf-dunkel-2)} .menue a b{font-size:14.5px; font-weight:700} .menue a i{font-style:normal; font-size:12px; color:var(--ink-3)} /* Ohne JavaScript bleibt das Panel sichtbar, damit die Navigation nie verloren geht. */ .kein-js .menue{position:static; transform:none; box-shadow:none} .kein-js .burger{display:none} @media print{.kopf,.menue{display:none}} /* ═══════════════════════════════════ Karten und Raster */ .karte{background:var(--surface); border-radius:var(--r-gross); padding:var(--luft); box-shadow:var(--shadow);} .karte.flach{box-shadow:none; border:1px solid var(--rule)} .karte.bild{padding:0; overflow:hidden} .karte.bild img{display:block; width:100%; height:100%; object-fit:cover} /* Die drei Fassaden haben sehr verschiedene Seitenverhältnisse (4:5, 2:5, 16:11). Sie werden eingepasst statt beschnitten, damit kein Haus angeschnitten wird. */ .karte.bild.einpass{background:var(--surface-2); aspect-ratio:4/5} .karte.bild.einpass img{object-fit:contain} .haus{display:flex; flex-direction:column} /* Ein Haus mit zweiter Aufnahme: sie läuft unter der ersten, quer statt hoch, damit alle drei Karten dieselbe Bildbreite behalten. */ .haus>figure.zweit{aspect-ratio:16/10; margin:0 0 12px!important} .haus .karte:last-child{flex:1} .gitter{display:grid; gap:var(--spalt); grid-template-columns:repeat(12,1fr)} .gitter>*{min-width:0} .s12{grid-column:span 12} .s9{grid-column:span 9} .s8{grid-column:span 8} .s7{grid-column:span 7} .s6{grid-column:span 6} .s5{grid-column:span 5} .s4{grid-column:span 4} .s3{grid-column:span 3} @media(max-width:900px){ .s5,.s6,.s7,.s8,.s9{grid-column:span 12} .s3,.s4{grid-column:span 6} } /* Unter 540px steht ohnehin alles untereinander. Das Zwölfspaltenraster würde dort allein durch die elf Spalten­abstände breiter als der Bildschirm, die Spalten fielen auf 0 zusammen und der Inhalt liefe rechts hinaus. */ @media(max-width:540px){ .gitter{grid-template-columns:1fr} .s3,.s4,.s5,.s6,.s7,.s8,.s9,.s12{grid-column:span 1} } .dunkel{background:var(--dunkel); color:var(--auf-dunkel); border-radius:var(--r-gross); padding:var(--luft);} .dunkel p,.dunkel .lede,.dunkel .klein{color:var(--auf-dunkel-2)} .dunkel .karte{background:var(--dunkel-2); box-shadow:none; color:inherit} .lab{font-size:11.5px; letter-spacing:.04em; color:var(--ink-3); margin:0 0 4px} .dunkel .lab{color:var(--auf-dunkel-2)} .zahl{font-size:clamp(28px,3.6vw,44px); font-weight:700; line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums; margin:0;} .zahl.ak{color:var(--accent)} .s3 .zahl,.s4 .zahl{font-size:clamp(28px,3.2vw,42px)} .pille{display:inline-flex; align-items:center; gap:8px; background:var(--ink); color:#fff; font-size:12.5px; font-weight:700; padding:12px 22px; border-radius:999px; border:none; text-decoration:none; cursor:pointer;} .pille:hover{background:#25305C} .pille.leer{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--rule)} .pille.ak{background:var(--accent)} .pille.ak:hover{background:var(--accent-ink)} .dunkel .pille{background:#fff; color:var(--ink)} .weiter{display:inline-block; margin-top:10px; font-size:13px; font-weight:700; color:var(--accent-ink); text-decoration:none} .weiter:hover{text-decoration:underline} /* ═══════════════════════════════════ Formulare */ .v-form label{display:block; font-size:11px; color:var(--ink-3); margin:0 0 5px} .v-form input,.v-form textarea{width:100%; padding:12px 14px; font:inherit; font-size:15px; color:var(--ink); background:var(--paper); border:1.5px solid var(--rule); border-radius:var(--r-klein); -webkit-appearance:none;} .v-form input:focus,.v-form textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(181,101,29,.14)} .v-form textarea{resize:vertical; min-height:120px; line-height:1.55} .tor label,.kontaktform label{display:block; font-size:11px; color:var(--ink-3); margin:0 0 5px} .tor input,.kontaktform input,.kontaktform textarea{width:100%; padding:12px 14px; font:inherit; font-size:15px; color:var(--ink); background:var(--paper); border:1.5px solid var(--rule); border-radius:var(--r-klein); -webkit-appearance:none;} .tor input:focus,.kontaktform input:focus,.kontaktform textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(181,101,29,.14)} .kontaktform textarea{resize:vertical; min-height:130px; line-height:1.55} .kontaktform .feld{margin-bottom:14px} .kontaktform .feldpaar{display:grid; gap:14px; grid-template-columns:1fr 1fr} @media(max-width:600px){.kontaktform .feldpaar{grid-template-columns:1fr}} /* Köderfeld gegen selbsttätiges Ausfüllen. Für Menschen unsichtbar, für Lesegeräte ausgeblendet — wer es ausfüllt, ist keiner. */ .koeder{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden} .kontaktform .antwort{margin:14px 0 0; min-height:1.2em} .kontaktform .antwort.gut{color:var(--good,#0F6B4F)} .kontaktform .antwort.schlecht{color:var(--critical)} .kontaktform button[disabled]{opacity:.55; cursor:default} /* ═══════════════════════════════════ Startseite */ .auftakt{margin-top:clamp(30px,6vw,64px)} .mitte-y{display:flex; flex-direction:column; justify-content:center} /* Der Mieterzugang bekommt ein Akzentband und mehr Gewicht als eine gewöhnliche Karte. */ .tor{position:relative; overflow:hidden; padding-top:calc(var(--luft) + 4px)} .torband{position:absolute; inset:0 0 auto 0; height:4px; background:var(--accent)} .torkopf{font-size:clamp(22px,2.6vw,30px); margin:2px 0 10px} .tor .klein{margin-bottom:18px} .tor label{margin-top:2px} .pille.breit{width:100%; justify-content:center; margin-top:14px} .torfuss{margin:14px 0 0; text-align:center} .torfuss a{color:var(--accent-ink)} /* Das Kontaktband setzt sich dunkel ab und schließt die Seite. */ .kontaktband{padding:clamp(26px,4vw,48px)} .kontaktband h2 i{font-style:italic} .merkliste{margin:18px 0 0; padding:0; list-style:none} .merkliste li{position:relative; padding-left:20px; margin-bottom:9px; font-size:13.5px; line-height:1.55; color:var(--auf-dunkel-2)} .merkliste li::before{content:""; position:absolute; left:0; top:8px; width:7px; height:7px; border-radius:50%; background:var(--accent)} .kontaktband .kontaktform{background:var(--surface)} .kontaktband .kontaktform label{color:var(--ink-3)} /* Die Karte ist hell, liegt aber im dunklen Band. Ohne diese Regel färbt „.dunkel .pille" den Knopf weiß — auf weißem Grund unsichtbar. */ .kontaktband .kontaktform .pille{background:var(--accent); color:#fff} .kontaktband .kontaktform .pille:hover{background:var(--accent-ink)} .kontaktband .kontaktform p{color:var(--ink-2)} @media(max-width:900px){ .kontaktband .gitter{gap:26px} } /* ═══════════════════════════════════ Fuß */ .fuss{margin-top:var(--band); padding:26px 0 0; border-top:1px solid var(--rule)} .sprung{font-size:13px; line-height:2.1; color:var(--ink-3); max-width:none} .sprung a{color:var(--accent-ink); font-weight:700; text-decoration:none; border-bottom:1px solid var(--rule); white-space:nowrap} .sprung a:hover{border-bottom-color:var(--accent)} .fuss p{font-size:11.5px; line-height:1.65; color:var(--ink-3); max-width:88ch; margin:0 0 8px} .fuss a{color:var(--ink-3)} /* Plus Jakarta Sans — Copyright 2020 The Plus Jakarta Sans Project Authors (https://github.com/tokotype/PlusJakartaSans), SIL Open Font License 1.1, https://scripts.sil.org/OFL */ *{box-sizing:border-box;} /* ---------- Titelblock (nach Vorbild der Vermessungsplan-Schriftfelder) */ .titleblock{ border:1.5px solid var(--rule-strong); background:var(--surface); margin:32px 0 0; box-shadow:var(--shadow); } .tb-head{padding:34px 30px 26px; border-bottom:1.5px solid var(--rule-strong);} .tb-eyebrow{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.19em; text-transform:uppercase; color:var(--accent); margin:0 0 18px; } .tb-head h1{ font-family:var(--f-display); font-weight:700; letter-spacing:-.022em; font-size:clamp(30px,5.2vw,52px); line-height:1.03; margin:0 0 14px; text-wrap:balance; } .tb-head h1 em{font-style:normal; color:var(--accent);} .tb-sub{ font-family:var(--f-display); font-size:clamp(14px,2vw,17px); font-weight:400; color:var(--ink-2); margin:0; letter-spacing:.005em; max-width:62ch; } .tb-grid{display:grid; grid-template-columns:repeat(4,1fr);} .tb-cell{ padding:12px 16px 13px; border-right:1px solid var(--rule); border-top:1px solid var(--rule); } .tb-cell:nth-child(4n){border-right:none;} .tb-cell:nth-child(-n+4){border-top:none;} .tb-k{ font-family:var(--f-mono); font-size:9.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-3); display:block; margin-bottom:4px; } .tb-v{font-family:var(--f-display); font-size:14px; font-weight:600; letter-spacing:-.005em;} @media(max-width:720px){ .tb-grid{grid-template-columns:repeat(2,1fr);} .tb-cell:nth-child(2n){border-right:none;} .tb-cell:nth-child(-n+2){border-top:none;} .tb-cell:nth-child(3),.tb-cell:nth-child(4){border-top:1px solid var(--rule);} } /* ---------- Kennzahlenleiste */ @media(max-width:640px){} @media(max-width:560px){ } /* ---------- Sektionen */ section{margin-top:74px; scroll-margin-top:78px;} @media print{} details.acc, h2#details{scroll-margin-top:78px;} html{scroll-behavior:smooth;} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}} section h2{ font-family:var(--f-display); font-weight:700; letter-spacing:-.024em; font-size:clamp(23px,3.4vw,33px); line-height:1.12; margin:0; text-wrap:balance; } .sec-rule::before{content:""; position:absolute; left:0; top:-3.5px; width:7px; height:7px; background:var(--accent);} .lede{font-size:17.5px; line-height:1.6; color:var(--ink-2); max-width:66ch; margin:0 0 26px;} p{max-width:70ch;} h3{font-family:var(--f-display); font-weight:700; font-size:17px; letter-spacing:-.01em; margin:38px 0 12px;} h4{font-family:var(--f-mono); font-weight:600; font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-3); margin:30px 0 10px;} /* ---------- Tabellen */ .tw{overflow-x:auto; border:1px solid var(--rule); background:var(--surface); margin:20px 0; box-shadow:var(--shadow);} table{border-collapse:collapse; width:100%; min-width:520px; font-family:var(--f-display); font-size:13.5px;} caption{caption-side:top; text-align:left; padding:14px 16px 12px; font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); border-bottom:1px solid var(--rule); background:var(--surface-2);} th,td{padding:8px 13px; text-align:right; border-bottom:1px solid var(--rule); font-variant-numeric:tabular-nums; white-space:nowrap;} th{font-weight:600; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); border-bottom:1.5px solid var(--rule-strong); vertical-align:bottom; background:var(--surface); position:sticky; top:0;} th:first-child,td:first-child{text-align:left; white-space:normal; min-width:150px;} tbody tr:last-child td{border-bottom:none;} tr.sum td{font-weight:700; border-top:1.5px solid var(--rule-strong); background:var(--surface-2); border-bottom:none;} tr.grand td{font-weight:700; background:var(--accent-soft); color:var(--accent-ink); border-top:1.5px solid var(--accent); border-bottom:none;} tr.grpstart td{border-top:1.5px solid var(--rule-strong);} tr.grp td{background:var(--surface-2); font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); font-weight:600;} td.num,th.num{font-family:var(--f-mono); font-size:12.5px;} td.vac{color:var(--vacant); font-style:italic;} .chip{display:inline-block; font-family:var(--f-mono); font-size:9.5px; letter-spacing:.09em; text-transform:uppercase; padding:2px 6px 1px; border:1px solid currentColor; line-height:1.5; vertical-align:1px;} .chip.v{color:var(--accent);} .chip.l{color:var(--vacant);} .chip.w{color:var(--patina);} .chip.g{color:var(--slate);} /* ---------- Karten & Hinweise */ .cards{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)); margin:22px 0;} .card{border:1px solid var(--rule); background:var(--surface); padding:20px 20px 22px; box-shadow:var(--shadow);} .card h3{margin:0 0 4px; font-size:19px;} .card .meta{font-family:var(--f-mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--accent); margin:0 0 14px;} .card dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:5px 14px; font-family:var(--f-display); font-size:13px;} .card dt{color:var(--ink-3); font-size:11px; font-family:var(--f-mono); letter-spacing:.05em; text-transform:uppercase; align-self:center;} .card dd{margin:0; text-align:right; font-variant-numeric:tabular-nums; font-weight:600;} .quote{font-family:var(--f-body); font-size:13.5px; font-style:italic; color:var(--ink-2); border-left:2px solid var(--accent); padding:2px 0 2px 14px; margin:14px 0 0; line-height:1.55;} .note{border:1px solid var(--rule); border-left:3px solid var(--accent); background:var(--surface); padding:16px 20px; margin:24px 0; font-size:14.5px; line-height:1.58; box-shadow:var(--shadow);} .note.warn{border-left-color:var(--critical);} .note.good{border-left-color:var(--patina);} .note strong{font-family:var(--f-display); font-weight:700;} .note .lbl{font-family:var(--f-mono); font-size:9.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-3); display:block; margin-bottom:6px;} .note.warn .lbl{color:var(--critical);} .note.good .lbl{color:var(--patina);} .note p{margin:0 0 10px; max-width:74ch;} .note p:last-child{margin-bottom:0;} .hero-price{border:1.5px solid var(--accent); background:var(--accent-soft); padding:26px 28px; margin:26px 0; display:flex; flex-wrap:wrap; gap:26px 46px; align-items:flex-end;} .hero-price .big{font-family:var(--f-display); font-weight:700; font-size:clamp(38px,7vw,62px); letter-spacing:-.035em; line-height:.95; color:var(--accent-ink); font-variant-numeric:tabular-nums;} .hero-price .lbl{font-family:var(--f-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-ink); display:block; margin-bottom:10px; opacity:.85;} .hero-price .side{display:grid; gap:12px 30px; grid-template-columns:repeat(auto-fit,minmax(min(120px,100%),1fr)); flex:1; min-width:240px;} .hero-price .side div{border-left:1px solid var(--accent); padding-left:14px;} .hero-price .side .v{font-family:var(--f-display); font-weight:700; font-size:20px; letter-spacing:-.02em; color:var(--accent-ink); font-variant-numeric:tabular-nums;} ul.tight{margin:14px 0; padding-left:0; list-style:none; max-width:74ch;} ul.tight li{position:relative; padding-left:20px; margin-bottom:9px; font-size:14.5px; line-height:1.55;} ul.tight li::before{content:""; position:absolute; left:0; top:.62em; width:6px; height:1.5px; background:var(--accent);} ol.steps{margin:14px 0; padding-left:0; list-style:none; counter-reset:s; max-width:74ch;} ol.steps li{counter-increment:s; position:relative; padding-left:34px; margin-bottom:13px; font-size:14.5px; line-height:1.55;} ol.steps li::before{content:counter(s,decimal-leading-zero); position:absolute; left:0; top:.1em; font-family:var(--f-mono); font-size:11px; color:var(--accent); letter-spacing:.06em;} figure{margin:24px 0;} /* Die Regel stammt aus der Zeit, als Unterschriften nur „Abb. 1" hießen. Ganze Absätze in Versalien sind auf dem Handy eine Wand. */ figcaption{font-family:var(--f-display); font-size:12.5px; letter-spacing:0; text-transform:none; color:var(--ink-3); line-height:1.55; margin-top:10px;} figcaption b{display:block; color:var(--ink); font-size:13.5px; font-weight:700; letter-spacing:-.01em; margin-bottom:3px;} .figwrap{overflow-x:auto; border:1px solid var(--rule); background:var(--surface); padding:22px 20px; box-shadow:var(--shadow);} svg{display:block;} .legend{display:flex; flex-wrap:wrap; gap:8px 22px; margin:14px 0 0; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.05em; color:var(--ink-2);} .legend span{display:flex; align-items:center; gap:7px;} .legend i{width:14px; height:14px; display:block; flex:none;} .legend i.hatch{border:1px solid var(--vacant); background:repeating-linear-gradient(45deg,var(--vacant) 0 2px,var(--vacant-soft) 2px 5px);} @media print{} .src{columns:2; column-gap:34px;} @media(max-width:680px){.src{columns:1;}} .src li{break-inside:avoid; margin-bottom:6px; font-size:11px; line-height:1.6;} a:focus-visible,summary:focus-visible{outline:2px solid var(--accent); outline-offset:2px;} details{border:1px solid var(--rule); background:var(--surface); margin:18px 0; box-shadow:var(--shadow);} summary{padding:13px 18px; cursor:pointer; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2);} details[open] summary{border-bottom:1px solid var(--rule);} details .inner{padding:4px 18px 16px;} @media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important;}} @media print{ section{break-inside:auto; margin-top:34px;} .tw,figure,.card,.note{break-inside:avoid;} .titleblock, } /* ───────────────────────────── Renditerechner */ .calc{border:1.5px solid var(--rule-strong); background:var(--surface); margin:26px 0; box-shadow:var(--shadow);} .calc-out{position:sticky; top:56px; z-index:5; background:var(--accent-soft); border-bottom:1.5px solid var(--accent); padding:16px 20px;} .calc-tiles{display:grid; gap:2px 0; grid-template-columns:repeat(auto-fit,minmax(min(122px,100%),1fr));} .tile{padding:2px 14px 2px 0;} .tile .k{font-family:var(--f-mono); font-size:9px; letter-spacing:.13em; text-transform:uppercase; color:var(--accent-ink); opacity:.8; display:block; margin-bottom:3px; line-height:1.4;} .tile .v{font-family:var(--f-display); font-weight:700; font-size:24px; letter-spacing:-.03em; color:var(--accent-ink); font-variant-numeric:tabular-nums; line-height:1.05;} .tile .v.neg{color:var(--critical);} .tile .s{font-family:var(--f-mono); font-size:9.5px; color:var(--accent-ink); opacity:.7; display:block; margin-top:2px;} .calc-body{padding:4px 20px 22px;} .calc-grid{display:grid; gap:0 40px; grid-template-columns:repeat(auto-fit,minmax(min(288px,100%),1fr));} .cgroup{padding:18px 0 4px; border-bottom:1px solid var(--rule);} .cgroup:last-child{border-bottom:none;} .cgroup > h4{margin:0 0 12px;} .ctrl{margin-bottom:15px;} .ctrl-top{display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:5px;} .ctrl-lab{font-family:var(--f-display); font-size:13px; color:var(--ink-2);} .ctrl-val{font-family:var(--f-mono); font-size:13px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap;} input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:22px; background:transparent; cursor:pointer; display:block; margin:0;} input[type=range]::-webkit-slider-runnable-track{height:3px; background:var(--rule-strong); border-radius:2px;} input[type=range]::-moz-range-track{height:3px; background:var(--rule-strong); border-radius:2px;} input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:17px; height:17px; border-radius:50%; background:var(--accent); border:2px solid var(--surface); margin-top:-7px; box-shadow:0 0 0 1px var(--accent);} input[type=range]::-moz-range-thumb{width:15px; height:15px; border-radius:50%; background:var(--accent); border:2px solid var(--surface); box-shadow:0 0 0 1px var(--accent);} input[type=range]:focus-visible::-webkit-slider-thumb{outline:2px solid var(--ink); outline-offset:2px;} .ctrl-hint{font-family:var(--f-mono); font-size:9.5px; color:var(--ink-3); margin-top:2px; display:block; line-height:1.5;} .seg{display:flex; border:1px solid var(--rule-strong); margin-bottom:6px; overflow:hidden;} .seg button{flex:1; padding:8px 4px; border:none; background:var(--surface); cursor:pointer; font-family:var(--f-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); border-right:1px solid var(--rule);} .seg button:last-child{border-right:none;} .seg button[aria-pressed=true]{background:var(--accent); color:#fff;} .tog{display:flex; align-items:flex-start; gap:11px; padding:11px 0 5px; cursor:pointer; border-top:1px solid var(--rule);} .tog:first-of-type{border-top:none;} .tog input{margin:2px 0 0; accent-color:var(--accent); width:16px; height:16px; flex:none; cursor:pointer;} .tog .t{font-family:var(--f-display); font-size:13.5px; font-weight:600; display:block;} .tog .d{font-family:var(--f-mono); font-size:10px; color:var(--ink-3); display:block; margin-top:2px; line-height:1.5;} .modgrid{display:grid; gap:16px; grid-template-columns:repeat(3,1fr); margin:14px 0 4px;} @media(max-width:900px){.modgrid{grid-template-columns:1fr;}} .modcard{border:1.5px solid var(--rule); background:var(--surface-2); padding:14px 16px 4px; transition:border-color .15s, background .15s, opacity .15s;} .modcard.on{border-color:var(--accent); background:var(--accent-soft);} .modcard:not(.on){opacity:.62;} .modcard .tog{border-top:none; padding:0 0 10px; margin-bottom:12px; border-bottom:1px solid var(--rule);} .modcard .sums{display:flex; justify-content:space-between; gap:10px; padding:10px 0 12px; border-top:1px solid var(--rule); font-family:var(--f-mono); font-size:10px; color:var(--ink-3); letter-spacing:.06em; text-transform:uppercase;} .modcard .sums b{display:block; font-size:14px; color:var(--ink); font-family:var(--f-display); letter-spacing:-.022em; margin-top:3px; text-transform:none; font-variant-numeric:tabular-nums;} .modcard.on .sums b{color:var(--accent-ink);} .modbox{margin-bottom:0;} .presets{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 4px;} .presets button{padding:7px 13px; border:1px solid var(--accent); background:var(--surface); color:var(--accent); cursor:pointer; font-family:var(--f-mono); font-size:10px; letter-spacing:.09em; text-transform:uppercase;} .presets button:hover{background:var(--accent); color:#fff;} .calc-note{font-family:var(--f-mono); font-size:10px; color:var(--ink-3); line-height:1.65; border-top:1px solid var(--rule); margin-top:16px; padding-top:14px;} /* ───────────────────────────── Legende der Mietszenarien */ .mietleg{border:1px solid var(--rule); background:var(--surface-2); margin:18px 0 4px; min-width:0; overflow-x:auto;} .mietleg > .lbl{display:block; font-family:var(--f-mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); padding:12px 16px 0;} /* table-layout:fixed ist hier Pflicht: ohne feste Teilung wächst die Tabelle auf ihre Maximalbreite (die Herleitungsspalte einzeilig, rund 1.750 px) und schiebt das ganze Dokument waagerecht auf. */ .mietleg table{width:100%; border-collapse:collapse; margin:8px 0 0; table-layout:fixed;} .mietleg col.c-sz{width:15%} .mietleg col.c-mon{width:12%} .mietleg col.c-jah{width:13%} .mietleg col.c-qm{width:10%} .mietleg col.c-her{width:50%} .mietleg th, .mietleg td{padding:9px 16px; border-top:1px solid var(--rule); vertical-align:top; font-family:var(--f-display); font-size:12.5px; line-height:1.5; text-align:left;} .mietleg th{font-family:var(--f-mono); font-size:9px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); font-weight:400; border-top:none;} .mietleg td.z{text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; font-family:var(--f-mono); font-size:12px;} .mietleg td.sz{font-weight:700; white-space:nowrap;} .mietleg td.sz i{display:block; font-weight:400; font-style:normal; font-size:11px; color:var(--ink-3); font-family:var(--f-mono);} .mietleg .fuss{padding:11px 16px 13px; border-top:1px solid var(--rule); font-family:var(--f-mono); font-size:10px; color:var(--ink-3); line-height:1.6;} @media(max-width:760px){ /* Schmale Schirme: aus der Tabelle werden gestapelte Blöcke, damit nichts scrollt */ .mietleg table, .mietleg tbody, .mietleg tr, .mietleg td{display:block; width:auto;} .mietleg thead, .mietleg colgroup{display:none;} .mietleg tr{border-top:1px solid var(--rule); padding:10px 16px 12px;} .mietleg td{border:none; padding:2px 0;} .mietleg td.sz{font-size:14px; margin-bottom:4px;} .mietleg td.z{text-align:left; display:inline-block; margin-right:14px;} .mietleg td.z::before{content:attr(data-lab) " "; color:var(--ink-3); font-size:9px; letter-spacing:.12em; text-transform:uppercase;} } /* ───────────────────────────── Bilder, Pläne, Downloads */ figure.shot{margin:0; border:1px solid var(--rule); background:var(--surface); box-shadow:var(--shadow); overflow:hidden;} figure.shot a{display:block; line-height:0; background:var(--surface-2);} figure.shot img{width:100%; height:auto; display:block; transition:opacity .2s;} figure.shot a:hover img{opacity:.9;} figure.shot figcaption{padding:11px 14px 13px; margin:0; text-transform:none; letter-spacing:0; font-family:var(--f-display); font-size:12.5px; color:var(--ink-2); line-height:1.45;} figure.shot figcaption b{display:block; font-size:13px; color:var(--ink); font-weight:700; margin-bottom:2px; letter-spacing:-.005em;} .gal{display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(min(268px,100%),1fr)); margin:22px 0; align-items:start;} .gal.wide{grid-template-columns:repeat(auto-fill,minmax(min(400px,100%),1fr));} /* Hochformate begrenzen, damit sie die Zeilenhöhe nicht sprengen — ohne Beschnitt */ .gal figure.shot img{max-height:380px; width:auto; max-width:100%; margin:0 auto;} .gal.wide figure.shot img{max-height:460px;} .hero-shot{margin:0 0 20px; border:1.5px solid var(--rule-strong); background:var(--surface); box-shadow:var(--shadow); overflow:hidden;} .hero-shot img{width:100%; height:auto; display:block;} .hero-shot figcaption{padding:12px 18px 14px; font-family:var(--f-display); font-size:13px; color:var(--ink-2); text-transform:none; letter-spacing:0; margin:0;} /* Kartenvorschau: die Fassade wird vollständig eingepasst, nicht auf einen Streifen beschnitten. Einheitliche Boxhöhe auf dunklem Grund hält die drei Karten in Reihe. */ .card figure.mini{margin:0 0 14px; border:1px solid var(--rule); overflow:hidden; line-height:0; background:var(--ink);} .card figure.mini img{display:block; width:100%; height:258px; object-fit:contain; object-position:center;} @media(max-width:900px){.card figure.mini img{height:300px;}} .planlinks{display:grid; gap:8px; grid-template-columns:repeat(auto-fill,minmax(min(210px,100%),1fr)); margin:16px 0 0;} .planlinks a{display:flex; align-items:center; gap:9px; padding:9px 13px; border:1px solid var(--rule); background:var(--surface); text-decoration:none; font-family:var(--f-mono); font-size:11px; color:var(--ink-2); box-shadow:var(--shadow);} .planlinks a:hover{border-color:var(--accent); color:var(--accent);} .planlinks a::before{content:"PDF"; font-size:8.5px; letter-spacing:.1em; padding:2px 5px 1px; border:1px solid var(--accent); color:var(--accent); flex:none;} .dl{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr)); margin:22px 0;} .dl a{display:block; padding:18px 20px 19px; border:1.5px solid var(--rule-strong); background:var(--surface); text-decoration:none; box-shadow:var(--shadow); transition:border-color .15s;} .dl a:hover{border-color:var(--accent);} .dl .fmt{font-family:var(--f-mono); font-size:9.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:8px;} .dl .nm{font-family:var(--f-display); font-weight:700; font-size:15.5px; color:var(--ink); letter-spacing:-.012em; display:block; margin-bottom:5px;} .dl .ds{font-family:var(--f-display); font-size:12.5px; color:var(--ink-2); line-height:1.5; display:block;} .dl .sz{font-family:var(--f-mono); font-size:10px; color:var(--ink-3); display:block; margin-top:8px;} /* ───────────────────────────── Haus-Bänder und Untergalerien */ .hausblock{margin:34px 0 0; border:1.5px solid var(--rule-strong); background:var(--surface); box-shadow:var(--shadow);} .hausband{position:relative; margin:0; line-height:0; background:var(--ink); overflow:hidden;} .card figure.mini{position:relative;} .card figure.mini /* Fassaden werden vollständig gezeigt, nicht beschnitten — Dach und Sockel gehören dazu */ .hausband img{display:block; width:auto; max-width:100%; height:auto; max-height:560px; margin:0 auto;} @media(max-width:700px){.hausband img{max-height:400px;}} .hausband a{display:block; line-height:0;} /* Titel unter dem Bild, damit nichts von der Fassade verdeckt wird */ .hausband .auflage{padding:16px 22px 18px; background:var(--ink); line-height:1.3;} .hausband .hn{display:block; font-family:var(--f-display); font-weight:700; color:#fff; font-size:clamp(20px,3.2vw,30px); letter-spacing:-.026em;} .hausband .hz{display:block; font-family:var(--f-mono); font-size:10px; letter-spacing:.17em; text-transform:uppercase; color:#E8B77A; margin-bottom:7px;} .hausband .hk{display:block; font-family:var(--f-display); font-size:13px; color:rgba(255,255,255,.82); margin-top:6px; max-width:78ch;} .hauskennz{display:flex; flex-wrap:wrap; gap:0; border-bottom:1px solid var(--rule); background:var(--surface-2);} .hauskennz div{flex:1 1 130px; padding:11px 15px 12px; border-right:1px solid var(--rule);} .hauskennz div:last-child{border-right:none;} .hauskennz .k{display:block; font-family:var(--f-mono); font-size:8.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:4px;} .hauskennz .v{display:block; font-family:var(--f-display); font-weight:700; font-size:15px; color:var(--ink); letter-spacing:-.02em; font-variant-numeric:tabular-nums;} details.subgal{border-top:1px solid var(--rule); margin:0;} details.subgal:first-of-type{border-top:none;} details.subgal > summary{padding:13px 18px; display:flex; align-items:baseline; gap:11px; font-family:var(--f-display); font-size:14.5px; font-weight:700; letter-spacing:-.012em; color:var(--ink); cursor:pointer; list-style:none;} details.subgal > summary::-webkit-details-marker{display:none;} details.subgal > summary::after{content:"+"; margin-left:auto; font-family:var(--f-mono); font-size:17px; color:var(--accent); line-height:1; font-weight:400;} details.subgal[open] > summary::after{content:"–";} details.subgal > summary:hover{background:var(--surface-2);} details.subgal[open] > summary{background:var(--surface-2); border-bottom:1px solid var(--rule);} details.subgal .anz{font-family:var(--f-mono); font-size:10.5px; color:var(--ink-3); letter-spacing:.05em;} details.subgal .subbody{padding:2px 18px 18px;} details.subgal .subbody .gal{margin:16px 0 0;} @media print{.gal,.planlinks,.dl{display:none;}} @media print{.hausband,.hauskennz{display:none;}} /* ───────────────────────────── Große Zahlen */ .bignums{display:grid; gap:20px 34px; grid-template-columns:repeat(auto-fit,minmax(min(215px,100%),1fr)); margin:26px 0 8px; padding:26px 0; border-top:1.5px solid var(--rule-strong); border-bottom:1.5px solid var(--rule-strong);} .bignum .n{font-family:var(--f-display); font-weight:700; font-size:clamp(30px,4.4vw,44px); letter-spacing:-.038em; line-height:1; color:var(--accent); font-variant-numeric:tabular-nums; display:block;} .bignum .t{font-family:var(--f-display); font-weight:700; font-size:14px; margin:9px 0 4px; display:block; letter-spacing:-.008em;} .bignum .d{font-family:var(--f-display); font-size:12.5px; color:var(--ink-2); line-height:1.5; display:block;} .bignum .s{font-family:var(--f-mono); font-size:9.5px; color:var(--ink-3); margin-top:7px; display:block;} /* ───────────────────────────── Aufklappbare Details */ details.acc{border:1px solid var(--rule); background:var(--surface); margin:0 0 -1px; box-shadow:none;} details.acc > summary{padding:16px 20px; display:flex; align-items:baseline; gap:14px; font-family:var(--f-display); font-size:16px; font-weight:700; letter-spacing:-.014em; color:var(--ink); text-transform:none; cursor:pointer; list-style:none;} details.acc > summary::-webkit-details-marker{display:none;} details.acc > summary::after{content:"+"; margin-left:auto; font-family:var(--f-mono); font-size:19px; color:var(--accent); line-height:1; font-weight:400;} details.acc[open] > summary::after{content:"–";} details.acc[open] > summary{border-bottom:1px solid var(--rule); background:var(--surface-2);} details.acc > summary:hover{background:var(--surface-2);} details.acc .accnum{font-family:var(--f-mono); font-size:10px; letter-spacing:.13em; color:var(--accent); flex:none;} details.acc .accsub{font-family:var(--f-display); font-size:12.5px; font-weight:400; color:var(--ink-3); margin-left:2px;} @media(max-width:560px){details.acc .accsub{display:none;}} details.acc .accbody{padding:4px 20px 22px;} details.acc .accbody section{margin-top:18px;} details.acc .accbody .sec-head, details.acc .accbody .sec-rule{display:none;} .accwrap{border:1px solid var(--rule); margin:24px 0;} /* ───────────────────────────── Modal */ .zoomable{cursor:zoom-in; position:relative;} .modal{position:fixed; inset:0; z-index:900; background:rgba(18,19,20,.94); display:none; padding:26px; overflow:auto;} .modal[open], .modal.on{display:flex; align-items:center; justify-content:center;} .modal-in{max-width:1400px; width:100%; max-height:100%;} .modal-in img{max-width:100%; max-height:82vh; display:block; margin:0 auto; background:var(--surface);} .modal-in svg{max-width:100%; height:auto; display:block; margin:0 auto; background:var(--surface); padding:22px 18px; border:1px solid rgba(255,255,255,.14);} .modal-cap{font-family:var(--f-display); font-size:13.5px; color:rgba(255,255,255,.88); text-align:center; margin:16px auto 0; max-width:70ch; line-height:1.5;} .modal-cap a{color:#E8A254;} .modal-close{position:fixed; top:16px; right:20px; z-index:901; width:42px; height:42px; border:1px solid rgba(255,255,255,.32); background:rgba(0,0,0,.4); color:#fff; cursor:pointer; font-size:22px; line-height:1; font-family:var(--f-mono);} .modal-close:hover{background:rgba(255,255,255,.14);} @media print{.modal,.modal-close{display:none!important;}} /* ───────────────────────────── Geschichte */ #geschichte{margin-top:14px;} .frage{margin:38px 0 20px; padding-left:22px; border-left:3px solid var(--accent);} .frage p{font-family:var(--f-display); font-weight:700; font-size:clamp(21px,3.1vw,31px); line-height:1.2; letter-spacing:-.026em; color:var(--ink); margin:0; text-wrap:balance; max-width:34ch;} .frage .a{display:block; font-family:var(--f-display); font-weight:400; font-size:clamp(14px,1.9vw,16.5px); line-height:1.62; color:var(--ink-2); margin-top:15px; letter-spacing:0; max-width:62ch;} /* Zeitleiste */ .zeit{list-style:none; padding:0; margin:26px 0 8px; border-top:1px solid var(--rule);} .zeit li{display:grid; grid-template-columns:104px 1fr; gap:0 20px; padding:15px 0 16px; border-bottom:1px solid var(--rule); align-items:baseline;} .zeit .j{font-family:var(--f-mono); font-size:12.5px; letter-spacing:.02em; color:var(--accent); font-weight:400; white-space:nowrap;} .zeit .t{font-family:var(--f-display); font-size:14.5px; line-height:1.55; color:var(--ink); margin:0;} .zeit .t b{font-weight:700;} .zeit .t span{display:block; font-size:12.5px; color:var(--ink-3); margin-top:4px; line-height:1.5;} .zeit li.mark{background:var(--accent-soft); margin:0 -14px; padding-left:14px; padding-right:14px;} .zeit li.mark .t b{color:var(--accent-ink);} @media(max-width:520px){ .zeit li{grid-template-columns:1fr; gap:5px;} .zeit li.mark{margin:0 -10px; padding-left:10px; padding-right:10px;} } /* Brief der Eigentümerfamilie */ .brief{margin:34px 0 10px; padding:30px 32px 26px; border:1.5px solid var(--rule-strong); background:var(--surface-2); box-shadow:var(--shadow);} .brief .lbl{display:block; font-family:var(--f-mono); font-size:9.5px; letter-spacing:.17em; text-transform:uppercase; color:var(--accent); margin-bottom:16px;} .brief p{font-family:var(--f-display); font-size:clamp(15px,2.1vw,17.5px); line-height:1.66; color:var(--ink); margin:0 0 14px; max-width:64ch;} .brief p:last-of-type{margin-bottom:0;} .brief .sig{margin-top:22px; padding-top:16px; border-top:1px solid var(--rule); font-family:var(--f-display); font-size:13px; color:var(--ink-3);} @media(max-width:560px){.brief{padding:22px 20px 20px;}} /* Substanz-Kacheln */ .subst{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); margin:24px 0 6px;} .subst div{border:1px solid var(--rule); background:var(--surface); padding:17px 19px 18px; box-shadow:var(--shadow);} .subst .k{display:block; font-family:var(--f-mono); font-size:9.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-3); margin-bottom:9px;} .subst .h{display:block; font-family:var(--f-display); font-weight:700; font-size:15.5px; letter-spacing:-.012em; color:var(--ink); margin-bottom:6px;} .subst .b{display:block; font-family:var(--f-display); font-size:13px; line-height:1.55; color:var(--ink-2);} /* Mietdauern */ .dauer{list-style:none; padding:0; margin:20px 0 6px; display:grid; gap:11px;} .dauer li{display:grid; grid-template-columns:52px minmax(70px,168px) 1fr; gap:16px; align-items:center; font-family:var(--f-display); font-size:13.5px; color:var(--ink-2);} .dauer .n{font-weight:700; font-size:20px; letter-spacing:-.03em; color:var(--accent); text-align:right; font-variant-numeric:tabular-nums;} .dauer .bar{height:9px; background:var(--surface-2); border:1px solid var(--rule); position:relative;} .dauer .bar i{position:absolute; top:0; bottom:0; left:0; background:var(--accent);} .dauer .t{font-size:13px; color:var(--ink-2); line-height:1.4;} .dauer li.head{font-family:var(--f-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); padding-bottom:3px;} .dauer li.head .n{font-family:var(--f-mono); font-size:9.5px; font-weight:400; letter-spacing:.14em; color:var(--ink-3);} @media(max-width:560px){ .dauer li{grid-template-columns:44px 1fr;} .dauer .bar{display:none;} } /* Belegte Instandsetzung */ .invest{width:100%; border-collapse:collapse; margin:20px 0 6px; font-family:var(--f-display);} .invest th, .invest td{padding:10px 12px; border-bottom:1px solid var(--rule); font-size:13.5px; text-align:right;} .invest th{font-family:var(--f-mono); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); font-weight:400; border-bottom:1.5px solid var(--rule-strong);} .invest th:first-child, .invest td:first-child{text-align:left;} .invest tr:last-child td{font-weight:700; border-top:1.5px solid var(--rule-strong); border-bottom:none; color:var(--accent-ink); background:var(--accent-soft);} .invest td{font-variant-numeric:tabular-nums;} /* ───────────────────────────── Lage */ .lagegrid{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr)); margin:26px 0 8px;} figure.karte{margin:0; border:1.5px solid var(--rule-strong); background:var(--surface); box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column;} figure.karte svg{display:block; width:100%; height:auto; background:#F7F6F2;} figure.karte figcaption{padding:12px 16px 14px; font-family:var(--f-display); font-size:12.5px; color:var(--ink-2); line-height:1.55; flex:1;} figure.karte figcaption b{display:block; color:var(--ink); font-size:13.5px; font-weight:700; margin-bottom:4px; font-variant:normal; letter-spacing:0;} figure.karte .quelle{display:block; font-family:var(--f-mono); font-size:9.5px; color:var(--ink-3); margin-top:8px; line-height:1.5;} figure.karte .quelle a{color:var(--ink-3);} .kartleg{display:flex; flex-wrap:wrap; gap:6px 16px; padding:9px 16px; border-top:1px solid var(--rule); background:var(--surface-2);} .kartleg span{display:flex; align-items:center; gap:6px; font-family:var(--f-mono); font-size:9.5px; color:var(--ink-2); letter-spacing:.03em;} .kartleg i{width:11px; height:11px; flex:none; display:block;} .kartleg i.o{background:var(--accent); border-radius:50%;} .kartleg i.w{background:var(--slate); border-radius:50%;} .kartleg i.t{border:1.6px solid var(--slate); border-radius:50%; background:none;} .kartleg i.c{background:var(--vacant); border-radius:50%; opacity:.4;} .kartleg i.b{background:var(--ink-2);} .entf{width:100%; border-collapse:collapse; margin:18px 0 4px; font-family:var(--f-display);} .entf th, .entf td{padding:9px 12px; border-bottom:1px solid var(--rule); font-size:13px; text-align:right;} .entf th{font-family:var(--f-mono); font-size:9px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); font-weight:400; border-bottom:1.5px solid var(--rule-strong); vertical-align:bottom;} .entf th:first-child, .entf td:first-child{text-align:left;} .entf td{font-variant-numeric:tabular-nums;} .entf tbody tr:hover{background:var(--surface-2);} .entf tr.tr-sum td{border-top:1.5px solid var(--rule-strong); border-bottom:none; font-weight:600;} .qtab{width:100%; border-collapse:collapse; margin:16px 0 6px; font-family:var(--f-display);} .qtab th, .qtab td{padding:8px 12px; border-bottom:1px solid var(--rule); font-size:12.5px; text-align:right;} .qtab th{font-family:var(--f-mono); font-size:9px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); font-weight:400; border-bottom:1.5px solid var(--rule-strong);} .qtab th:first-child, .qtab td:first-child{text-align:left;} .qtab td{font-variant-numeric:tabular-nums;} .qtab tr.uns{background:rgba(193,106,44,.07);} .qtab tr.uns td{font-weight:600; color:var(--accent-ink);} .hinw{font-family:var(--f-mono); font-size:11px; color:var(--ink-3); max-width:76ch; line-height:1.65; margin-top:12px;} /* ═══════════════════════════════════ v2 · Token Farben aus den Vorschaubildern der Vorlage gemessen: der Hellgrund liegt bei #E0F0F0–#F0F0F0 mit leichtem Lavendelstich, das Dunkel bei #101030/#001020. Der Ockerakzent kommt aus der v1 und hält die beiden Fassungen zusammen. */ .v2{ --v2-grund:#EDEFF6; /* kühler Hellgrund, trägt die Karten */ --v2-grund-2:#E4E8F3; /* zweite Stufe für abgesetzte Bänder */ --v2-karte:#FFFFFF; --v2-tinte:#131A38; /* tiefes Marineblau, Text und Flächen */ --v2-tinte-2:#5A6180; --v2-tinte-3:#8B92AB; --v2-linie:#DDE1EE; --v2-akzent:#B5651D; /* Ocker, aus der v1 übernommen */ --v2-akzent-hell:#D98A3C; --v2-dunkel:#0E1430; /* dunkler Abschnitt */ --v2-dunkel-2:#1B2450; --v2-auf-dunkel:#F2F4FB; --v2-auf-dunkel-2:#A3ACCB; --v2-r-gross:34px; /* Kartenradius, in der Vorlage sehr groß */ --v2-r-mittel:22px; --v2-r-klein:14px; --v2-schatten:0 1px 3px rgba(19,26,56,.05), 0 12px 34px rgba(19,26,56,.05); --v2-schatten-tief:0 18px 50px rgba(19,26,56,.14); --v2-f:'PJS',"Plus Jakarta Sans","Avenir Next",Avenir,"Century Gothic", "Segoe UI",system-ui,sans-serif; --v2-f-mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace; --v2-luft:clamp(18px,4vw,30px); /* Innenabstand der Karten */ --v2-spalt:clamp(12px,1.6vw,20px); /* Abstand zwischen Karten */ --v2-band:clamp(44px,7vw,96px); /* senkrechter Abstand der Bänder */ --v2-max:1240px; } /* Grundlagen ───────────────────────────────────────────────────────── */ .v2{background:var(--v2-grund); color:var(--v2-tinte); font-family:var(--v2-f); font-weight:400; -webkit-font-smoothing:antialiased; overflow-x:clip;} .v2 *,.v2 *::before,.v2 *::after{box-sizing:border-box;} /* Die Grid-Falle: ohne min-width:0 wächst ein Rasterkind auf seine Maximalbreite und schiebt das ganze Dokument waagerecht auf. Das ist in diesem Projekt schon einmal passiert (eine Tabelle wurde 1.750 px breit). Deshalb generell entschärfen. */ .v2 .bento > *,.v2 .karte > *{min-width:0;} .v2 img,.v2 svg{max-width:100%;} .v2 table{width:100%; border-collapse:collapse;} .v2 .tw{overflow-x:auto; -webkit-overflow-scrolling:touch;} /* Typoskala ─────────────────────────────────────────────────────────── */ .v2 .h1{font-size:clamp(38px,7.4vw,84px); font-weight:700; line-height:.96; letter-spacing:-.035em; margin:0;} .v2 .h1 i{font-style:italic; font-weight:700;} .v2 .h2{font-size:clamp(28px,4.4vw,52px); font-weight:700; line-height:1.02; letter-spacing:-.03em; margin:0;} .v2 .h3{font-size:clamp(19px,2.2vw,26px); font-weight:700; line-height:1.18; letter-spacing:-.02em; margin:0;} .v2 .lead{font-size:clamp(16px,1.5vw,19px); line-height:1.62; color:var(--v2-tinte-2); margin:0; max-width:62ch;} .v2 p{font-size:15.5px; line-height:1.66; color:var(--v2-tinte-2); margin:0;} .v2 .lab{font-size:11px; font-weight:400; letter-spacing:.04em; color:var(--v2-tinte-3); margin:0 0 4px; text-transform:none;} .v2 .zahl{font-size:clamp(30px,4.6vw,54px); font-weight:700; line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums; margin:0;} .v2 .zahl.ak{color:var(--v2-akzent);} /* In schmalen Karten muss die große Zahl kleiner werden, sonst klemmt das Eurozeichen. */ .v2 .s3 .zahl,.v2 .s4 .zahl{font-size:clamp(26px,2.9vw,36px); letter-spacing:-.025em;} .v2 .zahl-klein{font-size:clamp(22px,2.6vw,32px); font-weight:700; line-height:1.05; letter-spacing:-.025em; font-variant-numeric:tabular-nums; margin:0;} /* Karten und Raster ────────────────────────────────────────────────── */ .v2 .huelle{max-width:var(--v2-max); margin:0 auto; padding:0 clamp(14px,3vw,28px);} .v2 .karte{background:var(--v2-karte); border-radius:var(--v2-r-gross); padding:var(--v2-luft); box-shadow:var(--v2-schatten);} .v2 .karte.flach{box-shadow:none; border:1px solid var(--v2-linie);} .v2 .karte.bild{padding:0; overflow:hidden;} .v2 .karte.bild img{display:block; width:100%; height:100%; object-fit:cover;} .v2 .bento{display:grid; gap:var(--v2-spalt); grid-template-columns:repeat(12,1fr);} /* Alle Spannweiten von 1 bis 12 definieren — eine fehlende Klasse lässt das Kind auf eine Zwölftelspalte zusammenfallen, und die Überschrift läuft aus dem Kasten. */ .v2 .s1{grid-column:span 1} .v2 .s2{grid-column:span 2} .v2 .s3{grid-column:span 3} .v2 .s4{grid-column:span 4} .v2 .s5{grid-column:span 5} .v2 .s6{grid-column:span 6} .v2 .s7{grid-column:span 7} .v2 .s8{grid-column:span 8} .v2 .s9{grid-column:span 9} .v2 .s10{grid-column:span 10} .v2 .s11{grid-column:span 11} .v2 .s12{grid-column:span 12} @media(max-width:900px){ .v2 .s5,.v2 .s6,.v2 .s7,.v2 .s8,.v2 .s9,.v2 .s10,.v2 .s11{grid-column:span 12} .v2 .s3,.v2 .s4{grid-column:span 6} } @media(max-width:520px){ .v2 .s2,.v2 .s3,.v2 .s4{grid-column:span 12} } /* Dunkles Band ─────────────────────────────────────────────────────── */ .v2 .dunkel{background:var(--v2-dunkel); color:var(--v2-auf-dunkel);} .v2 .dunkel p,.v2 .dunkel .lead{color:var(--v2-auf-dunkel-2);} .v2 .dunkel .lab{color:var(--v2-auf-dunkel-2);} .v2 .dunkel .karte{background:var(--v2-dunkel-2); box-shadow:none; color:inherit;} .v2 .dunkel .karte.flach{border-color:rgba(255,255,255,.12); background:transparent;} /* Pillenknopf ──────────────────────────────────────────────────────── */ .v2 .pille{display:inline-flex; align-items:center; gap:8px; background:var(--v2-tinte); color:#fff; font-family:var(--v2-f); font-size:12.5px; font-weight:700; letter-spacing:.01em; padding:13px 24px; border-radius:999px; border:none; text-decoration:none; cursor:pointer; transition:background .15s, transform .15s;} .v2 .pille:hover{background:#25305C; transform:translateY(-1px);} .v2 .pille.ak{background:var(--v2-akzent);} .v2 .pille.ak:hover{background:#8A4C14;} .v2 .pille.leer{background:transparent; color:var(--v2-tinte); box-shadow:inset 0 0 0 1.5px var(--v2-linie);} .v2 .dunkel .pille{background:#fff; color:var(--v2-tinte);} .v2 .dunkel .pille.leer{background:transparent; color:var(--v2-auf-dunkel); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22);} @media(prefers-reduced-motion:reduce){ .v2 .pille,.v2 .pille:hover{transition:none; transform:none;} } @media print{ .v2 .pille,.v2 .v2kopf{display:none!important;} } .calcbar{position:fixed; left:0; right:0; bottom:0; top:auto; z-index:60; background:var(--dunkel); border-top:1px solid rgba(255,255,255,.16); transform:translateY(101%); transition:transform .22s ease; will-change:transform;} .calcbar.on{transform:translateY(0)} .calcbar-in{max-width:var(--breite); margin:0 auto; padding:9px clamp(16px,3vw,28px); display:flex; align-items:center; gap:26px;} .calcbar .cb{display:flex; flex-direction:column; gap:1px; min-width:0} .calcbar .cbk{font-size:8.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--auf-dunkel-2); white-space:nowrap;} .calcbar .cbv{font-weight:700; font-size:17px; color:#fff; white-space:nowrap; font-variant-numeric:tabular-nums;} .calcbar .cbv.acc{color:#E8A254} .calcbar .cbv.neg{color:#F0907E} .calcbar a.cbl{margin-left:auto; flex:none; font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; background:var(--accent); color:#fff; padding:9px 14px 8px; border-radius:999px; text-decoration:none;} @media(max-width:720px){ .calcbar-in{gap:14px; padding:7px 16px} .calcbar .cbv{font-size:14px} .calcbar .cb.opt{display:none} } /* .deck gibt es nur in der Druckfassung, dort ist die Leiste ohnehin aus. */ @media print{.calcbar{display:none!important}} @media(max-width:560px){ /* Die drei Häuser quer statt hoch. Gestapelt kostete jedes Haus rund 700 Pixel Bildschirm, allein für ein Foto mit vier Zeilen Text. */ .haus{flex-direction:row; gap:12px; align-items:stretch} /* Der Bildkasten ist selbst eine .karte — die Selektoren müssen deshalb genauer sein als die Regel für die Textkarte daneben. */ /* Auf dem Handy bleibt das Fassadenbild schmal; eine zweite Aufnahme läuft darunter über die ganze Breite. */ .haus,.haus.zwei{display:flex; flex-direction:row; flex-wrap:wrap} .haus>figure.karte.bild{margin:0!important; flex:0 0 104px; width:104px; aspect-ratio:3/4; align-self:flex-start} /* Die zweite Aufnahme rückt unter das Fassadenbild derselben Karte, nicht über die volle Breite — sonst wirkt sie wie eine eigene Kachel. */ .haus>figure.zweit{order:3; flex:0 0 104px; width:104px; aspect-ratio:4/3; margin:8px 0 0!important} .haus>.karte:last-child{flex:1 1 auto; min-width:0; padding:13px 14px} .haus .lab{margin-bottom:2px} .haus h3{margin:0 0 5px!important; font-size:16px; letter-spacing:-.025em} .haus .klein{font-size:12.5px; line-height:1.5} .haus .klein:last-child{margin-top:8px!important} /* Galerien zweispaltig — 82 Aufnahmen untereinander sind kein Blättern mehr, sondern ein Marathon. */ .gal{grid-template-columns:repeat(2,1fr); gap:10px} .gal.wide{grid-template-columns:1fr} .gal figure.shot img{max-height:220px} .gal figure.shot figcaption{padding:8px 10px 10px; font-size:11px; line-height:1.45} .gal figure.shot figcaption b{font-size:12px} /* Breite Tabellen rollen seitwärts. Der Schatten an der rechten Kante zeigt das an, ohne mit der Tabellenüberschrift zusammenzustoßen. */ .tw{box-shadow:inset -16px 0 14px -14px rgba(20,26,48,.4)} .tw table{font-size:12.5px} .tw th,.tw td{padding:7px 9px} /* Kennzahlen dichter, sie stehen ohnehin untereinander */ .karte{padding:16px 17px} .zahl{margin:2px 0 0} /* Sprungmarken der Langfassung als Liste statt als Textwurst */ .sprung{line-height:2.4} } /* Bis Tablet: zwei Kennzahlen nebeneinander statt drei gequetschten */ @media(min-width:561px) and (max-width:900px){ .haus>figure{aspect-ratio:4/5} }