/* motiv-base.css — gemeinsame Motiv-Detailseiten-CSS (Audit Welle 4, 2026-06-15)
   Ausgelagert aus dem zuvor 9-fach inlinierten <style>-Block (Quelle: dom-magnolie = Superset).
   Enthält auch .motiv-zweite (nur auf dom-magnolie aktiv, sonst inert).
   Landscape-Hero-Override bleibt bewusst inline auf den 6 Querformat-Seiten. */

    /*ovx-guard*/ html, body { overflow-x: clip; max-width: 100%; }
    *, *::before, *::after { box-sizing: border-box; }
    html { min-height: 100%; }
    body {
      margin: 0;
      display: flex;
      flex-direction: column;
      min-height: 100%;
      background: var(--jales-ivory);
      color: var(--jales-charcoal);
      font: var(--body);
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }
    main { flex: 1 0 auto; }
    a { color: inherit; }

    /* ── Utilities ── */
    .skip-link { position:absolute; left:8px; top:-60px; z-index:2000; background:#2A3F33; color:#F8F4EC; padding:12px 20px; border-radius:0 0 10px 10px; text-decoration:none; font:700 14px/1 system-ui,sans-serif; transition:top var(--dur-base) var(--ease); }
    .skip-link:focus { top:0; }
    .container { max-width:var(--maxw-content); margin:0 auto; padding:0 var(--container-pad); }
    .btn { display:inline-flex; align-items:center; gap:8px; padding:14px 24px; border-radius:var(--r-pill); font:600 11px/1 var(--font-sans); letter-spacing:.14em; text-transform:uppercase; text-decoration:none; border:1px solid transparent; cursor:pointer; transition:background var(--dur-base) var(--ease),color var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease),transform 80ms; white-space:nowrap; }
    .btn:active { transform:scale(.98); }
    .btn-primary { background:var(--jales-forest); color:var(--jales-ivory); }
    .btn-primary:hover { background:var(--jales-forest-deep); }
    .btn-outline { background:transparent; color:var(--jales-charcoal); border-color:var(--jales-charcoal); }
    .btn-outline:hover { background:var(--jales-charcoal); color:var(--jales-ivory); }
    .btn-sm { padding:10px 18px; font-size:10px; }
    .btn-ivory { background:var(--jales-ivory); color:var(--jales-charcoal); border-color:transparent; }
    .btn-ivory:hover { background:var(--jales-paper); }

    /* ── Header ── */
    .site-header { position:sticky; top:0; z-index:100; height:var(--header-h); background:rgba(248,244,236,.94); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--jales-linen); }
    .header-inner { height:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--space-6); }
    .nav-links { display:flex; align-items:center; gap:var(--space-5); list-style:none; margin:0; padding:0; }
    .nav-links a { font:500 11px/1 var(--font-sans); letter-spacing:.14em; text-transform:uppercase; color:var(--jales-charcoal); text-decoration:none; white-space:nowrap; transition:color var(--dur-base) var(--ease); }
    .nav-links a:hover { color:var(--jales-forest); }
    .nav-links a[aria-current="page"] { color:var(--jales-forest); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; }
    .mobile-nav a[aria-current="page"] { color:var(--jales-forest); }
    .nav-cta { margin-left:var(--space-4); }
    .menu-toggle { display:none; background:none; border:none; cursor:pointer; padding:10px; min-width:44px; min-height:44px; color:var(--jales-charcoal); }
    .mobile-nav { display:none; flex-direction:column; background:var(--jales-ivory); border-top:1px solid var(--jales-linen); padding:var(--space-4) var(--container-pad) var(--space-5); }
    .mobile-nav a { display:block; padding:var(--space-4) 0; font:500 14px/1.4 var(--font-sans); color:var(--jales-charcoal); text-decoration:none; border-bottom:1px solid var(--jales-linen); }
    .mobile-nav a:last-child { border-bottom:none; }
    .mobile-nav.open { display:flex; }
    @media (max-width:1024px) {
      .nav-links, .nav-cta { display:none; }
      .menu-toggle { display:flex; align-items:center; justify-content:center; }
    }

    /* ── Footer ── */
    .site-footer { background:var(--jales-charcoal); color:var(--jales-ivory); padding:var(--section-pad-md) 0 var(--space-7); flex-shrink:0; }
    .site-footer .container { max-width:var(--maxw-content); margin:0 auto; padding:0 var(--container-pad); }
    .site-footer .footer-inner { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:var(--gap-section); align-items:start; padding-bottom:var(--space-7); border-bottom:1px solid rgba(248,244,236,.12); margin-bottom:var(--space-7); }
    .site-footer .footer-col-title { font:var(--label); letter-spacing:.22em; text-transform:uppercase; color:rgba(248,244,236,.5); margin:0 0 var(--space-4); }
    .site-footer .footer-tagline { font:600 16px/1.5 var(--font-sans); color:#F8F4EC; margin:var(--space-3) 0 0; max-width:34ch; }
    .site-footer .footer-social-label { font:var(--label); letter-spacing:.22em; text-transform:uppercase; color:rgba(248,244,236,.5); margin:var(--space-6) 0 var(--space-3); }
    .site-footer .footer-social { display:flex; gap:var(--space-3); margin-top:var(--space-5); }
    .site-footer .footer-social a { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border:1px solid rgba(248,244,236,.18); border-radius:var(--r-pill); color:rgba(248,244,236,.7); text-decoration:none; transition:color var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease),background var(--dur-base) var(--ease); }
    .site-footer .footer-social a:hover { color:var(--jales-charcoal); background:var(--jales-ivory); border-color:var(--jales-ivory); }
    .site-footer .footer-social svg { width:21px; height:21px; display:block; }
    .site-footer .footer-links { display:flex; flex-wrap:wrap; gap:var(--space-5); list-style:none; margin:0; padding:0; justify-content:flex-end; }
    .site-footer .footer-links.col { flex-direction:column; flex-wrap:nowrap; gap:var(--space-3); justify-content:flex-start; }
    .site-footer .footer-links a { font:500 11px/1 var(--font-sans); letter-spacing:.12em; text-transform:uppercase; color:rgba(248,244,236,.65); text-decoration:none; transition:color var(--dur-base) var(--ease); }
    .site-footer .footer-links a:hover { color:var(--jales-ivory); }
    .site-footer .footer-bottom { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--space-4); }
    .site-footer .footer-copy { font:var(--caption); color:rgba(248,244,236,.62); letter-spacing:.06em; margin:0; }
    .site-footer .footer-legal { display:flex; gap:var(--space-5); list-style:none; margin:0; padding:0; }
    .site-footer .footer-legal a { font:var(--caption); color:rgba(248,244,236,.62); text-decoration:none; }
    .site-footer .footer-legal a:hover { color:rgba(248,244,236,.75); }
    @media (max-width:1024px) {
      .site-footer .footer-inner { grid-template-columns:1fr; gap:var(--space-6); }
      .site-footer .footer-links { justify-content:flex-start; }
    }
    @media (max-width:768px) {
      .site-footer .footer-inner { gap:var(--space-7); }
      .site-footer .footer-links.col a { padding:15px 0; line-height:1; }
      .site-footer .footer-bottom { flex-direction:column; align-items:flex-start; }
    }

    /* ── Breadcrumb ── */
    .breadcrumb { padding: var(--space-5) 0 0; }
    .breadcrumb ol { display:flex; align-items:center; flex-wrap:wrap; gap:4px; list-style:none; margin:0; padding:0; font:400 11.5px/1 var(--font-sans); color:var(--jales-ink-2); letter-spacing:.04em; }
    .breadcrumb a { color:inherit; text-decoration:none; }
    .breadcrumb a:hover { color:var(--jales-forest); }
    .breadcrumb .sep { opacity:.4; }
    .breadcrumb [aria-current="page"] { color:var(--jales-forest); }

    /* ── Portrait Hero ── */
    .motiv-hero { padding: var(--space-5) 0 var(--section-pad-lg); }
    .motiv-hero-inner {
      display: grid;
      grid-template-columns: minmax(0,420px) 1fr;
      gap: var(--space-10);
      align-items: start;
      margin-top: var(--space-7);
    }
    .motiv-photo-col {
      position: sticky;
      top: calc(var(--header-h) + var(--space-5));
    }
    .motiv-photo-wrap {
      position: relative;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 8px 40px rgba(30,28,24,.15);
      line-height: 0;
      cursor: zoom-in;
    }
    .motiv-photo-wrap img {
      width: 100%;
      height: auto;
      display: block;
    }
    .highlight-filename { position: absolute; bottom: var(--space-4); left: var(--space-4); background: rgba(31,26,20,.68); color: rgba(248,244,236,.9); font: 600 10px/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; padding: 6px 10px; border-radius: 6px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); pointer-events: none; }
    .highlight-credit { position: absolute; bottom: var(--space-4); right: var(--space-4); background: rgba(31,26,20,.68); color: rgba(248,244,236,.85); font: 500 10px/1 var(--font-sans); letter-spacing: .04em; padding: 6px 10px; border-radius: 6px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); pointer-events: none; }
    /* Lightbox */
    #img-lb{position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;cursor:zoom-out;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;}
    #img-lb.is-open{opacity:1;visibility:visible;}
    #img-lb img{max-width:min(1400px,92vw);max-height:90vh;object-fit:contain;border-radius:4px;box-shadow:0 20px 80px rgba(0,0,0,.5);cursor:default;}
    #img-lb-close{position:absolute;top:16px;right:20px;background:none;border:none;color:#fff;font-size:28px;cursor:pointer;line-height:1;padding:6px 10px;opacity:.7;}
    #img-lb-close:hover{opacity:1;}
    .motiv-text-col { padding-top: var(--space-2); }
    .motiv-eyebrow {
      font: var(--label);
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--jales-amber-text);
      margin: 0 0 var(--space-3);
    }
    .motiv-h1 {
      font: var(--h2);
      color: var(--jales-charcoal);
      margin: 0 0 var(--space-5);
      max-width: 22ch;
    }
    .motiv-lead {
      font: 400 17px/1.75 var(--font-sans);
      color: var(--jales-charcoal);
      margin: 0 0 var(--space-7);
      max-width: 50ch;
    }
    .motiv-ctas {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-3);
      margin-bottom: var(--space-5);
    }
    .motiv-meta {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      flex-wrap: wrap;
      font: 400 12px/1 var(--font-sans);
      color: var(--jales-ink-2);
      letter-spacing: .04em;
      padding-top: var(--space-4);
      border-top: 1px solid var(--jales-linen);
    }
    .motiv-meta-dot { opacity: .4; }

    /* ── Hintergrundwissen ── */
    .motiv-wissen-section {
      background: var(--jales-paper);
      border-top: 1px solid var(--jales-linen);
      border-bottom: 1px solid var(--jales-linen);
      padding: var(--section-pad-md) 0;
    }
    .motiv-wissen-section .wissen-label {
      font: var(--label);
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--jales-amber-text);
      margin: 0 0 var(--space-3);
    }
    .motiv-wissen-section h2 {
      font: var(--h3);
      margin: 0 0 var(--space-6);
    }
    .motiv-wissen-section p {
      font: 400 16px/1.8 var(--font-sans);
      color: var(--jales-charcoal);
      max-width: 68ch;
      margin: 0 0 var(--space-5);
    }
    .motiv-wissen-section p:last-child { margin-bottom: 0; }
    .best-time {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font: 600 12px/1.4 var(--font-sans);
      color: var(--jales-amber-text);
      letter-spacing: .06em;
      margin-top: var(--space-2);
    }
    .best-time svg { width: 14px; height: 14px; flex-shrink: 0; }
    .motiv-standort { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: 400 13px/1.5 var(--font-sans); color: var(--jales-ink-2); margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--jales-linen); }
    .motiv-standort svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--jales-forest); }
    .motiv-standort a { color: var(--jales-forest); text-decoration: none; border-bottom: 1px solid var(--jales-hair); transition: border-color var(--dur-base) var(--ease); }
    .motiv-standort a:hover { border-color: var(--jales-forest); }

    /* ── FAQ ── */
    .motiv-faq-section { padding: var(--section-pad-md) 0; }
    .motiv-faq-section h2 { font: var(--h3); margin: 0 0 var(--space-7); }
    .faq-list {
      border-top: 1px solid var(--jales-linen);
      max-width: 70ch;
    }
    details.faq-item { border-bottom: 1px solid var(--jales-linen); }
    details.faq-item summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-5);
      padding: var(--space-5) 0;
      cursor: pointer;
      list-style: none;
      font: 600 15px/1.4 var(--font-sans);
      color: var(--jales-charcoal);
    }
    details.faq-item summary::-webkit-details-marker { display: none; }
    .faq-icon {
      flex-shrink: 0;
      width: 22px;
      height: 22px;
      border: 1px solid var(--jales-linen);
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 17px;
      line-height: 1;
      color: var(--jales-forest);
      transition: transform var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
      user-select: none;
    }
    details.faq-item[open] .faq-icon { transform: rotate(45deg); background: var(--jales-forest); color: var(--jales-ivory); border-color: var(--jales-forest); }
    .faq-a {
      padding: 0 0 var(--space-5);
      font: 400 15px/1.75 var(--font-sans);
      color: var(--jales-charcoal);
      max-width: 62ch;
      margin: 0;
    }

    /* ── Hub CTA ── */
    .motiv-hub-cta {
      background: var(--jales-forest);
      color: var(--jales-ivory);
      padding: var(--section-pad-md) 0;
      text-align: center;
    }
    .motiv-hub-cta h2 { font: var(--h3); color: var(--jales-ivory); margin: 0 0 var(--space-4); }
    .motiv-hub-cta p { font: 400 16px/1.6 var(--font-sans); color: rgba(248,244,236,.78); margin: 0 0 var(--space-7); max-width: 52ch; margin-left: auto; margin-right: auto; }

    /* ── Cross-Selling „Das könnte Ihnen auch gefallen" (UX-Audit 2026-06-15) – Stil wie fotospots-Karten ── */
    .motiv-related { padding: var(--section-pad-md) 0; background: var(--jales-ivory); border-top: 1px solid var(--jales-linen); }
    .motiv-related h2 { font: var(--h3); color: var(--jales-charcoal); margin: 0 0 var(--space-6); }
    .motiv-related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
    .motiv-related-card { background: var(--jales-paper); border: 1px solid var(--jales-linen); border-radius: var(--r-lg); overflow: hidden; display: block; text-decoration: none; transition: border-color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); }
    .motiv-related-card:hover { border-color: var(--jales-forest); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(31,26,20,.08); }
    .motiv-related-card img { width: 100%; aspect-ratio: 3/2; object-fit: cover; display: block; }
    .motiv-related-name { display: block; font: 500 15px/1.3 var(--font-sans); color: var(--jales-charcoal); padding: var(--space-3) var(--space-4); }
    @media (max-width: 768px) { .motiv-related-grid { grid-template-columns: repeat(2, 1fr); } }

    /* ── Anfrage-Modal ── */
    .anfrage-modal{position:fixed;inset:0;z-index:500;background:rgba(31,26,20,.52);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,48px);opacity:0;pointer-events:none;transition:opacity 220ms cubic-bezier(.2,.6,.2,1)}
    .anfrage-modal.is-open{opacity:1;pointer-events:auto}
    .modal-panel{background:#F8F4EC;border-radius:24px;box-shadow:0 1px 3px rgba(31,26,20,.06),0 18px 48px rgba(31,26,20,.10);width:100%;max-width:580px;max-height:90vh;overflow-y:auto;padding:clamp(28px,4vw,48px);position:relative}
    .modal-close-btn{position:sticky;float:right;top:0;margin:-8px -8px 0 12px;width:36px;height:36px;border:none;background:#F8F4EC;cursor:pointer;color:#5A5246;display:flex;align-items:center;justify-content:center;border-radius:8px;transition:background 220ms;z-index:5}
    .modal-close-btn:hover{background:#E8DFCC}
    .modal-title{font:500 clamp(22px,3vw,30px)/1.1 "Cormorant Garamond",Garamond,serif;color:#1F1A14;margin:0 0 8px}
    .modal-sub{font:400 14px/1.65 "Manrope","Helvetica Neue",Arial,sans-serif;color:#5A5246;margin:0 0 32px}
    .form-row{margin-bottom:24px}
    .form-row label:not(.form-chip){display:block;font:600 10.5px/1.4 "Manrope","Helvetica Neue",Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#1F1A14;margin-bottom:8px}
    .form-row label .req{color:#8C6420}
    /* Audit Welle 2b: Radio-Gruppen als <fieldset>/<legend> – optisch identisch zur bisherigen label+div-Struktur */
    fieldset.form-row{border:0;padding:0;min-width:0;margin-top:0;margin-left:0;margin-right:0}
    .form-row legend{display:block;float:none;width:auto;padding:0;font:600 10.5px/1.4 "Manrope","Helvetica Neue",Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#1F1A14;margin-bottom:8px}
    .form-row legend .req{color:#8C6420}
    .form-input,.form-textarea{width:100%;padding:11px 14px;border:1px solid #E8DFCC;border-radius:12px;background:#fff;font:400 14px/1.5 "Manrope","Helvetica Neue",Arial,sans-serif;color:#1F1A14;-webkit-appearance:none;transition:border-color 220ms}
    .form-input:focus,.form-textarea:focus{outline:none;border-color:#2A3F33}
    .form-input:disabled{background:#F2ECE0;color:#8C8073;cursor:not-allowed}
    .form-textarea{resize:vertical;min-height:80px}
    .form-two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
    .form-chips{display:flex;flex-wrap:wrap;gap:8px}
    .form-chip{display:inline-flex;align-items:center;padding:8px 14px;border:1px solid #E8DFCC;border-radius:999px;cursor:pointer;font:400 13px/1 "Manrope","Helvetica Neue",Arial,sans-serif;color:#5A5246;transition:border-color 220ms,background 220ms,color 220ms;user-select:none}
    .form-chip input{position:absolute;opacity:0;width:0;height:0}
    .form-chip:hover{border-color:#2A3F33;color:#2A3F33}
    .form-chip.is-sel{background:#2A3F33;color:#F8F4EC;border-color:#2A3F33}
    .form-chip.is-sel:hover{color:#F8F4EC}
    .form-chip em{opacity:1 !important}   /* Preis lesbarer (überschreibt Inline-opacity:.55) */
    .form-submit{width:100%;padding:14px;background:#2A3F33;color:#F8F4EC;border:none;border-radius:999px;font:600 11px/1 "Manrope","Helvetica Neue",Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;margin-top:12px;transition:background 220ms}
    .form-submit:hover{background:#1E2D24}
    .form-note{font:400 12px/1.55 "Manrope","Helvetica Neue",Arial,sans-serif;color:#6B6155;margin-top:12px}
    .form-confirm{text-align:center;padding:72px 0}
    .form-confirm-icon{width:52px;height:52px;border-radius:50%;background:#E3E8DF;color:#2A3F33;display:flex;align-items:center;justify-content:center;margin:0 auto 24px}
    .form-confirm h3{font:500 clamp(20px,2.5vw,26px)/1.2 "Cormorant Garamond",Garamond,serif;color:#1F1A14;margin:0 0 12px}
    .form-confirm p{font:400 14.5px/1.7 "Manrope","Helvetica Neue",Arial,sans-serif;color:#5A5246;max-width:34ch;margin:0 auto}
    @media(max-width:480px){.form-two{grid-template-columns:1fr}}

    /* ── Zweite Ansicht ── */
    .motiv-zweite { padding: var(--section-pad-md) 0; border-top: 1px solid var(--jales-linen); }
    .motiv-zweite-inner {
      display: grid;
      grid-template-columns: 1fr minmax(0,420px);
      gap: var(--space-10);
      align-items: center;
    }
    .motiv-zweite .motiv-h1 { font: var(--h3); margin-bottom: var(--space-4); }

    /* ── Responsive ── */
    @media (max-width:900px) {
      .motiv-zweite-inner { grid-template-columns: 1fr; }
      .motiv-zweite-photo { max-width: 480px; margin: 0 auto; order: -1; }
      .motiv-hero-inner { grid-template-columns: 1fr; }
      .motiv-photo-col { position: static; max-width: 480px; margin: 0 auto; }
      .motiv-h1 { max-width: 100%; }
    }
    @media (max-width:600px) {
      .motiv-lead { font-size: 15px; }
      .motiv-ctas { flex-direction: column; }
      .motiv-ctas .btn { width: 100%; justify-content: center; }
    }
  

/* Pinterest „Merken" auf dem Motiv-Hero (2026-06-16) */
.highlight-img-wrap .sample-pin{position:absolute;top:12px;right:12px;z-index:4;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(31,26,20,.55);color:#fff;text-decoration:none;opacity:0;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:opacity .25s ease,background .25s ease;}
.highlight-img-wrap:hover .sample-pin,.sample-pin:focus-visible{opacity:1;}
.sample-pin:hover{background:#E60023;}
.sample-pin svg{width:20px;height:20px;}
@media (hover:none){.highlight-img-wrap .sample-pin{opacity:.85;}}