/*
Theme Name: Pennricher Schmiede
Theme URI: https://dercomputerladen.de
Author: dercomputerladen
Author URI: https://dercomputerladen.de
Description: WordPress-Theme für die Pennricher Schmiede im rauen, Norse-inspirierten Krieger-Design – Asche-Partikel, Axtschnitt-Diagonalen, verwitterte Steintextur. Eigenständiges Stilgenre, keine Nachbildung fremder Marken-Assets.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: eisen-flamme-krieger
*/

:root{
  --asche: #151210;
  --asche-hell: #211D18;
  --stein: #4A453C;
  --stein-hell: #6B6355;
  --knochen: #D9D2C0;
  --blut: #7A1414;
  --blut-hell: #D4291C;
  --bronze: #8C6239;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{
  background:var(--asche);
  color:var(--knochen);
  font-family:'Work Sans', sans-serif;
  font-size:18px;
  line-height:1.65;
  position:relative;
}
h1,h2,h3,.marke,.rune-label{
  font-family:'Oswald', sans-serif;
  text-transform:uppercase;
  letter-spacing:-0.01em;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

/* Rauschtextur wie verwitterter, zerkratzter Stein */
body::before{
  content:"";
  position:fixed;inset:0;pointer-events:none;z-index:998;opacity:0.7;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.3'/%3E%3C/svg%3E");
}
body::after{
  content:"";
  position:fixed;inset:0;pointer-events:none;z-index:996;
  background:radial-gradient(ellipse at 50% 45%, transparent 45%, rgba(0,0,0,0.55) 100%);
}
.schrammen{position:fixed;inset:0;pointer-events:none;z-index:997;opacity:0.35;mix-blend-mode:screen;}
.schrammen svg{width:100%;height:100%;}

.asche-teilchen{position:fixed;inset:0;pointer-events:none;z-index:995;overflow:hidden;}
.asche-teilchen span{
  position:absolute;bottom:-10px;width:3px;height:3px;
  background:var(--blut-hell);border-radius:50%;opacity:0.7;
  animation:steigen linear infinite;
}
@keyframes steigen{
  0%{transform:translateY(0) translateX(0);opacity:0;}
  10%{opacity:0.8;}
  100%{transform:translateY(-100vh) translateX(20px);opacity:0;}
}

.rune-label{
  font-size:0.82rem;letter-spacing:0.22em;color:var(--blut-hell);
  display:block;margin-bottom:16px;
}
.screen-reader-text{position:absolute;left:-9999px;}

/* HEADER */
header.site-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:24px 6%;border-bottom:2px solid var(--blut-hell);
  position:relative;z-index:20;background:#0D0B09;
}
.marke{font-size:1.35rem;font-weight:700;letter-spacing:0.02em;display:flex;align-items:center;gap:12px;}
.marke a{color:inherit;}
.marke .strich{color:var(--blut-hell);}
.custom-logo{max-height:52px;width:auto;}
.hauptnav ul{list-style:none;display:flex;gap:36px;font-family:'Oswald',sans-serif;font-size:0.85rem;letter-spacing:0.08em;text-transform:uppercase;}
.hauptnav a{border-bottom:2px solid transparent;padding-bottom:4px;transition:border-color 0.2s;}
.hauptnav a:hover{border-color:var(--blut-hell);}
.nav-toggle{
  display:none;background:none;border:2px solid var(--stein-hell);color:var(--knochen);
  font-size:1.2rem;padding:6px 14px;cursor:pointer;
}

/* HERO */
.hero{
  position:relative;min-height:92vh;display:flex;flex-direction:column;
  justify-content:center;align-items:center;text-align:center;
  padding:80px 6% 140px;
  background:
    radial-gradient(ellipse 800px 550px at 50% 105%, rgba(212,41,28,0.28) 0%, transparent 60%),
    linear-gradient(180deg, #0D0B09 0%, #151210 55%, #1A1611 100%);
  background-size:cover;background-position:center;
  overflow:hidden;z-index:1;
  clip-path:polygon(0 0, 100% 0, 100% 92%, 0% 100%);
}
.hero-symbol{margin-bottom:26px;opacity:0.95;}
.hero-symbol svg{width:68px;height:68px;}
.hero .rune-label{text-align:center;font-size:0.9rem;letter-spacing:0.3em;}
.hero h1{
  font-size:clamp(3.2rem, 9.5vw, 7rem);font-weight:700;line-height:0.92;
  letter-spacing:-0.02em;color:var(--knochen);margin-bottom:4px;
  text-shadow:0 4px 0 rgba(0,0,0,0.4);
}
.hero h1 .akzent{color:var(--blut-hell);display:inline-block;transform:skewX(-6deg);}
.hero .unterstrich{
  width:0;height:0;margin:30px auto 30px;
  border-left:10px solid transparent;border-right:10px solid transparent;
  border-top:14px solid var(--blut-hell);
  filter:drop-shadow(0 6px 3px rgba(212,41,28,0.35));
}
.hero p{max-width:46ch;color:#a89f8c;font-size:1.1rem;margin-bottom:40px;}
.btn-reihe{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;}
.btn{
  font-family:'Oswald', sans-serif;font-size:0.9rem;font-weight:600;letter-spacing:0.12em;
  text-transform:uppercase;padding:18px 42px;border:2px solid var(--stein-hell);
  color:var(--knochen);clip-path:polygon(0 0, 100% 0, 88% 100%, 0% 100%);
  transition:transform 0.15s ease;display:inline-block;background:transparent;cursor:pointer;
}
.btn:hover{transform:translateX(3px);}
.btn-blut{background:var(--blut-hell);border-color:var(--blut-hell);color:#150605;}

/* GESETZE (Leistungen) */
.gesetze{padding:60px 6% 90px;position:relative;z-index:1;margin-top:-90px;}
.abschnitt-kopf{text-align:center;margin-bottom:56px;}
.abschnitt-kopf h2{font-size:clamp(2rem, 3.8vw, 2.9rem);color:var(--knochen);letter-spacing:-0.01em;}
.gesetze-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:2px;max-width:1100px;margin:0 auto;background:var(--stein);}
.gesetz{padding:38px 30px;position:relative;background:var(--asche);}
.gesetz .ziffer{
  font-family:'Oswald',sans-serif;font-size:3.4rem;font-weight:700;color:var(--blut-hell);
  opacity:0.85;margin-bottom:10px;line-height:1;letter-spacing:-0.02em;
}
.gesetz h3{font-size:1.2rem;color:var(--knochen);margin-bottom:10px;font-weight:600;letter-spacing:0.01em;}
.gesetz p{font-size:0.95rem;color:#a89f8c;}

/* SCHWUR */
.schwur{
  background:linear-gradient(155deg, var(--blut-hell) 0%, #5c0e0e 100%);
  padding:110px 6%;text-align:center;position:relative;z-index:1;
  clip-path:polygon(0 6%, 100% 0, 100% 100%, 0% 94%);margin:20px 0;
}
.schwur blockquote{
  font-family:'Oswald', sans-serif;font-size:clamp(1.8rem, 4vw, 3rem);font-weight:700;
  max-width:20ch;margin:0 auto 26px;line-height:1.15;text-transform:uppercase;
  letter-spacing:-0.01em;color:#150605;
}
.schwur .signatur{font-size:0.9rem;letter-spacing:0.15em;text-transform:uppercase;color:rgba(21,6,5,0.75);font-weight:600;}

/* RELIKTE (Galerie) */
.relikte{padding:90px 6%;position:relative;z-index:1;}
.relikte-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;max-width:1100px;margin:0 auto;}
.relikt{
  aspect-ratio:3/4;position:relative;
  background:linear-gradient(155deg, #3a342b, var(--asche-hell)) center/cover;
  background-image:
    repeating-linear-gradient(60deg, rgba(0,0,0,0.25) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(-30deg, rgba(0,0,0,0.12) 0 1px, transparent 1px 14px);
  clip-path:polygon(6% 0, 100% 0, 94% 100%, 0 100%);
  border-left:3px solid var(--blut-hell);
  display:block;
}
.relikt.hat-bild{background-image:none;background-blend-mode:multiply;}
.relikt span{
  position:absolute;bottom:14px;left:14px;right:14px;
  font-family:'Oswald', sans-serif;font-size:0.78rem;letter-spacing:0.06em;
  text-transform:uppercase;color:var(--knochen);text-shadow:0 1px 3px rgba(0,0,0,0.8);
}

/* WARBAND (Team) */
.warband{padding:90px 6%;position:relative;z-index:1;}
.warband-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;max-width:1000px;margin:0 auto;}
.krieger{text-align:center;}
.schild{
  width:120px;height:136px;margin:0 auto 18px;
  clip-path:polygon(50% 0%, 100% 14%, 100% 62%, 50% 100%, 0% 62%, 0% 14%);
  background:linear-gradient(160deg, #4a4335, var(--asche-hell)) center/cover;
  border:2px solid var(--blut-hell);
}
.krieger h3{font-size:1rem;color:var(--knochen);margin-bottom:4px;}
.krieger .rolle{font-size:0.82rem;color:var(--blut-hell);text-transform:uppercase;letter-spacing:0.06em;}

/* RUF ZUR ESSE (Kontakt) */
.ruf{padding:110px 6%;text-align:center;background:linear-gradient(180deg, var(--asche) 0%, #100E0C 100%);position:relative;z-index:1;}
.ruf h2{font-size:clamp(2rem, 4.4vw, 3rem);margin-bottom:20px;}
.ruf p{color:#a89f8c;margin-bottom:34px;}

/* FOOTER */
footer.site-footer{
  padding:30px 6%;display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;
  border-top:2px solid var(--stein);font-size:0.85rem;color:#7d7566;position:relative;z-index:1;
}
footer.site-footer nav ul{list-style:none;display:flex;gap:20px;}

/* Standard-Seiteninhalt */
.seiten-inhalt{max-width:760px;margin:0 auto;padding:100px 6%;position:relative;z-index:1;}
.seiten-inhalt h1{font-family:'Oswald',sans-serif;text-transform:uppercase;font-size:clamp(2rem,4vw,2.8rem);margin-bottom:30px;}
.seiten-inhalt p{margin-bottom:18px;color:#a89f8c;}

@media (max-width:820px){
  .hauptnav{display:none;}
  .nav-toggle{display:block;}
  .hauptnav.offen{
    display:block;position:absolute;top:100%;left:0;right:0;
    background:#0D0B09;padding:20px 6%;z-index:20;border-bottom:2px solid var(--blut-hell);
  }
  .hauptnav.offen ul{flex-direction:column;gap:16px;}
  .gesetze-grid{grid-template-columns:1fr;}
  .relikte-grid{grid-template-columns:1fr 1fr;}
  .warband-grid{grid-template-columns:1fr 1fr;}
}