/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */

/* =========================
   SCHRIFTEN + CI-VARIABLEN
========================= */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Hauptfarbe: dunkles Kampagnen-Blau */
  --pflaster-blau: #246A99;

  /* Akzentfarbe: Rot für Kategorie / Warnsignal */
  --pflaster-rot: #D71920;

  /* Heller Seitenhintergrund */
  --pflaster-bg: #F4F7F9;

  /* Standard-Textfarbe */
  --pflaster-text: #1B1B1B;

  /* Maximale Breite für Foto, Text und Kategorie */
  --max-weite: 960px;

  /* Maximale Breite für Pflaster-Grafik unten */
  --max-pflaster: 400px;

  /* Abstand links/rechts auf kleinen Bildschirmen */
  --seitenrand-mobil: 40px;

  /* Fließtext-Größe */
  --schrift-text: 16px;

  /* Zeilenabstand im Fließtext */
  --zeile-text: 1.35;
		

  /* Größe der roten Kategorie */
  --schrift-kategorie: 18px;

  /* Kleinste Größe des großen Zitats */
  --schrift-titel-min: 38px;

  /* Größte Größe des großen Zitats */
  --schrift-titel-max: 64px;
}

body {
  font-family: 'Inter', sans-serif;
  color: var(--pflaster-text);
}

/* =========================
   SCHICKSALSGESCHICHTEN
   Einzelbeiträge
========================= */

/* Autor, Datum, Meta und Kommentare ausblenden */
.single-post .entry-meta,
.single-post .ct-entry-meta,
.single-post .post-meta,
.single-post #comments,
.single-post .ct-comments,
.single-post .comment-respond,
.single-post .comments-area {
  display: none !important;
}

/* Inhalt: Foto, Text, Pflaster */
.single-post .entry-content {
  max-width: var(--max-weite) !important;
  width: min(var(--max-weite), calc(100vw - var(--seitenrand-mobil))) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Beitragstitel / Zitat */
body.single-post h1,
body.single-post .page-title,
body.single-post .entry-title,
body.single-post .ct-title-label,
body.single-post .hero-section h1 {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: clamp(var(--schrift-titel-min), 5vw, var(--schrift-titel-max)) !important;
  line-height: 0.95 !important;
  letter-spacing: 0.01em !important;
  color: var(--pflaster-blau) !important;
  max-width: var(--max-weite) !important;
  width: min(var(--max-weite), calc(100vw - 40px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 28px !important;
  text-align: left !important;
  transform: translateX(-110px);
}

/* iPad hochkant */
@media (min-width: 768px) and (max-width: 900px) {
  body.single-post h1,
  body.single-post .page-title,
  body.single-post .entry-title,
  body.single-post .ct-title-label,
  body.single-post .hero-section h1 {
    transform: translateX(-20px) !important;
  }
}

/* Handy */
@media (max-width: 767px) {
  body.single-post h1,
  body.single-post .page-title,
  body.single-post .entry-title,
  body.single-post .ct-title-label,
  body.single-post .hero-section h1 {
    transform: none !important;
  }
}

/* Manuelle rote Kategorie im Beitrag */
.story-kategorie,
.story-kategorie a {
  font-family: 'Bebas Neue', sans-serif !important;
  color: var(--pflaster-rot) !important;
  font-size: var(--schrift-kategorie) !important;
  line-height: 1 !important;
  letter-spacing: 0.04em !important;
}

.story-kategorie {
  margin-top: -50px !important;
  margin-bottom: 22px !important;
  max-width: var(--max-weite) !important;
  width: min(var(--max-weite), calc(100vw - var(--seitenrand-mobil))) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.story-kategorie a {
  text-decoration: underline !important;
}


/* Bild */
.single-post .entry-content figure {
  width: min(var(--max-weite), calc(100vw - 40px)) !important;
  max-width: var(--max-weite) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.single-post .entry-content figure img {
  width: 100% !important;
  display: block !important;
}

/* Bildunterschrift */
.single-post figcaption {
  text-align: left !important;
  font-size: 12px !important;
  color: var(--pflaster-blau) !important;
  opacity: 0.65 !important;
  margin-top: 7px !important;
}

/* Fließtext auf gleiche Breite/Linie wie Titel/Bild */
.single-post .entry-content p:not(.story-zitat):not(.story-schluss) {
  font-family: 'Inter', sans-serif !important;
  font-size: var(--schrift-text) !important;
  line-height: var(--zeile-text) !important;
  font-weight: 500 !important;
  color: var(--pflaster-text) !important;

  max-width: var(--max-weite) !important;
  width: min(var(--max-weite), calc(100vw - var(--seitenrand-mobil))) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 0.85em !important;
}


/* Zitat-Einschub */
.story-zitat,
.story-schluss {
  max-width: var(--max-weite) !important;
  width: min(var(--max-weite), calc(100vw - 40px)) !important;
  margin: 10px auto !important;
  padding: 30px 38px !important; 
  font-family: 'Bebas Neue', sans-serif !important;
  color: var(--pflaster-blau) !important;
  font-size: clamp(34px, 4vw, 56px) !important;
  line-height: 1 !important;
  letter-spacing: 0.02em !important; 
  border-left: none !important;
}


/* waagrechtes Pflaster wird gedreht */
.story-pflaster img {
  width: 400px !important;
  max-width: 400px !important;
  min-width: 400px !important;
  height: auto !important;

  position: relative !important;
  left: 420px !important;
  top: -110px !important;

  transform: rotate(-12deg) !important;
  z-index: 10 !important;
}

/* Pflaster mobil sichtbar machen */
@media (max-width: 767px) {
  .story-pflaster {
    width: 260px !important;
    max-width: 260px !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    overflow: visible !important;
  }

  .story-pflaster img {
    width: 260px !important;
    max-width: 260px !important;
    min-width: 0 !important;
    height: auto !important;

    position: relative !important;
    left: 0 !important;
    top: -65px !important;

    transform: rotate(-10deg) !important;
    z-index: 10 !important;
  }
}

/* =========================================================
   PFLASTER – Danke-Seite nach Story-Einreichung
   Gilt für die Seite nach dem Absenden des Formulars.
   Shortcodes im Inhalt:
   [pflaster_vorname] [pflaster_nachname] [pflaster_fallnummer]
   ========================================================= */

.pflaster-danke {
  max-width: var(--max-weite);
  margin: 80px auto;
  padding: 48px 28px;
  background: #fff;
  color: var(--pflaster-text);
}

.pflaster-danke h1 {
  color: var(--pflaster-blau);
  font-size: clamp(var(--schrift-titel-min), 5vw, var(--schrift-titel-max));
  line-height: 1;
  margin-bottom: 24px;
}

.pflaster-danke h2 {
  color: var(--pflaster-blau);
  margin-top: 40px;
}

.pflaster-danke p,
.pflaster-danke li {
  font-size: var(--schrift-text);
  line-height: var(--zeile-text);
}

.pflaster-danke-lead {
  font-size: 1.35rem !important;
  color: var(--pflaster-blau);
  font-weight: 700;
}

.pflaster-danke-box {
  margin: 36px 0;
  padding: 28px;
  border: 3px solid var(--pflaster-rot);
  border-radius: 18px;
  background: var(--pflaster-bg);
}

.pflaster-danke-box p {
  margin: 0 0 8px;
}

.pflaster-danke-box strong {
  display: block;
  font-size: clamp(2rem, 6vw, 4rem);
  color: var(--pflaster-rot);
  letter-spacing: 0.04em;
}

.pflaster-danke-highlight {
  margin: 32px 0;
  padding: 22px 26px;
  background: var(--pflaster-blau);
  color: #fff;
  border-radius: 18px;
  font-weight: 700;
  font-size: 1.2rem !important;
}

.pflaster-danke-signatur {
  margin-top: 42px;
  font-size: 1.15rem !important;
}

@media (max-width: 767px) {
  .pflaster-danke {
    width: calc(100vw - var(--seitenrand-mobil));
    padding: 34px 0;
    margin: 48px auto;
  }
}

/* =========================================================
   PFLASTER – Einverständniserklärung Druck/PDF Button
   Button unten rechts, wird beim Drucken nicht mitgedruckt.
   ========================================================= */

.pflaster-print-button {
  position: fixed;
  right: 32px;
  bottom: 32px;
  z-index: 9999;
  padding: 16px 24px;
  background: var(--pflaster-rot);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}

.pflaster-print-button:hover {
  background: var(--pflaster-blau);
}

@media print {
  .pflaster-print-button {
    display: none !important;
  }
}