/* ========================================================================== OrdiRaum · gemeinsame Gestaltung aller Seiten Stand 28.09.2026 · nach dem OrdiLife-Design-System, eigene Farbwelt Blau Aufbau 1 Marke Schrift, Farben, Abstände (plus alte Namen für ordiraum-fotos.js/-miete.js) 2 Grundlagen Reset, Text, Links, Fokus 3 Rahmen Beta-Zeile, Kopfzeile mit Handy-Menü, Fußzeile 4 Bausteine Knöpfe, Eyebrow, Band, Toast 5 Textseiten Über uns, Preise, AGB, Impressum, Datenschutz Regeln · Schrift Jost (lokal, kein Google Fonts), Titel dünn (300), Hervorhebung fett (600) · OrdiRaum-Blau statt Salbei; Salbei/OrdiLife nur beim Hinweis auf die Dachmarke · keine Schatten, keine Verläufe, keine runden Ecken – einzige Rundung ist der Türbogen · Klassen- und ID-Namen, auf die das JavaScript zugreift, nicht umbenennen ========================================================================== */ /* 1 · MARKE ================================================================= */ @font-face{font-family:'Jost';src:url('fonts/jost-variable.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;} :root{ /* Grund und Linien */ --paper:#F4F6F7; /* Seitengrund */ --white:#FFFFFF; /* Karten */ --mist:#E5ECF0; /* ruhige Flächen, Abschnitte */ --tint:#ECF1F4; /* leichte Hinterlegung */ --line:#D2DDE3; /* Rahmen und Trennlinien */ --line-strong:#B4C4CE; /* Text */ --ink:#1D2830; --muted:#52626D; /* Nebentext, 5,8:1 auf Papier */ --faint:#8B9AA4; /* nur Schmuck */ /* OrdiRaum-Blau */ --blau:#557C93; /* Band, Flächen */ --blau-deep:#4A6D81; /* Knöpfe, Beschriftungen, Einstieg (Weiß darauf 5,5:1) */ --blau-dark:#2F4757; /* Fußzeile, Beta-Zeile, Betonung (Weiß darauf 9,7:1) */ --blau-light:#A8BDCA; /* Unterstreichungen */ --rot:#B03A2E; /* gemerkt (Herz) */ /* Schrift */ --font:'Jost',-apple-system,'Helvetica Neue',Arial,sans-serif; --text:17px; --caps:13px; --track:.2em; --lh:1.6; /* Abstände */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --w-page:1180px; --gutter:28px; --bogen:999px 999px 0 0; --stroke:1.5px; --t:.2s ease; /* Alte Namen: ordiraum-fotos.js und ordiraum-miete.js greifen darauf zu */ --teal:var(--blau-deep); --teal-deep:var(--blau-dark); --teal-tint:var(--tint); --amber:var(--blau); --amber-soft:var(--mist); --amber-deep:var(--blau-dark); --ink-soft:var(--muted); --paper-2:var(--white); /* … und die des Anbieter-/Admin-Bereichs und der Vorschau (Relaunch Schritt 5) */ --blue:var(--blau); --blue-soft:var(--mist); --blue-deep:var(--blau-dark); --err:#8E2A22; --ok:#2B5E3C; --shadow:none; --shadow-lg:none; } /* 2 · GRUNDLAGEN ============================================================ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;} body{font-family:var(--font);font-weight:400;font-size:var(--text);line-height:var(--lh);background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;min-width:320px;min-height:100vh;} img{max-width:100%;} a{color:inherit;} button,select,input,textarea{font-family:inherit;} :focus-visible{outline:2px solid var(--blau-deep);outline-offset:3px;} ::selection{background:var(--blau-light);color:var(--ink);} h1,h2,h3,h4{font-weight:300;line-height:1.15;text-wrap:balance;} h1 em,h2 em{font-style:normal;font-weight:600;} .wrap{max-width:var(--w-page);margin:0 auto;padding:0 var(--gutter);} .serif{font-weight:300;} [hidden]{display:none!important;} /* z. B. Passwort-neu: Abschnitte per hidden ein-/ausblenden */ /* 3 · RAHMEN ================================================================ */ .beta-strip{background:var(--blau-dark);color:#fff;text-align:center;font-size:13.5px;letter-spacing:.05em;padding:7px 14px;line-height:1.4;} .beta-strip b{font-weight:600;letter-spacing:.2em;margin-right:8px;} /* Dachmarke: „Ein Angebot von OrdiLife“ – wird zum Link, sobald die OrdiLife-Seiten online sind */ .beta-strip .ol-name{letter-spacing:.14em;text-transform:uppercase;font-weight:300;color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.45);text-underline-offset:3px;} .beta-strip .ol-name:hover{text-decoration-color:#fff;} .beta-strip .ol-name b{letter-spacing:.14em;margin:0;} @media(max-width:600px){.beta-strip .bs-lang{display:none;}} header{position:sticky;top:0;z-index:40;background:rgba(244,246,247,.95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line);} .nav{display:flex;align-items:center;justify-content:space-between;gap:16px;height:76px;} /* Logo: ORDI fett, RAUM dünn, Unterzeile auf Namensbreite gesperrt (Schrift Jost, als SVG-Text) */ .brand{display:flex;align-items:center;color:var(--blau-deep);text-decoration:none;cursor:pointer;flex:none;} .logo-raum{display:block;width:250px;height:auto;} .nav-links{display:flex;gap:4px;align-items:center;} .nav-links a{display:block;color:var(--muted);text-decoration:none;font-size:15.5px;letter-spacing:.04em;white-space:nowrap;padding:9px 12px;cursor:pointer;transition:color var(--t);} .nav-links a:hover{color:var(--blau-dark);} .nav-primary{display:flex;gap:4px;align-items:center;} .nav-links a.nav-pill{color:var(--ink);font-weight:500;} .nav-links a.nav-pill:hover{color:var(--blau-deep);} .nav-sep{width:1px;height:26px;background:var(--line);flex:none;margin:0 8px;} .nav-account{display:flex;align-items:center;gap:4px;} .nav-user{color:var(--ink);font-size:15px;font-weight:600;white-space:nowrap;padding:0 8px;} .nav-badge{display:inline-block;min-width:18px;height:18px;line-height:18px;text-align:center;background:var(--blau-deep);color:#fff;font-size:11px;font-weight:600;padding:0 5px;margin-left:5px;vertical-align:1px;} .nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:6px;color:var(--ink);width:44px;height:44px;align-items:center;justify-content:center;flex:none;} .nav-toggle svg{width:24px;height:24px;} @media(max-width:1024px){ .nav-toggle{display:flex;} .nav-links{display:none;position:absolute;top:76px;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0;padding:8px var(--gutter) 22px;max-height:calc(100vh - 76px);overflow-y:auto;} .nav-links.open{display:flex;} .nav-primary{flex-direction:column;align-items:stretch;gap:0;} .nav-links a,.nav-links a.nav-pill{padding:14px 0;font-size:18px;border-bottom:1px solid var(--line);} .nav-sep{display:none;} .nav-account{flex-direction:column;align-items:stretch;gap:0;} .nav-user{padding:14px 0 0;font-size:15px;color:var(--muted);} .nav-account .btn-ghost{align-self:flex-start;margin-top:16px;} } @media(max-width:600px){ :root{--gutter:16px;} .nav{height:68px;} .nav-links{top:68px;max-height:calc(100vh - 68px);} .logo-raum{width:min(220px,calc(100vw - 96px));} } /* Fußzeile: oben die OrdiLife-Familie, unten eine schmale Zeile mit den Pflichtseiten */ footer.fuss{background:var(--blau-dark);color:#fff;padding:var(--s7) 0 var(--s5);font-size:15px;} .fuss-inner{display:flex;flex-direction:column;gap:var(--s6);} /* OrdiLife-Logo und „Alle Angebote“ führen zur OrdiLife-Startseite auf clarahaffner.at */ .familie-logo{display:block;line-height:0;} .familie-alle{margin-left:auto;color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.45);text-underline-offset:4px;} .familie-alle:hover{text-decoration-color:#fff;} .familie-titel{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s4);margin:0 0 var(--s5);font-size:var(--caps);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.75);} .familie-titel img{width:140px;height:auto;display:block;} .familie-liste{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s4);} .familie-liste li{font-size:15px;font-weight:300;letter-spacing:.14em;color:rgba(255,255,255,.88);} .familie-liste li > a{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:center;color:inherit;text-decoration:none;} .familie-liste li > a:hover .fam-name,.familie-liste li > a:focus-visible .fam-name{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;} .familie-liste li > a:hover .mini-tuer{border-color:#fff;} .fuss :focus-visible{outline-color:#fff;} .familie-liste .mini-tuer{grid-row:1 / span 2;display:block;width:22px;height:28px;border:1.5px solid rgba(255,255,255,.65);border-bottom:0;border-radius:var(--bogen);} .familie-liste .fam-name{white-space:nowrap;line-height:1.3;} .familie-liste li b{font-weight:600;} .familie-liste small{font-size:13.5px;letter-spacing:.02em;color:rgba(255,255,255,.65);line-height:1.35;} .familie-liste li.hier{color:#fff;} .familie-liste li.hier .mini-tuer{background:#fff;border-color:#fff;} .familie-liste li.hier small{color:#fff;} .fuss-unten{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s3) var(--s5);border-top:1px solid rgba(255,255,255,.2);padding-top:var(--s4);} .fuss-links{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s5);} .fuss-links a{color:rgba(255,255,255,.84);text-decoration:none;} .fuss-links a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px;} .fuss-unten p{font-weight:300;color:rgba(255,255,255,.65);font-size:14px;} @media(max-width:900px){.familie-liste{grid-template-columns:minmax(0,1fr);gap:var(--s3);}} /* 4 · BAUSTEINE ============================================================= */ .eyebrow,.step-eyebrow{display:inline-block;font-size:var(--caps);font-weight:500;letter-spacing:var(--track);text-transform:uppercase;color:var(--blau-deep);line-height:1.5;} /* Knöpfe: eckig, gesperrte Versalien */ .btn-primary,.btn-light,.btn-ghost,.changebtn,.btn-sec{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:11px 24px;font-family:var(--font);font-size:var(--caps);font-weight:500;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;line-height:1.3;border:var(--stroke) solid var(--blau-deep);border-radius:0;cursor:pointer;transition:background var(--t),color var(--t),border-color var(--t);text-align:center;} .btn-primary{background:var(--blau-deep);color:#fff;} .btn-primary:hover{background:var(--blau-dark);border-color:var(--blau-dark);} .btn-ghost,.changebtn{background:transparent;color:var(--blau-deep);} .btn-ghost:hover,.changebtn:hover{background:var(--blau-deep);color:#fff;} .btn-ghost{min-height:44px;padding:9px 20px;} .btn-light{background:#fff;border-color:#fff;color:var(--blau-dark);} .btn-light:hover{background:var(--paper);border-color:var(--paper);} /* Band: Aufruf in Blau */ .band{background:var(--blau);color:#fff;} .band .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s5) var(--s7);align-items:center;padding-top:var(--s8);padding-bottom:var(--s8);} .band p{font-size:clamp(22px,2.6vw,30px);font-weight:300;line-height:1.35;max-width:32em;} .band em{font-style:normal;font-weight:600;} @media(max-width:700px){.band .wrap{grid-template-columns:minmax(0,1fr);}} /* Toast */ .toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--blau-dark);color:#fff;padding:14px 22px;font-size:15px;opacity:0;pointer-events:none;transition:all .3s;z-index:80;display:flex;align-items:center;gap:10px;max-width:90vw;} .toast.show{opacity:1;transform:translateX(-50%) translateY(0);} .toast svg{width:18px;height:18px;flex:none;} /* 5 · TEXTSEITEN (Über uns, Preise, AGB, Impressum, Datenschutz) ============= */ .textseite{padding:var(--s7) 0 var(--s8);} .textseite .wrap{max-width:820px;} .textseite h1{font-size:clamp(32px,4.4vw,46px);font-weight:300;margin-bottom:var(--s3);} .textseite h2{font-size:clamp(22px,2.6vw,27px);font-weight:400;margin:var(--s7) 0 var(--s3);color:var(--ink);} .textseite h3{font-size:18px;font-weight:600;margin:var(--s5) 0 var(--s2);} .textseite p,.textseite li{font-size:17px;line-height:1.7;} .textseite p + p{margin-top:var(--s3);} .textseite ul,.textseite ol{padding-left:1.2em;margin:var(--s3) 0;} .textseite li + li{margin-top:var(--s2);} .textseite a{color:var(--blau-dark);text-decoration:underline;text-decoration-color:var(--blau-light);text-underline-offset:3px;} .textseite a:hover{text-decoration-color:var(--blau-dark);} .textseite .lead,.textseite .intro-lead{font-size:19px;font-weight:300;color:var(--muted);max-width:62ch;margin-bottom:var(--s5);} .textseite .intro-lead strong{color:var(--ink);font-weight:500;} .textseite .updated{font-size:var(--caps);letter-spacing:.14em;text-transform:uppercase;color:var(--blau-deep);font-weight:500;margin-top:var(--s1);} .textseite .card{background:var(--white);border:1px solid var(--line);padding:var(--s5) var(--s6);margin:var(--s3) 0 var(--s4);} .textseite .card p{margin:0 0 var(--s1);} .textseite .card h3{margin-top:0;color:var(--blau-dark);} .textseite .label{display:inline-block;min-width:11em;font-size:var(--caps);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-right:var(--s3);} .textseite .beta-note{display:flex;gap:var(--s4);align-items:flex-start;background:var(--blau-deep);color:#fff;padding:var(--s5) var(--s6);margin:var(--s5) 0 var(--s6);} .textseite .beta-note .tag{flex:none;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;border:var(--stroke) solid #fff;padding:2px 10px;margin-top:3px;} .textseite .beta-note p{font-size:16px;line-height:1.6;} .textseite .steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);margin:var(--s4) 0;} .textseite .step{background:var(--white);border:1px solid var(--line);padding:var(--s5);} .textseite .step .n{display:inline-grid;place-items:center;width:34px;height:40px;padding-top:6px;border:var(--stroke) solid var(--blau-deep);border-bottom-width:var(--stroke);border-radius:var(--bogen);color:var(--blau-deep);font-size:14px;font-weight:600;margin-bottom:var(--s3);} .textseite .step h3{margin:0 0 var(--s1);} .textseite .step p{font-size:15.5px;color:var(--muted);} .textseite ul.clean{list-style:none;padding:0;} .textseite ul.clean li{position:relative;padding-left:28px;} .textseite ul.clean li::before{content:"✓";position:absolute;left:0;top:0;color:var(--blau-deep);font-weight:600;} .textseite .cta{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6);} .textseite .cta a{text-decoration:none;} .textseite .btn-sec{background:transparent;color:var(--blau-deep);} .textseite .btn-sec:hover{background:var(--blau-deep);color:#fff;} .textseite .btn-primary{color:#fff;} .textseite .fineprint,.textseite .signoff{margin-top:var(--s7);padding-top:var(--s4);border-top:1px solid var(--line);font-size:15px;color:var(--muted);} .textseite table{width:100%;border-collapse:collapse;margin:var(--s3) 0;font-size:15px;} .textseite th,.textseite td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top;} .textseite .tabelle{overflow-x:auto;} @media(max-width:700px){ .textseite{padding-top:var(--s6);} .textseite .steps{grid-template-columns:minmax(0,1fr);} .textseite .card{padding:var(--s4);} .textseite .label{display:block;min-width:0;margin:var(--s2) 0 0;} .textseite .beta-note{flex-direction:column;gap:var(--s3);padding:var(--s5);} .textseite .cta .btn-primary,.textseite .cta .btn-sec{flex:1 1 100%;} } @media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important;}}