/* Travona – animierte Funktionen (Startseite + Vorteile-Seite)
   Reines CSS, keine Bilder oder externen Dienste. Animationen laufen nur,
   solange die Karte sichtbar ist (funktionen.js), und stehen still bei
   "Bewegung reduzieren" im Betriebssystem. */
.fx-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;}
.fx-card{grid-column:span 2;background:#FBF8F3;border:1px solid var(--rule);border-radius:14px;padding:14px 14px 20px;display:flex;flex-direction:column;transition:transform .35s,box-shadow .35s;}
.fx-card:nth-child(-n+2){grid-column:span 3;}
.fx-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px -18px rgba(26,23,20,.35);}
.fx-scene{position:relative;height:190px;border-radius:10px;overflow:hidden;background:#F1EADF;margin-bottom:16px;}
.fx-stage{position:absolute;left:50%;top:50%;width:260px;height:170px;margin:-85px 0 0 -130px;font-family:'DM Sans',sans-serif;}
.fx-name{font-family:'Playfair Display',serif;font-size:18px;font-weight:400;color:var(--ink);margin:0 6px 6px;}
.fx-text{font-size:13px;line-height:1.6;color:var(--fog);margin:0 6px;}
.fx-paper{position:absolute;background:#fff;border-radius:3px;box-shadow:0 6px 16px -8px rgba(26,23,20,.35);}

/* 1 · KI: Beleg rein, Bericht raus */
.fx-ai .rcpt{left:12px;top:12px;width:98px;height:140px;padding:10px 8px;font-size:7.5px;line-height:1.55;color:#4a4540;font-family:ui-monospace,Menlo,Consolas,monospace;
  clip-path:polygon(0 0,100% 0,100% 96%,92% 100%,84% 96%,76% 100%,68% 96%,60% 100%,52% 96%,44% 100%,36% 96%,28% 100%,20% 96%,12% 100%,4% 96%,0 100%);
  animation:fx-ai-rcpt 7s ease-in-out infinite both;}
.fx-ai .rcpt b{display:block;text-align:center;font-size:8px;letter-spacing:.06em;margin-bottom:5px;color:var(--ink);}
.fx-ai .rcpt i{display:flex;justify-content:space-between;font-style:normal;}
.fx-ai .rcpt .sum{border-top:1px dashed #bbb;margin-top:5px;padding-top:4px;font-weight:700;color:var(--ink);}
.fx-ai .scan{position:absolute;left:0;right:0;top:0;height:16px;background:linear-gradient(180deg,rgba(181,113,74,0),rgba(181,113,74,.35));border-bottom:2px solid var(--terra);animation:fx-ai-scan 7s linear infinite both;}
.fx-ai .spark{position:absolute;left:115px;top:72px;font-size:16px;color:var(--terra);animation:fx-ai-spark 7s ease-in-out infinite both;}
.fx-ai .page{left:138px;top:12px;width:110px;height:146px;padding:10px 9px;}
.fx-ai .page h4{font-family:'Playfair Display',serif;font-weight:400;font-size:11px;color:var(--ink);margin:0 0 7px;}
.fx-ai .chip{display:block;font-size:7.5px;background:#F4EFE8;border-left:2px solid var(--terra);border-radius:2px;padding:4px 5px;color:var(--ink);margin-bottom:8px;animation:fx-ai-chip 7s ease-out infinite both;}
.fx-ai .ln{display:block;height:4px;border-radius:2px;background:#E2D9CC;margin:0 0 6px;transform-origin:left;animation:fx-ai-line 7s ease-out infinite both;}
.fx-ai .ln:nth-of-type(2){animation-delay:.25s;width:88%;}
.fx-ai .ln:nth-of-type(3){animation-delay:.5s;}
.fx-ai .ln:nth-of-type(4){animation-delay:.75s;width:70%;}
.fx-ai .ln:nth-of-type(5){animation-delay:1s;width:92%;}
.fx-ai .ln:nth-of-type(6){animation-delay:1.25s;width:55%;}
.fx-ai .cursor{display:inline-block;width:1px;height:9px;background:var(--terra);vertical-align:-1px;margin-left:2px;animation:fx-blink 1s steps(1) infinite;}
@keyframes fx-ai-rcpt{0%{transform:translateY(-120%) rotate(-6deg);opacity:0}10%,88%{transform:none;opacity:1}100%{transform:none;opacity:0}}
@keyframes fx-ai-scan{0%,12%{top:0;opacity:0}14%{opacity:1}38%{top:calc(100% - 16px);opacity:1}42%,100%{top:calc(100% - 16px);opacity:0}}
@keyframes fx-ai-spark{0%,38%{transform:scale(0) rotate(0);opacity:0}44%{transform:scale(1.4) rotate(90deg);opacity:1}52%,88%{transform:scale(1) rotate(180deg);opacity:1}100%{opacity:0}}
@keyframes fx-ai-chip{0%,44%{opacity:0;transform:translateX(-10px)}50%,88%{opacity:1;transform:none}100%{opacity:0}}
@keyframes fx-ai-line{0%,52%{transform:scaleX(0)}62%,88%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@keyframes fx-blink{50%{opacity:0}}

/* 2 · Route & Karte */
.fx-map svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.fx-map .route{fill:none;stroke:var(--terra);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:fx-map-draw 7s ease-in-out infinite both;}
.fx-map .pin{transform-box:fill-box;transform-origin:50% 100%;animation:fx-map-pin 7s ease-out infinite both;}
.fx-map .lbl{font-size:9px;fill:var(--ink);font-family:'DM Sans',sans-serif;animation:fx-map-lbl 7s ease-out infinite both;}
.fx-map .p2,.fx-map .l2{animation-delay:1.3s}
.fx-map .p3,.fx-map .l3{animation-delay:2.5s}
.fx-map .p4,.fx-map .l4{animation-delay:3.7s}
@keyframes fx-map-draw{0%,6%{stroke-dashoffset:1;opacity:1}58%,86%{stroke-dashoffset:0;opacity:1}96%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes fx-map-pin{0%,4%{transform:scale(0) translateY(-6px);opacity:0}10%{transform:scale(1.25);opacity:1}14%,70%{transform:scale(1);opacity:1}80%,100%{transform:scale(1);opacity:0}}
@keyframes fx-map-lbl{0%,8%{opacity:0}14%,70%{opacity:1}80%,100%{opacity:0}}

/* 3 · Fotos & Fotobuch */
.fx-book .spread{position:absolute;left:28px;top:28px;width:204px;height:128px;}
.fx-book .pg{position:absolute;top:0;width:102px;height:128px;background:#fff;box-shadow:0 6px 16px -8px rgba(26,23,20,.4);}
.fx-book .pg.l{left:0;border-radius:4px 0 0 4px;background:linear-gradient(90deg,#fff 80%,#efe9df);}
.fx-book .pg.r{right:0;border-radius:0 4px 4px 0;background:linear-gradient(270deg,#fff 80%,#efe9df);}
.fx-book .ph{position:absolute;border:3px solid #fff;box-shadow:0 3px 8px -3px rgba(26,23,20,.45);animation:fx-book-in 7s cubic-bezier(.2,.8,.3,1.1) infinite both;}
.fx-book .ph1{left:36px;top:36px;width:78px;height:56px;background:linear-gradient(180deg,#F4C9A0 0%,#E59A6C 55%,#8E5A3C 56%,#6E4630 100%);--fx-from:translate(-60px,-70px) rotate(-18deg);}
.fx-book .ph2{left:38px;top:98px;width:52px;height:46px;background:linear-gradient(180deg,#CFE2E3 0%,#9CC3C6 50%,#2C5F6A 51%,#244E57 100%);--fx-from:translate(-70px,60px) rotate(14deg);animation-delay:.5s;}
.fx-book .ph3{left:138px;top:38px;width:80px;height:66px;background:radial-gradient(circle at 70% 30%,#FBE7B5 0 9%,transparent 10%),linear-gradient(180deg,#EADCC0 0%,#EADCC0 45%,#A9B07A 46%,#7F8B57 100%);--fx-from:translate(70px,-60px) rotate(16deg);animation-delay:1s;}
.fx-book .cap{position:absolute;left:140px;top:114px;width:60px;}
.fx-book .cap i{display:block;height:3px;background:#E2D9CC;border-radius:2px;margin-bottom:5px;transform-origin:left;animation:fx-ai-line 7s ease-out infinite both;}
.fx-book .cap i+i{width:70%;animation-delay:.3s;}
.fx-book .pdf{position:absolute;right:6px;top:8px;background:var(--terra);color:#fff;font-size:9px;letter-spacing:.06em;padding:5px 8px;border-radius:20px;animation:fx-pop 7s ease-out infinite both;animation-delay:2.4s;}
@keyframes fx-book-in{0%,6%{transform:var(--fx-from);opacity:0}20%,86%{transform:none;opacity:1}100%{transform:none;opacity:0}}
@keyframes fx-pop{0%,10%{transform:scale(0);opacity:0}16%{transform:scale(1.15);opacity:1}20%,58%{transform:scale(1);opacity:1}66%,100%{transform:scale(1);opacity:0}}

/* 4 · Kosten */
.fx-cost .donut{position:absolute;left:14px;top:30px;width:110px;height:110px;transform:rotate(-90deg);}
.fx-cost .donut circle{fill:none;stroke-width:13;}
.fx-cost .seg{stroke-dasharray:0 100;animation:fx-seg 7s ease-out infinite both;}
.fx-cost .s1{stroke:var(--terra);--fx-len:45;}
.fx-cost .s2{stroke:var(--teal);--fx-len:30;animation-delay:.6s;}
.fx-cost .s3{stroke:#D9B48F;--fx-len:25;animation-delay:1.2s;}
.fx-cost .total{position:absolute;left:14px;top:72px;width:110px;text-align:center;font-family:'Playfair Display',serif;font-size:15px;color:var(--ink);line-height:1.1;}
.fx-cost .total small{display:block;font-family:'DM Sans',sans-serif;font-size:7.5px;color:var(--fog);letter-spacing:.08em;text-transform:uppercase;}
.fx-cost .rows{position:absolute;left:138px;top:28px;width:112px;font-size:8.5px;color:var(--ink);}
.fx-cost .row{display:flex;align-items:center;gap:5px;margin-bottom:8px;animation:fx-row 7s ease-out infinite both;}
.fx-cost .row:nth-child(2){animation-delay:.6s}
.fx-cost .row:nth-child(3){animation-delay:1.2s}
.fx-cost .row em{font-style:normal;margin-left:auto;font-weight:500;}
.fx-cost .dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto;}
.fx-cost .bud{position:absolute;left:138px;top:106px;width:112px;font-size:7.5px;color:var(--fog);}
.fx-cost .bar{height:6px;border-radius:3px;background:#E2D9CC;margin-top:4px;overflow:hidden;}
.fx-cost .bar i{display:block;height:100%;width:78%;background:linear-gradient(90deg,var(--teal),var(--terra));transform-origin:left;animation:fx-bar 7s ease-out infinite both;}
@keyframes fx-seg{0%,4%{stroke-dasharray:0 100}22%,86%{stroke-dasharray:var(--fx-len) 100;opacity:1}100%{stroke-dasharray:var(--fx-len) 100;opacity:0}}
@keyframes fx-row{0%,4%{opacity:0;transform:translateY(6px)}14%,86%{opacity:1;transform:none}100%{opacity:0}}
@keyframes fx-bar{0%,30%{transform:scaleX(0)}55%,86%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}

/* 5 · Teilen & Gästebuch */
.fx-share .link{position:absolute;left:20px;top:14px;width:220px;white-space:nowrap;display:flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--rule);border-radius:20px;padding:6px 10px;font-size:8.5px;color:var(--fog);animation:fx-row 7s ease-out infinite both;}
.fx-share .link b{margin-left:auto;font-weight:500;color:#fff;background:var(--teal);border-radius:12px;padding:3px 8px;animation:fx-copied 7s ease-out infinite both;}
.fx-share .bub{position:absolute;max-width:150px;background:#fff;border-radius:12px;padding:7px 10px;font-size:8.5px;line-height:1.45;color:var(--ink);box-shadow:0 6px 14px -8px rgba(26,23,20,.4);animation:fx-bub 7s cubic-bezier(.2,.8,.3,1.2) infinite both;}
.fx-share .bub small{display:block;color:var(--fog);font-size:7.5px;margin-top:2px;}
.fx-share .b1{left:16px;top:56px;border-bottom-left-radius:3px;animation-delay:1.1s;transform-origin:0 100%;}
.fx-share .b2{right:16px;top:102px;border-bottom-right-radius:3px;background:#F7EDE5;animation-delay:2.1s;transform-origin:100% 100%;}
.fx-share .heart{position:absolute;bottom:-14px;color:var(--terra);font-size:13px;animation:fx-heart 7s ease-out infinite both;}
.fx-share .h1{left:200px;animation-delay:2.8s}
.fx-share .h2{left:222px;animation-delay:3.2s;font-size:10px}
.fx-share .h3{left:186px;animation-delay:3.6s;font-size:9px}
@keyframes fx-copied{0%,12%{background:var(--teal)}16%,40%{background:var(--terra)}46%,100%{background:var(--teal)}}
@keyframes fx-bub{0%,4%{transform:scale(0);opacity:0}12%,80%{transform:scale(1);opacity:1}90%,100%{transform:scale(1);opacity:0}}
@keyframes fx-heart{0%{transform:translateY(0) scale(.6);opacity:0}6%{opacity:1}36%{transform:translateY(-120px) scale(1.1);opacity:0}100%{transform:translateY(-120px);opacity:0}}

/* Breite Karten: Szene etwas größer */
@media(min-width:901px){.fx-card:nth-child(-n+2) .fx-scene{height:220px}.fx-card:nth-child(-n+2) .fx-stage{transform:scale(1.2)}}

/* Nur abspielen, wenn sichtbar */
.fx-off *{animation-play-state:paused!important;}
@media(prefers-reduced-motion:reduce){
  .fx-scene *{animation:none!important;}
  .fx-map .route{stroke-dashoffset:0;}
  .fx-cost .seg{stroke-dasharray:var(--fx-len) 100;}
  .fx-share .heart{display:none;}
}
@media(max-width:900px){
  .fx-grid{grid-template-columns:repeat(2,1fr);}
  .fx-card,.fx-card:nth-child(-n+2){grid-column:span 1;}
  .fx-card:first-child{grid-column:span 2;}
}
@media(max-width:560px){
  .fx-grid{grid-template-columns:1fr;gap:14px;}
  .fx-card,.fx-card:nth-child(-n+2),.fx-card:first-child{grid-column:auto;}
  .fx-scene{height:180px;}
}
@media(max-width:340px){
  .fx-stage{transform:scale(.88);}
}