/* Sammelblog auf grimmr.de
   Angelegt 16.09.2026, Auftrag 120.
   Gehoert zu stil.css und wird NACH stil.css geladen. Alle Farben, Schriften und
   Abstaende kommen aus den Variablen dort, hier steht nur, was der Blog zusaetzlich
   braucht: die Kartenliste, der Artikelrahmen und die Bausteine, die aus den
   Markenseiten mitkommen (Kaesten, Hinweise, Knoepfe).
   Bearbeitet wird diese Datei in
   01_Cockpit\02_Werkzeuge\Sammelblog\vorlagen\blog.css, nicht in website-v6.
   Sammelblog.bat kopiert sie beim naechsten Lauf wieder hinueber. */

/* ---------- Markenfarben, eine Stelle fuer alles ---------- */
:root{
  --m-gartenbike:#9BD64A;
  --m-t-raummacher:#a6f000;
  --m-stundenfreund:#B19A79;
  --m-omnigroove:#9d86ff;
}
.m-gartenbike{--m:var(--m-gartenbike);}
.m-t-raummacher{--m:var(--m-t-raummacher);}
.m-stundenfreund{--m:var(--m-stundenfreund);}
.m-omnigroove{--m:var(--m-omnigroove);}

/* ---------- Kopf der Uebersicht ---------- */
.sb-kopf{padding:44px 0 6px;}
.sb-kopf h1{font-size:clamp(2.1rem,5.2vw,3.2rem);margin-bottom:14px;}
.sb-kopf h1 em{color:var(--kupfer-hell);font-style:normal;}
.sb-kopf .sb-lead{color:var(--hell-2);font-size:1.06rem;max-width:62ch;}
.sb-zahl{margin-top:16px;font-size:.9rem;color:var(--hell-3);}

/* ---------- Die Kartenliste ---------- */
.sb-liste{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:18px;grid-template-columns:1fr;}
@media(min-width:760px){.sb-liste{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;}}
@media(min-width:1080px){.sb-liste{grid-template-columns:repeat(3,minmax(0,1fr));}}

.sb-karte{
  position:relative;overflow:hidden;display:flex;flex-direction:column;gap:12px;
  padding:clamp(22px,2.6vw,28px);border-radius:var(--radius);
  background:rgba(243,238,221,.045);border:1px solid var(--linie-2);
  transition:border-color 180ms var(--ease),transform 180ms var(--ease);
}
.sb-karte::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:var(--m,var(--kupfer-hell));}
@media(hover:hover) and (pointer:fine){
  .sb-karte:hover{border-color:var(--m,var(--kupfer-hell));transform:translateY(-3px);}
  .sb-karte:hover .sb-weiter .pfeil{transform:translateX(4px);}
}
.sb-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;}
.sb-marke{color:var(--m,var(--kupfer-hell));display:inline-flex;align-items:center;gap:8px;}
.sb-marke::before{content:"";width:20px;height:2px;background:currentColor;flex:none;}
.sb-datum{color:var(--hell-3);letter-spacing:.04em;text-transform:none;font-weight:500;}
.sb-karte h2{font-size:clamp(1.15rem,2.1vw,1.38rem);line-height:1.22;letter-spacing:-.02em;}
.sb-karte h2 a{color:var(--hell);text-decoration:none;}
.sb-karte h2 a::after{content:"";position:absolute;inset:0;}
@media(hover:hover) and (pointer:fine){.sb-karte h2 a:hover{color:var(--kupfer-glanz);}}
.sb-teaser{color:var(--hell-2);font-size:.96rem;line-height:1.55;}
.sb-weiter{margin-top:auto;padding-top:6px;display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:.94rem;color:var(--kupfer-hell);}
.sb-weiter .pfeil{transition:transform 180ms var(--ease);}
.sb-leer{color:var(--hell-3);padding:26px 0;}

/* ---------- Artikelseite ---------- */
.sb-artikel{padding:40px 0 80px;}
.sb-artikel .sb-schmal{width:min(100% - 40px,760px);margin-inline:auto;}
.sb-zurueck{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:.94rem;color:var(--hell-2);text-decoration:none;}
@media(hover:hover) and (pointer:fine){.sb-zurueck:hover{color:var(--kupfer-hell);}}
.sb-artikel h1{font-size:clamp(1.9rem,4.6vw,2.7rem);margin:18px 0 12px;}
.sb-herkunft{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
  padding:14px 18px;border-radius:var(--radius-sm);margin:0 0 6px;
  background:rgba(243,238,221,.05);border:1px solid var(--linie-2);
  border-left:3px solid var(--m,var(--kupfer-hell));
  font-size:.92rem;color:var(--hell-2);
}
.sb-herkunft a{color:var(--m,var(--kupfer-hell));font-weight:600;}
.sb-inhalt{margin-top:26px;}

/* Grundtypografie des uebernommenen Textes */
.sb-inhalt p,.sb-inhalt li{color:var(--hell-2);font-size:1.04rem;line-height:1.72;margin-bottom:15px;max-width:72ch;}
.sb-inhalt h2{font-size:clamp(1.35rem,2.8vw,1.7rem);margin:38px 0 12px;}
.sb-inhalt h3{font-size:clamp(1.1rem,2.2vw,1.3rem);margin:28px 0 10px;color:var(--hell);}
.sb-inhalt ul,.sb-inhalt ol{padding-left:24px;margin-bottom:18px;}
.sb-inhalt li{margin-bottom:8px;}
.sb-inhalt strong{color:var(--hell);}
.sb-inhalt a{color:var(--kupfer-hell);text-underline-offset:3px;}
.sb-inhalt em{font-style:italic;}
.sb-inhalt h1{display:none;}
.sb-inhalt blockquote{
  margin:24px 0;padding:16px 22px;border-left:3px solid var(--m,var(--kupfer-hell));
  background:rgba(243,238,221,.04);border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}
.sb-inhalt blockquote p:last-child{margin-bottom:0;}

/* Tabellen duerfen als einzige waagerecht rollen */
.sb-inhalt table{width:100%;border-collapse:collapse;margin:8px 0 20px;font-size:.96rem;}
.sb-inhalt th,.sb-inhalt td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--linie-2);color:var(--hell-2);vertical-align:top;}
.sb-inhalt th{color:var(--hell);font-weight:600;font-size:.86rem;letter-spacing:.06em;text-transform:uppercase;}
.sb-inhalt .rg-table-wrap,.sb-inhalt .tabelle-rollt{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:20px;}

/* Vorspann der Markenseiten */
.sb-inhalt .a-lead,.sb-inhalt .rg-lead,.sb-inhalt .article-lead{
  font-size:1.16rem;line-height:1.6;color:var(--hell);margin-bottom:24px;max-width:66ch;
}

/* Hinweis- und Warnkaesten der Markenseiten */
.sb-inhalt .rg-note,.sb-inhalt .rg-warn,.sb-inhalt .tipbox{
  padding:16px 20px;border-radius:var(--radius-sm);margin:22px 0;
  background:rgba(177,154,121,.10);border:1px solid rgba(177,154,121,.28);
  color:var(--hell-2);font-size:.98rem;
}
.sb-inhalt .rg-warn{background:rgba(201,114,72,.12);border-color:rgba(224,162,115,.34);}
.sb-inhalt .rg-note p:last-child,.sb-inhalt .rg-warn p:last-child,.sb-inhalt .tipbox p:last-child{margin-bottom:0;}

/* Was die Markenseiten am Ende anbieten */
.sb-inhalt .a-cta,.sb-inhalt .rg-cta,.sb-inhalt .article-cta,.sb-inhalt .cta-inline,.sb-inhalt .rg-related{
  margin:30px 0 0;padding:clamp(20px,2.6vw,28px);border-radius:var(--radius);
  background:rgba(243,238,221,.05);border:1px solid var(--linie-2);
  border-top:3px solid var(--m,var(--kupfer-hell));
}
.sb-inhalt .a-cta h2,.sb-inhalt .rg-cta h2,.sb-inhalt .article-cta h3,.sb-inhalt .rg-related h2{margin-top:0;font-size:1.22rem;}
.sb-inhalt .a-cta p:last-child,.sb-inhalt .rg-cta p:last-child{margin-bottom:0;}
.sb-inhalt .rg-related ul{margin-bottom:0;}
.sb-inhalt .a-btn,.sb-inhalt .btn,.sb-inhalt .btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:13px 22px;border-radius:100px;margin-top:12px;
  background:var(--kupfer);color:#fff;font-weight:600;text-decoration:none;border:1px solid transparent;
}
@media(hover:hover) and (pointer:fine){
  .sb-inhalt .a-btn:hover,.sb-inhalt .btn:hover,.sb-inhalt .btn-primary:hover{background:#b3603a;color:#fff;}
}
.sb-inhalt svg{width:20px;height:20px;display:inline-block;vertical-align:-3px;}

/* Der Hinweis unter dem Artikel */
.sb-fuss{
  margin-top:40px;padding:clamp(20px,2.6vw,26px);border-radius:var(--radius);
  background:rgba(12,29,20,.5);border:1px solid var(--linie-2);
  font-size:.95rem;color:var(--hell-2);
}
.sb-fuss p{margin-bottom:10px;}
.sb-fuss p:last-child{margin-bottom:0;}
.sb-fuss a{color:var(--kupfer-hell);font-weight:600;}

/* Nichts darf die Seite waagerecht aufziehen, Tabellen ausgenommen */
.sb-inhalt img,.sb-inhalt iframe{max-width:100%;height:auto;}
.sb-inhalt pre{overflow-x:auto;}