/* J.O.R.G. GmbH — jorg.co.at */ :root { --ink: #17262a; --ink-soft: #4a5b5f; --paper: #f7f9f8; --paper-2: #ecf1f0; --line: #d3dcda; --teal: #0e5a63; --lagoon: #2e9e8c; --sand: #d9cdae; --hero-scrim: rgba(10, 40, 46, .55); --font: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif; --measure: 62ch; --pad: clamp(1.25rem, 4vw, 3.5rem); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font); font-size: clamp(1.0625rem, 1rem + .3vw, 1.2rem); line-height: 1.55; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; } a { color: var(--teal); text-decoration: none; text-underline-offset: .18em; } a:hover { text-decoration: underline; } a:focus-visible, button:focus-visible { outline: 2px solid var(--lagoon); outline-offset: 3px; border-radius: 2px; } /* Language handling: everything with [lang] is hidden unless it matches */ [data-lang="de"] [lang="en"], [data-lang="en"] [lang="de"] { display: none !important; } /* ---------- Header / language switch ---------- */ .site-head { position: absolute; inset: 0 0 auto 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding: calc(var(--pad) * .6) var(--pad); color: #fff; } .site-head--solid { position: static; color: var(--ink); } .brand { color: inherit; font-size: 1rem; letter-spacing: .04em; } .brand:hover { text-decoration: none; } .lang { display: flex; gap: .25rem; margin: 0; padding: 0; list-style: none; font-size: .9rem; } .lang button { font: inherit; color: inherit; background: none; border: 0; padding: .3em .55em; cursor: pointer; opacity: .6; border-bottom: 1px solid transparent; } .lang button[aria-pressed="true"] { opacity: 1; border-bottom-color: currentColor; } /* ---------- Hero ---------- */ .hero { position: relative; min-height: 100svh; display: grid; align-content: end; padding: var(--pad); color: #fff; overflow: hidden; isolation: isolate; } .hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 45%; z-index: -2; } .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,40,46,.35) 0%, rgba(10,40,46,0) 30%), linear-gradient(0deg, var(--hero-scrim) 0%, rgba(10,40,46,0) 55%); } .hero h1 { margin: 0; font-weight: 300; font-size: clamp(2.75rem, 9vw, 8.5rem); line-height: .95; letter-spacing: .06em; text-shadow: 0 2px 30px rgba(0,0,0,.25); } .hero h1 small { display: block; font-size: .32em; letter-spacing: .12em; margin-top: .35em; opacity: .85; } .hero p { margin: 1.25rem 0 0; font-size: clamp(1.1rem, 1rem + 1vw, 1.6rem); font-weight: 300; letter-spacing: .01em; max-width: 30ch; } .hero p::before { content: "“"; } .hero p::after { content: "”"; } @media (prefers-reduced-motion: no-preference) { .hero h1, .hero p { animation: rise .9s cubic-bezier(.2,.7,.2,1) both; } .hero p { animation-delay: .15s; } @keyframes rise { from { opacity: 0; transform: translateY(.4em); } to { opacity: 1; transform: none; } } } /* ---------- Content ---------- */ main { padding: calc(var(--pad) * 1.5) var(--pad) calc(var(--pad) * 2); } .intro { max-width: var(--measure); margin: 0 auto; font-size: clamp(1.2rem, 1rem + .9vw, 1.65rem); line-height: 1.45; font-weight: 300; } .intro p { margin: 0 0 1em; } .intro p:last-child { margin-bottom: 0; } .contact { max-width: var(--measure); margin: calc(var(--pad) * 1.5) auto 0; padding-top: calc(var(--pad) * .9); border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 2rem var(--pad); } .contact address { font-style: normal; white-space: nowrap; } .contact dl { margin: 0; } .contact dt { color: var(--ink-soft); font-size: .85em; } .contact dd { margin: 0 0 .9em; } .contact dd:last-child { margin-bottom: 0; } /* Subpages (Impressum, Datenschutz) */ .page { max-width: var(--measure); margin: 0 auto; } .page h1 { font-weight: 300; font-size: clamp(2rem, 1.5rem + 2.5vw, 3.25rem); letter-spacing: .02em; line-height: 1.1; margin: 0 0 1.5rem; } .page h2 { font-weight: 400; font-size: 1.15em; margin: 2.2em 0 .6em; } .page p, .page dd, .page li { color: var(--ink); } .page dl { display: grid; grid-template-columns: max-content 1fr; gap: .35em 1.5em; margin: 0; } .page dt { color: var(--ink-soft); } .page dd { margin: 0; } @media (max-width: 30rem) { .page dl { grid-template-columns: 1fr; gap: 0; } .page dd { margin-bottom: .8em; } } .todo { color: var(--ink-soft); border-bottom: 1px dashed var(--sand); } /* ---------- Footer ---------- */ .site-foot { padding: var(--pad); border-top: 1px solid var(--line); background: var(--paper-2); font-size: .9rem; color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: .6rem 2rem; justify-content: space-between; } .site-foot nav { display: flex; gap: 1.5rem; } .site-foot a { color: inherit; }