body,form,figure{margin:0;padding:0}img{border:0}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font-size:100.01%}select,input,textarea{font-size:99%}#container,.inside{position:relative}#main,#left,#right{float:left;position:relative}#main{width:100%}#left{margin-left:-100%}#right{margin-right:-100%}#footer{clear:both}#main .inside{min-height:1px}.ce_gallery>ul,.content-gallery>ul{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li,.content-gallery>ul li{float:left}.ce_gallery>ul li.col_first,.content-gallery>ul li.col_first{clear:left}.float_left,.media--left>figure{float:left}.float_right,.media--right>figure{float:right}.block{overflow:hidden}.media{display:flow-root}.clear,#clear{height:.1px;font-size:.1px;line-height:.1px;clear:both}.invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.custom{display:block}#container:after,.custom:after{content:"";display:table;clear:both} @media (max-width:767px){#wrapper{margin:0;width:auto}#container{padding-left:0;padding-right:0}#main,#left,#right{float:none;width:auto}#left{right:0;margin-left:0}#right{margin-right:0}}img{max-width:100%;height:auto}.audio_container audio{max-width:100%}.video_container video{max-width:100%;height:auto}.aspect,.responsive{position:relative;height:0}.aspect iframe,.responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%}.aspect--16\:9,.responsive.ratio-169{padding-bottom:56.25%}.aspect--16\:10,.responsive.ratio-1610{padding-bottom:62.5%}.aspect--21\:9,.responsive.ratio-219{padding-bottom:42.8571%}.aspect--4\:3,.responsive.ratio-43{padding-bottom:75%}.aspect--3\:2,.responsive.ratio-32{padding-bottom:66.6666%}.aspect--9\:16,.responsive.ratio-916{padding-bottom:177.7777%}.aspect--1\:1,.responsive.ratio-11{padding-bottom:100%} /* ========================================================= app.css fuer Visura Globale Basis-Styles und Brand-Tokens (Platzhalter). Inhaltssprache: Deutsch. Einbindung: NICHT per Template, sondern im Backend ueber Layout > External style sheets (Pfad: files/css/app.css). ========================================================= */ /* ---------- Brand-Tokens (Platzhalter) ---------- TODO: Mit den echten Marken-Tokens befuellen. Es sind bewusst KEINE erfundenen Markenfarben gesetzt, nur neutrale Defaults (Schwarz/Weiss/Grau), die ersetzt werden muessen. */ :root { /* Farben (TODO: durch Brand-Farben ersetzen) */ --color-bg: #ffffff; /* TODO: Hintergrund */ --color-text: #1a1a1a; /* TODO: Textfarbe */ --color-primary: #1a1a1a; /* TODO: Primaer-/Akzentfarbe (kein Brand-Wert) */ --color-muted: #6b7280; /* TODO: gedaempfter Text */ --color-border: #e5e7eb; /* TODO: Linien und Rahmen */ /* Typografie (TODO: durch Brand-Schrift ersetzen) */ --font-base: "Switzer", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-heading: var(--font-base); /* TODO: eigene Headline-Schrift */ /* Layout-Tokens */ --measure: 70ch; --space: 1rem; --radius: 0.25rem; } /* ---------- Minimaler Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-base); /* Typografie 1:1 aus visura.css: Basisschrift skaliert bis 1.075rem (~17.2px). Fehlte im Port -> Body-Text war ueberall auf UA-Default 16px = ~7% zu klein. */ font-weight: 400; font-size: clamp(1rem, .96rem + .2vw, 1.075rem); letter-spacing: -.005em; color: var(--color-text); background-color: var(--color-bg); line-height: 1.6; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); line-height: 1.2; } img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; } a { color: inherit; text-decoration: none; } /* ========================================================= Design-Basis (einmalig, 1:1 aus visura.css uebernommen) Tokens, .wrap und Reveal-Utilities. Werden von ALLEN RSCE- Elementen genutzt. Bei weiteren Elementen NICHT erneut anhaengen. Hinweis: Paper-Hintergrund (globaler Body-Bg) ist noch nicht gesetzt, das ist ein separater Foundation-Schritt. ========================================================= */ /* Switzer (Variable Font, 1:1 aus visura.css). Datei liegt unter files/fonts/ und wird ueber /files/fonts/ ausgeliefert (public/files-Symlink noetig). */ @font-face { font-family: "Switzer"; src: url("/files/fonts/Switzer-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } :root { --paper: oklch(0.987 0.0015 75); --paper-2: oklch(0.957 0.0028 75); --paper-3: oklch(0.93 0.004 75); --ink: oklch(0.18 0.004 75); --ink-soft: oklch(0.46 0.005 75); --ink-faint: oklch(0.64 0.006 75); --on-ink: oklch(0.965 0.002 75); --ink-2: oklch(0.34 0.006 75); --dark: oklch(0.145 0.005 75); --pad-x: clamp(1.75rem, 7vw, 8rem); --sec: clamp(6rem, 13vw, 13rem); --maxw: 1320px; --navh: clamp(78px, 9vh, 108px); --gap: clamp(18px, 2.4vw, 38px); --ease: cubic-bezier(.22, .7, .16, 1); } .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad-x)} /* Heading-Basis 1:1 aus visura.css (Z.35). Ohne explizites font-weight defaulten Ueberschriften auf bold (700); visura nutzt 500. Plus line-height/tracking/balance. Element-Regeln (.page-hero h1 usw.) ueberschreiben das bei Bedarf. */ h1,h2,h3,h4{font-weight:500;line-height:1;letter-spacing:-.035em;text-wrap:balance} /* Fliesstext-Umbruch 1:1 aus visura.css (Z.36). Verhindert einzelne Waisen (letztes Wort allein in der letzten Zeile) und verbessert den Zeilenumbruch; fehlte im Port -> Absaetze (z.B. Leistungs-Cards) brachen anders um als in der Vorlage. */ p{text-wrap:pretty} /* Reveal-Animation (Fade-in beim Scrollen). Greift nur, wenn das Dokument die Klasse .js traegt und visura.js den IntersectionObserver setzt (Klasse .in). Ist beides nicht portiert, bleiben Inhalte sichtbar (kein .js -> .js .rv inaktiv). */ .rv{transition:opacity 1s var(--ease),transform 1.15s var(--ease)} .js .rv{opacity:0;transform:translateY(10px)} .rv.in{opacity:1;transform:none} .rv.d1{transition-delay:.09s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.32s}.rv.d4{transition-delay:.44s} @media(prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}} /* === rsce_hero_subpage === */ .page-hero{padding-top:clamp(3.5rem,8vw,7rem);padding-bottom:clamp(2.5rem,5vw,4.5rem)} /* .breadcrumb: Werte aus visura.css Z.92 + Group-Reset Z.627 zusammengefuehrt. font-size/letter-spacing stammen aus dem spaeteren Group-Reset (.875rem/.05em) und gewinnen im Cascade. */ .breadcrumb{display:flex;gap:.6em;font-weight:300;color:var(--ink-faint);margin-bottom:clamp(1.6rem,3vw,2.4rem);text-transform:none;letter-spacing:.05em;font-size:.875rem} .breadcrumb a{font-weight:300;color:var(--ink-soft)} .breadcrumb a:hover{color:var(--ink)} .breadcrumb span{color:var(--ink-2)} .breadcrumb .cur{font-weight:700;color:var(--ink)} .page-hero h1{font-size:clamp(2.6rem,6vw,5rem);font-weight:500;letter-spacing:-.04em;line-height:1;max-width:18ch} .page-hero .lead{color:var(--ink-soft);font-size:clamp(1.15rem,1.6vw,1.5rem);line-height:1.45;max-width:54ch;margin-top:clamp(1.4rem,2.5vw,2rem)} /* Stellen-Hero (rsce_hero_stelle, erkennbar an der Eckdaten-Liste .ekv): der lange Stellentitel "Immobilienmakler:in (m/w/d)" ist breiter als 18ch und bricht mit dem Default-Cap zweizeilig. Soll ist einzeilig, darum den Cap hier aufheben. Greift nur auf den Stellen-Hero (Subpage-Heros ohne .ekv behalten den 18ch-Cap). */ .page-hero:has(.ekv) h1{max-width:none} .page-img{margin-top:clamp(2.5rem,5vw,4rem);width:75vw;margin-left:calc(50% - 37.5vw);margin-right:calc(50% - 37.5vw)} /* contao_figure umschliesst das Bild mit
; ohne Reset greift der UA-Default margin:1em 40px (vertikaler Abstand + 40px seitlicher Einzug). 1:1 hat die Quelle ein nacktes ohne Margin. Gilt auch fuer .page-img in rsce_marg. */ .page-img figure{margin:0} .page-img img{width:100%;height:clamp(400px,74vh,880px);object-fit:cover} @media(max-width:860px){.page-img{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}} /* Leistungs-Unterseite (Checkbox "Leistungs-Unterseite" im Element -> .page-hero--leistung). Variante des Seitenkopfs fuer Verkaufen/Vermieten/Grundstueck: - Ueberschrift ohne 18ch-Cap und Lead breiter -> weniger Umbrueche (2 statt 3 Zeilen). Das Hero-Bild bleedet wie auf allen Unterseiten (Basis-.page-img, 75vw) - 1:1 wie die Referenz (verkaufen.html nutzt .page-hero ohne Modifier). KEIN Bild-Override hier. */ .page-hero--leistung h1{max-width:none} .page-hero--leistung .lead{max-width:72ch} /* === /rsce_hero_subpage === */ /* === rsce_cta === */ /* CTA-Band 1:1 aus visura.css. .btn/.lnk/.bleed sind global (visura.css), liegen hier weil dieses Element sie zuerst braucht; bei weiteren Elementen mit denselben Buttons NICHT erneut anhaengen. Tokens stammen aus dem Foundation-Block oben. */ .bleed{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)} .btn{display:inline-flex;align-items:center;gap:.7em;font-size:.78rem;font-weight:600;letter-spacing:.16em;padding:1.1em 1.8em;background:var(--ink);color:var(--on-ink);border:none;border-radius:0;cursor:pointer;font-family:inherit;transition:background .3s var(--ease)} .btn:hover{background:oklch(0.26 0.006 75)} .btn .ar{transition:transform .35s var(--ease)} .btn:hover .ar{transform:translateX(.22em)} .btn.light{background:var(--on-ink);color:var(--ink)} .btn.light:hover{background:#fff} .lnk{display:inline-flex;align-items:center;gap:.55em;font-size:.78rem;font-weight:600;letter-spacing:.16em;color:var(--ink)} .lnk .ar{transition:transform .4s var(--ease)} .lnk:hover .ar{transform:translateX(.2em)} .lnk.light{color:var(--on-ink)} .cta-band{background:var(--dark);color:var(--on-ink);text-align:center;padding:clamp(4.5rem,9vw,8rem) clamp(2rem,5vw,5rem)} .cta-band h2{font-size:clamp(2.2rem,5vw,4rem);font-weight:500;letter-spacing:-.04em;max-width:20ch;margin:0 auto} .cta-band p{color:oklch(0.82 0.006 75);max-width:50ch;margin:1.6rem auto 0;font-size:1.1rem;line-height:1.6} .cta-band .acts{display:flex;gap:24px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:clamp(2.4rem,4vw,3rem)} .cta-band :focus-visible{outline-color:var(--on-ink)} /* === /rsce_cta === */ /* === footer === */ /* Footer als Custom-HTML-Element (kein RSCE). Markup/Werte 1:1 aus visura.css. .g12/.tnum sind generische Utilities (visura.css), liegen hier weil der Footer sie zuerst braucht; bei weiteren Elementen NICHT erneut anhaengen. Tokens und .wrap stammen aus dem Foundation-Block oben. */ .g12{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)} .tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"} /* Reset analog zum globalen *{margin:0;padding:0} aus visura.css. WICHTIG: nur auf die Grid-Inhalte (.foot *) beschraenken, NICHT footer.site * - sonst wuerde der Reset den .wrap-Container (margin-inline:auto, padding-inline) ueberschreiben und die Zentrierung killen. */ .foot *{margin:0;padding:0} footer.site{background:var(--paper-2);padding-block:clamp(5rem,9vw,8rem) clamp(2.8rem,4vw,3.4rem)} /* Zentriert den Footer-Inhalt analog .wrap, falls das Markup keinen .wrap-Container hat (>: greift nur, wenn .foot direkter Kind von footer.site ist; mit .wrap zentriert .wrap). */ footer.site > .foot{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad-x)} .foot{align-items:start;row-gap:clamp(2.5rem,5vw,3.5rem)} .foot .brand-cell{grid-column:1 / span 5} .foot .brand-cell .brand-logo{height:clamp(28px,5.2vw,42px);width:auto;max-width:100%;margin-bottom:clamp(1rem,2vw,1.5rem)} .foot .b1{font-weight:600;font-size:clamp(2.2rem,5vw,3.4rem);letter-spacing:.18em;display:block} .foot .tag{color:var(--ink-soft);max-width:34ch;margin-top:1.3rem;font-size:.95rem} .foot .col{grid-column:span 2} .foot .col:nth-of-type(2){grid-column:7 / span 2} .foot .col:nth-of-type(3){grid-column:9 / span 2} .foot .col:nth-of-type(4){grid-column:11 / span 2} /* .foot h3: Werte aus visura.css Z.321 + Group-Reset Z.624 zusammengefuehrt (.875rem/.05em/text-transform:none gewinnen im Cascade) */ .foot h3{font-size:.875rem;font-weight:600;letter-spacing:.05em;text-transform:none;color:var(--ink-soft);margin-bottom:1.3rem} .foot ul{list-style:none;display:flex;flex-direction:column;gap:.75rem;font-size:.94rem;color:var(--ink-soft)} .foot a:hover{color:var(--ink)} .foot-base{grid-column:1 / -1;display:flex;justify-content:space-between;margin-top:clamp(3.5rem,7vw,5.5rem);font-size:.82rem;color:var(--ink-soft);flex-wrap:wrap;gap:12px} @media(max-width:860px){ .foot .brand-cell{grid-column:1 / -1} .foot .col,.foot .col:nth-of-type(2),.foot .col:nth-of-type(3),.foot .col:nth-of-type(4){grid-column:span 4} } @media(max-width:560px){ .foot .col,.foot .col:nth-of-type(2),.foot .col:nth-of-type(3),.foot .col:nth-of-type(4){grid-column:span 6} } /* === /footer === */ /* === rsce_leistungs_cards === */ /* Leistungs-Cards 1:1 aus visura.css (.split / .srv-block / .srv-points). margin/padding werden hier lokal genullt, weil app.css keinen globalen *{margin:0;padding:0}-Reset hat (visura.css Z.27). */ /* Global: verhindert horizontalen Scrollbalken durch Bleed-Elemente (visura.css body, Z.33). Wird auch von .cta-band.bleed benoetigt. clip statt hidden: klippt horizontal identisch, erzeugt aber KEINEN Scroll-Container -> position:sticky (z.B. rsce_galerie .sc-cap) bleibt funktionsfaehig. hidden wuerde den body zum Scrollport machen und das Sticky brechen. */ body{overflow-x:clip} /* Vertikalabstand der Card-Sektionen. In visura.css via section{padding-block:var(--sec)} plus inline padding-top:0; hier scoped auf .srv-sec statt globalem section-Reset. */ .srv-sec{padding-bottom:var(--sec)} .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,5vw,5.5rem);align-items:center} .split + .split{margin-top:clamp(4rem,8vw,7rem)} .split .txt h2{font-size:clamp(1.8rem,3.4vw,2.8rem);margin:0 0 1.2rem} .split .txt p{color:var(--ink-soft);font-size:1.08rem;line-height:1.6;margin:0} .split .txt p + p{margin-top:1rem} .split .txt .lnk{margin-top:2rem} .split .img{overflow:hidden} .split .img figure{margin:0} .split .img img{width:100%;height:clamp(360px,54vh,620px);object-fit:cover} .split.rev .txt{order:2} /* Bild klebt an der aeusseren Viewport-Kante (visura.css Z.648-650): normale Card Bild rechts -> rechts bleed, .rev Card Bild links -> links bleed. */ .srv-block .img{margin-right:calc(50% - 50vw)} .srv-block.rev .img{margin-left:calc(50% - 50vw);margin-right:0} .srv-points{list-style:none;margin:1.5rem 0 2rem;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.75rem 1.6rem} .srv-points li{position:relative;padding-left:1.3em;color:var(--ink-soft);font-size:1rem;line-height:1.4} .srv-points li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--ink)} /* Bullet-Points einzeln einblenden, sobald die Liste in den Viewport scrollt (.in setzt app.js). 1:1 aus visura.css Z.639-644. Ohne .js sofort sichtbar. */ .js .srv-points li{opacity:0;transform:translateY(8px);transition:opacity .8s var(--ease),transform .95s var(--ease)} .srv-points.in li{opacity:1;transform:none} .srv-points.in li:nth-child(2){transition-delay:.08s} .srv-points.in li:nth-child(3){transition-delay:.16s} .srv-points.in li:nth-child(4){transition-delay:.24s} .srv-points.in li:nth-child(5){transition-delay:.32s} /* Bild-Hover: langsames Zoomen beim Hover ueber die Card */ .srv-block .img img{transition:transform 1.5s var(--ease)} .srv-block:hover .img img{transform:scale(1.03)} @media(max-width:860px){.split{grid-template-columns:1fr}.split.rev .txt{order:0}.split .img{margin-top:2.2rem}.srv-block .img,.srv-block.rev .img{margin-left:0;margin-right:0}} @media(max-width:560px){.srv-points{grid-template-columns:1fr}} /* === /rsce_leistungs_cards === */ /* === rsce_steps === */ /* Vertikalabstand nur unten (Original hatte padding-top:0). Scoped auf .steps-sec statt globalem section-Reset, konsistent mit .srv-sec. */ .steps-sec{padding-bottom:var(--sec)} .head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:clamp(3rem,6vw,5rem)} /* margin:0 weil app.css keinen globalen *{margin:0}-Reset hat (Original visura.css schon). Ohne ihn schiebt der UA-Default-margin der

(~.83em) die Notiz rechts bei align-items:flex-end ~45px nach unten -> Notiz steht nicht mehr auf Hoehe der Ueberschrift. */ .head h2{font-size:clamp(1.9rem,4.4vw,3.4rem);font-weight:500;letter-spacing:-.035em;max-width:18ch;margin:0} .head .note{text-align:right;color:var(--ink-soft);font-size:.95rem;max-width:32ch} .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(2rem,3vw,3.2rem)} .step h3{font-size:clamp(1.3rem,1.9vw,1.65rem);margin-bottom:.7rem} .step p{color:var(--ink-soft);font-size:1rem;line-height:1.5} /* Reveal der Steps (inert ohne visura.js: ohne .js bleibt alles sichtbar) */ .steps .step.rv{opacity:1;transform:none;transition:none} .js .steps .step h3,.js .steps .step p{opacity:0;transform:translateY(8px);transition:opacity .8s var(--ease),transform .95s var(--ease)} .steps .step p{transition-delay:.14s} .steps .step.in h3,.steps .step.in p{opacity:1;transform:none} .steps .step.d1 h3{transition-delay:.09s}.steps .step.d1 p{transition-delay:.23s} .steps .step.d2 h3{transition-delay:.2s}.steps .step.d2 p{transition-delay:.34s} .steps .step.d3 h3{transition-delay:.32s}.steps .step.d3 p{transition-delay:.46s} @media(prefers-reduced-motion:reduce){.js .steps .step h3,.js .steps .step p{opacity:1;transform:none;transition:none}} .steps.flow{display:flex;flex-direction:column} .steps.flow .step{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(1.5rem,5vw,5rem);align-items:baseline;padding-block:clamp(1.6rem,3vw,2.6rem)} .steps.flow .step h3{font-size:clamp(1.6rem,2.8vw,2.4rem);margin-bottom:0} .steps.flow .step p{font-size:1.05rem;max-width:46ch} @media(max-width:680px){.steps.flow .step{grid-template-columns:1fr;gap:.55rem}} @media(max-width:860px){.head{flex-direction:column;align-items:flex-start;gap:14px}.head .note{text-align:left}} /* === /rsce_steps === */ /* === rsce_trust_band === */ /* Hellgraues Kennzahlen-Band, volle Breite (.bleed). Markup/CSS aus visura-html-website (.trust / .stats / .stat). Kollaps-Modell wie im Original (dort section{padding-block} + inline padding-top:0): nur padding-bottom, den oberen Abstand liefert der Vorgaenger. padding-block verdoppelte die Luecke (Steps->Trust = 2x --sec). .rv-Reveal-Infrastruktur ist oben in app.css definiert. */ .trust-sec{padding-bottom:var(--sec)} .trust{background:var(--paper-2);padding-block:clamp(2.6rem,5vw,4rem)} .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2rem,4vw,4rem)} .stat .v{font-size:clamp(2.2rem,4vw,3.4rem);font-weight:500;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1} .stat .k{color:var(--ink-soft);font-size:.95rem;margin-top:.7rem;line-height:1.45} @media(max-width:680px){.stats{grid-template-columns:1fr}} /* === /rsce_trust_band === */ /* === rsce_offene_stellen === */ /* Offene-Stellen-Sektion 1:1 aus karriere.html. .head / .head h2 / .head-Breakpoint werden bereits von rsce_steps definiert und hier mitbenutzt (nicht doppeln). Werte, die in der Quelle vom *{margin:0}-Reset bzw. den globalen body/h-Defaults kommen (font-weight 500, Body-Schriftgroesse), sind lokal gesetzt. */ /* Vertikalabstand beider Sektionen (Quelle: section{padding-block:var(--sec)} + inline padding-top:0). */ .stellen-sec{padding-bottom:var(--sec)} .jobs a{display:grid;grid-template-columns:1fr auto;gap:1.5rem;align-items:start;padding:clamp(1.8rem,3vw,2.8rem) clamp(.8rem,1.5vw,1.4rem)} .jobs h3{font-size:clamp(1.5rem,2.8vw,2.3rem);font-weight:500;line-height:1;letter-spacing:-.035em;margin:0} .jobs .chips{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem} .jobs .chips span{font-size:.875rem;letter-spacing:.02em;color:var(--ink-soft);background:var(--paper-2);padding:.45em .9em} .jobs .desc{color:var(--ink-soft);font-size:1rem;margin-top:1rem;max-width:58ch;line-height:1.5} .jobs .ar{font-size:1.3rem;opacity:0;transform:translateX(-6px);transition:.45s var(--ease);align-self:center} .jobs a:hover .ar{opacity:1;transform:none} /* Abschlusstext: in der Quelle

mit Body-Defaults (Groesse/Zeilenhoehe/Farbe). */ .prose{max-width:64ch;font-size:clamp(1rem,.96rem + .2vw,1.075rem);line-height:1.6;color:var(--ink)} .prose>*+*{margin-top:1.2em} /* === /rsce_offene_stellen === */ /* === rsce_stelle_punkte === */ /* Aufgaben-/Profil-Sektion der Stellen-Detailseite. Markup nutzt .head + .srv-points (bereits von rsce_steps bzw. rsce_leistungs_cards definiert, nicht doppeln). Hier nur der Vertikalabstand (Quelle: section{padding-block:var(--sec)} + inline padding-top:0). */ .punkte-sec{padding-bottom:var(--sec)} /* === /rsce_stelle_punkte === */ /* === rsce_showcase === */ /* Grossflaechiges Bild mit Text-Overlay unten. Markup/CSS 1:1 aus visura-html-website (.showcase / .cap / .claim / .w75). Im Original hatte die Section padding:0; der weisse Abstand oben/unten kam von den Nachbar-Sektionen (je var(--sec)). Hier liefert .showcase-sec diesen Abstand selbst, .showcase bleibt Positionierungs-Kontext fuer die absolute .cap. .bleed (volle Breite) ist oben in app.css definiert. .showcase figure{margin:0} neutralisiert den contao_figure-Wrapper. Tokens (--pad-x, --on-ink, --sec) aus dem Foundation-Block. */ .showcase-sec{padding-block:var(--sec)} /* Abstand unten optional abschaltbar: RSCE-Checkbox "Abstand unten entfernen" setzt .flush-b -> die Sektion schliesst buendig an das folgende Element an. */ .showcase-sec.flush-b{padding-bottom:0} .showcase{position:relative;isolation:isolate} .showcase figure{margin:0} .showcase img{width:100%;height:clamp(440px,72vh,860px);object-fit:cover} .showcase .cap{position:absolute;inset:auto 0 0 0;padding:clamp(2.5rem,6vw,5rem) var(--pad-x);text-align:center;color:var(--on-ink);background:linear-gradient(to top,oklch(0.145 0.005 75/.7),transparent)} .showcase .cap .claim{font-size:clamp(1.8rem,4vw,3.4rem);font-weight:500;letter-spacing:-.035em;line-height:1.05} .w75{width:75vw;margin-inline:auto} @media(max-width:860px){.w75{width:100vw}} /* === /rsce_showcase === */ /* === rsce_text_bild === */ /* Einfache Text/Bild-Sektion. .split / .split .txt / .split .img werden bereits vom Leistungs-Block definiert und hier mitbenutzt (plain .split = KEIN srv-block, also kein Bild-Bleed und kein Hover-Zoom). h2-Gewicht/Tracking kommen aus der globalen Heading-Basis. Hier nur der Sektions-Abstand. */ .split-sec{padding-bottom:var(--sec)} /* === /rsce_text_bild === */ /* === rsce_verlass === */ /* "Worauf Sie sich verlassen": Punkte links (Titel + Text), Bild rechts. Markup/CSS 1:1 aus visura-html-website/eigentuemer.html (.verlass). .head / .head h2 sind bereits von rsce_steps definiert (nicht doppeln). Kollaps-Modell wie bei .trust-sec/.faq-sec (Original: Section inline padding-top:0): nur padding-bottom, den oberen Abstand liefert der Vorgaenger (.marg-sec). padding-block verdoppelte die Luecke marg->verlass (2x var(--sec)). .verlass .v-img figure{margin:0} neutralisiert den contao_figure-Wrapper. */ .verlass-sec{padding-bottom:var(--sec)} /* app.css hat keinen globalen *{margin:0}-Reset (visura.css Z.27), darum h3/p hier explizit margin:0, sonst blaehen UA-Default-Margins die Liste auf (Punkte zu weit auseinander, Bild wirkt nicht buendig). .head h2 ohne max-width-Cap, damit die Ueberschrift einzeilig bleibt (Default .head h2{max-width:18ch} bricht hier um). */ .verlass-sec .head h2{max-width:none;margin:0} .verlass{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,5vw,5.5rem);align-items:center} .verlass .v-list .it{padding-block:clamp(.9rem,2vw,1.5rem)} .verlass .v-list .it h3{font-size:clamp(1.3rem,2vw,1.7rem);font-weight:500;letter-spacing:-.01em;margin:0 0 .5rem} .verlass .v-list .it p{color:var(--ink-soft);max-width:40ch;line-height:1.5;margin:0} .verlass .v-img{margin:0;overflow:hidden} .verlass .v-img figure{margin:0} .verlass .v-img img{width:100%;height:clamp(440px,58vh,660px);object-fit:cover;transition:transform 1.5s var(--ease)} .verlass:hover .v-img img{transform:scale(1.03)} @media(max-width:760px){.verlass{grid-template-columns:1fr;gap:2rem}} /* === /rsce_verlass === */ /* === header/nav === */ /* Header/Navigation 1:1 aus visura.css: sticky Header (header.site), .nav-Leiste, Brand-Logo, Desktop-Menue (nav.menu) und Kontakt-CTA (.nav-cta). Tokens (--navh/--maxw/--pad-x/--paper/--ink.../--ease) und .wrap stammen aus dem Foundation-Block oben. Der