/* Hahne mit Herz – Bereichs-Designs (freigegeben 19.09.2026) Alltagsbegleitung: A1 „Wärme & Nähe“ · Hausmeisterservice: H5 „Gold & Hellgold“ Aktiv über die Klassen da-a1 und dh-h5 am . */ /* ---------- gemeinsame Bewegungen ---------- */ @keyframes dv-atmen { 0%,100%{ transform:translate3d(0,0,0) scale(1); } 50%{ transform:translate3d(2%,-3%,0) scale(1.06); } } @keyframes dv-welle { from{ background-position-x:0; } to{ background-position-x:-1440px; } } @keyframes dv-zeichnen { from{ background-size:0% .32em; } to{ background-size:100% .32em; } } @keyframes dv-glanz { from{ transform:translateX(-120%) skewX(-18deg); } to{ transform:translateX(220%) skewX(-18deg); } } @keyframes dv-mass { from{ transform:scaleX(0); } to{ transform:scaleX(1); } } @keyframes dv-auf { from{ opacity:0;transform:translateY(18px); } to{ opacity:1;transform:none; } } /* Parallax-Foto (Wert kommt aus dem Skript) */ body[class*="da-"] .hero-photo img, body[class*="dh-"] .hero-photo img{ transform:translate3d(0,var(--dv-parallax,0px),0) scale(1.08);will-change:transform; } /* ===================================================================== A1 – „Wärme & Nähe“ (Alltagsbegleitung) ===================================================================== */ body.da-a1[data-area="alltag"]{ --accent:#3F7C6B; --accent-deep:#2B5F51; --accent-light:#5E9A88; --accent-pale:#E2EFE8; --accent-ink:#2B5F51; --apricot:#E7A277; --apricot-pale:#FBE9DC; --navy:#1F4A40; --navy-deep:#143630; --navy-soft:#2A5C50; --gold:#E7A277; --gold-light:#F2C29F; --gold-ink:#A8603A; --gold-pale:#FBE9DC; --page:#FBF7F0; --page-warm:#F6EEE2; --line:#E9DECD; --line-soft:#F1E9DC; --radius:22px; --radius-lg:30px; --radius-xl:42px; } body.da-a1[data-area="alltag"] .hero-photo::after{ background: linear-gradient(180deg,rgba(20,54,48,.35) 0%,rgba(20,54,48,0) 38%,rgba(231,162,119,.18) 70%,rgba(20,54,48,.30) 100%), radial-gradient(60% 70% at 15% 85%,rgba(231,162,119,.35),transparent 70%); } body.da-a1[data-area="alltag"] .hero-card{ background:rgba(255,255,255,.9); -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2); box-shadow:0 60px 110px -60px rgba(20,54,48,.55),0 0 0 1px rgba(255,255,255,.7) inset; } body.da-a1[data-area="alltag"] .hero-card::before{ background:linear-gradient(180deg,var(--accent),var(--apricot));width:5px;border-radius:0 6px 6px 0; } /* handgezeichneter Unterstrich unter „was gut tut.“ */ body.da-a1[data-area="alltag"] .hero-copy h1 span{ color:var(--accent-deep); padding-bottom:.12em; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M3 14c60-9 130-12 200-8 34 2 64 5 94 9' fill='none' stroke='%23E7A277' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") left bottom/100% .32em no-repeat; animation:dv-zeichnen 1.4s .6s var(--ease-out) both; } body.da-a1[data-area="alltag"] .btn{ background:var(--accent);border-color:var(--accent);box-shadow:0 16px 30px -16px rgba(43,95,81,.8); } body.da-a1[data-area="alltag"] .btn:hover{ background:var(--accent-deep);box-shadow:0 20px 34px -14px rgba(231,162,119,.75); } body.da-a1[data-area="alltag"] .btn-secondary{ background:rgba(255,255,255,.7);color:var(--accent-deep);border-color:var(--line); box-shadow:none; } body.da-a1[data-area="alltag"] .btn-secondary:hover{ background:var(--apricot-pale);color:var(--accent-deep);border-color:var(--apricot); } body.da-a1[data-area="alltag"] .eyebrow::before{ width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 35%,var(--apricot),var(--accent)); } body.da-a1[data-area="alltag"] .trust{ background:linear-gradient(100deg,#1F4A40,#2A5C50 60%,#1F4A40); } body.da-a1[data-area="alltag"] .trust-grid .icon{ background:rgba(231,162,119,.22);color:#F6C8A6; } /* atmende, weiche Farbflächen im Hintergrund */ body.da-a1[data-area="alltag"] .services::before{ opacity:1;inset:-10% -5%; background: radial-gradient(38% 34% at 86% 12%,rgba(231,162,119,.22),transparent 70%), radial-gradient(34% 30% at 8% 70%,rgba(63,124,107,.16),transparent 70%); animation:dv-atmen 14s ease-in-out infinite; } body.da-a1[data-area="alltag"] .service-card{ border-color:transparent;box-shadow:0 18px 40px -30px rgba(20,54,48,.45),0 0 0 1px var(--line-soft); } body.da-a1[data-area="alltag"] .service-card::before{ height:auto;width:120px;aspect-ratio:1;left:auto;right:-40px;top:-40px;border-radius:50%; background:radial-gradient(circle,var(--apricot-pale),transparent 70%);transition:transform .6s var(--ease-out); } body.da-a1[data-area="alltag"] .service-card:hover::before{ width:120px;transform:scale(1.9); } body.da-a1[data-area="alltag"] .service-card:hover{ transform:translateY(-6px) rotate(-.4deg); } body.da-a1[data-area="alltag"] .service-icon{ border-radius:50%;background:linear-gradient(140deg,var(--accent-pale),var(--apricot-pale));border-color:rgba(231,162,119,.35); } body.da-a1[data-area="alltag"] .card-number{ color:var(--apricot);opacity:.18; } body.da-a1[data-area="alltag"] .step{ border-radius:30px; } body.da-a1[data-area="alltag"] .details-btn:hover,body.da-a1[data-area="alltag"] .details-btn[aria-expanded="true"]{ border-color:var(--apricot); } body.da-a1[data-area="alltag"] .statement::before{ background:radial-gradient(55% 60% at 20% 10%,rgba(231,162,119,.28),transparent 65%),radial-gradient(50% 60% at 90% 90%,rgba(94,154,136,.3),transparent 65%); } body.da-a1[data-area="alltag"] .contact::before{ background:radial-gradient(58% 62% at 12% 0%,rgba(231,162,119,.26),transparent 62%),radial-gradient(52% 58% at 92% 96%,rgba(94,154,136,.3),transparent 64%); } /* Kopfzeile: aktiver Reiter der Alltagsbegleitung */ body.da-a1[data-area="alltag"] .desktop-tabs button[aria-selected="true"]{ background:#3F7C6B; } /* Wer Bewegung reduziert hat, bekommt alles ruhig */ @media (prefers-reduced-motion:reduce){ body[class*="da-"] *,body[class*="dh-"] *{ animation:none!important; } body[class*="da-"] .hero-photo img,body[class*="dh-"] .hero-photo img{ transform:none; } } /* ===================================================================== H5 – „Gold & Hellgold“ (Hausmeisterservice): rund, elegant, dynamisch Nur Gold-Töne (kein Orange/Ocker). Aktiv über die Klasse dh-h5 am . ===================================================================== */ @keyframes dv-schimmer { 0%{ background-position:0% 50%; } 100%{ background-position:200% 50%; } } @keyframes dv-glint { 0%,70%{ transform:translateX(-130%) skewX(-20deg); } 100%{ transform:translateX(330%) skewX(-20deg); } } @keyframes dv-klingeln { 0%,86%,100%{ transform:rotate(0); } 88%{ transform:rotate(-16deg); } 91%{ transform:rotate(14deg); } 94%{ transform:rotate(-10deg); } 97%{ transform:rotate(6deg); } } @keyframes dv-goldlicht { 0%{ background-position:-150% 0; } 100%{ background-position:250% 0; } } body.dh-h5[data-area="haus"]{ --gold:#B8913A; --gold-light:#E9D29A; --gold-ink:#7D5F1C; --gold-pale:#F8EFD9; --gold-tief:#8E6B1F; --champagner:#FBF6EA; --auf-gold:#2B220F; --accent:#B8913A; --accent-deep:#8E6B1F; --accent-light:#E9D29A; --accent-pale:#F8EFD9; --accent-ink:#7D5F1C; --navy:#2A2213; --navy-deep:#1E180C; --navy-soft:#3A301B; --page:#FCFAF5; --page-warm:#F7F1E4; --line:#EADFC6; --line-soft:#F2EBDB; --ink:#2A2214; --ink-soft:#43381F; --muted:#6B5E45; --radius:20px; --radius-lg:26px; --radius-xl:36px; --gold-schatten:0 22px 44px -26px rgba(142,107,31,.55); } /* Kopfbild: warm und hell-golden */ body.dh-h5[data-area="haus"] .hero-photo img{ filter:sepia(.35) saturate(1.15) brightness(.95); } body.dh-h5[data-area="haus"] .hero-photo::after{ background: linear-gradient(180deg,rgba(30,24,12,.45) 0%,rgba(30,24,12,.05) 40%,rgba(30,24,12,.35) 100%), radial-gradient(60% 70% at 12% 90%,rgba(233,210,154,.35),transparent 70%); } /* Hauptkarte: Champagner → Hellgold, rund, weicher Schatten, wandernder Lichtschein */ body.dh-h5[data-area="haus"] .hero-card{ background:linear-gradient(140deg,#FFFBF1 0%,#F6E8C4 55%,#EBD49B 100%); border:1px solid rgba(255,255,255,.85);border-radius:36px; box-shadow:0 60px 110px -60px rgba(62,46,14,.65),0 0 0 1px rgba(184,145,58,.18) inset; position:relative;overflow:hidden; } body.dh-h5[data-area="haus"] .hero-card::before{ background:linear-gradient(180deg,var(--gold),var(--gold-light));width:5px;border-radius:0 6px 6px 0; } body.dh-h5[data-area="haus"] .hero-card::after{ content:"";position:absolute;inset:0;pointer-events:none;z-index:0; background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.6) 50%,transparent 65%) no-repeat; background-size:60% 100%;animation:dv-goldlicht 8s ease-in-out infinite; } body.dh-h5[data-area="haus"] .hero-card > *{ position:relative;z-index:1; } body.dh-h5[data-area="haus"] .hero-copy h1 span{ font-style:italic;color:var(--gold-tief); } body.dh-h5[data-area="haus"] .hero-card .eyebrow{ color:var(--gold-ink); } body.dh-h5[data-area="haus"] .eyebrow::before{ width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 35%,var(--gold-light),var(--gold)); } /* Leiste: Gold → Hellgold */ body.dh-h5[data-area="haus"] .trust{ background:linear-gradient(100deg,#B8913A 0%,#D9BC72 50%,#B8913A 100%);color:var(--auf-gold); } body.dh-h5[data-area="haus"] .trust-grid li{ color:var(--auf-gold);border-color:rgba(43,34,15,.14);font-weight:600; } body.dh-h5[data-area="haus"] .trust-grid .icon{ background:rgba(255,251,241,.55);color:var(--gold-tief); } /* Abschnitte & Karten: rund, weich, goldener Schimmer beim Überfahren */ body.dh-h5[data-area="haus"] .services::before{ opacity:1;background:radial-gradient(45% 40% at 90% 5%,rgba(233,210,154,.35),transparent 70%),radial-gradient(35% 30% at 5% 80%,rgba(184,145,58,.12),transparent 70%); } body.dh-h5[data-area="haus"] .service-card{ border-radius:26px;border:1px solid var(--line);box-shadow:0 14px 34px -28px rgba(62,46,14,.45); } body.dh-h5[data-area="haus"] .service-card::before{ height:3px;background:linear-gradient(90deg,var(--gold),var(--gold-light)); } body.dh-h5[data-area="haus"] .service-card:hover{ transform:translateY(-6px);border-color:var(--gold-light);box-shadow:0 30px 50px -30px rgba(142,107,31,.6),0 0 0 4px rgba(233,210,154,.25); } body.dh-h5[data-area="haus"] .card-number{ color:var(--gold);opacity:.14; } body.dh-h5[data-area="haus"] .service-icon{ border-radius:18px;background:linear-gradient(140deg,var(--gold-light),var(--gold));color:var(--auf-gold);border:0;box-shadow:var(--gold-schatten); } body.dh-h5[data-area="haus"] .details-btn{ border-radius:999px;border-color:var(--gold-light);color:var(--gold-ink);transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),background .25s; } body.dh-h5[data-area="haus"] .details-btn:hover,body.dh-h5[data-area="haus"] .details-btn[aria-expanded="true"]{ background:var(--gold-pale);border-color:var(--gold);transform:translateY(-2px);box-shadow:0 10px 18px -12px rgba(142,107,31,.6); } body.dh-h5[data-area="haus"] .step{ border-radius:26px; } body.dh-h5[data-area="haus"] .statement::before{ background:radial-gradient(50% 60% at 85% 10%,rgba(233,210,154,.25),transparent 65%),radial-gradient(45% 55% at 10% 95%,rgba(184,145,58,.22),transparent 65%); } body.dh-h5[data-area="haus"] .contact::before{ background:radial-gradient(58% 62% at 12% 0%,rgba(233,210,154,.22),transparent 62%),radial-gradient(52% 58% at 92% 96%,rgba(184,145,58,.26),transparent 64%); } body.dh-h5[data-area="haus"] .desktop-tabs button[aria-selected="true"]{ background:linear-gradient(135deg,#E9D29A,#B8913A);color:var(--auf-gold); } /* ---------- Dynamische Knöpfe (rund, Gold → Hellgold) ---------- */ body.dh-h5[data-area="haus"] .btn{ border-radius:999px; background:linear-gradient(110deg,#B8913A 0%,#E9D29A 25%,#B8913A 50%,#E9D29A 75%,#B8913A 100%); background-size:200% 100%;animation:dv-schimmer 6s linear infinite; color:var(--auf-gold);border:1px solid rgba(142,107,31,.45); box-shadow:0 14px 28px -14px rgba(142,107,31,.75),0 1px 0 rgba(255,255,255,.6) inset; transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out); } body.dh-h5[data-area="haus"] .btn::before{ content:"";position:absolute;top:0;bottom:0;left:0;width:35%;z-index:0;pointer-events:none; background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent); animation:dv-glint 4.5s ease-in-out infinite; } body.dh-h5[data-area="haus"] .btn > *{ position:relative;z-index:1; } body.dh-h5[data-area="haus"] .btn:hover{ transform:translateY(-3px);box-shadow:0 22px 36px -16px rgba(142,107,31,.8),0 0 0 4px rgba(233,210,154,.35); } body.dh-h5[data-area="haus"] .btn:active{ transform:translateY(1px) scale(.98);box-shadow:0 8px 16px -10px rgba(142,107,31,.7); } body.dh-h5[data-area="haus"] .btn .icon{ color:var(--auf-gold);transition:transform .3s var(--ease-out); } body.dh-h5[data-area="haus"] .btn:hover .icon{ transform:translateX(4px); } body.dh-h5[data-area="haus"] .btn[href^="tel"] .icon{ animation:dv-klingeln 5s ease-in-out infinite;transform-origin:50% 60%; } body.dh-h5[data-area="haus"] .btn[href^="tel"]:hover .icon{ transform:none;animation-duration:1.2s; } body.dh-h5[data-area="haus"] .btn:focus-visible{ outline:3px solid var(--gold-light);outline-offset:3px; } body.dh-h5[data-area="haus"] .btn-secondary{ background:rgba(255,255,255,.75);animation:none;color:var(--gold-tief);border:1px solid var(--gold-light); box-shadow:0 10px 22px -16px rgba(142,107,31,.6); } body.dh-h5[data-area="haus"] .btn-secondary::before{ animation:none;display:none; } body.dh-h5[data-area="haus"] .btn-secondary .icon{ color:var(--gold-tief); } body.dh-h5[data-area="haus"] .btn-secondary:hover{ background:var(--gold-pale);border-color:var(--gold); } body.dh-h5[data-area="haus"] .contact .btn-secondary,body.dh-h5[data-area="haus"] .statement .btn-secondary{ background:transparent;color:var(--gold-light);border-color:rgba(233,210,154,.5); } body.dh-h5[data-area="haus"] .contact .btn-secondary .icon,body.dh-h5[data-area="haus"] .statement .btn-secondary .icon{ color:var(--gold-light); } @media (prefers-reduced-motion:reduce){ body.dh-h5[data-area="haus"] .btn,body.dh-h5[data-area="haus"] .btn::before, body.dh-h5[data-area="haus"] .btn .icon,body.dh-h5[data-area="haus"] .hero-card::after{ animation:none!important; } } /* ===================================================================== Über uns – Visitenkarte in Gold, dynamisch (gilt in beiden Bereichen, sobald H5 aktiv ist) ===================================================================== */ @property --fk-winkel{ syntax:"";inherits:false;initial-value:0deg; } @keyframes fk-umlauf { to{ --fk-winkel:360deg; } } @keyframes fk-licht { 0%{ background-position:-160% 0; } 100%{ background-position:260% 0; } } @keyframes fk-schweben { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } } body.dh-h5 .family-card{ border-radius:36px;padding:4px; background:conic-gradient(from var(--fk-winkel),#B8913A,#F3E3B5 18%,#D9BC72 35%,#8E6B1F 55%,#E9D29A 75%,#B8913A); background-color:#E9D29A; animation:fk-umlauf 9s linear infinite, fk-schweben 7s ease-in-out infinite; box-shadow:0 40px 80px -44px rgba(62,46,14,.6),0 0 0 1px rgba(184,145,58,.2); transition:box-shadow .5s var(--ease-out),scale .5s var(--ease-out); } body.dh-h5 .family-card:hover{ scale:1.015;box-shadow:0 50px 90px -40px rgba(142,107,31,.7),0 0 0 6px rgba(233,210,154,.35); } body.dh-h5 .family-card::before{ display:none; } body.dh-h5 .family-card::after{ content:"";position:absolute;inset:4px;border-radius:32px;pointer-events:none;z-index:3; mix-blend-mode:normal;opacity:1; background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%) no-repeat; background-size:60% 100%;animation:fk-licht 7.5s ease-in-out infinite; } body.dh-h5 .family-card-inner{ border-radius:32px;border:1px solid rgba(255,255,255,.7); background:linear-gradient(145deg,#FFFBF1 0%,#F6E8C4 55%,#EBD49B 100%)!important; color:#2B220F; } body.dh-h5 .family-card-inner .official-logo{ border-color:rgba(184,145,58,.35);border-radius:22px; box-shadow:0 18px 34px -22px rgba(62,46,14,.55);filter:none; transition:transform .6s var(--ease-out); } body.dh-h5 .family-card:hover .official-logo{ transform:scale(1.04); } body.dh-h5 .family-card-inner strong{ color:#2B220F; } body.dh-h5 .family-card-inner span{ color:#7D5F1C; } body.dh-h5 .family-card-inner span::before{ width:48px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,#B8913A,transparent); } @media (prefers-reduced-motion:reduce){ body.dh-h5 .family-card,body.dh-h5 .family-card::after{ animation:none!important; } } /* ===================================================================== Einsatzgebiet – Karten in hellem Gold, dynamisch (beide Karten, sobald H5 aktiv ist) ===================================================================== */ @keyframes kg-umlauf { to{ stroke-dashoffset:-190; } } @keyframes kg-atmen { 0%,100%{ opacity:.75; } 50%{ opacity:1; } } @keyframes kg-wellen { 0%,100%{ opacity:.55; } 50%{ opacity:1; } } /* Farbverläufe der Karte (Land, Meer, Umkreis, Rand) */ body.dh-h5 #k-land stop:first-child, body.dh-h5 #ka-land stop:first-child{ stop-color:#FFFDF6; } body.dh-h5 #k-land stop:last-child, body.dh-h5 #ka-land stop:last-child{ stop-color:#F6E8C4; } body.dh-h5 #k-meer stop:nth-child(1), body.dh-h5 #ka-meer stop:nth-child(1){ stop-color:#C9A24E; } body.dh-h5 #k-meer stop:nth-child(2), body.dh-h5 #ka-meer stop:nth-child(2){ stop-color:#DDBF77; } body.dh-h5 #k-meer stop:nth-child(3), body.dh-h5 #ka-meer stop:nth-child(3){ stop-color:#EDD8A3; } body.dh-h5 #k-umkreis stop:last-child, body.dh-h5 #ka-umkreis stop:last-child{ stop-color:#E9D29A;stop-opacity:.45; } body.dh-h5 #k-vignette stop, body.dh-h5 #ka-vignette stop{ stop-color:#B8913A; } body.dh-h5 #k-vignette stop:last-child, body.dh-h5 #ka-vignette stop:last-child{ stop-opacity:.12; } /* Flüsse, Seen, Küste, Straßen: Gold statt Grau/Türkis */ body.dh-h5 .karte path[stroke="#86C2B6"]{ stroke:#E3C77F; } body.dh-h5 .karte path[fill="#9CCFC4"]{ fill:#E9D29A; } body.dh-h5 .karte path[stroke="#2F7D70"]{ stroke:#8E6B1F; } body.dh-h5 .karte path[stroke="#9AA6B4"]{ stroke:#D9BC72; } body.dh-h5 .karte path[stroke="#E6C98E"]{ stroke:#E9D29A; } /* Beschriftungen und Marken */ body.dh-h5 .karte .k-wasser{ fill:#6E5316;stroke:#FFFDF6;stroke-opacity:.6; } body.dh-h5 .karte .k-gross{ fill:#FFFDF6;fill-opacity:.95;stroke:#8E6B1F;stroke-opacity:.35; } body.dh-h5 .karte .stadt circle{ fill:#B39650; } body.dh-h5 .karte .stadt text{ fill:#7D6A3E;stroke:#FFFDF6; } body.dh-h5 .karte .k-radius{ stroke:#B8913A;stroke-width:2.4;stroke-opacity:1;animation:kg-umlauf 30s linear infinite; } body.dh-h5 .karte circle[fill="url(#k-umkreis)"], body.dh-h5 .karte circle[fill="url(#ka-umkreis)"]{ animation:kg-atmen 6s ease-in-out infinite; } body.dh-h5 .karte path[fill="url(#k-wellen)"], body.dh-h5 .karte path[fill="url(#ka-wellen)"]{ animation:kg-wellen 4.5s ease-in-out infinite; } body.dh-h5 .karte .ort-halo{ fill:#E9D29A; } body.dh-h5 .karte .ort-punkt{ fill:#8E6B1F; } body.dh-h5 .karte .ort-schild{ fill:#FFFDF6;stroke:#E9D29A; } body.dh-h5 .karte .ort-name{ fill:#2A2214; } body.dh-h5 .karte .ort.is-aktiv .ort-schild{ fill:#B8913A;stroke:#B8913A; } body.dh-h5 .karte .ort.is-aktiv .ort-name{ fill:#FFFDF6; } body.dh-h5 .karte .k-pin{ fill:#8E6B1F; } body.dh-h5 .karte .k-herz{ fill:#F3E3B5; } body.dh-h5 .karte .k-puls{ fill:#E9D29A;fill-opacity:.6; } body.dh-h5 .karte .k-hauptschild{ fill:#8E6B1F; } body.dh-h5 .karte .k-hauptname{ fill:#FFFDF6; } body.dh-h5 .karte .k-radiusschild{ fill:#FFFDF6;stroke:#E9D29A; } body.dh-h5 .karte .k-radiustext{ fill:#7D5F1C; } body.dh-h5 .karte .k-massstab text,body.dh-h5 .karte .k-kompass text,body.dh-h5 .karte .k-quelle{ fill:#6B5E45; } body.dh-h5 .karte .k-massstab rect[fill="#0E2439"]{ fill:#8E6B1F; } body.dh-h5 .karte .k-massstab rect[stroke="#0E2439"]{ stroke:#8E6B1F; } body.dh-h5 .karte .k-kompass circle{ stroke:#E9D29A; } /* Rahmen: goldener Schimmer, hebt sich beim Überfahren */ body.dh-h5 .area-map .karte{ box-shadow:0 30px 60px -34px rgba(142,107,31,.55),0 0 0 1px rgba(233,210,154,.8); transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out); } body.dh-h5 .area-map .karte:hover{ transform:translateY(-4px);box-shadow:0 40px 70px -34px rgba(142,107,31,.65),0 0 0 5px rgba(233,210,154,.4); } @media (prefers-reduced-motion:reduce){ body.dh-h5 .karte *{ animation:none!important; } } /* ===================================================================== Weiterempfehlen – neu & dynamisch (Alltag: Herzen, Salbei/Apricot · Haus: Goldfunken, Gold/Hellgold) ===================================================================== */ @property --em-winkel{ syntax:"";inherits:false;initial-value:0deg; } @keyframes em-umlauf { to{ --em-winkel:360deg; } } @keyframes em-schweben { 0%,100%{ transform:translateY(0) rotate(var(--r,0deg)); opacity:.55; } 50%{ transform:translateY(-16px) rotate(calc(var(--r,0deg) + 10deg)); opacity:1; } } @keyframes em-funke { 0%{ transform:translate(-50%,-50%) scale(.4);opacity:1; } 100%{ transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1);opacity:0; } } @keyframes em-gluehen { 0%,100%{ box-shadow:0 10px 22px -12px rgba(30,168,85,.7),0 0 0 0 rgba(30,168,85,.35); } 50%{ box-shadow:0 14px 26px -12px rgba(30,168,85,.8),0 0 0 8px rgba(30,168,85,0); } } @keyframes em-cursor { 50%{ border-right-color:transparent; } } .share .empf-buehne{ position:relative;max-width:840px;margin:0 auto; } .share .empf-karte{ position:relative;max-width:none;border-radius:32px;border:0; padding:clamp(24px,3.4vw,40px); box-shadow:0 40px 80px -46px rgba(30,24,12,.45); isolation:isolate; } /* umlaufender Rahmen (Farben je Bereich) */ .share .empf-karte::before{ content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;z-index:-1;pointer-events:none; background:conic-gradient(from var(--em-winkel),var(--em-r1),var(--em-r2) 25%,var(--em-r3) 50%,var(--em-r2) 75%,var(--em-r1)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude; animation:em-umlauf 10s linear infinite; } .share .share-label{ display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--em-tief); } .share .share-label b{ display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--em-r2);color:var(--em-auf);font-size:.72rem;letter-spacing:0; } .share .empf-fuer{ border:0;padding:0;margin:0 0 20px; } .share .empf-chips{ display:flex;flex-wrap:wrap;gap:8px; } .share .empf-chip{ font:inherit;font-size:.92rem;font-weight:600;padding:10px 16px;border-radius:999px;cursor:pointer; border:1px solid var(--em-linie);background:rgba(255,255,255,.8);color:var(--em-tief); transition:transform .25s var(--ease-out),background .25s,box-shadow .25s,border-color .25s; } .share .empf-chip:hover{ transform:translateY(-2px);border-color:var(--em-r2);box-shadow:0 10px 18px -12px var(--em-schatten); } .share .empf-chip[aria-pressed="true"]{ background:var(--em-voll);color:var(--em-auf);border-color:transparent;box-shadow:0 12px 22px -12px var(--em-schatten); } /* Nachricht als Chat-Sprechblase */ .share .empf-blase{ position:relative;margin:0 0 6px; } .share .empf-blase textarea.share-text{ display:block;width:100%;min-height:128px;resize:vertical;margin:0; font:inherit;font-size:1rem;line-height:1.6;color:var(--ink); padding:16px 18px 30px;border:1px solid var(--em-linie);border-left:1px solid var(--em-linie); border-radius:22px 22px 22px 6px;background:var(--em-blase); box-shadow:0 14px 28px -22px var(--em-schatten); transition:border-color .25s,box-shadow .25s; } .share .empf-blase textarea.share-text:focus{ outline:none;border-color:var(--em-r2);box-shadow:0 0 0 4px var(--em-fokus),0 14px 28px -22px var(--em-schatten); } .share .empf-blase textarea.is-tippen{ border-right:2px solid var(--em-r2);animation:em-cursor .6s step-end infinite; } .share .empf-haken{ position:absolute;right:14px;bottom:9px;font-size:.78rem;font-weight:700;color:var(--em-r2);letter-spacing:-.12em;pointer-events:none; } .share .empf-anhang{ margin:0 0 20px;font-size:.84rem;color:var(--muted); } .share .empf-anhang strong{ color:var(--em-tief);font-weight:600; } /* Versand-Knöpfe */ .share .share-knoepfe{ display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px; } .share .share-knopf{ justify-content:center;padding:13px 16px;border-radius:999px;font-weight:700; border:1px solid var(--em-linie);background:#fff;color:var(--em-tief); transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),background .25s; } .share .share-knopf .icon{ transition:transform .3s var(--ease-out); } .share .share-knopf:hover{ transform:translateY(-3px);box-shadow:0 16px 26px -14px var(--em-schatten);border-color:var(--em-r2); } .share .share-knopf:hover .icon{ transform:scale(1.15) rotate(-6deg); } .share .share-knopf:active{ transform:translateY(1px) scale(.98); } .share .share-knopf.whatsapp{ background:#1EA855;border-color:#1EA855;color:#fff;animation:em-gluehen 3s ease-in-out infinite; } .share .share-knopf.whatsapp:hover{ background:#178B45;border-color:#178B45; } .share .share-knopf.teilen{ background:var(--em-voll);border-color:transparent;color:var(--em-auf); } .share textarea.share-link{ resize:none;font:inherit;font-size:.9rem;border-color:var(--em-r2); } .share .share-status{ color:var(--em-tief); } /* schwebende Deko & Funken */ .share .empf-deko{ position:absolute;inset:-30px -40px;pointer-events:none;z-index:0; } .share .empf-deko span{ position:absolute;width:var(--g,18px);height:var(--g,18px);background:var(--em-deko) center/contain no-repeat;animation:em-schweben var(--t,6s) ease-in-out infinite;animation-delay:var(--v,0s); } .share .empf-deko span:nth-child(1){ left:2%;top:12%;--g:22px;--t:7s;--r:-12deg; } .share .empf-deko span:nth-child(2){ right:3%;top:6%;--g:16px;--t:5.5s;--v:-1s;--r:14deg; } .share .empf-deko span:nth-child(3){ left:-1%;bottom:22%;--g:14px;--t:6.5s;--v:-2s; } .share .empf-deko span:nth-child(4){ right:0;bottom:14%;--g:24px;--t:8s;--v:-3s;--r:-8deg; } .share .empf-deko span:nth-child(5){ left:48%;top:-2%;--g:12px;--t:5s;--v:-1.5s; } .share .empf-deko span:nth-child(6){ right:24%;bottom:-3%;--g:15px;--t:7.5s;--v:-4s;--r:20deg; } .share .empf-karte{ z-index:1; } .share .empf-funke{ position:absolute;z-index:5;width:14px;height:14px;pointer-events:none;background:var(--em-deko) center/contain no-repeat;animation:em-funke 1.1s var(--ease-out) forwards; } @media (max-width:640px){ .share .empf-deko{ inset:-16px -8px; } .share .share-knoepfe{ grid-template-columns:1fr 1fr; } } @media (prefers-reduced-motion:reduce){ .share .empf-karte::before,.share .empf-deko span,.share .share-knopf.whatsapp,.share .empf-blase textarea{ animation:none!important; } } /* ---------- Alltagsbegleitung: Salbei & Apricot, Herzen ---------- */ body[data-area="alltag"] .share{ --em-r1:#3F7C6B; --em-r2:#E7A277; --em-r3:#F6D2B8; --em-tief:#2B5F51; --em-auf:#fff; --em-voll:linear-gradient(135deg,#3F7C6B,#5E9A88); --em-linie:#E3D8C6; --em-schatten:rgba(43,95,81,.55); --em-blase:linear-gradient(180deg,#FFFFFF,#FDF3EA); --em-fokus:rgba(231,162,119,.25); --em-deko:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.2C.9 8.4 3 5 6.4 5c2.1 0 3.5 1.2 4.4 2.5C11.7 6.2 13.1 5 15.2 5c3.4 0 5.5 3.4 4 6.8C17.1 16.4 12 21 12 21z' fill='%23E7A277'/%3E%3C/svg%3E"); background:linear-gradient(180deg,var(--page-warm),#FBF1E8); } body[data-area="alltag"] .share .empf-karte{ background:linear-gradient(160deg,#FFFFFF 0%,#FFF8F2 60%,#FBEADC 100%); } body[data-area="alltag"] .share .empf-deko span:nth-child(even){ filter:hue-rotate(105deg) saturate(.6); } /* ---------- Hausmeisterservice: Gold & Hellgold, Goldfunken ---------- */ body[data-area="haus"] .share{ --em-r1:#B8913A; --em-r2:#E9D29A; --em-r3:#8E6B1F; --em-tief:#7D5F1C; --em-auf:#2B220F; --em-voll:linear-gradient(135deg,#E9D29A,#B8913A); --em-linie:#EADFC6; --em-schatten:rgba(142,107,31,.6); --em-blase:linear-gradient(180deg,#FFFFFF,#FBF3DE); --em-fokus:rgba(233,210,154,.35); --em-deko:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1l2.6 7.4L22 11l-7.4 2.6L12 21l-2.6-7.4L2 11l7.4-2.6z' fill='%23C9A24E'/%3E%3C/svg%3E"); background:linear-gradient(180deg,#FBF6EA,#F6ECD3); } body[data-area="haus"] .share .empf-karte{ background:linear-gradient(150deg,#FFFDF6 0%,#FBF1D9 55%,#F2E0B0 100%); } body[data-area="haus"] .share .share-knopf.whatsapp{ color:#fff; }