/*
Theme Name: Belli GmbH
Template: hello-elementor
Author: Belli GmbH
Description: Eigenständiges Design für belligmbh.de. Aufgesetzt auf Hello Elementor.
Version: 1.0
*/

/* ---------- Projektschriften, lokal. Keine externen Aufrufe. ---------- */
@font-face{font-family:'Cabinet Grotesk';src:url('fonts/cabinet-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Cabinet Grotesk';src:url('fonts/cabinet-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('fonts/satoshi-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('fonts/satoshi-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('fonts/satoshi-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  --tinte:#1c1c1e;
  --tinte-weich:#454f5a;
  --linie:#e2e6ea;
  --papier:#ffffff;
  --flaeche:#f5f7f9;
  --akzent:#C4132C;
  --akzent-hell:#E8213D;
  --akzent-blass:#fdeef0;
  --radius:14px;
  --breite:1140px;
  --schrift:'Satoshi',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --schrift-display:'Cabinet Grotesk','Satoshi',-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}

body{
  font-family:var(--schrift);
  color:var(--tinte);
  background:var(--papier);
  font-size:1.0625rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

.site-main,main{max-width:var(--breite);margin:0 auto;padding:0 1.5rem}

/* ---------- Typografie ---------- */
h1,h2,h3,h4{
  font-family:var(--schrift-display);
  line-height:1.08;
  letter-spacing:-.025em;
  font-weight:800;
  color:var(--tinte);
  margin:0 0 .6em;
}
h3,h4{font-weight:700;letter-spacing:-.015em;line-height:1.15}
h1{font-size:clamp(2.1rem,5vw,3.4rem);margin-top:2.5rem}
h2{font-size:clamp(1.5rem,3vw,2.1rem);margin-top:3rem;padding-top:2rem;border-top:1px solid var(--linie)}
h3{font-size:1.2rem;margin-top:2rem;font-weight:700}
h1+.lead,h1+p{margin-top:-.3em}

p,li{color:var(--tinte-weich);max-width:68ch}
p{margin:0 0 1.1rem}

.lead{
  font-size:clamp(1.15rem,2.2vw,1.4rem);
  line-height:1.5;
  color:var(--tinte);
  font-weight:450;
  margin-bottom:2rem;
}

a{color:var(--akzent);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--akzent-hell)}

ul,ol{padding-left:1.2rem;margin:0 0 1.4rem}
li{margin-bottom:.5rem}
li strong{color:var(--tinte)}

hr{border:0;border-top:1px solid var(--linie);margin:3rem 0}

/* ---------- Schaltflächen ---------- */
.btn,a.btn{
  display:inline-block;
  background:var(--akzent);
  color:#fff;
  padding:.85rem 1.6rem;
  border-radius:var(--radius);
  font-weight:650;
  text-decoration:none;
  transition:background .15s ease,transform .15s ease;
}
.btn:hover,a.btn:hover{background:var(--akzent-hell);color:#fff;transform:translateY(-1px)}

/* Karten-Optik nur noch auf der Leistungsuebersicht, nicht auf der Startseite.
   Die Startseite bringt ihre eigenen Sektionen mit (siehe unten). */
.page-id-7 .karte{border-top:1px solid var(--linie)}

/* ---------- Team ---------- */
.team{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:1rem;
  margin:1.5rem 0 2.5rem;
}
/* Die Team-Karten werden weiter unten im Abschnitt "Ueber uns" definiert.
   Diese Stelle hielt frueher die alte, bildlose Fassung. */

/* ---------- FAQ ---------- */
.page-id-8 h2+h3,.page-id-9 h2+h3,.page-id-10 h2+h3,
.page-id-8 p+h3,.page-id-9 p+h3,.page-id-10 p+h3{
  border-top:1px solid var(--linie);
  padding-top:1.4rem;
}

/* ---------- Hinweisblock ---------- */
.hinweis{
  background:var(--flaeche);
  border-left:3px solid var(--linie);
  border-radius:0 8px 8px 0;
  padding:1rem 1.2rem;
  max-width:none;
}
.hinweis small{color:var(--tinte-weich);line-height:1.6;display:block}

/* ---------- Kopf und Fuß ---------- */
.site-header{
  border-bottom:1px solid var(--linie);
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(150%) blur(8px);
  position:sticky;
  top:0;
  z-index:50;
}
.site-header .site-branding,.site-header nav{padding:.4rem 0}
.site-header a{text-decoration:none;font-weight:600;color:var(--tinte)}
.site-header a:hover{color:var(--akzent)}

.site-footer{
  border-top:1px solid var(--linie);
  margin-top:5rem;
  padding:2.5rem 0;
  background:var(--flaeche);
  font-size:.94rem;
}
.site-footer a{color:var(--tinte-weich);text-decoration:none}
.site-footer a:hover{color:var(--akzent)}

/* ---------- Rechtstexte lesbar halten ---------- */
.page-id-19 h2,.page-id-20 h2{font-size:1.25rem;margin-top:2.2rem;padding-top:1.4rem}
.page-id-19 h3,.page-id-20 h3{font-size:1.05rem}
.page-id-19 p,.page-id-20 p{font-size:.98rem}

/* ---------- Dunkelmodus ---------- */
@media (prefers-color-scheme:dark){
  :root{
    --tinte:#eef1f4;
    --tinte-weich:#b3bcc6;
    --linie:#2a3038;
    --papier:#141416;
    --flaeche:#171c22;
    --akzent:#FF6B7D;
    --akzent-hell:#FF8A98;
    --akzent-blass:#2a1519;
  }
  .site-header{background:rgba(16,20,24,.92)}
  .btn,a.btn{color:#08110f}
  .btn:hover,a.btn:hover{color:#08110f}
}

/* ---------- Mobil ---------- */
@media (max-width:640px){
  body{font-size:1rem}
  .site-main,main{padding:0 1.1rem}
  h2{margin-top:2.2rem;padding-top:1.5rem}
  .team{grid-template-columns:1fr}
}

/* ---------- Doppelte Seitentitel unterdrücken ----------
   Jede Seite bringt ihr H1 im Inhalt mit, der Theme-Titel wäre eine Dublette. */
.page .page-header,
.page .entry-header,
.page h1.entry-title,
.page h1.page-title{
  display:none;
}
/* Beiträge behalten ihren Theme-Titel, dort steht kein H1 im Inhalt. */
.single-post .entry-header,
.single-post h1.entry-title{
  display:block;
}

/* Kartenüberschriften: Link ohne Unterstreichung, ganze Karte wirkt anklickbar */
.page-id-6 h3 a,.page-id-7 h3 a{
  text-decoration:none;
  color:var(--tinte);
}
.page-id-6 h3 a:hover,.page-id-7 h3 a:hover{color:var(--akzent)}
.page-id-6 h3 a::after,.page-id-7 h3 a::after{
  content:" →";
  color:var(--akzent);
  font-weight:600;
}

/* ---------- Logo ----------
   Die Datei ist 4116x3213 und würde den Kopf sprengen. */
.site-header .custom-logo,
.site-header .site-logo img,
img.custom-logo{
  max-height:46px;
  width:auto;
  height:auto;
  object-fit:contain;
}
@media (max-width:640px){
  .site-header .custom-logo,img.custom-logo{max-height:36px}
}

/* ---------- Beitragsbilder ---------- */
.page .post-thumbnail,
.page-content>img:first-child,
article .post-thumbnail{
  margin:0 0 2.5rem;
}
.post-thumbnail img,
.wp-post-image{
  width:100%;
  height:auto;
  max-height:380px;
  object-fit:cover;
  border-radius:var(--radius);
  display:block;
}

/* ================= Startseite ================= */

/* Die Sektionen tragen die Trennlinie. Die Ueberschrift darin nicht noch einmal. */
.home .page-content > section > h2:first-child{
  border-top:0;
  padding-top:0;
  margin-top:0;
}

.home .page-content > section{
  padding-top:3.5rem;
  margin-top:3.5rem;
  border-top:1px solid var(--linie);
}
.home .page-content > section.hero{
  border-top:0;
  margin-top:0;
  padding-top:1rem;
}

/* ---------- Hero ---------- */
.hero h1{
  font-size:clamp(2.4rem,6vw,4.2rem);
  max-width:16ch;
  margin-bottom:.4em;
}
.hero .lead{max-width:52ch}

/* ---------- Drei Fragen: nummeriert, nicht gekachelt ---------- */
.frage-liste{counter-reset:frage;margin-top:2rem}
.frage{
  counter-increment:frage;
  display:grid;
  grid-template-columns:3.2rem 1fr;
  gap:0 1.4rem;
  padding:1.6rem 0;
  border-top:1px solid var(--linie);
}
.frage:first-child{border-top:0;padding-top:0}
.frage::before{
  content:counter(frage,decimal-leading-zero);
  grid-row:1 / span 3;
  font-family:var(--schrift-display);
  font-size:1.5rem;
  font-weight:800;
  color:var(--akzent);
  line-height:1.1;
  padding-top:.1em;
}
.frage h3{margin:0 0 .3rem;font-size:1.35rem}
.frage p{margin:0 0 .3rem;max-width:60ch}

/* ---------- Gegenrechnung: der Beweis ---------- */
.rechnung-vor{max-width:56ch;font-size:1.1rem}
.gegenrechnung{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--linie);
  border:1px solid var(--linie);
  border-radius:var(--radius);
  overflow:hidden;
  margin:2rem 0 1.6rem;
}
.posten{
  background:var(--papier);
  padding:1.8rem 1.6rem;
  display:flex;
  flex-direction:column;
  gap:.35rem;
}
.posten-label{
  font-size:.86rem;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--tinte-weich);
  text-transform:uppercase;
}
.posten-zahl{
  font-family:var(--schrift-display);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1;
  font-size:clamp(2rem,5vw,3.1rem);
}
.posten-schlecht .posten-zahl{color:var(--tinte)}
.posten-gut{background:var(--flaeche)}
.posten-gut .posten-zahl{color:var(--akzent)}
.posten-fuss{font-size:.9rem;color:var(--tinte-weich)}
.rechnung-fazit{font-size:1.1rem;max-width:60ch}
.rechnung-fazit strong{color:var(--akzent);font-weight:700}

/* ---------- Team-Argument: Fläche als Absatz ---------- */
.team-argument{
  background:var(--flaeche);
  border:1px solid var(--linie);
  border-radius:var(--radius);
  padding:2.2rem 2rem;
}
.team-argument h2{
  border-top:0;
  padding-top:0;
  margin-top:0;
  font-size:clamp(1.4rem,2.6vw,1.9rem);
  max-width:24ch;
}
.home .page-content > section.team-argument{border-top:1px solid var(--linie)}

/* ---------- Ablauf ---------- */
.ablauf{counter-reset:schritt;list-style:none;padding:0;margin-top:1.4rem}
.ablauf li{
  counter-increment:schritt;
  position:relative;
  padding-left:2.4rem;
  margin-bottom:.9rem;
}
.ablauf li::before{
  content:counter(schritt);
  position:absolute;
  left:0;
  top:.05em;
  width:1.6rem;
  height:1.6rem;
  border-radius:50%;
  background:var(--akzent);
  color:#fff;
  font-size:.85rem;
  font-weight:700;
  display:grid;
  place-items:center;
}

/* ---------- Hinweis ---------- */
.home .hinweis{margin-top:3rem}

/* ---------- Mobil ---------- */
@media (max-width:720px){
  .gegenrechnung{grid-template-columns:1fr}
  .karte{grid-template-columns:1fr;gap:.2rem}
  .frage{grid-template-columns:2.4rem 1fr;gap:0 1rem}
  .team-argument{padding:1.6rem 1.3rem}
}

/* ================= Über uns ================= */

.page-id-14 .page-content > section{
  padding-top:3.5rem;
  margin-top:3.5rem;
  border-top:1px solid var(--linie);
}
.page-id-14 .page-content > section.intro{border-top:0;margin-top:0;padding-top:1rem}
.page-id-14 .page-content > section > h2:first-child{border-top:0;padding-top:0;margin-top:0}

.team-vorspann{max-width:62ch;font-size:1.08rem}

/* Team-Raster: der Geschäftsführer größer, der Rest gleichwertig */
.team{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:1.6rem 1.4rem;
  margin-top:2.2rem;
}
.person{
  margin:0;
  display:flex;
  flex-direction:column;
}
.person img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  object-position:center 22%;
  border-radius:var(--radius);
  display:block;
  background:var(--flaeche);
}
.person figcaption{padding:.85rem .1rem 0}
.person h3{
  margin:0 0 .15rem;
  font-size:1.05rem;
  font-family:var(--schrift-display);
  font-weight:700;
  letter-spacing:-.01em;
}
.person .rolle{
  color:var(--akzent);
  font-weight:600;
  font-size:.9rem;
  margin:0;
}
.person p:not(.rolle){
  font-size:.95rem;
  margin:.6rem 0 0;
  max-width:none;
}

/* Geschäftsführer über zwei Spalten, Bild links, Text rechts */
.person-gross{
  grid-column:span 2;
  display:grid;
  grid-template-columns:minmax(160px,1fr) 1.35fr;
  gap:0 1.4rem;
  align-items:start;
}
.person-gross figcaption{padding:.1rem 0 0}

/* Grundsätze */
.grundsaetze{margin-top:1.4rem}
.grundsaetze li{margin-bottom:.65rem}
.grundsaetze strong{color:var(--tinte)}

/* TÜV-Block */
.zertifikat{
  display:grid;
  grid-template-columns:minmax(140px,200px) 1fr;
  gap:1.6rem;
  align-items:center;
}
.zertifikat img{width:100%;height:auto;display:block}
.zertifikat h2{border-top:0;padding-top:0;margin-top:0;font-size:1.4rem}
.zertifikat p{margin:0}

@media (max-width:820px){
  .person-gross{grid-column:span 2;grid-template-columns:1fr}
  .person-gross figcaption{padding-top:.85rem}
}
@media (max-width:560px){
  .team{grid-template-columns:1fr 1fr;gap:1.2rem 1rem}
  .person-gross{grid-column:span 2}
  .zertifikat{grid-template-columns:1fr;gap:1rem}
  .zertifikat img{max-width:180px}
}

/* Hello Elementor setzt figcaption kursiv. Fuer Teamkarten nicht gewollt. */
.person figcaption,.person figcaption *{font-style:normal}

/* ---------- Gesichterreihe auf der Startseite ---------- */
.gesichter{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
  margin:1.6rem 0 1.8rem;
}
.gesichter img{
  width:78px;
  height:78px;
  border-radius:50%;
  object-fit:cover;
  object-position:center 20%;
  background:var(--flaeche);
  border:2px solid var(--papier);
  box-shadow:0 0 0 1px var(--linie);
}

/* ---------- TÜV-Siegel ---------- */
.siegel{
  display:grid;
  grid-template-columns:minmax(120px,190px) 1fr;
  gap:1.6rem;
  align-items:center;
}
.siegel img{width:100%;height:auto;display:block}
.siegel p{margin:0}

@media (max-width:820px){
  .karte{grid-template-columns:minmax(110px,150px) 1fr;gap:.2rem 1.2rem}
  .karte-bild{grid-row:1 / span 2}
}
@media (max-width:560px){
  .karte{grid-template-columns:1fr;gap:.6rem}
  .karte-bild{grid-row:auto}
  .karte-bild img{aspect-ratio:16/9}
  .gesichter img{width:60px;height:60px}
  .siegel{grid-template-columns:1fr;gap:1rem}
  .siegel img{max-width:170px}
}

/* ================= Hero mit Bild ================= */

.home .page-content > section.hero{
  position:relative;
  isolation:isolate;
  margin:0 calc(50% - 50vw) 0;
  padding:clamp(3.5rem,9vw,7rem) calc(50vw - 50%) clamp(3rem,7vw,5.5rem);
  border-top:0;
  overflow:hidden;
  background:#0E1013;
}

.hero-bild{
  position:absolute;
  inset:0;
  z-index:-2;
}
.hero-bild img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 40%;
  display:block;
}
/* Leseschutz: links dunkel, nach rechts transparent, damit die Grafik sichtbar bleibt */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(100deg, rgba(14,16,19,.96) 0%, rgba(14,16,19,.9) 38%, rgba(14,16,19,.55) 62%, rgba(14,16,19,.35) 100%);
}

.hero-inhalt{max-width:var(--breite);margin:0 auto}

.hero-eyebrow{
  color:#FF8A98;
  font-weight:600;
  font-size:.9rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin:0 0 1rem;
}

.hero h1{
  color:#fff;
  font-size:clamp(2.5rem,6.4vw,4.6rem);
  line-height:1.02;
  max-width:15ch;
  margin:0 0 1rem;
}

.hero .lead{
  color:rgba(255,255,255,.82);
  max-width:48ch;
  font-size:clamp(1.05rem,1.8vw,1.3rem);
  margin-bottom:2rem;
}

.hero-aktionen{
  display:flex;
  flex-wrap:wrap;
  gap:.8rem;
  align-items:center;
  margin:0;
}
.btn-still{
  display:inline-block;
  padding:.85rem 1.5rem;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.35);
  color:#fff;
  text-decoration:none;
  font-weight:600;
  transition:border-color .15s ease,background .15s ease;
}
.btn-still:hover{
  border-color:#fff;
  background:rgba(255,255,255,.08);
  color:#fff;
}

@media (max-width:860px){
  .home .page-content > section.vertrauen{grid-template-columns:1fr;gap:1.2rem}
  .vertrauen-zahl{font-size:2.1rem}
}
@media (max-width:560px){
  .hero h1{max-width:none}
  .hero-aktionen{flex-direction:column;align-items:stretch}
  .hero-aktionen a{text-align:center}
}

@media (prefers-color-scheme:dark){
  .home .page-content > section.hero{background:#08090B}
}

/* ---------- Leistungen als Karten (ersetzt das fruehere Listenlayout) ---------- */
.leistungen-block h3{
  font-size:.86rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--tinte-weich);
  font-weight:600;
  margin:2.6rem 0 1rem;
  padding-top:1.2rem;
  border-top:1px solid var(--linie);
}
.karten{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.4rem;
}
a.karte{
  display:flex;
  flex-direction:column;
  text-decoration:none;
  color:inherit;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--flaeche);
  border:1px solid var(--linie);
  transition:border-color .18s ease, transform .18s ease;
  padding:0;
}
a.karte:hover{border-color:var(--akzent);transform:translateY(-2px)}
.karte-bild{display:block;overflow:hidden;background:var(--linie)}
.karte-bild img{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  display:block;
  transition:transform .3s ease;
}
a.karte:hover .karte-bild img{transform:scale(1.04)}
.karte-titel{
  display:block;
  font-family:var(--schrift-display);
  font-weight:700;
  font-size:1.1rem;
  letter-spacing:-.015em;
  line-height:1.25;
  color:var(--tinte);
  padding:1.1rem 1.2rem .35rem;
}
a.karte:hover .karte-titel{color:var(--akzent)}
.karte-titel::after{content:" \2192";color:var(--akzent)}
.karte-text{
  display:block;
  font-size:.95rem;
  color:var(--tinte-weich);
  line-height:1.55;
  padding:0 1.2rem 1.3rem;
}

@media (max-width:900px){ .karten{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .karten{grid-template-columns:1fr} .vertrauen-siegel img{width:120px} }

/* ---------- Vertrauensleiste, zweigeteilt ---------- */
.home .page-content > section.vertrauen{
  display:grid;
  grid-template-columns:1fr auto;
  gap:2.5rem;
  align-items:center;
}
.vertrauen-block{display:block}
.vertrauen-gesichter{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  margin-bottom:.8rem;
  text-decoration:none;
}
.vertrauen-gesichter img{
  width:56px;
  height:56px;
  border-radius:50%;
  object-fit:cover;
  object-position:center 20%;
  background:var(--flaeche);
  border:2px solid var(--papier);
  box-shadow:0 0 0 1px var(--linie);
  transition:transform .18s ease;
}
.vertrauen-gesichter:hover img{transform:translateY(-2px)}
.vertrauen-block .vertrauen-text{
  font-size:1rem;
  color:var(--tinte-weich);
  line-height:1.5;
  margin:0;
  max-width:44ch;
}
.vertrauen-block .vertrauen-text a{color:var(--akzent);text-decoration-thickness:1px}

/* TÜV-Siegel deutlich größer */
.vertrauen-siegel{text-align:right}
.vertrauen-siegel img{width:250px;height:auto}
.vertrauen-siegel a{display:inline-block;line-height:0}
.vertrauen-siegel .vertrauen-text{margin-top:.6rem;max-width:none}
.vertrauen-siegel .vertrauen-text a{color:var(--tinte-weich);text-decoration-color:var(--linie)}
.vertrauen-siegel .vertrauen-text a:hover{color:var(--akzent);text-decoration-color:currentColor}

@media (max-width:860px){
  .home .page-content > section.vertrauen{grid-template-columns:1fr;gap:2rem}
  .vertrauen-siegel{text-align:left}
  .vertrauen-siegel img{width:200px}
}
@media (max-width:560px){
  .vertrauen-gesichter img{width:46px;height:46px}
  .vertrauen-siegel img{width:170px}
}

/* Überschrift in der Vertrauensleiste */
.vertrauen-titel{
  font-family:var(--schrift-display);
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:-.015em;
  color:var(--tinte);
  margin:0 0 .3rem;
}
.vertrauen-siegel .vertrauen-titel{margin-top:.7rem}
.vertrauen-text strong{color:var(--tinte)}


/* ---------- Impressum ---------- */
.impressum-block{
  background:var(--flaeche);
  border:1px solid var(--linie);
  border-radius:var(--radius);
  padding:1.6rem 1.8rem;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1.2rem 2rem;
  margin:1.4rem 0 2.5rem;
}
.impressum-block p{margin:0;max-width:none;line-height:1.6}
.impressum-block strong{
  display:block;
  color:var(--tinte);
  font-family:var(--schrift-display);
  font-weight:700;
  font-size:.92rem;
  letter-spacing:.01em;
  margin-bottom:.15rem;
}
.page-id-18 h2{font-size:1.25rem;margin-top:2.4rem;padding-top:1.5rem}
.page-id-18 p{max-width:72ch}

/* Leistungsübersicht: CTA unten */
.leistungen-cta{margin-top:2.5rem}

/* ---------- Blogübersicht: an die tatsächliche Struktur angepasst ----------
   Hello Elementor gibt je Beitrag aus: h2.entry-title, a (mit Bild), p (Auszug). */
article.post{
  display:grid;
  grid-template-columns:minmax(200px,330px) 1fr;
  grid-template-rows:auto 1fr;
  column-gap:2rem;
  row-gap:.5rem;
  align-items:start;
  padding:2.2rem 0;
  border-top:1px solid var(--linie);
}
article.post:first-of-type{border-top:0;padding-top:.5rem}

/* Bildlink links über beide Zeilen */
article.post > a:has(img){
  grid-column:1;
  grid-row:1 / span 2;
  display:block;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--flaeche);
}
article.post > a > img{
  width:100%;
  aspect-ratio:16/11;
  object-fit:cover;
  display:block;
  max-height:none;
  transition:transform .3s ease;
}
article.post > a:hover > img{transform:scale(1.03)}

/* Titel und Auszug rechts */
article.post > .entry-title{
  grid-column:2;
  grid-row:1;
  font-size:1.4rem;
  line-height:1.18;
  margin:0;
  align-self:end;
}
article.post > .entry-title a{color:var(--tinte);text-decoration:none}
article.post > .entry-title a:hover{color:var(--akzent)}
article.post > p{
  grid-column:2;
  grid-row:2;
  margin:0;
  font-size:.98rem;
  max-width:62ch;
  align-self:start;
}

@media (max-width:720px){
  article.post{grid-template-columns:1fr;grid-template-rows:auto auto auto;row-gap:.7rem}
  article.post > a:has(img){grid-column:1;grid-row:1}
  article.post > .entry-title{grid-column:1;grid-row:2}
  article.post > p{grid-column:1;grid-row:3}
}

/* ================= Kontaktformular ================= */

.elementor-form,
.elementor-field-group,
.elementor-field-group input,
.elementor-field-group textarea,
.elementor-field-group select,
.elementor-field-label{
  font-family:var(--schrift) !important;
}

.elementor-form .elementor-field-group{margin-bottom:1.1rem}

/* Beschriftungen */
.elementor-field-group > .elementor-field-label{
  font-size:.92rem !important;
  font-weight:600 !important;
  color:var(--tinte) !important;
  margin-bottom:.35rem !important;
  letter-spacing:.005em;
}
.elementor-mark-required .elementor-field-label:after{
  color:var(--akzent) !important;
  margin-left:.25em;
}

/* Eingabefelder */
.elementor-field-group .elementor-field-textual{
  font-size:1rem !important;
  line-height:1.5 !important;
  color:var(--tinte) !important;
  background:var(--papier) !important;
  border:1px solid var(--linie) !important;
  border-radius:var(--rounded-sm,8px) !important;
  padding:.75rem .9rem !important;
  min-height:auto !important;
  box-shadow:none !important;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.elementor-field-group textarea.elementor-field-textual{
  min-height:150px !important;
  resize:vertical;
}
.elementor-field-group .elementor-field-textual::placeholder{color:var(--tinte-weich);opacity:.7}
.elementor-field-group .elementor-field-textual:hover{border-color:#c8cfd6 !important}
.elementor-field-group .elementor-field-textual:focus{
  border-color:var(--akzent) !important;
  box-shadow:0 0 0 3px var(--akzent-blass) !important;
  outline:none !important;
}

/* Absendeknopf im Seitenstil */
.elementor-form .elementor-button,
.elementor-form button[type=submit]{
  background-color:var(--akzent) !important;
  color:#fff !important;
  font-family:var(--schrift) !important;
  font-size:1rem !important;
  font-weight:650 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  border:0 !important;
  border-radius:var(--radius) !important;
  padding:.85rem 1.8rem !important;
  min-height:auto !important;
  width:auto !important;
  transition:background-color .15s ease, transform .15s ease;
}
.elementor-form .elementor-button:hover{
  background-color:var(--akzent-hell) !important;
  transform:translateY(-1px);
}
.elementor-form .elementor-button .elementor-button-content-wrapper{justify-content:center}
/* Knopf nicht über die volle Breite ziehen */
.elementor-form .elementor-field-type-submit{
  justify-content:flex-start;
  margin-top:.5rem;
}
.elementor-form .elementor-field-type-submit .elementor-field{width:auto !important;flex:0 0 auto}

/* Meldungen */
.elementor-message{
  font-family:var(--schrift) !important;
  font-size:.95rem !important;
  border-radius:var(--rounded-sm,8px);
  padding:.7rem .9rem;
  margin-top:.8rem;
}
.elementor-message.elementor-message-success{
  background:var(--flaeche);
  color:var(--tinte);
  border:1px solid var(--linie);
}
.elementor-message.elementor-message-danger{
  background:var(--akzent-blass);
  color:var(--akzent);
  border:1px solid var(--akzent);
}
.elementor-field-group .elementor-field-required .elementor-field-textual:invalid:not(:placeholder-shown){
  border-color:var(--akzent) !important;
}

@media (max-width:600px){
  .elementor-form .elementor-button{width:100% !important}
  .elementor-form .elementor-field-type-submit .elementor-field{width:100% !important}
}

@media (prefers-color-scheme:dark){
  .elementor-field-group .elementor-field-textual{
    background:var(--flaeche) !important;
    color:var(--tinte) !important;
  }
  .elementor-form .elementor-button{color:#0f0d0e !important}
}

/* Absendeknopf: Breite am Inhalt, nicht am Feld */
.elementor-form .elementor-field-group.elementor-field-type-submit{
  width:auto !important;
  max-width:none;
  flex-basis:auto !important;
  justify-content:flex-start !important;
}
.elementor-form .elementor-field-type-submit > .elementor-field,
.elementor-form .elementor-field-type-submit button{
  width:auto !important;
  flex:0 0 auto !important;
  max-width:none !important;
}
.elementor-form .elementor-button{
  display:inline-flex !important;
  width:auto !important;
  min-width:0 !important;
}
@media (max-width:600px){
  .elementor-form .elementor-field-type-submit > .elementor-field,
  .elementor-form .elementor-button{width:100% !important}
}

/* ---------- Kopfzeile: Logo und Menü auf einer Mittellinie ----------
   Hello Elementor richtet die Navigation oben aus, dadurch stand der
   Menütext 16px über der Logomitte. */
.site-header,
.site-header .header-inner{
  align-items:center !important;
}
.site-header .header-inner{
  display:flex;
  justify-content:space-between;
  gap:2rem;
}
.site-header .site-navigation,
.site-header nav,
.site-header .site-navigation-toggle-holder{
  display:flex !important;
  align-items:center !important;
  height:auto !important;
}
.site-header .site-navigation ul,
.site-header nav ul{
  display:flex;
  align-items:center;
  margin:0;
  padding:0;
  list-style:none;
}
.site-header .site-navigation li,
.site-header nav li{display:flex;align-items:center;margin:0}
.site-header .site-navigation a,
.site-header nav a{
  display:flex;
  align-items:center;
  padding:.5rem .9rem !important;
  line-height:1.2;
}
.site-header .site-branding,
.site-header .site-logo{
  display:flex;
  align-items:center;
}
.site-header .custom-logo-link{display:flex;align-items:center;line-height:0}

/* Fußzeile: Logo deutlich kleiner als im Kopf */
.site-footer img,
.site-footer .custom-logo,
footer img.custom-logo{
  max-height:34px !important;
  width:auto !important;
  height:auto !important;
}
.site-footer{align-items:center}
@media (max-width:600px){
  .site-footer img,
  .site-footer .custom-logo{max-height:28px !important}
}