/*
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: 2.6.6
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; }


/* 9 Kopfbild Startseite */
.sp-hero__bg{ background-image: linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.35) 100%); background-size:cover; background-position:center 60%; }
.sp-hero__in{ min-height:clamp(380px,52vh,640px); display:flex; flex-direction:column; justify-content:flex-end; }


/* 10 Kopfzeile – größeres Logo, ruhigere Leiste */
.jeg_topbar{ display:none !important; }
.jeg_midbar{ height:auto !important; padding:30px 0 20px !important; }
.jeg_logo img.jeg_logo_img{ max-height:104px !important; width:auto; }
.jeg_bottombar.jeg_navbar{ height:auto; padding:4px 0; border-top:1px solid var(--sp-line); border-bottom:1px solid var(--sp-line); }
.jeg_bottombar .jeg_menu > li > a{ letter-spacing:.14em; }
.jeg_header .container{ max-width:1400px; }
body.home .jeg_main .container, body.home .jeg_content{ padding-top:0 !important; }
body.home .jeg_content{ margin-top:0 !important; }


/* 11 Kopfzeile einreihig: Logo links, Menü mittig, Knopf rechts */
.jeg_header.normal{ display:flex; align-items:center; gap:clamp(18px,3vw,48px); padding:0 clamp(18px,3vw,48px); border-bottom:1px solid var(--sp-line); }
.jeg_header.normal .jeg_midbar{ flex:0 0 auto; padding:14px 0 !important; height:auto !important; border:0 !important; }
.jeg_header.normal .jeg_bottombar{ flex:1 1 auto; height:auto !important; padding:0 !important; border:0 !important; }
.jeg_header.normal .jeg_midbar > .container, .jeg_header.normal .jeg_bottombar > .container{ width:100% !important; max-width:none !important; padding:0 !important; margin:0 !important; }
.jeg_logo img.jeg_logo_img{ max-height:76px !important; }
.jeg_bottombar .jeg_nav_row{ display:flex; align-items:center; width:100%; }
.jeg_bottombar .jeg_nav_col.jeg_nav_left{ flex:1 1 auto; }
.jeg_bottombar .jeg_menu{ display:flex; align-items:center; gap:clamp(12px,2vw,34px); width:100%; }
.jeg_bottombar .jeg_menu > li > a{ letter-spacing:.14em; font-size:.82rem; }
.jeg_bottombar .jeg_search_wrapper, .jeg_header .jeg_search_toggle{ display:none !important; }
.jeg_menu li.sp-cta{ margin-left:auto; }
.jeg_menu li.sp-cta > a{ border:1px solid var(--sp-black); padding:12px 20px; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; }
.jeg_menu li.sp-cta > a:hover{ background:var(--sp-black); color:#fff; }
/* 1100er-Umbruch entfaellt: unter 1024 greift die Mobilleiste, darueber Abschnitt 40 */

/* Knopf ganz nach rechts */
.jeg_bottombar .jeg_nav_col.jeg_nav_left, .jeg_bottombar .item_wrap, .jeg_bottombar .jeg_nav_item, .jeg_bottombar .jeg_main_menu_wrapper{ width:100%; flex:1 1 auto; }
.jeg_bottombar .jeg_menu{ justify-content:flex-start; }

/* Menütypografie größer */
.jeg_bottombar .jeg_menu > li > a{ font-size:1rem !important; letter-spacing:.12em !important; font-weight:400; }
.jeg_menu li.sp-cta > a{ font-size:.92rem !important; padding:14px 22px; }
.jeg_bottombar .jeg_menu{ gap:clamp(16px,2.4vw,40px); }
.jeg_logo img.jeg_logo_img{ max-height:88px !important; }

/* Menü mittig, Knopf rechts außen */
.jeg_bottombar .jeg_menu{ position:relative; justify-content:center; padding-right:clamp(150px,14vw,230px); }
.jeg_menu li.sp-cta{ position:absolute; right:0; top:50%; transform:translateY(-50%); margin-left:0 !important; }

/* ===========================================================
   12 Innenseiten – Bauplan nach der Skizze
   =========================================================== */

.sp-page-wrap .entry-header,
.sp-page-wrap .jeg_breadcrumbs,
body.sp-designed .entry-header,
body.sp-designed .jeg_breadcrumbs{display:none!important}
body.sp-designed .jeg_main_content{padding-top:0}
body.sp-designed .entry-content{margin-top:0}

.sp-page{font-family:var(--sp-sans); color:var(--sp-ink); line-height:1.6}
.sp-page p{margin:0 0 12px}
.sp-page a{color:inherit; text-decoration:none}
.sp-page img{max-width:100%; height:auto}

.sp-sec{padding:clamp(40px,6vw,80px) 0; border-bottom:1px solid var(--sp-line)}
.sp-sec:last-child{border-bottom:0}
.sp-sec--tight{padding-bottom:30px}
.sp-sec--top0{padding-top:0; border-bottom:0}

.sp-page .sp-eyebrow{font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--sp-grey); margin:0 0 18px; display:flex; align-items:center; gap:12px}
.sp-page .sp-eyebrow::after{content:""; flex:1; height:1px; background:var(--sp-line)}
.sp-big{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-page h3{font-family:var(--sp-serif); font-weight:700; font-size:1.02rem; line-height:1.35; margin:0 0 8px}
.sp-page .sp-lead{font-family:var(--sp-serif); font-weight:300; font-size:clamp(1rem,1.9vw,1.2rem); line-height:1.6; max-width:62ch; color:#26262a}
.sp-page .sp-muted{color:var(--sp-grey); font-size:.9rem}
.sp-small{font-size:.86rem}
.sp-flag{background:var(--sp-manz); padding:0 3px}

.sp-cover{aspect-ratio:16/9; max-height:340px; width:100%; background:linear-gradient(135deg,#3a3a3a,#111); background-size:cover; background-position:center}

.sp-page .sp-grid{display:grid; gap:1px; background:var(--sp-line); border-top:1px solid var(--sp-line); border-bottom:1px solid var(--sp-line)}
.sp-g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.sp-g3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.sp-page .sp-cell{background:#fff; padding:26px clamp(18px,2.4vw,28px) 30px}
.sp-page .sp-cell ul{margin:10px 0 0; padding-left:16px; font-size:.86rem; color:#4a4a48; list-style:disc}
.sp-page .sp-cell li{margin:0 0 4px}
.sp-page .sp-num{font-size:.7rem; letter-spacing:.18em; color:var(--sp-grey); display:block; margin:18px 0 14px}
.sp-page .sp-more{display:inline-block; margin-top:16px; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; border-bottom:1px solid var(--sp-manz); padding-bottom:3px}

.sp-page .sp-ph{background:linear-gradient(135deg,#d8d6d2 0%,#bdbcba 50%,#a9aaa9 100%); position:relative; display:block}
.sp-page .sp-ph--blue{background:linear-gradient(135deg,#cdd8e0 0%,#9fb1bf 60%,#6f7f8b 100%)}
.sp-page .sp-ph--dark{background:linear-gradient(135deg,#3a3a3a,#111)}
.sp-r169{aspect-ratio:16/9}
.sp-r32{aspect-ratio:3/2}
.sp-r43{aspect-ratio:4/3}
.sp-r11{aspect-ratio:1/1}

.sp-case{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1px; background:var(--sp-line); margin-top:20px}
.sp-case > article{background:#fff; padding:0 0 24px}
.sp-case .sp-meta{font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--sp-grey); margin:18px 0 8px; padding:0 22px}
.sp-case h3, .sp-case p{padding:0 22px}
.sp-case .sp-res{font-size:.88rem; color:#26262a}

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

.sp-page .sp-price{border:1px solid var(--sp-black); padding:24px clamp(18px,2.4vw,28px); max-width:660px}
.sp-page .sp-price .sp-p{font-family:var(--sp-serif); font-size:clamp(1.3rem,3vw,1.9rem); font-weight:300; line-height:1.25}
.sp-page .sp-price .sp-p b{font-weight:700; box-shadow:inset 0 -.14em 0 var(--sp-manz)}
.sp-page .sp-price ul{margin:14px 0 0; padding-left:16px; font-size:.88rem; color:#4a4a48; list-style:disc}

.sp-filters{display:flex; gap:10px; flex-wrap:wrap; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; margin-top:26px}
.sp-filters a, .sp-filters span{border:1px solid var(--sp-line); padding:7px 13px; display:inline-block}
.sp-filters .sp-on{border-color:var(--sp-black); background:var(--sp-manz)}

.sp-split{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(24px,4vw,52px); align-items:start}

.sp-formwrap{max-width:720px; margin-top:26px}
.sp-formwrap .wpcf7-form p{margin:0 0 14px}
.sp-formwrap input[type=text], .sp-formwrap input[type=email], .sp-formwrap input[type=tel], .sp-formwrap input[type=date], .sp-formwrap textarea{width:100%; border:1px solid #cfcdc8; background:#fff; padding:12px 14px; font-size:.9rem; font-family:var(--sp-sans); border-radius:0; box-shadow:none}
.sp-formwrap input[type=submit], .sp-formwrap .wpcf7-submit{background:var(--sp-black); color:#fff; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; padding:14px 26px; border:0; border-radius:0; width:auto; cursor:pointer}
.sp-formwrap label{display:block; font-size:.78rem; letter-spacing:.06em; color:var(--sp-grey); margin-bottom:5px}

.sp-posts{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(20px,3vw,38px); align-items:start}
.sp-cat{display:inline-block; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; background:var(--sp-manz); padding:3px 8px; margin:16px 0 10px}
.sp-cat--h{background:var(--sp-heather)}
.sp-list{display:grid; gap:22px}
.sp-list article{display:grid; grid-template-columns:96px 1fr; gap:16px; align-items:start}
.sp-page .sp-contact{background:var(--sp-paper-2)}
.sp-nl{padding:20px}
.sp-nl b{font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; display:block}

/* ===========================================================
   13 Fuß – schwarzes Band nach der Skizze
   =========================================================== */
.jeg_footer .jeg_footer_secondary{display:none!important}
.sp-foot{background:var(--sp-black); color:#bdbdbb; padding:clamp(34px,5vw,56px) clamp(18px,4vw,56px) clamp(24px,4vw,40px); font-size:.84rem; font-family:var(--sp-sans); line-height:1.6}
.sp-foot .sp-foot__logo{max-height:52px; width:auto; margin:0 auto 26px; display:block; max-width:1170px}
.sp-foot .sp-foot__cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:26px; max-width:1170px; margin:0 auto}
.sp-foot b{color:#fff; display:block; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; margin-bottom:10px; font-weight:600}
.sp-foot ul{margin:0; padding:0; list-style:none}
.sp-foot li{margin:0 0 6px}
.sp-foot a{color:#bdbdbb; text-decoration:none}
.sp-foot a:hover{color:#fff}
.sp-foot .sp-foot__nl{border:1px solid #444; padding:14px; margin-top:8px}
.sp-foot .sp-foot__nl a{color:#fff; border-bottom:1px solid var(--sp-manz)}
.sp-foot .sp-foot__base{max-width:1170px; margin:30px auto 0; padding-top:18px; border-top:1px solid #333; font-size:.76rem; color:#8b8b89; display:flex; gap:18px; flex-wrap:wrap}

@media (max-width:767px){
  .sp-sec{padding:34px 0}
  .sp-list article{grid-template-columns:72px 1fr}
}
/* ===========================================================
   15 Feinschliff Innenseiten
   =========================================================== */
/* JNews-Fuß weicht dem eigenen */
.jeg_footer{display:none!important}
.sp-foot{margin-top:0}

/* Kein Leerraum, wo der Seitentitel war */
body.sp-designed .jeg_main_content .container{padding-top:0}
body.sp-designed .entry-content > .sp-page > .sp-sec:first-child{padding-top:clamp(28px,4vw,52px)}
body.sp-designed .jeg_featured{display:none}

/* Titelbild einer Leistungsseite über die volle Breite */
.sp-page .sp-cover{width:100vw; margin-left:calc(50% - 50vw); max-height:360px}

/* Kachelraster über die volle Breite der Spalte */
.sp-page .sp-grid, .sp-page .sp-case{margin-left:calc(-1 * clamp(0px,1vw,16px)); margin-right:calc(-1 * clamp(0px,1vw,16px))}

/* Überschriften in Listen erben die Seitentypografie */
.sp-page h2 a, .sp-page h3 a{color:inherit; text-decoration:none}
.sp-page h2 a:hover, .sp-page h3 a:hover{box-shadow:inset 0 -2px 0 var(--sp-manz)}

/* Formular: Pflichtfeldsternchen und Hinweise ruhiger */
.sp-formwrap .wpcf7-not-valid-tip{font-size:.78rem; color:#a33}
.sp-formwrap .wpcf7-response-output{border:1px solid var(--sp-line); padding:12px 14px; font-size:.86rem; margin:14px 0 0}
/* ===========================================================
   16 Raster und Abstände der Innenseiten
   =========================================================== */
body.sp-designed .jeg_content{padding-top:0}

@media (min-width:1000px){
  .sp-page .sp-g3{grid-template-columns:repeat(3,1fr)}
  .sp-page .sp-g2{grid-template-columns:repeat(3,1fr)}
  .sp-case{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:700px) and (max-width:999px){
  .sp-page .sp-g3, .sp-page .sp-g2, .sp-case{grid-template-columns:repeat(2,1fr)}
}

/* Magazin: Aufmacher etwas ruhiger */
.sp-posts > article .sp-big{margin-top:2px}
.sp-posts .sp-list h3{font-size:.98rem}
/* ===========================================================
   17 Menü: Akzent in Manz statt JNews-Rot
   =========================================================== */
/* aktiver Punkt — auch wenn nur eine Unterseite offen ist */
.jeg_menu > li.current-menu-item > a,
.jeg_menu > li.current_page_item > a,
.jeg_menu > li.current-menu-ancestor > a,
.jeg_menu > li.current-menu-parent > a,
.jeg_menu > li.current_page_ancestor > a{box-shadow:inset 0 -6px 0 var(--sp-manz)}

/* roter Balken von JNews: beim aktiven Punkt weg */
.jeg_menu > li.current-menu-item > a::before,
.jeg_menu > li.current_page_item > a::before,
.jeg_menu > li.current-menu-ancestor > a::before,
.jeg_menu > li.current-menu-parent > a::before,
.jeg_menu > li.current_page_ancestor > a::before{display:none!important}

/* beim Hovern in Manz statt Rot */
.jeg_menu > li > a::before,
.jeg_menu_style_1 > li > a::before,
.jeg_menu_style_2 > li > a::before,
.jeg_menu_style_3 > li > a::before,
.jeg_menu_style_4 > li > a::before,
.jeg_menu_style_5 > li > a::before{background:var(--sp-manz)!important; height:6px!important; bottom:0!important}

/* mobiles Menü */
.jeg_mobile_menu > li.current-menu-item > a,
.jeg_mobile_menu > li.current-menu-ancestor > a,
.jeg_mobile_menu_style_1 > li.current-menu-item a,
.jeg_mobile_menu_style_1 > li.current-menu-ancestor a,
.jeg_mobile_menu_style_2 > li.current-menu-item::after,
.jeg_mobile_menu_style_2 > li.current-menu-ancestor::after,
.jeg_mobile_menu_style_3 > li.current-menu-item::after,
.jeg_mobile_menu_style_3 > li.current-menu-ancestor::after{border-bottom-color:var(--sp-manz)!important}
/* ===========================================================
   18 Archive und Beitragslisten nach der Skizze
   =========================================================== */
/* Rubrikenmarke: Manz mit schwarzer Schrift statt schwarzem Kasten */
.jeg_post_category a,
.jeg_postblock .jeg_post_category a,
.jeg_thumb .jeg_post_category a,
.jeg_pl_md_card .jeg_post_category a{background:var(--sp-manz)!important; color:var(--sp-black)!important;
  font-family:var(--sp-sans); font-size:.66rem!important; letter-spacing:.16em; font-weight:600; padding:3px 8px}

/* Metazeile: nur Datum, kein Autor, keine Kommentarzählung */
.jeg_post_meta .jeg_meta_author,
.jeg_post_meta .jeg_meta_comment,
.jeg_postblock .jeg_meta_author,
.jeg_postblock .jeg_meta_comment{display:none!important}
.jeg_post_meta, .jeg_post_meta a{color:var(--sp-grey); font-size:.76rem; letter-spacing:.04em}

/* Überschriften der Liste in der Seitentypografie */
.jeg_postblock .jeg_post_title a, .jeg_post_title a{font-family:var(--sp-serif); color:var(--sp-ink)}
.jeg_postblock .jeg_post_title a:hover, .jeg_post_title a:hover{box-shadow:inset 0 -2px 0 var(--sp-manz)}
.jeg_post_excerpt p{color:#4a4a48; font-size:.88rem}

/* Weiterlesen-Knopf ruhiger */
.jeg_readmore{border:1px solid var(--sp-black)!important; background:transparent!important; color:var(--sp-black)!important;
  border-radius:0!important; font-size:.72rem!important; letter-spacing:.12em; text-transform:uppercase; padding:9px 16px}
.jeg_readmore:hover{background:var(--sp-manz)!important; color:var(--sp-black)!important}

/* Archivkopf */
.jeg_archive_header .jeg_archive_title, .jeg_archive_header h1{font-family:var(--sp-serif); font-weight:300; color:var(--sp-ink)}
.jeg_archive_header{border-bottom:1px solid var(--sp-line); padding-bottom:18px; margin-bottom:26px}

/* Blättern */
.jeg_navigation a, .page-numbers{border-radius:0!important}
.page-numbers.current{background:var(--sp-manz)!important; color:var(--sp-black)!important; border-color:var(--sp-black)!important}
/* ===========================================================
   19 Kopfbereich mit Video
   =========================================================== */
.sp-hero{position:relative; overflow:hidden}
.sp-hero__video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; display:block; border:0}
.sp-hero__shade{position:absolute; inset:0; z-index:2; display:block; pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.80),rgba(0,0,0,.58) 45%,rgba(0,0,0,.38))}
.sp-hero__bg{z-index:0}
.sp-hero__in{position:relative; z-index:3}

/* 19b Video jetzt auch auf dem Handy aktiv (Thomas, 17.09.26) — vorher hier Standbild statt Video wegen Datenvolumen */
/* Wer wenig Bewegung möchte, bekommt das Standbild */
@media (prefers-reduced-motion: reduce){
  .sp-hero__video{display:none}
  .sp-hero__shade{display:none}
}
/* ===========================================================
   20 Knöpfe im Kopfbereich — helle Schrift auf dunklem Grund
   =========================================================== */
.sp-hero .sp-btn,
.sp-hero a.sp-btn,
.sp-hero .sp-ways a{color:#fff!important; border-color:#fff!important; background:transparent}
.sp-hero .sp-btn--fill,
.sp-hero a.sp-btn--fill{background:#fff!important; color:#000!important; border-color:#fff!important}
.sp-hero .sp-btn:hover{background:var(--sp-manz)!important; color:#000!important; border-color:var(--sp-manz)!important}
.sp-hero .sp-btn--fill:hover{background:var(--sp-manz)!important; color:#000!important; border-color:var(--sp-manz)!important}

/* Kopftext bleibt hell, egal was JNews an Linkfarben setzt */
.sp-hero .sp-hero__in, .sp-hero h1, .sp-hero .sp-kicker{color:#fff}
.sp-hero h1 em{color:#fff}
/* ===========================================================
   21 Kacheltexte etwas größer
   =========================================================== */
/* Startseite: Beschreibung unter dem Kacheltitel */
.sp-cols5 .sp-muted,
.sp-cols3 .sp-muted,
.sp-cols5 p,
.sp-cols3 p{font-size:1rem; line-height:1.55}

/* Innenseiten: gleiche Stufe in allen Kacheln */
.sp-page .sp-cell .sp-small,
.sp-page .sp-cell .sp-muted,
.sp-page .sp-cell p{font-size:.95rem; line-height:1.6}
.sp-page .sp-cell ul{font-size:.95rem; line-height:1.6}
.sp-case .sp-res{font-size:.95rem; line-height:1.6}
/* ===========================================================
   22 „Ansehen“ präsenter
   =========================================================== */
.sp-more,
.sp-page .sp-more{font-size:.84rem; font-weight:600; letter-spacing:.12em; color:var(--sp-black);
  border-bottom:3px solid var(--sp-manz); padding-bottom:5px; margin-top:20px}
.sp-more:hover,
.sp-page .sp-more:hover{background:var(--sp-manz); border-bottom-color:var(--sp-black)}
.sp-more::after{content:" →"; letter-spacing:0}
/* ===========================================================
   23 Referenzraster auf der Startseite: drei mal zwei
   =========================================================== */
@media (min-width:1000px){
  .sp-home .sp-cols3{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:700px) and (max-width:999px){
  .sp-home .sp-cols3{grid-template-columns:repeat(2,1fr)}
}
/* ===========================================================
   24 Referenzbilder
   =========================================================== */
.sp-refimg{display:block; width:100%; aspect-ratio:4/3; object-fit:cover; background:#f2f1ee}
.sp-cols3 article .sp-refimg{margin-bottom:0}
/* ===========================================================
   25 Absendeknopf im Formular
   =========================================================== */
.sp-formwrap input[type=submit],
.sp-formwrap .wpcf7-submit{
  height:auto!important; line-height:1!important; padding:17px 30px!important;
  font-size:.78rem!important; letter-spacing:.14em; font-weight:600;
  background:var(--sp-black)!important; color:#fff!important; border:1px solid var(--sp-black)!important;
  border-radius:0!important; width:auto!important; margin-top:6px; cursor:pointer;
  transition:background .15s, color .15s}
.sp-formwrap input[type=submit]:hover,
.sp-formwrap .wpcf7-submit:hover{background:var(--sp-manz)!important; color:var(--sp-black)!important; border-color:var(--sp-black)!important}
.sp-formwrap .wpcf7-spinner{margin:0 0 0 14px}
/* ===========================================================
   26 Kanäle im Fuß
   =========================================================== */
.sp-foot__kanaele{max-width:1170px; margin:28px auto 0; padding-top:20px; border-top:1px solid #333;
  display:flex; gap:22px; flex-wrap:wrap; font-size:.76rem; letter-spacing:.12em; text-transform:uppercase}
.sp-foot__kanaele a{color:#bdbdbb; border-bottom:2px solid transparent; padding-bottom:3px}
.sp-foot__kanaele a:hover{color:#fff; border-bottom-color:var(--sp-manz)}
.sp-foot .sp-foot__base{margin-top:18px; border-top:0; padding-top:0}


/* ===========================================================
   27 Ablaufband auf der Startseite
   =========================================================== */
.sp-home .sp-steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:clamp(20px,3vw,40px); margin-top:8px}
.sp-home .sp-steps > div{border-top:2px solid var(--sp-black); padding-top:16px}
.sp-home .sp-steps .sp-st{font-size:.7rem; letter-spacing:.2em; color:var(--sp-grey); display:block; margin-bottom:10px}
.sp-home .sp-steps h3{font-family:var(--sp-serif); font-weight:700; font-size:1.02rem; line-height:1.35; margin:0 0 8px}
.sp-home .sp-steps .sp-muted{color:var(--sp-grey); font-size:.9rem; margin:0}


/* ===========================================================
   28 Schriftgrößen global angehoben (Wunsch Thomas: rund 4 pt)
   Ein Regler: die Wurzelgröße. Alle rem-Werte skalieren mit.
   =========================================================== */
html{font-size:125%}                 /* 16 -> 20 px */
body, .sp-page, .jeg_content, .content-inner{font-size:1rem}   /* JNews stellte 14 px fest ein */
.sp-page .sp-muted, .sp-home .sp-steps .sp-muted{font-size:.95rem}
.sp-small{font-size:.92rem}
.sp-page .sp-eyebrow, .sp-home .sp-eyebrow{font-size:.78rem}
.sp-cols5 .sp-muted{font-size:1.02rem}
.jeg_menu > li > a{font-size:15px}
.sp-foot{font-size:.92rem}


/* ===========================================================
   29 Sticky-Leiste beim Scrollen: gleiche Formensprache wie die Kopfzeile
   JNews setzt dort fett und Versalien – das fällt aus dem Bild.
   =========================================================== */
.jeg_stickybar{border-bottom:1px solid var(--sp-line)!important; box-shadow:none!important; background:#fff!important}
.jeg_stickybar .jeg_menu > li > a{font-family:var(--sp-sans)!important; font-weight:400!important; text-transform:none!important; letter-spacing:normal!important; font-size:15px!important; color:var(--sp-black)!important}
.jeg_stickybar .jeg_menu > li > a::before{display:none!important}
.jeg_stickybar .jeg_menu > li:hover > a,
.jeg_stickybar .jeg_menu > li.current-menu-item > a,
.jeg_stickybar .jeg_menu > li.current-menu-parent > a,
.jeg_stickybar .jeg_menu > li.current-menu-ancestor > a{box-shadow:inset 0 -6px 0 var(--sp-manz)!important; color:var(--sp-black)!important}
.jeg_stickybar .jeg_menu li li a{text-transform:none!important; font-weight:400!important; letter-spacing:normal!important}


/* ===========================================================
   30 Beitragsdetails: Video oben, Einbettungen, Schlagworte
   =========================================================== */
/* Wo ein Video im Beitrag steht, tritt das Beitragsbild zurueck */
body.sp-hasvideo .jeg_featured.featured_image{display:none!important}
/* Einbettungen fuellen die Spalte, egal welche Breite im Quelltext steht */
.sp-embed{position:relative; width:100%; margin:0 0 26px}
.sp-embed iframe{width:100%!important; height:auto!important; aspect-ratio:16/9; display:block; border:0}
.entry-content iframe[src*="youtube"], .entry-content iframe[src*="youtu.be"], .entry-content iframe[src*="vimeo"]{width:100%!important; height:auto!important; aspect-ratio:16/9; display:block; border:0}
/* Schlagworte: Manz statt Schwarz beim Ueberfahren */
.jeg_post_tags a:hover, .jeg_post_tags a:focus,
.jeg_post_tags a:hover span, .jeg_post_tags a:focus span{background:var(--sp-manz)!important; color:var(--sp-black)!important; border-color:var(--sp-manz)!important}


/* ===========================================================
   31 Titelbilder auf den Leistungsseiten als echtes Bild
   =========================================================== */
img.sp-cover{object-fit:cover; display:block; background:none}
.sp-page img.sp-refimg{aspect-ratio:4/3; object-fit:cover; display:block; width:100%}
.sp-page img.sp-refimg.sp-r32{aspect-ratio:3/2}
.sp-case img.sp-refimg{width:100%}
.sp-page img.sp-refimg.sp-r169{aspect-ratio:16/9}


/* ===========================================================
   32 Magazinliste: Vorschaubilder im Querformat statt Quadrat
   =========================================================== */
.sp-list article{grid-template-columns:150px 1fr!important; gap:20px}
.sp-list article img{width:150px; aspect-ratio:3/2!important; object-fit:cover; display:block; height:auto}
@media (max-width:767px){
  .sp-list article{grid-template-columns:112px 1fr!important; gap:14px}
  .sp-list article img{width:112px}
}


/* ===========================================================
   33 Untermenue: gleiche Schriftgroesse wie die Hauptpunkte
   =========================================================== */
.jeg_menu li li a,
.jeg_menu .sub-menu li a,
.jeg_stickybar .jeg_menu li li a{font-size:16px!important; line-height:1.5!important; padding:13px 18px!important; letter-spacing:normal!important; text-transform:none!important}
.jeg_menu li .sub-menu{min-width:250px}


/* ===========================================================
   34 Bewegung: Flaechen reagieren, aber ruhig
   Eine Dauer, eine Kurve - alles andere wirkt zufaellig.
   =========================================================== */
:root{--sp-t:.28s cubic-bezier(.2,.7,.3,1)}

/* Knoepfe */
.sp-btn, .sp-page .sp-btn{transition:background-color var(--sp-t), color var(--sp-t), border-color var(--sp-t), box-shadow var(--sp-t)}
.sp-btn:hover{box-shadow:inset 0 -3em 0 var(--sp-manz); color:var(--sp-black)!important; border-color:var(--sp-black)!important}
.sp-hero .sp-btn:hover{color:var(--sp-black)!important; border-color:var(--sp-manz)!important}

/* Filterzeile im Magazin und auf Arbeiten */
.sp-filters a, .sp-filters span{transition:background-color var(--sp-t), border-color var(--sp-t), color var(--sp-t)}
.sp-filters a:hover{border-color:var(--sp-black); background:var(--sp-manz); color:var(--sp-black)}

/* Kacheln und Faelle */
.sp-page .sp-cell, .sp-case > article, .sp-home .sp-cols5 > *, .sp-home .sp-cols3 > article{transition:background-color var(--sp-t)}
.sp-page .sp-cell:hover, .sp-case > article:hover, .sp-home .sp-cols3 > article:hover{background:var(--sp-paper-2,#f7f6f3)}

/* Ansehen-Marke */
.sp-more{transition:border-color var(--sp-t), letter-spacing var(--sp-t)}
.sp-more:hover{border-bottom-color:var(--sp-black); letter-spacing:.02em}

/* Bilder atmen leicht, im festen Rahmen */
.sp-case > article > a, .sp-case .sp-imgwrap, .sp-home .sp-cols3 > article > a{display:block; overflow:hidden}
img.sp-refimg, img.sp-cover{transition:transform .5s cubic-bezier(.2,.7,.3,1), filter var(--sp-t)}
.sp-case > article:hover img.sp-refimg, .sp-home .sp-cols3 > article:hover img.sp-refimg{transform:scale(1.025)}

/* Menue */
.jeg_menu > li > a, .jeg_menu li li a{transition:box-shadow var(--sp-t), background-color var(--sp-t), color var(--sp-t)}
.jeg_menu li .sub-menu{transition:opacity var(--sp-t), transform var(--sp-t)}

/* Links in Listen */
.sp-list article, .sp-posts > article{transition:background-color var(--sp-t)}
.sp-list article:hover{background:var(--sp-paper-2,#f7f6f3)}

/* Wer keine Bewegung will, bekommt keine */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{transition:none!important; animation:none!important}
}

/* Rubrikenzeile auf den Kategorieseiten */
.sp-archivkopf{margin:0 0 30px}
.sp-archivkopf .sp-filters{margin-top:0}


/* ===========================================================
   35 Leistungskacheln: die ganze Flaeche reagiert und ist klickbar
   Der Link lag nur auf "Ansehen" - auf dem Telefon ein 80-px-Ziel.
   =========================================================== */
.sp-home .sp-cols5 > div, .sp-page .sp-cell{position:relative; transition:background-color var(--sp-t)}
.sp-home .sp-cols5 > div:hover, .sp-page .sp-cell:hover{background:#f7f6f3}
.sp-home .sp-cols5 .sp-more::before, .sp-page .sp-cell .sp-more::before{content:""; position:absolute; inset:0; z-index:1}
.sp-home .sp-cols5 .sp-more, .sp-page .sp-cell .sp-more{transition:border-color var(--sp-t), letter-spacing var(--sp-t)}
.sp-home .sp-cols5 > div:hover .sp-more, .sp-page .sp-cell:hover .sp-more{border-bottom-color:var(--sp-black); letter-spacing:.02em}
.sp-home .sp-cols5 .sp-more::after, .sp-page .sp-cell .sp-more::after{display:inline-block; margin-left:.4em; transition:transform var(--sp-t)}
.sp-home .sp-cols5 > div:hover .sp-more::after, .sp-page .sp-cell:hover .sp-more::after{transform:translateX(5px)}
.sp-home .sp-cols5 > div:hover .sp-num, .sp-page .sp-cell:hover .sp-num{color:var(--sp-black)}
.sp-home .sp-cols5 .sp-num, .sp-page .sp-cell .sp-num{transition:color var(--sp-t)}

/* Lange Woerter brechen statt ueber den Rand zu laufen */
.sp-page p, .sp-page li, .sp-home p, .sp-cols5 p{overflow-wrap:break-word; hyphens:auto}
/* Ueberschriften: zuerst passend machen, Trennung nur als Netz */
.sp-page h1, .sp-page h2, .sp-page h3, .sp-home h1, .sp-home h2, .sp-home h3, .sp-big, .sp-cols5 h3{overflow-wrap:break-word; hyphens:auto}
.sp-home .sp-cols5 h3{font-size:clamp(1.42rem,2.1vw,1.68rem); line-height:1.25}   /* damit "Kommunikation" in eine Zeile passt */


/* ===========================================================
   36 Auftraggeberzeile: Unterstreichung reagiert, ohne Verlinkung
   Entscheidung Thomas 16.09.: nur Bewegung, keine Tueren nach draussen.
   =========================================================== */
.sp-clients span{transition:border-color var(--sp-t), border-bottom-width var(--sp-t), color var(--sp-t), padding-bottom var(--sp-t)}
.sp-clients span:hover{color:var(--sp-black); border-bottom:3px solid var(--sp-manz); padding-bottom:1px}


/* ===========================================================
   37 Sechs Leistungskacheln: 3 x 2 statt sechs schmaler Spalten
   =========================================================== */
@media (min-width:1000px){
  .sp-home .sp-cols5{grid-template-columns:repeat(3,1fr)}
}


/* 38 Mobile Ansicht: eine Kopfzeile, ruhige Groessen */
@media (max-width:1024px){
  html{ font-size:112%; overflow-x:clip; }
  body{ overflow-x:clip; }
  .jeg_header.normal, .jeg_stickybar{ display:none !important; }
  .jeg_navbar_mobile{ display:block !important; }
  .jeg_navbar_mobile .jeg_mobile_bottombar{ background:#fff !important; border-bottom:1px solid var(--sp-line) !important; height:auto !important; }
  .jeg_navbar_mobile .toggle_btn, .jeg_navbar_mobile .jeg_search_toggle{ color:var(--sp-black) !important; }
  .jeg_navbar_mobile .jeg_mobile_logo .site-title a{ display:block; width:148px; height:38px; font-size:0; background:url("/wp-content/uploads/2026/09/Unbenannt-15.-September-2026-um-23.03.41.png") center center / contain no-repeat; }
  .jeg_navbar_mobile .jeg_mobile_logo img{ display:none !important; }
  .jeg_mobile_wrapper .socials_widget, .jeg_mobile_wrapper .jeg_aside_copyright{ display:none !important; }
  .jeg_mobile_menu li.sp-cta{ margin-top:20px; }
  .jeg_mobile_menu li.sp-cta > a{ display:block; text-align:center; border:1px solid var(--sp-black); text-transform:uppercase; letter-spacing:.12em; font-size:13px; padding:13px 16px; }
}
@media (max-width:767px){
  .sp-hero__in{ padding:40px 20px 46px; }
  .sp-hero h1{ font-size:1.72rem; line-height:1.24; hyphens:none; -webkit-hyphens:none; max-width:none; }
  .sp-kicker{ font-size:.62rem; letter-spacing:.14em; line-height:1.8; }
  .sp-ways{ gap:10px; }
  .sp-ways .sp-btn{ flex:1 1 0; white-space:nowrap; font-size:.62rem; letter-spacing:.1em; padding:13px 8px; }
}


/* 39 Mobile Feinschliff: Ueberschriften ohne Trennung, schmalere Vorschaubilder */
@media (max-width:767px){
  .sp-list article{ grid-template-columns:110px 1fr !important; gap:14px !important; }
  .sp-list h2, .sp-list h3, .sp-list h4, .sp-card h3, .sp-page h1, .sp-page h2, .sp-page h3, .jeg_post_title{ hyphens:none; -webkit-hyphens:none; overflow-wrap:break-word; }
}


/* 40 Kopfzeile: mitwachsende Groessen statt Umbruch */
@media (min-width:1025px){
  .jeg_header.normal{ gap:clamp(14px,2.2vw,48px); padding:0 clamp(16px,2.4vw,48px); }
  .jeg_logo img.jeg_logo_img{ max-height:clamp(52px,5vw,76px) !important; }
  .jeg_bottombar .jeg_menu{ gap:clamp(10px,1.6vw,34px); flex-wrap:nowrap; }
  .jeg_bottombar .jeg_menu > li > a{ font-size:clamp(12.5px,1.15vw,16px) !important; letter-spacing:.1em !important; white-space:nowrap; }
  .jeg_menu li.sp-cta > a{ padding:clamp(9px,.9vw,12px) clamp(12px,1.4vw,20px); font-size:clamp(11.5px,1vw,13px); }
}

/* 41 Burgermenue in der Gestaltung des Hauses */
@media (max-width:1024px){
  #jeg_off_canvas .jeg_mobile_wrapper{ background:#fff; }
  .jeg_mobile_wrapper .jeg_aside_item{ border:0; }
  .jeg_mobile_wrapper .jeg_search_form .jeg_search_input{ border:0 !important; border-bottom:1px solid var(--sp-line) !important; border-radius:0 !important; background:transparent !important; font-family:var(--sp-sans); font-size:14px !important; padding:10px 0 !important; color:var(--sp-black) !important; box-shadow:none !important; }
  .jeg_mobile_wrapper .jeg_search_form .jeg_search_button{ color:var(--sp-black) !important; background:transparent !important; }
  .jeg_mobile_menu > li > a{ font-family:var(--sp-sans); text-transform:uppercase; letter-spacing:.12em; font-size:13px !important; font-weight:400 !important; color:var(--sp-black) !important; padding:16px 20px !important; transition:background var(--sp-t), color var(--sp-t); }
  .jeg_mobile_menu > li > a:hover{ background:var(--sp-manz); }
  .jeg_mobile_menu li li a{ font-family:var(--sp-sans); text-transform:none !important; letter-spacing:.02em; font-size:14px !important; font-weight:400 !important; color:#3a3a38 !important; padding:12px 20px 12px 34px !important; }
  .jeg_mobile_menu li.sp-cta{ margin:22px 20px 0; }
  .jeg_mobile_menu li.sp-cta > a{ border:1px solid var(--sp-black) !important; }
}


/* 42 Untermenue im Burgermenue steht offen (Antippen oeffnet es auf dem Telefon nicht zuverlaessig) */
@media (max-width:1024px){
  .jeg_mobile_menu .sub-menu{ display:block !important; position:static !important; opacity:1 !important; visibility:visible !important; transform:none !important; width:auto !important; min-width:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important; }
  .jeg_mobile_menu .sf-with-ul::after{ display:none !important; }
  
}

/* 43 Formular: Honeypot und Datenschutz-Zeile */
.wpcf7-form p.sp-hp{ position:absolute !important; left:-9999px !important; top:0; width:1px; height:1px; overflow:hidden; }
.wpcf7-form p.sp-datenschutz{ font-family:var(--sp-sans); font-size:13px; color:#6a6a66; margin-top:-6px; }
.wpcf7-form p.sp-datenschutz a{ color:inherit; text-decoration:underline; }