/*
Theme Name: Koenigreich der Maerchen
Theme URI: https://xn--knigreich-mrchen-5nb72a.nobricksnofun.de
Author: Rene
Description: Schlankes Custom-Theme fuer die Maerchen-Fanseite "Koenigreich der Maerchen". Kein Elementor, kein Page-Builder, kein Build-Step - reines PHP/CSS.
Version: 0.1.0
Text Domain: koenigreich-maerchen
Requires PHP: 8.0
*/

*{box-sizing:border-box;margin:0;padding:0;}

:root{
  --mitternacht:#1B1830;
  --mitternacht-tief:#100D1F;
  --altgold:#C9A15E;
  --altgold-hell:#E8CB8D;
  --pergament:#F3E9D6;
  --pergament-dunkel:#E4D6B8;
  --waldgruen:#4A5D46;
  --rosenholz:#C98A94;
  --nebel:#9C93B5;
  --tinte:#2A2440;
}

body{
  background:var(--mitternacht-tief);
  color:var(--pergament);
  font-family:'Spectral',serif;
  font-weight:300;
  line-height:1.7;
}

a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

h1,h2,h3{
  font-family:'Cormorant Garamond',serif;
  font-weight:500;
  color:var(--pergament);
}

.eyebrow{
  font-family:'Jost',sans-serif;
  font-size:12px;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:var(--altgold);
}

/* Kopfnavigation */
.km-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:24px 32px;
  background:var(--mitternacht-tief);
}
.km-top-home{
  font-family:'Cormorant Garamond',serif;
  font-size:20px;
  color:var(--pergament);
}
.km-top ul{list-style:none;display:flex;gap:28px;}
.km-top a{
  font-family:'Jost',sans-serif;
  font-size:12px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--nebel);
}

/* Hero */
.km-hero{
  position:relative;
  min-height:520px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:60px 24px 90px;
  background:
    radial-gradient(ellipse at 50% 20%, #2E2850 0%, transparent 60%),
    radial-gradient(ellipse at 15% 85%, #241F42 0%, transparent 55%),
    linear-gradient(180deg, var(--mitternacht) 0%, var(--mitternacht-tief) 100%);
}
.km-hero h1{font-size:clamp(38px,7vw,72px);line-height:1.08;max-width:800px;}
.km-hero em{font-style:italic;color:var(--altgold-hell);}
.km-hero p.km-lead{margin-top:22px;max-width:480px;font-size:18px;font-weight:300;color:var(--nebel);}
.km-cta{
  margin-top:38px;
  display:inline-flex;
  font-family:'Jost',sans-serif;
  font-size:13px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--mitternacht-tief);
  background:var(--altgold);
  padding:15px 32px;
  border-radius:2px;
}

/* Zierdivider */
.km-divider{display:flex;justify-content:center;padding:8px 0;background:var(--mitternacht-tief);}
.km-divider svg{width:200px;opacity:0.7;}

/* Kartenraster */
.km-section{background:var(--pergament);padding:90px 24px 100px;}
.km-section-head{text-align:center;max-width:640px;margin:0 auto 56px;}
.km-section-head h2{color:var(--tinte);font-size:clamp(30px,4vw,44px);margin-top:14px;}
.km-section-head p{color:#5B5470;font-size:16px;margin-top:12px;}

.km-grid{
  max-width:1180px;margin:0 auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:32px;
}
.km-karte{
  background:var(--pergament-dunkel);
  border:1px solid rgba(42,36,64,0.12);
  clip-path:polygon(0% 1.5%,3% 0%,97% 0.8%,100% 2.2%,100% 98%,96% 100%,4% 99.2%,0% 97.5%);
}
.km-karte-bild{height:160px;background:linear-gradient(135deg,#DCC9A8,#C9A15E);overflow:hidden;}
.km-karte-bild img{width:100%;height:100%;object-fit:cover;}
.km-karte-inhalt{padding:24px 26px 28px;}
.km-karte h3{color:var(--tinte);font-size:25px;margin:8px 0 8px;}
.km-karte p.km-teaser{color:#57506A;font-size:15px;font-weight:300;}
.km-karte-meta{
  margin-top:18px;padding-top:14px;
  border-top:1px solid rgba(42,36,64,0.14);
  display:flex;align-items:center;justify-content:space-between;
  font-family:'Jost',sans-serif;font-size:11px;letter-spacing:0.1em;text-transform:uppercase;
  color:#6E6680;
}

.km-section-cta{display:flex;justify-content:center;margin-top:56px;}

/* Pagination */
.km-pagination{display:flex;justify-content:center;gap:16px;margin-top:56px;font-family:'Jost',sans-serif;font-size:13px;letter-spacing:0.08em;color:var(--tinte);}

/* Einzelansicht */
.km-single{background:var(--pergament);padding:70px 24px 100px;}
.km-single-inner{max-width:760px;margin:0 auto;}
.km-single .eyebrow{color:var(--waldgruen);}
.km-single h1{color:var(--tinte);font-size:clamp(34px,5vw,54px);margin:14px 0 22px;}
.km-single-meta{
  display:flex;flex-wrap:wrap;gap:18px;
  font-family:'Jost',sans-serif;font-size:12px;letter-spacing:0.08em;text-transform:uppercase;
  color:#6E6680;margin-bottom:32px;padding-bottom:24px;border-bottom:1px solid rgba(42,36,64,0.14);
}
.km-single-bild{margin-bottom:34px;border-radius:2px;overflow:hidden;}
.km-single-content{color:#3A3450;font-size:18px;font-weight:300;}
.km-single-content p{margin-bottom:20px;}
.km-embed-block{margin:44px 0;}
.km-embed-block h3{color:var(--tinte);font-size:22px;margin-bottom:14px;}
.km-embed-frame{position:relative;padding-top:56.25%;background:var(--mitternacht-tief);}
.km-embed-frame iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;}
.km-embed-audio iframe{width:100%;height:152px;border:0;}

/* Maerchen-Detailansicht (Backdrop-Stil) */
.km-backdrop{
  position:relative;
  min-height:82vh;
  display:flex;
  align-items:flex-end;
  background-color:var(--mitternacht-tief);
  background-size:cover;
  background-position:center;
}
.km-backdrop::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(16,13,31,0.35) 0%, rgba(16,13,31,0.55) 45%, var(--mitternacht-tief) 96%),
    linear-gradient(90deg, rgba(16,13,31,0.5) 0%, transparent 40%);
}
.km-backdrop-noimg{
  background:
    radial-gradient(ellipse at 50% 15%, #2E2850 0%, transparent 60%),
    radial-gradient(ellipse at 15% 85%, #241F42 0%, transparent 55%),
    linear-gradient(180deg, var(--mitternacht) 0%, var(--mitternacht-tief) 100%);
}
.km-back-link{
  position:absolute;
  top:28px;left:32px;
  z-index:2;
  font-family:'Jost',sans-serif;
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--pergament);
  opacity:0.85;
}
.km-back-link:hover{opacity:1;}
.km-backdrop-inner{
  position:relative;
  z-index:1;
  max-width:840px;
  padding:0 40px 56px;
}
.km-backdrop-inner h1{
  font-size:clamp(38px,6vw,68px);
  line-height:1.05;
  margin:14px 0 20px;
}
.km-pills{display:flex;flex-wrap:wrap;gap:10px;}
.km-pill{
  font-family:'Jost',sans-serif;
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--pergament);
  border:1px solid rgba(243,233,214,0.35);
  padding:6px 14px;
  border-radius:20px;
}

.km-detail-body{background:var(--mitternacht-tief);padding:64px 24px 100px;}
.km-detail-inner{max-width:760px;margin:0 auto;}
.km-detail-inner h2{
  color:var(--pergament);
  font-size:26px;
  margin-bottom:18px;
}
.km-detail-content{
  color:var(--nebel);
  font-size:18px;
  font-weight:300;
}
.km-detail-content p{margin-bottom:20px;}

.km-cast-block{margin-top:56px;}
.km-cast-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:22px;
}
.km-cast-card{display:flex;flex-direction:column;align-items:flex-start;gap:10px;}
.km-cast-avatar{
  width:52px;height:52px;
  border-radius:50%;
  background:rgba(201,161,94,0.15);
  border:1px solid rgba(201,161,94,0.4);
  color:var(--altgold-hell);
  display:flex;align-items:center;justify-content:center;
  font-family:'Cormorant Garamond',serif;
  font-size:18px;
}
.km-cast-name{color:var(--pergament);font-size:15px;}
.km-cast-role{color:var(--nebel);font-size:13px;font-family:'Jost',sans-serif;letter-spacing:0.03em;}

.km-embed-block{margin:56px 0 0;}
.km-embed-block h3{color:var(--pergament);font-size:22px;margin-bottom:14px;font-weight:500;}
.km-embed-frame{position:relative;padding-top:56.25%;background:#000;border-radius:2px;overflow:hidden;}
.km-embed-frame iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;}
.km-embed-audio iframe{width:100%;height:152px;border:0;border-radius:2px;}

/* Footer */
.km-footer{background:var(--mitternacht-tief);padding:50px 24px 36px;text-align:center;}
.km-footer p{font-size:12px;color:#665F80;max-width:520px;margin:0 auto;line-height:1.8;}

@media (prefers-reduced-motion: reduce){*{scroll-behavior:auto !important;}}