/*
Theme Name: Rechts-Pause
Theme URI: https://www.rechts-pause.de/
Author: Steffan Schwerin
Author URI: https://www.rechts-pause.de/
Description: Startseite und Textseiten für das Label Rechts-Pause. Ohne externe Schriften, ohne Tracking, ohne Cookies.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rechts-pause
Tags: one-column, custom-menu, editor-style, block-styles
*/

:root{
  --schwarz:#000000;
  --asphalt:#141210;
  --weiss:#ffffff;
  --rot:#e4141b;
  --grau:#b3aeaa;
  --linie:rgba(255,255,255,.16);

  --sans:"Helvetica Neue",Helvetica,Arial,"Liberation Sans",system-ui,sans-serif;

  --rand:clamp(1.25rem,5vw,4.5rem);
  --block:clamp(4.5rem,10vw,9rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  background:var(--schwarz);
  color:var(--grau);
  font-family:var(--sans);
  font-size:clamp(1rem,.95rem + .3vw,1.15rem);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:var(--weiss)}
a:focus-visible,button:focus-visible{outline:3px solid var(--rot);outline-offset:4px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.springen{position:absolute;left:var(--rand);top:0;z-index:5;background:var(--weiss);color:#000;padding:.6rem 1rem;transform:translateY(-120%)}
.springen:focus{transform:translateY(0)}

main{flex:1}
body.home main{display:flex;flex-direction:column}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  flex:1;
  min-height:70svh;
  display:flex;
  align-items:flex-end;
  padding:var(--block) var(--rand) clamp(2.5rem,6vw,4.5rem);
  overflow:hidden;
  isolation:isolate;
}
.hero__foto{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;
  object-fit:cover;
}
.hero__schleier{
  position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(120% 90% at 15% 85%, rgba(0,0,0,.94) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.25) 100%),
    linear-gradient(to top, rgba(0,0,0,.95) 0%, rgba(0,0,0,.45) 40%, rgba(0,0,0,.55) 100%);
}

.marke{
  transform:rotate(-1.2deg);
  transform-origin:left bottom;
  width:fit-content;
  max-width:100%;
}
.marke__balken{
  display:block;
  height:clamp(.55rem,1.6vw,1.1rem);
  background:var(--rot);
  transform-origin:left center;
}
.marke h1{
  margin:clamp(.35rem,1vw,.7rem) 0;
  font-size:clamp(3.2rem,14vw,10.5rem);
  line-height:.83;
  font-weight:900;
  letter-spacing:-.035em;
  color:var(--weiss);
  text-transform:uppercase;
}
.marke h1 span{display:block}

.hero__spruch{
  margin:clamp(1.5rem,4vw,2.4rem) 0 0;
  max-width:20ch;
  font-size:clamp(1.35rem,1.1rem + 1.5vw,2.3rem);
  line-height:1.1;
  letter-spacing:-.02em;
  font-weight:900;
  color:var(--weiss);
}
.hero__satz{
  margin:.7rem 0 0;
  max-width:34ch;
  font-size:clamp(.98rem,.94rem + .3vw,1.1rem);
  color:var(--grau);
}


/* ---------- Textseiten (Impressum, Datenschutz, alle WP-Seiten) ---------- */
.blatt{max-width:62ch;padding:clamp(2.5rem,7vw,5rem) var(--rand) 6rem}
.blatt h1{
  font-size:clamp(2rem,1.5rem + 2vw,3rem);
  font-weight:900;letter-spacing:-.025em;color:var(--weiss);
  line-height:1.05;margin:0 0 2rem;padding-top:1rem;
  border-top:8px solid var(--rot);
}
.eintrag h2{font-size:1.35rem;font-weight:700;color:var(--weiss);margin:2.4rem 0 .6rem;letter-spacing:-.01em}
.eintrag h3{font-size:1.15rem;font-weight:700;color:var(--weiss);margin:1.8rem 0 .5rem}
.eintrag p,.eintrag li{margin:0 0 1rem}
.eintrag ul,.eintrag ol{padding-left:1.2rem}
.eintrag a{text-decoration:none;border-bottom:1px solid var(--rot);padding-bottom:2px}
.eintrag a:hover{color:var(--rot)}
.eintrag strong{color:var(--weiss)}
.eintrag hr{border:0;border-top:1px solid var(--linie);margin:2.5rem 0}
.zurueck{display:inline-block;margin-bottom:2.5rem;font-weight:700;text-decoration:none;
  color:var(--weiss);border-bottom:3px solid var(--rot);padding-bottom:3px}
.zurueck:hover{color:var(--rot)}

/* ---------- Fuß ---------- */
.fuss{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:.6rem 2rem;
  padding:1.1rem var(--rand) 1.4rem;
  border-top:1px solid var(--linie);
  font-size:.9rem;
  background:var(--schwarz);
}
.fuss__kicker{display:flex;align-items:center;gap:.6rem;margin:0;color:#8b8580}
.bogen{width:2.4rem;height:1.4rem;flex:none}
.fuss__wege{display:flex;flex-wrap:wrap;gap:1.5rem;margin:0;padding:0;list-style:none}
.fuss__wege li{margin:0}
.fuss a{text-decoration:none;border-bottom:1px solid var(--rot);padding-bottom:2px}
.fuss a:hover{color:var(--rot)}
.fuss p{margin:0;max-width:52ch;color:#7e7975}

/* ---------- Einblenden beim Laden ---------- */
@media (prefers-reduced-motion: no-preference){
  .marke__balken{animation:wischen .5s cubic-bezier(.2,.7,.2,1) both}
  .marke__balken:last-of-type{animation-delay:.12s}
  .marke h1,.hero__spruch,.hero__satz{animation:auf .6s ease-out both;animation-delay:.3s}
  .hero__spruch{animation-delay:.42s}
  .hero__satz{animation-delay:.52s}
  @keyframes wischen{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  @keyframes auf{from{opacity:0;transform:translateY(.6rem)}to{opacity:1;transform:none}}
}


/* Admin-Leiste nicht über den Hero legen */
body.admin-bar{min-height:calc(100svh - 32px)}
@media screen and (max-width:782px){
  body.admin-bar{min-height:calc(100svh - 46px)}
}