/*
Theme Name: Greyfidence
Theme URI: https://www.greyfidence.com
Author: Greyfidence
Description: Magazin-Theme für den Relaunch von Greyfidence – „Das Magazin für Unternehmensqualität, verantwortungsvolles Wirtschaften und nachhaltige Geschäftsmodelle“. Claim: Vertrauen. Qualität. Verantwortung. Aus der statischen Design-Übergabe übernommen: Tailwind-Utility-Klassen, Big Shoulders Display (Logo), Vazirmatn, Playfair Display kursiv, Fira Code, Akzent Siegellack #b3261e. Sechs feste Kategorien, Rubrik „Wissen & Standards“ als Schlagwort, 301-Weiterleitungen der Altbeiträge, Einrichtungs-Werkzeug unter Werkzeuge → Greyfidence.
Version: 1.0.2
Requires at least: 6.2
Requires PHP: 7.4
License: Proprietary
Text Domain: greyfidence
*/

/* Farben: Siegellack warm (Akzent) auf neutralen Grundtönen.
   Schriften: Big Shoulders (nur Logo), Vazirmatn (Text), Playfair Display kursiv (Akzentwörter), Fira Code (Labels) */
:root{--c:#b3261e;--tinte:#18181B;--neben:#71717A;--linie:#E4E4E7;--grau:#F0F0EC;--bild-radius:14px}
body{font-family:Vazirmatn,system-ui,sans-serif;-webkit-font-smoothing:antialiased;color:var(--tinte);background:#FAFAF8}
.marke{font-family:'Big Shoulders Display',sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:-.01em;line-height:.78;white-space:nowrap}
.kursiv{font-family:'Playfair Display',serif;font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--c)}
.mono{font-family:'Fira Code',monospace;text-transform:uppercase;letter-spacing:.06em}
.strich{background-image:linear-gradient(90deg,currentColor 50%,transparent 0);background-size:10px 1px;background-repeat:repeat-x;height:1px;opacity:.35}
h1,h2,h3{text-wrap:balance}p{text-wrap:pretty}
html{scroll-behavior:smooth;scroll-padding-top:7rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*{transition:none!important}}
summary::-webkit-details-marker{display:none}
/* Kein horizontaler Überlauf (Handy + Desktop) */
html,body{overflow-x:clip}

/* Leitfaden §4a: alle Fotos mit runden Ecken, ein Wert für alle (auch Titelbild). Autorenfotos rund. */
.rund,.rund img,.zoom,main img{border-radius:var(--bild-radius)}.rund,.zoom{overflow:hidden}
main img.avatar,img.avatar,.avatar-rund{border-radius:9999px!important}
main img.avatar.foto-flaeche{border-radius:0!important}
.zoom img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}.zoom:hover img{transform:scale(1.04)}
a.titel-link:hover .t,.titel-link a:hover .t{text-decoration:underline;text-decoration-color:var(--c);text-underline-offset:4px;text-decoration-thickness:2px}
.no-scrollbar{scrollbar-width:none}.no-scrollbar::-webkit-scrollbar{display:none}

/* Bild-Platzhalter, wenn ein Beitrag (noch) kein Beitragsbild hat – keine Fremdfotos */
.bild-leer{display:grid;place-items:center;background:var(--grau);color:#c9c9c4}
.bild-leer span{font-family:'Big Shoulders Display',sans-serif;font-weight:900;font-size:4rem;line-height:1}

/* Kopfzeile: auf Unterseiten klebend, auf der Startseite erst nach dem Schrumpfen des Schriftzugs */
#kopf{position:sticky;top:0;z-index:50;background:rgba(250,250,248,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--linie)}
.admin-bar #kopf{top:32px}
@media (max-width:782px){.admin-bar #kopf{top:46px}}
@media (max-width:600px){.admin-bar #kopf{top:0}}
body.start #kopf{position:fixed;inset:0 0 auto 0;transform:translateY(-100%);transition:transform .35s}
body.start.admin-bar #kopf{top:32px;transform:translateY(calc(-100% - 32px))}
@media (max-width:782px){body.start.admin-bar #kopf{top:46px;transform:translateY(calc(-100% - 46px))}}
/* bis 600 px scrollt die WP-Adminleiste mit weg – Kopfzeile dann ganz oben */
@media (max-width:600px){body.start.admin-bar #kopf{top:0;transform:translateY(-100%)}}
body.start #kopf.an,body.start.admin-bar #kopf.an{transform:none}
/* Ohne JavaScript: Kopfzeile auf der Startseite sofort sichtbar */
html:not(.js) body.start #kopf{position:sticky;transform:none}
#kopf [aria-current="page"]{color:var(--c)}

/* Einblenden + Balken nur, wenn Skript läuft */
.js .auf:not(.da){opacity:0;transform:translateY(24px)}.auf{transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.balken{height:var(--h);transition:height 1.1s cubic-bezier(.2,.8,.2,1)}
.js .balken-reihe:not(.da) .balken{height:var(--h0)}
.balken .form{transition:transform 1.6s cubic-bezier(.2,.8,.2,1)}.balken-reihe.da .balken .form{transform:rotate(90deg)}
.balken:hover{filter:brightness(1.08)}
.schwebt{will-change:transform}
@media (prefers-reduced-motion:reduce){.js .auf:not(.da){opacity:1;transform:none}.js .balken-reihe:not(.da) .balken{height:var(--h)}}

/* Startseite: großer Schriftzug schrumpft zum Logo, Titelbild wächst auf volle Breite */
#gross{transform-origin:0 0;will-change:transform}
#titelbild{will-change:clip-path;border-radius:var(--bild-radius)}
/* Bühne: nur mit Skript und ohne „Bewegung reduzieren“ (Update Startanimation) */
@media (prefers-reduced-motion:no-preference){
  .js #buehne{height:230vh}
  .js #buehne-innen{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
  .js #buehne-bild{position:absolute;left:0;right:0;bottom:0;padding:0}
  .js #titelbild{height:100%;border-radius:0}
  .js #titelfoto{height:100%;transform-origin:50% 60%;will-change:transform}
  .js #unterzeile{will-change:opacity}
}

/* ==================== Artikel-Fließtext ==================== */
.beitragstext{font-size:1.0625rem;line-height:1.75;color:#2b2b30}
.beitragstext>p{margin-top:1.3rem}
.beitragstext h2{font-weight:500;font-size:2.2rem;line-height:1.08;letter-spacing:-.02em;color:var(--tinte);margin-top:3.5rem;scroll-margin-top:7rem;position:relative}
.beitragstext h3{font-weight:500;font-size:1.2rem;color:var(--tinte);margin-top:2rem}
.beitragstext h4{font-weight:700;color:var(--tinte);margin-top:1.5rem}
/* Aufzählungszeichen sichtbar – auch bei Listen-Blöcken des Block-Editors (class="wp-block-list").
   :where() hält die Spezifität niedrig, damit eigene ct-*-Listen Vorrang behalten. */
.beitragstext :where(ul.liste,ul:not([class]),ul.wp-block-list){margin-top:1.1rem;list-style:none;padding:0}
.beitragstext :where(ul.liste,ul:not([class]),ul.wp-block-list)>li{position:relative;padding-left:1.6rem;margin-top:.6rem}
.beitragstext :where(ul.liste,ul:not([class]),ul.wp-block-list)>li::before{content:'';position:absolute;left:0;top:.62rem;width:8px;height:8px;border-radius:2px;background:var(--c)}
.beitragstext :where(ol:not([class]),ol.wp-block-list){margin-top:1.1rem;padding-left:1.4rem;list-style:decimal}
.beitragstext :where(ol:not([class]),ol.wp-block-list)>li{margin-top:.6rem;padding-left:.2rem}
.beitragstext :where(ol:not([class]),ol.wp-block-list)>li::marker{color:var(--c);font-weight:500}
/* Unterstrichene Links im Beitragstext (Tailwind-Reset entfernt sie sonst) */
.beitragstext :where(a:not(.no-prose):not(.heading-anchor)){color:var(--c);text-decoration:underline;text-underline-offset:3px}
.beitragstext :where(a:not(.no-prose):not(.heading-anchor)):hover{text-decoration-thickness:2px}
.beitragstext strong,.beitragstext b{color:var(--tinte);font-weight:700}
.beitragstext em{font-style:italic}
.beitragstext blockquote{margin-top:2rem;padding-left:1.4rem;border-left:3px solid var(--c);font-family:'Playfair Display',serif;font-style:italic;font-size:1.45rem;line-height:1.4;color:var(--tinte)}
.beitragstext blockquote cite{display:block;margin-top:.6rem;font-family:'Fira Code',monospace;font-style:normal;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--neben)}
.beitragstext figure{margin-top:2rem}
.beitragstext figcaption,.beitragstext .wp-element-caption{margin-top:.6rem;font-size:.875rem;color:var(--neben)}
.beitragstext hr{margin:2.5rem 0;border:0;height:1px;background-image:linear-gradient(90deg,currentColor 50%,transparent 0);background-size:10px 1px;opacity:.35}
.table-wrap,.beitragstext .wp-block-table{overflow-x:auto;margin:1.5rem 0}
.beitragstext table{width:100%;border-collapse:collapse;font-size:.95rem}
.beitragstext th,.beitragstext td{text-align:left;padding:.75rem .9rem;border-bottom:1px solid var(--linie);vertical-align:top}
.beitragstext thead th{font-weight:700;color:var(--tinte);border-bottom:2px solid var(--c);white-space:nowrap}
.beitragstext td:last-child{font-weight:500;color:var(--tinte)}
/* Block-Editor-Tabellen: WP-Standardrahmen durch die Linien der Vorlage ersetzen */
.beitragstext .wp-block-table table,.beitragstext .wp-block-table th,.beitragstext .wp-block-table td{border:0}
.beitragstext .wp-block-table th,.beitragstext .wp-block-table td{border-bottom:1px solid var(--linie)}
.beitragstext .wp-block-table thead{border-bottom:0}
.beitragstext .wp-block-table thead th{border-bottom:2px solid var(--c)}
.beitragstext .alignwide,.beitragstext .alignfull{max-width:100%}
.beitragstext .aligncenter{margin-left:auto;margin-right:auto}
.beitragstext .alignleft{float:left;margin:.4rem 1.5rem 1rem 0;max-width:50%}
.beitragstext .alignright{float:right;margin:.4rem 0 1rem 1.5rem;max-width:50%}
.beitragstext iframe,.beitragstext video{max-width:100%}
.beitragstext img{height:auto;max-width:100%}
/* Link-Symbol an Überschriften erscheint nur beim Überfahren (kein „#“) */
.heading-anchor{opacity:0;margin-left:.5rem;color:var(--c);display:inline-flex;vertical-align:middle;transition:opacity .15s}
.beitragstext h2:hover .heading-anchor,.heading-anchor:focus{opacity:1}
.toc-link{border-left:2px solid transparent}
.toc-link.active{border-left-color:var(--c);color:var(--tinte);font-weight:500}
.faq details{border-bottom:1px solid var(--linie)}
.faq summary{cursor:pointer;list-style:none;padding:1.1rem 2rem 1.1rem 0;position:relative;font-weight:500;font-size:1.1rem;color:var(--tinte)}
.faq summary::after{content:'+';position:absolute;right:.2rem;top:.8rem;font-size:1.5rem;color:var(--c)}
.faq details[open] summary::after{content:'–'}
#toTop{opacity:0;pointer-events:none;transition:opacity .2s}#toTop.show{opacity:1;pointer-events:auto}
#progress{transition:width .1s linear}

/* Link kopiert – kurze Rückmeldung */
.kopiert-hinweis{position:fixed;left:50%;bottom:1.5rem;transform:translateX(-50%);z-index:70;background:var(--tinte);color:#fff;border-radius:9999px;padding:.55rem 1.1rem;font-size:.875rem;opacity:0;pointer-events:none;transition:opacity .2s}
.kopiert-hinweis.an{opacity:1}

/* ==================== Archiv ==================== */
.chip{display:inline-flex;align-items:center;height:2.5rem;padding:0 1rem;border:1px solid var(--linie);border-radius:9999px;background:#fff;transition:border-color .2s}
.chip:hover{border-color:var(--c)}
.chip.aktiv{background:var(--tinte);border-color:var(--tinte);color:#fff}
.nav-links{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem;margin-top:4rem}
.page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:2.5rem;height:2.5rem;padding:0 .9rem;border:1px solid var(--linie);border-radius:9999px;background:#fff;font-size:.9rem;transition:border-color .2s}
a.page-numbers:hover{border-color:var(--c)}
.page-numbers.current{background:var(--tinte);border-color:var(--tinte);color:#fff}
.page-numbers.dots{border-color:transparent;background:transparent}

/* ==================== Newsletter-Plugin-Formulare im roten Banner ==================== */
.nl-formular input[type=email],.nl-formular input[type=text]{background:transparent;color:#fff;border:0;border-bottom:1px solid #fff;padding:.75rem 0;outline:none;width:100%}
.nl-formular input::placeholder{color:rgba(255,255,255,.6)}
.nl-formular button,.nl-formular input[type=submit]{font-family:'Fira Code',monospace;text-transform:uppercase;letter-spacing:.06em;font-size:12px;color:#fff;background:transparent;border:0;cursor:pointer}
.nl-formular a{text-decoration:underline}

/* ==================== WordPress-Grundklassen ==================== */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important}
.screen-reader-text:focus{background:#fff;clip:auto!important;clip-path:none;color:var(--tinte);display:block;height:auto;left:5px;padding:15px 23px;top:5px;width:auto;z-index:100000}
.wp-caption,.gallery-caption{max-width:100%}
.sticky,.bypostauthor{}
.seiteninhalt>*+*{margin-top:1.25rem}
.seiteninhalt h2{font-size:1.75rem;line-height:1.15;font-weight:500;margin-top:2.5rem;color:var(--tinte)}
.seiteninhalt h3{font-size:1.25rem;font-weight:500;margin-top:2rem;color:var(--tinte)}
.seiteninhalt a{color:var(--c);text-decoration:underline;text-underline-offset:3px}
.seiteninhalt ul{list-style:disc;padding-left:1.3rem}
.seiteninhalt ol{list-style:decimal;padding-left:1.3rem}