/* oecking.de – Vorschau v2 */
@font-face{font-family:'Schibsted Grotesk';src:url(redaktion-fonts/schibsted-grotesk-latin-wght-normal.woff2) format('woff2');font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:'Schibsted Grotesk';src:url(redaktion-fonts/schibsted-grotesk-latin-wght-italic.woff2) format('woff2');font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:'Source Serif 4';src:url(redaktion-fonts/source-serif-4-latin-standard-normal.woff2) format('woff2');font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:'Source Serif 4';src:url(redaktion-fonts/source-serif-4-latin-standard-italic.woff2) format('woff2');font-weight:200 900;font-style:italic;font-display:swap}

:root{
  --ink:#141414; --muted:#555555; --paper:#FFFFFF; --tint:#F2F1EE; --red:#C8261B;
  --sans:'Schibsted Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --gutter:clamp(20px,4vw,56px); --max:1280px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:var(--ink);text-underline-offset:.28em;text-decoration-thickness:1px}
a:hover{color:var(--muted)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.serif{font-family:var(--serif)}
/* Silbentrennung nur bei langen Wörtern, mindestens 5 Zeichen vor und nach dem Trennstrich */
[lang] .text,[lang] .cols,[lang] .desc,[lang] .lead,[lang] .areas p{hyphenate-limit-chars:12 5 5;-webkit-hyphenate-limit-before:5;-webkit-hyphenate-limit-after:5}
.kicker{margin:0 0 16px;font-size:16px;font-weight:700;color:var(--ink)}
.kicker--muted{color:var(--muted);font-weight:600}
.more{display:inline-block;padding:10px 0;font-weight:700}
.h-xl{margin:0;font-size:clamp(50px,8.6vw,132px);line-height:.94;font-weight:800;letter-spacing:-.035em}
.h-l{margin:0;font-size:clamp(34px,4.6vw,64px);line-height:1.02;font-weight:800;letter-spacing:-.03em}
.h-m{margin:0;font-size:clamp(24px,2.2vw,28px);line-height:1.12;font-weight:800;letter-spacing:-.02em}
.rotstift{position:relative;display:inline-block}
.rotstift svg{position:absolute;left:-4%;bottom:-.16em;width:108%;height:.24em;overflow:visible}
.rotstift path{fill:none;stroke:var(--red);stroke-width:8;stroke-linecap:round}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;background:var(--ink);color:#fff;text-decoration:none;font-weight:700;font-size:16px;border:0;font-family:inherit;cursor:pointer}
.btn:hover{background:#333;color:#fff}

/* Kopfzeile */
.site-head{border-bottom:2px solid var(--ink);background:var(--paper)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px 40px;padding-top:24px;padding-bottom:20px}
.brand{text-decoration:none;display:flex;flex-direction:column;gap:3px}
.brand b{font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1}
.brand span{font-size:13px;color:var(--muted);font-weight:500}
.brand .long{display:inline}
.nav{display:flex;flex-wrap:wrap;gap:4px 28px;font-size:16px;font-weight:500}
.nav a{text-decoration:none;padding:10px 0}
.nav a[aria-current]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.nav .nav-kontakt{font-weight:700;text-decoration:none}
.menu-btn{display:none;align-items:center;gap:10px;height:44px;padding:0 14px;border:2px solid var(--ink);background:var(--paper);color:var(--ink);font:700 15px/1 var(--sans);cursor:pointer}
.menu-btn svg{display:block}
.menu-btn .i-close{display:none}
.menu-btn[aria-expanded="true"] .i-open{display:none}
.menu-btn[aria-expanded="true"] .i-close{display:block}
.menu-btn path{stroke:currentColor;stroke-width:2.5}

.mail{display:inline-block;font-size:clamp(32px,4.4vw,60px);font-weight:800;letter-spacing:-.03em;line-height:1.08;text-decoration:none;overflow-wrap:anywhere}

/* Fusszeile */
.site-foot{border-top:2px solid var(--ink)}
.site-foot .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;padding-top:24px;padding-bottom:40px;font-size:15px}
.site-foot nav{display:flex;flex-wrap:wrap;gap:4px 28px}
.site-foot nav a{padding:8px 0}

/* Formular */
.form{display:flex;flex-direction:column;gap:20px}
.form label{display:flex;flex-direction:column;gap:8px;font-size:15px;font-weight:700}
.form input,.form textarea{border:0;border-bottom:2px solid var(--ink);background:var(--tint);padding:0 14px;font:400 17px/1.4 var(--sans);color:var(--ink);border-radius:0}
.form input{height:52px}
.form textarea{padding:14px;resize:vertical}
.form .hint{margin:0;font-size:14px;color:var(--muted);line-height:1.5}

@media (max-width:860px){
  .h-xl{font-size:clamp(34px,10.6vw,56px);line-height:.96}
  .nav{display:none}
  .menu-btn{display:inline-flex}
  .site-head .wrap{padding-top:14px;padding-bottom:14px}
  .brand b{font-size:21px}
  .brand span{font-size:12px}
  .brand .long{display:none}
  .nav.is-open{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:2px solid var(--ink);padding:8px var(--gutter) 16px;gap:0;z-index:10}
  .nav.is-open a{font-size:26px;font-weight:800;letter-spacing:-.02em;padding:14px 0;border-bottom:1px solid var(--ink)}
  .nav.is-open a:last-child{border-bottom:0}
  .site-head{position:relative}
}