/* ---------------------------------------------------------------
   style.css - datenschutzcomedy.de

   Farben, Schrift und Anmutung aus dem Contao-Layout (00-basis.scss).
   Das Raster ist neu: Inhalt in .wrap auf eine lesbare Breite
   begrenzt, die pinken Baender (.accent) laufen trotzdem ueber die
   ganze Breite. Mobil zuerst, ab 900px zweispaltig.

   Schriften liegen lokal unter /fonts - kein Abruf bei Dritten.
   --------------------------------------------------------------- */

@font-face{font-family:"Barlow";src:url("../fonts/Barlow-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow";src:url("../fonts/Barlow-Bold.ttf") format("truetype");font-weight:700;font-display:swap}

:root{
  --pink:#FF004F;
  --font-size-h1:3rem;
  --breite:1080px;      /* Inhaltsbreite auf grossen Bildschirmen */
  --rand:5vw;           /* seitlicher Abstand auf kleinen */
  --abstand:clamp(2rem, 6vw, 4.5rem);   /* senkrecht zwischen Abschnitten */
}

/* --- Grundlage ------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
body,div,h1,h2,h3,h4,h5,h6,p,ul,li,figure,form,input,textarea{margin:0;padding:0}
ul{list-style-type:none}
img{border:0;max-width:100%;height:auto}

body{
  font-family:"Barlow",sans-serif;
  font-size:1.25em;
  line-height:1.5;
  color:#fff;
  background-color:#000;
  text-transform:uppercase;
  text-align:left;
}
h1,h2,h3,h4,h5,h6{font-weight:400;margin-top:0;margin-bottom:0.5rem}
h1,h2{text-align:center;font-size:1.6rem;text-transform:uppercase}
p{margin-top:0;margin-bottom:1rem}
p:last-child{margin-bottom:0}

a{text-decoration:none;transition:color 0.3s ease}
a:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(255,255,255,0.6)}
#main a{color:var(--pink)}
#main a:hover{color:#fff}

/* Fuer Screenreader sichtbar, sonst nicht */
.invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}

/* --- Raster ---------------------------------------------------- */
/* .block: Abschnitt ueber die volle Breite (traegt die Farbe),
   .wrap:  Inhalt darin, mittig und begrenzt */
.block{padding:var(--abstand) var(--rand)}
.wrap{max-width:var(--breite);margin:0 auto}

/* --- Kopf ------------------------------------------------------ */
#header{padding:0 var(--rand);text-align:center}
#header .inside{padding-top:clamp(1.5rem, 5vh, 3rem)}
#header .logo_marke img{width:min(420px, 70vw)}

/* --- Slogan mit Bild ------------------------------------------- */
/* Das Bild sitzt unten buendig, damit Steffen auf dem pinken Band
   darunter steht. Deshalb unten kein Abstand. */
.hero{padding-bottom:0}
.hero-grid{display:grid;justify-items:center;gap:1.5rem}
.hero-bild{display:block;width:min(235px, 55vw);justify-self:start}

.slogan h1,.slogan h2{padding:0;margin:0;font-size:var(--font-size-h1);line-height:1}
.slogan h1{font-weight:700}
.slogan h2{font-size:calc(var(--font-size-h1) * 0.7)}

/* --- Pinkes Band ----------------------------------------------- */
.accent{background-color:var(--pink);color:#fff}
.accent a{color:#000 !important}
.accent a:hover{color:#fff !important;text-decoration:underline}
.lead{font-size:1.15em;line-height:1.45;max-width:42ch;margin:0 auto;text-align:center}

/* --- Text und Video -------------------------------------------- */
.info-grid{display:grid;gap:2rem;align-items:center}
.content-player{border:1px solid #fff;background:#111}
.content-player video{display:block;width:100%;height:auto}

/* --- Rechtstexte ----------------------------------------------- */
/* In normaler Schreibung, sonst schwer zu lesen */
.rechtstext{text-transform:none}
.rechtstext .wrap,.rechtstext{max-width:calc(820px + 2 * var(--rand));margin:0 auto}
.rechtstext h1,.rechtstext h2{text-transform:uppercase}
.rechtstext h2{font-size:1.2rem;margin-top:2rem;text-align:left}
.rechtstext ul{list-style:disc;margin:0 0 1rem 1.5rem}
.rechtstext ol{margin:0 0 1rem 1.5rem}

/* --- Anfrageformular ------------------------------------------- */
.anfrage{max-width:720px}
.anfrage h2{margin-bottom:2rem}
.anfrage form{display:flex;justify-content:center}
.anfrage .formbody{width:100%}
.anfrage .widget{display:flex;flex-direction:column-reverse;margin-bottom:1.25rem}
.anfrage .form-reihe{display:grid;gap:0 2rem}
.anfrage input,.anfrage textarea,.anfrage button{
  border:1px solid #fff;background:var(--pink);color:#fff;
  margin-top:0.5vh;font:inherit;width:100%;
}
.anfrage input.text{border-top:none;border-right:none;border-left:none;padding:0.2rem 0;text-transform:none}
.anfrage textarea{min-height:10rem;padding:0.4rem;resize:vertical;text-transform:none}
.anfrage input:focus,.anfrage textarea:focus{outline:2px solid #000;outline-offset:2px}
.anfrage button{
  display:inline-block;width:auto;cursor:pointer;padding:0.4rem 1.6rem;border-radius:2px;
  transition:color 0.15s ease-in-out,background-color 0.15s ease-in-out;
}
.anfrage button:hover{background-color:#000;color:#fff}
.anfrage .mandatory-stern{margin-left:0.2em}

.anfrage .datenschutz-check{flex-direction:row-reverse;justify-content:flex-end;align-items:flex-start;gap:0.6rem;font-size:0.8rem;text-transform:none}
.anfrage .datenschutz-check input{width:auto;margin-top:0.35rem;flex-shrink:0}

/* Honeypot: fuer Menschen unsichtbar, Bots fuellen es aus */
.form-honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form-status{padding:1rem;margin:0 auto 1.5rem;border:1px solid #fff;background:#000;text-transform:none}

/* --- Fuss ------------------------------------------------------ */
#footer{padding:2.5rem var(--rand) 1.5rem;background-color:#fff;color:#000;text-align:center}
#footer h5{font-size:small;font-weight:400;margin-bottom:0.75rem}
#footer .logo img{width:min(320px, 70vw)}
#footer ul{display:flex;justify-content:center;gap:2rem;margin-top:1.5rem}
#footer ul li{font-size:small}
#footer a{color:#000}
#footer a:hover{color:var(--pink)}

/* --- Schmal ---------------------------------------------------- */
@media (max-width:599px){
  :root{--font-size-h1:2.4rem}
  .lead{font-size:1em}
}

/* --- Breit: zweispaltig ---------------------------------------- */
@media (min-width:600px){
  .anfrage .form-reihe{grid-template-columns:1fr 1fr}
}
@media (min-width:700px){
  /* Bild links, Slogan rechts daneben, beides als Gruppe mittig */
  .hero-grid{grid-template-columns:auto auto;justify-content:center;align-items:center;gap:clamp(2rem, 5vw, 4rem)}
  .hero-bild{grid-column:1;grid-row:1;align-self:end;width:clamp(200px, 22vw, 260px)}
  .hero .slogan{grid-column:2;grid-row:1;padding-bottom:3rem}
  .hero .slogan h1,.hero .slogan h2{text-align:left}
}
@media (min-width:900px){
  :root{--font-size-h1:4.5rem}
  .lead{font-size:1.35em}
  /* Text links, Video rechts */
  .info-grid{grid-template-columns:5fr 7fr;gap:3.5rem}
}