/*
Theme Name: Eisen & Flamme
Theme URI: https://dercomputerladen.de
Author: dercomputerladen
Author URI: https://dercomputerladen.de
Description: Individuelles WordPress-Theme für Kunstschmieden im historisch-handwerklichen Design mit Pergament-Optik, organischen Papierriss-Trennern und editierbaren Bereichen für Arbeiten, Team und Leistungen.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: eisen-flamme
*/

:root{
  --pergament: #EDE3CE;
  --pergament-dunkel: #E1D3AE;
  --dunkel: #171310;
  --dunkel-hell: #24201A;
  --gold: #B8892E;
  --gold-hell: #D3A947;
  --rost: #7A3B22;
  --text: #2A2118;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--pergament);
  color:var(--text);
  font-family:'EB Garamond', serif;
  font-size:19px;
  line-height:1.65;
}
h1,h2,h3,.crest,.eyebrow{font-family:'Cinzel', serif;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.eyebrow{
  font-size:0.8rem;
  letter-spacing:0.18em;
  color:var(--gold);
  text-align:center;
  display:block;
  margin-bottom:14px;
}
.screen-reader-text{position:absolute;left:-9999px;}

/* Riss-Trenner */
.riss-block{
  position:relative;
  z-index:5;
  margin-top:-58px;
  line-height:0;
  pointer-events:none;
}
.riss-svg{
  display:block;
  width:100%;
  height:58px;
  filter:drop-shadow(0 -5px 7px rgba(0,0,0,0.28));
}
.riss-svg path{stroke:rgba(0,0,0,0.10);stroke-width:1;}

/* HEADER */
.site-header{
  background:var(--dunkel);
  color:var(--pergament);
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:22px 6%;
  position:relative;
}
.crest{
  font-size:1.15rem;
  letter-spacing:0.06em;
  display:flex;
  align-items:center;
  gap:10px;
}
.crest a, .crest .marke{color:var(--gold-hell);}
.custom-logo{max-height:56px;width:auto;}
.hauptnav ul{list-style:none;display:flex;gap:30px;font-size:0.85rem;letter-spacing:0.04em;}
.hauptnav a:hover{color:var(--gold-hell);}
.nav-toggle{
  display:none;
  background:none;
  border:1px solid var(--gold);
  color:var(--pergament);
  font-size:1.2rem;
  padding:6px 12px;
  cursor:pointer;
}

/* HERO */
.hero{
  position:relative;
  background:
    linear-gradient(180deg, rgba(10,8,6,0.35) 0%, rgba(10,8,6,0.75) 100%),
    radial-gradient(ellipse at 30% 20%, #4a3323 0%, transparent 55%),
    linear-gradient(120deg, #1c150f 0%, #241a12 45%, #171310 100%);
  background-size:cover;
  background-position:center;
  color:var(--pergament);
  padding:120px 6% 80px;
  text-align:center;
}
.hero .eyebrow{color:var(--gold-hell);}
.hero h1{
  font-size:clamp(2.2rem, 5vw, 3.6rem);
  letter-spacing:0.02em;
  line-height:1.25;
  max-width:16ch;
  margin:0 auto 22px;
  color:#F5EED9;
}
.hero h1 span{color:var(--gold-hell);}
.hero p{
  max-width:48ch;
  margin:0 auto 34px;
  color:#cbbfa4;
  font-size:1.15rem;
}
.btn-reihe{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;}
.btn{
  display:inline-block;
  padding:14px 34px;
  font-family:'Cinzel', serif;
  font-size:0.8rem;
  letter-spacing:0.08em;
  border:1px solid var(--gold);
  color:var(--pergament);
  background:transparent;
  cursor:pointer;
}
.btn-voll{background:var(--gold);border-color:var(--gold);color:var(--dunkel);}

/* ANLIEGEN-KARTEN */
.anliegen{background:var(--pergament);padding:60px 6% 90px;}
.anliegen-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  max-width:900px;
  margin:0 auto;
}
.anliegen-karte{text-align:center;padding:36px 24px;border:1px solid var(--gold);}
.anliegen-karte .icon{
  width:52px;height:52px;margin:0 auto 18px;
  border:1px solid var(--rost);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;
}
.anliegen-karte h3{font-size:1.15rem;letter-spacing:0.03em;margin-bottom:12px;}
.anliegen-karte p{font-size:0.95rem;color:#5a4d3a;margin-bottom:18px;}

/* ARBEITEN */
.arbeiten{
  background:linear-gradient(180deg, var(--gold-hell), var(--gold));
  padding:70px 6% 90px;
  text-align:center;
}
.arbeiten .eyebrow{color:#4a3010;}
.arbeiten h2{font-size:clamp(1.7rem, 3.4vw, 2.4rem);color:var(--dunkel);margin-bottom:40px;}
.schaufenster{
  max-width:760px;
  margin:0 auto 30px;
  background:var(--dunkel);
  color:var(--pergament);
  display:grid;
  grid-template-columns:1.1fr 1fr;
  text-align:left;
}
.schaufenster-bild{aspect-ratio:4/3;background:linear-gradient(150deg, #3a2a1a, var(--dunkel-hell)) center/cover;}
.schaufenster-text{padding:30px;}
.schaufenster-text h3{font-size:1.1rem;color:var(--gold-hell);margin-bottom:10px;}
.schaufenster-text p{font-size:0.92rem;color:#c9bda2;}
.streifen{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:10px;
  max-width:820px;
  margin:0 auto;
}
.streifen a{
  aspect-ratio:3/4;
  background:linear-gradient(150deg,#8a6a3c,#5c4322) center/cover;
  display:block;
}

/* PORTRAIT */
.portrait{
  position:relative;
  background:
    linear-gradient(90deg, rgba(10,8,6,0.55) 30%, rgba(10,8,6,0.85) 100%),
    linear-gradient(120deg, #241a12, #171310);
  background-size:cover;background-position:center;
  color:var(--pergament);
  padding:100px 6%;
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:60px;
  align-items:center;
}
.portrait-bild{aspect-ratio:3/4;background:linear-gradient(160deg,#4a3620,var(--dunkel)) center/cover;}
.portrait-text .eyebrow{text-align:left;}
.portrait-text h2{font-size:clamp(1.8rem, 3.6vw, 2.6rem);margin-bottom:20px;line-height:1.2;}
.portrait-text p{max-width:48ch;color:#c9bda2;margin-bottom:26px;}

/* TEAM */
.team{background:var(--pergament);padding:90px 6%;text-align:center;}
.team h2{font-size:clamp(1.7rem, 3.4vw, 2.4rem);margin-bottom:50px;}
.team-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:30px;
  max-width:960px;
  margin:0 auto;
}
.team-mitglied .foto{
  width:130px;height:130px;
  border-radius:50%;
  margin:0 auto 16px;
  background:linear-gradient(150deg,#8a6a3c,#3d2a17) center/cover;
  border:3px solid var(--gold);
}
.team-mitglied h3{font-family:'Cinzel',serif;font-size:1rem;margin-bottom:4px;}
.team-mitglied .rolle{font-size:0.85rem;color:var(--rost);font-style:italic;}

/* ANFORDERUNGEN */
.anforderungen{background:var(--pergament-dunkel);padding:80px 6% 100px;}
.anforderungen h2{font-size:clamp(1.6rem, 3vw, 2.2rem);text-align:center;margin-bottom:44px;}
.liste{max-width:760px;margin:0 auto;}
.liste-eintrag{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:20px 4px;
  border-bottom:1px solid rgba(122,59,34,0.3);
}
.liste-eintrag span:first-child{font-family:'Cinzel',serif;font-size:0.95rem;}
.liste-eintrag span:last-child{color:#7a6a4f;font-size:0.9rem;text-align:right;}

/* KONTAKT */
.kontakt{background:var(--dunkel);color:var(--pergament);padding:110px 6%;text-align:left;}
.kontakt-inner{display:grid;grid-template-columns:1.3fr 0.7fr;gap:50px;align-items:end;}
.kontakt h2{font-size:clamp(2.1rem, 4.5vw, 3.3rem);font-weight:600;line-height:1.05;}
.kontakt h2 em{font-style:italic;color:var(--gold-hell);font-weight:500;}
.kontakt-details{font-size:1rem;color:#c9bda0;}
.kontakt-details p{margin-bottom:8px;}
.kontakt-details .btn{margin-top:18px;}

/* FOOTER */
.site-footer{background:var(--dunkel);color:#a99a7c;padding:60px 6% 30px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:36px;}
.footer-grid h4{font-family:'Cinzel',serif;color:var(--gold-hell);font-size:0.85rem;letter-spacing:0.06em;margin-bottom:16px;}
.footer-grid ul{list-style:none;font-size:0.9rem;display:flex;flex-direction:column;gap:8px;}
.footer-about p{font-size:0.9rem;max-width:32ch;}
.footer-unten{
  border-top:1px solid #3a3226;
  padding-top:20px;
  font-size:0.8rem;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
}
.footer-unten ul{list-style:none;display:flex;gap:18px;}

/* Standard-Seiteninhalt (page.php, single.php) */
.seiten-inhalt{max-width:760px;margin:0 auto;padding:100px 6%;}
.seiten-inhalt h1{font-size:clamp(2rem,4vw,2.8rem);margin-bottom:30px;}
.seiten-inhalt p{margin-bottom:18px;color:#4a4238;}

@media (max-width:820px){
  .hauptnav{display:none;}
  .nav-toggle{display:block;}
  .hauptnav.offen{
    display:block;
    position:absolute;
    top:100%;left:0;right:0;
    background:var(--dunkel);
    padding:20px 6%;
    z-index:20;
  }
  .hauptnav.offen ul{flex-direction:column;gap:16px;}
  .anliegen-grid{grid-template-columns:1fr;}
  .schaufenster{grid-template-columns:1fr;}
  .portrait{grid-template-columns:1fr;}
  .team-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .streifen{grid-template-columns:repeat(3,1fr);}
  .kontakt-inner{grid-template-columns:1fr;}
  .liste-eintrag{flex-direction:column;gap:4px;}
  .liste-eintrag span:last-child{text-align:left;}
}