/* Fotodesign Winklmeier – Fotografie-Seite: Angebote „Augenhöhe“ und „Einsatzbereit“ (Webseite 2026-10-28.1, Zusatzüberschrift 2026-10-28.2).
   Steht zwischen Bilderspirale und AGB-Kasten. Gestaltung wie die Werbeblätter: Marine-Kopf, Papier, Petrol-Fuß, Goldknopf.
   Beim Überfahren hebt sich nur die innere Karte (.fdw-ang-card); die äußere Hülle (.fdw-ang-offer) bleibt als Trefferfläche
   ruhig, damit am unteren Rand nichts flackert. */
#fdw-angebote {
  --ang-marine: #004062; --ang-petrol: #0b5d7c; --ang-ivory: #f2eee5; --ang-paper: #fffdf9; --ang-sand: #f4eee3;
  --ang-line: #e6dccb; --ang-gold: #d8b66b; --ang-gold-deep: #ac8149; --ang-bordeaux: #7a1f2b; --ang-aqua: #a6ece9;
  --ang-ink: #061821; --ang-text: #3f4f55; --ang-muted: #56666c;
  --ang-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --ang-sans: Manrope, "Segoe UI", Arial, sans-serif;
  --ang-ease: cubic-bezier(.2, .8, .2, 1);
  --ang-pad: clamp(22px, 3.2vw, 44px);
  interpolate-size: allow-keywords;
  box-sizing: border-box;
  margin: 0;
  padding: clamp(16px, 2.5vw, 36px) clamp(16px, 4vw, 70px) clamp(56px, 7vw, 104px);
  background: var(--ang-ivory);
  color: var(--ang-ink);
  font: 16px/1.65 var(--ang-sans);
}
#fdw-angebote *, #fdw-angebote *::before, #fdw-angebote *::after { box-sizing: border-box; }
#fdw-angebote .fdw-ang-in { max-width: 1240px; margin: 0 auto; }
#fdw-angebote .fdw-ang-head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(18px, 5vw, 80px); align-items: end; margin: 0 0 clamp(32px, 4.5vw, 58px); }
#fdw-angebote .fdw-ang-kicker { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; color: #7d5f28; font: 800 12px/1.4 var(--ang-sans); letter-spacing: .21em; text-transform: uppercase; }
#fdw-angebote .fdw-ang-kicker::before { content: ""; width: 34px; height: 1px; background: var(--ang-gold-deep); }
#fdw-angebote .fdw-ang-title { margin: 0; color: var(--ang-ink); font: 400 clamp(40px, 5vw, 72px)/1.02 var(--ang-serif); letter-spacing: -.03em; text-wrap: balance; }
#fdw-angebote .fdw-ang-title em { color: var(--ang-gold-deep); font-style: italic; }
#fdw-angebote .fdw-ang-lead { max-width: 44ch; margin: 0; color: var(--ang-muted); font-size: clamp(16px, 1.2vw, 18px); line-height: 1.65; }
#fdw-angebote .fdw-ang-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 2.6vw, 36px); max-width: 720px; margin: 0 auto; }
#fdw-angebote .fdw-ang-offer { display: flex; min-width: 0; }
#fdw-angebote .fdw-ang-card { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--ang-paper); box-shadow: 0 1px 0 rgba(6, 24, 33, .04), 0 26px 50px -32px rgba(0, 40, 62, .5); transition: transform .6s var(--ang-ease), box-shadow .6s var(--ang-ease); }
@media (min-width: 960px) {
  /* Kopf, Inhalt und Fuß beider Karten liegen auf gleicher Höhe. */
  #fdw-angebote .fdw-ang-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 0; max-width: none; }
  #fdw-angebote .fdw-ang-offer, #fdw-angebote .fdw-ang-card { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
  /* Ist bei einer Karte „Mehr erfahren“ offen, wird nur diese länger; die andere behält ihre Höhe. */
  #fdw-angebote .fdw-ang-grid:has(details[open]) { align-items: start; }
  #fdw-angebote .fdw-ang-grid:has(details[open]) .fdw-ang-offer, #fdw-angebote .fdw-ang-grid:has(details[open]) .fdw-ang-card { display: flex; }
}

/* Zusatzüberschrift „Drei Berufe. Ein Fotograf.“ mit den drei Berufen (Webseite 2026-10-28.2) */
#fdw-angebote .fdw-ang-usp { position: relative; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(18px, 4vw, 64px); align-items: center; margin: 0 0 clamp(32px, 4.5vw, 56px); padding: clamp(22px, 2.6vw, 34px) 0; border-top: 1px solid #b9ad99; border-bottom: 1px solid var(--ang-line); }
#fdw-angebote .fdw-ang-usp::before { content: ""; position: absolute; top: -1px; left: 0; width: 72px; height: 2px; background: var(--ang-gold-deep); }
#fdw-angebote .fdw-ang-usp-title { margin: 0; color: var(--ang-ink); font: 400 clamp(34px, 3.6vw, 54px)/1.04 var(--ang-serif); letter-spacing: -.02em; text-wrap: balance; }
#fdw-angebote .fdw-ang-usp-title em { color: var(--ang-gold-deep); font-style: italic; }
#fdw-angebote .fdw-ang-usp-sub { margin: 12px 0 0; color: var(--ang-bordeaux); font: 700 15.5px/1.5 var(--ang-sans); }
#fdw-angebote .fdw-ang-usp-list { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 22px; margin: 0; padding: 0; }
#fdw-angebote .fdw-ang-usp-list li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; align-items: start; margin: 0; padding: 0; }
#fdw-angebote .fdw-ang-usp-list li::before { content: none; }
#fdw-angebote .fdw-ang-usp-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; color: var(--ang-gold); background: linear-gradient(140deg, #00385a, var(--ang-petrol)); box-shadow: 0 0 0 1px rgba(216, 182, 107, .55), 0 10px 20px -12px rgba(0, 40, 62, .7); }
#fdw-angebote .fdw-ang-usp-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#fdw-angebote .fdw-ang-usp-list b { display: block; color: var(--ang-marine); font: 700 15.5px/1.35 var(--ang-sans); -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
#fdw-angebote .fdw-ang-usp-list span:not(.fdw-ang-usp-icon) { display: block; margin-top: 3px; color: var(--ang-text); font-size: 14px; line-height: 1.5; -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
@media (max-width: 1199px) { #fdw-angebote .fdw-ang-usp { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { #fdw-angebote .fdw-ang-usp-list { grid-template-columns: minmax(0, 1fr); } }

/* Kopf */
#fdw-angebote .fdw-ang-top { position: relative; overflow: hidden; padding: clamp(28px, 3.2vw, 44px) var(--ang-pad) clamp(40px, 3.8vw, 52px); color: #fff; background: linear-gradient(120deg, #00385a 0%, var(--ang-marine) 45%, var(--ang-petrol) 100%); }
#fdw-angebote .fdw-ang-badge { position: absolute; top: 18px; right: 18px; padding: 6px 11px 5px; border: 1px solid rgba(216, 182, 107, .65); border-radius: 999px; color: #f3e0b5; font: 800 12px/1 var(--ang-sans); letter-spacing: .22em; text-transform: uppercase; }
#fdw-angebote .fdw-ang-ckicker { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding-right: 64px; color: var(--ang-aqua); font: 800 12px/1.45 var(--ang-sans); letter-spacing: .2em; text-transform: uppercase; }
#fdw-angebote .fdw-ang-ckicker::before { content: ""; flex: 0 0 28px; height: 1px; background: var(--ang-gold); }
#fdw-angebote .fdw-ang-ctitle { margin: 0; color: #fff; font: 400 clamp(48px, 5.2vw, 78px)/.95 var(--ang-serif); letter-spacing: -.03em; }
#fdw-angebote .fdw-ang-sub { margin: 12px 0 0; color: var(--ang-gold); font: italic 400 clamp(20px, 1.9vw, 27px)/1.25 var(--ang-serif); }
/* Augenhöhe: Linie auf Augenhöhe, der Punkt wandert beim Überfahren */
#fdw-angebote .fdw-ang-offer--aug .fdw-ang-top::before { content: ""; position: absolute; left: var(--ang-pad); right: var(--ang-pad); bottom: 20px; height: 1px; background: linear-gradient(90deg, rgba(216, 182, 107, 0), rgba(216, 182, 107, .85) 22%, rgba(216, 182, 107, .85) 78%, rgba(216, 182, 107, 0)); }
#fdw-angebote .fdw-ang-offer--aug .fdw-ang-top::after { content: ""; position: absolute; left: 24%; bottom: 15px; width: 11px; height: 11px; border: 1.5px solid var(--ang-gold); border-radius: 50%; background: var(--ang-marine); box-shadow: 0 0 0 5px rgba(216, 182, 107, .12); transition: left 1.1s var(--ang-ease), box-shadow .6s; }
/* Einsatzbereit: Reflexstreifen wie an der Einsatzjacke, mit Lichtreflex beim Überfahren */
#fdw-angebote .fdw-ang-offer--ein .fdw-ang-top::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 15px; background: linear-gradient(180deg, #d8b66b 0 4px, #dfe7ea 4px 11px, #d8b66b 11px 15px); }
#fdw-angebote .fdw-ang-offer--ein .fdw-ang-top::after { content: ""; position: absolute; left: -30%; bottom: 0; width: 22%; height: 15px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .95), rgba(255, 255, 255, 0)); transform: skewX(-24deg); opacity: 0; }

/* Inhalt */
#fdw-angebote .fdw-ang-body { display: flex; flex-direction: column; gap: 22px; flex: 1; padding: clamp(24px, 3vw, 38px) var(--ang-pad) clamp(18px, 2vw, 24px); }
#fdw-angebote .fdw-ang-intro { margin: 0; color: var(--ang-ink); font-size: 16.5px; font-weight: 600; line-height: 1.6; }
#fdw-angebote .fdw-ang-orgs { margin: -8px 0 0; color: var(--ang-bordeaux); font: 800 12px/1.7 var(--ang-sans); letter-spacing: .15em; text-transform: uppercase; }
#fdw-angebote .fdw-ang-points, #fdw-angebote .fdw-ang-packages { list-style: none; margin: 0; padding: 0; }
#fdw-angebote .fdw-ang-points { display: grid; gap: 18px; }
#fdw-angebote .fdw-ang-points li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 15px; align-items: start; margin: 0; padding: 0; }
#fdw-angebote .fdw-ang-points li::before, #fdw-angebote .fdw-ang-packages li::before { content: none; }
#fdw-angebote .fdw-ang-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: var(--ang-gold-deep); background: var(--ang-sand); box-shadow: inset 0 0 0 1px #eadfca; }
#fdw-angebote .fdw-ang-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#fdw-angebote .fdw-ang-points h4, #fdw-angebote .fdw-ang-packages h4, #fdw-angebote .fdw-ang-fact h4 { margin: 0 0 3px; color: var(--ang-marine); font: 700 15.5px/1.35 var(--ang-sans); letter-spacing: 0; text-transform: none; }
#fdw-angebote .fdw-ang-points p, #fdw-angebote .fdw-ang-packages p, #fdw-angebote .fdw-ang-fact p { margin: 0; color: var(--ang-text); font-size: 15px; line-height: 1.6; }
#fdw-angebote .fdw-ang-quote { margin: 0; padding: 16px 20px; border: 0; border-left: 2px solid var(--ang-gold); background: var(--ang-sand); color: var(--ang-bordeaux); font: italic 400 clamp(20px, 1.7vw, 23px)/1.35 var(--ang-serif); }
#fdw-angebote .fdw-ang-price { display: grid; gap: 3px; padding-top: 18px; border-top: 1px solid var(--ang-line); }
#fdw-angebote .fdw-ang-label { margin: 0; color: var(--ang-bordeaux); font: 800 12px/1.5 var(--ang-sans); letter-spacing: .18em; text-transform: uppercase; }
#fdw-angebote .fdw-ang-price p:last-child { margin: 0; color: var(--ang-text); font-size: 15px; line-height: 1.6; }
#fdw-angebote .fdw-ang-packages li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 22px; align-items: start; margin: 0; padding: 16px 0; border-top: 1px solid var(--ang-line); }
#fdw-angebote .fdw-ang-packages li:first-child { padding-top: 2px; border-top: 0; }
#fdw-angebote .fdw-ang-amount { display: grid; justify-items: end; text-align: right; }
#fdw-angebote .fdw-ang-amount b { color: var(--ang-marine); font: 500 30px/1 var(--ang-serif); letter-spacing: -.01em; white-space: nowrap; }
#fdw-angebote .fdw-ang-amount small { margin-top: 5px; color: var(--ang-muted); font-size: 12px; line-height: 1.35; white-space: nowrap; }
#fdw-angebote .fdw-ang-amount--text b { font-size: 21px; font-style: italic; }

/* Mehr erfahren */
#fdw-angebote .fdw-ang-more { margin-top: auto; border-top: 1px solid var(--ang-line); }
#fdw-angebote .fdw-ang-more > summary { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 0; color: var(--ang-marine); font: 800 12px/1 var(--ang-sans); letter-spacing: .18em; text-transform: uppercase; list-style: none; cursor: pointer; }
#fdw-angebote .fdw-ang-more > summary::-webkit-details-marker { display: none; }
#fdw-angebote .fdw-ang-more > summary:focus-visible { outline: 3px solid #167b88; outline-offset: 4px; }
#fdw-angebote .fdw-ang-plus { position: relative; width: 26px; height: 26px; border: 1px solid rgba(0, 64, 98, .35); border-radius: 50%; transition: transform .45s var(--ang-ease), background .25s; }
#fdw-angebote .fdw-ang-plus::before, #fdw-angebote .fdw-ang-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; margin: -.75px 0 0 -5px; background: currentColor; }
#fdw-angebote .fdw-ang-plus::after { transform: rotate(90deg); }
#fdw-angebote .fdw-ang-more[open] .fdw-ang-plus { transform: rotate(45deg); background: var(--ang-sand); }
#fdw-angebote .fdw-ang-more::details-content { block-size: 0; overflow: hidden; transition: block-size .5s var(--ang-ease), content-visibility .5s allow-discrete; }
#fdw-angebote .fdw-ang-more[open]::details-content { block-size: auto; }
#fdw-angebote .fdw-ang-facts { display: grid; gap: 16px; padding: 4px 0 10px; }
#fdw-angebote .fdw-ang-fact { display: grid; gap: 2px; }
#fdw-angebote .fdw-ang-note { margin: 2px 0 0; padding: 12px 16px; background: var(--ang-sand); color: var(--ang-text); font-size: 14px; line-height: 1.55; }

/* Fuß */
#fdw-angebote .fdw-ang-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; padding: 22px var(--ang-pad); color: #e8f3f4; background: var(--ang-petrol); }
#fdw-angebote .fdw-ang-cta { display: inline-flex; align-items: center; gap: 16px; min-height: 52px; padding: 0 13px 0 20px; color: var(--ang-marine); background: var(--ang-gold); font: 800 12px/1 var(--ang-sans); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; transition: background .25s; }
#fdw-angebote .fdw-ang-cta span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; background: var(--ang-marine); font-size: 14px; letter-spacing: 0; transition: transform .35s var(--ang-ease); }
#fdw-angebote .fdw-ang-cta:focus-visible { outline: 3px solid var(--ang-aqua); outline-offset: 4px; }
#fdw-angebote .fdw-ang-fine { flex: 1 1 210px; margin: 0; color: rgba(232, 243, 244, .86); font-size: 13px; line-height: 1.5; }

@media (hover: hover) and (pointer: fine) {
  #fdw-angebote .fdw-ang-offer:hover .fdw-ang-card { transform: translateY(-6px); box-shadow: 0 1px 0 rgba(6, 24, 33, .04), 0 40px 70px -36px rgba(0, 40, 62, .6); }
  #fdw-angebote .fdw-ang-offer--aug:hover .fdw-ang-top::after { left: 70%; box-shadow: 0 0 0 7px rgba(216, 182, 107, .2); }
  #fdw-angebote .fdw-ang-offer--ein:hover .fdw-ang-top::after { animation: fdw-ang-glint 1.2s var(--ang-ease) both; }
  #fdw-angebote .fdw-ang-cta:hover { background: #e6c987; }
  #fdw-angebote .fdw-ang-cta:hover span { transform: translateX(4px); }
  #fdw-angebote .fdw-ang-more > summary:hover .fdw-ang-plus { background: var(--ang-sand); }
}
@keyframes fdw-ang-glint { 0% { left: -30%; opacity: 0; } 15% { opacity: 1; } 100% { left: 115%; opacity: 0; } }
@media (max-width: 959px) {
  #fdw-angebote .fdw-ang-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
}
@media (max-width: 480px) {
  #fdw-angebote .fdw-ang-packages li { grid-template-columns: minmax(0, 1fr); }
  #fdw-angebote .fdw-ang-amount { justify-items: start; text-align: left; }
  #fdw-angebote .fdw-ang-badge { top: 14px; right: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  #fdw-angebote .fdw-ang-card, #fdw-angebote .fdw-ang-top::after, #fdw-angebote .fdw-ang-plus, #fdw-angebote .fdw-ang-cta span { transition: none; }
  #fdw-angebote .fdw-ang-more::details-content { transition: none; }
  #fdw-angebote .fdw-ang-offer--ein:hover .fdw-ang-top::after { animation: none; }
}