/* Nur #fragen: FAQ mit Einladungskarten-Überschrift, Fragen als weichen Karten und der Idee als Notizkarte.
   Zusammengeführt aus landing.css, hallmark.css und structure.css; von Claude überarbeitet. */
#fragen {
  --paper: #fcf8f5; --ink: #40323a; --muted: #725d68;
  --berry: #79364c; --line: #e5d5db; --rose-deep: #a14a67;
  --card: #fffdfc; --card-open: #fdf3f6; --card-line: #ecdce2; --card-line-open: #e5c2cf;
  --display: Cormorant, Georgia, serif; --body: Manrope, 'Segoe UI', sans-serif;
  position: relative; z-index: 1; display: block; width: 100%;
  padding-block: 96px 144px; margin-top: -40px; border-radius: 36px 36px 0 0;
  background: var(--paper); color: var(--ink); font: 16px/1.65 var(--body);
  -webkit-font-smoothing: antialiased;
}
#fragen { --faq-sprig: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 110' fill='none' stroke='%238c4b62' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 107C10 94 12 82 20 72' stroke-width='2.2'/%3E%3Cpath d='M20 72C30 60 44 56 52 44C59 34 60 24 68 14' stroke-width='1.5'/%3E%3Cpath d='M52 44C60 44 68 48 74 54M36 60C30 52 28 44 30 36M20 72C14 70 10 66 8 60' stroke-width='1.05'/%3E%3Cpath d='M40 58c8-6 17-6 22-2-7 6-16 7-22 2z' fill='%23ecd3dc' stroke-width='1'/%3E%3Cellipse cx='8' cy='57' rx='3' ry='4.6' transform='rotate(-20 8 57)' fill='%23f4cbd8' stroke='%23a65a77' stroke-width='1'/%3E%3Cellipse cx='70' cy='11' rx='3' ry='4.6' transform='rotate(35 70 11)' fill='%23f4cbd8' stroke='%23a65a77' stroke-width='1'/%3E%3Cg transform='translate(30 31) rotate(8) scale(1.55)' fill='%23f4cbd8' stroke='%23a65a77' stroke-width='0.71'%3E%3Cpath d='M0 0C-5-2.5-6-8-2.5-10L0-8.6L2.5-10C6-8 5-2.5 0 0Z' transform='rotate(0)'/%3E%3Cpath d='M0 0C-5-2.5-6-8-2.5-10L0-8.6L2.5-10C6-8 5-2.5 0 0Z' transform='rotate(72)'/%3E%3Cpath d='M0 0C-5-2.5-6-8-2.5-10L0-8.6L2.5-10C6-8 5-2.5 0 0Z' transform='rotate(144)'/%3E%3Cpath d='M0 0C-5-2.5-6-8-2.5-10L0-8.6L2.5-10C6-8 5-2.5 0 0Z' transform='rotate(216)'/%3E%3Cpath d='M0 0C-5-2.5-6-8-2.5-10L0-8.6L2.5-10C6-8 5-2.5 0 0Z' transform='rotate(288)'/%3E%3Ccircle r='2.2' fill='%23b9627f' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(76 57) rotate(-20) scale(1.1)' fill='%23f4cbd8' stroke='%23a65a77' stroke-width='1.00'%3E%3Cpath d='M0 0C-5-2.5-6-8-2.5-10L0-8.6L2.5-10C6-8 5-2.5 0 0Z' transform='rotate(0)'/%3E%3Cpath d='M0 0C-5-2.5-6-8-2.5-10L0-8.6L2.5-10C6-8 5-2.5 0 0Z' transform='rotate(72)'/%3E%3Cpath d='M0 0C-5-2.5-6-8-2.5-10L0-8.6L2.5-10C6-8 5-2.5 0 0Z' transform='rotate(144)'/%3E%3Cpath d='M0 0C-5-2.5-6-8-2.5-10L0-8.6L2.5-10C6-8 5-2.5 0 0Z' transform='rotate(216)'/%3E%3Cpath d='M0 0C-5-2.5-6-8-2.5-10L0-8.6L2.5-10C6-8 5-2.5 0 0Z' transform='rotate(288)'/%3E%3Ccircle r='2.2' fill='%23b9627f' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(58 24) rotate(40) scale(1.2)' fill='%23f4cbd8' stroke='%23a65a77' stroke-width='0.92'%3E%3Cpath d='M0 0C-5-2.5-6-8-2.5-10L0-8.6L2.5-10C6-8 5-2.5 0 0Z' transform='rotate(0)'/%3E%3Cpath d='M0 0C-5-2.5-6-8-2.5-10L0-8.6L2.5-10C6-8 5-2.5 0 0Z' transform='rotate(72)'/%3E%3Cpath d='M0 0C-5-2.5-6-8-2.5-10L0-8.6L2.5-10C6-8 5-2.5 0 0Z' transform='rotate(144)'/%3E%3Cpath d='M0 0C-5-2.5-6-8-2.5-10L0-8.6L2.5-10C6-8 5-2.5 0 0Z' transform='rotate(216)'/%3E%3Cpath d='M0 0C-5-2.5-6-8-2.5-10L0-8.6L2.5-10C6-8 5-2.5 0 0Z' transform='rotate(288)'/%3E%3Ccircle r='2.2' fill='%23b9627f' stroke='none'/%3E%3C/g%3E%3C/svg%3E"); --faq-corner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%238c4b62' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M66-2C56 8 47 14 38 18' stroke-width='1.7'/%3E%3Cpath d='M38 18C30 22 24 28 20 35' stroke-width='1.15'/%3E%3Cpath d='M46 13C49 20 50 26 48 32' stroke-width='1'/%3E%3Cpath d='M55 6c-5-5-11-5-15-1 5 3 10 4 15 1z' fill='%23ecd3dc' stroke-width='.9'/%3E%3Cellipse cx='19' cy='37' rx='2.6' ry='4' transform='rotate(35 19 37)' fill='%23f4cbd8' stroke='%23a65a77' stroke-width='.9'/%3E%3Cg transform='translate(33 21) rotate(15) scale(1.1)' fill='%23f4cbd8' stroke='%23a65a77' stroke-width='1.00'%3E%3Cpath d='M0 0C-5-2.5-6-8-2.5-10L0-8.6L2.5-10C6-8 5-2.5 0 0Z' transform='rotate(0)'/%3E%3Cpath d='M0 0C-5-2.5-6-8-2.5-10L0-8.6L2.5-10C6-8 5-2.5 0 0Z' transform='rotate(72)'/%3E%3Cpath d='M0 0C-5-2.5-6-8-2.5-10L0-8.6L2.5-10C6-8 5-2.5 0 0Z' transform='rotate(144)'/%3E%3Cpath d='M0 0C-5-2.5-6-8-2.5-10L0-8.6L2.5-10C6-8 5-2.5 0 0Z' transform='rotate(216)'/%3E%3Cpath d='M0 0C-5-2.5-6-8-2.5-10L0-8.6L2.5-10C6-8 5-2.5 0 0Z' transform='rotate(288)'/%3E%3Ccircle r='2.2' fill='%23b9627f' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(48 36) rotate(-20) scale(0.85)' fill='%23f4cbd8' stroke='%23a65a77' stroke-width='1.29'%3E%3Cpath d='M0 0C-5-2.5-6-8-2.5-10L0-8.6L2.5-10C6-8 5-2.5 0 0Z' transform='rotate(0)'/%3E%3Cpath d='M0 0C-5-2.5-6-8-2.5-10L0-8.6L2.5-10C6-8 5-2.5 0 0Z' transform='rotate(72)'/%3E%3Cpath d='M0 0C-5-2.5-6-8-2.5-10L0-8.6L2.5-10C6-8 5-2.5 0 0Z' transform='rotate(144)'/%3E%3Cpath d='M0 0C-5-2.5-6-8-2.5-10L0-8.6L2.5-10C6-8 5-2.5 0 0Z' transform='rotate(216)'/%3E%3Cpath d='M0 0C-5-2.5-6-8-2.5-10L0-8.6L2.5-10C6-8 5-2.5 0 0Z' transform='rotate(288)'/%3E%3Ccircle r='2.2' fill='%23b9627f' stroke='none'/%3E%3C/g%3E%3C/svg%3E"); }
#fragen, #fragen *, #fragen *::before, #fragen *::after { box-sizing: border-box; }
#fragen :is(p,h2,h3) { margin: 0; }
#fragen p { text-wrap: pretty; }
#fragen p:not([class]) { max-width: 65ch; }
#fragen :is(h2,h3) { min-width: 0; overflow-wrap: break-word; font-synthesis: none; text-wrap: balance; }
#fragen h2 { max-width: 30ch; font: 500 clamp(40px, 4.6vw, 64px)/1.06 var(--display); letter-spacing: -.035em; }
#fragen .headline-tail { font-style: normal; font-weight: inherit; color: inherit; }
/* Desktop: links Überschrift und darunter die Notizkarte, rechts die Fragen. Im Markup steht die Notiz hinter den
   Fragen, damit Lese- und Tab-Reihenfolge auf dem Handy (alles untereinander) zur Anzeige passen. */
#fragen .faq-layout { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.2fr); grid-template-areas: "head list" "note list"; grid-template-rows: auto 1fr; gap: 0 64px; width: min(1200px, calc(100% - 96px)); margin-inline: auto; }
#fragen .faq-layout > div:first-child { grid-area: head; }
#fragen .faq-list { grid-area: list; }
#fragen .provider-note { grid-area: note; align-self: start; }
#fragen .faq-layout > div > p { color: var(--muted); font-size: 16px; margin-top: 24px; }
#fragen a { color: inherit; text-decoration: none; text-underline-offset: 5px; touch-action: manipulation; }
#fragen a:hover { text-decoration: underline; }
#fragen :is(a,summary) { -webkit-tap-highlight-color: transparent; }
#fragen :focus-visible { outline: 2px solid var(--berry); outline-offset: 4px; }
#fragen svg { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#fragen .text-link { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding-block: 10px; font-size: 14px; font-weight: 600; line-height: 1.5; }
#fragen .text-link svg { width: 18px; height: 18px; flex: none; }

/* Überschrift wie bei Funktionen und Preise: „Was ihr noch“ als kleine, gesperrte Zeile, darunter groß
   „wissen möchtet.“ mit Verlauf von Beere zu Rosé und einem kleinen Kirschblütenzweig am Wortende (SVG in
   --faq-sprig). Vorgelesen wird weiterhin „Was ihr noch wissen möchtet.“ */
#fragen .faq-title-lead { display: block; margin-bottom: .9em; color: var(--rose-deep); font: 600 clamp(13px, .25vw + 11px, 15px)/1.4 var(--body); letter-spacing: .24em; text-transform: uppercase; }
#fragen .faq-title-word { position: relative; display: inline-block; font-size: clamp(42px, 4.8vw, 62px); line-height: 1; letter-spacing: -.01em; color: var(--berry); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  #fragen .faq-title-word { background: linear-gradient(100deg, #6e2f45 0%, #8f3f5b 45%, #b45a78 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
  #fragen .faq-title-word::selection { -webkit-text-fill-color: var(--paper); }
}
@media (forced-colors: active) { #fragen .faq-title-word { background: none; -webkit-text-fill-color: currentColor; } }
#fragen .faq-title-word::after { content: ""; position: absolute; left: calc(100% + .02em); bottom: .14em; width: .9em; aspect-ratio: 90 / 110; background: var(--faq-sprig) center / contain no-repeat; pointer-events: none; }

/* Die Idee als Notizkarte aus Papier: feiner Doppelrahmen und ein kleiner Kirschblütenzweig in der Ecke
   (SVG in --faq-corner). Auf dem Handy steht sie unter den Fragen. */
#fragen .provider-note { position: relative; margin-top: 48px; padding: 28px 28px 20px; border: 1px solid var(--card-line); border-radius: 18px; background: var(--card); box-shadow: 0 18px 40px -30px #79364c66; }
#fragen .provider-note::before { content: ""; position: absolute; inset: 6px; border: 1px solid #f1e4e9; border-radius: 13px; pointer-events: none; }
#fragen .provider-note::after { content: ""; position: absolute; top: 0; right: 0; width: 64px; aspect-ratio: 1; background: var(--faq-corner) right top / contain no-repeat; pointer-events: none; }
#fragen .provider-note h3 { max-width: 40ch; padding-right: 40px; font: 500 29px/1.2 var(--display); letter-spacing: -.025em; }
#fragen .provider-note p { font-size: 14px; line-height: 1.75; color: var(--muted); margin-block: 12px 6px; max-width: 44ch; }
#fragen .provider-note .text-link { position: relative; color: var(--berry); }

/* Fragen als weiche Karten: helle Karte mit runden Ecken und feinem Rand, links die Nummer in Cormorant (für
   Bildschirmleser ausgeblendet), rechts ein runder Knopf, dessen Plus sich beim Öffnen zum Kreuz dreht.
   Geöffnete Karten bekommen einen zarten Rosé-Ton. Natives details/summary; mehrere dürfen offen sein. */
#fragen .faq-list { display: grid; gap: 10px; align-content: start; counter-reset: faq; }
#fragen .faq-list details { counter-increment: faq; border: 1px solid var(--card-line); border-radius: 18px; background: var(--card); box-shadow: 0 1px 2px #40323a0a, 0 12px 28px -22px #79364c59; transition: background-color .2s, border-color .2s; }
#fragen .faq-list details:hover { border-color: var(--card-line-open); }
#fragen .faq-list details[open] { background: var(--card-open); border-color: var(--card-line-open); }
#fragen .faq-list summary { display: grid; grid-template-columns: 34px minmax(0, 1fr) 32px; align-items: center; gap: 12px; padding: 16px 16px 16px 18px; border-radius: 17px; cursor: pointer; list-style: none; font-size: 15px; font-weight: 600; line-height: 1.5; }
#fragen .faq-list summary::-webkit-details-marker { display: none; }
#fragen .faq-list summary::before { content: counter(faq, decimal-leading-zero); content: counter(faq, decimal-leading-zero) / ""; color: var(--rose-deep); font: 500 24px/1 var(--display); font-variant-numeric: lining-nums; }
#fragen .disclosure-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #f6e6ec; color: var(--berry); transition: transform .25s, background-color .2s, color .2s; }
#fragen .disclosure-icon svg { width: 16px; height: 16px; stroke-width: 2; }
#fragen .faq-list details[open] .disclosure-icon { transform: rotate(45deg); background: var(--berry); color: #fff; }
#fragen .faq-list details p { padding: 0 20px 20px 64px; font-size: 14.5px; line-height: 1.75; color: var(--muted); }
@media (max-width: 1050px) {
  #fragen .faq-layout { width: calc(100% - 64px); }
}
@media (max-width: 760px) {
  #fragen { padding-block: 64px 96px; }
  #fragen .faq-layout { width: calc(100% - 40px); grid-template-columns: minmax(0,1fr); grid-template-areas: "head" "list" "note"; grid-template-rows: auto; gap: 0; }
  #fragen .faq-layout > div > p { margin-top: 20px; }
  #fragen .faq-title-word { font-size: clamp(38px, 11vw, 52px); }
  #fragen .faq-list { margin-top: 32px; }
  #fragen .provider-note { margin-top: 28px; padding: 24px 20px 16px; }
  #fragen .provider-note h3 { font-size: 26px; }
  #fragen .faq-list summary { grid-template-columns: 26px minmax(0, 1fr) 30px; gap: 10px; padding: 14px 12px 14px 14px; font-size: 14px; }
  #fragen .faq-list summary::before { font-size: 20px; }
  #fragen .disclosure-icon { width: 30px; height: 30px; }
  #fragen .faq-list details p { padding: 0 14px 16px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  #fragen .disclosure-icon, #fragen .faq-list details { transition: none; }
}