/*
Theme Name: .stichpunkt Media
Theme URI: https://stichpunkt.media
Description: Child-Theme fuer JNews - Farb- und Typografie-Grundlage des Medienhauses .stichpunkt Media. Schwarz, Weiss und Bild tragen die Seite; Heather Blue und Manz sind Akzent, nicht Flaeche.
Author: .stichpunkt Media GmbH
Author URI: https://stichpunkt.media
Template: jnews
Version: 1.3.0
Text Domain: jnews-child
*/

/* ===========================================================
   1 Designtokens
   =========================================================== */
:root{
  --sp-black:#000000;
  --sp-ink:#111111;
  --sp-grey:#6a6a68;
  --sp-line:#e3e1dd;
  --sp-paper:#ffffff;
  --sp-paper-2:#f5f4f1;
  --sp-heather:#B3C3CF;   /* Rubriken, Unterstriche, Bildton */
  --sp-manz:#EAEC78;      /* nur aktive Stelle: Menue, Preis, Kategorie */
  --sp-serif:"Merriweather", Georgia, "Times New Roman", serif;
  --sp-sans:"Open Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
}

/* ===========================================================
   2 Grundtypografie
   Merriweather 300 fuer Displaygroessen, Open Sans fuer alles Funktionale
   =========================================================== */
body,
.jeg_post_title,
.jeg_menu li > a{ font-family: var(--sp-sans); }

h1, h2, h3,
.jeg_post_title,
.entry-header .jeg_post_title{ font-family: var(--sp-serif); }

h1, h2{ font-weight:300; line-height:1.15; }
h3{ font-weight:700; line-height:1.35; }

.sp-lead{
  font-family: var(--sp-serif);
  font-weight:300;
  font-size:clamp(1rem,1.9vw,1.2rem);
  line-height:1.6;
  max-width:60ch;
}

/* Rubrikenzeile: gesperrte Versalien */
.sp-eyebrow{
  font-family: var(--sp-sans);
  font-size:.72rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--sp-grey);
  display:flex; align-items:center; gap:12px;
  margin:0 0 18px;
}
.sp-eyebrow::after{ content:""; flex:1; height:1px; background:var(--sp-line); }

/* Kicker im Kopf, Klammer enger gesetzt */
.sp-kicker{
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--sp-heather);
}
.sp-kicker .paren{ letter-spacing:.12em; color:rgba(179,195,207,.72); }

/* ===========================================================
   3 Akzentregeln - Manz nur dort, wo etwas aktiv ist
   =========================================================== */
.jeg_menu > li.current-menu-item > a,
.jeg_menu > li.current_page_item > a{
  box-shadow: inset 0 -6px 0 var(--sp-manz);
}
.sp-more{
  display:inline-block;
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  border-bottom:1px solid var(--sp-manz); padding-bottom:3px;
}
.sp-price{ border:1px solid var(--sp-black); padding:24px clamp(18px,2.4vw,28px); max-width:640px; }
.sp-price .amount{ font-family:var(--sp-serif); font-weight:700; box-shadow: inset 0 -.14em 0 var(--sp-manz); }

/* Heather: Rubriken und Auftraggeberleiste */
.sp-clients span{
  font-size:.86rem; letter-spacing:.06em; color:#3a3a38;
  border-bottom:1px solid var(--sp-heather); padding-bottom:4px;
}

/* ===========================================================
   4 Ruhe bewahren - keine Schatten, keine runden Ecken
   =========================================================== */
.jeg_postblock, .jeg_post, .jeg_thumb,
.sp-cell, .sp-frame{
  border-radius:0 !important;
  box-shadow:none !important;
}
.sp-grid{ display:grid; gap:1px; background:var(--sp-line); border-block:1px solid var(--sp-line); }
.sp-grid > .sp-cell{ background:var(--sp-paper); padding:26px clamp(18px,2.4vw,28px) 30px; }

/* Ablauf in drei Schritten */
.sp-steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:clamp(20px,3vw,40px); }
.sp-steps > div{ border-top:2px solid var(--sp-black); padding-top:16px; }
.sp-steps .st{ font-size:.7rem; letter-spacing:.2em; color:var(--sp-grey); display:block; margin-bottom:10px; }

/* Kontaktband */
.sp-contact{ background:var(--sp-paper-2); }


/* ===========================================================
   5 Zwei-Klick-Video (Shortcode [sp_video])
   Vor dem Klick wird nichts von YouTube geladen.
   =========================================================== */
.sp-video{ margin:0 0 28px; }
.sp-video__frame{
  position:relative; display:block; width:100%; aspect-ratio:16/9;
  background:var(--sp-black); border:0; padding:0; cursor:pointer; overflow:hidden;
}
.sp-video__frame img{ width:100%; height:100%; object-fit:cover; display:block; opacity:.82; transition:opacity .25s ease; }
.sp-video__frame:hover img{ opacity:1; }
.sp-video__play{
  position:absolute; inset:0; margin:auto; width:74px; height:74px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.85); border-radius:50%;
  color:#fff; font-size:1.1rem; line-height:1; background:rgba(0,0,0,.18);
  transition:background .25s ease;
}
.sp-video__frame:hover .sp-video__play{ background:var(--sp-manz); color:var(--sp-black); border-color:var(--sp-manz); }
.sp-video__title{
  position:absolute; left:0; right:0; bottom:0; padding:18px clamp(14px,2vw,22px) 14px;
  background:linear-gradient(to top, rgba(0,0,0,.72), transparent);
  color:#fff; font-family:var(--sp-serif); font-weight:300; font-size:clamp(1rem,2vw,1.35rem); text-align:left;
}
.sp-video__note{
  display:block; margin-top:8px; font-family:var(--sp-sans);
  font-size:.72rem; letter-spacing:.04em; color:#cfd6db; font-weight:400;
}
.sp-video__caption{ font-size:.78rem; color:var(--sp-grey); padding-top:8px; }
.sp-video iframe{ width:100%; aspect-ratio:16/9; border:0; display:block; }


/* 6 Startseite – Bänder nach der Skizze */
.sp-home{ font-family:var(--sp-sans); color:var(--sp-ink); }
.sp-full{ width:100vw; margin-left:calc(50% - 50vw); }
.sp-band{ padding:clamp(44px,7vw,86px) clamp(18px,4vw,56px); border-bottom:1px solid var(--sp-line); }
.sp-hero{ position:relative; color:#fff; background:#000; overflow:hidden; }
.sp-hero__bg{ position:absolute; inset:0; background:radial-gradient(120% 120% at 70% 20%, rgba(179,195,207,.30), transparent 60%), linear-gradient(115deg,#141414 0%,#2a2a2a 45%,#0c0c0c 100%); }
.sp-hero__in{ position:relative; padding:clamp(56px,11vw,132px) clamp(18px,4vw,56px); }
.sp-hero h1{ font-family:var(--sp-serif); font-weight:300; font-size:clamp(1.8rem,5.4vw,3.5rem); line-height:1.12; margin:0; max-width:24ch; color:#fff; }
.sp-hero h1 em{ font-style:normal; box-shadow:inset 0 -.12em 0 rgba(234,236,120,.75); }
.sp-hero .sp-kicker{ margin:0 0 22px; display:block; }
.sp-ways{ display:flex; gap:14px; flex-wrap:wrap; margin-top:clamp(28px,5vw,48px); }
.sp-btn{ display:inline-block; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; padding:13px 22px; border:1px solid #fff; color:#fff; text-decoration:none; }
.sp-btn--fill{ background:#fff; color:#000; }
.sp-cols5{ display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:1px; background:var(--sp-line); border-top:1px solid var(--sp-line); border-bottom:1px solid var(--sp-line); }
.sp-cols3{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1px; background:var(--sp-line); }
.sp-cols5 > *, .sp-cols3 > *{ background:var(--sp-paper); padding:26px clamp(18px,2.4vw,28px) 30px; }
.sp-num{ font-size:.7rem; letter-spacing:.18em; color:var(--sp-grey); display:block; margin-bottom:14px; }
.sp-ph{ background:linear-gradient(135deg,#d8d6d2,#a9aaa9); aspect-ratio:4/3; display:block; }
.sp-ph--blue{ background:linear-gradient(135deg,#cdd8e0,#6f7f8b); }
.sp-meta{ font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--sp-grey); margin:18px 0 8px; }
.sp-band h2{ font-family:var(--sp-serif); font-weight:300; font-size:clamp(1.35rem,3.4vw,2.1rem); line-height:1.2; margin:0 0 10px; max-width:34ch; }
.sp-band h3{ font-family:var(--sp-serif); font-weight:700; font-size:1.02rem; margin:0 0 8px; }
.sp-muted{ color:var(--sp-grey); font-size:.9rem; }
.sp-steps2{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:clamp(20px,3vw,40px); }
.sp-steps2 > div{ border-top:2px solid var(--sp-black); padding-top:16px; }


/* 6 Startseite – Bänder nach der Skizze */
.sp-home{ font-family:var(--sp-sans); color:var(--sp-ink); }
.sp-full{ width:100vw; margin-left:calc(50% - 50vw); }
.sp-band{ padding:clamp(44px,7vw,86px) clamp(18px,4vw,56px); border-bottom:1px solid var(--sp-line); }
.sp-hero{ position:relative; color:#fff; background:#000; overflow:hidden; }
.sp-hero__bg{ position:absolute; inset:0; background:radial-gradient(120% 120% at 70% 20%, rgba(179,195,207,.30), transparent 60%), linear-gradient(115deg,#141414 0%,#2a2a2a 45%,#0c0c0c 100%); }
.sp-hero__in{ position:relative; padding:clamp(56px,11vw,132px) clamp(18px,4vw,56px); }
.sp-hero h1{ font-family:var(--sp-serif); font-weight:300; font-size:clamp(1.8rem,5.4vw,3.5rem); line-height:1.12; margin:0; max-width:24ch; color:#fff; }
.sp-hero h1 em{ font-style:normal; box-shadow:inset 0 -.12em 0 rgba(234,236,120,.75); }
.sp-hero .sp-kicker{ margin:0 0 22px; display:block; }
.sp-ways{ display:flex; gap:14px; flex-wrap:wrap; margin-top:clamp(28px,5vw,48px); }
.sp-btn{ display:inline-block; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; padding:13px 22px; border:1px solid #fff; color:#fff; text-decoration:none; }
.sp-btn--fill{ background:#fff; color:#000; }
.sp-cols5{ display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:1px; background:var(--sp-line); border-top:1px solid var(--sp-line); border-bottom:1px solid var(--sp-line); }
.sp-cols3{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1px; background:var(--sp-line); }
.sp-cols5 > *, .sp-cols3 > *{ background:var(--sp-paper); padding:26px clamp(18px,2.4vw,28px) 30px; }
.sp-num{ font-size:.7rem; letter-spacing:.18em; color:var(--sp-grey); display:block; margin-bottom:14px; }
.sp-ph{ background:linear-gradient(135deg,#d8d6d2,#a9aaa9); aspect-ratio:4/3; display:block; }
.sp-ph--blue{ background:linear-gradient(135deg,#cdd8e0,#6f7f8b); }
.sp-meta{ font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--sp-grey); margin:18px 0 8px; }
.sp-band h2{ font-family:var(--sp-serif); font-weight:300; font-size:clamp(1.35rem,3.4vw,2.1rem); line-height:1.2; margin:0 0 10px; max-width:34ch; }
.sp-band h3{ font-family:var(--sp-serif); font-weight:700; font-size:1.02rem; margin:0 0 8px; }
.sp-muted{ color:var(--sp-grey); font-size:.9rem; }
.sp-steps2{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:clamp(20px,3vw,40px); }
.sp-steps2 > div{ border-top:2px solid var(--sp-black); padding-top:16px; }


/* 7 Feinschliff Startseite */
.sp-more, .sp-more:hover, .sp-more:focus{ color:var(--sp-ink); text-decoration:none; }
.sp-hero .sp-btn:hover{ background:var(--sp-manz); color:var(--sp-black); border-color:var(--sp-manz); }
body.home .entry-header, body.home .jeg_post_title, body.home .jeg_breadcrumbs{ display:none; }
body.home .jeg_main .container, body.home .jeg_content{ padding-left:0; padding-right:0; }
.sp-clients span{ display:inline-block; margin-right:clamp(18px,4vw,54px); }


/* 8 Logo – erzwingt den eigenen Schriftzug auf allen Geräten */
.jeg_logo img.jeg_logo_img{ content:url('https://neu.stichpunkt.media/wp-content/uploads/2026/09/Unbenannt-15.-September-2026-um-23.03.41.png'); max-height:58px; width:auto; }
.jeg_header .jeg_logo{ padding:6px 0; }