/* Brief 08 (2026-11-11): the form, confirmation and thank-you pages below the tree (913–918, 772) in the light look.
   Every rule acts ONLY where the content column holds the new page head with the anchor "formular-kopf" (a Guidelines
   header written by golive/forms-lib.php formsHead()); none of the 78 redesigned pages carries that anchor, so they cannot
   change. The form plugin, its fields and the CRM widget stay as they are: only the shell around them is styled.
   Page types: A form page (head, back link, form card, two small cards #formular-hilfe), B widget page (head, back link,
   CRM widget at the grid width, the two small cards), C confirmation / thank-you (head, split card). */

/* ---- Page head: the one way back under the lead is a quiet text link in DGM primary, not a filled button (the page's
   primary action is the form's or the widget's own button). Tap target 44 px high. ---- */
#crm__widgets > #formular-kopf header div.shrink-0 { margin-top: 10px; }
#crm__widgets > #formular-kopf header div.shrink-0 > a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; border-radius: 0; background: none; box-shadow: none;
  color: #00abe3; font: 600 1rem/1.5 Theme-Font, Inter, sans-serif; text-decoration: underline; text-decoration-color: transparent;
  text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-color .2s;
}
#crm__widgets > #formular-kopf header div.shrink-0 > a:hover { background: none; color: #00abe3; box-shadow: none; text-decoration-color: currentColor; }
#crm__widgets > #formular-kopf header div.shrink-0 > a:focus-visible { background: none; color: #00abe3; outline: 2px solid #00abe3; outline-offset: 2px; border-radius: 4px; }
#crm__widgets > #formular-kopf header div.shrink-0 > a i { font-size: .875em; transition: transform .2s; }
#crm__widgets > #formular-kopf header div.shrink-0 > a:hover i { transform: translateX(-3px); }
@media (prefers-reduced-motion: reduce) { #crm__widgets > #formular-kopf header div.shrink-0 > a:hover i { transform: none; } }

/* ---- The content under the head: on the head's grid (1152 px), head to content 48 px at every width (the head brings
   24 px: header margin 16 + section padding 8). The page ends one section gap above the footer's content, as on the
   redesigned pages (footer padding 80 px at 1440 is most of it). ---- */
#crm__widgets:has(> #formular-kopf) > .cms__content { width: var(--h-grid); max-width: none; margin: 0 auto; padding: 16px 0 max(16px, calc(var(--s-gap) - 80px)); }
/* (the form's and the widget's frame bring 8 px of their own above, so head to card is 24 + 16 + 8 = 48 px) */
#crm__widgets:has(> #formular-kopf) > div:has(> article.dgm-venue-card) { padding-top: 24px; }
body:has(#crm__widgets > #formular-kopf) .dgm-page-shell footer { margin-top: 0; }
body:has(#crm__widgets > #formular-kopf) #crm__widgets { margin-bottom: 0; }

/* ---- A: the form's shell as the family card (840 px, centred, radius 16, hairline, padding 32 / 24 on phones, a very soft
   shadow). The form skin (typo3-form-tailwind4.css) sets its shell with !important, so these do too. Inputs, legends,
   checkboxes and error states keep the skin; the step button gets the exact DGM primary with a white label. ---- */
#crm__widgets:has(> #formular-kopf) .frame-type-form_formframework {
  max-width: 840px !important; margin: 0 auto !important; padding: 32px !important; border: 1px solid rgb(227 232 236) !important;
  border-radius: 16px !important; box-shadow: 0 1px 2px rgb(15 34 51 / .04), 0 10px 30px -18px rgb(15 34 51 / .2) !important;
}
#crm__widgets:has(> #formular-kopf) .frame-type-form_formframework > header { margin: 0 0 24px !important; padding: 0 0 16px !important; border-bottom-color: rgb(227 232 236) !important; }
#crm__widgets:has(> #formular-kopf) .frame-type-form_formframework > header::after { background: #00abe3 !important; }
#crm__widgets:has(> #formular-kopf) .frame-type-form_formframework > header h2 {
  color: #0f172a !important; font: 700 1.5rem/1.3 Heading-Font, Inter, sans-serif !important; letter-spacing: -.025em !important; overflow-wrap: break-word; hyphens: auto;
}
/* the site's layered rule (.cms__content .btn-primary, Tailwind @layer, !important) paints var(--primary-500), which is
   hsl(195 100% 45%) = #00ace6 on dgm.de, and on hover var(--primary-600); a layered !important beats any unlayered one, so
   the exact colours are set through those two tokens on the button itself */
#crm__widgets:has(> #formular-kopf) .frame-type-form_formframework .form-navigation .btn-primary { --primary-500: #00abe3; --primary-600: #007aa8; --primary-foreground: #fff; }
/* phones: 24 px from 480 px, 16 px below. At 24 px on a 390 px screen the fee select's chosen option ("1 - 25
   Mitarbeitende - 180 €", 210 px of text) was cut after "Mitarbeitende -"; 16 px keeps it whole down to 390 px. */
@media (max-width: 639.98px) { #crm__widgets:has(> #formular-kopf) .frame-type-form_formframework { padding: 24px !important; } }
@media (max-width: 479.98px) { #crm__widgets:has(> #formular-kopf) .frame-type-form_formframework { padding: 20px 16px 24px !important; } }
/* the work page shows the form through an "Insert records" element, whose frame adds 16 px each side on phones; the live
   pages have the form element itself (no such frame), so the prototype drops it to show the live widths */
#crm__widgets:has(> #formular-kopf) .frame-type-shortcut { margin: 0; padding: 0; }

/* ---- B: the CRM widget keeps the full grid width and its own layout (nothing inside it is touched). ---- */
/* Its frame holds a height reservation only until the widget's state is in the DOM (as about.css does for award-details):
   without it the two small cards and the footer jumped by the widget's full height when it mounted (CLS .29 to .41).
   The values stay below the widget's measured height in DE and EN at each width (≥1280: 741–771, 1024–1279: 971–1029,
   768–1023: 1212–1293, 640–767: 1285–1382, <640: 2056–2897), so nothing moves up when the reservation ends. */
#crm__widgets:has(> #formular-kopf) .frame-type-html:has(> custom-plugin-element[name="memberships-private-booking"]),
#crm__widgets:has(> #formular-kopf) .frame-type-html:has(> [role="status"][name="memberships-private-booking"]),
#crm__widgets:has(> #formular-kopf) .frame-type-html:has(> .custom-compiled-plugin-element[name="memberships-private-booking"]):not(:has(.custom-compiled-plugin-element__state)) { min-height: 2000px; }
@media (min-width: 640px) { #crm__widgets:has(> #formular-kopf) .frame-type-html:has(> custom-plugin-element[name="memberships-private-booking"]), #crm__widgets:has(> #formular-kopf) .frame-type-html:has(> [role="status"][name="memberships-private-booking"]), #crm__widgets:has(> #formular-kopf) .frame-type-html:has(> .custom-compiled-plugin-element[name="memberships-private-booking"]):not(:has(.custom-compiled-plugin-element__state)) { min-height: 1260px; } }
@media (min-width: 768px) { #crm__widgets:has(> #formular-kopf) .frame-type-html:has(> custom-plugin-element[name="memberships-private-booking"]), #crm__widgets:has(> #formular-kopf) .frame-type-html:has(> [role="status"][name="memberships-private-booking"]), #crm__widgets:has(> #formular-kopf) .frame-type-html:has(> .custom-compiled-plugin-element[name="memberships-private-booking"]):not(:has(.custom-compiled-plugin-element__state)) { min-height: 1190px; } }
@media (min-width: 1024px) { #crm__widgets:has(> #formular-kopf) .frame-type-html:has(> custom-plugin-element[name="memberships-private-booking"]), #crm__widgets:has(> #formular-kopf) .frame-type-html:has(> [role="status"][name="memberships-private-booking"]), #crm__widgets:has(> #formular-kopf) .frame-type-html:has(> .custom-compiled-plugin-element[name="memberships-private-booking"]):not(:has(.custom-compiled-plugin-element__state)) { min-height: 950px; } }
@media (min-width: 1280px) { #crm__widgets:has(> #formular-kopf) .frame-type-html:has(> custom-plugin-element[name="memberships-private-booking"]), #crm__widgets:has(> #formular-kopf) .frame-type-html:has(> [role="status"][name="memberships-private-booking"]), #crm__widgets:has(> #formular-kopf) .frame-type-html:has(> .custom-compiled-plugin-element[name="memberships-private-booking"]):not(:has(.custom-compiled-plugin-element__state)) { min-height: 720px; } }

/* ---- A and B: the two small cards directly under the form or widget (Exhibition section "Format cards" with the anchor
   formular-hilfe): 840 px, centred, 32 px below the form card or widget (measured); side by side from 700 px, stacked below; equal height; icon tile 40 px
   left, centred on the title's first line; title 17 px / 700, text 14.5 px; the cards are not links, so they do not lift. ---- */
#crm__widgets:has(> #formular-kopf) #formular-hilfe { max-width: 840px; margin: 24px auto 0; padding: 0; }
#crm__widgets:has(> #formular-kopf) #formular-hilfe > div { max-width: none; padding: 0; }
#crm__widgets:has(> #formular-kopf) #formular-hilfe > div > header { display: none; }
#crm__widgets:has(> #formular-kopf) #formular-hilfe .dgm-ex-card-grid { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; justify-items: stretch; gap: 16px; max-width: none; margin: 0; }
@media (min-width: 700px) { #crm__widgets:has(> #formular-kopf) #formular-hilfe .dgm-ex-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#crm__widgets:has(> #formular-kopf) #formular-hilfe .dgm-ex-card-grid__item, #crm__widgets:has(> #formular-kopf) #formular-hilfe .dgm-ex-card-grid__item > div { display: block; width: 100%; height: 100%; max-width: none; justify-self: stretch; }
#crm__widgets:has(> #formular-kopf) #formular-hilfe article {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; row-gap: 6px; align-content: start; height: 100%;
  padding: 20px 24px 22px; border: 1px solid rgb(227 232 236); border-radius: 16px; background: #fff;
  box-shadow: 0 1px 2px rgb(15 34 51 / .04), 0 10px 30px -18px rgb(15 34 51 / .2); transform: none; transition: none;
}
#crm__widgets:has(> #formular-kopf) #formular-hilfe article:hover { transform: none; border-color: rgb(227 232 236); box-shadow: 0 1px 2px rgb(15 34 51 / .04), 0 10px 30px -18px rgb(15 34 51 / .2); }
#crm__widgets:has(> #formular-kopf) #formular-hilfe article > div:first-child { grid-column: 1; grid-row: 1; width: 40px; height: 40px; border-radius: 10px; background: rgb(0 171 227 / .1); color: #00abe3; font-size: 16px; }
#crm__widgets:has(> #formular-kopf) #formular-hilfe article > h3 { grid-column: 2; grid-row: 1; align-self: start; margin: 0; padding-top: 7px; color: #0f172a; font: 700 1.0625rem/1.5 Heading-Font, Inter, sans-serif; letter-spacing: -.01em; overflow-wrap: break-word; hyphens: auto; }
#crm__widgets:has(> #formular-kopf) #formular-hilfe article > h3 + div { grid-column: 2; grid-row: 2; color: oklch(.446 .043 257.281); font-size: 14.5px; line-height: 23.5px; }
#crm__widgets:has(> #formular-kopf) #formular-hilfe article > h3 + div p { margin: 0; }
#crm__widgets:has(> #formular-kopf) #formular-hilfe article a { color: #00abe3; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: rgb(0 171 227 / .35); }
#crm__widgets:has(> #formular-kopf) #formular-hilfe article a:hover { color: #00abe3; text-decoration-color: currentColor; }

/* ---- C: the split card's text at 15 px (never under 14.5 px); mail addresses and phone numbers never wrap. ---- */
#crm__widgets:has(> #formular-kopf) .dgm-venue-card__body section.dgm-ex-root header h2 + div { font-size: 15px; line-height: 1.65; }
#crm__widgets:has(> #formular-kopf) :is(a[href^="mailto:"], a[data-mailto-token], a[href^="tel:"]) { white-space: nowrap; }

/* ---- Keyboard focus: a visible 2 px ring in DGM primary on every link and the step button of these pages (the card
   links showed no focus ring at all, the split card and the step button only the browser's thin dark one). ---- */
#crm__widgets:has(> #formular-kopf) :is(#formular-hilfe a, .dgm-venue-card__body a):focus-visible { outline: 2px solid #00abe3; outline-offset: 2px; border-radius: 3px; }
#crm__widgets:has(> #formular-kopf) .dgm-venue-card__body a.inline-flex:focus-visible { outline-offset: 3px; border-radius: 10px; }
#crm__widgets:has(> #formular-kopf) .frame-type-form_formframework .form-navigation .btn:focus-visible { outline: 2px solid #00abe3 !important; outline-offset: 3px !important; }

/* ---- Corrections after the design director's audit (2026-11-11) ---- */
/* 1. The required star of a checkbox label must not stand alone on a new line. The label is "… e.V. zu <span
   class="required">*</span>", so the break opportunity is the space before the star and no CSS can make that space
   unbreakable; text-wrap: pretty lets the browser avoid a one-word last line by carrying the last word down with the star
   (Chromium and Safari; Firefox ignores the property and wraps as before). */
#crm__widgets:has(> #formular-kopf) .frame-type-form_formframework .form-check-label { text-wrap: pretty; }
/* 3. The accent of the form skin (checkbox tick, field focus border and glow, the outline button of the summary step) in
   DGM primary instead of blue-500: the skin reads it from --dgm-form-accent, set here on the card; the two glows that the
   skin writes as fixed blue-500 values are repeated in #00abe3. Error states keep their red. */
#crm__widgets:has(> #formular-kopf) .frame-type-form_formframework { --dgm-form-accent: #00abe3; }
#crm__widgets:has(> #formular-kopf) .frame-type-form_formframework form input.form-check-input:focus { box-shadow: 0 0 0 4px rgb(0 171 227 / .18) !important; }
@supports not (color-mix(in oklab, black, white)) {
  #crm__widgets:has(> #formular-kopf) .frame-type-form_formframework form :is(.form-control, .form-select):focus { box-shadow: 0 0 0 4px rgb(0 171 227 / .18), 0 1px 2px rgba(2, 6, 23, .06) !important; }
}
/* 2. Phones (below 700 px): every link in the two small cards gets a tap height of 44 px. Each link becomes an inline block
   44 px high (23.5 px line + 10.25 px above and below), so its line grows to hold it and the tap areas of links on neighbouring lines cannot overlap; links on the
   same line stay apart by the " · " between them; short ones (AGB) are at least 44 px wide. The text stays as it is. */
@media (max-width: 699.98px) {
  #crm__widgets:has(> #formular-kopf) #formular-hilfe article a { display: inline-block; min-width: 44px; padding-block: 10.25px; line-height: 23.5px; text-align: center; vertical-align: middle;
    background-origin: content-box; background-clip: content-box; }
  /* (the site paints a light highlight under links as a background gradient; it stays on the text, not on the padding) */
}