/* Neumeister.NET – Schriften (lokal, OFL: Newsreader, Inter, Barlow Condensed) */
@font-face{font-family:"Newsreader";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/newsreader-400.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/newsreader-500.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-weight:400;font-style:italic;font-display:swap;src:url(../fonts/newsreader-400-italic.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:100 900;font-style:normal;font-display:swap;src:url(../fonts/inter-var.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/barlow-condensed-600.woff2) format("woff2")}

:root{
  /* Palette: warmes Dunkel (Community) + Creme/Clay (Cowork) */
  --night:#161311;
  --night-2:#1e1a17;
  --night-3:#2a2420;
  --night-line:#3a322c;
  --paper:#f5f0e8;
  --paper-2:#ece4d6;
  --ink:#1e1a17;
  --ink-soft:#524a43;
  --cream:#f3ede4;
  --cream-mute:#b8ad9f;
  --clay:#e0714b;
  --clay-deep:#b42127;
  --wine:#5e1013;
  --on-clay:#1a0f0a;

  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --cond:"Barlow Condensed","Arial Narrow",sans-serif;

  --radius:14px;
  --radius-sm:8px;
  --ease:cubic-bezier(.16,1,.3,1);
  --gutter:20px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:72px;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--night);color:var(--cream);font:400 1rem/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,h4,p,ul{margin:0}
ul{padding:0;list-style:none}
:focus-visible{outline:3px solid var(--clay);outline-offset:3px;border-radius:4px}

.wrap{width:100%;max-width:1120px;margin-inline:auto;padding-inline:var(--gutter)}
.skip{position:absolute;left:12px;top:-60px;background:var(--clay);color:var(--on-clay);padding:10px 16px;border-radius:var(--radius-sm);z-index:100;font-weight:600;text-decoration:none}
.skip:focus{top:12px}

.eyebrow{font:600 .95rem/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:var(--clay);margin-bottom:14px}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:var(--night);border-bottom:1px solid var(--night-line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px}
.brand{display:flex;align-items:center;gap:10px;min-width:0;white-space:nowrap;text-decoration:none;font:500 clamp(1.05rem,5vw,1.25rem)/1 var(--serif)}
.brand img{border-radius:8px}
.brand em,h1 em{font-style:italic;font-weight:400;color:var(--clay)}
.site-header nav{display:flex;gap:6px}
.site-header nav a{padding:8px 12px;border-radius:999px;text-decoration:none;font-size:.9rem;color:var(--cream-mute);transition:color .2s,background-color .2s}
.site-header nav a:hover{color:var(--cream);background:var(--night-3)}

/* Hero */
.hero{position:relative;padding:56px 0 72px;background:var(--night);
  background-image:radial-gradient(rgba(238,232,223,.07) 1px,transparent 1.2px);background-size:22px 22px}
.hero-grid{display:grid;gap:40px;align-items:center;grid-template-columns:minmax(0,1fr)}
h1{font:500 clamp(2.1rem,10.5vw,5rem)/.98 var(--serif);letter-spacing:-.02em}
.hero-copy{container-type:inline-size}
.hero h1{white-space:nowrap;font-size:min(6rem,12.6cqi)}
.tagline{font:italic 400 clamp(1.5rem,5vw,2.2rem)/1.2 var(--serif);color:var(--cream-mute);margin-top:12px}
.lead{margin-top:28px;max-width:34ch;font:400 clamp(1.25rem,4.5vw,1.6rem)/1.3 var(--serif);color:var(--cream)}
.lead em{font-style:italic;color:var(--clay);white-space:nowrap}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.btn{display:inline-block;padding:14px 22px;border-radius:999px;font-weight:600;font-size:.95rem;text-decoration:none;transition:transform .25s var(--ease),background-color .2s,border-color .2s}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--clay);color:var(--on-clay)}
.btn-primary:hover{background:#ea8160}
.btn-ghost{border:1.5px solid var(--night-line);color:var(--cream)}
.btn-ghost:hover{border-color:var(--cream-mute)}

.hero-card{background:var(--night-2);border:1px solid var(--night-line);border-radius:var(--radius);padding:24px 22px 12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}

/* Über */
.about{background:var(--paper);color:var(--ink);padding:72px 0}
.about .eyebrow{color:var(--clay-deep)}
.about-grid{display:grid;gap:36px;grid-template-columns:minmax(0,1fr)}
h2{font:500 clamp(2rem,6vw,3.2rem)/1.08 var(--serif);letter-spacing:-.01em}
.prose{max-width:62ch}
.prose p{font:400 1.05rem/1.7 var(--serif);color:var(--ink-soft)}
.prose p+p{margin-top:18px}
.prose strong{font-weight:600;color:var(--ink);background:linear-gradient(transparent 60%,rgba(224,113,75,.38) 0);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .08em}

/* Links */
.links{background:var(--night-2);padding:72px 0 88px}
.section-head{margin-bottom:36px}
.grid{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
.card{position:relative;display:flex;flex-direction:column;height:100%;padding:22px 22px 20px;background:var(--night-3);border:1px solid var(--night-line);border-radius:var(--radius);text-decoration:none;overflow:hidden;
  transition:transform .35s var(--ease),border-color .25s}
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--clay);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.card:focus-visible,.card.is-active{transform:translateY(-4px);border-color:var(--clay)}
.card:focus-visible::before,.card.is-active::before{transform:scaleX(1)}
.card-no{font:600 .9rem/1 var(--cond);letter-spacing:.12em;color:var(--clay)}
.card-domain{margin-top:10px;font-size:.8rem;color:var(--cream-mute);word-break:break-all}
.card h4{margin-top:4px;font:500 1.6rem/1.15 var(--serif);padding-right:28px}
.card p{margin-top:10px;color:var(--cream);font-size:.95rem;flex:1}
.meter{display:flex;align-items:center;gap:3px;margin-top:20px}
.meter i{flex:0 0 14px;height:6px;border-radius:3px;background:var(--night-line)}
.meter i.on{background:var(--clay)}
.meter b{margin-left:10px;font:600 1rem/1 var(--cond);letter-spacing:.04em}
.meter small{color:var(--cream-mute);font-size:.8rem;font-weight:600}
.card-arrow{position:absolute;top:18px;right:20px;font-size:1.3rem;color:var(--cream-mute);transition:transform .3s var(--ease),color .2s}
.card:focus-visible .card-arrow,.card.is-active .card-arrow{transform:translate(3px,-3px);color:var(--clay)}
/* Maus: Hover; Touch: .is-active wird per JS für die Karte in der Bildschirmmitte gesetzt */
@media (hover:hover){
  .card:hover{transform:translateY(-4px);border-color:var(--clay)}
  .card:hover::before{transform:scaleX(1)}
  .card:hover .card-arrow{transform:translate(3px,-3px);color:var(--clay)}
}

/* Footer */
.site-footer{background:var(--wine);color:#f4ede3;padding:28px 0}
.foot{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;align-items:center;font-size:.9rem}

.foot a:hover{border-color:#f4ede3}

/* Einblenden (nur transform/opacity) */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .reveal.in{opacity:1;transform:none}

/* Handy: kompaktere Karten */
@media (max-width:639px){
  .hero{padding:40px 0 56px}
  .about,.links{padding-block:56px}
  .cat{margin-top:44px}
  .grid{gap:10px}
  .card{padding:14px 16px 14px}
  .card-no{display:none}
  .card-domain{margin-top:0;font-size:.75rem}
  .card h4{margin-top:2px;font-size:1.3rem;padding-right:24px}
  .card p{margin-top:4px;font-size:.88rem;line-height:1.45}
  .meter{margin-top:10px;gap:2px}
  .meter i{flex:1 1 0;max-width:14px;height:5px}
  .meter b{margin-left:8px}
  .card-arrow{top:12px;right:14px;font-size:1.15rem}
  .site-header nav a{padding:8px 10px}
}

@media (min-width:640px){
  :root{--gutter:32px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:960px){
  .hero{padding:96px 0 112px}
  .hero-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
  .about,.links{padding-block:112px}
  .about-grid{grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr);align-items:start;gap:56px}
  .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .js .reveal{opacity:1;transform:none}
  .btn:hover,.card:hover,.card.is-active{transform:none}
}
.noscript{margin-top:16px;color:var(--cream-mute)}

/* Kategorien */
.hero-card-title{font:600 .95rem/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:var(--clay);margin-bottom:8px}
.cat-list li{border-top:1px solid var(--night-line)}
.cat-list li:first-child{border-top:0}
.cat-link{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:14px 0;text-decoration:none;transition:transform .3s var(--ease)}
.cat-name{font:500 1.5rem/1.2 var(--serif)}
.cat-count{font:600 1.25rem/1 var(--cond);letter-spacing:.04em;color:var(--clay)}
.cat-link:hover{transform:translateX(4px)}
.cat-link:hover .cat-name{color:var(--clay)}
.cat{margin-top:64px}
.cat:first-of-type{margin-top:0}
.cat-head{display:flex;align-items:baseline;gap:16px;margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--night-line)}
.cat-head h3{font:500 clamp(1.7rem,4.5vw,2.3rem)/1.1 var(--serif)}
.cat-badge{font:600 .95rem/1 var(--cond);letter-spacing:.12em;text-transform:uppercase;color:var(--clay)}

/* Rechtliches */
.foot-nav{display:flex;gap:20px;flex-wrap:wrap}
.foot-nav a{padding:0;border-radius:0;font-size:inherit;color:inherit;text-decoration:none;border-bottom:1px solid rgba(244,237,227,.4)}
.foot-nav a:hover{background:none;color:inherit;border-color:#f4ede3}
.legal{background:var(--paper);color:var(--ink);padding:56px 0 88px}
.legal .eyebrow{color:var(--clay-deep)}
.legal-wrap{max-width:760px}
.legal h1{font-size:clamp(2.4rem,8vw,4rem)}
.legal h2{font:500 1.5rem/1.2 var(--serif);margin-top:40px;margin-bottom:10px}
.legal p+p{margin-top:12px}
.legal p{color:var(--ink-soft)}
.legal strong{color:var(--ink)}
.legal :focus-visible{outline-color:var(--clay-deep)}

/* Kontakt */
.contact{background:var(--paper);color:var(--ink);padding:72px 0 88px}
.contact .eyebrow{color:var(--clay-deep)}
.contact-grid{display:grid;gap:32px;grid-template-columns:minmax(0,1fr)}
.form{background:#fff;border:1px solid var(--paper-2);border-radius:var(--radius);padding:22px 20px}
.field+.field{margin-top:18px}
.field label{display:block;margin-bottom:6px;font-weight:600;font-size:.95rem}
.field input,.field textarea{display:block;width:100%;padding:12px 14px;font:inherit;font-size:1rem;color:var(--ink);background:#fff;border:1.5px solid #857668;border-radius:var(--radius-sm)}
.field textarea{resize:vertical;min-height:140px}
.field input:focus-visible,.field textarea:focus-visible{outline:3px solid var(--clay-deep);outline-offset:1px;border-color:var(--clay-deep)}
.field-check input{max-width:7rem}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:22px}
.form .btn{border:0;cursor:pointer;font-family:inherit}
.form .btn:disabled{background:var(--paper-2);color:var(--ink-soft);cursor:not-allowed;transform:none}
.form-status{flex:1 1 220px;font-size:.88rem;line-height:1.4;color:var(--ink-soft);margin:0}
@media (min-width:640px){.form{padding:32px}}
@media (min-width:960px){
  .contact{padding-block:112px}
  .contact-grid{grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr);gap:56px;align-items:start}
  .form{max-width:640px}
}
.consent{display:flex;align-items:flex-start;gap:10px;margin-top:20px}
.consent input{flex:0 0 22px;width:22px;height:22px;margin:1px 0 0;accent-color:var(--clay-deep);cursor:pointer}
.consent label{font-size:.82rem;line-height:1.5;color:var(--ink-soft);cursor:pointer}
.consent a{color:var(--ink);text-decoration:underline}
.consent input:focus-visible{outline:3px solid var(--clay-deep);outline-offset:2px}