/* oliverwiemers.de: zwei Register der Marke. Editorial (Schwarz, Weiß, Anton, Playfair kursiv) für Hero und Fußzeile, System (Neutralgrau, Inter) für Inhalt. Schriften lokal. */
@font-face { font-family: "Inter"; font-weight: 400; src: url("/fonts/inter-400-normal-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-weight: 400; src: url("/fonts/inter-400-normal-latin-ext.woff2") format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-weight: 700; src: url("/fonts/inter-700-normal-latin.woff2") format("woff2"); }
@font-face { font-family: "Anton"; font-weight: 400; src: url("/fonts/anton-400-normal-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Anton"; font-weight: 400; src: url("/fonts/anton-400-normal-latin-ext.woff2") format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 400; src: url("/fonts/playfair-display-400-italic-latin.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; src: url("/fonts/jetbrains-mono-400-normal-latin.woff2") format("woff2"); }
:root { --b: #000; --w: #fff; --n100: #F5F5F5; --n200: #E5E5E5; --n400: #A3A3A3; --n500: #737373; --n700: #404040; --n900: #171717; --mono: "JetBrains Mono", ui-monospace, monospace; --serif: "Playfair Display", Georgia, serif; --display: "Anton", Impact, sans-serif; --breite: 1080px; }
* { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--w); color: var(--n900); font: 400 17px/1.6 Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; } :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.innen { max-width: var(--breite); margin: 0 auto; padding: 0 1.25rem; }
/* Hero, Editorial */
.hero { position: relative; background: var(--b); color: var(--w); overflow: hidden; min-height: 92vh; display: flex; flex-direction: column; }
.hero .ow-reveal { position: absolute; inset: 0; z-index: 0; }
.hero .innen { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; justify-content: space-between; padding-top: 1.5rem; padding-bottom: 3rem; }
.kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.kopf .marke { font-family: var(--display); font-size: 1.1rem; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; }
.kopf nav a { color: var(--w); text-decoration: none; margin-left: 1.25rem; font-size: 0.95rem; opacity: 0.85; } .kopf nav a:hover { opacity: 1; text-decoration: underline; }
.hero h1 { font-family: var(--display); font-weight: 400; font-size: clamp(3.2rem, 11vw, 9rem); line-height: 0.95; letter-spacing: 0.01em; text-transform: uppercase; margin: 2.5rem 0 1rem; }
.hero .satz { font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1.45; max-width: 36ch; margin: 0 0 2rem; color: var(--n200); }
.hero .unten { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.knopf { display: inline-block; background: var(--w); color: var(--b); text-decoration: none; padding: 0.85rem 1.4rem; border-radius: 0.5rem; font-weight: 700; border: 1px solid var(--w); }
.knopf.dunkel { background: var(--b); color: var(--w); border-color: var(--b); } .knopf:hover { opacity: 0.9; }
.hero .klein { font-size: 0.95rem; opacity: 0.8; max-width: 44ch; }
/* Abschnitte, System */
section { padding: 5rem 0; } section + section { border-top: 1px solid var(--n200); }
h2 { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.02em; margin: 0 0 1.5rem; color: var(--n500); }
.ueber { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; } @media (min-width: 760px) { .ueber { grid-template-columns: 240px 1fr; gap: 3rem; } }
.ueber .foto { width: 100%; max-width: 240px; aspect-ratio: 1; background: var(--b); border-radius: 0.5rem; overflow: hidden; } .ueber img { width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: grayscale(1) contrast(1.05); display: block; }
.ueber p { margin: 0 0 1rem; max-width: 62ch; } .ueber p.gross { font-size: 1.35rem; line-height: 1.4; font-weight: 700; color: var(--b); letter-spacing: -0.01em; }
.stufen { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 760px) { .stufen { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }
.stufen h3 { font-size: 1.1rem; margin: 0 0 0.4rem; } .stufen h3 span { font-family: var(--mono); font-size: 0.8rem; color: var(--n500); margin-right: 0.6rem; } .stufen p { margin: 0; color: var(--n700); }
/* Portfolio */
.stueck { padding: 3rem 0; } .stueck + .stueck { border-top: 1px solid var(--n200); }
.stueck header { display: grid; grid-template-columns: 1fr; gap: 1rem 3rem; margin: 0 0 1.5rem; } @media (min-width: 860px) { .stueck header { grid-template-columns: 1fr 1fr; } }
.stueck h3 { font-size: 1.8rem; line-height: 1.15; margin: 0 0 0.5rem; letter-spacing: -0.01em; }
.stueck .problem { margin: 0; color: var(--n700); max-width: 52ch; }
.stueck .ergebnis { border-left: 2px solid var(--b); padding-left: 1rem; margin: 0; } .stueck .ergebnis b { display: block; font-size: 1.25rem; font-weight: 700; line-height: 1.3; } .stueck .ergebnis span { color: var(--n500); font-size: 0.95rem; }
.stueck .aktionen { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; margin-top: 1.25rem; } .stueck .aktionen .hinweis { color: var(--n500); font-size: 0.9rem; }
/* Werkstatt */
.eintrag { display: grid; grid-template-columns: 1fr; gap: 0.25rem 2rem; padding: 1.25rem 0; border-bottom: 1px solid var(--n200); } @media (min-width: 640px) { .eintrag { grid-template-columns: 120px 1fr; } }
.eintrag time { font-family: var(--mono); font-size: 0.8rem; color: var(--n500); padding-top: 0.35rem; }
.eintrag .art { font-family: var(--mono); font-size: 0.72rem; color: var(--n500); text-transform: uppercase; letter-spacing: 0.04em; }
.eintrag h3 { font-size: 1.1rem; margin: 0.1rem 0 0.3rem; } .eintrag p { margin: 0 0 0.4rem; color: var(--n700); max-width: 70ch; } .eintrag a { font-size: 0.95rem; }
/* Kontakt, Fuß */
.kontakt { background: var(--b); color: var(--w); padding: 5rem 0 3rem; }
.kontakt h2 { color: var(--n400); } .kontakt .gross { font-family: var(--display); font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.05; text-transform: uppercase; letter-spacing: 0.01em; max-width: 22ch; margin: 0 0 2rem; }
.kontakt .mail { font-family: var(--mono); font-size: 1.1rem; color: var(--w); text-decoration: none; border-bottom: 1px solid var(--w); } .kontakt .mail:hover { opacity: 0.8; }
.fuss { margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid var(--n700); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-size: 0.85rem; color: var(--n400); }
.fuss a { color: var(--n400); text-decoration: none; margin-right: 1rem; } .fuss a:hover { color: var(--w); }
/* Rechtsseiten */
.seite { max-width: 68ch; margin: 0 auto; padding: 3rem 1.25rem 5rem; } .seite h1 { font-size: 1.8rem; margin: 0 0 1.5rem; } .seite h2 { color: var(--n900); font-size: 1.05rem; margin: 2rem 0 0.5rem; letter-spacing: 0; } .seite p { margin: 0 0 0.8rem; } .seite .zurueck { font-size: 0.9rem; display: inline-block; margin-bottom: 2rem; }

/* Unterseite Arbeit: schmale schwarze Kopfzeile statt Hero */
.leiste-seite { background: var(--b); color: var(--w); padding: 1.25rem 0; } .leiste-seite .kopf .marke { color: var(--w); }