/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
    Add your custom styles here
*/


/* ===== Ersti-ABC (Grid & Cards) ===== */
.ersti-hub{
  margin: 48px auto;         /* mehr Abstand oben/unten */
  max-width: 1100px;         /* optional etwas breiter */
}


.abc-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:20px;
}
@media (max-width: 1000px){ .abc-grid{ grid-template-columns:repeat(3, 1fr); } }
@media (max-width: 700px){  .abc-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 480px){  .abc-grid{ grid-template-columns:1fr; } }

.abc-card{
	position: relative;
  border-radius:14px;
  overflow:hidden;
  transition:box-shadow .2s ease, transform .2s ease;
	min-height: 200px;         /* feste Höhe */
  display: flex;             /* wichtig */
  flex-direction: column;    /* vertikale Ausrichtung */
  justify-content: flex-end;
	background-color: #FECDA3
}
/* Hintergrundbuchstabe */
.abc-card::before {
  content: attr(data-letter); /* Buchstabe aus HTML-Attribut (siehe unten) */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 9rem;               /* richtig groß */
  font-weight: 900;
  color: rgba(0, 0, 0, 0.05);    /* sehr hell / transparent */
  line-height: 1;
  pointer-events: none;          /* nicht anklickbar */
  user-select: none;
  z-index: 0;                    /* hinter allen anderen Elementen */
}

/* Vordergrund-Inhalt soll über dem Buchstaben liegen */
.abc-head,
.abc-body {
  position: relative;
  z-index: 1;
}
.abc-card:hover{ box-shadow:0 10px 28px rgba(0,0,0,.09); transform:translateY(-1px); }

/* Kopf: großer Buchstabe + kleines Wort */
.abc-head{
  width:100%;
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:baseline;
  gap:10px;
  padding:22px 20px;
  background:#fff;
  border:0;
  text-align:left;
  cursor:pointer;
}
.abc-letter{
  font-weight:800;
  font-size:3.8rem;
  line-height:1;
}
.abc-word{
  font-size: .85rem;
  opacity:.8;
  margin-top:.2rem;
}

/* Body (eingeklappt/ausgeklappt) */
.abc-body{
  border-top:1px solid rgba(0,0,0,.08);
  background:#fcfcfc;
  max-height:0;            /* animierbar */
  overflow:hidden;
  transition: max-height .5s cubic-bezier(.25,.8,.25,1);
	will-change: max-height;
}
.abc-body-inner{ padding:18px 20px; }
.abc-link a{ text-decoration:underline; }

/* Wenn offen: Card nimmt ganze Reihe ein (accordion-like) */
.abc-card.is-open{
  grid-column:1 / -1;  /* span über alle Spalten */
}