/* ==========================================================================
   dental-stb – Inhaltselemente (Etappe 3)
   Nutzt die Variablen aus main.css (:root).
   ========================================================================== */

/* Abschnitt -------------------------------------------------------------- */
.ce { padding-block: var(--section-y); }
.bg--surface { background: var(--c-surface); }
.bg--tint { background: var(--c-accent-tint); }
.bg--dark { background: var(--c-ink); color: var(--c-on-dark-soft); }
.bg--dark h1, .bg--dark h2, .bg--dark h3, .bg--dark .section-head__title { color: var(--c-on-dark); }
.bg--dark .eyebrow { color: var(--c-on-dark-accent); }
.bg--dark a:not(.btn) { color: var(--c-on-dark); }

.section-head { max-width: 780px; margin-bottom: 48px; }
.section-head__title { margin: 0; }
.section-head__intro { margin: 20px 0 0; font-size: 18px; color: var(--c-ink-soft); }
.bg--dark .section-head__intro { color: var(--c-on-dark-soft); }

.btn--light { background: var(--c-on-dark); color: var(--c-ink); }
.btn--light:hover { background: #fff; color: var(--c-ink); }
.btn--outline-light { border-color: var(--c-on-dark); color: var(--c-on-dark); }
.btn--outline-light:hover { background: var(--c-on-dark); color: var(--c-ink); }

.img-placeholder { display: flex; align-items: flex-end; padding: 24px; background: #DCE6E3; border-radius: var(--radius); min-height: 320px; }
.img-placeholder span { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: #3E5156; }

/* Hero ------------------------------------------------------------------- */
.ce--dentalstb_hero { padding-block: clamp(56px, 7vw, 96px); }
.hero { display: grid; gap: clamp(40px, 6vw, 80px); align-items: center; }
.hero--split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hero .section-head { margin-bottom: 0; }
.hero__text { display: flex; flex-direction: column; gap: 28px; }
.hero__lead { margin: 0; font-size: clamp(17px, 1.6vw, 19px); line-height: 1.6; color: var(--c-ink-soft); max-width: 540px; }
.bg--dark .hero__lead { color: var(--c-on-dark-soft); }
.hero__img { width: 100%; height: clamp(320px, 36vw, 496px); object-fit: cover; border-radius: var(--radius); }
.hero__img.img-placeholder { min-height: 0; }
.statements__img.img-placeholder { background: #E9E3D8; }
.statements__img.img-placeholder span { color: #5B5446; }
/* Unterseiten: Brotkrumen auf weißem Band, direkt darunter der Hero */
.breadcrumb-bar { background: var(--c-surface); }
.breadcrumb-bar + .ce--dentalstb_hero { padding-top: 40px; }

/* Kacheln ---------------------------------------------------------------- */
.tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tiles--4, .tiles--8 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tile { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 32px; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius); transition: border-color .15s, transform .15s; }
.bg--surface .tile { background: var(--c-ground); }
.tile:has(.tile__link):hover { border-color: var(--c-accent); transform: translateY(-2px); }
.tile__num { font-family: var(--f-display); font-size: 36px; line-height: 1; color: var(--c-accent); }
.tile__title { margin: 0; font-size: 20px; }
.tile__link { color: inherit; text-decoration: none; }
.tile__link::after { content: ""; position: absolute; inset: 0; } /* ganze Kachel klickbar */
.tile__text { margin: 0; font-size: 15px; color: var(--c-ink-soft); }
.tile__more { margin-top: auto; font-size: 14px; font-weight: 600; color: var(--c-accent); }
.tiles--numbered.tiles--4 .tile { min-height: 260px; }
.tiles--numbered .tile__num { font-size: 40px; }
/* Raster: Zellen mit durchgehenden 1-px-Linien, ohne Nummer */
.tiles--grid { gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); }
.tiles--grid .tile { gap: 12px; padding: 40px; min-height: 200px; background: var(--c-ground); border: 0; border-radius: 0; }
.bg--surface .tiles--grid .tile { background: var(--c-surface); }
.tiles--grid .tile__title { font-size: 21px; }
.tiles--grid .tile:has(.tile__link):hover { transform: none; background: var(--c-surface); }
.bg--surface .tiles--grid .tile:has(.tile__link):hover { background: var(--c-ground); }
.bg--dark .tile { background: rgba(255,255,255,0.04); border-color: #2E4A52; }
.bg--dark .tile__text { color: var(--c-on-dark-soft); }

/* Schritte --------------------------------------------------------------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.step { display: flex; flex-direction: column; gap: 12px; padding-top: 24px; border-top: 1px solid #C9C2B6; }
.step--first { border-top: 2px solid var(--c-accent); }
.step__num { font-family: var(--f-display); font-size: 22px; color: var(--c-accent); }
.step__title { margin: 0; font-size: 19px; }
.step__text { margin: 0; font-size: 15px; color: var(--c-ink-soft); }

/* FAQ -------------------------------------------------------------------- */
.faq { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(32px, 6vw, 80px); }
.faq__title { margin: 0; }
.faq__item { border-top: 1px solid var(--c-line); padding: 22px 0; }
.faq__item:last-child { border-bottom: 1px solid var(--c-line); }
.faq__question { cursor: pointer; font-size: 19px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 24px; }
.faq__question::-webkit-details-marker { display: none; }
.faq__question::after { content: "+"; font-family: var(--f-display); font-size: 28px; line-height: 1; color: var(--c-accent); transition: transform .2s; }
.faq__item[open] .faq__question::after { transform: rotate(45deg); }
.faq__answer { padding-top: 14px; font-size: 15.5px; color: var(--c-ink-soft); }
.faq__answer p:last-child { margin-bottom: 0; }

/* Leadmagnet ------------------------------------------------------------- */
.leadmagnet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 6vw, 80px); align-items: center; }
.leadmagnet .section-head { margin-bottom: 0; }
.leadmagnet__body { display: flex; flex-direction: column; gap: 24px; }
.leadmagnet__text { font-size: 17px; }
.leadmagnet__text p:last-child { margin-bottom: 0; }

/* Zitate ----------------------------------------------------------------- */
.quotes__title { text-align: center; margin-bottom: 48px; }
.quotes { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.quote { margin: 0; display: flex; flex-direction: column; gap: 20px; padding: 36px; background: var(--c-surface); border-radius: var(--radius); }
.bg--surface .quote { background: var(--c-ground); }
.quote__text { margin: 0; font-family: var(--f-display); font-style: italic; font-size: 23px; line-height: 1.4; color: var(--c-ink); }
.quote__author { font-size: 14px; color: var(--c-ink-soft); }

/* Ansprechpartner -------------------------------------------------------- */
.person { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.person__img { width: 100%; height: 380px; object-fit: cover; border-radius: var(--radius); }
.person__body { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.person__body .eyebrow { margin: 0; }
.person__quote { margin: 0; font-family: var(--f-display); font-style: italic; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.3; color: var(--c-ink); }
.person__name { margin: 0; font-size: 16px; }
.person__role { color: var(--c-ink-soft); }

/* Vertrauensleiste ------------------------------------------------------- */
.ce--dentalstb_trustbar { padding-block: 32px; }
.trustbar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; }
.trustbar__item { display: flex; flex-direction: column; gap: 4px; }
.trustbar__value { font-family: var(--f-display); font-size: 34px; line-height: 1.1; font-weight: 500; }
.trustbar__label { font-size: 13px; opacity: .85; }

/* Aussagen („Kennen Sie das?“) ------------------------------------------- */
.statements { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 6vw, 80px); }
.statements__img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; border-radius: var(--radius); }
.statements__body { display: flex; flex-direction: column; gap: 28px; justify-content: center; }
.statements__title { margin: 0; }
.statement { padding-bottom: 24px; border-bottom: 1px solid var(--c-line); }
.statement:last-child { border-bottom: 0; padding-bottom: 0; }
.statement__quote { margin: 0 0 6px; font-family: var(--f-display); font-style: italic; font-size: 26px; line-height: 1.3; color: var(--c-ink); }
.statement__answer { margin: 0; font-size: 15.5px; color: var(--c-ink-soft); }

/* Standard-Inhaltselemente von TYPO3 (Text, Text & Medien, Aufzählung …) --- */
#main .frame { padding-block: 48px; }
#main .frame > * { max-width: calc(820px + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
#main .frame ul:not([class]) { padding-left: 1.2em; }
#main .frame ul:not([class]) li::marker { color: var(--c-accent); }

/* Termine ---------------------------------------------------------------- */
.events { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.event { display: flex; flex-direction: column; gap: 10px; padding: 32px; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius); }
.bg--surface .event { background: var(--c-ground); }
.event__kicker { margin: 0; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--c-accent); }
.event__title { margin: 0; font-size: 20px; line-height: 1.35; }
.event__meta { margin: 0; font-size: 14px; color: var(--c-ink-soft); }
.event__teaser { margin: 0; font-size: 15px; color: var(--c-ink-soft); }
.event__facts { margin: 0; font-size: 14px; }
.event__more summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--c-accent); }
.event__text { padding-top: 10px; font-size: 15px; color: var(--c-ink-soft); }
.event__action { margin-top: auto; padding-top: 8px; }
.events__empty { margin: 0; padding: 28px 32px; border: 1px dashed #C9C2B6; border-radius: var(--radius); color: var(--c-ink-soft); max-width: 780px; }
.link-arrow { font-size: 15px; font-weight: 600; color: var(--c-accent); text-decoration: none; }
.link-arrow:hover { color: var(--c-ink); }
.bg--dark .event { background: rgba(255,255,255,0.04); border-color: #2E4A52; }
.bg--dark .event__teaser, .bg--dark .event__meta { color: var(--c-on-dark-soft); }

/* Kopf mit Link rechts (Team, Termine) ------------------------------------ */
.section-bar { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 40px; flex-wrap: wrap; margin-bottom: 48px; }
.section-bar .section-head { margin-bottom: 0; max-width: 900px; }
.section-bar__link { white-space: nowrap; }

/* Team ------------------------------------------------------------------- */
.team { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.team--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.team__person { display: flex; flex-direction: column; gap: 6px; }
.team__img { width: 100%; height: 320px; object-fit: cover; border-radius: var(--radius); margin-bottom: 8px; }
.team__img.img-placeholder { min-height: 0; background: #E3E9E7; }
.team__name { margin: 0; font-size: 18px; }
.team__name a { color: inherit; text-decoration: none; }
.team__role { margin: 0; font-size: 14px; color: var(--c-ink-soft); }

/* Blog (EXT:news) -------------------------------------------------------- */
#main .frame-type-news_pi1 > *, #main .frame-type-news_newsliststicky > * { max-width: calc(var(--container) + 2 * var(--gutter)); }
.news-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 32px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.news-card { position: relative; display: flex; flex-direction: column; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; transition: border-color .15s, transform .15s; }
.news-card:hover { border-color: var(--c-accent); transform: translateY(-2px); }
.news-card__img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.news-card__body { display: flex; flex-direction: column; gap: 12px; padding: 28px; flex: 1; }
.news-card__meta { margin: 0; font-size: 13px; color: var(--c-ink-soft); display: flex; gap: 12px; flex-wrap: wrap; }
.news-card__cat { font-weight: 600; color: var(--c-accent-dark); }
.news-card__title { margin: 0; font-size: 20px; }
.news-card__link { color: inherit; text-decoration: none; }
.news-card__link::after { content: ""; position: absolute; inset: 0; }
.news-card__teaser { margin: 0; font-size: 15px; color: var(--c-ink-soft); }
.news-card__more { margin-top: auto; font-size: 14px; font-weight: 600; color: var(--c-accent); }
.news-empty { margin: 0; padding: 28px 32px; border: 1px dashed #C9C2B6; border-radius: var(--radius); color: var(--c-ink-soft); max-width: 780px; }
.news-pagination { display: flex; justify-content: center; gap: 8px; list-style: none; padding: 0; margin: 48px 0 0; }
.news-pagination a, .news-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 12px; border: 1px solid var(--c-line); border-radius: var(--radius-pill); text-decoration: none; color: var(--c-ink); }
.news-pagination .is-current span { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-on-dark); }
.news-detail { max-width: 820px; margin-inline: auto; }
.news-detail__meta { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 20px; font-size: 14px; color: var(--c-ink-soft); }
.news-detail__title { font-size: clamp(36px, 4.5vw, 56px); margin-bottom: 24px; }
.news-detail__teaser { font-size: 20px; line-height: 1.55; color: var(--c-ink); margin-bottom: 32px; }
.news-detail__img { width: 100%; height: auto; border-radius: var(--radius); margin: 0 0 32px; }
.news-detail__text { font-size: 17px; }
.news-detail__text h2 { font-size: clamp(26px, 3vw, 34px); margin-top: 1.4em; }
.news-detail__text ul { padding-left: 1.2em; }
.news-detail__text li::marker { color: var(--c-accent); }
.news-detail__author { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--c-line); font-size: 14px; color: var(--c-ink-soft); }
.news-detail__back { margin-top: 32px; }

/* Responsiv -------------------------------------------------------------- */
@media (max-width: 1024px) {
  .tiles, .tiles--4, .tiles--8 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero--split, .leadmagnet, .faq, .person, .statements { grid-template-columns: 1fr; }
  .statements__img { min-height: 280px; }
  .person__img { height: 320px; max-width: 360px; }
  .news-grid, .events, .team, .team--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .tiles, .tiles--2, .tiles--4, .tiles--8 { grid-template-columns: 1fr; }
  .tile { padding: 24px; }
  .hero__img { height: 260px; }
  .news-grid, .events, .team, .team--3 { grid-template-columns: 1fr; }
  .tiles--grid .tile { padding: 28px; min-height: 0; }
  .team__img { height: 280px; }
}

/* Formulare (EXT:form) --------------------------------------------------- */
#main .frame-type-form_formframework > * { max-width: calc(760px + 2 * var(--gutter)); }
#main form h2 { font-size: clamp(28px, 3vw, 40px); margin-bottom: 28px; }
#main form .form-group { margin-bottom: 20px; }
#main form .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
#main form .row > * { width: auto; max-width: none; padding: 0; }
#main form label, #main form .form-label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; color: var(--c-ink); }
#main form input[type="text"], #main form input[type="email"], #main form input[type="tel"], #main form select, #main form textarea {
  width: 100%; min-height: 50px; padding: 12px 16px; font: inherit; font-size: 16px; color: var(--c-ink);
  background: var(--c-surface); border: 1px solid #C9C2B6; border-radius: var(--radius);
}
#main form textarea { min-height: 140px; resize: vertical; }
#main form input:focus, #main form select:focus, #main form textarea:focus { outline: 2px solid var(--c-accent); outline-offset: 1px; border-color: var(--c-accent); }
#main form .form-check, #main form .inputs-list .form-check { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; }
#main form .form-check label { font-weight: 400; margin: 0; }
#main form input[type="checkbox"], #main form input[type="radio"] { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--c-accent); flex-shrink: 0; }
#main form .required { color: var(--c-accent-dark); }
#main form .error .form-control, #main form .has-error input { border-color: #B3261E; }
#main form .error.help-block, #main form .help-block { font-size: 13px; color: #B3261E; margin-top: 6px; }
#main form .actions, #main form nav.form-navigation { margin-top: 28px; }
#main form button[type="submit"], #main form .btn-primary {
  display: inline-flex; align-items: center; min-height: 52px; padding: 0 30px; border: 0; border-radius: var(--radius-pill);
  background: var(--c-accent); color: #fff; font: inherit; font-weight: 600; font-size: 15px; cursor: pointer;
}
#main form button[type="submit"]:hover, #main form .btn-primary:hover { background: var(--c-accent-dark); }
@media (max-width: 640px) { #main form .row { grid-template-columns: 1fr; } }