/* =========================================================================
   theme-mixtape.css  ·  Farbwelt "Mixtape — Sunny Tape"
   -------------------------------------------------------------------------
   Idee: Bandname woertlich genommen — Kassette & die Mixtape-Aera der 80er.
   Hell, freundlich, retro. Warmes Kassettenlabel-Creme als Basis, dazu die
   klassischen 80er-Pops: Teal (Tonband/Reel), Koralle (Sonnenuntergang),
   Sonnengelb (Highlight) und Magenta (nur als Akzent).

   Laedt NACH vendors/uikit/css/uikit.min.css (Struktur) und ueberschreibt nur
   Farben/Oberflaechen. Schriften kommen unabhaengig aus ft-edo.css.
   Aktiviert ueber Feld config_theme auf der Seite /site-configuration/.
   ========================================================================= */

:root {
  /* Neutrale Basis — Kassettenlabel-Papier */
  --mx-paper:        #FCF7EE; /* Seitenhintergrund, warmes Elfenbein */
  --mx-cream:        #F5ECDA; /* Muted-Sections / Cards, Kraft-Creme */
  --mx-line:         #E7DFCF; /* Haarlinien / Rahmen */
  --mx-ink:          #2E2A39; /* Fliesstext, warmes Fast-Schwarz (Kuli) */
  --mx-ink-strong:   #211E2C; /* Headlines */
  --mx-ink-soft:     #726C7E; /* gedaempfter Text */

  /* 80er-Akzente */
  --mx-teal:         #12A6A0; /* Primaerfarbe (Reel/Tonband) */
  --mx-teal-ink:     #0B7C77; /* Teal fuer Links auf Creme (AA-kontrast) */
  --mx-teal-lite:    #3DC2BC; /* helles Teal (Hover auf dunklem Grund) */
  --mx-coral:        #FF5E5B; /* Sekundaer / Call-to-Action (Sonnenuntergang) */
  --mx-coral-dark:   #E8443F; /* Koralle Hover */
  --mx-red:          #EB2A1D; /* Brand-Rot (Briefing) — Header-Band, weisse Nav */
  --mx-amber:        #FDB130; /* Sonnengelb, Highlight / Selektion */
  --mx-magenta:      #EF4E93; /* Magenta-Pop, sehr sparsam */
  --mx-night:        #241F30; /* dunkle Sections / Mobile-Menue (tiefes Pflaume-Schwarz) */
}

/* ---- Grundflaeche & Text ------------------------------------------------ */
html {
  background: var(--mx-paper);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
html, .uk-dark {
  color: var(--mx-ink);
}
body {
  background: var(--mx-paper);
}

::selection { background: var(--mx-amber); color: var(--mx-ink-strong); }
::-moz-selection { background: var(--mx-amber); color: var(--mx-ink-strong); }

/* ---- Headlines ---------------------------------------------------------- */
.uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6,
h1, h2, h3, h4, h5, h6 {
  color: var(--mx-ink-strong);
}
.uk-dark h1, .uk-dark h2, .uk-dark h3, .uk-dark h4, .uk-dark h5, .uk-dark h6 {
  color: #FFF;
}
.uk-text-lead { color: var(--mx-ink-strong); }

/* ---- Header-Leiste (rotes Akzentband, weisse Navigation) ---------------- */
header {
  background-color: var(--mx-red);
}

/* ---- Sections / Cards / Buttons: muted / primary / secondary ------------ */
.uk-section-muted, .uk-card-muted, .uk-button-muted {
  background: var(--mx-cream);
}
.uk-section-primary, .uk-card-primary, .uk-button-primary {
  background: var(--mx-teal);
}
.uk-section-secondary, .uk-card-secondary, .uk-button-secondary {
  background: var(--mx-coral);
}
/* Heller Text auf farbigen/dunklen Flaechen */
.uk-card-primary.uk-card-body, .uk-card-primary>:not([class*=uk-card-media]),
.uk-card-secondary.uk-card-body, .uk-card-secondary>:not([class*=uk-card-media]),
.uk-light, .uk-offcanvas-bar, .uk-overlay-primary,
.uk-section-primary:not(.uk-preserve-color), .uk-section-secondary:not(.uk-preserve-color),
.uk-tile-primary:not(.uk-preserve-color), .uk-tile-secondary:not(.uk-preserve-color) {
  color: rgba(255,255,255,.9);
}
.uk-section-primary:not(.uk-preserve-color) h1, .uk-section-primary:not(.uk-preserve-color) h2,
.uk-section-primary:not(.uk-preserve-color) h3, .uk-section-primary:not(.uk-preserve-color) h4,
.uk-section-secondary:not(.uk-preserve-color) h1, .uk-section-secondary:not(.uk-preserve-color) h2,
.uk-section-secondary:not(.uk-preserve-color) h3, .uk-section-secondary:not(.uk-preserve-color) h4 {
  color: #FFF;
}
/* Muted-Text auf farbigen/dunklen Flaechen */
.uk-card-primary.uk-card-body .uk-text-muted, .uk-card-secondary.uk-card-body .uk-text-muted,
.uk-light .uk-text-muted, .uk-offcanvas-bar .uk-text-muted, .uk-overlay-primary .uk-text-muted,
.uk-section-primary:not(.uk-preserve-color) .uk-text-muted,
.uk-section-secondary:not(.uk-preserve-color) .uk-text-muted {
  color: rgba(255,255,255,.65) !important;
}

/* ---- Bild-Overlays ------------------------------------------------------ */
.uk-overlay-primary {
  background: rgba(36,31,48,.72); /* --mx-night, transluzent */
  color: #FFF;
}
.uk-overlay-secondary {
  background: rgba(18,166,160,.28); /* zartes Teal */
}

/* ---- Links -------------------------------------------------------------- */
.uk-link, a,
h3 a, .uk-button-text {
  color: var(--mx-teal-ink);
}
.uk-link:hover, a:hover,
.uk-button-text:focus, .uk-button-text:hover {
  color: var(--mx-coral-dark);
}
.uk-button-text::before { border-bottom-color: var(--mx-coral); }
.uk-text-primary { color: var(--mx-teal-ink) !important; }
.uk-text-secondary { color: var(--mx-coral-dark) !important; }

/* ---- Buttons ------------------------------------------------------------ */
.uk-button-primary {
  color: #FFF;
  border-radius: 2px;
  transition: background-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.uk-button-primary:hover, .uk-button-primary:focus { background-color: var(--mx-teal-ink); color: #FFF; }
.uk-button-secondary { color: #FFF; border-radius: 2px; }
.uk-button-secondary:hover, .uk-button-secondary:focus { background-color: var(--mx-coral-dark); color: #FFF; }
.uk-button-default {
  border-radius: 2px;
  border: 1px solid var(--mx-teal);
  color: var(--mx-teal-ink);
  background: transparent;
}
.uk-button-default:hover, .uk-button-default:focus {
  border-color: var(--mx-teal-ink);
  color: var(--mx-teal-ink);
  background: rgba(18,166,160,.08);
}

/* ---- Badges / Labels ---------------------------------------------------- */
.uk-label { background: var(--mx-teal); color: #FFF; }
.uk-badge { background: var(--mx-coral); }

/* ---- Desktop-Navigation (weiss auf Teal-Header) ------------------------- */
.uk-navbar-nav>li>a { color: #FFFFFF; }
.uk-navbar-nav>li>a:active { color: #4A0F0C; }
.uk-navbar-nav>li:hover>a, .uk-navbar-nav>li>a.uk-open, .uk-navbar-nav>li>a:focus {
  color: rgba(255,255,255,.72); outline: 0;
}
.uk-navbar-item, .uk-navbar-toggle { color: #FFFFFF; }
.uk-navbar-dropdown { background: #FFFFFF; color: var(--mx-ink); }
.uk-navbar-dropdown-nav>li>a { color: var(--mx-teal-ink); }
.uk-navbar-dropdown-nav>li>a:hover { color: var(--mx-coral-dark); }

/* ---- Mobile-Navigation / Offcanvas (MenuMaker: .uk-nav-default) --------- */
.uk-offcanvas-bar { background: var(--mx-night); }
.uk-navbar-toggle, .uk-navbar-toggle a { color: #FFFFFF; }
/* Menue-Links im Overlay: weiss lesbar auf dunklem Bar, Teal fuer aktiv/hover */
.uk-offcanvas-bar .uk-nav-default > li > a { color: #FFFFFF; }
.uk-offcanvas-bar .uk-nav-default > li > a:hover,
.uk-offcanvas-bar .uk-nav-default > li > a:focus,
.uk-offcanvas-bar .uk-nav-default > li.uk-active > a { color: var(--mx-teal-lite); }
/* Untermenue-Ebenen */
.uk-offcanvas-bar .uk-nav-default .uk-nav-sub a { color: rgba(255,255,255,.72); }
.uk-offcanvas-bar .uk-nav-default .uk-nav-sub a:hover,
.uk-offcanvas-bar .uk-nav-default .uk-nav-sub a:focus { color: #FFFFFF; }
/* Parent-Toggle-Icon */
.uk-offcanvas-bar .uk-nav-parent-icon > .uk-parent > a::after { border-top-color: rgba(255,255,255,.7); }
/* Trenner zwischen Top-Level-Punkten */
.uk-offcanvas-bar .uk-nav-default > li + li { border-top: 1px solid rgba(255,255,255,.08); }

/* ---- Formulare ---------------------------------------------------------- */
.uk-input, input, .uk-select, select, .uk-textarea, textarea {
  background: #FFFFFF;
  color: var(--mx-ink);
  border: 1px solid var(--mx-line);
  border-radius: 2px;
  transition: border-color .2s ease-in-out, box-shadow .2s ease-in-out;
}
.uk-input:focus, input:focus, .uk-select:focus, select:focus, .uk-textarea:focus, textarea:focus {
  border-color: var(--mx-teal);
  box-shadow: 0 0 0 2px rgba(18,166,160,.18);
  outline: 0;
}
.InputfieldContent .uk-button {
  background-color: transparent; color: var(--mx-ink-strong);
  border: 1px solid var(--mx-line);
}
.InputfieldContent .uk-button:hover, .InputfieldContent .uk-button:focus {
  background-color: transparent; color: var(--mx-teal-ink); border-color: var(--mx-teal);
}

/* ---- Kleine Retro-Details ---------------------------------------------- */
h3.line-behind:before, h3.line-behind:after { border-top: 1px solid var(--mx-line); }
hr, .uk-hr { border-top: 1px solid var(--mx-line); }

/* ---- „Mix"-Kicker — Overline ueber Headlines (Kassetten-/Player-Motiv) ---- */
.mix-kicker {
  display: inline-block;
  margin: 0 0 0.5rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.82rem;
  color: var(--mx-teal-ink);
}
.mix-kicker::before { content: "\25B8\00a0"; color: var(--mx-red); } /* ▸ Play */
.uk-section-primary .mix-kicker, .uk-section-secondary .mix-kicker, .uk-light .mix-kicker { color: #fff; }
.uk-section-primary .mix-kicker::before, .uk-section-secondary .mix-kicker::before,
.uk-light .mix-kicker::before { color: var(--mx-amber); }

/* ==========================================================================
   80er-Zitat / Blockquote — grosses Signature-Element & Trenner
   Im Editor per Format „Zitat" (blockquote) einstreubar. Optionale Quelle als
   <footer> oder <cite>. Funktioniert auf Creme wie auf farbigen Sections.
========================================================================== */
blockquote {
  position: relative;
  max-width: 46rem;
  margin: 1.75rem auto;          /* schlank — vertikaler Abstand v. a. ueber Section-Groesse steuern */
  padding: 3rem 1rem 1.25rem;
  text-align: center;
  border: 0;
  quotes: none;
}
/* Grosses Anfuehrungszeichen im Marker-Font, Brand-Rot */
blockquote::before {
  content: "\201C";
  position: absolute;
  top: 0.2rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Permanent Marker', Georgia, serif;
  font-size: 6rem;
  line-height: 1;
  color: var(--mx-red);
  pointer-events: none;
}
/* Zitat-Text: gross, Marker-Font, dezenter Retro-Offset in Teal */
blockquote p {
  font-family: 'Permanent Marker', 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: clamp(1.9rem, 4.8vw, 3.1rem);
  line-height: 1.14;
  letter-spacing: 0.01em;
  color: var(--mx-ink-strong);
  margin: 0;
  text-shadow: 2px 2px 0 rgba(18,166,160,.15);
}
/* Akzentbalken (Rot -> Amber) als Trenner-Flourish, direkt unter dem Zitat */
blockquote p:last-of-type::after {
  content: "";
  display: block;
  width: 64px;
  height: 5px;
  margin: 1.4rem auto 0;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--mx-red), var(--mx-amber));
}
/* Optionale Quellenangabe — Editor-Stil „Zitat-Quelle" = div.quote-source
   (footer/cite bleiben unterstuetzt, falls vorhanden). */
blockquote footer, blockquote cite, blockquote .quote-source {
  display: block;
  margin-top: 1rem;
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.8rem;
  color: var(--mx-teal-ink);
}
blockquote footer::before, blockquote cite::before,
blockquote .quote-source::before { content: "\2014\00a0"; } /* „— " automatisch */

/* Auf farbigen / dunklen Sections: helle Schrift, Amber-Zeichen, weisser Balken */
.uk-section-primary blockquote p, .uk-section-secondary blockquote p, .uk-light blockquote p {
  color: #fff; text-shadow: 2px 2px 0 rgba(0,0,0,.18);
}
.uk-section-primary blockquote::before, .uk-section-secondary blockquote::before, .uk-light blockquote::before {
  color: var(--mx-amber);
}
.uk-section-primary blockquote footer, .uk-section-secondary blockquote footer,
.uk-section-primary blockquote cite, .uk-section-secondary blockquote cite,
.uk-section-primary blockquote .quote-source, .uk-section-secondary blockquote .quote-source,
.uk-light blockquote footer, .uk-light blockquote cite, .uk-light blockquote .quote-source { color: rgba(255,255,255,.92); }
.uk-section-primary blockquote p:last-of-type::after,
.uk-section-secondary blockquote p:last-of-type::after,
.uk-light blockquote p:last-of-type::after { background: #fff; }