/* ==========================================================================
   MV Communication - gemeinsames Stylesheet
   Alle Farb- und Maßwerte sind an der WordPress-Seite ausgemessen,
   nicht geschätzt. Änderungen hier wirken auf allen sieben Seiten.
   ========================================================================== */

:root{
  --orange:#ff6005;
  --orange-dunkel:#e05400;
  --orange-tile:rgba(247,99,12,.75);
  --grau:#929292;
  --blau:#5d7ca5;
  --dunkelgrau:#606060;
  --footer:#5f6680;
  --lavendel:#d1dcfd;
  --text:#37000a;
  --bg:#f7fafc;
  --linie:#e6ebf0;
  --breite:1300px;
  --serif:'Source Sans Pro',system-ui,-apple-system,'Segoe UI',sans-serif;
  --head:'Montserrat',system-ui,-apple-system,sans-serif;
  --nav:'Prompt',system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--serif);
  font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--orange)}
h1,h2,h3,h4,h5{font-family:var(--head);font-weight:700;margin:0 0 .5em}
.wrap{max-width:var(--breite);margin:0 auto;padding:0 24px;width:100%}
.eng{max-width:900px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:#fff;padding:10px 16px;z-index:100}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px}

/* ---------- Kopf ---------------------------------------------------------- */
.kopf{position:absolute;top:0;left:0;right:0;z-index:20}
.kopf::before{content:"";position:absolute;top:0;left:0;right:0;height:200px;pointer-events:none;z-index:-1;
  background:linear-gradient(to bottom,rgba(20,20,34,.72) 0%,rgba(20,20,34,.50) 38%,rgba(20,20,34,.22) 70%,rgba(20,20,34,0) 100%)}
.kopf .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:26px;padding-bottom:26px}
.logo img{width:113px}
.nav{display:flex;align-items:center;gap:6px}
.nav a{font-family:var(--nav);font-size:18px;color:#fff;text-decoration:none;padding:10px 14px;
  border-radius:3px;transition:color .2s;text-shadow:0 1px 3px rgba(0,0,0,.45)}
.nav a:hover{color:#fff;text-decoration:underline;text-underline-offset:6px}
.nav a.aktiv{text-decoration:underline;text-underline-offset:6px}
.nav a.knopf{background:var(--orange);color:#fff;padding:12px 22px;text-shadow:none;box-shadow:0 2px 10px rgba(0,0,0,.22)}
.nav a.knopf:hover{background:var(--orange-dunkel);text-decoration:none}
.burger{display:none;background:none;border:0;color:#fff;font-size:26px;cursor:pointer;padding:8px;
  text-shadow:0 1px 4px rgba(0,0,0,.55)}

/* Kopf auf Seiten ohne Bildhintergrund */
.kopf.fest{position:relative;background:#3a3a52}
.kopf.fest::before{display:none}

/* ---------- Mitlaufender Kopf --------------------------------------------- */
.mitlauf{position:fixed;top:0;left:0;right:0;z-index:40;
  background:rgba(36,36,52,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 2px 16px rgba(0,0,0,.2);
  transform:translateY(-100%);visibility:hidden;
  transition:transform .32s cubic-bezier(.4,0,.2,1),visibility .32s}
.mitlauf.sichtbar{transform:none;visibility:visible}
.mitlauf .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:9px;padding-bottom:9px}
.mitlauf .logo img{width:auto;height:54px}
.mitlauf .nav{gap:2px}
.mitlauf .nav a{font-size:16px;padding:9px 12px;text-shadow:none}
.mitlauf .nav a.knopf{padding:10px 18px;box-shadow:none}
.mitlauf .burger{display:none}

/* ---------- Vollbild-Menue ------------------------------------------------ */
.menuefeld{position:fixed;inset:0;z-index:60;background:rgba(28,28,42,.97);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s}
.menuefeld.offen{opacity:1;visibility:visible}
.menuefeld nav{display:flex;flex-direction:column;align-items:center;gap:4px}
.menuefeld a{font-family:var(--nav);font-size:26px;color:#fff;text-decoration:none;padding:14px 26px;border-radius:4px}
.menuefeld a:hover,.menuefeld a:focus-visible{background:rgba(255,255,255,.1)}
.menuefeld a.knopf{background:var(--orange);font-size:20px;margin-top:14px;padding:14px 30px;font-weight:700}
.menuefeld .schliessen{position:absolute;top:18px;right:18px;width:48px;height:48px;
  background:none;border:0;color:#fff;font-size:34px;line-height:1;cursor:pointer;border-radius:6px}
.menuefeld .schliessen:hover{background:rgba(255,255,255,.12)}
body.menue-offen{overflow:hidden}

/* ---------- Knopf --------------------------------------------------------- */
.knopf{display:inline-block;background:var(--orange);color:#fff;font-family:var(--serif);
  font-size:18px;font-weight:700;text-decoration:none;padding:12px 22px;border-radius:3px;
  transition:background .2s;border:0;cursor:pointer}
.knopf:hover{background:var(--orange-dunkel)}
/* Zweitknopf: gleiche Groesse, aber zurueckhaltend. Steht neben dem
   Hauptknopf und darf ihm die Aufmerksamkeit nicht wegnehmen. */
.knopf.zweit{background:none;color:var(--orange);box-shadow:inset 0 0 0 2px var(--orange);
  margin:12px 0 0;display:block;width:fit-content}
.knopf.zweit:hover{background:var(--orange);color:#fff}
.knopf-hinweis{margin:10px 0 0;font-size:15px;color:#5a5a68}

/* ---------- Hero der Startseite ------------------------------------------- */
.hero{position:relative;min-height:867px;display:flex;align-items:center;overflow:hidden;background:#8c9ce6}
.hero-bild{position:absolute;inset:0;background:url('/bilder/2024/04/Ohne-Titel-1.png') 33% 77%/cover no-repeat}
.hero-schleier{position:absolute;inset:0;background:#8c9ce6;opacity:.4;mix-blend-mode:multiply}
/* Ruhige Flaeche unter dem Text. Ersetzt die frueheren Einzelbalken, die in
   fuenf Laengen uebereinanderstanden und dadurch unruhig wirkten. */
.hero-flaeche{position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(100deg,rgba(24,26,46,.80) 0%,rgba(24,26,46,.72) 30%,
  rgba(24,26,46,.56) 52%,rgba(24,26,46,.28) 70%,rgba(24,26,46,.06) 84%,rgba(24,26,46,0) 94%)}
.hero .wrap{position:relative;z-index:2;padding-top:150px;padding-bottom:80px}
.hero-text{max-width:640px}
/* Feste 10 Pixel statt em, damit alle Balken an derselben Kante beginnen
   und kein senkrechter Ueberstand die Zeile darueber verdeckt. */
.marker{display:inline;background:none;color:#fff;padding:0;
  text-shadow:0 2px 16px rgba(18,20,36,.62),0 1px 3px rgba(18,20,36,.5)}
.marker.orange{background:none;color:#ffbb8c}
.kicker{font-family:var(--head);font-weight:700;font-size:20px;line-height:1.7;margin:0 0 16px}
.hero h1{font-size:clamp(30px,4.4vw,40px);line-height:1.42;margin:0 0 20px;color:#fff}
.hero .unter{font-family:var(--head);font-weight:700;font-size:18px;line-height:1.85;margin:0 0 14px;color:#fff}
.hero .knopf{margin-left:0}

/* ---------- Kopfbereich der Unterseiten ----------------------------------- */
.seitenkopf{position:relative;background:#5f6680;color:#fff;padding:54px 0 48px;overflow:hidden}
.seitenkopf.mitbild::before{content:"";position:absolute;inset:0;background-size:cover;background-position:center;opacity:.35}
.seitenkopf .wrap{position:relative;z-index:2}
.seitenkopf h1{font-size:clamp(30px,4.2vw,44px);color:#fff;margin:0}
.seitenkopf p{margin:10px 0 0;font-size:18px;max-width:760px}

/* ---------- Formuebergaenge ----------------------------------------------- */
.trenner{position:absolute;left:0;bottom:-1px;width:100%;line-height:0;z-index:3;pointer-events:none}
.trenner svg{display:block;width:100%;height:100%}
.trenner-stufen{height:62px}
.trenner-spitze{height:100px}

/* ---------- Bildstreifen -------------------------------------------------- */
.zeigebild{background:#fff}
.zeigebild .wrap{display:flex;justify-content:center;padding:0}
.zeigebild img{width:auto;height:330px;max-width:420px;object-fit:contain;object-position:top;margin-top:-40px}

/* ---------- Reichweiten-Kacheln ------------------------------------------- */
.saeulen{background:#fff;padding:40px 0 80px}
.raster{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.kachel{padding:64px;color:#fff}
.kachel h3{font-size:28px;line-height:1.25;margin:0 0 18px;color:#fff}
.kachel p{margin:0;font-size:18px;line-height:1.55}
.k1,.k6{background:var(--orange-tile)}
.k2{background:var(--grau)}
.k3,.k5{background:var(--blau)}
.k4{background:var(--dunkelgrau)}

/* ---------- Textabschnitte ------------------------------------------------ */
.abschnitt{padding:70px 0}
.abschnitt.weiss{background:#fff}
.abschnitt.hell{background:var(--bg)}
.abschnitt h2{font-size:34px;margin:0 0 20px}
.abschnitt h3{font-size:26px;margin:0 0 16px}
.vorzeile{font-family:var(--head);font-weight:700;font-size:14px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--orange);margin:0 0 10px}

.plus{background:#fff;padding:60px 0 80px}
.plus h3{font-size:28px;color:var(--text);margin:0 0 18px}
.plus p{max-width:820px;margin:0}

/* ---------- Leistungsraster ----------------------------------------------- */
.leistungen{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.leistung{background:#fff;border:1px solid var(--linie);border-radius:3px;overflow:hidden;display:flex;flex-direction:column}
.leistung h3{background:#eef2f6;color:var(--text);font-size:22px;margin:0;padding:18px 24px;line-height:1.3}
.leistung p{margin:0;padding:22px 24px 26px;font-size:17px;line-height:1.55}
.leistung.breit{grid-column:span 1}

/* ---------- Text mit Bild daneben ----------------------------------------
   Bricht auf schmalen Schirmen untereinander um. Wichtig: nicht als
   Inline-Stil setzen, sonst greifen die Umbruchpunkte nicht. */
.zweispalt{display:grid;grid-template-columns:1fr 300px;gap:44px;align-items:start;margin-top:30px}
.zweispalt.breiter{grid-template-columns:1fr 340px;gap:48px}
.zweispalt img{border-radius:3px;width:100%;height:auto}
@media (max-width:900px){
  .zweispalt,.zweispalt.breiter{grid-template-columns:1fr;gap:28px}
  .zweispalt img{max-width:320px;margin:0 auto}
}

/* ---------- Zitat --------------------------------------------------------- */
.stimme{background:var(--bg);padding:80px 0 120px;position:relative;overflow:hidden}
.stimme .karte{max-width:790px;margin:0 auto;background:#fff;border:1px solid var(--linie);
  border-radius:2px;padding:28px 32px;position:relative}
.stimme .karte::after{content:"";position:absolute;left:36px;bottom:-14px;
  border:14px solid transparent;border-top-color:#fff;border-bottom:0}
.sterne{color:#f5b722;font-size:26px;letter-spacing:2px;line-height:1;margin-bottom:14px}
.stimme blockquote{margin:0;font-weight:700;font-size:18px;line-height:1.5}
.stimme .wer{max-width:790px;margin:26px auto 0;padding-left:18px}
.stimme .wer strong{font-style:italic}
.stimme .wer span{display:block;font-style:italic}

/* ---------- Verlagshaus --------------------------------------------------- */
.verlagshaus{background:#fff;padding:80px 0}
.verlagshaus h2{font-size:44px;color:var(--orange);margin:0 0 22px}
.verlagshaus p{max-width:900px}
.dreibild{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:40px 0 0}
.dreibild img{width:100%;height:190px;object-fit:cover;filter:grayscale(1)}
.dreibild img:nth-child(2){border-radius:50%}
.ansprache{text-align:center;padding:56px 0 0}
.ansprache a{font-size:34px;font-family:var(--nav);color:var(--orange);text-decoration:underline;text-underline-offset:8px}

/* ---------- Galerien ------------------------------------------------------ */
.galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;margin:0 0 34px}
.galerie img{width:100%;height:200px;object-fit:contain;background:#fff;border:1px solid var(--linie);
  padding:8px;cursor:zoom-in;transition:border-color .2s,transform .2s,box-shadow .2s}
.galerie img:hover,.galerie img:focus-visible{border-color:var(--orange);transform:translateY(-3px);
  box-shadow:0 8px 22px rgba(0,0,0,.13)}
.galerie.hoch img{height:280px}
/* Einzelnes grosses Bild, das sich ebenfalls vergroessern laesst */
.galerie.einzeln{grid-template-columns:1fr;max-width:900px}
.galerie.einzeln img{height:auto;max-height:520px;object-fit:contain;padding:0;background:#fff}
/* Zwei Bilder nebeneinander, formatfuellend beschnitten */
.galerie.zwei{grid-template-columns:repeat(2,1fr);max-width:900px}
.galerie.zwei img{height:260px;object-fit:cover;padding:0}
@media (max-width:560px){.galerie.zwei{grid-template-columns:1fr}.galerie.zwei img{height:200px}}

/* Lupenzeichen in der Ecke, damit erkennbar ist, dass sich das Bild oeffnen laesst */
.galerie{position:relative}
.bildhuelle{position:relative}
.bildhuelle::after{content:"";position:absolute;right:12px;bottom:12px;width:30px;height:30px;
  border-radius:50%;background:rgba(36,36,52,.72) no-repeat center/15px 15px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 L21 21'/%3E%3Cpath d='M10.5 7.5v6M7.5 10.5h6'/%3E%3C/svg%3E");
  opacity:0;transition:opacity .2s;pointer-events:none}
.bildhuelle:hover::after,.bildhuelle:focus-within::after{opacity:1}

/* ---------- Bildvergroesserung -------------------------------------------- */
.lupe{position:fixed;inset:0;z-index:80;background:rgba(18,18,28,.94);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s}
.lupe.offen{opacity:1;visibility:visible}
.lupe-buehne{flex:1;display:flex;align-items:center;justify-content:center;padding:70px 76px 10px;min-height:0}
.lupe-buehne img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  border-radius:3px;box-shadow:0 12px 50px rgba(0,0,0,.5);background:#fff}
.lupe-fuss{padding:14px 24px 26px;text-align:center;color:#fff;font-size:16px;line-height:1.5}
.lupe-fuss .zaehler{display:block;font-family:var(--nav);font-size:14px;opacity:.65;margin-top:6px}
.lupe button{position:absolute;background:rgba(255,255,255,.1);border:0;color:#fff;cursor:pointer;
  border-radius:6px;transition:background .2s}
.lupe button:hover{background:rgba(255,255,255,.24)}
.lupe .zu{top:16px;right:16px;width:48px;height:48px;font-size:30px;line-height:1}
.lupe .vor,.lupe .zurueck{top:50%;transform:translateY(-50%);width:52px;height:64px;font-size:26px;line-height:1}
.lupe .zurueck{left:12px}
.lupe .vor{right:12px}
.lupe button[hidden]{display:none}

@media (max-width:700px){
  .lupe-buehne{padding:64px 12px 6px}
  .lupe .vor,.lupe .zurueck{width:46px;height:56px;top:auto;bottom:76px;transform:none}
  .lupe .zurueck{left:14px}
  .lupe .vor{right:14px}
  .lupe-fuss{font-size:15px;padding:10px 18px 20px}
}
.werkliste{margin:0 0 44px;padding:0;list-style:none}
.werkliste li{margin:0 0 18px;padding:0 0 0 18px;border-left:3px solid var(--orange)}
.werkliste strong{font-family:var(--head)}

/* ---------- Video --------------------------------------------------------- */
.video{position:relative;aspect-ratio:16/9;background:#111;border-radius:3px;overflow:hidden;margin:0 0 20px}
.video video,.video iframe{width:100%;height:100%;border:0;display:block}
.videoklick{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;cursor:pointer;
  background-size:cover;background-position:center}
.videoklick::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:78px;height:78px;border-radius:50%;background:var(--orange);
  box-shadow:0 6px 24px rgba(0,0,0,.4)}
.videoklick::before{content:"";position:absolute;top:50%;left:50%;
  transform:translate(-38%,-50%);z-index:2;
  border-left:24px solid #fff;border-top:15px solid transparent;border-bottom:15px solid transparent}
.videoklick span{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.72);color:#fff;
  font-size:15px;line-height:1.4;padding:12px 16px;text-align:left}

/* ---------- Videokacheln fuer Hochformat-Kurzvideos -----------------------
   Kurzvideos auf YouTube lassen sich nicht einbetten. Statt eines Players
   steht hier eine Kachel, die in einem neuen Fenster oeffnet. Beim Aufruf
   der Seite werden dadurch keine Daten an Google uebertragen. */
.videokacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:22px;max-width:640px;margin:0 0 34px}
.videokachel{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  aspect-ratio:9/16;padding:24px 22px;border-radius:6px;overflow:hidden;
  text-decoration:none;color:#fff;transition:transform .22s,box-shadow .22s}
.videokachel::before{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(160deg,#2b2b3d 0%,#5d7ca5 55%,#8c9ce6 100%)}
.videokachel.hund::before{background:linear-gradient(160deg,#8a3d12 0%,#e8703a 55%,#f0a276 100%)}
.videokachel.katze::before{background:linear-gradient(160deg,#33405e 0%,#5d7ca5 55%,#8c9ce6 100%)}
.videokachel::after{content:"";position:absolute;top:50%;left:50%;z-index:1;
  transform:translate(-50%,-60%);width:74px;height:74px;border-radius:50%;
  background:rgba(255,255,255,.92) no-repeat center/26px 30px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28' fill='%23ff6005'%3E%3Cpath d='M3 1.5 L22 14 L3 26.5 Z'/%3E%3C/svg%3E");
  box-shadow:0 8px 30px rgba(0,0,0,.35);transition:transform .22s}
.videokachel:hover,.videokachel:focus-visible{transform:translateY(-4px);box-shadow:0 14px 34px rgba(0,0,0,.24)}
.videokachel:hover::after{transform:translate(-50%,-60%) scale(1.08)}
/* Liegt ein Coverbild vor, deckt es den Verlauf ab. Fehlt die Datei,
   entfernt sich das Bild selbst und der Verlauf bleibt sichtbar. */
.videokachel .cover{position:absolute;inset:0;z-index:1;width:100%;height:100%;
  object-fit:cover;border:0;padding:0}
.videokachel::after{z-index:3}
.videokachel span{position:relative;z-index:4;display:block;
  text-shadow:0 2px 10px rgba(0,0,0,.6)}
/* Dunkler Verlauf am unteren Rand, damit die Schrift auf jedem Untergrund lesbar bleibt */
.videokachel .schleier{position:absolute;left:0;right:0;bottom:0;height:62%;z-index:2;
  background:linear-gradient(to top,rgba(12,12,20,.88) 0%,rgba(12,12,20,.45) 55%,rgba(12,12,20,0) 100%);
  pointer-events:none}
.videokachel .art{font-family:var(--head);font-weight:700;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;opacity:.9;margin-bottom:8px}
.videokachel .titel{font-family:var(--head);font-weight:700;font-size:20px;line-height:1.3}
.videokachel .quelle{font-size:15px;margin-top:10px;opacity:.9;text-decoration:underline;text-underline-offset:4px}

@media (max-width:560px){
  .videokacheln{grid-template-columns:1fr;max-width:320px;gap:18px}
  .videokachel .titel{font-size:18px}
}

/* ---------- FAQ ----------------------------------------------------------- */
.faq{max-width:1080px;margin:0 auto;background:#fff;border:1px solid var(--linie);padding:24px}
.faq details{border-bottom:1px solid var(--linie)}
.faq details:last-child{border-bottom:0}
.faq summary{list-style:none;cursor:pointer;font-family:var(--head);font-weight:700;font-size:18px;
  padding:20px 46px 20px 18px;position:relative;color:var(--text)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:20px;top:50%;width:11px;height:11px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.faq details[open] summary{color:var(--orange)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .antwort{padding:0 18px 24px}
.faq .antwort p:first-child{margin-top:0}
.faq .antwort p:last-child{margin-bottom:0}

/* ---------- Aufruf-Block -------------------------------------------------- */
.cta{background:var(--lavendel);padding:80px 0}
.cta .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.cta .kicker2{font-family:var(--head);font-weight:700;color:var(--orange);font-size:18px;margin:0 0 12px}
.cta h2{font-size:34px;margin:0 0 20px}
.cta p{margin:0 0 26px}
.wechsler{position:relative;aspect-ratio:1024/684;overflow:hidden}
.wechsler img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s ease}
.wechsler img.an{opacity:1}

/* ---------- Abschluss ----------------------------------------------------- */
.abschluss{background:#fff;padding:70px 0;text-align:center}
.abschluss h2{font-family:var(--nav);font-weight:400;font-size:46px;margin:0 0 26px}
.teilen{display:flex;justify-content:center;gap:6px;flex-wrap:wrap}
.teilen a{width:34px;height:34px;border-radius:3px;display:grid;place-items:center;color:#fff;
  font-size:13px;font-weight:700;text-decoration:none;font-family:var(--nav)}

/* ---------- Rechtstexte --------------------------------------------------- */
.rechtstext{background:#fff;padding:70px 0 90px}
.rechtstext .wrap{max-width:900px}
.rechtstext h2{font-size:32px;margin:0 0 24px}
.rechtstext h3{font-size:24px;margin:38px 0 14px}
.rechtstext h4{font-size:19px;margin:28px 0 10px}
.rechtstext p{margin:0 0 16px}
.rechtstext ul,.rechtstext ol{margin:0 0 18px;padding-left:22px}
.rechtstext li{margin:0 0 8px}
.rechtstext table{border-collapse:collapse;width:100%;margin:0 0 20px}
.rechtstext th,.rechtstext td{border:1px solid var(--linie);padding:10px 12px;text-align:left;vertical-align:top}

/* ---------- Fuss ---------------------------------------------------------- */
.fuss{background:var(--footer);color:#fff;padding:70px 0 30px}
.fuss a{color:#fff;text-decoration:none}
.fuss a:hover{text-decoration:underline}
.fuss .spalten{display:grid;grid-template-columns:1fr 1fr 1fr;gap:48px}
.fuss .linie{height:1px;background:rgba(255,255,255,.5);margin-bottom:34px}
.fuss h4{font-family:var(--head);font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 10px;color:#fff}
.fuss h3{font-size:22px;margin:0 0 16px;color:#fff}
.fuss ul{list-style:none;margin:0;padding:0}
.fuss li{margin:0 0 10px}
.form label{display:block;margin:0 0 6px;font-size:17px}
.form label .pflicht{color:var(--orange)}
.form input,.form textarea{width:100%;padding:12px 14px;border:0;border-radius:2px;font:inherit;
  font-size:17px;margin:0 0 18px;background:#fff;color:var(--text)}
.form textarea{min-height:130px;resize:vertical}
.form button{background:var(--orange);color:#fff;border:0;border-radius:3px;padding:12px 26px;
  font:inherit;font-size:18px;font-weight:700;cursor:pointer}
.form button:hover{background:var(--orange-dunkel)}
.form .hinweis{font-size:14px;line-height:1.5;margin:0 0 16px;opacity:.85}
.form .hinweis a{text-decoration:underline}
.honig{position:absolute;left:-9999px}
.fuss .unten{border-top:1px solid rgba(255,255,255,.35);margin-top:44px;padding-top:22px;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:16px}

.nachoben{position:fixed;right:20px;bottom:20px;width:38px;height:38px;background:var(--orange);
  color:#fff;border-radius:3px;display:grid;place-items:center;text-decoration:none;
  opacity:0;pointer-events:none;transition:opacity .25s;z-index:30}
.nachoben.sichtbar{opacity:1;pointer-events:auto}

/* ---------- Einblenden beim Scrollen, ersetzt AOS ------------------------- */
.rein{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s ease}
.rein.da{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rein{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .wechsler img{transition:none}
}

/* ==========================================================================
   Umbruchpunkte
   ========================================================================== */

/* Tablet: drei Spalten werden zwei, bevor sie zu eng werden */
@media (max-width:1100px){
  .raster{grid-template-columns:repeat(2,1fr)}
  .kachel{padding:48px 40px}
  .kachel h3{font-size:25px}
  .leistungen{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:900px){
  .raster{grid-template-columns:1fr}
  .kachel{padding:44px 34px}
  .cta .wrap{grid-template-columns:1fr;gap:34px}
  .dreibild{grid-template-columns:1fr}
  .dreibild img{height:220px}
  .fuss .spalten{grid-template-columns:1fr;gap:38px}
  .burger{display:block}
  .kopf .nav{display:none}
  .verlagshaus h2{font-size:34px}
  .abschluss h2{font-size:32px}
  .zeigebild img{height:250px;max-width:280px;margin-top:-30px}
  .hero{min-height:auto}
  .hero .wrap{padding-top:130px;padding-bottom:110px}
  /* Schmale Schirme: der Text nutzt die volle Breite, deshalb deckt die
     Flaeche hier flaechig ab statt nur von links. */
  .hero-flaeche{background:linear-gradient(168deg,rgba(24,26,46,.84) 0%,
    rgba(24,26,46,.74) 40%,rgba(24,26,46,.62) 72%,rgba(24,26,46,.56) 100%)}
  .seitenkopf{padding:46px 0 40px}

  /* Smartphone: aus dem Balken wird ein schwebender Knopf ohne Platzbedarf */
  .mitlauf{left:auto;right:14px;top:14px;background:none;box-shadow:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;transform:translateY(-160%)}
  .mitlauf.sichtbar{transform:none}
  .mitlauf .wrap{padding:0;width:auto}
  .mitlauf .logo{display:none}
  .mitlauf .nav{display:none}
  .mitlauf .burger{display:grid;place-items:center;width:52px;height:52px;padding:0;
    background:var(--orange);border-radius:8px;color:#fff;font-size:24px;text-shadow:none;
    box-shadow:0 4px 16px rgba(0,0,0,.32)}
}

@media (max-width:700px){
  .leistungen{grid-template-columns:1fr}
  .galerie{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .galerie img{height:150px}
  .galerie.hoch img{height:210px}
}

/* Smartphone: Schriftgroessen, Abstaende und Tippflaechen */
@media (max-width:560px){
  body{font-size:17px}
  .wrap{padding:0 20px}

  .hero .wrap{padding-top:120px;padding-bottom:90px}
  .hero h1{font-size:27px;line-height:1.45}
  .kicker{font-size:17px}
  .hero .unter{font-size:16px}
  .marker{text-shadow:0 2px 12px rgba(18,20,36,.7),0 1px 3px rgba(18,20,36,.6)}

  .seitenkopf{padding:38px 0 32px}
  .seitenkopf p{font-size:18px}

  .zeigebild img{height:190px;max-width:210px;margin-top:-24px}

  .saeulen{padding:30px 0 60px}
  .kachel{padding:34px 26px}
  .kachel h3{font-size:22px;margin-bottom:14px}
  .kachel p{font-size:17px}

  .abschnitt{padding:52px 0}
  .abschnitt h2{font-size:28px}
  .plus{padding:50px 0 60px}
  .plus h3{font-size:24px}

  .stimme{padding:60px 0 90px}
  .stimme .karte{padding:22px 20px}
  .stimme blockquote{font-size:16px;line-height:1.55}
  .sterne{font-size:22px}
  .stimme .wer{padding-left:0}

  .verlagshaus{padding:60px 0}
  .verlagshaus h2{font-size:29px}
  .dreibild img{height:180px}
  .ansprache{padding-top:44px}
  .ansprache a{font-size:26px}

  .cta{padding:60px 0}
  .cta h2{font-size:28px}

  .abschluss{padding:54px 0}
  .abschluss h2{font-size:30px}

  .rechtstext{padding:50px 0 70px}
  .rechtstext h2{font-size:26px}
  .rechtstext h3{font-size:21px}

  .faq{padding:14px}
  .faq summary{font-size:17px;padding:18px 42px 18px 12px}
  .faq .antwort{padding:0 12px 20px}

  /* Tippflaechen auf Fingergroesse */
  .teilen{gap:10px}
  .teilen a{width:44px;height:44px;font-size:15px}
  .nachoben{width:44px;height:44px;right:14px;bottom:14px;
    background:rgba(36,36,52,.82);box-shadow:0 2px 10px rgba(0,0,0,.25)}
  .nav a{padding:16px;text-shadow:none}
  .kopf::before{height:150px;
    background:linear-gradient(to bottom,rgba(20,20,34,.74) 0%,rgba(20,20,34,.44) 55%,rgba(20,20,34,0) 100%)}

  .fuss{padding:56px 0 26px}
  .fuss .unten{flex-direction:column;gap:12px}

  /* Flachere Formuebergaenge, damit sie auf schmalen Schirmen nicht dominieren */
  .trenner-stufen{height:38px}
  .trenner-spitze{height:58px}
}

/* ---------- Druck --------------------------------------------------------- */
@media print{
  .kopf,.mitlauf,.menuefeld,.nachoben,.teilen,.form,.trenner,.cta{display:none}
  body{background:#fff;font-size:12pt}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt}
}