/* ========= Social Media – Seite (nur diese Page) ========= */
/* Datei: /wp-content/plugins/tmueller-site-framework/assets/css/tmueller-social-media.css */

:root{
  --sm-max: 1200px;
  --sm-gap: 28px;
  --sm-radius: 18px;
  --sm-shadow: 0 8px 18px rgba(0,0,0,.06);
  --sm-shadow-h: 0 12px 26px rgba(0,0,0,.10);
  --sm-text: #1f2937;       /* dunkelgrau */
  --sm-muted: #5b6774;      /* dezent */
  --sm-link: #0f766e;       /* grünlich */
  --sm-link-h: #0b5f58;
}

/* Seite einrahmen */
.sm-page{
  max-width: var(--sm-max);
  margin: 0 auto;
  padding: 28px 16px 0;
  color: var(--sm-text);
}

/* Kopf / Intro */
.sm-head h1{
  text-align:center;
  font-size: clamp(28px, 3.4vw, 40px);
  margin: 0 0 8px;
}
.sm-head p{
  text-align:center;
  color: var(--sm-muted);
  margin: 0;
}

/* Grid mit versetzten Kacheln */
.sm-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(260px,1fr));
  gap: var(--sm-gap);
  align-items:start;
  margin-top: 28px;
}

/* Card-Basis */
.sm-card{
  position:relative;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius: var(--sm-radius);
  box-shadow: var(--sm-shadow);
  padding: 18px 22px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.sm-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--sm-shadow-h);
}

/* farbige Akzentleiste rechts */
.sm-card::before{
  content:"";
  position:absolute;
  inset:0 0 0 auto;
  width:6px;
  border-radius: 0 var(--sm-radius) var(--sm-radius) 0;
  background: var(--accent, #3b82f6);
}
.sm-accent-blue{  --accent:#3b82f6; }   /* Blau  */
.sm-accent-red{   --accent:#ef4444; }   /* Rot   */
.sm-accent-green{ --accent:#10b981; }   /* Grün  */
.sm-accent-gray{  --accent:#94a3b8; }   /* Grau  */

/* Logo + Überschrift in einer Zeile */
.sm-row{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:8px;
}
.sm-logo{
  width:46px; height:46px; object-fit:contain;
  border-radius:10px; background:#f6f7f8;
}
.sm-card h3{
  margin:0;
  font-size:18px;
  line-height:1.2;
}

/* Links */
.sm-links{ list-style:none; margin:6px 0 0 58px; padding:0; }
.sm-links li{ margin:4px 0; }
.sm-links a{
  color: var(--sm-link);
  text-decoration:none;
  border-bottom:1px dashed rgba(15,118,110,.35);
}
.sm-links a:hover{ color: var(--sm-link-h); border-bottom-color:transparent; text-decoration:underline; }

/* Versatz (stagger) nur auf großen Screens */
@media (min-width: 1025px){
  .sm-card:nth-child(3n+2){ margin-top: 22px; }
  .sm-card:nth-child(3n+3){ margin-top: 44px; }
}

/* 2-Spalten Layout auf Tablets */
@media (max-width: 1024px){
  .sm-grid{ grid-template-columns: repeat(2, minmax(260px,1fr)); }
  .sm-card{ margin-top:0 !important; }
}

/* 1 Spalte auf Handy */
@media (max-width: 640px){
  .sm-grid{ grid-template-columns: 1fr; }
  .sm-links{ margin-left:58px; }
}

/* „Danke“-Zeile über der Kontaktbox */
.sm-thanks{
  text-align:center;
  margin: 36px 0 10px;
  color: var(--sm-muted);
  font-style: italic;
}

/* Sicherheitsabstand zur Kontaktbox */
.sm-contact-gap{ height:6px; }

/* Deaktivierte Seiten ausblenden */
.is-hidden{ display:none !important; }