/*
Theme Name: Codekeks Base
Theme URI: https://codekeks.de/
Author: Codekeks
Author URI: https://codekeks.de/
Description: A super-clean, lightweight block theme focused on clarity and performance. Minimal styles, great typography, accessible defaults, and practical patterns.
Version: 1.0.2
Tested up to: 6.6
Requires at least: 6.3
Requires PHP: 7.4
Text Domain: codekeks-base
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, block-styles, custom-colors, custom-menu, editor-style, featured-images, full-site-editing, one-column, two-columns, translation-ready
*/
/*
html::before{content:"codekeks OK";position:fixed;inset:auto 8px 8px auto;
background:#000;color:#fff;padding:2px 6px;font:12px/1 monospace;z-index:99999}
*/
@font-face{
  font-family:"Inter";
  src:url("./assets/fonts/InterVariable.woff2") format("woff2-variations");
  font-weight: 100 900; font-display: swap; font-style: normal;
}
/* nur falls vorhanden */
@font-face{
  font-family:"Inter";
  src:url("./assets/fonts/InterVariable-Italic.woff2") format("woff2-variations");
  font-weight:100 900;
  font-style:italic;
  font-display:swap;
}
:root{ --ck-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", sans-serif; 
--wp--style--global--content-size: 999px !important;
}

body{ font-family: var(--ck-font-sans); }

/* .ck-hero-sub{ color: var(--wp--preset--color--muted); } */

.ck-hero-title{
  color: #0f0f0f;
  font-weight:800;
  letter-spacing:.01em;
  line-height:1.05;
  font-size: clamp(36px, 5vw, 68px);
}
.ck-hero-sub{
  color:#1a1a1a;           /* nicht mehr muted! */
  font-weight:500;         /* leicht kräftiger für mehr „Schwärze“ */
  font-style: normal;      /* sicherstellen, dass nix kursiv ist */
  font-size: clamp(16px, 2.4vw, 22px);
  line-height:1.4;
  margin-top:.35em;
}

/* Global dunkler Text */
body{ color:#111; }

html, body, p, span, ul, ol, li, a, i, u, em, strong{
  font-family:var(--ck-font-sans);
}

/* Headings */
h1,h2,h3,h4,h5,h6{
  font-family:var(--ck-font-sans);
  font-weight:800;
  line-height:1.15;
}

/* Wenn du KEINE italic-Datei hast: oblique als Fallback */
em,i{ font-style:oblique 10deg; }

.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
/* Typewriter Grundstil (nimmt Platz, ohne zu springen) */
.ck-type{
  display:inline-block;
  min-width: 1ch; /* verhindert „Zucken“ bei leerem Start */
}

/* blinkender Cursor optional per data-caret="true" */
.ck-type[data-caret="true"]::after{
  content:"▍"; margin-left:.1ch;
  animation: ck-caret 1s steps(1,end) infinite;
}
@keyframes ck-caret{ 0%,49%{opacity:1} 50%,100%{opacity:0} }

/* Reduced motion respektieren */
@media (prefers-reduced-motion: reduce){
  .ck-type[data-caret="true"]::after{ animation:none; }
}

/* macht alle Teaser-Bilder in diesem Grid schön quadratisch */
.ck-square img{
  aspect-ratio: 1 / 1;
  width: 100%;
  object-fit: cover;      /* schneidet überstehendes weg */
  border-radius: 8px;
}

/* footer wg impressum und co. */
/* ===== Footer (legal + copy) ===== */
.ck-footer{ border-top:1px solid var(--wp--preset--color--muted); background:#fff; }
.ck-footer__inner{ max-width:1200px; margin:0 auto; text-align:center; }

.ck-legal{ font-size:.875rem; }
.ck-legal .wp-block-navigation__container{
  gap:12px; flex-wrap:wrap; justify-content:center;
}
.ck-legal a{ text-decoration:none; opacity:.85; }
.ck-legal a:hover{ text-decoration:underline; opacity:1; }

.ck-copy{ margin:0; font-size:.875rem; line-height:1.4; }


/* Mobile: untereinander, zentriert */
@media (max-width: 780px){
  .ck-footer__inner{ justify-content:center; }
  .ck-copy{ flex:1 1 100%; text-align:center; white-space:normal; }
  .ck-legal{ width:100%; }
  .ck-legal .wp-block-navigation__container{ justify-content:center; }
}

.ck-callout{border:1px solid var(--ck-muted, #e6e6e6); border-radius:12px; padding:1rem; margin:1rem 0; background:var(--ck-bg, #fff); color:inherit}
.ck-callout__title{display:block; margin-bottom:.25rem}
.ck-callout--info{border-color:#66a3ff}
.ck-callout--warn{border-color:#ff9f43}
.ck-callout--success{border-color:#28c76f}
.ck-callout--note{border-color:#b8b8b8}
/* Dark mode compatibility with Codekeks Base vars */
html[data-theme='dark'] .ck-callout{background:var(--ck-bg, #0f1115)}

/* ===== dezente Hover-Animationen Leistungen ===== */
.ck-card { transition: transform .2s ease, box-shadow .2s ease; }
.ck-card:hover { background: rgba(192, 192, 192, 0.573); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.06); }

/* Invertierter Abschnitt (dunkler Hintergrund, helle Schrift) */
.ck-invert {
  background: var(--wp--preset--color--ink-contrast);
  color: var(--wp--preset--color--ink-invert);
}
.ck-invert a { color: var(--wp--preset--color--accent); }
.ck-invert a:hover { color: var(--wp--preset--color--accent-strong); }

/* Weiches Panel (leicht abgehoben) – nutzt Gradient-Preset */
.ck-panel-soft {
  background: var(--wp--preset--gradient--panel-soft);
}

/* Accent-Glow als zarter Unterstreich-Effekt */
.ck-underline-glow {
  background-image: var(--wp--preset--gradient--accent-glow);
  background-repeat: no-repeat;
  background-size: 100% 0.6em;
  background-position: 0 100%;
}

/* Buttons & Links – dezente Hover-Motion */
.wp-block-button .wp-block-button__link {
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
}
.wp-block-button .wp-block-button__link:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
}

/* Text-Hover-Utilities */
.is-hover-accent:hover { color: var(--wp--preset--color--accent) !important; }
.is-hover-accent-strong:hover { color: var(--wp--preset--color--accent-strong) !important; }

/* Schnell-Klassen für Textfarben (falls du sie im Block > Erweitert > Zusätzliche Klasse nutzt) */
.text-ink { color: var(--wp--preset--color--ink) !important; }
.text-ink-invert { color: var(--wp--preset--color--ink-invert) !important; }
.text-accent { color: var(--wp--preset--color--accent) !important; }
.text-accent-strong { color: var(--wp--preset--color--accent-strong) !important; }
.bg-paper-contrast { background: var(--wp--preset--color--paper-contrast) !important; }

/* ===== Codekeks Mini-Boot ===== */
.ck-boot {
  position: fixed; right: 8px; bottom: 8px;
  background: #000; color: #0f0;               /* alter Terminal-Look */
  padding: 6px 8px; border-radius: 4px;
  font: 12px/1.2 ui-monospace, Menlo, Consolas, monospace;
  white-space: pre; z-index: 99999;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
  pointer-events: none; opacity: .96;
}
.ck-boot::after { content: " ▍"; animation: ck-blink 1s steps(1,end) infinite; }
.ck-boot.ck-done::after { content: ""; animation: none; }

@keyframes ck-blink { 0%,49%{opacity:1} 50%,100%{opacity:0} }

/* ===== Codekeks Mini-Boot (fixed cols/rows + CRT + sound button) ===== */
:root{
  --ck-boot-cols: 28; /* Spalten (ch) */
  --ck-boot-rows: 8;  /* sichtbare Zeilen */
}

/* Box */
.ck-boot{
  position: fixed; bottom: 8px;
  background:#000; color:#0f0;
  padding:6px 8px; border-radius:4px;
  font:12px/1.2 ui-monospace, Menlo, Consolas, monospace;
  white-space:pre; z-index:99999; opacity:.96;
  width: calc(var(--ck-boot-cols) * 1ch + 1ch); /* +1ch für Cursor */
  height: calc(var(--ck-boot-rows) * 1.2em + 2px);
  overflow:hidden; text-shadow:0 0 2px rgba(0,255,0,.5);
  position:fixed;
}

/* Anker: wähle genau EINE Klasse in JS */
.ck-boot--right{ right:8px; left:auto; }
.ck-boot--left { left:8px;  right:auto; }

/* Cursor nur beim Tippen */
.ck-boot::after{ content:""; }
.ck-boot.ck-typing::after{ content:" █"; animation:ck-blink 1s steps(1,end) infinite; }
.ck-boot.ck-done::after{ content:""; animation:none; }
@keyframes ck-blink { 0%,49%{opacity:1} 50%,100%{opacity:0} }

/* CRT Scanlines */
.ck-boot::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.06), rgba(255,255,255,.06) 1px,
    rgba(0,0,0,0) 2px, rgba(0,0,0,0) 4px
  );
  opacity:.35; animation: ck-crt 6s linear infinite alternate;
}
@keyframes ck-crt {
  0%{ opacity:.28; filter:brightness(1) }
  50%{ opacity:.45; filter:brightness(1.06) }
  100%{ opacity:.32; filter:brightness(0.98) }
}

/* Sound-Button (außerhalb der Box) */
.ck-boot-snd{
  position:fixed; bottom: calc(8px + 120px); /* knapp über der Box */
  right:8px; /* JS spiegelt das bei Anker=left */
  z-index:100000; background:#000; color:#0f0; border:1px solid #0f0;
  padding:2px 6px; border-radius:3px; font:11px ui-monospace, monospace;
  cursor:pointer; opacity:.9;
}
.ck-boot-snd.ck-left{ left:8px; right:auto; }
.ck-boot-snd[hidden]{ display:none; }


/* Card fallback */
.ck-card{border:1px solid var(--wp--preset--color--muted);border-radius:12px}

/* ===== Codekeks: Header Hero (background image) ===== */
:root { --ck-container: 1200px; }

/* Header-Hintergrund + Linie unten */
.ck-header-wrap{
  background:#fff;
  border-bottom:1px solid var(--wp--preset--color--muted);
}

/* Innen auf Containerbreite */
.ck-header{
  max-width:var(--ck-container);
  margin:0 auto;
  display:flex;
  align-items:center;
}

/* Logo hart begrenzen */
.ck-header .wp-block-site-logo{ margin:0; }
/* Logo klein überall */
.ck-header .wp-block-site-logo img{
  display:block;
  width:auto; height:auto;
  max-height:48px;               /* <- Wunschhöhe */
}

/* Optional: auf der Startseite (Body hat .home) größer */
.home .ck-header .wp-block-site-logo img{
  max-height:125px;
}

/* Menü nach rechts, ordentliche Abstände */
.ck-header .wp-block-navigation{ margin-left:auto; }
.ck-header .wp-block-navigation__container{ gap:24px; }
.ck-header .wp-block-navigation .wp-block-navigation-item__content{
  padding:6px 0; text-decoration:none;
}

/* Mobile */
@media (max-width:800px){
  .ck-header{ padding-left:12px; padding-right:12px; }
  .ck-header .wp-block-site-logo img{ max-height:64px; }
}
/* Falls Offcanvas-Menü genutzt wird, über alles legen */
.ck-header .wp-block-navigation__responsive-container.is-menu-open{ z-index:9999; }

.ck-hero{
  min-height:125px;
  background:  url("./assets/images/logo_1.png") center center / contain no-repeat;
  display:flex; align-items:center;
  padding:clamp(12px,4vw,32px);
}
.ck-site-logo-img{ margin:0; }
.ck-site-logo-img img{ max-height:48px; height:auto; width:auto; display:block; }
 
/* Logo klein überall */
.ck-header .wp-block-site-logo img{
  max-height:48px; height:auto; width:auto; display:block;
}
/* Optional größer nur auf der Frontpage
.home .ck-header .wp-block-site-logo img{ max-height:125px; }
 */

/* ===== Codekeks: Blog Loop (alternierend) ===== */
.ck-row{display:flex;gap:clamp(12px,2vw,24px);align-items:stretch}
.ck-col-image{flex:0 0 36%}
.ck-col-content{flex:1 1 auto}
@media (max-width: 800px){
  .ck-row{flex-direction:column}
  .ck-col-image{flex-basis:auto}
}
.ck-loop .wp-block-post:nth-child(odd)  .ck-loop__item{background:#f4f4f4}
.ck-loop .wp-block-post:nth-child(even) .ck-loop__item{background:#dbdbdb}
.ck-loop .wp-block-post:nth-child(even) .ck-row{flex-direction:row-reverse}
.ck-col-image:empty{display:none}
.ck-col-image:not(:has(img)){display:none}
.ck-col-image:empty + .ck-col-content,
.ck-col-image:not(:has(img)) + .ck-col-content{flex:1 1 100%}
.ck-loop .ck-loop__item{border-radius:12px;padding:clamp(12px,2vw,24px)}

/* ===== Codekeks: Teaser Loop (compact) ===== */
.ck-teaser__row{display:flex;gap:.9rem;align-items:flex-start}
.ck-teaser__thumb{flex:0 0 128px}
.ck-teaser__content{flex:1 1 auto}
.ck-teaser__item{border-bottom:1px solid var(--wp--preset--color--muted);padding:.9rem 0}
.ck-teaser__thumb:empty{display:none}
.ck-teaser__thumb:not(:has(img)){display:none}
@media (max-width: 720px){
  .ck-teaser__row{gap:.75rem}
  .ck-teaser__thumb{flex-basis:96px}
}