/* Blog-Archiv von devinkandelhard.de (Devin 07.11.2026): Artikel und Rechtstexte aus WordPress/Elementor, gleiche Adressen,
   Schrift und Farben der neuen Startseite (site.css). Eine Lesespalte, Bilder in voller Spaltenbreite. */
.blog{padding:70px 20px 110px}
.artikel{max-width:1140px;margin:0 auto;font-size:19px;line-height:1.7;color:var(--ink, #445662)}
/* Abschnitte wie bei Elementor: einspaltig in Lesebreite, mehrspaltig nebeneinander */
.abschnitt{max-width:820px;margin:0 auto}
.abschnitt.spalten{display:flex;justify-content:space-between;gap:40px;max-width:1140px}
.spalte{min-width:0}
.spalte h1{font-size:34px}
.artikel > h1{max-width:820px;margin-left:auto;margin-right:auto}
.artikel h1{margin:0 0 34px;font-size:40px;line-height:1.2}
.artikel h2{margin:2.1em 0 .6em;font-size:29px;line-height:1.3}
.artikel h3{margin:1.7em 0 .5em;font-size:23px;line-height:1.35}
.artikel h4,.artikel h5,.artikel h6{margin:1.5em 0 .4em;font-size:20px;line-height:1.4}
.artikel h2,.artikel h3{scroll-margin-top:90px}
.artikel p{margin:0 0 1em}
.artikel ul,.artikel ol{margin:0 0 1em;padding-left:1.3em}
.artikel li{margin-bottom:.35em}
.artikel a{color:#3b7d92;text-decoration:underline;text-decoration-color:#60A8BF;text-underline-offset:3px}
.artikel a:hover{color:#2d6274}
.artikel figure{margin:1.6em 0}
.artikel img{display:block;max-width:100%;height:auto;border-radius:10px}
.artikel figcaption{margin-top:8px;font-size:15px;color:#7b8a93}
.artikel blockquote{margin:1.4em 0;padding:4px 0 4px 22px;border-left:3px solid #60A8BF;color:#5d6d77}
.artikel table{width:100%;margin:1.4em 0;border-collapse:collapse;font-size:16px;line-height:1.5}
.artikel th,.artikel td{padding:10px 12px;border-bottom:1px solid #e3e7ea;text-align:left;vertical-align:top}
.artikel th{font-weight:700}
.artikel hr{margin:2em 0;border:0;border-top:1px solid #e3e7ea}

/* hervorgehobenes Wort in der Überschrift mit gezogenem Strich, wie auf der Startseite */
.unterstrich{color:#60A8BF;padding-bottom:.12em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 150' preserveAspectRatio='none'%3E%3Cpath d='M7.7,145.6C109,125,299.9,116.2,401,121.3c42.1,2.2,87.6,11.8,87.3,25.7' fill='none' stroke='%2360A8BF' stroke-width='9' stroke-linecap='round'/%3E%3C/svg%3E") left bottom / 100% .3em no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* Inhaltsverzeichnis */
.inhalt{margin:1.6em 0 2em;padding:22px 26px;border-radius:14px;background:#f2f6f8;font-size:17px;line-height:1.5}
.inhalt b{display:block;margin-bottom:10px;font-size:18px}
.inhalt ol{margin:0;padding-left:0;list-style:none}   /* die Überschriften tragen ihre Nummern oft schon selbst */
.inhalt li{margin-bottom:.4em}
.inhalt a{text-decoration:none}
.inhalt a:hover{text-decoration:underline}

/* Liste mit Häkchen */
.artikel .haken{list-style:none;padding:0}
.artikel .haken li{position:relative;padding-left:1.7em}
.artikel .haken li::before{content:"";position:absolute;left:0;top:.42em;width:1.05em;height:1.05em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2360A8BF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat}

/* Fragen zum Aufklappen */
.fragen{margin:1.4em 0}
.fragen details{border-bottom:1px solid #e3e7ea}
.fragen summary{position:relative;padding:14px 34px 14px 0;font-weight:700;cursor:pointer;list-style:none}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{content:"+";position:absolute;right:4px;top:10px;font-size:24px;font-weight:400;color:#60A8BF}
.fragen details[open] summary::after{content:"–"}
.fragen details > div{padding:0 0 14px}

/* Kopf läuft beim Scrollen mit (Devin 07.11.2026); „sticky“ geht hier nicht, weil html und body overflow-x:hidden haben */
.kopf{position:fixed;top:0;left:0;right:0}
body{padding-top:64px}

/* Bildkasten quer wie die Ansprechpartnerin: Bild links (oder rechts), Text daneben, Farben aus Elementor */
.bildkasten-quer{display:flex;gap:28px;align-items:flex-start;margin:1.4em 0;padding:24px;border-radius:15px;overflow:hidden}
.bildkasten-quer.rechts{flex-direction:row-reverse}
.artikel .bildkasten-quer img{min-width:0;margin:0;border-radius:6px}
.bk-titel{display:block;margin-bottom:12px;font-size:30px;line-height:1.2}
.bk-text{font-size:18px;line-height:1.6}
.bk-text p{margin:0 0 .6em}
.artikel video{display:block;width:100%;margin:1.4em 0;border-radius:10px;background:#000}

/* Kästen (Experten-Tipp, Schritte) und Bildkästen */
.kasten{margin:1.4em 0;padding:18px 22px;border-left:3px solid #60A8BF;border-radius:0 12px 12px 0;background:#f2f6f8}
.kasten b{display:block;margin-bottom:4px}
.kasten p:last-child{margin-bottom:0}
.bildkasten figcaption{font-size:16px;color:var(--ink, #445662)}
.artikel cite{display:block;margin-top:6px;font-size:15px;font-style:normal;color:#7b8a93}

/* Knöpfe und Video-Link */
.knopf-zeile{margin:1.6em 0}
.artikel .knopf{display:inline-block;padding:12px 22px;border-radius:8px;background:#60A8BF;color:#fff;font-weight:700;text-decoration:none}
.artikel .knopf:hover{background:#4f97ae;color:#fff}
.video-link a{font-weight:700}

/* Karten: Übersicht und „weitere Artikel“ */
.karten{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:22px;margin:1.6em 0}
.artikel .karte{display:block;border:1px solid #e3e7ea;border-radius:12px;overflow:hidden;color:var(--ink, #445662);text-decoration:none;background:#fff;transition:box-shadow .2s}
.artikel .karte:hover{box-shadow:0 8px 22px rgba(30, 40, 48, .10)}
.artikel .karte img{width:100%;aspect-ratio:16 / 9;object-fit:cover;border-radius:0}
.artikel .karte span{display:block;padding:12px 14px 14px;font-size:16px;line-height:1.4;font-weight:700}
.artikel .karte small{display:block;margin-top:6px;font-size:14px;font-weight:400;color:#7b8a93}
.blog-uebersicht .abschnitt{max-width:1140px}

/* Pakete (Firmenseite LinkedIn Agentur) */
.paket{margin:1em 0;padding:20px 22px;border:1px solid #e3e7ea;border-radius:12px}
.paket > b{display:block;font-size:20px;line-height:1.3}
.paket-preis{margin:.4em 0 .6em;font-size:24px;font-weight:700;color:#60A8BF}
.paket ul{margin:0}
.firmen-links{font-size:17px}

/* Rechtstexte etwas kleiner */
.blog-recht .artikel{font-size:17px}
.blog-recht .artikel h2{font-size:24px}
.blog-recht .artikel h3{font-size:20px}

@media (max-width:767px){
  .blog{padding:40px 16px 70px}
  .artikel{font-size:17px}
  .artikel h1{font-size:30px;margin-bottom:24px}
  .artikel h2{font-size:24px}
  .artikel h3{font-size:20px}
  .karten{grid-template-columns:minmax(0, 1fr)}
  .abschnitt.spalten{flex-direction:column;gap:0}
  .spalte{flex:1 1 auto !important}
  .inhalt{padding:18px 18px}
  .bildkasten-quer,.bildkasten-quer.rechts{flex-direction:column}
  .artikel .bildkasten-quer img{flex:none !important;width:100%}
  .bk-titel{font-size:24px}
}