/*
Theme Name: Parkour Katerini
Theme URI: https://heimdallmedia.de
Description: Child-Theme für den Αθλητικός Σύλλογος Παρκούρ Κατερίνης. Trägt Palette, Typografie und die Bewegungsebene. Inhalte werden in Elementor mit nativen Widgets gepflegt.
Author: HeimdallMedia
Author URI: https://heimdallmedia.de
Template: hello-elementor
Version: 1.0.0
Text Domain: parkour-katerini
*/

/* ════════════════════════════════════════════════════════════
   1 · Tokens
   Palette stammt aus dem Verein selbst: schwarzes Logo, der rote
   Streifen rund um die Hallenwände, Beton- und Rasentöne.
   ════════════════════════════════════════════════════════════ */
:root{
  --pk-concrete:#D7D5CF;
  --pk-concrete-d:#C6C4BD;
  --pk-card:#EDEBE6;
  --pk-chalk:#FBFAF7;
  --pk-ink:#14161A;
  --pk-stone:#54524C;
  --pk-red:#C1261C;
  --pk-red-ink:#96190F;
  --pk-red-soft:#FF7F73;
  --pk-red-wash:rgba(193,38,28,.10);

  --pk-gut:0px;               /* zusätzlicher linker Rand, nur Desktop */
  --pk-pad:20px;
  --pk-max:1240px;

  --pk-display:"Alegreya Sans","Commissioner","Noto Sans",system-ui,sans-serif;
  --pk-body:"Commissioner","Noto Sans",system-ui,sans-serif;
  --pk-ease:cubic-bezier(.22,.61,.36,1);
}
@media (min-width:900px){ :root{ --pk-gut:80px; --pk-pad:48px; } }

/* ════════════════════════════════════════════════════════════
   2 · Grundlagen
   ════════════════════════════════════════════════════════════ */
body{
  background:var(--pk-concrete); color:var(--pk-ink);
  font-family:var(--pk-body); font-size:17px; line-height:1.62; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
/* Betonkorn über der ganzen Seite */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.18'/></svg>");
}
main{position:relative; z-index:1}

h1,h2,h3,h4,
.elementor-heading-title{font-family:var(--pk-display); font-weight:900; letter-spacing:-.035em; margin:0}
h1,.elementor-widget-heading h1.elementor-heading-title{font-size:clamp(3rem,12vw,8.4rem); line-height:.87; text-transform:uppercase}
h2,.elementor-widget-heading h2.elementor-heading-title{font-size:clamp(2.15rem,6.6vw,4.6rem); line-height:.89; text-transform:uppercase}
h3,.elementor-widget-heading h3.elementor-heading-title{font-size:clamp(1.15rem,3vw,1.5rem); line-height:1.06; letter-spacing:-.018em}

a{color:inherit}
img{max-width:100%; height:auto; display:block}
:where(a,button,input,select,textarea):focus-visible{outline:2.5px solid var(--pk-red); outline-offset:3px}

/* ════════════════════════════════════════════════════════════
   3 · Hilfsklassen für Elementor
   Diese Klassen trägt man im Editor unter "Erweitert → CSS-Klassen"
   am jeweiligen Widget ein. Kein HTML-Block nötig.
   ════════════════════════════════════════════════════════════ */

/* pk-eyebrow · kleine Zeile über einer Überschrift */
.pk-eyebrow, .pk-eyebrow .elementor-heading-title{
  font-family:var(--pk-body); font-size:.69rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--pk-red-ink);
  display:flex; align-items:center; gap:.7rem;
}
.pk-eyebrow .elementor-heading-title::after{
  content:""; height:1px; flex:1; background:var(--pk-red); opacity:.4; max-width:130px;
}

/* pk-lead · Vorspanntext */
.pk-lead, .pk-lead p{
  font-size:clamp(1.08rem,2.4vw,1.4rem); line-height:1.48;
  font-weight:300; color:#2E3035; max-width:37ch;
}

/* pk-note · kleiner Hinweistext */
.pk-note, .pk-note p{font-size:.92rem; color:var(--pk-stone); max-width:58ch; margin:0}

/* pk-todo · noch fehlende Angabe, im Editor sofort sichtbar */
.pk-todo{
  color:var(--pk-red-ink); background:var(--pk-red-wash);
  padding:.05em .34em; border-radius:2px; font-weight:600;
  box-shadow:inset 0 0 0 1px rgba(193,38,28,.24); overflow-wrap:anywhere;
}

/* pk-dark · Abschnitt auf Tiefschwarz
   Die globale Elementor-Palette färbt ALLE Überschriften in der
   Primärfarbe — auf dunklem Grund wäre das Tinte auf Tinte. Diese
   Regeln müssen deshalb gewinnen; !important bleibt eng begrenzt
   auf die Farbe innerhalb dunkler Bereiche. */
.pk-dark{background:var(--pk-ink); color:var(--pk-chalk)}
.pk-dark h1, .pk-dark h2, .pk-dark h3, .pk-dark h4,
.pk-dark .elementor-heading-title,
.pk-dark .elementor-widget-heading .elementor-heading-title{color:var(--pk-chalk) !important}
.pk-dark .pk-lead, .pk-dark .pk-lead p{color:#C9C8C4 !important}
.pk-dark p, .pk-dark li, .pk-dark .elementor-widget-text-editor{color:#B9B8B4 !important}
.pk-dark .pk-eyebrow .elementor-heading-title,
.pk-dark .pk-eyebrow .elementor-widget-heading .elementor-heading-title{color:var(--pk-red-soft) !important}
.pk-dark .pk-eyebrow .elementor-heading-title::after{background:var(--pk-red-soft)}
.pk-dark .pk-card .pk-label{color:var(--pk-red-soft) !important}
.pk-dark .elementor-counter-number, .pk-dark .elementor-counter-title{color:var(--pk-chalk) !important}

/* ── Zeilenmaske für Überschriften ───────────────────────────
   Klasse pk-lines auf ein Heading-Widget setzen und im Text mit
   <br> umbrechen. Das Skript baut daraus die Maskenzeilen.      */
.pk-line{display:block; overflow:hidden; padding-bottom:.04em}
.pk-line > span{display:block; will-change:transform}

/* ════════════════════════════════════════════════════════════
   4 · Buttons
   ════════════════════════════════════════════════════════════ */
.elementor-button, .pk-btn{
  font-family:var(--pk-body); font-weight:600; font-size:.95rem;
  padding:16px 28px; border:0; border-radius:2px;
  background:var(--pk-red); color:var(--pk-chalk);
  transition:background .2s var(--pk-ease), color .2s var(--pk-ease), box-shadow .2s var(--pk-ease);
}
.elementor-button:hover, .elementor-button:focus-visible,
.pk-btn:hover, .pk-btn:focus-visible{background:var(--pk-ink); color:var(--pk-chalk)}
.elementor-button .elementor-button-icon{transition:transform .26s var(--pk-ease)}
.elementor-button:hover .elementor-button-icon{transform:translateX(5px)}

/* Sekundärer Button: nur Kontur.
   Elementor erzeugt pro Element eine eigene Regel mit derselben
   Spezifität, die nach dem Theme lädt. Das zusätzliche
   .elementor-element hebt uns eine Stufe darüber. */
.pk-btn-ghost.elementor-element .elementor-button{
  background:transparent; color:var(--pk-ink);
  box-shadow:inset 0 0 0 1.5px rgba(20,22,26,.28);
}
.pk-btn-ghost.elementor-element .elementor-button:hover,
.pk-btn-ghost.elementor-element .elementor-button:focus-visible{
  background:transparent; color:var(--pk-red-ink); box-shadow:inset 0 0 0 1.5px var(--pk-red);
}
/* Viber / Telefon */
.pk-btn-msg.elementor-element .elementor-button{background:var(--pk-ink); color:var(--pk-chalk)}
.pk-btn-msg.elementor-element .elementor-button:hover{background:var(--pk-red)}

/* Buttonreihe: nebeneinander statt auf halbe Breite gedehnt.
   build-page gibt Reihenkindern feste Prozentbreiten — für Knöpfe
   ist das falsch, die sollen ihre Textbreite behalten. */
.pk-btnrow{justify-content:flex-start; gap:12px}
.pk-btnrow > .e-con{width:auto !important; flex:0 0 auto !important;
  padding-left:0 !important; padding-right:0 !important}

/* Elementor setzt Widget-Abstände auf 0 — die Vorzeile braucht Luft. */
.elementor-element.pk-eyebrow{margin-bottom:1.5rem}
.elementor-element.pk-lead{margin-bottom:.6rem}

/* ════════════════════════════════════════════════════════════
   5 · Trainingsplan
   Elementor hat kein Tabellen-Widget. Die Tabelle steht in einem
   Text-Editor-Widget mit der Klasse pk-schedule und bleibt damit
   im WYSIWYG pflegbar.
   ════════════════════════════════════════════════════════════ */
.pk-schedule{overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid rgba(20,22,26,.16); background:var(--pk-card)}
.pk-schedule table{width:100%; border-collapse:collapse; min-width:740px; margin:0}
.pk-schedule th,.pk-schedule td{
  text-align:left; padding:15px 17px; vertical-align:top;
  border-bottom:1px solid rgba(20,22,26,.11); border-right:1px solid rgba(20,22,26,.09);
}
.pk-schedule th:last-child,.pk-schedule td:last-child{border-right:0}
.pk-schedule tbody tr:last-child td,.pk-schedule tbody tr:last-child th{border-bottom:0}
.pk-schedule thead th{
  font-family:var(--pk-body); font-size:.66rem; letter-spacing:.17em; text-transform:uppercase;
  color:#46443E; font-weight:600; background:var(--pk-concrete-d);
}
.pk-schedule tbody th{
  font-family:var(--pk-display); font-weight:800; font-size:.95rem; letter-spacing:-.01em;
  white-space:nowrap; background:rgba(20,22,26,.045); color:var(--pk-ink);
}
.pk-schedule td b{display:block; font-family:var(--pk-display); font-weight:900;
  font-size:1.04rem; letter-spacing:-.02em}
.pk-schedule td span{color:var(--pk-stone); font-size:.79rem; letter-spacing:.06em}
.pk-schedule td.is-empty{background:repeating-linear-gradient(135deg,rgba(20,22,26,.045) 0 2px,transparent 2px 9px)}
.pk-schedule td.is-comp b{color:var(--pk-red-ink)}

/* ════════════════════════════════════════════════════════════
   6 · Karten, Listen, Bilder
   ════════════════════════════════════════════════════════════ */
/* pk-card auf eine Elementor-Spalte/Container legen */
.pk-card{background:var(--pk-concrete); padding:22px 20px 24px; transition:background .45s var(--pk-ease)}
.pk-card:hover{background:var(--pk-card)}
.pk-card .pk-label{
  display:block; font-size:.69rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--pk-red-ink); font-weight:600; margin-bottom:10px;
}
.pk-dark .pk-card{background:var(--pk-ink); padding:32px 26px 36px}
.pk-dark .pk-card:hover{background:#1B1E23}
.pk-dark .pk-card .pk-label{color:var(--pk-red-soft); font-family:var(--pk-display); font-weight:900; letter-spacing:.18em}

/* Ausstattungs-Chips (Icon-List oder Text-Editor mit ul.pk-kit) */
.pk-kit{display:flex; flex-wrap:wrap; gap:7px; margin:0; padding:0; list-style:none}
.pk-kit li{
  font-size:.77rem; letter-spacing:.04em; padding:8px 13px;
  background:var(--pk-card); box-shadow:inset 0 0 0 1px rgba(20,22,26,.14);
}

/* Fakten-Liste */
.pk-facts{list-style:none; margin:0; padding:0}
.pk-facts li{
  display:flex; flex-wrap:wrap; min-width:0; gap:4px 16px; padding:14px 0;
  border-top:1px solid rgba(20,22,26,.15); font-size:.95rem;
}
.pk-facts li > strong{
  flex:0 0 130px; font-size:.69rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--pk-stone); font-weight:600; padding-top:.3em;
}

/* Bilder: sanftes Heranfahren beim Überfahren */
.pk-zoom img{transition:transform 1.1s var(--pk-ease)}
.pk-zoom:hover img{transform:scale(1.045)}
.pk-shot{overflow:hidden; background:var(--pk-concrete-d)}

/* ════════════════════════════════════════════════════════════
   7 · Kopfbereich
   Das Elementor-Header-Template bekommt die Klasse pk-header.
   ════════════════════════════════════════════════════════════ */
.pk-header{background:var(--pk-ink); border-bottom:1px solid rgba(251,250,247,0);
  transition:border-color .4s var(--pk-ease)}
.pk-header.is-scrolled{border-bottom-color:rgba(251,250,247,.16)}
.pk-header .elementor-nav-menu a{color:#E4E3DF; font-size:.85rem; font-weight:500}
.pk-header .elementor-nav-menu a:hover{color:var(--pk-chalk)}
.pk-header .elementor-button:hover{background:var(--pk-chalk); color:var(--pk-ink)}
.pk-header img{transition:height .4s var(--pk-ease)}

/* ════════════════════════════════════════════════════════════
   8 · Ladevorhang
   Markup kommt aus functions.php über wp_body_open.
   ════════════════════════════════════════════════════════════ */
#pk-curtain{
  position:fixed; inset:0; z-index:9999; background:var(--pk-ink);
  display:flex; align-items:center; justify-content:center;
}
#pk-curtain img{width:82px; height:auto}
.pk-no-anim #pk-curtain{display:none}

/* ════════════════════════════════════════════════════════════
   9 · Fußzeile
   ════════════════════════════════════════════════════════════ */
.pk-footer{background:var(--pk-ink); color:#B9B8B4; font-size:.92rem}
.pk-footer .elementor-heading-title{
  font-family:var(--pk-body); font-size:.68rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--pk-red-soft); font-weight:600;
}
.pk-footer a{color:#E4E3DF; text-decoration:none;
  border-bottom:1px solid rgba(228,227,223,.3); display:inline-block; padding:3px 0}
.pk-footer a:hover{color:#fff; border-color:#fff}

/* Agenturhinweis, wird per wp_footer eingehängt */
.pk-agency{
  background:var(--pk-ink); color:#7E7C77; font-size:.75rem; letter-spacing:.04em;
  text-align:center; padding:0 20px 22px;
}
.pk-agency a{color:#9C9A94; text-decoration:none; border-bottom:1px solid rgba(156,154,148,.4)}
.pk-agency a:hover{color:#fff; border-color:#fff}

/* ════════════════════════════════════════════════════════════
   10 · Bewegung respektiert die Systemeinstellung
   ?motion=on erzwingt sie trotzdem — für Abnahmen auf Rechnern,
   an denen Animationen abgeschaltet sind.
   ════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  html:not(.pk-force-motion){scroll-behavior:auto}
  html:not(.pk-force-motion) *{transition:none!important; animation:none!important}
}