/*
Theme Name: Sven Spiegel — Child
Theme URI: https://sven-spiegel.coach
Description: Child-Theme für Kadence mit der Corporate Identity von Sven Spiegel — Navy, Orange, Poppins und Carlito. Farben, Schriften, Abstände und Button-Stile kommen aus der theme.json, die Seitenabschnitte aus den mitgelieferten Block-Patterns.
Author: Sven Spiegel
Version: 1.6.0
Template: kadence
Requires at least: 6.6
Tested up to: 6.8
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: svs-child
*/

/* ==================================================================
   SCHRIFTEN

   Bewusst hier und nicht nur in der theme.json: Kadence ist ein
   klassisches Theme und liest die theme.json nur, wenn im Customizer
   unter Allgemein -> Performance "Enable Optimized Group Block" aktiv
   ist. Über diese Regeln greifen die Schriften in jedem Fall.
   ================================================================== */

@font-face{
  font-family:"Poppins"; font-style:normal; font-weight:500; font-display:swap;
  src:url("assets/fonts/poppins-500.woff") format("woff");
}
@font-face{
  font-family:"Poppins"; font-style:normal; font-weight:700; font-display:swap;
  src:url("assets/fonts/poppins-700.woff") format("woff");
}
@font-face{
  font-family:"Carlito"; font-style:normal; font-weight:400; font-display:swap;
  src:url("assets/fonts/carlito-400.woff") format("woff");
}
@font-face{
  font-family:"Carlito"; font-style:italic; font-weight:400; font-display:swap;
  src:url("assets/fonts/carlito-400-italic.woff") format("woff");
}
@font-face{
  font-family:"Carlito"; font-style:normal; font-weight:700; font-display:swap;
  src:url("assets/fonts/carlito-700.woff") format("woff");
}

:root{
  --svs-display:"Poppins","Segoe UI",Helvetica,Arial,sans-serif;
  --svs-body:"Carlito",Calibri,"Segoe UI",Helvetica,Arial,sans-serif;
}

/* Fließtext */
body,
.site,
.entry-content,
.widget-area,
input, textarea, select{
  font-family: var(--svs-body);
}

/* Überschriften, Navigation, Schaltflächen */
h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title,
.main-navigation,
.button,
button,
.wp-block-button__link,
.kb-button{
  font-family: var(--svs-display);
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title{
  font-weight: 700;
  letter-spacing: -.015em;
}


/* ==================================================================
   FARBEN

   Kadence wertet die theme.json des Child-Themes nicht aus — auf der
   Live-Installation (Kadence 1.5.2) sind die --wp--preset--color--*
   Variablen leer geblieben. Deshalb stehen alle Farben hier:

   Block 1: die Kadence-Palette. Kadence färbt Header, Links, Buttons
            und Flächen über --global-palette1 bis 9. Diese Zuordnung
            bildet die CI auf die neun Kadence-Slots ab.
   Block 2: die WordPress-Preset-Variablen, damit die Patterns und der
            Block-Editor dieselben Namen kennen.
   Block 3: die has-*-color Klassen, die WordPress sonst selbst aus
            der theme.json erzeugen würde. Ohne sie bleiben die
            Patterns farblos.
   ================================================================== */

:root{
  /* Kadence-Palette — Slot für Slot auf die CI abgebildet */
  --global-palette1:#E67E22;   /* Akzent — Links, Schaltflächen        */
  --global-palette2:#C96A16;   /* Akzent Alternative — Hover           */
  --global-palette3:#1F3A5F;   /* Kontrast am stärksten — Überschriften*/
  --global-palette4:#28251D;   /* Kontrast stark — Fließtext           */
  --global-palette5:#5C574C;   /* Kontrast mittel — Nebentext          */
  --global-palette6:#D4D1CA;   /* Kontrast dezent — Linien             */
  --global-palette7:#EFEDE6;   /* Hintergrund dezent                   */
  --global-palette8:#F7F6F2;   /* Hintergrund heller — Seitengrund     */
  --global-palette9:#FFFFFF;   /* Weiß                                 */

  /* WordPress-Presets */
  --wp--preset--color--navy:#1F3A5F;
  --wp--preset--color--navy-tief:#14263F;
  --wp--preset--color--navy-weich:#4A6C96;
  --wp--preset--color--orange:#E67E22;
  --wp--preset--color--orange-dunkel:#C96A16;
  --wp--preset--color--tinte:#28251D;
  --wp--preset--color--text-weich:#5C574C;
  --wp--preset--color--papier:#F7F6F2;
  --wp--preset--color--papier-warm:#EFEDE6;
  --wp--preset--color--linie:#D4D1CA;
  --wp--preset--color--weiss:#FFFFFF;

  --wp--preset--font-family--display:var(--svs-display);
  --wp--preset--font-family--body:var(--svs-body);
}

.has-navy-color{color:#1F3A5F;}                    .has-navy-background-color{background-color:#1F3A5F;}
.has-navy-tief-color{color:#14263F;}               .has-navy-tief-background-color{background-color:#14263F;}
.has-navy-weich-color{color:#4A6C96;}              .has-navy-weich-background-color{background-color:#4A6C96;}
.has-orange-color{color:#E67E22;}                  .has-orange-background-color{background-color:#E67E22;}
.has-orange-dunkel-color{color:#C96A16;}           .has-orange-dunkel-background-color{background-color:#C96A16;}
.has-tinte-color{color:#28251D;}                   .has-tinte-background-color{background-color:#28251D;}
.has-text-weich-color{color:#5C574C;}              .has-text-weich-background-color{background-color:#5C574C;}
.has-papier-color{color:#F7F6F2;}                  .has-papier-background-color{background-color:#F7F6F2;}
.has-papier-warm-color{color:#EFEDE6;}             .has-papier-warm-background-color{background-color:#EFEDE6;}
.has-linie-color{color:#D4D1CA;}                   .has-linie-background-color{background-color:#D4D1CA;}
.has-weiss-color{color:#FFFFFF;}                   .has-weiss-background-color{background-color:#FFFFFF;}

/* Schriftgrößen, die WordPress sonst aus der theme.json erzeugen würde */
.has-klein-font-size{font-size:.875rem;}
.has-normal-font-size{font-size:1rem;}
.has-gross-font-size{font-size:1.125rem;}
.has-h-3-font-size,.has-h3-font-size{font-size:clamp(1.35rem,1.1rem + .8vw,1.6rem);}
.has-h-2-font-size,.has-h2-font-size{font-size:clamp(1.7rem,1.3rem + 1.5vw,2.3rem);}
.has-h-1-font-size,.has-h1-font-size{font-size:clamp(2.2rem,1.5rem + 3vw,3.6rem);}

/* Seitengrund und Grundtext, falls Kadence eigene Werte gesetzt hat */
body{ background-color:#F7F6F2; color:#28251D; font-size:1.0625rem; line-height:1.65; }
h1,h2,h3,h4,h5,h6,.entry-title,.site-title{ color:#1F3A5F; }


/* ------------------------------------------------------------------
   Der Rest: Bausteine, die sich weder über Farben noch über
   Schriften ausdrücken lassen.
   ------------------------------------------------------------------ */

/* Eyebrow — kleine Auszeichnungszeile über Überschriften.
   Im Block-Editor: Absatz markieren → Block → Erweitert → Zusätzliche CSS-Klasse: svs-eyebrow */
.svs-eyebrow{
  font-family: var(--wp--preset--font-family--display, var(--svs-display));
  font-weight: 500;
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--wp--preset--color--orange-dunkel, #C96A16);
  margin-bottom: .5rem;
}

.svs-eyebrow.is-hell{ color: var(--wp--preset--color--orange, #E67E22); }

/* Gepunktete Bahn — dezente Hintergrundtextur für dunkle Abschnitte.
   Klasse auf eine Gruppe mit Navy-Hintergrund setzen: svs-bahn */
.svs-bahn{ position: relative; overflow: hidden; }
.svs-bahn > *{ position: relative; z-index: 1; }
.svs-bahn::before{
  content:"";
  position:absolute; inset:0; z-index:0;
  background-image: radial-gradient(circle, rgba(74,108,150,.55) 1.6px, transparent 1.7px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(115deg, transparent 38%, #000 60%, transparent 92%);
  mask-image: linear-gradient(115deg, transparent 38%, #000 60%, transparent 92%);
  pointer-events:none;
}

/* Pfeil-Aufzählung — für die Listen in den Angebotssäulen.
   Klasse auf die Liste setzen: svs-pfeilliste */
.svs-pfeilliste{ list-style: none; padding-left: 0; }
.svs-pfeilliste li{ position: relative; padding-left: 1.25rem; margin-bottom: .55rem; }
.svs-pfeilliste li::before{
  content:"";
  position:absolute; left:0; top:.62em;
  width:8px; height:8px;
  background: var(--wp--preset--color--navy, #1F3A5F);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* Textlink mit orangener Unterstreichung */
.svs-mehr{
  font-family: var(--wp--preset--font-family--display, var(--svs-display));
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid var(--wp--preset--color--orange, #E67E22);
  padding-bottom: 2px;
}

/* Säulenraster mit Haarlinien statt Abständen */
.svs-saeulen{ gap: 1px !important; background: var(--wp--preset--color--linie, #D4D1CA); border: 1px solid var(--wp--preset--color--linie, #D4D1CA); }
.svs-saeulen > .wp-block-column{ background: var(--wp--preset--color--papier, #F7F6F2); padding: 2rem 1.75rem; }

/* Zahlen in Tabellen und Listen sauber untereinander */
.svs-zahlen{ font-variant-numeric: tabular-nums; }

/* Sichtbarer Tastaturfokus — Kadence setzt ihn stellenweise zurück */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: 2px solid var(--wp--preset--color--orange, #E67E22);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}


/* ==================================================================
   SCHRIFTGRÖSSEN UND ABSTÄNDE ALS VARIABLEN

   Die Patterns verweisen an einzelnen Stellen per Inline-Stil auf
   --wp--preset--font-size--* und --wp--preset--spacing--*. Diese
   Variablen erzeugt WordPress sonst aus der theme.json, die Kadence
   nicht ausliest. Ohne sie fällt die Schriftgröße auf den Standard
   zurück und die Abstände verschwinden.

   WordPress schreibt Slugs in Kebab-Form (h1 wird zu h-1), deshalb
   sind beide Schreibweisen definiert.
   ================================================================== */

:root{
  --wp--preset--font-size--klein:.875rem;
  --wp--preset--font-size--normal:1rem;
  --wp--preset--font-size--gross:1.125rem;
  --wp--preset--font-size--h3:clamp(1.35rem,1.1rem + .8vw,1.6rem);
  --wp--preset--font-size--h-3:clamp(1.35rem,1.1rem + .8vw,1.6rem);
  --wp--preset--font-size--h2:clamp(1.7rem,1.3rem + 1.5vw,2.3rem);
  --wp--preset--font-size--h-2:clamp(1.7rem,1.3rem + 1.5vw,2.3rem);
  --wp--preset--font-size--h1:clamp(2.2rem,1.5rem + 3vw,3.6rem);
  --wp--preset--font-size--h-1:clamp(2.2rem,1.5rem + 3vw,3.6rem);

  --wp--preset--spacing--10:0.5rem;
  --wp--preset--spacing--20:1rem;
  --wp--preset--spacing--30:1.75rem;
  --wp--preset--spacing--40:2.75rem;
  --wp--preset--spacing--50:clamp(3.5rem,7vw,5.75rem);
  --wp--preset--spacing--60:clamp(4rem,9vw,7.75rem);
}

/* Kadence gibt Listen im Inhalt einen eigenen Innenabstand,
   der die Pfeile einrückt. */
.entry-content ul.svs-pfeilliste,
ul.svs-pfeilliste{ padding-left:0; margin-left:0; list-style:none; }
.entry-content ul.svs-pfeilliste li{ padding-left:1.25rem; }

/* ==================================================================
   TUTOR LMS, UNTERSEITEN-KOPF, HEADER UND FOOTER IN DER CI

   Tutor LMS steuert seine komplette Oberfläche über eigene
   CSS-Variablen — Kurskarten, Schaltflächen, Login, Teilnehmer-
   Dashboard. Diese hier gemessenen Namen auf die CI umzulegen färbt
   alles auf einmal um. Die semantischen Farben (danger, success,
   warning) bleiben unverändert: eine Fehlermeldung muss rot bleiben.
   ================================================================== */

:root{
  --tutor-color-primary:#E67E22;
  --tutor-color-primary-rgb:230, 126, 34;
  --tutor-color-primary-hover:#C96A16;
  --tutor-color-primary-hover-rgb:201, 106, 22;
  --tutor-color-secondary:#1F3A5F;
  --tutor-body-color:#28251D;
  --tutor-body-color-rgb:40, 37, 29;
  --tutor-border-color:#D4D1CA;
  --tutor-border-color-rgb:212, 209, 202;
  --tutor-color-subdued:#5C574C;
  --tutor-color-muted:#5C574C;
  --tutor-color-hints:#5C574C;
  --tutor-color-gray:#D4D1CA;
  --tutor-color-gray-10:#EFEDE6;
  --tutor-text-size:17px;
}

.tutor-wrap, .tutor-card, .tutor-dashboard, .tutor-course-card{
  font-family: var(--svs-body);
}
.tutor-course-name,
.tutor-card h1, .tutor-card h2, .tutor-card h3,
.tutor-dashboard h1, .tutor-dashboard h2, .tutor-dashboard h3{
  font-family: var(--svs-display); font-weight:700; color:#1F3A5F;
}
.tutor-card, .tutor-course-card{
  border-radius:2px; border:1px solid #D4D1CA; box-shadow:none;
}
.tutor-btn, .tutor-btn-primary, .tutor-form-control, .tutor-form-select{
  border-radius:2px;
}
.tutor-btn-primary{ font-family: var(--svs-display); font-weight:700; }

/* ---------- Kopfbereich der Unterseiten ----------
   Kadence legt über jede Unterseite einen Titelbalken. Der bekommt
   die Navy-Fläche mit der gepunkteten Bahn wie der Hero der
   Startseite, damit der Einstieg überall gleich aussieht. */

.entry-hero-container-inner{
  background:#1F3A5F; position:relative; overflow:hidden;
}
.entry-hero-container-inner::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(circle, rgba(74,108,150,.5) 1.6px, transparent 1.7px);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(115deg, transparent 40%, #000 62%, transparent 94%);
  mask-image:linear-gradient(115deg, transparent 40%, #000 62%, transparent 94%);
}
.entry-hero-container-inner > *{ position:relative; z-index:1; }
.entry-hero .entry-title, .entry-hero h1, .entry-hero .archive-title{ color:#fff; }
.entry-hero p, .entry-hero .archive-description, .entry-hero .taxonomy-description{ color:rgba(255,255,255,.8); }
.entry-hero .kadence-breadcrumbs, .entry-hero .kadence-breadcrumbs a{ color:rgba(255,255,255,.7); }

/* ---------- Header ---------- */
#masthead{ border-bottom:1px solid #D4D1CA; }
.main-navigation ul li a{
  font-family: var(--svs-display); font-weight:500; color:#1F3A5F;
  border-bottom:2px solid transparent;
}
.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a{
  color:#1F3A5F; border-bottom-color:#E67E22;
}

/* ---------- Footer ---------- */
.site-footer,
.site-bottom-footer-wrap, .site-middle-footer-wrap, .site-top-footer-wrap{
  background:#1F3A5F; color:rgba(255,255,255,.75);
}
.site-footer a{ color:#fff; text-decoration:none; }
.site-footer a:hover{ color:#E67E22; }
.site-footer .site-footer-row{ border-color:rgba(255,255,255,.15); }

/* Kadence-Grundschrift stand noch auf Systemschrift */
:root{ --global-body-font-family: var(--svs-body); }

/* Menülinks: Kadence setzt die Farbe mit höherer Spezifität */
.header-navigation li.menu-item > a{
  color:#1F3A5F; font-family: var(--svs-display); font-weight:500;
  border-bottom:2px solid transparent;
}
.header-navigation li.menu-item > a:hover,
.header-navigation li.menu-item > a:focus,
.header-navigation li.menu-item.current-menu-item > a{
  color:#1F3A5F; border-bottom-color:#E67E22;
}

/* Teilnehmer-Dashboard: Tutor färbt den aktiven Menüpunkt mit einem
   festen Blau, das sich nur mit !important überschreiben lässt. */
.tutor-dashboard-sidebar-nav li a.active,
.tutor-dashboard-sidebar .tutor-dashboard-permalinks li a.active{
  color:#C96A16 !important; background-color:#EFEDE6 !important;
}
.tutor-dashboard-sidebar-nav a{ font-family: var(--svs-display); }