/*
Theme Name: Thaele Airvision
Author: Thaele Airvision
Description: Farbenfrohes, animiertes Mehrseiten-Theme für Drohnenservice: Baudokumentation, PV-Sichtbesichtigung, Luftaufnahmen. Ohne Thermografie. Keine externen Schriften, keine Tracker.
Version: 1.3
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: thaele-airvision
*/
:root{--bg:#F6F8F7;--panel:#E8EFF0;--ink:#14303F;--muted:#4A6370;--line:#C9D6DA;--accent:#E8541C;--on-accent:#fff;
--sky:#0B1A24;--sky2:#143548;--hud:#7FE3D0;--c:#FF7A3D;--ci:#0B1A24;
--rainbow:linear-gradient(90deg,#FFC425,#FF7A3D,#F0569E,#9B7BFF,#3FA7FF,#2DBE7A);
--body:"Segoe UI","Helvetica Neue",Arial,sans-serif}
@media (prefers-color-scheme:dark){:root{--bg:#0F1E27;--panel:#16303E;--ink:#E6EEF0;--muted:#9DB2BA;--line:#27475A;--accent:#FF7A45;--on-accent:#0B1A24}}
html{scroll-behavior:smooth;scroll-padding-top:80px}
*,*::before,*::after{box-sizing:border-box}
body{display:flex;flex-direction:column;min-height:100vh;margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:1.0625rem;line-height:1.6;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.wrap{max-width:1120px;margin:0 auto;padding:0 clamp(1.25rem,4vw,2.5rem)}
h1,h2,h3{font-family:var(--body);line-height:1.08;margin:0;letter-spacing:-.015em;font-weight:800}
ul{margin:0;padding:0;list-style:none}
.site-header,.site-footer{flex:none}
main{flex:1 0 auto}
.stripe{height:4px;background:var(--rainbow)}

/* Kopf */
.site-header{position:sticky;top:0;z-index:20;background:var(--sky);color:#E6EEF0}
.admin-bar .site-header{top:32px}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:64px}
.brand{font-weight:800;font-size:1.15rem;text-decoration:none;display:flex;align-items:center;gap:.5rem}
.brand svg{width:34px;height:34px}
.mainnav{display:flex;align-items:center;gap:1.4rem}
.mainnav .menu{display:flex;gap:1.3rem;align-items:center}
.mainnav .menu li{position:relative}
.mainnav .menu a{text-decoration:none;color:#B7C9CF;font-size:.97rem;padding:.4rem 0;display:block}
.mainnav .menu a:hover,.mainnav .menu .current-menu-item>a{color:#fff}
.mainnav .menu-item-has-children>a::after{content:"";display:inline-block;margin-left:.45rem;border:4px solid transparent;border-top-color:currentColor;border-bottom:0;vertical-align:middle}
.mainnav .sub-menu{position:absolute;top:100%;left:-1rem;min-width:270px;background:var(--sky);border:1px solid #27475A;border-top:3px solid var(--hud);padding:.5rem 0;display:none}
.mainnav li:hover>.sub-menu,.mainnav li:focus-within>.sub-menu{display:block}
.mainnav .sub-menu a{padding:.5rem 1rem}
.mainnav .sub-menu a:hover{background:#143548}
.menu-toggle{display:none;background:none;color:#fff;border:1px solid #3B5C70;border-radius:8px;padding:.45rem .9rem;font:inherit;cursor:pointer}
.btn{display:inline-block;background:var(--accent);color:var(--on-accent);padding:.85rem 1.4rem;text-decoration:none;border:0;border-radius:999px;font:inherit;font-weight:700;cursor:pointer;transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.25)}
.mainnav .btn{color:#fff;background:#E8541C;padding:.6rem 1.1rem;font-size:.95rem}
.btn.dark{background:#0B1A24;color:#fff}

/* Startseite Hero */
.hero{background:radial-gradient(60% 70% at 85% 0%,rgba(155,123,255,.35),transparent 70%),radial-gradient(50% 60% at 10% 100%,rgba(255,122,61,.28),transparent 70%),radial-gradient(45% 50% at 60% 100%,rgba(63,167,255,.25),transparent 70%),var(--sky);color:#E6EEF0;padding:clamp(2.5rem,7vw,5rem) 0 clamp(3rem,6vw,5rem);position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(1.5rem,4vw,3rem);align-items:center}
.hero h1{font-size:clamp(2.3rem,5.2vw,4.1rem);color:#fff}
.hero h1 span{display:block;opacity:0;transform:translateX(-30px);animation:in .7s cubic-bezier(.2,.8,.2,1) forwards}
.hero h1 span:nth-child(2){animation-delay:.18s;color:#FFC425}
.hero h1 span:nth-child(3){animation-delay:.36s;background:linear-gradient(90deg,#7FE3D0,#3FA7FF,#F0569E);-webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes in{to{opacity:1;transform:none}}
.hero p{max-width:32em;color:#B7C9CF;margin:1.4rem 0 2rem;opacity:0;animation:in .7s .6s forwards}
.cta{display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center;opacity:0;animation:in .7s .8s forwards}
.cta a.l{color:#E6EEF0}
.hud{position:relative;border:1px solid #2B5066;background:rgba(9,22,31,.72);border-radius:6px}
.hud::before,.hud::after{content:"";position:absolute;width:26px;height:26px;border:3px solid var(--hud);pointer-events:none}
.hud::before{top:-3px;left:-3px;border-right:0;border-bottom:0}
.hud::after{bottom:-3px;right:-3px;border-left:0;border-top:0}
.map{width:100%;height:auto;display:block}
.map .g{stroke:#1D3C4C;stroke-width:1}
.map .b{fill:#0F2836;stroke:#7FA6B5;stroke-width:2}
.map .r{fill:none;stroke:#7FA6B5;stroke-width:1;opacity:.5}
.map .trail{fill:none;stroke:url(#tg);stroke:#FF7A3D;stroke-width:3;stroke-dasharray:100;stroke-dashoffset:100;animation:trail 14s linear infinite}
@keyframes trail{0%{stroke-dashoffset:100}92%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
.map .foot{fill:var(--hud);opacity:.18}
.map .arm{stroke:#E6EEF0;stroke-width:3;stroke-linecap:round}
.map .body{fill:#E6EEF0}
.map .cam{fill:#FF7A3D}
.rotor{transform-box:fill-box;transform-origin:center;animation:spin .22s linear infinite}
.rotor line{stroke:var(--hud);stroke-width:2.5;stroke-linecap:round}
@keyframes spin{to{transform:rotate(360deg)}}
.map text{font-family:var(--body);font-size:11px;fill:#7FA6B5}
.tele{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;gap:.5rem;padding:.6rem .9rem;font:600 .78rem/1.2 ui-monospace,Consolas,monospace;color:var(--hud);background:linear-gradient(transparent,rgba(9,22,31,.9))}
.tele i{font-style:normal;color:#7FA6B5;font-weight:400;margin-right:.35rem}
.rec{position:absolute;top:.7rem;left:.9rem;font:600 .78rem ui-monospace,Consolas,monospace;color:#fff;display:flex;align-items:center;gap:.4rem}
.rec::before{content:"";width:9px;height:9px;border-radius:50%;background:#FF4A3D;animation:blink 1.2s steps(2) infinite}
@keyframes blink{50%{opacity:.15}}

/* Laufband mit Farbwechsel */
.ticker{background:var(--sky2);overflow:hidden;white-space:nowrap;font-weight:800;font-size:1.05rem;padding:.75rem 0;border-top:1px solid #2B5066}
.ticker div{display:inline-block;animation:marq 34s linear infinite}
.ticker span{margin:0 1.1rem;color:#5E7F90}
.ticker span:nth-child(12n+1){color:#FFC425}.ticker span:nth-child(12n+3){color:#FF7A3D}.ticker span:nth-child(12n+5){color:#F0569E}
.ticker span:nth-child(12n+7){color:#9B7BFF}.ticker span:nth-child(12n+9){color:#3FA7FF}.ticker span:nth-child(12n+11){color:#2DBE7A}
@keyframes marq{to{transform:translateX(-50%)}}

/* Höhenmesser */
.altimeter{position:fixed;right:14px;top:50%;height:46vh;transform:translateY(-50%);width:44px;z-index:4;pointer-events:none;font:600 .7rem ui-monospace,Consolas,monospace;color:var(--muted)}
.altimeter .scale{position:absolute;right:0;top:0;bottom:0;width:10px;border-right:2px solid var(--muted);background:repeating-linear-gradient(to bottom,var(--muted) 0 1px,transparent 1px 10%) right/8px 100% no-repeat}
.altimeter .mark{position:absolute;right:-4px;transform:translateY(50%);display:flex;align-items:center;gap:.3rem;color:var(--accent)}
.altimeter .mark::after{content:"";border:6px solid transparent;border-left:10px solid var(--accent);border-right:0}
@media (max-width:1250px){.altimeter{display:none}}

/* Abschnitte */
section.block{padding:clamp(3rem,7vw,5.5rem) 0}
section.block>.wrap>h2{font-size:clamp(1.7rem,3.4vw,2.6rem);max-width:20em}
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .7s,transform .7s cubic-bezier(.2,.8,.2,1)}
.js .rv.in{opacity:1;transform:none}
.js .rv.done.tile,.js .rv.done.item{transition:transform .25s,box-shadow .25s}
.pagehead{background:var(--sky);color:#fff;padding:clamp(2.2rem,6vw,4rem) 0;background-image:radial-gradient(50% 120% at 90% 0%,rgba(155,123,255,.35),transparent 70%),radial-gradient(40% 100% at 0% 100%,rgba(255,122,61,.28),transparent 70%)}
.pagehead h1{font-size:clamp(2rem,4.6vw,3.4rem)}
.pagehead p{color:#B7C9CF;max-width:36em;margin:.8rem 0 0}

/* Kacheln */
.tilegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:2.5rem}
.tile{display:flex;flex-direction:column;background:var(--c);color:var(--ci);padding:1.6rem;border-radius:16px;text-decoration:none;transition:transform .25s,box-shadow .25s,opacity .7s}
.tile:hover{transform:translateY(-8px) rotate(-.6deg);box-shadow:0 18px 34px rgba(0,0,0,.25)}
.tile h3{font-size:1.4rem;margin:1rem 0 .6rem}
.tile ul{flex:1;margin-bottom:1.2rem}
.tile li{padding:.2rem 0 .2rem 1.2rem;position:relative;font-size:.97rem}
.tile li::before{content:"";position:absolute;left:0;top:.75em;width:7px;height:7px;background:var(--ci);border-radius:50%;opacity:.7}
.tile .more{font-weight:800;border-bottom:3px solid var(--ci);align-self:flex-start}
.ti{display:inline-flex;width:54px;height:54px;border-radius:50%;background:rgba(11,26,36,.14);color:var(--ci);align-items:center;justify-content:center}
.ti svg{width:30px;height:30px}
.tile:hover .ti{animation:wob .6s}
@keyframes wob{30%{transform:rotate(-14deg) scale(1.1)}70%{transform:rotate(10deg)}}

/* Leistungsübersicht */
.cat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:1.5rem 3rem;padding:2rem;margin-bottom:1.5rem;border-radius:18px;background:var(--panel);border-left:10px solid var(--c)}
.cat-head .ti{background:var(--c)}
.cat-head h2{font-size:1.7rem;margin:1rem 0 .6rem}
.cat-head p{color:var(--muted);margin:0 0 1.2rem}
.chips{display:flex;flex-wrap:wrap;gap:.6rem;align-content:flex-start}
.chips li{background:var(--bg);border:2px solid var(--c);padding:.4rem .9rem;border-radius:999px;font-size:.95rem}

/* Leistungsseite */
.phero{background:var(--c);color:var(--ci);padding:clamp(2.5rem,7vw,5rem) 0;position:relative;overflow:hidden}
.phero::before{content:"";position:absolute;right:-120px;top:-120px;width:520px;height:520px;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 38px,rgba(11,26,36,.1) 38px 40px)}
.phero .wrap{position:relative}
.phero h1{font-size:clamp(2.2rem,5vw,3.8rem);margin:1rem 0}
.phero p{max-width:34em;font-size:1.15rem;margin:0 0 1.6rem}
.ti.big{width:72px;height:72px}.ti.big svg{width:40px;height:40px}
.fly{position:absolute;top:14%;left:-90px;width:70px;color:var(--ci);animation:cross 13s linear infinite}
.fly.f2{top:68%;width:44px;opacity:.55;animation-duration:19s;animation-delay:-7s}
@keyframes cross{to{transform:translateX(calc(100vw + 180px))}}
.items{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:1rem;margin-top:2rem}
.item{display:flex;gap:.85rem;align-items:flex-start;background:var(--panel);border-left:8px solid var(--c);padding:1.1rem 1.2rem;border-radius:10px;font-weight:500;transition:transform .2s,opacity .7s}
.item:hover{transform:translateX(6px)}
.ck{flex:none;width:28px;height:28px;border-radius:50%;background:var(--c);color:var(--ci);display:inline-flex;align-items:center;justify-content:center}
.ck svg{width:16px;height:16px}
.hint{margin:1.4rem 0 0;padding:1rem 1.2rem;border-radius:10px;background:var(--panel);border:2px dashed var(--c);max-width:46em;color:var(--muted)}
.extra{margin-top:2rem;max-width:46em}
.others{background:var(--panel)}
.pills{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}
.pills a{display:inline-flex;align-items:center;gap:.6rem;padding:.6rem 1.1rem;border-radius:999px;border:2px solid var(--c);text-decoration:none;font-weight:600;background:var(--bg);transition:background .2s,transform .2s}
.pills a:hover{background:var(--c);color:var(--ci);transform:translateY(-3px)}
.pills .dot{width:12px;height:12px;border-radius:50%;background:var(--c)}
.cta-band{background:var(--rainbow);color:#0B1A24;padding:clamp(2.2rem,5vw,3.4rem) 0}
.cta-band .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem 2rem}
.cta-band h2{font-size:clamp(1.6rem,3.4vw,2.4rem)}

/* Ablauf, Abgrenzung */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin:2.5rem 0 0;padding:0;list-style:none;counter-reset:s}
.steps li{counter-increment:s;border-top:4px solid var(--ink);padding-top:1rem;position:relative}
.steps li::before{content:counter(s);font-weight:800;font-size:1.7rem;display:block}
.steps li:nth-child(1)::before{color:#FF7A3D}.steps li:nth-child(2)::before{color:#3FA7FF}.steps li:nth-child(3)::before{color:#2DBE7A}
.steps li::after{content:"";position:absolute;top:-10px;left:0;width:16px;height:16px;border-radius:50%;background:#FF7A3D}
.steps li:nth-child(2)::after{background:#3FA7FF}.steps li:nth-child(3)::after{background:#2DBE7A}
.steps strong{font-size:1.2rem;display:block;margin:.2rem 0 .4rem}
.steps span{color:var(--muted)}
.limit{background:var(--panel)}
.limit .wrap{display:grid;grid-template-columns:1fr 1.3fr;gap:1.5rem 3rem;align-items:start}
.limit p{margin:0 0 .9rem}
.nocam{display:flex;align-items:center;gap:1rem;margin-top:1.4rem;color:var(--muted);font-weight:600}
.nocam svg{width:54px;height:54px;flex:none}

/* Kontakt, Formular */
.contact .wrap{display:grid;grid-template-columns:1fr 1.2fr;gap:2.5rem 4rem}
.contact address{font-style:normal;margin-top:1.5rem;color:var(--muted)}
.contact address a{color:var(--ink)}
form.anfrage{display:grid;gap:1rem}
form.anfrage label{display:grid;gap:.35rem;font-weight:500;font-size:.95rem}
form.anfrage input,form.anfrage select,form.anfrage textarea{font:inherit;color:var(--ink);background:var(--bg);border:2px solid var(--line);border-radius:10px;padding:.75rem .9rem;width:100%;transition:border-color .2s,box-shadow .2s}
form.anfrage input:focus,form.anfrage select:focus,form.anfrage textarea:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(232,84,28,.25);outline:0}
form.anfrage textarea{min-height:130px;resize:vertical}
form.anfrage .btn{justify-self:start}
.hp{position:absolute;left:-9999px}
.notice{padding:1rem 1.2rem;border-left:6px solid #2DBE7A;background:var(--panel);border-radius:8px;margin:0 0 1rem}
.notice[role=alert]{border-color:#E8541C}
.page-body{padding:3rem 0 5rem;max-width:760px}

/* Fuß */
.site-footer{background:var(--sky);color:#B7C9CF;font-size:.95rem}
.site-footer a{text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.fgrid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:2rem;padding-top:2.5rem;padding-bottom:2rem}
.fgrid strong{color:#fff;display:block;margin-bottom:.6rem}
.fgrid p{margin:0}
.fgrid li{padding:.15rem 0}
.fbottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.8rem 2rem;padding-top:1.2rem;padding-bottom:1.6rem;border-top:1px solid #27475A}
.fbottom ul{display:flex;gap:1.2rem}

@media (max-width:980px){
  .menu-toggle{display:block}
  .mainnav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--sky);flex-direction:column;align-items:stretch;padding:1rem clamp(1.25rem,4vw,2.5rem) 1.5rem;border-top:1px solid #27475A;max-height:calc(100vh - 70px);overflow:auto}
  .mainnav.open{display:flex}
  .mainnav .menu{flex-direction:column;align-items:stretch;gap:0}
  .mainnav .sub-menu{position:static;display:block;border:0;padding:0 0 0 1rem;min-width:0}
  .mainnav .menu-item-has-children>a::after{display:none}
  .hero .wrap,.limit .wrap,.contact .wrap,.cat,.fgrid{grid-template-columns:1fr}
  .tilegrid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr}
  .tele{font-size:.7rem}
}
@media (max-width:600px){.tilegrid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .hero h1 span,.hero p,.cta{opacity:1;transform:none}
  .map .trail{stroke-dashoffset:0}
  .js .rv{opacity:1;transform:none}
  .fly{display:none}
}