/*
Theme Name: Webkatalog
Author: Webkatalog
Description: Modernes Link-Verzeichnis mit Neo-Brutalist-Design, Premium-Einträgen und Logo-Support.
Version: 2.7.0
Text Domain: webkatalog
*/

:root{
  --paper:#eef1ec;
  --ink:#131a16;
  --card:#ffffff;
  --muted:#5b665f;
  --green:#0f8b5a;
  --green-deep:#0a5c3c;
  --signal:#ff5c2b;
  --cobalt:#2f45e0;
  --teal:#0e8f84;
  --lime:#ddf36f;
  --font-display:'Bricolage Grotesque',system-ui,sans-serif;
  --font-body:'IBM Plex Sans',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
  --shadow:6px 6px 0 var(--ink);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  background-color:var(--paper);
  background-image:
    radial-gradient(1100px 480px at 88% -8%, rgba(15,139,90,.14), transparent 62%),
    radial-gradient(800px 420px at -6% 2%, rgba(255,92,43,.10), transparent 58%),
    radial-gradient(rgba(19,26,22,.15) 1px, transparent 1.4px);
  background-size:auto,auto,22px 22px;
}
::selection{background:var(--lime);color:var(--ink)}
img{max-width:100%;height:auto}
a{color:var(--cobalt)}
.wrap{max-width:1180px;margin:0 auto;padding:0 1.25rem}
.mono{font-family:var(--font-mono)}
:focus-visible{outline:3px solid var(--signal);outline-offset:2px;border-radius:4px}

.screen-reader-text{position:absolute;left:-9999px}
.skip-link{position:absolute;left:-9999px;z-index:200}
.skip-link:focus{left:1rem;top:1rem;background:var(--ink);color:var(--lime);padding:.6rem 1rem;border-radius:6px}

/* ---------- Custom Logo ---------- */
.custom-logo-link{display:inline-block;line-height:0}
.custom-logo{display:block;width:auto;height:auto}
.masthead__logo{margin:0 0 1.4rem}
.masthead__logo .custom-logo{max-height:90px;max-width:340px}
.site-bar__logo{display:flex;align-items:center}
.site-bar__logo .custom-logo{max-height:44px;max-width:200px}
.site-footer__logo{margin:0 0 1rem}
.site-footer__logo .custom-logo{max-height:54px;max-width:220px}
@media (max-width:640px){
  .masthead__logo .custom-logo{max-height:64px;max-width:240px}
  .site-footer__logo .custom-logo{max-height:44px;max-width:180px}
}

/* ---------- Laufband ---------- */
.ticker{background:var(--ink);color:var(--lime);overflow:hidden;border-bottom:2px solid var(--ink)}
.ticker__track{display:flex;width:max-content;padding:.55rem 0;animation:tick 38s linear infinite;
  font:500 .74rem/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker__item{color:var(--lime);text-decoration:none;padding-right:3rem;white-space:nowrap}
.ticker__item:hover{color:#fff}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- Kopfzeile (Unterseiten) ---------- */
.site-bar{background:var(--ink);color:var(--paper);border-bottom:2px solid var(--ink)}
.site-bar__in{display:flex;align-items:center;justify-content:space-between;padding:.8rem 1.25rem}
.site-bar__brand{font:800 1.05rem var(--font-display);color:var(--paper);text-decoration:none;display:flex;align-items:center;gap:.55rem}
.site-bar__mark{display:grid;place-items:center;width:1.9rem;height:1.9rem;background:var(--green);color:#fff;border-radius:6px;transform:rotate(-4deg)}
.site-bar__nav{display:flex;align-items:center;gap:1.4rem}
.site-bar__nav a{color:var(--paper);font:500 .78rem var(--font-mono);text-transform:uppercase;letter-spacing:.1em;text-decoration:none}
.site-bar__nav a:hover{color:var(--lime)}

/* ---------- Masthead ---------- */
.masthead{padding:4rem 0 2.6rem;border-bottom:2px solid var(--ink)}
.masthead__kicker{display:flex;align-items:center;gap:.6rem;margin:0 0 1rem;
  font:600 .74rem var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--signal);animation:puls 2.2s ease-in-out infinite}
@keyframes puls{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
.masthead__title{margin:0;font:800 clamp(3rem,9vw,6.4rem)/0.95 var(--font-display);letter-spacing:-.02em;text-transform:uppercase}
.masthead__arrow{display:inline-block;color:var(--signal);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.masthead__title:hover .masthead__arrow{transform:translate(.12em,-.12em)}
.masthead__sub{max-width:56ch;margin:.9rem 0 0;font-size:1.08rem;color:var(--muted)}
.masthead__cta{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:1.6rem}
.masthead__panel{margin-top:2rem;display:grid;grid-template-columns:2fr 1fr;gap:1.4rem;align-items:center;
  background:var(--card);border:2px solid var(--ink);border-radius:12px;box-shadow:var(--shadow);padding:1.3rem 1.4rem}
.search{position:relative}
.search__icon{position:absolute;left:.95rem;top:50%;transform:translateY(-50%);font-size:1.15rem;color:var(--muted)}
.search input{width:100%;padding:.95rem 3.2rem .95rem 2.7rem;font:500 1rem var(--font-body);color:var(--ink);
  background:var(--paper);border:2px solid var(--ink);border-radius:8px;transition:box-shadow .25s,border-color .25s}
.search input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 4px rgba(15,139,90,.22)}
.search__kbd{position:absolute;right:.85rem;top:50%;transform:translateY(-50%);
  font:600 .7rem var(--font-mono);border:1.5px solid var(--ink);border-bottom-width:3px;border-radius:5px;padding:.15rem .5rem;color:var(--muted)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:0;text-align:center}
.stats dt{font:600 .62rem var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.stats dd{margin:.15rem 0 0;font:800 1.9rem/1 var(--font-display)}

/* ---------- Kategorien-Navigation (sticky) ---------- */
.chipsbar{position:sticky;top:0;z-index:90;background:var(--paper);border-bottom:2px solid var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;padding:.65rem 0}
.chip{font:600 .72rem var(--font-mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
  color:var(--ink);background:var(--card);border:1.5px solid var(--ink);border-radius:999px;padding:.42rem .85rem;
  transition:background .2s,transform .2s,color .2s}
.chip sup{color:var(--muted);margin-left:.35rem}
.chip:hover{background:var(--lime);transform:translateY(-2px)}
.chip.is-active{background:var(--ink);color:var(--paper)}
.chip.is-active sup{color:var(--lime)}

/* ---------- Verzeichnis ---------- */
.page-main{padding:2.5rem 1.25rem 4rem}

/* ---------- Verzeichnis-Header (Abschnitt 1) ---------- */
.board-head{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  margin:3rem 0 2rem;padding-bottom:1.6rem;border-bottom:3px solid var(--ink);position:relative;
}
.board-head::after{
  content:'';position:absolute;bottom:-3px;left:0;width:120px;height:3px;background:var(--signal);
}
.board-head__left{display:flex;flex-direction:column;gap:.3rem;min-width:0;flex:1}
.board-head__kicker{
  display:inline-block;font:700 .7rem var(--font-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--signal);
}
.board-head__title{
  margin:0;font:800 clamp(1.8rem,4vw,2.4rem)/1.1 var(--font-display);
  letter-spacing:-.01em;text-transform:uppercase;color:var(--ink);
}
.board-head__right{flex:none}
.board-head__rule{
  margin:0;padding:.7rem 1.2rem;background:var(--ink);color:var(--lime);
  border:2px solid var(--ink);border-radius:10px;box-shadow:4px 4px 0 var(--signal);
  font:700 1.05rem var(--font-mono);letter-spacing:.02em;
  display:inline-flex;align-items:center;gap:.5rem;flex-wrap:wrap;line-height:1.4;
}
.board-head__rule strong{font:800 1.5rem/1 var(--font-display);color:var(--lime);margin:0 .15rem}
.board-head__dot{color:var(--signal);font-size:1.3rem;line-height:1;margin:0 .1rem}

/* ---------- Dunkler Header „Das Verzeichnis" (Abschnitt 2) ---------- */
.directory-head{
  background:var(--ink);color:var(--paper);margin:3.5rem 0 2rem;
  border-radius:14px;border:2px solid var(--ink);box-shadow:8px 8px 0 var(--signal);
  padding:2rem 2.2rem;position:relative;overflow:hidden;
}
.directory-head::before{
  content:'';position:absolute;top:0;right:0;width:200px;height:100%;
  background-image:radial-gradient(rgba(221,243,111,.15) 2px, transparent 2px);
  background-size:18px 18px;pointer-events:none;
}
.directory-head__inner{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;position:relative;z-index:1}
.directory-head__icon{
  flex:none;display:grid;place-items:center;width:3.5rem;height:3.5rem;
  background:var(--lime);color:var(--ink);border:2px solid var(--ink);border-radius:10px;
  font:800 2rem var(--font-display);box-shadow:4px 4px 0 var(--signal);
  transform:rotate(-4deg);transition:transform .3s;
}
.directory-head:hover .directory-head__icon{transform:rotate(4deg) scale(1.05)}
.directory-head__text{flex:1;min-width:200px}
.directory-head__kicker{
  display:inline-block;font:700 .7rem var(--font-mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--lime);margin-bottom:.3rem;
}
.directory-head__title{
  margin:0;font:800 clamp(1.9rem,4vw,2.6rem)/1.1 var(--font-display);
  letter-spacing:-.01em;text-transform:uppercase;color:#fff;
}
.directory-head__chips{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:flex-end}
.directory-head__chip{
  display:inline-flex;align-items:center;gap:.4rem;padding:.55rem 1rem;
  background:transparent;color:var(--lime);border:2px solid var(--lime);border-radius:999px;
  font:700 .85rem var(--font-mono);letter-spacing:.03em;white-space:nowrap;transition:all .25s;
}
.directory-head__chip::before{content:'▸';color:var(--signal);font-size:.95rem}
.directory-head__chip:hover{background:var(--lime);color:var(--ink)}
.directory-head__chip:hover::before{color:var(--ink)}

/* ---------- Eintrag des Tages ---------- */
.eod{
  display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;
  background:var(--card);border:2px solid var(--ink);border-radius:12px;box-shadow:var(--shadow);
  padding:1.5rem 1.8rem;margin:2rem 0;position:relative;overflow:hidden;
  transition:transform .25s, box-shadow .25s;
}
.eod::before{
  content:'';position:absolute;top:0;left:0;width:6px;height:100%;background:var(--signal);
}
.eod:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--ink)}
.eod__badge{
  flex:none;display:grid;place-items:center;width:3.2rem;height:3.2rem;
  background:var(--signal);border:2px solid var(--ink);border-radius:50%;
  font-size:1.6rem;box-shadow:4px 4px 0 var(--ink);
  transform:rotate(-6deg);animation:eod-puls 3s ease-in-out infinite;
}
@keyframes eod-puls{
  0%,100%{transform:rotate(-6deg) scale(1)}
  50%{transform:rotate(-6deg) scale(1.08)}
}
.eod__content{flex:1;min-width:200px}
.eod__kicker{
  display:inline-block;font:700 .68rem var(--font-mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--signal);margin-bottom:.3rem;
}
.eod__title{margin:0;font:800 1.5rem/1.2 var(--font-display)}
.eod__title a{color:var(--ink);text-decoration:none;transition:color .2s}
.eod__title a:hover{color:var(--signal)}
.eod__arrow{display:inline-block;margin-left:.3rem;color:var(--signal);transition:transform .25s}
.eod__title a:hover .eod__arrow{transform:translate(3px,-3px)}
.eod__desc{margin:.3rem 0 0;font-size:.95rem;color:var(--muted)}
.eod__meta{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:.6rem}
.eod__domain{font-size:.75rem;color:var(--muted)}
.btn--small{padding:.55rem 1rem;font-size:.85rem}

/* Kategorie-Container */
.cat{background:var(--card);border:2px solid var(--ink);border-radius:12px;box-shadow:var(--shadow);
  margin-bottom:2.3rem;scroll-margin-top:5rem;transition:transform .25s,box-shadow .25s}
.cat:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--ink)}
.cat__head{display:flex;align-items:center;gap:1.1rem;padding:1.15rem 1.4rem;border-bottom:2px solid var(--ink)}
.cat__badge{flex:none;width:2.7rem;height:2.7rem;display:grid;place-items:center;
  font:800 1.35rem var(--font-display);color:#fff;border:2px solid var(--ink);border-radius:8px;
  transform:rotate(-4deg);box-shadow:3px 3px 0 var(--ink)}
.cat:nth-of-type(6n+1) .cat__badge{background:var(--green)}
.cat:nth-of-type(6n+2) .cat__badge{background:var(--signal)}
.cat:nth-of-type(6n+3) .cat__badge{background:var(--cobalt)}
.cat:nth-of-type(6n+4) .cat__badge{background:var(--teal)}
.cat:nth-of-type(6n+5) .cat__badge{background:var(--green-deep)}
.cat:nth-of-type(6n+6) .cat__badge{background:var(--muted)}
.cat__title{margin:0;font:800 1.5rem/1.1 var(--font-display)}
.cat__desc{margin:.15rem 0 0;font-size:.9rem;color:var(--muted)}
.cat__count{margin-left:auto;flex:none;text-decoration:none;color:var(--ink);
  font:600 .74rem var(--font-mono);border:1.5px solid var(--ink);border-radius:999px;padding:.4rem .8rem;
  transition:background .2s}
.cat__count:hover{background:var(--lime)}

.cat__list{list-style:none;margin:0;padding:.3rem 0 .5rem;columns:22rem;column-gap:0}
.link{break-inside:avoid;border-bottom:1px dashed rgba(19,26,22,.28)}
.link:last-child{border-bottom:0}
.link a{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:.75rem 1.4rem;
  color:var(--ink);text-decoration:none;
  background-image:linear-gradient(var(--lime),var(--lime));
  background-repeat:no-repeat;background-size:0% 100%;transition:background-size .3s ease}
.link a:hover,.link a:focus-visible{background-size:100% 100%}
.link__main{display:flex;align-items:flex-start;gap:.7rem;min-width:0;flex:1}
.link__fav{flex:none;width:16px;height:16px;margin-top:.3rem;border-radius:3px}
.link__texts{display:flex;flex-direction:column;gap:.1rem;min-width:0;flex:1}
.link__title{font-weight:600;font-size:1.02rem;display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}
.link__arrow{display:inline-block;color:var(--signal);transition:transform .25s}
.link a:hover .link__arrow{transform:translate(3px,-3px)}
.link__desc{display:block;max-width:42ch;font-size:.8rem;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.link__meta{display:flex;flex-direction:column;align-items:flex-end;gap:.1rem;text-align:right;flex:none}
.link__domain{font-size:.72rem;color:var(--muted)}
.link__go{font:600 .62rem var(--font-mono);letter-spacing:.12em;text-transform:uppercase;opacity:.35;transition:opacity .2s,color .2s}
.link a:hover .link__go{opacity:1;color:var(--signal)}

/* ---------- Premium-Einträge ---------- */
.link--premium a{background-color:rgba(230,168,23,.06);position:relative}
.link--premium a::before{
  content:'⭐';position:absolute;left:.3rem;top:50%;transform:translateY(-50%);
  font-size:.7rem;opacity:.6;
}
.link--premium .link__title{font-weight:700}
.link__premium-badge{
  display:inline-flex;align-items:center;gap:.25rem;
  font:700 .6rem var(--font-mono);letter-spacing:.08em;text-transform:uppercase;
  color:#7a5800;background:linear-gradient(135deg,#ffe9a8,#ffd257);
  border:1.5px solid #c9a227;border-radius:999px;padding:.15rem .55rem;white-space:nowrap;
}

.empty{background:var(--card);border:2px dashed var(--ink);border-radius:12px;padding:2.5rem;text-align:center;
  font:800 1.4rem var(--font-display)}
.linklike{background:none;border:0;padding:0;color:var(--signal);font:inherit;text-decoration:underline;cursor:pointer}

.crumb{margin:1.5rem 0}
.crumb a{color:var(--ink);font:600 .78rem var(--font-mono);text-transform:uppercase;letter-spacing:.1em;text-decoration:none}
.crumb a:hover{color:var(--signal)}

/* CTA am Ende */
.submit-cta{margin:3rem 0 1rem;text-align:center;background:var(--card);border:2px solid var(--ink);
  border-radius:12px;box-shadow:var(--shadow);padding:2.6rem 1.5rem}
.submit-cta h2{margin:0 0 .4rem;font:800 2rem var(--font-display)}
.submit-cta p{margin:0 auto 1.4rem;max-width:52ch;color:var(--muted)}

/* ---------- Seiten/Sheet ---------- */
.sheet{background:var(--card);border:2px solid var(--ink);border-radius:12px;box-shadow:var(--shadow);padding:2.2rem;margin-top:1.5rem}
.sheet h1{font:800 2.4rem var(--font-display);margin-top:0}
.post-card{background:var(--card);border:2px solid var(--ink);border-radius:12px;box-shadow:var(--shadow);
  padding:1.6rem 1.8rem;margin-bottom:1.6rem}
.post-card h2{margin:.2rem 0 .4rem;font:800 1.6rem var(--font-display)}
.post-card h2 a{color:var(--ink);text-decoration:none}
.post-card h2 a:hover{color:var(--signal)}
.post-card .meta{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

.err404{text-align:center;padding:5rem 1rem}
.err404 b{display:block;font:800 clamp(5rem,16vw,10rem)/1 var(--font-display);color:transparent;-webkit-text-stroke:3px var(--ink)}

/* ---------- Buttons ---------- */
.btn{display:inline-block;font:700 .95rem var(--font-display);text-decoration:none;color:var(--ink);
  border:2px solid var(--ink);border-radius:10px;padding:.8rem 1.4rem;box-shadow:4px 4px 0 var(--ink);
  transition:transform .2s,box-shadow .2s;cursor:pointer}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn--primary{background:var(--lime);color:var(--ink)}
.btn--ghost{background:var(--card);color:var(--ink)}

/* ---------- Formular (Eintragen) ---------- */
.submit-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:2.2rem;align-items:start;margin-top:1rem}
.submit-info__title{margin:0 0 .8rem;font:800 clamp(2rem,5vw,3rem)/1.05 var(--font-display)}
.submit-info p{color:var(--muted)}
.rules{list-style:none;margin:1.4rem 0 0;padding:0}
.rules li{position:relative;padding:.65rem .9rem .65rem 3rem;margin-bottom:.6rem;
  background:var(--card);border:2px solid var(--ink);border-radius:10px;font-size:.95rem}
.rules b{position:absolute;left:.8rem;top:50%;transform:translateY(-50%);display:grid;place-items:center;
  width:1.6rem;height:1.6rem;background:var(--ink);color:var(--lime);border-radius:6px;font:800 .85rem var(--font-display)}

.submit-card{background:var(--card);border:2px solid var(--ink);border-radius:12px;box-shadow:var(--shadow);padding:1.8rem}
.field{margin-bottom:1.1rem}
.field label{display:block;font:600 .8rem var(--font-mono);letter-spacing:.08em;text-transform:uppercase;margin-bottom:.4rem}
.field label span{color:var(--signal)}
.field small{text-transform:none;letter-spacing:0;color:var(--muted)}
.field input,.field select,.field textarea{width:100%;padding:.75rem .9rem;font:500 .95rem var(--font-body);
  color:var(--ink);background:var(--paper);border:2px solid var(--ink);border-radius:8px;
  transition:box-shadow .2s,border-color .2s}
.field textarea{resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 4px rgba(15,139,90,.2)}
.hp-field{position:absolute;left:-9999px}
.form-note{font-size:.75rem;color:var(--muted);margin-top:.8rem}

.banner{padding:.9rem 1.1rem;border:2px solid var(--ink);border-radius:10px;margin-bottom:1.3rem;font-size:.95rem}
.banner--ok{background:#dff3e4}
.banner--warn{background:#fdeccd}
.banner--err{background:#fbdcd2}

/* Plans */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:.4rem 0 0}
.plan{position:relative;display:block;cursor:pointer}
.plan input{position:absolute;opacity:0;pointer-events:none}
.plan__card{display:flex;flex-direction:column;gap:.45rem;height:100%;background:var(--paper);
  border:2px solid var(--ink);border-radius:12px;padding:1.1rem 1.2rem;
  transition:transform .2s,box-shadow .2s,background .2s,border-color .2s}
.plan:hover .plan__card{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.plan input:checked + .plan__card{background:#eaf6ee;border-color:var(--green);box-shadow:5px 5px 0 var(--green)}
.plan input:focus-visible + .plan__card{outline:3px solid var(--signal);outline-offset:2px}
.plan__name{font:800 1.1rem var(--font-display)}
.plan__price{font:800 1.6rem var(--font-display);color:var(--green)}
.plan--paid .plan__price{color:var(--signal)}
.plan__desc{font-size:.85rem;color:var(--muted)}
.plan__tag{align-self:flex-start;font:600 .62rem var(--font-mono);letter-spacing:.12em;text-transform:uppercase;
  border:1.5px solid var(--ink);border-radius:999px;padding:.25rem .6rem;background:var(--card)}
.plan-note{font-size:.85rem;color:var(--muted);margin:.7rem 0}

.snippet{display:flex;gap:.6rem;align-items:stretch;margin:.6rem 0}
.snippet code{flex:1;display:block;background:var(--ink);color:var(--lime);
  font:500 .78rem/1.5 var(--font-mono);padding:.8rem .9rem;border-radius:8px;overflow-x:auto;white-space:pre}
.copy-btn{flex:none;background:var(--lime);border:2px solid var(--ink);border-radius:8px;
  font:600 .75rem var(--font-mono);padding:0 .9rem;cursor:pointer;box-shadow:3px 3px 0 var(--ink);transition:transform .15s}
.copy-btn:hover{transform:translate(-1px,-1px)}

.check{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem;margin:.9rem 0}
.check input{width:1.1rem;height:1.1rem;margin-top:.15rem;accent-color:var(--green);flex:none}

.pay-box{background:#fdf3e7;border:2px solid var(--ink);border-radius:10px;padding:1rem 1.1rem;margin:.4rem 0}

/* ---------- Footer ---------- */
.site-footer{margin-top:3rem;background:var(--ink);color:var(--paper)}
.site-footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2.5rem;padding:3.2rem 0 2.2rem}
.site-footer__wordmark{margin:0;font:800 1.7rem var(--font-display)}
.site-footer__wordmark span{color:var(--signal)}
.site-footer__about{color:#aab5ad;max-width:38ch}
.site-footer h3{font:600 .68rem var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--lime)}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin:.35rem 0}
.site-footer a{color:var(--paper);text-decoration:none}
.site-footer a:hover{color:var(--lime);text-decoration:underline;text-underline-offset:3px}
.site-footer__base{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  border-top:1px solid rgba(238,241,236,.22);padding:1.1rem 0 1.4rem;font:500 .74rem var(--font-mono)}
.to-top{background:var(--lime);color:var(--ink);border-radius:999px;padding:.5rem 1.1rem;font-weight:600;
  text-decoration:none;transition:transform .2s}
.to-top:hover{transform:translateY(-3px);color:var(--ink);text-decoration:none}

/* ---------- Bewegung ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

.search-form{display:flex;gap:.5rem;margin-top:1rem}
.search-form input{flex:1;padding:.7rem .9rem;border:2px solid var(--ink);border-radius:8px;font:inherit;background:var(--paper)}
.search-form button{background:var(--ink);color:var(--lime);border:2px solid var(--ink);border-radius:8px;padding:.7rem 1.2rem;font:600 .8rem var(--font-mono);cursor:pointer}

/* ---------- Info-Box auf Startseite ---------- */
.info-box{background:var(--card);border:2px solid var(--ink);border-radius:12px;box-shadow:var(--shadow);
  padding:2rem 2.2rem;margin:2rem 0}
.info-box__title{margin:0 0 1rem;font:800 1.7rem var(--font-display)}
.info-box__text{margin:0;font-size:1rem;color:var(--muted);line-height:1.7}
.info-box__text p{margin:.6rem 0}
.info-box__text a{color:var(--cobalt);font-weight:600}

/* ---------- Footer-Menüs ---------- */
.site-footer ul.menu{list-style:none;margin:0;padding:0}
.site-footer ul.menu li{margin:.35rem 0}
.site-footer ul.menu li a{color:var(--paper);text-decoration:none;display:inline-block;transition:color .2s}
.site-footer ul.menu li a:hover{color:var(--lime)}
.site-footer ul.menu li.current-menu-item a{color:var(--lime);font-weight:600}

/* ---------- Rechtliche Seiten ---------- */
.sheet--legal{max-width:820px;margin:1.5rem auto}
.sheet--legal h1{font:800 2.4rem var(--font-display);margin-top:0}
.sheet--legal h2{font:800 1.5rem var(--font-display);margin-top:2rem;padding-top:1.5rem;border-top:2px dashed rgba(19,26,22,.2)}
.sheet--legal h3{font:700 1.15rem var(--font-display);margin-top:1.5rem}
.sheet--legal p{line-height:1.75;margin:.8rem 0}
.sheet--legal a{color:var(--cobalt)}
.sheet--legal ul,.sheet--legal ol{padding-left:1.5rem;line-height:1.75}
.legal-footer-note{text-align:center;margin-top:1.5rem;color:var(--muted);font-size:.8rem}

@media (max-width:820px){
  .masthead__panel{grid-template-columns:1fr}
  .submit-grid{grid-template-columns:1fr}
  .site-footer__grid{grid-template-columns:1fr}
  .cat__head{flex-wrap:wrap}
  .cat__count{margin-left:0}
  .plans{grid-template-columns:1fr}
}
@media (max-width:720px){
  .board-head{flex-direction:column;align-items:flex-start;gap:1rem}
  .board-head__right{width:100%}
  .board-head__rule{width:100%;justify-content:center;font-size:.95rem}
  .board-head__rule strong{font-size:1.3rem}
  .directory-head{padding:1.5rem 1.3rem}
  .directory-head__inner{flex-direction:column;align-items:flex-start;gap:1rem}
  .directory-head__icon{width:2.8rem;height:2.8rem;font-size:1.6rem}
  .directory-head__chips{justify-content:flex-start;width:100%}
  .directory-head__chip{font-size:.75rem;padding:.45rem .8rem}
  .eod{flex-direction:column;align-items:flex-start;padding:1.3rem 1.2rem 1.3rem 1.5rem}
  .eod__meta{align-items:flex-start;width:100%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}

/* ---------- Legal Navigation (zwischen rechtlichen Seiten wechseln) ---------- */
.legal-nav{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin:1.5rem 0 2rem;
  padding:1rem;
  background:var(--paper);
  border:2px solid var(--ink);
  border-radius:10px;
}
.legal-nav__link{
  font:600 .75rem var(--font-mono);
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--ink);
  background:var(--card);
  border:1.5px solid var(--ink);
  border-radius:999px;
  padding:.45rem 1rem;
  transition:all .2s;
}
.legal-nav__link:hover{
  background:var(--lime);
  transform:translateY(-2px);
}
.legal-nav__link--active{
  background:var(--ink);
  color:var(--lime);
  border-color:var(--ink);
}
.legal-nav__link--active:hover{
  background:var(--ink);
  color:var(--lime);
}

.legal-content{
  line-height:1.75;
}
.legal-content h2{
  font:800 1.5rem var(--font-display);
  margin-top:2.2rem;
  padding-top:1.5rem;
  border-top:2px dashed rgba(19,26,22,.2);
}
.legal-content h2:first-child{
  margin-top:0;
  padding-top:0;
  border-top:0;
}
.legal-content h3{
  font:700 1.15rem var(--font-display);
  margin-top:1.5rem;
}
.legal-content p{margin:.8rem 0}
.legal-content ul,
.legal-content ol{
  padding-left:1.5rem;
  margin:.8rem 0;
}
.legal-content li{
  margin:.4rem 0;
}
.legal-content a{
  color:var(--cobalt);
  font-weight:600;
}
.legal-content a:hover{
  color:var(--signal);
}

/* ---------- Legal Navigation (zwischen rechtlichen Seiten wechseln) ---------- */
.legal-nav{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin:1.5rem 0 2rem;
  padding:1rem;
  background:var(--paper);
  border:2px solid var(--ink);
  border-radius:10px;
  box-shadow:4px 4px 0 var(--ink);
}
.legal-nav__link{
  font:600 .75rem var(--font-mono);
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--ink);
  background:var(--card);
  border:1.5px solid var(--ink);
  border-radius:999px;
  padding:.45rem 1rem;
  transition:all .2s;
}
.legal-nav__link:hover{
  background:var(--lime);
  transform:translateY(-2px);
  box-shadow:3px 3px 0 var(--ink);
}
.legal-nav__link--active{
  background:var(--ink);
  color:var(--lime);
  border-color:var(--ink);
}
.legal-nav__link--active:hover{
  background:var(--ink);
  color:var(--lime);
}

.legal-content{
  line-height:1.75;
}
.legal-content h2{
  font:800 1.5rem var(--font-display);
  margin-top:2.2rem;
  padding-top:1.5rem;
  border-top:2px dashed rgba(19,26,22,.2);
}
.legal-content h2:first-child{
  margin-top:0;
  padding-top:0;
  border-top:0;
}
.legal-content h3{
  font:700 1.15rem var(--font-display);
  margin-top:1.5rem;
}
.legal-content p{margin:.8rem 0}
.legal-content ul,
.legal-content ol{
  padding-left:1.5rem;
  margin:.8rem 0;
}
.legal-content li{margin:.4rem 0}
.legal-content a{color:var(--cobalt);font-weight:600}
.legal-content a:hover{color:var(--signal)}

.legal-footer-note{
  text-align:center;
  margin-top:2rem;
  padding-top:1.5rem;
  border-top:1px solid rgba(19,26,22,.15);
}

/* ---------- Alternative Kontaktmöglichkeiten ---------- */
.contact-alt{
  margin-top:2rem;
  background:var(--card);
  border:2px solid var(--ink);
  border-radius:12px;
  box-shadow:var(--shadow);
  padding:1.4rem 1.4rem 1.2rem;
  position:relative;
  overflow:hidden;
}
.contact-alt::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:6px;
  background:linear-gradient(90deg, var(--signal), var(--lime));
}
.contact-alt__head{
  display:flex;
  align-items:center;
  gap:.6rem;
  margin-bottom:1rem;
  padding-bottom:.8rem;
  border-bottom:2px dashed rgba(19,26,22,.18);
}
.contact-alt__icon{
  font-size:1.4rem;
  line-height:1;
}
.contact-alt__label{
  font:800 1.1rem var(--font-display);
  text-transform:uppercase;
  letter-spacing:.02em;
  color:var(--ink);
}

.contact-alt__item{
  display:flex;
  align-items:center;
  gap:.8rem;
  padding:.8rem .9rem;
  margin-bottom:.5rem;
  background:var(--paper);
  border:1.5px solid var(--ink);
  border-radius:8px;
  transition:transform .2s, box-shadow .2s;
}
.contact-alt__item:hover{
  transform:translate(-2px,-2px);
  box-shadow:4px 4px 0 var(--ink);
}
.contact-alt__icon-small{
  flex:none;
  display:grid;
  place-items:center;
  width:2.2rem;
  height:2.2rem;
  background:var(--lime);
  border:1.5px solid var(--ink);
  border-radius:8px;
  font-size:1.1rem;
}
.contact-alt__text{
  display:flex;
  flex-direction:column;
  gap:.15rem;
  min-width:0;
}
.contact-alt__text strong{
  font:700 .7rem var(--font-mono);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}
.contact-alt__text a{
  color:var(--ink);
  font-weight:600;
  font-size:1rem;
  text-decoration:none;
  word-break:break-all;
  transition:color .2s;
}
.contact-alt__text a:hover{
  color:var(--signal);
}

/* Warn-Hinweis: Kein Support */
.contact-alt__notice{
  display:flex;
  gap:.7rem;
  margin-top:1rem;
  padding:.9rem 1rem;
  background:#fff5cc;
  border:1.5px solid #c9a227;
  border-left:5px solid var(--signal);
  border-radius:8px;
}
.contact-alt__notice-icon{
  flex:none;
  font-size:1.3rem;
  line-height:1;
  margin-top:.1rem;
}
.contact-alt__notice strong{
  display:block;
  font:800 .95rem var(--font-display);
  color:#7a5800;
  margin-bottom:.25rem;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.contact-alt__notice p{
  margin:0;
  font-size:.85rem;
  line-height:1.55;
  color:#7a5800;
}
.contact-alt__notice p strong{
  display:inline;
  text-transform:none;
  letter-spacing:0;
  color:#5a3d00;
}

/* ---------- Antwortzeiten ---------- */
.contact-times{
  margin-top:1.4rem;
  padding:1rem 1.2rem;
  background:var(--ink);
  color:var(--paper);
  border-radius:10px;
  display:flex;
  flex-direction:column;
  gap:.6rem;
}
.contact-times__row{
  display:flex;
  align-items:center;
  gap:.7rem;
  font-size:.9rem;
  padding-bottom:.5rem;
  border-bottom:1px solid rgba(238,241,236,.15);
}
.contact-times__row:last-child{
  padding-bottom:0;
  border-bottom:0;
}
.contact-times__row span:first-child{
  flex:none;
  font-size:1.1rem;
}
.contact-times__row strong{
  color:var(--lime);
}

@media (max-width:820px){
  .contact-alt{padding:1.2rem 1rem 1rem}
  .contact-alt__notice{padding:.7rem .8rem}
  .contact-alt__text a{font-size:.9rem}
}

/* ---------- Eintrag bearbeiten (Hinweis-Box) ---------- */
.sheet--legal .banner{margin:1.5rem 0}
.sheet--legal form .btn{margin-top:.5rem}

/* ---------- Social-Media-Icons ---------- */
.wk-social{
  display:flex;
  align-items:center;
  gap:.5rem;
}
.wk-social--right{
  margin-left:auto;
}
.wk-social--left{
  margin-right:auto;
}
.wk-social__link{
  display:grid;
  place-items:center;
  width:2.3rem;
  height:2.3rem;
  background:var(--card,#fff);
  color:var(--ink,#131a16);
  border:2px solid var(--ink,#131a16);
  border-radius:10px;
  box-shadow:3px 3px 0 var(--ink,#131a16);
  transition:all .2s ease;
}
.wk-social__link svg{
  width:1.1rem;
  height:1.1rem;
}
.wk-social__link:hover{
  transform:translate(-2px,-2px);
  box-shadow:5px 5px 0 var(--ink,#131a16);
  color:#fff;
}
.wk-social__link--facebook:hover{ background:#1877f2; border-color:#1877f2; box-shadow:5px 5px 0 #0d5bbf; }
.wk-social__link--twitter:hover{ background:#000; border-color:#000; box-shadow:5px 5px 0 #333; }
.wk-social__link--pinterest:hover{ background:#e60023; border-color:#e60023; box-shadow:5px 5px 0 #a3001a; }

/* Auf der Startseite im Masthead */
.masthead .wk-social{
  position:absolute;
  top:1.5rem;
  z-index:10;
}
.masthead .wk-social--right{ right:1.5rem; }
.masthead .wk-social--left{ left:1.5rem; }
.masthead{ position:relative; }

@media (max-width:600px){
  .wk-social__link{ width:2rem; height:2rem; }
  .wk-social__link svg{ width:.95rem; height:.95rem; }
  .masthead .wk-social{ position:static; margin:0 auto 1rem; }
  .masthead .wk-social--right, .masthead .wk-social--left{ margin:0 auto 1rem; }
}