/****************************************************************
 *
 * Theme Name: COMMON GROUND | 2017 Child
 * Theme URI: https://shared-training.space/
 * Description: Twenty Seventeen minimal Child Theme for CG
 * Author: Dennis Samson
 * Template: twentyseventeen
 * Text Domain: twenty-seventeen-child
 *
 ***************************************************************/


/* ============================================================
   MENÜ
   ============================================================ */

.site-header .menu-scroll-down .icon{
  display:none;
}


/* ============================================================
   FARBEN
   ============================================================ */

:root{
  --primary:#2A9D8F;
  --accent:#2A9D8F;

  --bg:#ffffff;
  --text:#111111;
  --muted:#6B7280;
  --border:#E5E7EB;

  --dark:#202020;
  --light:#f3f3f1;

  --footer-bg:#111111;
  --footer-text:#f5f5f5;
  --footer-link:#ffffff;
}


/* ============================================================
   BASIS
   ============================================================ */

html{
  -webkit-text-size-adjust:100%;
  hyphens:auto;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);

  font:400 16px/1.6 "Libre Franklin",
       system-ui,
       -apple-system,
       "Segoe UI",
       Roboto,
       Arial,
       sans-serif;
}


/* ============================================================
   LOKALE SCHRIFTEN
   ============================================================ */

@font-face{
  font-family:"Libre Franklin";
  font-style:normal;
  font-weight:400;
  font-display:swap;

  src:url("fonts/libre-franklin-v13-latin-ext-regular.woff2") format("woff2"),
      url("fonts/libre-franklin-v13-latin-ext-regular.woff") format("woff");
}

@font-face{
  font-family:"Libre Franklin";
  font-style:italic;
  font-weight:400;
  font-display:swap;

  src:url("fonts/libre-franklin-v13-latin-ext-italic.woff2") format("woff2"),
      url("fonts/libre-franklin-v13-latin-ext-italic.woff") format("woff");
}

@font-face{
  font-family:"Libre Franklin";
  font-style:normal;
  font-weight:700;
  font-display:swap;

  src:url("fonts/libre-franklin-v13-latin-ext-700.woff2") format("woff2"),
      url("fonts/libre-franklin-v13-latin-ext-700.woff") format("woff");
}


/* ============================================================
   TYPOGRAFIE & LINKS
   ============================================================ */

h1,
h2,
h3,
h4,
h5,
h6{
  color:var(--text);
  line-height:1.25;
  font-weight:700;
}

a{
  color:var(--primary);
  text-underline-offset:2px;
}


/* ============================================================
   SEITENTITEL
   LINKE STANDARD-SPALTE VON TWENTY SEVENTEEN
   ============================================================ */

.page .entry-header .entry-title,
.page .entry-header .entry-title a{
  font-size:1.7rem;
  line-height:1.2;

  font-weight:700;
  letter-spacing:.16em;

  text-transform:uppercase;

  -webkit-hyphens:none !important;
  -ms-hyphens:none !important;
  hyphens:none !important;

  word-break:normal !important;
  overflow-wrap:normal !important;
}


/* Türkise Linie unter dem Seitentitel */

.page .entry-header .entry-title::after{
  content:"";

  display:block;

  width:3.5rem;
  height:4px;

  margin-top:1.4rem;

  background:var(--primary);
}


/* ============================================================
   EINLEITUNG / FLIESSTEXT
   ============================================================ */

.cg-lead{
  margin-top:0;
  margin-bottom:1.5rem;

  font-size:1.25rem;
  line-height:1.55;
  font-weight:700;
}

.cg-copy{
  line-height:1.75;
}


/* ============================================================
   INHALTSABSCHNITTE
   ============================================================ */

.cg-block{
  margin-top:4.5rem;
}

.cg-block + .cg-block{
  margin-top:5rem;
}


/*
 * Kleine Abschnittsüberschriften:
 * volle dünne graue Linie ist bewusst Teil des Designs.
 */

.cg-block-title{
  margin:0 0 1.5rem;
  padding-bottom:.7rem;

  border-bottom:1px solid var(--border);

  font-size:.8rem;
  line-height:1.4;
  font-weight:700;
  letter-spacing:.17em;

  text-transform:uppercase;

  -webkit-hyphens:none;
  -ms-hyphens:none;
  hyphens:none;

  word-break:normal;
}


/* ============================================================
   RAUM-HEADLINES
   ============================================================ */

.cg-room-headline{
  margin:0 0 1.5rem;

  font-size:1.25rem;
  line-height:1.45;
  font-weight:700;

  -webkit-hyphens:none;
  -ms-hyphens:none;
  hyphens:none;
}


/* ============================================================
   HERVORHEBUNG MIT VERTIKALER TÜRKISER LINIE
   ============================================================ */

/*
 * WICHTIG:
 * .cg-highlight nur direkt auf einem Absatz (<p>) verwenden.
 * Nicht auf einem Gutenberg-Group-Block.
 */

p.cg-highlight{
  margin:2rem 0 0;
  padding:.55rem 0 .55rem 1.3rem;

  border-left:4px solid var(--accent);

  font-weight:700;
  line-height:1.55;

  background:transparent;
}

p.cg-highlight strong{
  font-weight:700;
}


/* ============================================================
   AUSSTATTUNG
   ============================================================ */

.cg-features{
  margin:0;
  padding:0;

  list-style:none;
}

.cg-features li{
  position:relative;

  margin:0;
  padding:.65rem 0 .65rem 1.3rem;

  border-bottom:1px solid var(--border);
}

.cg-features li::before{
  content:"";

  position:absolute;
  left:0;
  top:1.2rem;

  width:.4rem;
  height:.4rem;

  background:var(--primary);
}


/* ============================================================
   BILDER / GALERIEN / GRUNDRISS
   ============================================================ */

.cg-media{
  margin-top:2rem;
}

.cg-media img{
  display:block;

  width:100%;
  height:auto;

  -webkit-box-shadow:none !important;
  box-shadow:none !important;
}

.cg-media-caption{
  margin-top:.6rem;

  color:var(--muted);

  font-size:.78rem;
  line-height:1.5;
}


/* ============================================================
   KONTAKT / CALL TO ACTION
   ============================================================ */

.cg-contact{
  margin-top:5rem;
  padding:1.7rem;

  background:var(--light);
}

.cg-contact .cg-block-title{
  margin-top:0;
}

.cg-contact p:last-of-type{
  margin-bottom:1.5rem;
}

.cg-button{
  display:inline-block;

  padding:.8rem 1.3rem;

  background:#111111;
  color:#ffffff !important;

  font-size:.75rem;
  font-weight:700;
  letter-spacing:.1em;

  text-decoration:none !important;
  text-transform:uppercase;

  -webkit-box-shadow:none !important;
  box-shadow:none !important;

  -webkit-hyphens:none;
  -ms-hyphens:none;
  hyphens:none;
}

.cg-button:hover,
.cg-button:focus{
  background:var(--primary);
  color:#ffffff !important;

  -webkit-box-shadow:none !important;
  box-shadow:none !important;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media screen and (max-width:767px){

  .page .entry-header .entry-title,
  .page .entry-header .entry-title a{
    font-size:1.4rem;
  }

  .cg-lead{
    font-size:1.12rem;
  }

  .cg-room-headline{
    font-size:1.12rem;
  }

  .cg-block{
    margin-top:3.5rem;
  }

  .cg-block + .cg-block,
  .cg-contact{
    margin-top:4rem;
  }

}


/* ============================================================
   ÜBERNOMMENE KLASSEN AUS DEM BISHERIGEN CHILD THEME
   ============================================================ */

@media screen and (min-width:768px){

  .dt_nope{
    display:none !important;
  }

}

.std_space_buttom{
  margin-bottom:15px;
}


/* ============================================================
   FOOTER-SYMBOLE
   ============================================================ */

.footer-sspce{
  padding-right:10px;
}

.footer-symbol{
  width:30px;
}

a.footer-symbol:hover,
a.footer-symbol:active,
a.footer-symbol:focus{
  text-decoration:none !important;

  -webkit-box-shadow:none !important;
  box-shadow:none !important;
}

.widget a img{
  -webkit-box-shadow:none !important;
  box-shadow:none !important;

  background:none !important;
}

.widget a:hover img{
  background-color:transparent !important;
}


/* ============================================================
   FOOTER
   ============================================================ */

.site-footer{
  border-top:1px solid var(--border);

  background:var(--footer-bg);
  color:var(--footer-text);
}

#colophon > div:nth-child(1),
#colophon > div:nth-child(1) .widget{
  background:var(--footer-bg) !important;
  color:var(--footer-text) !important;
}

#colophon > div:nth-child(1) h1,
#colophon > div:nth-child(1) h2,
#colophon > div:nth-child(1) h3,
#colophon > div:nth-child(1) h4,
#colophon > div:nth-child(1) h5,
#colophon > div:nth-child(1) h6,
#colophon > div:nth-child(1) p,
#colophon > div:nth-child(1) li{
  color:var(--footer-text) !important;
}

#colophon > div:nth-child(1) a{
  color:var(--footer-link) !important;
  text-decoration:none;
}

#colophon > div:nth-child(1) a:hover{
  color:var(--accent) !important;
}