/* Theme Name: Promo Studio Theme URI: https://promostudio.de Author: Promo Studio Description: Klassisches WordPress-Theme für Promo Studio – Grafikdesign, Motion Graphic und UI/UX Design. Version: 1.0.0 Requires PHP: 7.4 Text Domain: promo-studio */ :root{ /* === Neue Design-Tokens === */ --bg-page:#eef9f0; --teal-dark:#1f5560; --teal-light:#3e93a0; --olive:#8fbf5f; --text-gray:#5b6b6e; /* === Bestehende Variablen, auf die neue Palette gemappt === */ --mint:#eef9f0;--mint-2:#eef9f0;--nav-bg:var(--teal-dark); --nav-active:var(--olive); --hero-title:var(--olive);--btn-grad:linear-gradient(135deg,#a8d17a,var(--olive)); --teal:var(--teal-light);--teal-deep:var(--teal-dark);--red:#e6404e;--ink:var(--text-gray); --hero-grad:linear-gradient(90deg,#3f8a8e 0%,#569e8f 15%,#5ba7af 50%,#4296a6 80%,#2c7383 100%); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:'Poppins','Segoe UI',Arial,sans-serif;background:var(--bg-page);color:var(--text-gray);overflow-x:hidden} img{max-width:100%;display:block} a{text-decoration:none;color:inherit} /* Header (shared) */ .header{background:var(--bg-page);padding:18px 40px 0;border-bottom-left-radius:48px;box-shadow:0 8px 20px rgba(20,60,65,.08);position:relative;z-index:5} .header-right{padding-bottom:0} .header-right .nav{margin-right:-40px;margin-bottom:0} .header-right .nav ul{border-radius:0} .header-top{display:flex;align-items:center;gap:30px;flex-wrap:wrap} .header-right{flex:1;display:flex;flex-direction:column;align-items:flex-end;gap:14px;min-width:0} .header-right .nav{width:100%} /* Logo – Textmarke „Promo Studio" mit Tagline */ .logo{display:flex;align-items:center;line-height:1} .logo-link{display:inline-flex;flex-direction:column;gap:6px;text-decoration:none} .logo .mark{font-weight:800;font-size:34px;letter-spacing:.3px;color:var(--teal-dark);line-height:1} .logo .mark span{color:var(--olive)} .logo .tag{font-size:12px;font-weight:700;color:var(--teal-dark);letter-spacing:.6px} .header-tools{display:flex;align-items:center;gap:18px} /* Search: schlicht mit Trennstrich und Lupe (Mockup-Style) */ .search{display:flex;align-items:center;gap:12px;color:var(--teal-light);font-weight:500} .search input{border:none;background:transparent;font-family:inherit;font-size:15px;color:var(--teal-light);width:70px;outline:none;padding:4px 0} .search input::placeholder{color:var(--teal-light);opacity:.9} .search .bar{display:block;width:1px;height:22px;background:#a9c9c9} .search button{background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center} .search svg{width:22px;height:22px;color:var(--teal-light);cursor:pointer;stroke-width:2.4;transition:.2s} .search button:hover svg,.search svg:hover{color:var(--teal-dark)} /* Screen-Reader-Text (unsichtbar aber vorhanden) */ .screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* Social Icons: Kreise mit Teal-Rand */ .socials{display:flex;align-items:center;gap:10px} .socials a{width:34px;height:34px;border:1.8px solid var(--teal-light);border-radius:50%;display:grid;place-items:center;color:var(--teal-light);transition:.2s;background:transparent} .socials a:hover{background:var(--teal-light);color:#fff;transform:translateY(-2px)} .socials svg{width:16px;height:16px} /* Facebook (letztes Icon) gefüllt darstellen wie im Mockup */ .socials a:last-child{background:var(--teal-light);color:#fff} .socials a:last-child:hover{background:var(--teal-dark);border-color:var(--teal-dark)} /* + Button (Schnellkontakt) rot wie im Mockup */ .plus{color:var(--red);font-size:34px;font-weight:300;line-height:1;background:none;border:none;cursor:pointer;font-family:inherit;transition:.2s;padding:0 4px} .plus:hover{transform:rotate(90deg)} /* Navigation mit Grün→Teal-Verlauf, gerade Kanten */ .nav{display:flex;margin:0;min-width:0} .nav ul{display:flex;width:100%;list-style:none;background:linear-gradient(90deg,#3f8a8e 0%,#3f8a8e 15%,#4a9a94 40%,#3a7a85 75%,#2a7081 100%);border-radius:6px;overflow:hidden} .nav li{list-style:none;flex:1} .nav a{display:block;padding:18px 10px;color:#fff;font-weight:600;font-size:17px;transition:.2s;white-space:nowrap;text-align:center;letter-spacing:.2px} .nav a:hover{background:rgba(255,255,255,.12)} .nav a.active{background:linear-gradient(90deg,#85c27e 0%,#beddaf 60%,#e9eecf 100%);color:#fff;font-weight:700} /* Footer + floating buttons (shared) */ .footer{height:90px;background:linear-gradient(90deg,#8fce8a,#3f9a8c,#2a6b7e);display:grid;place-items:center;color:#eafaf0;font-weight:500;margin-top:30px} .floating{position:fixed;top:52%;transform:translateY(-50%);z-index:20;width:54px;height:54px;border-radius:50%;background:#fff;border:1.5px solid var(--teal);display:grid;place-items:center;color:var(--teal);box-shadow:0 6px 18px rgba(0,0,0,.12);transition:.2s} .floating:hover{background:var(--teal);color:#fff} .floating.wa{left:26px}.floating.mail{right:26px}.floating svg{width:24px;height:24px} @media(max-width:860px){ .header{padding:16px 18px} .header-top{gap:14px} .nav{flex:1 1 100%;margin:8px 0 0} .nav ul{flex-wrap:wrap}.nav li{flex:1 1 33%}.nav a{padding:11px 14px;font-size:13px} .header-tools{justify-content:center;flex-wrap:wrap} .floating{width:46px;height:46px} } @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} /* ===== front-page (Startseite / Slider) ===== */ .hero{position:relative;background:var(--hero-grad);padding:70px 40px 80px;z-index:1} .hero .slides{position:relative;z-index:6;margin-top:-140px} .hero::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 0%,transparent 38%,rgba(255,255,255,.06) 38%,rgba(255,255,255,.06) 62%,transparent 62%);pointer-events:none} .slides{position:relative;z-index:2;max-width:1160px;margin:0 auto} .slide{display:none;align-items:stretch;gap:0;min-height:420px;background:#f4faf1;background-image:repeating-linear-gradient(0deg,rgba(70,120,90,.05) 0 1px,transparent 1px 22px);border:1.5px solid #b8dfb0;border-radius:14px;padding:0;box-shadow:0 12px 30px rgba(15,45,50,.15);position:relative;z-index:3;overflow:visible} .slide.is-active{display:flex;animation:fade .5s ease} @keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .slide-text{flex:0 0 42%;color:var(--text-gray);text-align:center;padding:44px 40px 44px 44px;display:flex;flex-direction:column;justify-content:center} .slide-text h1{font-size:34px;font-weight:800;color:var(--olive);line-height:1.1;margin-bottom:16px;letter-spacing:.3px;text-align:center} .slide-text p{font-size:14px;line-height:1.75;max-width:280px;margin:0 auto 22px;color:#5b6b6e;text-align:center} .slide-actions{display:inline-flex;gap:10px;flex-wrap:wrap;position:relative;padding-left:22px;justify-content:center;margin:0 auto} .slide-actions::before{content:"";position:absolute;left:8px;top:-40px;bottom:12px;width:1.8px;background:var(--teal-dark)} .slide-actions::after{content:"";position:absolute;left:3px;bottom:6px;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:8px solid var(--teal-dark)} .btn{display:inline-block;padding:13px 30px;border-radius:9px;font-weight:600;font-size:15px;cursor:pointer;border:none;font-family:inherit;transition:.2s} .btn-primary{background:var(--btn-grad);color:#16433a}.btn-primary:hover{filter:brightness(1.05)} .btn-ghost{background:transparent;color:var(--teal);border:1.5px solid var(--teal)}.btn-ghost:hover{background:var(--teal);color:#fff} .slide-art{flex:1;display:grid;place-items:center;position:relative;padding:20px} .slide .btn{padding:7px 14px 7px 16px;border-radius:6px;background:transparent;color:var(--teal-dark);border:1.3px solid var(--teal-dark);font-size:12.5px;font-weight:600;display:inline-flex;align-items:center;gap:8px;text-decoration:none;transition:.2s} .slide .btn:hover{background:var(--teal-dark);color:#fff;filter:none} .slide .btn svg{width:16px;height:16px} .art-ph{width:100%;max-width:380px;aspect-ratio:4/3;border-radius:18px;border:2px dashed rgba(45,125,130,.35);background:rgba(45,125,130,.06);display:grid;place-items:center;text-align:center;color:var(--teal);font-size:13px;padding:18px;gap:6px;font-weight:500} .art-ph .emoji{font-size:40px} .slide-img{width:100%;max-width:380px;aspect-ratio:4/3;border-radius:18px;object-fit:contain;box-shadow:0 14px 34px rgba(20,60,65,.22)} .slider-nav{position:absolute;left:6px;right:6px;top:50%;transform:translateY(-50%);display:flex;justify-content:space-between;z-index:4;pointer-events:none} .slider-nav button{pointer-events:auto;width:42px;height:42px;border-radius:50%;border:none;background:transparent;color:var(--teal);cursor:pointer;font-size:26px;display:grid;place-items:center;transition:.2s;box-shadow:none} .slider-nav button:hover{color:#164b50;transform:translateY(-2px);background:transparent} .dots{display:flex;gap:10px;justify-content:center;margin-top:34px;position:relative;z-index:2} .dots button{width:11px;height:11px;border-radius:50%;border:none;background:rgba(255,255,255,.4);cursor:pointer;transition:.2s} .dots button.active{background:var(--hero-title);width:30px;border-radius:6px} .features{max-width:1100px;margin:-70px auto 0;padding:0 40px 50px;position:relative;z-index:4;display:grid;grid-template-columns:1fr 1fr;gap:26px} .feature{display:flex;gap:18px;align-items:flex-start;background:#eef8ee;border:none;border-radius:10px 22px 22px 22px;padding:28px 30px;box-shadow:0 14px 30px rgba(20,60,65,.15);transition:.3s} .feature .icon{flex-shrink:0;width:auto;height:auto;border:none;border-radius:0;display:grid;place-items:center;color:#3f9a86;transition:.3s} .feature .icon svg{width:46px;height:46px;stroke-width:1.3} .feature p{font-size:14.5px;line-height:1.75;color:#3a6168;transition:.3s} .feature:hover{background:linear-gradient(135deg,#8fce8a,#4f9a72);transform:translateY(-3px)} .feature:hover p,.feature:hover .icon{color:#fff} @media(max-width:860px){ .hero{padding:70px 20px 50px}.slide{flex-direction:column;text-align:center;gap:28px} .slide-text{border-radius:22px}.slide{border-radius:22px;padding:30px 26px} .slide-text h1{font-size:32px}.slide-text p{margin-left:auto;margin-right:auto} .slide-actions{justify-content:center;padding-left:0} .slide-actions::before,.slide-actions::after{display:none} .slider-nav{position:static;transform:none;justify-content:center;gap:14px;margin-top:26px} .features{grid-template-columns:1fr;padding:0 20px;margin-top:-30px} } /* ===== Grafikdesign (Tabs/Panels) ===== */ .svc{position:relative;background:var(--hero-grad);padding:80px 40px 70px} .svc::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 0,transparent 40%,rgba(255,255,255,.06) 40%,rgba(255,255,255,.06) 64%,transparent 64%);pointer-events:none} .svc-inner{position:relative;z-index:2;max-width:1100px;margin:0 auto} .svc h1{font-size:46px;font-weight:700;color:var(--hero-title);margin-bottom:16px} .svc-intro{color:#e7f5ef;max-width:760px;line-height:1.7;margin-bottom:30px;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.25)} .tabs{display:flex;gap:34px;flex-wrap:wrap;margin-bottom:44px} .tab{padding:8px 0;border:none;border-bottom:2.5px solid transparent;background:none;color:#e6f4ec;font-family:inherit;font-weight:600;font-size:17px;cursor:pointer;transition:.2s} .tab:hover{color:#fff}.tab.active{color:var(--hero-title);border-bottom-color:var(--hero-title)} .panel{display:none;align-items:flex-start;gap:56px;background:transparent;padding:10px 0 30px;border-radius:0;box-shadow:none;position:relative;z-index:3} .panel.is-active{display:flex;animation:fade .4s ease} .panel-text{flex:1;color:#e9f6ef} .panel-text h2{display:inline-block;font-size:26px;font-weight:700;color:var(--hero-title);margin-bottom:24px;border:1.5px solid rgba(255,255,255,.55);border-radius:10px;padding:14px 34px;background:rgba(255,255,255,.05)} .panel-text p{line-height:1.85;margin-bottom:16px;color:#e9f6ef;font-size:15px} .panel-text .btn{margin-top:10px;padding:14px 44px;border-radius:9px;font-weight:600;font-size:16px;cursor:pointer;border:1.5px solid var(--hero-title);font-family:inherit;background:transparent;color:var(--hero-title);transition:.2s} .panel-text .btn:hover{background:var(--hero-title);color:#1f4f3a;filter:none} .panel-art{flex:1;display:grid;place-items:center;padding:14px} .panel-art .art-ph,.panel-art .slide-img{max-width:480px;width:100%;border-radius:18px 18px 18px 70px;border:6px solid #fff;outline:1.5px solid rgba(255,255,255,.55);outline-offset:12px;box-shadow:0 20px 44px rgba(10,40,45,.32);aspect-ratio:4/3;object-fit:cover} @media(max-width:860px){ .svc{padding:60px 18px 50px}.svc h1{font-size:34px}.panel{flex-direction:column;text-align:center;gap:28px}.panel-art{order:-1} .panel{border-radius:20px;padding:26px 22px} } /* ===== Motion Graphic (Tabs/Player) ===== */ .mg{position:relative;background:var(--hero-grad);padding:70px 40px 70px} .mg::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 0,transparent 40%,rgba(255,255,255,.06) 40%,rgba(255,255,255,.06) 64%,transparent 64%);pointer-events:none} .mg-inner{position:relative;z-index:2;max-width:1000px;margin:0 auto} .mg .tabs{justify-content:center;margin-bottom:34px} .player-wrap{display:none}.player-wrap.is-active{display:block;animation:fade .4s ease} .player{background-color:#f8fcf8;background-image:repeating-linear-gradient(0deg,rgba(45,125,130,.08) 0 1px,transparent 1px 26px),repeating-linear-gradient(90deg,rgba(45,125,130,.045) 0 1px,transparent 1px 64px);border-radius:24px 24px 24px 100px;padding:44px 48px;box-shadow:0 24px 52px rgba(15,45,50,.3)} .player h2{text-align:center;font-size:42px;font-weight:500;color:#4b8b90;margin-bottom:30px} .screen{position:relative;aspect-ratio:16/9;border-radius:12px;background:transparent;display:grid;place-items:center;overflow:hidden;border:none} .play-btn{width:92px;height:92px;border-radius:50%;background:linear-gradient(135deg,#c8ec8e,#9fd66f);border:none;cursor:pointer;display:grid;place-items:center;box-shadow:0 10px 26px rgba(90,150,70,.35);transition:.2s} .play-btn:hover{transform:scale(1.06)}.play-btn svg{width:36px;height:36px;color:#fff;margin-left:5px} .screen .hint{position:absolute;bottom:12px;left:0;right:0;text-align:center;font-size:12px;color:#3a6168;font-weight:500} .real-video{width:100%;height:100%;object-fit:cover;background:#000} .real-embed{width:100%;height:100%;border:0} .controls{display:flex;align-items:center;gap:14px;margin-top:20px;color:#2c5b46;background:linear-gradient(90deg,#b7dc90,#5aa982);border-radius:14px;padding:14px 20px;box-shadow:0 10px 24px rgba(20,60,65,.18)} .controls svg{width:18px;height:18px} .timeline{flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,.55);position:relative} .timeline::before{content:"";position:absolute;left:0;top:0;bottom:0;width:32%;background:#2f6f7f;border-radius:3px} .controls .time{font-size:12px;font-variant-numeric:tabular-nums} .desc{display:flex;gap:20px;align-items:flex-start;margin-top:24px;background:rgba(47,111,127,.88);border-radius:10px 22px 22px 22px;padding:26px 28px;color:#eafaf0;box-shadow:0 14px 32px rgba(15,45,50,.28)} .desc .ic{flex-shrink:0;width:62px;height:62px;border-radius:14px;background:#cfeea0;display:grid;place-items:center;font-size:28px} .desc-text strong{display:block;margin-bottom:6px;font-size:17px;color:#cfeea0}.desc-text p{font-size:14.5px;line-height:1.75;color:#f0faf4} @media(max-width:860px){ .mg{padding:50px 16px}.player{padding:22px;border-radius:20px}.player h2{font-size:22px} } /* ===== UI/UX Design ===== */ .hero-inner{position:relative;z-index:2;max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:50px;background-color:#f8fcf8;background-image:repeating-linear-gradient(0deg,rgba(45,125,130,.08) 0 1px,transparent 1px 26px),repeating-linear-gradient(90deg,rgba(45,125,130,.045) 0 1px,transparent 1px 64px);padding:44px 56px;border-radius:24px 24px 24px 100px;box-shadow:0 26px 56px rgba(15,45,50,.32)} .hero-text{flex:1;color:var(--ink)} .hero-text h1{font-size:42px;font-weight:700;background:linear-gradient(90deg,#57b087,#2f7d5c);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1.06;margin-bottom:18px} .hero-text p{font-size:15.5px;line-height:1.75;max-width:440px;margin-bottom:26px;color:#5a7d80} .hero-actions{display:flex;gap:16px;flex-wrap:wrap;position:relative;padding-left:26px} .hero-actions::before{content:"";position:absolute;left:0;top:-34px;bottom:8px;width:2px;background:var(--teal)} .hero-actions::after{content:"";position:absolute;left:-4px;bottom:2px;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid var(--teal)} .hero-art{flex:1;display:grid;place-items:center} .services{max-width:1100px;margin:-70px auto 0;padding:0 40px 90px;position:relative;z-index:4} .services h2{text-align:center;font-size:30px;font-weight:700;color:#2d6e74;margin-bottom:10px} .services .sub{text-align:center;color:#5a7d80;margin-bottom:34px} .portfolio{display:grid;grid-template-columns:1fr 1fr;gap:26px;position:relative;z-index:4} .portfolio-card{position:relative;border-radius:14px 46px 14px 46px;overflow:hidden;aspect-ratio:4/3;box-shadow:0 16px 36px rgba(20,60,65,.2)} .portfolio-card img{width:100%;height:100%;object-fit:cover} .portfolio-card .ph{width:100%;height:100%;display:grid;place-items:center;background:rgba(45,125,130,.08);border:2px dashed rgba(45,125,130,.35);color:var(--teal);text-align:center;padding:20px;font-size:13px;font-weight:500} .portfolio-card .label{position:absolute;left:0;right:0;bottom:0;padding:18px 20px;background:linear-gradient(90deg,var(--teal-deep),var(--teal));color:#bfe9a0;font-weight:700;font-size:24px;text-align:center;transition:.25s} .portfolio-card .card-overlay{position:absolute;inset:0;background:linear-gradient(160deg,rgba(143,206,138,.82),rgba(47,125,131,.88) 60%,rgba(31,95,112,.9));backdrop-filter:blur(2px);color:#f2fbf6;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;text-align:center;padding:36px 30px;gap:16px;opacity:0;transition:.25s} .portfolio-card:hover .card-overlay{opacity:1} .portfolio-card:hover{outline:1.5px solid rgba(205,240,170,.85);outline-offset:-1px} .portfolio-card:hover .label{opacity:0} .portfolio-card .card-overlay h3{color:#eafff2;font-size:26px;font-weight:700;text-shadow:0 1px 6px rgba(20,60,65,.25)} .portfolio-card .card-overlay p{font-size:14.5px;line-height:1.8;color:#f6fdf9;max-width:430px} .portfolio-card .card-overlay .btn{background:transparent;border:1.5px solid rgba(255,255,255,.75);color:#eafff2;display:inline-flex;align-items:center;gap:10px;margin-top:6px} .portfolio-card .card-overlay .btn:hover{background:rgba(255,255,255,.16)} .portfolio-card .card-overlay .btn svg{width:20px;height:20px} @media(max-width:860px){ .hero-inner{flex-direction:column;text-align:center;border-radius:22px;padding:30px 26px} .hero-text h1{font-size:30px}.hero-text p{margin:0 auto 28px} .hero-actions{justify-content:center;padding-left:0} .hero-actions::before,.hero-actions::after{display:none} .hero-art{order:-1} .services{padding:0 20px 50px;margin-top:-30px}.portfolio{grid-template-columns:1fr} } /* ===== Kontakt (Formular + Modal) ===== */ .contact{position:relative;background:var(--hero-grad);padding:70px 40px 80px;min-height:80vh} .contact::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 0,transparent 40%,rgba(255,255,255,.06) 40%,rgba(255,255,255,.06) 64%,transparent 64%);pointer-events:none} .contact-inner{position:relative;z-index:2;max-width:1100px;margin:0 auto} .contact h1{font-size:52px;font-weight:700;color:var(--hero-title);margin-bottom:16px} .contact-intro{color:#e7f5ef;max-width:760px;line-height:1.7;margin-bottom:48px} .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px} .contact-grid form{max-width:420px} .col-title{color:var(--hero-title);font-weight:600;font-size:18px;margin-bottom:22px} .field{margin-bottom:18px} .field input,.field textarea{width:100%;padding:14px 16px;border:1.5px solid rgba(225,245,230,.55);border-radius:8px;background:rgba(255,255,255,.05);color:#fff;font-family:inherit;font-size:15px;outline:none;transition:.2s} .field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.72)} .field input:focus,.field textarea:focus{border-color:var(--hero-title);background:rgba(255,255,255,.1)} .field textarea{resize:vertical;min-height:120px} .send{display:inline-flex;align-items:center;justify-content:space-between;gap:14px;width:100%;padding:14px 24px;border:1.5px solid var(--hero-title);border-radius:8px;background:transparent;color:var(--hero-title);font-family:inherit;font-weight:600;font-size:16px;cursor:pointer;transition:.2s} .send:hover{background:var(--hero-title);color:#1f4f3a;filter:none}.send svg{width:22px;height:22px} .send:disabled{opacity:.6;cursor:default} .touch-item{display:flex;align-items:center;gap:16px;margin-bottom:24px;color:#eafaf0} .touch-item .ic{width:auto;height:auto;border:none;border-radius:0;display:grid;place-items:center;color:var(--hero-title);flex-shrink:0} .touch-item .ic svg{width:26px;height:26px} .touch-item .lbl{font-size:13px;opacity:.8}.touch-item .val{font-size:16px;font-weight:500} .formnote{margin-top:14px;font-size:13px;color:#dff2e7;opacity:0;transition:.3s}.formnote.show{opacity:1} .formnote.error{color:#ffd0d4} .overlay{position:fixed;inset:0;background:rgba(20,50,55,.55);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;z-index:50;padding:20px} .overlay.open{display:flex;animation:fade .25s ease} .modal{background:var(--mint);border-radius:22px;padding:26px;width:100%;max-width:780px;box-shadow:0 30px 70px rgba(0,0,0,.3)} .modal-head{display:flex;align-items:center;gap:18px;margin-bottom:26px} .modal-close{width:48px;height:48px;border-radius:12px;background:var(--btn-grad);border:none;color:#fff;font-size:22px;cursor:pointer;display:grid;place-items:center} .modal-title{flex:1;background:var(--hero-grad);color:#fff;text-align:center;padding:16px;border-radius:12px;font-size:22px;font-weight:600} .modal .grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px} .modal input,.modal textarea{width:100%;padding:14px 16px;border:1.5px solid #b7d4cc;border-radius:11px;background:#fff;font-family:inherit;font-size:15px;color:var(--ink);outline:none} .modal input::placeholder,.modal textarea::placeholder{color:#8fb0a8} .modal input:focus,.modal textarea:focus{border-color:var(--teal)} .modal textarea{min-height:150px;resize:vertical;margin-bottom:18px} .modal .send{background:var(--hero-grad);color:#fff;justify-content:center;border:none;border-radius:11px} @media(max-width:860px){ .contact{padding:50px 18px 60px}.contact h1{font-size:38px}.contact-grid{grid-template-columns:1fr;gap:40px}.modal .grid2{grid-template-columns:1fr} } /* Teal-Hintergrundflächen: nur untere linke Ecke abgerundet, oben gerade */ .hero,.svc,.mg,.contact{border-radius:0 0 0 90px;box-shadow:0 20px 40px rgba(20,60,65,.15)} /* Icon über dem Slide-Titel (vom Slider-JS erzeugt) */ .slide-icon{line-height:0;margin-bottom:12px;color:var(--teal-dark);display:flex;justify-content:center;align-items:center} .slide-icon svg{width:52px;height:52px} /* Footer mit Rechtslinks (Impressum / Datenschutz) */ .footer{height:auto;min-height:90px;padding:22px 20px} .footer-inner{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center} .footer-legal{display:flex;gap:26px;flex-wrap:wrap;justify-content:center} .footer-legal a{color:#eafaf0;font-size:13.5px;text-decoration:underline;text-underline-offset:3px;opacity:.85;transition:.2s} .footer-legal a:hover{opacity:1;color:#fff} /* Rechtstexte (Impressum, Datenschutz) auf normalen Seiten lesbar machen */ .contact-inner .contact-intro h2{color:var(--hero-title);font-size:24px;font-weight:700;margin:30px 0 12px} .contact-inner .contact-intro h3{color:var(--hero-title);font-size:19px;font-weight:600;margin:24px 0 10px} .contact-inner .contact-intro p{color:#e7f5ef;line-height:1.85;margin-bottom:14px;max-width:820px} .contact-inner .contact-intro ul,.contact-inner .contact-intro ol{color:#e7f5ef;line-height:1.85;padding-left:24px;margin-bottom:16px;max-width:820px} .contact-inner .contact-intro li{margin-bottom:6px} .contact-inner .contact-intro a{color:var(--hero-title);text-decoration:underline;text-underline-offset:3px} .contact-inner .contact-intro strong{color:#fff} /* ============================================================ Neue Design-Klassen (Farbpalette bg-page / teal / olive) – nutzbar mit