/*
Theme Name: Kontorblatt
Description: Eigenes Kontorblatt-Theme (Child von Botiga). B2B-Marke fuer Vorlagen und Werkzeuge fuer Gewerbetreibende. Palette Marine/Gold, DM Serif Display.
Author: Kontorblatt / M. Brennecke
Template: botiga
Version: 1.0.0
Text Domain: kontorblatt
*/

/* Woher dieses Theme kommt und warum es NICHT einfach momentblatt ist:

   Kontorblatt ist die B2B-Schwester von Momentblatt (Namensentscheidung
   05.08.2026, Register geprueft — siehe RECHTSSICHERHEIT.md). Die
   Marine/Gold-Palette stand vorher im Momentblatt-Theme, weil dort
   voruebergehend B2B lief. Sie gehoert hierher.

   ⚠️ momentblatt.de bekommt seine WARME Palette zurueck (Creme/Sand/Gold,
   siehe Commit 6ca3fa4). Ab dann entwickeln sich beide Themes bewusst
   auseinander — wer hier etwas aendert, aendert es NICHT automatisch dort.
   Gemeinsam bleibt allein die Wortmarke, die aus einem Skript kommt
   (shop/build_logo_b2b.py). */
/* === Marken-Schriften (lokal, OFL — DSGVO-sicher, kein Google-CDN) === */
@font-face{
  font-family:"DM Serif Display";
  src:url("fonts/DMSerifDisplay-Regular.ttf") format("truetype");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"DM Serif Display";
  src:url("fonts/DMSerifDisplay-Italic.ttf") format("truetype");
  font-weight:400;font-style:italic;font-display:swap;
}

/* === Markenfarben — B2B-Palette „Marine & Gold" (Nutzer, 02.08.2026) ===

   Der Shop verkauft keine Printables mehr, sondern Vorlagen und Werkzeuge
   fuer Gewerbetreibende. Creme/Sand/Gold war fuer Taufkarten gebaut.

   Vorgabe waren drei Werte: Hauptfarbe #0F2C59, Akzent #E5BB67,
   Hintergrund #F3EFE0. Die uebrigen sind daraus ABGELEITET, nicht erfunden:

   --kb-gold-dark  #E5BB67 hat auf Weiss nur 1,8:1 Kontrast und ist als
                   SCHRIFT unlesbar. Gold traegt deshalb nur Flaechen und die
                   Marke; fuer Text, Verweise und Rahmen steht dieser
                   abgedunkelte Zwilling (5,3:1).
   --kb-papier     Karten und Kopfleiste sind WEISS. Waeren sie ebenfalls
                   cremefarben, verschwaenden sie in der Seitenflaeche.
   --kb-leise      Nebentext. Das alte #9A8F84 war ein warmes Braungrau und
                   passt nicht mehr zu Marineblau.

   Die Namen sind absichtlich geblieben: „ink" ist weiter die dunkle
   Textfarbe, „gold" weiter der Akzent. Ein Umbenennen haette jede Regel
   dieser Datei angefasst, ohne etwas zu verbessern. */
:root{
  --kb-ink:#0F2C59;
  /* Flaechen: seit 04.08.2026 kuehles Hellgrau statt Beige — die
     Beigetoene stammen aus der Printable-Linie und passten nicht zu
     Marine. Bewusst NICHT reinweiss: Die Karten sind weiss und
     wuerden sonst mit dem Grund verschmelzen. */
  --kb-flaeche:#F4F6FA; --kb-flaeche-2:#E7ECF4;
  /* Alte Namen bleiben als Verweis — sie werden ausserhalb des Themes
     benutzt, etwa in eingebettetem HTML einzelner Seiten. */
  --kb-creme:var(--kb-flaeche); --kb-sand:var(--kb-flaeche-2);
  --kb-gold:#E5BB67; --kb-gold-dark:#8A6520;
  --kb-papier:#FFFFFF; --kb-leise:#6E6A5F;
}

/* === Grundflächen === */
body{background-color:var(--kb-creme);color:var(--kb-ink);}
/* Mobil-Schutz: nichts darf die Seite seitlich aufziehen */
html,body{max-width:100%;overflow-x:hidden;}
img{max-width:100%;height:auto;}
@media (max-width:600px){
  .wp-block-media-text.is-stacked-on-mobile{grid-template-columns:100%!important;}
  .wp-block-media-text__content{padding:0 6%!important;}
}
.site-header,.top-bar{background-color:var(--kb-papier);}
.site-footer,.footer-widgets{background-color:var(--kb-sand);color:var(--kb-ink);}

/* === Typografie: Marken-Serif für Headlines === */
h1,h2,h3,h4,h5,h6,.site-title,
.woocommerce-loop-product__title,.product_title{
  font-family:"DM Serif Display",Georgia,serif;
  font-weight:400;color:var(--kb-ink);letter-spacing:.01em;
}
h1{font-size:2.6rem;}
body,p,li,input,textarea,select,button{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
  "Helvetica Neue",Arial,sans-serif;
}

/* === Links & Akzente === */
a{color:var(--kb-gold-dark);}
a:hover{color:var(--kb-ink);}

/* === Buttons: Ink, Hover Gold — ruhig und edel === */
button,.button,.wp-block-button__link,input[type=submit],
.woocommerce a.button,.woocommerce button.button,
.single_add_to_cart_button,.checkout-button{
  background-color:var(--kb-ink)!important;color:var(--kb-papier)!important;
  border-color:var(--kb-ink)!important;border-radius:4px;
  letter-spacing:.06em;
}
button:hover,.button:hover,.wp-block-button__link:hover,
.woocommerce a.button:hover,.woocommerce button.button:hover,
.single_add_to_cart_button:hover,.checkout-button:hover{
  background-color:var(--kb-gold-dark)!important;
  border-color:var(--kb-gold-dark)!important;
}

/* === Shop-Elemente === */
.woocommerce span.price,.woocommerce .price{color:var(--kb-ink);}
.onsale,.woocommerce span.onsale{
  background-color:var(--kb-gold)!important;color:var(--kb-ink)!important;
}

/* === Header: Logo (logo_header.png ohne Tagline; Groesse steuern die
   Botiga-Mods site_logo_size_desktop/tablet/mobile = 260/220/170px).
   height:auto ist Pflicht - sonst staucht die Mobil-Breite die Wortmarke
   (Hoehe blieb sonst beim Attribut-Wert haengen). Text-Titel steckt im Logo. === */
.custom-logo,.site-branding img{height:auto!important;width:260px!important;
  max-width:100%;}
@media (max-width:1024px){.custom-logo,.site-branding img{width:190px!important;}}
@media (max-width:600px){.custom-logo,.site-branding img{width:128px!important;}}
.site-branding .site-title,.site-branding .site-description{display:none;}

/* === Startseite: Seitentitel ausblenden === */
.home .entry-header,.home h1.entry-title{display:none;}

/* === Bild-Kopierschutz (Abschreckung; JS-Teil in functions.php) ===
   Kein Sperren von Screenshots moeglich — echte Sicherung: gebrandete
   Szenen + PDFs hinter Kauf-Link. */
.woocommerce-product-gallery img,ul.products img,
.wp-block-image img,.wp-block-media-text__media img{
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;/* iOS: kein Lang-Druck-Menue */
  -webkit-user-drag:none;}

/* === 404-Seite ("Dieses Blatt ist wohl verweht") === */
.mb-404{text-align:center;padding:70px 20px 90px;max-width:640px;margin:0 auto;}
.mb-404-emblem{width:120px;height:auto;margin-bottom:18px;opacity:.92;}
.mb-404 h1{font-size:2.2rem;}
.mb-404 p{color:var(--kb-leise);margin-top:12px;}
.mb-404-buttons{margin-top:26px;display:flex;gap:18px;align-items:center;
  justify-content:center;flex-wrap:wrap;}
.mb-404-home{color:var(--kb-gold-dark);}

/* === Shop-/Kategorie-Intro (archive description) === */
.mb-shop-intro,.woocommerce-products-header .term-description,
.woocommerce-products-header .archive-description{
  max-width:660px;margin:10px auto 0;text-align:center;
  color:var(--kb-leise);font-size:15.5px;line-height:1.6;}

/* === FAQ-Akkordeon (wp:details auf /faq/) === */
.wp-block-details{border:1px solid var(--kb-sand);border-radius:8px;
  background:var(--kb-papier);padding:14px 18px;margin-bottom:10px;}
.wp-block-details summary{font-weight:600;color:var(--kb-ink);
  cursor:pointer;list-style-position:outside;}
.wp-block-details summary::marker{color:var(--kb-gold-dark);}
.wp-block-details[open]{background:var(--kb-creme);}
.wp-block-details[open] summary{margin-bottom:8px;}
.wp-block-details p{font-size:15px;line-height:1.6;}

/* === Aktions-Banner (WooCommerce Store Notice, z. B. MOMENT25) === */
.woocommerce-store-notice,p.demo_store{
  background:var(--kb-gold)!important;color:var(--kb-ink)!important;
  font-size:15px;letter-spacing:.02em;text-align:center;
  padding:12px 44px 12px 16px;position:relative;top:0;}
.woocommerce-store-notice strong{color:var(--kb-ink);}
.woocommerce-store-notice__dismiss-link{color:var(--kb-ink)!important;
  font-weight:600;position:absolute;right:16px;}

/* === USP-Leiste (Startseite, wp:html-Block): 6 Punkte, 2 Reihen a 3 === */
.mb-usp{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 40px;
  background:var(--kb-sand);border-radius:12px;padding:40px 48px;margin:6px 0;}
@media (max-width:900px){.mb-usp{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.mb-usp{grid-template-columns:1fr;}}
.mb-usp-item{display:flex;align-items:center;gap:18px;}
.mb-usp-item svg{width:48px;height:48px;flex:0 0 auto;}
.mb-usp-item strong{display:block;font-size:17px;color:var(--kb-ink);
  letter-spacing:.02em;font-weight:600;}
.mb-usp-item span{display:block;font-size:14px;color:var(--kb-leise);margin-top:3px;}

/* === "So funktioniert's"-Band (Startseite, wp:html-Block) === */
.mb-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;
  margin:10px 0;}
@media (max-width:760px){.mb-steps{grid-template-columns:1fr;}}
.mb-step{text-align:center;padding:0 12px;}
.mb-step svg{width:66px;height:66px;}
.mb-step .nr{font-family:"DM Serif Display",Georgia,serif;font-size:56px;
  line-height:1;color:var(--kb-gold);}
.mb-step strong{display:block;font-size:18px;color:var(--kb-ink);
  margin-top:10px;font-weight:600;}
.mb-step p{font-size:14.5px;color:var(--kb-leise);margin-top:8px;line-height:1.55;}
.mb-step .line{width:56px;border-top:2px solid var(--kb-gold);
  margin:14px auto 0;}

/* === Shop-Banner (kb_banner) ========================================
   Steht auf /shop/ anstelle des frueheren Intro-Absatzes. Traegt die
   einzige H1 der Seite — der Botiga-Seitentitel ist ausgeblendet, ohne
   diesen Block hat die Shop-Seite gar keine Ueberschrift.

   Der Text liegt als HTML darueber und NICHT im Bild: sonst waere er
   fuer Suche und Vorleseprogramme unsichtbar und wuerde auf dem Handy
   mitschrumpfen statt umzubrechen. Markup in functions.php.

   Bild: images/shop_grund.jpg — bereits auf Marine umgefaerbt. Die
   Abdunklung und die Goldknoten liegen als CSS-/SVG-Ebene darueber, damit
   sie in jeder Breite sitzen (cover schneidet das Bild sonst willkuerlich
   an).

   Die Farbwerte stehen hier als Literale und nicht als --kb-*: der Block
   ist immer dunkel, egal was die Seitenpalette macht. Weisse Schrift auf
   var(--kb-ink) waere bei einer spaeteren Palettenaenderung still
   unlesbar geworden.

   Erzeugt von banner/build_shopbanner_web.py — dort aendern, nicht hier.
   ==================================================================== */
.kb-banner{
  position:relative;overflow:hidden;border-radius:10px;
  margin:0 0 30px;isolation:isolate;
  background:#0F2C59 url("images/shop_grund.jpg") 62% center/cover no-repeat;
}
/* Scrim. Auf breiten Schirmen von links, damit rechts das Licht stehen
   bleibt; ab Tablet von unten, weil der Text dann mittig sitzt. */
.kb-banner::before{
  content:"";position:absolute;inset:0;z-index:1;background:
    linear-gradient(101deg, rgba(8,27,54,.93) 0%, rgba(8,27,54,.86) 38%,
                    rgba(8,27,54,.62) 62%, rgba(8,27,54,.46) 100%);
}
/* Goldkante unten — das einzige Chrom am Block. */
.kb-banner::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;z-index:3;
  background:linear-gradient(90deg,#E5BB67 0%,#B98F3C 62%,rgba(185,143,60,0) 100%);
}
/* Nur die rechte Haelfte, sonst laeuft das Netz hinter die Ueberschrift. */
.kb-banner-netz{position:absolute;right:0;top:0;width:48%;height:100%;
  z-index:2;opacity:.85;}

.kb-banner-inhalt{
  position:relative;z-index:3;text-align:center;
  padding:clamp(34px,5.2vw,62px) clamp(20px,5vw,72px) clamp(30px,4.6vw,54px);
}
.kb-banner-eyebrow{
  font-size:clamp(12px,1.15vw,15px);letter-spacing:.26em;text-transform:uppercase;
  color:#E5BB67;font-weight:600;margin:0 0 clamp(12px,1.4vw,18px);
}
/* !important gegen die globale h1-Regel weiter oben (2.6rem, --kb-ink). */
.kb-banner h1.kb-banner-h1{
  font-family:"DM Serif Display",Georgia,serif;font-weight:400;
  font-size:clamp(30px,4.5vw,58px)!important;line-height:1.14;
  color:#FFFFFF!important;letter-spacing:.005em;
  margin:0 0 clamp(12px,1.5vw,20px);
}
.kb-banner h1.kb-banner-h1 em{font-style:normal;color:#E5BB67;}
.kb-banner-sub{
  font-size:clamp(15px,1.55vw,20px);line-height:1.55;
  color:rgba(255,255,255,.86);margin:0 auto;max-width:44em;
}
.kb-banner-belege{
  list-style:none;margin:clamp(22px,2.6vw,32px) 0 0;padding:0;
  display:flex;justify-content:center;flex-wrap:wrap;
  gap:clamp(14px,2.4vw,34px);
}
.kb-banner-belege li{
  padding-left:clamp(14px,2.4vw,34px);
  border-left:1px solid rgba(229,187,103,.45);
}
.kb-banner-belege li:first-child{border-left:none;padding-left:0;}
.kb-banner-belege strong{
  display:block;font-size:clamp(14px,1.35vw,18px);font-weight:600;color:#fff;
}
.kb-banner-belege span{
  display:block;font-size:clamp(12px,1.1vw,15px);
  color:rgba(255,255,255,.72);margin-top:3px;
}

/* Tablet: Scrim von unten, Netz weg — es kollidiert sonst mit dem Text. */
@media (max-width:900px){
  .kb-banner::before{background:
    linear-gradient(180deg, rgba(8,27,54,.80) 0%, rgba(8,27,54,.72) 45%,
                    rgba(8,27,54,.88) 100%);}
  .kb-banner-netz{display:none;}
}
/* Handy: Belege auf die drei Schlagworte eindampfen.
   Untereinander mit Unterzeile war der Block rund 300 px hoch — der Besucher
   haette scrollen muessen, bevor das erste Produkt in Sicht kommt. Die
   Unterzeilen erklaeren nur, was die Schlagworte schon sagen. */
@media (max-width:560px){
  .kb-banner{background-position:58% center;}
  .kb-banner-eyebrow{letter-spacing:.16em;}
  .kb-banner-sub{max-width:32em;}
  .kb-banner-belege{gap:0;}
  .kb-banner-belege li{
    display:flex;align-items:center;border-left:none;padding-left:0;
  }
  .kb-banner-belege li+li::before{
    content:"·";color:#E5BB67;margin:0 12px;font-weight:700;
  }
  .kb-banner-belege span{display:none;}
  .kb-banner-belege strong{font-size:13.5px;}
}


/* === Kategorie-Leiste — helle Leiste, blaue Kategorie-Namen (kb-Palette) === */
.kb-katleiste{
  background:var(--kb-flaeche); border-bottom:1px solid var(--kb-flaeche-2);
}
.kb-katleiste-innen{
  max-width:1200px; margin:0 auto; padding:0 20px;
  display:flex; gap:6px; align-items:stretch;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.kb-katleiste-innen::-webkit-scrollbar{ display:none; }
.kb-katleiste-unten{
  border-top:1px solid var(--kb-flaeche-2); background:var(--kb-papier);
}
.kb-kat{
  flex:0 0 auto; padding:12px 14px; white-space:nowrap;
  font-size:15px; color:var(--kb-ink)!important; text-decoration:none;
  border-bottom:2px solid transparent;
}
.kb-kat:hover{ color:var(--kb-gold-dark)!important; }
.kb-kat.ist-aktiv{ color:var(--kb-ink)!important; border-bottom-color:var(--kb-gold); font-weight:700; }
.kb-kat-klein{ padding:9px 14px; font-size:13.5px; color:var(--kb-ink)!important; }
@media (max-width:782px){
  .kb-katleiste-innen{ padding:0 12px; }
  .kb-kat{ padding:11px 12px; font-size:14px; }
}
.kb-katleiste.nur-handy{ display:none; }
@media (max-width:782px){
  .kb-katleiste.nur-rechner{ display:none; }
  .kb-katleiste.nur-handy{ display:block; }
}