/*
Theme Name: Martin Oswald - Freie Wähler Rheinland-Pfalz
Theme URI:  https://deine-domain.de
Author:      Dein Name
Author URI:  https://deine-domain.de
Description: Modernes One-Page-Theme fuer die Vorstellung eines Politikers.
Version:     1.1
License:     GNU General Public License v2 or later
Text Domain: martin-oswald-fw
Tags:        politician, one-page, responsive, orange
*/

:root{
  --primary:#f18700;
  --primary-light:#f39100;
  --primary-dark:#ee7100;
  --accent:#0c2f6a;
  --accent-mid:#003c7c;
  --accent-light:#88afca;
  --beige:#d4c29e;
  --beige-light:#f6efe3;
  --dark:#0c2f6a;
  --light:#f6efe3;
  --ink:#0c2f6a;
  --sand:#d4c29e;
  --radius:18px;
  --angle:12deg;
  --shadow:0 24px 60px rgba(12,47,106,.18);
  --portrait-position:50% 40%;
  --media-position-y:calc(50% + 1cm);
  --font-body:'Source Sans 3','Source Sans Pro',system-ui,sans-serif;
  --font-display:'Source Sans 3','Source Sans Pro',system-ui,sans-serif;
  --font-condensed:'Roboto Condensed','Roboto',system-ui,sans-serif;
}

*{
  box-sizing:border-box;
}

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--dark);
  background:linear-gradient(160deg,#fff 0%,#f6efe3 60%,#eef3f8 100%);
  line-height:1.6;
}

a{
  color:inherit;
  text-decoration:none;
}

a:hover{
  color:var(--primary);
}

img{
  max-width:100%;
  height:auto;
}

.container{
  width:min(1100px,92vw);
  margin:0 auto;
}

.site-content{
  padding-top:1.5rem;
}

section{
  scroll-margin-top:90px;
}

.site-header{
  position:sticky;
  top:0;
  z-index:999;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(12px);
  border-bottom:3px solid var(--primary);
}

.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  padding:1.1rem 0;
  position:relative;
}

.site-title a{
  font-family:var(--font-display);
  font-size:1.25rem;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.site-logo{
  display:flex;
  align-items:center;
  gap:.75rem;
}

.site-logo img{
  height:44px;
  width:auto;
  display:block;
}

.site-name{
  font-family:var(--font-condensed);
  font-weight:700;
  letter-spacing:.12em;
  color:var(--accent);
}

.main-navigation ul{
  list-style:none;
  display:flex;
  gap:1.6rem;
  padding:0;
  margin:0;
  font-weight:600;
  font-family:var(--font-condensed);
  text-transform:uppercase;
  letter-spacing:.08em;
}

.main-navigation a{
  position:relative;
}

.main-navigation a:after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:0;
  height:2px;
  background:linear-gradient(var(--angle),var(--primary-light),var(--primary-dark));
  transition:width .2s ease;
}

.main-navigation a:hover:after,
.main-navigation .current-menu-item > a:after{
  width:100%;
}

.menu-toggle{
  display:none;
  border:1px solid rgba(0,0,0,.15);
  background:#fff;
  padding:.5rem .9rem;
  border-radius:999px;
  font-weight:700;
  font-family:var(--font-condensed);
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
}

.hero{
  position:relative;
  padding:7.7rem 0 5.5rem;
  overflow:hidden;
}

.hero:before{
  content:"";
  position:absolute;
  inset:-30% -15%;
  background:linear-gradient(var(--angle),rgba(12,47,106,.08),rgba(136,175,202,.25) 55%,rgba(212,194,158,.25));
  transform:skewY(-2deg);
  z-index:0;
}

.hero:after{
  content:"";
  position:absolute;
  right:-25%;
  bottom:-40%;
  width:60%;
  height:120%;
  background:linear-gradient(var(--angle),rgba(241,135,0,.2),rgba(238,113,0,.1));
  transform:skewY(-2deg);
  z-index:0;
}

.hero-glow{
  position:absolute;
  width:520px;
  height:520px;
  background:radial-gradient(circle at 30% 30%,rgba(241,135,0,.35),rgba(241,135,0,0));
  top:-200px;
  left:-160px;
  pointer-events:none;
  z-index:0;
}

.hero-inner{
  display:grid;
  gap:3.5rem;
  align-items:center;
  position:relative;
  z-index:1;
  padding-top:1.2rem;
}

.hero-copy h1{
  font-family:var(--font-display);
  font-size:clamp(2.6rem,6vw,4.2rem);
  margin:.4rem 0 1rem;
  font-weight:700;
  font-style:italic;
}


.eyebrow{
  font-size:.9rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0;
  font-family:var(--font-condensed);
}

.lead{
  font-size:1.1rem;
  max-width:34rem;
}

.cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  margin-top:2rem;
}

.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  padding:.85rem 1.6rem;
  background:linear-gradient(var(--angle),var(--primary-light),var(--primary-dark));
  color:#fff;
  border-radius:999px;
  border:0;
  font-weight:700;
  font-family:var(--font-condensed);
  letter-spacing:.08em;
  text-transform:uppercase;
  transition:transform .2s ease,box-shadow .2s ease;
  box-shadow:0 12px 30px rgba(241,135,0,.3);
}

.button:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 36px rgba(12,47,106,.25);
}

.button.ghost{
  background:transparent;
  color:var(--dark);
  border:1px solid rgba(12,47,106,.3);
  box-shadow:none;
}

.hero-media{
  display:grid;
  gap:1.5rem;
}

.portrait-card{
  position:relative;
  background:linear-gradient(var(--angle),rgba(136,175,202,.4),rgba(241,135,0,.35));
  border-radius:var(--radius);
  height:420px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
  color:rgba(0,0,0,.6);
  box-shadow:var(--shadow);
  overflow:hidden;
}

.portrait-card span{
  position:relative;
  z-index:1;
}

.portrait-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:var(--portrait-position);
  display:block;
}

.hero-badges{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:1rem;
}

.badge-card{
  background:#fff;
  border-radius:var(--radius);
  padding:1.1rem 1.2rem;
  box-shadow:0 12px 30px rgba(15,28,36,.08);
}

.badge-card strong{
  display:block;
  font-size:1.6rem;
  color:var(--primary);
}

.section{
  padding:5rem 0;
}

.section-alt{
  position:relative;
  background:var(--light);
  overflow:hidden;
}

.section-alt:before{
  content:"";
  position:absolute;
  inset:-20% -10%;
  background:linear-gradient(var(--angle),rgba(136,175,202,.12),rgba(212,194,158,.35));
  transform:skewY(-2deg);
  z-index:0;
}

.section-accent{
  position:relative;
  background:linear-gradient(var(--angle),rgba(12,47,106,.08),rgba(136,175,202,.25),rgba(212,194,158,.2));
  overflow:hidden;
}

.section-alt .container,
.section-accent .container{
  position:relative;
  z-index:1;
}

.section-header{
  max-width:640px;
  margin-bottom:3rem;
}

.section-header h2{
  font-family:var(--font-display);
  font-size:clamp(2rem,4vw,2.9rem);
  margin:.6rem 0 1rem;
  font-style:italic;
  font-weight:700;
  color:var(--accent);
}

.timeline{
  display:grid;
  gap:1.8rem;
}

.timeline-item{
  display:grid;
  gap:1rem;
  padding:1.6rem;
  border-radius:var(--radius);
  background:#fff;
  box-shadow:0 12px 30px rgba(12,47,106,.08);
  border-left:4px solid var(--primary);
}

.timeline-year{
  font-weight:700;
  color:var(--accent);
}

.card-grid{
  display:grid;
  gap:1.5rem;
}

.statement-card{
  padding:1.8rem;
  border-radius:var(--radius);
  background:#fff;
  box-shadow:var(--shadow);
  border:1px solid rgba(12,47,106,.08);
}

.statement-card h3{
  margin-top:0;
  font-family:var(--font-display);
  font-style:italic;
}

.pill-grid{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
}

.topic-pill{
  padding:.6rem 1.2rem;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(12,47,106,.12);
  font-weight:700;
  font-family:var(--font-condensed);
  letter-spacing:.08em;
  text-transform:uppercase;
}

.media-grid{
  display:grid;
  gap:1.5rem;
}

.media-card{
  background:linear-gradient(var(--angle),rgba(136,175,202,.45),rgba(212,194,158,.55));
  border-radius:var(--radius);
  height:240px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
  color:rgba(12,47,106,.75);
  box-shadow:0 18px 40px rgba(12,47,106,.12);
  overflow:hidden;
}

.media-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% var(--media-position-y);
  display:block;
}

.contact-section{
  display:grid;
  gap:2.5rem;
  align-items:center;
}

.contact-list{
  display:flex;
  flex-direction:column;
  gap:.4rem;
  margin-top:1rem;
  font-weight:600;
}

.contact-card{
  background:#fff;
  border-radius:var(--radius);
  padding:2rem;
  box-shadow:var(--shadow);
  border:1px solid rgba(12,47,106,.08);
}

.site-footer{
  background:linear-gradient(var(--angle),var(--accent),var(--accent-mid));
  color:#fff;
  text-align:center;
  padding:2.5rem 0;
  border-top:6px solid var(--primary);
}

.footer-social-icons{
  display:flex;
  justify-content:center;
  gap:1rem;
  margin-bottom:1rem;
}

.footer-social-icons a{
  color:#fff;
}

.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .6s ease,transform .6s ease;
}

.reveal.reveal--left{
  transform:translateX(-28px);
}

.reveal.reveal--right{
  transform:translateX(28px);
}

.reveal.is-visible{
  opacity:1;
  transform:translate(0,0);
}

@media (prefers-reduced-motion: reduce){
  .reveal,
  .reveal.reveal--left,
  .reveal.reveal--right{
    opacity:1;
    transform:none;
    transition:none;
  }
}

@media (min-width:900px){
  .hero-inner{
    grid-template-columns:1.1fr .9fr;
  }

  .timeline-item{
    grid-template-columns:140px 1fr;
    align-items:start;
  }

  .card-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .media-grid{
    grid-template-columns:repeat(3,1fr);
  }

  .contact-section{
    grid-template-columns:1fr .8fr;
  }
}

@media (max-width:900px){
  .site-header .container{
    flex-direction:column;
    align-items:center;
    text-align:center;
  }

  .site-logo{
    flex-direction:column;
    gap:.4rem;
  }

  .site-name{
    font-size:.95rem;
  }

  .main-navigation{
    position:static;
    background:transparent;
    border-bottom:0;
    display:block;
  }

  .main-navigation ul{
    flex-direction:column;
    align-items:center;
    padding:1rem 0 1.5rem;
  }

  .menu-toggle{
    display:none;
  }

  .hero{
    padding-top:5rem;
  }
}