/*
Theme Name: Aetheris Wissen
Theme URI: https://wissen.aetheris-gmbh.de/
Author: Aetheris GmbH i. G.
Description: Wissensseite der Aetheris GmbH i. G. — uebernimmt Logo, Kopf- und Fusszeile
             der Hauptwebsite aetheris-gmbh.de eins zu eins und ergaenzt sie um eine
             Seitenspalte mit dem Line-Up der Aetheris-Produkte.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 8.0
License: proprietaer
Text Domain: aetheris-wissen
*/

/* ============================================================
   HERKUNFT DIESER DATEI

   Die Bloecke "TOKENS", "BUTTONS", "NAVIGATION" und "FOOTER" sind
   woertlich aus aetheris-website/assets/site.css uebernommen. Sie
   sind bewusst kopiert und NICHT per <link> von aetheris-gmbh.de
   geladen: eine Wissensseite soll nicht bei jedem Aufruf auf einen
   fremden Host warten und beim naechsten Umbau dort weiss werden.

   Preis dafuer: Aenderungen an site.css wandern nicht von selbst
   hierher. Wer dort Farben, Nav oder Footer anfasst, zieht sie hier
   nach und hebt die Version im Kopf dieser Datei (die Version ist
   der Cache-Buster fuer style.css).
   ============================================================ */

/* ============================================================
   SCHRIFT — Inter, selbst gehostet

   site.css nennt Inter seit jeher an erster Stelle, geladen hat sie aber nie
   jemand: aetheris-gmbh.de faellt deshalb auf Segoe UI zurueck. Hier liegen
   die Dateien im Theme.

   Selbst gehostet und NICHT ueber Google Fonts: der CDN-Aufruf uebertraegt die
   IP des Besuchers in die USA (LG Muenchen I, 20.01.2022, 3 O 17493/20). Auf
   einer deutschen Seite ohne Datenschutzerklaerung waere das doppelt unklug.
   Quelle der Dateien: Hetzner/synergy-360-site/html/assets — dieselbe Fassung,
   die schon in Synergy 360, SynergyScope und Synergy-Time laeuft.
   ============================================================ */
@font-face{
  font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(assets/inter-var-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(assets/inter-var-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root{
  /* Farbwelt: royale Navy/Weiss-Basis (Markenfarben Aetheris) */
  --bg:            #f6f7f8;
  --bg-elevated:   #ffffff;
  --ink:           #061739;   /* tiefes Koenigsblau — dunkle Akzentflaechen */
  --ink-soft:      #0a2050;
  --text:          #111b2e;
  --text-muted:    #5a6678;
  --text-invert:   #eef1f6;
  --text-invert-muted:#9fb0c8;
  --line:          #e4e8ee;
  --line-dark:     rgba(255,255,255,.12);

  /* Signatur-Akzent: Champagner-Gold (aus dem Logo) */
  --accent:        #c0a878;
  --accent-2:      #d8bd84;
  --accent-deep:   #9a7c40;
  --accent-grad:   linear-gradient(120deg,var(--accent-deep) 0%,var(--accent-2) 100%);
  --accent-glow:   color-mix(in srgb, var(--accent) 34%, transparent);
  --accent-tint:   color-mix(in srgb, var(--accent) 14%, transparent);
  --accent-line:   color-mix(in srgb, var(--accent) 48%, transparent);

  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;

  --shadow-sm: 0 1px 2px rgba(11,14,20,.05), 0 4px 16px rgba(11,14,20,.04);
  --shadow:    0 8px 40px rgba(11,14,20,.10);
  --shadow-lg: 0 24px 80px rgba(11,14,20,.16);

  --ease: cubic-bezier(.22,.61,.36,1);
  --nav-h: 156px;

  /* Breiter als die 1200 px der Hauptwebsite: eine Wissensseite hat neben dem
     Text noch die Seitenspalte stehen, bei 1200 blieben dem Beitrag nur
     775 px. Kopf, Inhalt und Fuss laufen bewusst auf DERSELBEN Breite —
     ein breiterer Inhalt unter einer schmaleren Kopfzeile saehe verrutscht
     aus. Gestaltung von Kopf und Fuss ist unveraendert. */
  --maxw: 1440px;
  --sidebar-w: 300px;
  --font: "Inter","Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{
  scroll-behavior:smooth;
  scroll-padding-top:var(--nav-h);
  -webkit-text-size-adjust:100%;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:var(--accent);color:#fff}

h1,h2,h3{line-height:1.12;letter-spacing:-.02em;font-weight:600}
h1{font-size:clamp(2.1rem,4.6vw,3.2rem);font-weight:600;letter-spacing:-.03em}
h2{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:600}
h3{font-size:1.18rem;letter-spacing:-.01em;font-weight:600}
p{color:var(--text-muted)}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(24px,2.6vw,44px)}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-deep);
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--accent-grad);border-radius:2px}
.lead{font-size:1.15rem}

/* Sprungmarke fuer Tastatur-Nutzer — bleibt unsichtbar, bis sie Fokus bekommt. */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:1100;
  background:var(--ink);color:#fff;padding:12px 20px;border-radius:0 0 var(--r-sm) 0;
  font-weight:600;
}
.skip-link:focus{left:0}

/* Nur fuer Screenreader — sichtbar bleibt nichts. */
.sr-only,
.screen-reader-text{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* Sichtbarer Fokus — die Marken-Goldkante statt des Browser-Standards. */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:4px;
}

/* ============================================================
   BUTTONS  (aus site.css)
   ============================================================ */
.btn{
  --pad:14px 26px;
  display:inline-flex;align-items:center;gap:10px;
  padding:var(--pad);border-radius:100px;
  font-weight:600;font-size:.98rem;cursor:pointer;border:none;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),background .3s var(--ease);
  position:relative;white-space:nowrap;
}
.btn .arr{transition:transform .4s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn-accent{background:var(--ink);color:var(--text-invert);box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.btn-accent::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent-grad);transition:width .4s var(--ease)}
.btn-accent:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.btn-accent:hover::before{width:6px}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-2px)}

/* Sanfter Gold-Fill beim Hover — Gradienten lassen sich nicht per background
   transitionen, daher als Overlay-Pseudoelement, das per opacity einblendet. */
.nav-cta{
  position:relative;z-index:0;overflow:hidden;background:transparent;
  transition:transform .4s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.nav-cta::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:var(--accent-grad);opacity:0;
  transition:opacity .35s var(--ease);z-index:-1;
}
.nav-cta:hover::before{opacity:1}
.nav-cta:hover{color:#1c1303;border-color:var(--accent-deep);transform:translateY(-2px)}

/* ============================================================
   NAVIGATION  (aus site.css) — Navy-Leiste mit goldenem Rand
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:1000;
  display:flex;align-items:center;
  background:var(--ink);
  border-bottom:1.5px solid var(--accent);
  transition:background .5s var(--ease),box-shadow .5s var(--ease);
}
.nav.scrolled{background:var(--ink);box-shadow:0 12px 34px rgba(6,23,57,.30)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;width:100%}
.brand{display:flex;align-items:center;gap:12px}
/* Vollmarke (WebP mit eingebranntem Navy-Hintergrund) — Hintergrund per lighten wegblenden */
.brand-logo-img{height:126px;width:auto;display:block;mix-blend-mode:lighten;transition:transform .5s var(--ease)}
.brand:hover .brand-logo-img{transform:translateY(-1px) scale(1.02)}
.footer .brand-logo-img{height:104px}
@media(max-width:880px){.brand-logo-img{height:78px}}
.nav-links{display:flex;align-items:center;gap:6px}
.nav-links a{
  position:relative;padding:9px 16px;border-radius:100px;
  font-size:.95rem;font-weight:500;color:var(--text-invert-muted);
  transition:color .35s var(--ease),background .35s var(--ease);
}
.nav-links a::after{
  content:"";position:absolute;left:16px;right:16px;bottom:4px;height:2px;
  background:var(--accent-grad);border-radius:2px;
  transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease);
}
.nav-links a:hover{color:#fff}
.nav-links a.active,
.nav-links .current-menu-item > a{color:#fff}
.nav-links a.active::after,
.nav-links .current-menu-item > a::after{transform:scaleX(1)}
.nav-cta{margin-left:14px;background:transparent;color:#fff;border:1px solid var(--accent-line)}
.nav-cta::after{display:none}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px}
.burger span{width:24px;height:2px;background:#fff;border-radius:2px;transition:.4s var(--ease)}

/* wp_nav_menu liefert eine <ul>; sie soll sich wie die Link-Reihe der
   Hauptwebsite verhalten, damit beide Kopfzeilen identisch aussehen. */
.nav-links ul{list-style:none;display:contents}
.nav-links li{display:block}

@media(max-width:880px){
  .nav-links{
    position:fixed;inset:var(--nav-h) 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(6,23,57,.98);backdrop-filter:blur(16px);
    padding:14px 20px 22px;box-shadow:var(--shadow);
    transform:translateY(-130%);transition:transform .5s var(--ease);
    visibility:hidden;pointer-events:none;
  }
  .nav-links.open{transform:translateY(0);visibility:visible;pointer-events:auto}
  .nav-links a{padding:14px 12px}
  .nav-links a::after{display:none}
  .nav-cta{margin:8px 0 0;justify-content:center}
  .burger{display:flex}
  .nav.menu-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav.menu-open .burger span:nth-child(2){opacity:0}
  .nav.menu-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* ============================================================
   FOOTER  (aus site.css)
   ============================================================ */
.footer{background:var(--ink);color:var(--text-invert-muted);padding:64px 0 36px}
.footer .top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;padding-bottom:40px;border-bottom:1px solid var(--line-dark)}
.footer .cols{display:flex;gap:64px;flex-wrap:wrap}
.footer h4{color:#fff;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px}
.footer ul{list-style:none;display:grid;gap:10px}
.footer ul a{color:var(--text-invert-muted);transition:color .3s var(--ease);font-size:.95rem}
.footer ul a:hover{color:#fff}
.footer .bottom{padding-top:26px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.86rem}
.footer .footer-brand p{color:var(--text-invert-muted)}

/* zur Spitze (aus site.css) */
.totop{
  position:fixed;right:24px;bottom:24px;width:48px;height:48px;border-radius:50%;
  background:var(--ink);color:#fff;border:none;cursor:pointer;display:grid;place-items:center;
  opacity:0;transform:translateY(16px) scale(.9);pointer-events:none;
  transition:opacity .45s var(--ease),transform .45s var(--ease),background .3s;z-index:900;box-shadow:var(--shadow)
}
.totop.show{opacity:1;transform:none;pointer-events:auto}
.totop:hover{background:var(--accent)}

/* ============================================================
   AB HIER: nur fuer die Wissensseite — Seitenkopf, zweispaltiges
   Raster mit Seitenspalte, Artikeltypografie.
   ============================================================ */

/* --- Seitenkopf: dieselbe Bildsprache wie der Hero der Hauptwebsite --- */
.page-head{
  position:relative;overflow:hidden;
  padding-top:calc(var(--nav-h) + clamp(44px,6vw,84px));
  padding-bottom:clamp(34px,4.5vw,58px);
}
.page-head-bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.page-head-bg::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(60% 50% at 80% -5%,var(--accent-tint),transparent 60%),
    radial-gradient(50% 45% at 5% 10%,var(--accent-tint),transparent 55%);
}
.grid-lines{
  position:absolute;inset:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 90% at 70% 0%,#000 30%,transparent 75%);
  mask-image:radial-gradient(120% 90% at 70% 0%,#000 30%,transparent 75%);
  opacity:.7;
}
.page-head h1{margin:18px 0 0;color:var(--ink)}
.page-head .lead{margin-top:16px;color:var(--text-muted)}

/* --- Raster: Inhalt + Seitenspalte --- */
.layout{
  display:grid;grid-template-columns:minmax(0,1fr) var(--sidebar-w);gap:clamp(28px,3.2vw,48px);
  align-items:start;padding-bottom:clamp(70px,9vw,110px);
}
@media(max-width:1000px){.layout{grid-template-columns:1fr}}

/* --- Beitragsliste --- */
.post-list{display:grid;gap:20px}
.post-card{
  display:block;background:var(--bg-elevated);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:30px 32px;position:relative;overflow:hidden;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease);
}
.post-card::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent-grad);
  transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease);
}
.post-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent}
.post-card:hover::after{transform:scaleY(1)}
.post-card h2{font-size:1.42rem;color:var(--ink);margin:8px 0 0}
.post-card p{margin-top:12px;font-size:.99rem}
.post-card .go{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:.9rem;font-weight:600;color:var(--accent-deep)}
.post-card:hover .go .arr{transform:translateX(5px)}
.post-card .go .arr{transition:transform .4s var(--ease)}
.post-thumb{
  display:block;margin:-30px -32px 22px;border-bottom:1px solid var(--line);
  aspect-ratio:16/7;object-fit:cover;width:calc(100% + 64px);max-width:none;
}
.entry-meta{
  font-size:.82rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent-deep);
}
.entry-meta a{color:inherit}
.entry-meta a:hover{color:var(--ink)}

/* --- Artikel --- */
.article{
  background:var(--bg-elevated);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(28px,3.4vw,52px);box-shadow:var(--shadow-sm);
}
.article > header{padding-bottom:24px;border-bottom:1px solid var(--line);margin-bottom:30px}
.article h1{color:var(--ink);margin:12px 0 0;font-size:clamp(1.8rem,3.4vw,2.6rem)}
.article-figure{margin:0 0 30px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.article-figure img{display:block;width:100%}

/* Fliesstext laeuft ueber die volle Spaltenbreite — Hausregel, nicht auf halber
   Breite kappen. Weil die Spalte breit ist, wird die Schrift eine Spur groesser
   und die Zeilen stehen luftiger: eine lange Zeile in kleiner Schrift ist der
   Punkt, an dem das Auge beim Ruecksprung die naechste Zeile verliert. */
.entry-content{font-size:1.13rem;line-height:1.68;color:var(--text)}
.entry-content > * + *{margin-top:22px}
.entry-content p{color:var(--text-muted)}
.entry-content h2{color:var(--ink);margin-top:44px;font-size:clamp(1.45rem,2.4vw,1.85rem)}
.entry-content h3{color:var(--ink);margin-top:34px;font-size:1.24rem}
.entry-content h4{color:var(--ink);margin-top:28px;font-size:1.06rem;font-weight:600}
.entry-content h2 + *,.entry-content h3 + *,.entry-content h4 + *{margin-top:12px}
.entry-content a{color:var(--accent-deep);font-weight:500;box-shadow:inset 0 -1px 0 var(--accent-line);transition:box-shadow .3s var(--ease),color .3s var(--ease)}
.entry-content a:hover{color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent)}
.entry-content ul,.entry-content ol{padding-left:1.3em;display:grid;gap:9px;color:var(--text-muted)}
.entry-content li::marker{color:var(--accent-deep)}
.entry-content blockquote{
  border-left:3px solid var(--accent);background:var(--bg);border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:18px 24px;font-size:1.08rem;color:var(--text);
}
.entry-content blockquote p{color:var(--text)}
.entry-content img,.entry-content iframe{border-radius:var(--r);display:block}
.entry-content figure{margin:0}
.entry-content figcaption{font-size:.86rem;color:var(--text-muted);margin-top:9px}
.entry-content code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em;
  background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:2px 6px;
}
.entry-content pre{
  background:var(--ink);color:var(--text-invert);border-radius:var(--r);
  padding:22px 24px;overflow-x:auto;font-size:.92rem;
}
.entry-content pre code{background:none;border:none;padding:0;color:inherit}
.entry-content table{width:100%;border-collapse:collapse;font-size:.96rem}
.entry-content th,.entry-content td{border:1px solid var(--line);padding:11px 14px;text-align:left}
.entry-content th{background:var(--bg);color:var(--text);font-weight:600}
.entry-content hr{border:none;border-top:1px solid var(--line)}

/* --- Blaettern --- */
.pagination{margin-top:34px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pagination .page-numbers{
  display:inline-grid;place-items:center;min-width:44px;height:44px;padding:0 14px;
  border:1px solid var(--line);border-radius:100px;background:var(--bg-elevated);
  font-size:.95rem;font-weight:600;color:var(--text-muted);
  transition:border-color .35s var(--ease),color .35s var(--ease),transform .35s var(--ease);
}
.pagination a.page-numbers:hover{border-color:var(--accent);color:var(--ink);transform:translateY(-2px)}
.pagination .page-numbers.current{background:var(--ink);border-color:var(--ink);color:#fff}
.pagination .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --- Blaettern zwischen Beitraegen --- */
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px}
@media(max-width:640px){.post-nav{grid-template-columns:1fr}}
.post-nav a{
  display:block;background:var(--bg-elevated);border:1px solid var(--line);border-radius:var(--r);
  padding:18px 22px;transition:border-color .35s var(--ease),transform .35s var(--ease);
}
.post-nav a:hover{border-color:var(--accent);transform:translateY(-2px)}
.post-nav .dir{font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-deep)}
.post-nav .ttl{display:block;margin-top:6px;font-weight:600;color:var(--ink);line-height:1.3}
.post-nav .next{text-align:right}

/* --- Kommentare --- */
.comments{
  margin-top:26px;background:var(--bg-elevated);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:clamp(26px,3vw,40px);
}
.comments-title{font-size:1.24rem;color:var(--ink)}
.comments-closed{margin-top:14px}
.comment-list{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:18px}
.comment-list ol.children{list-style:none;margin:18px 0 0 clamp(16px,3vw,34px);padding:0;display:grid;gap:18px}
.comment-list .comment-body{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;
}
.comment-list .comment-author{display:flex;align-items:center;gap:11px;font-weight:600;color:var(--text)}
.comment-list .comment-author img{border-radius:50%;flex:none}
.comment-list .comment-author .says{display:none}
.comment-list .comment-metadata{font-size:.82rem;color:var(--text-muted);margin-top:4px}
.comment-list .comment-metadata a{color:inherit}
.comment-list .comment-content{margin-top:12px}
.comment-list .comment-content p{color:var(--text-muted)}
.comment-list .reply{margin-top:12px;font-size:.88rem;font-weight:600}
.comment-list .reply a{color:var(--accent-deep)}
.comment-list .comment-awaiting-moderation{font-size:.86rem;color:var(--accent-deep);margin-top:8px}

.comment-respond{margin-top:30px;padding-top:26px;border-top:1px solid var(--line)}
.comments > .comment-respond:first-child{margin-top:0;padding-top:0;border-top:none}
.comment-reply-title{font-size:1.18rem;color:var(--ink)}
.comment-reply-title small{font-size:.88rem;font-weight:500;margin-left:10px}
.comment-reply-title small a{color:var(--accent-deep)}
.comment-notes,.comment-form-cookies-consent label{font-size:.88rem;color:var(--text-muted)}
.comment-form{margin-top:18px;display:grid;gap:18px}
.comment-form p{margin:0}
.comment-form label{display:block;font-weight:600;font-size:.92rem;color:var(--text);margin-bottom:8px}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea{
  width:100%;font:inherit;font-size:.98rem;color:var(--text);background:var(--bg);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:13px 16px;
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease);
}
.comment-form textarea{resize:vertical;min-height:130px}
.comment-form input:focus,.comment-form textarea:focus{
  outline:none;border-color:var(--accent);background:var(--bg-elevated);
  box-shadow:0 0 0 4px var(--accent-tint);
}
.comment-form-author,.comment-form-email,.comment-form-url{max-width:520px}
.comment-form-cookies-consent{display:flex;align-items:flex-start;gap:10px}
.comment-form-cookies-consent input{margin-top:4px;flex:none;accent-color:var(--accent-deep)}
.comment-form-cookies-consent label{margin:0;font-weight:400}
.form-submit{margin:0}
.form-submit .submit{width:auto}

/* --- Leerzustand --- */
.empty{
  background:var(--bg-elevated);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(30px,4vw,56px);text-align:center;
}
.empty h2{color:var(--ink)}
.empty p{margin-top:12px}
.empty .btn{margin-top:24px}

/* ============================================================
   SEITENSPALTE — Suche + Produkt-Line-Up
   ============================================================ */
.sidebar{position:sticky;top:calc(var(--nav-h) + 24px);display:grid;gap:20px}
@media(max-width:1000px){.sidebar{position:static;top:auto}}

.side-block{
  background:var(--bg-elevated);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:24px 24px 26px;box-shadow:var(--shadow-sm);
}
.side-block h2{
  font-size:.82rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:16px;
}

/* Suche */
.search-form{display:flex;gap:8px}
.search-form input[type="search"]{
  flex:1;min-width:0;font:inherit;font-size:.95rem;color:var(--text);background:var(--bg);
  border:1px solid var(--line);border-radius:100px;padding:11px 18px;
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease);
}
.search-form input[type="search"]:focus{
  outline:none;border-color:var(--accent);background:var(--bg-elevated);
  box-shadow:0 0 0 4px var(--accent-tint);
}
.search-form button{
  flex:none;width:42px;height:42px;border-radius:50%;border:none;cursor:pointer;
  background:var(--ink);color:#fff;display:grid;place-items:center;
  transition:background .3s var(--ease),transform .3s var(--ease);
}
.search-form button:hover{background:var(--accent-deep);transform:translateY(-1px)}
.search-form button svg{width:17px;height:17px}

/* Produkt-Line-Up: eine Navy-Tafel, damit alle sechs Logos in derselben
   hellen Tonvariante nebeneinander bestehen koennen. Es gibt von den
   Synergy-Marken keine dunkle Fassung — auf Weiss wuerden sie verschwinden. */
.produkte{
  background:var(--ink);border:1px solid var(--accent-line);border-radius:var(--r-lg);
  padding:26px 22px 22px;position:relative;overflow:hidden;
  box-shadow:0 18px 50px -30px rgba(6,23,57,.9);
}
.produkte::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 45% at 90% 0%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 62%);
}
.produkte > *{position:relative}
.produkte h2{
  font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-2);margin:0 0 6px;display:flex;align-items:center;gap:9px;
}
.produkte h2::before{content:"";width:22px;height:2px;background:var(--accent-grad);border-radius:2px;flex:none}
.produkte .produkte-sub{color:var(--text-invert-muted);font-size:.88rem;margin-bottom:18px}

/* Ein Eintrag = Logo, darunter die Einordnung. Untereinander statt nebeneinander,
   weil die sechs Wortmarken sehr unterschiedlich breit sind: in einer zweiten
   Spalte bliebe fuer den Text so wenig Platz, dass er abschneidet. So stehen
   alle Logos an derselben Kante und in derselben Hoehe. */
.produkt-lineup{list-style:none;display:grid;gap:2px;margin:0;padding:0}
.produkt-lineup li{margin:0}
.produkt-item{
  display:block;padding:14px;border-radius:var(--r);
  border:1px solid transparent;
  transition:background .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease);
}
.produkt-lineup li + li{box-shadow:inset 0 1px 0 var(--line-dark)}
.produkt-item:hover{
  background:rgba(255,255,255,.05);border-color:var(--accent-line);
  transform:translateX(3px);
}
/* Gleiche optische Hoehe fuer alle Marken — die Breiten duerfen sich
   unterscheiden, die Hoehe nicht, sonst wirkt die Reihe unruhig. */
.produkt-logo{display:flex;align-items:center;height:32px}
.produkt-logo img{max-height:28px;max-width:100%;width:auto;object-fit:contain;display:block}
/* Synergy Bau hat noch keine Logodatei — Familien-Emblem mit gesetztem
   Schriftzug, genau wie auf der Hauptwebsite. Kein Nachbau. */
.produkt-lockup{display:inline-flex;align-items:center;gap:9px;color:#fff}
.produkt-lockup img{max-height:28px;width:auto}
.produkt-lockup span{font-size:1.05rem;font-weight:600;letter-spacing:-.005em;line-height:1;white-space:nowrap}
.produkt-lockup b{font-weight:600;color:var(--accent-2)}
.produkt-kat{
  display:block;margin-top:9px;font-size:.84rem;line-height:1.35;
  color:var(--text-invert-muted);
}
.produkte-foot{
  margin-top:16px;padding-top:16px;border-top:1px solid var(--line-dark);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.produkte-foot a{font-size:.88rem;font-weight:600;color:var(--accent-2);display:inline-flex;align-items:center;gap:8px}
.produkte-foot a .arr{transition:transform .4s var(--ease)}
.produkte-foot a:hover .arr{transform:translateX(4px)}

/* Auf schmalen Schirmen stehen die Logos zweispaltig, sonst wird die
   Tafel unter dem Artikel unnoetig lang. */
@media(max-width:1000px) and (min-width:620px){
  .produkt-lineup{grid-template-columns:1fr 1fr;gap:8px}
  .produkt-lineup li + li{box-shadow:none}
  .produkt-item{border:1px solid var(--line-dark);height:100%}
}

/* Themen-/Beitragslisten in der Seitenspalte */
.side-list{list-style:none;display:grid;gap:12px;margin:0;padding:0}
.side-list a{font-size:.95rem;color:var(--text);line-height:1.35;transition:color .3s var(--ease)}
.side-list a:hover{color:var(--accent-deep)}
.side-list .datum{display:block;font-size:.78rem;color:var(--text-muted);margin-top:3px}
.side-list li + li{border-top:1px solid var(--line);padding-top:12px}