/*
 *   Important Information about this CSS File
 *
 * - Do not delete or rename this file, if you do not use it leave it blank (delete
 *   everything) and the file will be skipped when you enable Production Mode in
 *   the Global theme settings.
 *
 * - Read the _README file in this directory, it contains useful help and other information.
 */

/* Increase the body font size on small touch devices */
body {

}

/* =============================================================================
 *   Mobile Menu Toggle
 *   See your theme settings extensions for how to enable the menu toggle.
 *   These are example styles for the menu toggle menu, you can use these in the
 *   relevant responsive stylesheets as required. Modify to suit your design.
 * ========================================================================== */
/* The toggle link */
.at-mt .at-menu-toggle h2 {
  margin-bottom: 5px;
}

.at-mt .at-menu-toggle h2 a {
  background: #eee;
  border: 2px solid #ccc;
  padding: 2px 10px;
}

/* Menu items */
.at-mt .at-menu-toggle ul.menu li a {
  background: #eee;
  border-bottom: 1px solid #fff;
}

/* =============================================================================
 * Businesscard Styles
 * ========================================================================== */
.block-ansprechpartner-kontaktblock .vcardInfoBlock {
	padding: 2.5rem 5rem;
}

/* =============================================================================
 *  Breadcrumb
 * ========================================================================== */
#breadcrumb {
	display: none;
}

.view-content .views-row .grid-column {
  min-width: 100%;
}

/* =============================================================================
 *  Changes für Teaser und Marginalblock in single column view
 * ========================================================================== */

/* Überschreiben im einspaltigen (global.styles.css @2359) */
.paragraphs-item-marginalblock > .content > .paragraphs-items {
  display: inline; /* -> Marginalblock wird nun unter die Teaser gerückt nicht neben dran */
  vertical-align: top;
}

/* Teaser werden im einspaltigen View wieder auf die komplette Breite gebracht */
.one-sidebar .paragraphs-item-marginalblock .paragraphs-item-teaserblock .content-wrapper .grid-sizer,
.one-sidebar .paragraphs-item-marginalblock .paragraphs-item-teaserblock .content-wrapper .field-item {
  width: 100%;
}

/* 2x2 Teaser im einspaltigen View sollen nur 1 Feld breit sein -> löst Problem mit Lücke nach 2x2 Teaser */
.paragraphs-item-teaserblock .field-item.size-2x2,
.one-sidebar .paragraphs-item-teaserblock .field-item.size-2x2
 {
  width: 100%;
  height: 51.2rem;
}

.paragraphs-item-teaserblock .field-item .grid-column.size-2x2 .grid-content-wrapper {
  width: 100%;  /* hier muss die Breite wieder auf 100% gesetzt werden */
  left: initial;
}


/* hier wird ein 2x1 Teaser in einen 1x2 Teaser umgewandelt, weil im einspaltigen View sonst nur das Bild zu sehen ist */
/* -> Problem hier ist, dass die 2x1 Teaser ohne Bild nun eine Lücke angehängt bekommen */

 .paragraphs-item-teaserblock .field-item.size-2x1,
.one-sidebar .paragraphs-item-teaserblock .field-item.size-2x1
{
  width: 100%;
  height: 51.2rem;
}

 /* Im einspaltigen View zeigen die 2x1 Teaser den CTA block rechtsbündig an, weil left auf 50% gesetzt war */
.paragraphs-item-teaserblock .field-item.size-2x1 .grid-column .cta-block,
.paragraphs-items-field-marginalparagraph .field-item.size-2x1 .grid-column .cta-block {
  left: 0%;
}