/* Textair – gemeinsames Basis-Stylesheet (Reset, Header/Nav, Footer, Buttons, Reveal, Mobile-Menü) */

:root{
  /* Grundfarben (dark theme) */
  --tx-bg:#0e0e12;
  --tx-surface:#15151b;
  --tx-white:#f5f5f7;
  --tx-pure-white:#fff;
  --tx-dark:#1d1d1f;
  --tx-dark-alt:#12121a;

  /* Pillar-Akzentfarben */
  --tx-purple:#8f9cf7;   /* Text */
  --tx-pink:#cf8fe4;     /* Social Media */
  --tx-teal:#4fd3de;     /* Strategie */

  /* Purple-Varianten (Link-Hover / Selection) */
  --tx-purple-light:#c2b3f7;
  --tx-purple-dark:#8b7bf0;

  /* Gradient (Purple → Pink → Teal), z.B. AI-Nav-Hover */
  --tx-gradient-pillars:linear-gradient(90deg,var(--tx-purple),var(--tx-pink) 50%,var(--tx-teal));
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;color-scheme:dark}
body{background:var(--tx-bg);color:var(--tx-white);font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
a{color:inherit;text-decoration:none;transition:color .2s ease,opacity .2s ease}
a:visited{color:inherit}
a:hover{color:var(--tx-purple-light)}
::selection{background:var(--tx-purple-dark);color:var(--tx-white)}
h1,h2,h3,h4{font-family:'Sora',system-ui,sans-serif}
img{max-width:100%}

/* ---- nav ---- */
.tx-nav{display:flex;align-items:center;gap:34px;font-size:17px;font-weight:600;color:var(--tx-white);flex-wrap:nowrap;min-width:0}
.tx-nav a{white-space:nowrap}
@media (max-width:1440px){.tx-nav{gap:22px;font-size:15px}}
@media (max-width:1240px){.tx-nav{gap:15px;font-size:13.5px}}
@media (max-width:1080px){.tx-nav{overflow-x:auto;scrollbar-width:none}.tx-nav::-webkit-scrollbar{display:none}}
.tx-nav a[href$="/text/"]:hover,.tx-nav a[data-pillar="text"]:hover{color:var(--tx-purple) !important}
.tx-nav a[href$="/social-media/"]:hover,.tx-nav a[data-pillar="social"]:hover{color:var(--tx-pink) !important}
.tx-nav a[href$="/strategie/"]:hover,.tx-nav a[data-pillar="strategie"]:hover{color:var(--tx-teal) !important}
.tx-nav a[data-pillar="ai"]{background-image:none !important;color:var(--tx-white) !important;-webkit-text-fill-color:var(--tx-white) !important}
.tx-nav a[data-pillar="ai"]:hover,.tx-nav a[data-pillar="ai"].tx-nav-active{background-image:var(--tx-gradient-pillars) !important;-webkit-background-clip:text !important;background-clip:text !important;color:transparent !important;-webkit-text-fill-color:transparent !important}
.tx-nav a[data-pillar="about"]:hover,.tx-nav a[data-pillar="projekte"]:hover{color:var(--tx-white) !important}
.tx-logo{transition:font-size .2s ease}
.tx-nav-kontakt{padding:9px 19px;border-radius:100px;background:var(--tx-white);color:var(--tx-dark);color-scheme:light;font-weight:700;font-size:12px;transition:transform .2s ease}
.tx-nav-kontakt:hover{transform:translateY(-2px);color:var(--tx-dark)}
.tx-nav-kontakt:visited{color:var(--tx-dark)}

/* ---- buttons / cta ---- */
.tx-cta{padding:12px 25px;border-radius:100px;font-weight:700;font-size:13.5px}
.tx-btn-primary{background:var(--tx-white);color:var(--tx-dark);color-scheme:light;transition:transform .2s ease}
.tx-btn-primary:hover{color:var(--tx-dark);transform:translateY(-2px)}
.tx-btn-primary:visited{color:var(--tx-dark)}
.tx-btn-secondary{background:rgba(255,255,255,.1);color:var(--tx-white);font-weight:600;white-space:nowrap;transition:background .2s ease,color .2s ease,transform .2s ease}
.tx-btn-secondary:hover{background:var(--tx-pure-white);color:var(--tx-dark-alt);transform:translateY(-2px)}
.tx-link-arrow{display:inline-flex;align-items:center;gap:9px;color:rgba(255,255,255,.75);font-weight:600;font-size:15.5px;transition:color .2s ease,transform .2s ease}
.tx-link-arrow:hover{color:var(--tx-white);transform:translateX(4px)}

/* ---- reveal on scroll ---- */
@keyframes tx-cloud-in{from{opacity:0;transform:scale(.25) translateY(140px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes tx-cloud-in-center{from{opacity:0;transform:translate(-50%,0) scale(.25) translateY(140px)}to{opacity:1;transform:translate(-50%,0) scale(1) translateY(0)}}
@keyframes tx-fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes tx-spring{from{opacity:0;filter:blur(10px);transform:translateY(26px) scale(.985)}to{opacity:1;filter:blur(0);transform:translateY(0) scale(1)}}
@keyframes tx-land{from{opacity:0;filter:blur(14px);transform:rotate(-160deg) scale(1.35)}to{opacity:1;filter:blur(0);transform:rotate(0deg) scale(1)}}
@keyframes tx-logos{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes tx-drift{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(0,-26px,0) scale(1.06)}}

.tx-reveal{opacity:0;transform:translateY(84px) scale(.97);transition:opacity 1.2s cubic-bezier(.16,.9,.24,1),transform 1.2s cubic-bezier(.16,.9,.24,1)}
.tx-reveal.is-in{opacity:1;transform:none}
.tx-fade-only{opacity:0;transition:opacity 1.1s ease-out}
.tx-fade-only.is-in{opacity:1}
@media (prefers-reduced-motion:reduce){
  .tx-reveal{opacity:1;transform:none;transition:none}
  .tx-fade-only{opacity:1;transition:none}
  .tx-logotrack{animation:none !important}
  .tx-aurora{animation:none !important}
}

.tx-aurora{animation:tx-drift 16s ease-in-out infinite;will-change:transform}

/* ---- logo marquee ---- */
.tx-logotrack{display:flex;width:max-content;animation:tx-logos 34s linear infinite;will-change:transform;transform:translateZ(0)}
.tx-logomask:hover .tx-logotrack{animation-play-state:paused}

/* ---- reels horizontal scroller ---- */
.tx-reels{scrollbar-width:none}
.tx-reels::-webkit-scrollbar{display:none}

/* ---- related / project cards ---- */
.tx-card img,.tx-proj-img{transition:transform .55s ease}
.tx-card:hover img,.tx-proj-card:hover .tx-proj-img{transform:scale(1.04)}

/* ---- FAQ accordion (shared skeleton; accent color set per page) ---- */
.tx-faq summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:clamp(11px,1.2vw,15px) 0;font-family:'Sora',system-ui,sans-serif;font-weight:600;font-size:clamp(.96rem,1.36vw,1.16rem);line-height:1.35;letter-spacing:-.015em;transition:color .2s ease}
.tx-faq summary::-webkit-details-marker{display:none}
.tx-faq summary span:last-child{flex:none;font-size:1.4em;line-height:1;transition:transform .25s ease}
.tx-faq[open] summary span:last-child{transform:rotate(45deg)}
.tx-faq p{font-size:clamp(1rem,1.15vw,1.12rem);line-height:1.65;color:rgba(255,255,255,.68);max-width:70ch;padding-bottom:clamp(24px,2.6vw,32px);text-wrap:pretty}

/* ---- News accordion (Startseite) ---- */
.tx-news summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:clamp(76px,8vw,110px) 1fr auto;gap:clamp(20px,3vw,44px);align-items:start;padding:clamp(24px,2.6vw,34px) 0;transition:color .2s ease}
.tx-news summary:hover{color:var(--tx-purple-light)}
.tx-news summary::-webkit-details-marker{display:none}
.tx-news .tx-plus{font-size:26px;line-height:1;color:rgba(255,255,255,.5);transition:transform .25s ease}
.tx-news[open] .tx-plus{transform:rotate(45deg)}
.tx-news p{font-size:clamp(1rem,1.25vw,1.1rem);line-height:1.65;color:rgba(255,255,255,.68);max-width:64ch;padding:0 0 clamp(24px,2.6vw,32px) calc(clamp(76px,8vw,110px) + clamp(20px,3vw,44px));text-wrap:pretty}
@media (max-width:640px){.tx-news p{padding-left:0}}

/* ---- shared layout helpers ---- */
.tx-hero-split{display:grid;grid-template-columns:minmax(240px,320px) minmax(0,1fr);gap:clamp(40px,6vw,88px);align-items:start}
@media (max-width:820px){.tx-hero-split{grid-template-columns:1fr;gap:28px}}
.tx-meta-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2.6vw,32px)}
.tx-meta-row>div{min-width:0}
.tx-meta-row a{word-break:break-word}
@media (max-width:560px){.tx-meta-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tx-meta-row-5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:900px){.tx-meta-row-5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.tx-meta-row-5{grid-template-columns:repeat(2,minmax(0,1fr))}}

.tx-projects-link{transition:background .3s ease,padding-left .3s ease}

/* ---- generische Content-Kacheln (Tiles) je Unterseite ---- */
.tx-tile{border-radius:0;padding:clamp(24px,2.4vw,32px);transition:background .3s ease,transform .3s ease}
@media (max-width:720px){.tx-hero-ico{display:none !important}}

/* Text (Indigo) */
.tx-tile-text:hover{background:rgba(143,156,247,.08)}
.page-text .tx-faq summary:hover{color:var(--tx-purple)}
.page-text .tx-faq summary span:last-child{color:var(--tx-purple)}
.page-text .tx-projects-link:hover{background:rgba(143,156,247,.08);padding-left:calc(max(20px,calc((100vw - 1220px)/2 + 20px)) + clamp(12px,1.6vw,20px))}

/* Social Media (Orchid) */
.tx-tile-social:hover{background:rgba(207,143,228,.08)}
.page-social-media .tx-faq summary:hover{color:var(--tx-pink)}
.page-social-media .tx-faq summary span:last-child{color:var(--tx-pink)}
.page-social-media .tx-projects-link:hover{background:rgba(207,143,228,.08);padding-left:calc(max(20px,calc((100vw - 1220px)/2 + 20px)) + clamp(12px,1.6vw,20px))}

/* Strategie (Teal) */
.tx-tile-strategie:hover{background:rgba(79,211,222,.08)}
.page-strategie .tx-faq summary:hover{color:var(--tx-teal)}
.page-strategie .tx-faq summary span:last-child{color:var(--tx-teal)}
.page-strategie .tx-projects-link:hover{background:rgba(79,211,222,.08);padding-left:calc(max(20px,calc((100vw - 1220px)/2 + 20px)) + clamp(12px,1.6vw,20px))}

/* ---- AI-Seite: Content-Kacheln + Pillar-Convergence-Grid ---- */
.tx-gtile{border-radius:0;padding:clamp(26px,2.6vw,36px);background:transparent;transition:background .3s ease,transform .3s ease}
.tx-gtile:hover{background:rgba(143,156,247,.08)}
.tx-conv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.2vw,18px)}
@media (max-width:760px){.tx-conv{grid-template-columns:1fr}}
.tx-conv a{border-radius:0;padding:clamp(22px,2.4vw,30px);background:transparent;transition:background .3s ease,transform .3s ease}
.tx-conv-text:hover{background:rgba(143,156,247,.08)}
.tx-conv-social:hover{background:rgba(207,143,228,.08)}
.tx-conv-strategie:hover{background:rgba(79,211,222,.08)}

/* AI (Orchid FAQ accent, matches source ai.html) */
.page-ai .tx-faq summary:hover{color:var(--tx-pink)}
.page-ai .tx-faq summary span:last-child{color:var(--tx-pink)}

/* ---- About-Seite: Team + Geschichte ---- */
.tx-team{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,26px)}
@media (max-width:900px){.tx-team{grid-template-columns:1fr;gap:34px}}
.tx-hist{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:clamp(24px,3.4vw,56px);align-items:start}
@media (max-width:860px){.tx-hist{grid-template-columns:1fr;gap:28px}}
.tx-btn-secondary-lg{padding:15px 34px;border-radius:100px;font-size:16px}
.tx-btn-secondary-lg:hover{background:rgba(255,255,255,.08);color:var(--tx-white);transform:none}

/* ---- Kontakt-Seite ---- */
.tx-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,28px);align-items:start}
@media (max-width:860px){.tx-two{grid-template-columns:1fr}}
.tx-card{border-radius:0;padding:clamp(26px,3vw,44px);transition:transform .3s ease,background .3s ease}
.tx-card-business{background:rgba(255,255,255,.04)}
.tx-card-business:hover{transform:translateY(-6px);background:rgba(255,255,255,.06)}
.tx-card-freelance{background:rgba(207,143,228,.08)}
.tx-card-freelance:hover{transform:translateY(-6px);background:rgba(207,143,228,.11)}
.tx-field{display:flex;flex-direction:column;gap:8px}
.tx-field label{font-family:'Sora',system-ui,sans-serif;font-size:13.5px;font-weight:600;color:rgba(255,255,255,.55)}
.tx-field input,.tx-field select,.tx-field textarea{font-family:'Inter',system-ui,sans-serif;font-size:16px;color:var(--tx-white);background:rgba(255,255,255,.08);border:0;border-radius:10px;padding:14px 16px;transition:background .2s ease;width:100%}
.tx-field textarea{min-height:130px;resize:vertical}
.tx-field input:focus,.tx-field select:focus,.tx-field textarea:focus{outline:none;background:rgba(255,255,255,.12)}
.tx-field select option{background:var(--tx-surface);color:var(--tx-white)}
.tx-pill-text{background:rgba(143,156,247,.1);color:var(--tx-purple)}
.tx-pill-text:hover{background:rgba(143,156,247,.12);color:var(--tx-purple)}
.tx-pill-social{background:rgba(207,143,228,.1);color:var(--tx-pink)}
.tx-pill-social:hover{background:rgba(207,143,228,.12);color:var(--tx-pink)}
.tx-pill-strategie{background:rgba(79,211,222,.1);color:var(--tx-teal)}
.tx-pill-strategie:hover{background:rgba(79,211,222,.12);color:var(--tx-teal)}

/* ---- Impressum: Rechtstext ---- */
.tx-legal h2{font-weight:800;font-size:clamp(1.1rem,1.6vw,1.3rem);letter-spacing:-.02em;margin-top:clamp(44px,5vw,64px)}
.tx-legal h2:first-child{margin-top:0}
.tx-legal p{font-size:16px;line-height:1.65;color:rgba(255,255,255,.72);margin-top:14px;max-width:70ch}
.tx-legal .tx-plain{font-size:16px;line-height:1.65;color:rgba(255,255,255,.72);margin-top:14px}

/* ---- Projekte-Seite: Filter-Tabs + Grid ---- */
.tx-tabs button{font-family:'Sora',system-ui,sans-serif;font-weight:600;font-size:clamp(.95rem,1.35vw,1.15rem);letter-spacing:-.01em;padding:clamp(16px,1.7vw,22px) 10px;background:transparent;color:rgba(255,255,255,.6);border:0;border-bottom:2px solid transparent;cursor:pointer;transition:color .25s ease,border-color .25s ease}
.tx-tabs button:hover{color:var(--tx-white)}
.tx-tabs[data-f="alle"] button[data-cat="alle"]{color:var(--tx-white);border-color:var(--tx-white)}
.tx-tabs[data-f="text"] button[data-cat="text"]{color:var(--tx-purple);border-color:var(--tx-purple)}
.tx-tabs[data-f="social"] button[data-cat="social"]{color:var(--tx-pink);border-color:var(--tx-pink)}
.tx-tabs[data-f="strategie"] button[data-cat="strategie"]{color:var(--tx-teal);border-color:var(--tx-teal)}
.tx-grid[data-f="text"] > a:not([data-cat~="text"]),
.tx-grid[data-f="social"] > a:not([data-cat~="social"]),
.tx-grid[data-f="strategie"] > a:not([data-cat~="strategie"]){display:none !important}
@media (max-width:640px){.tx-grid{grid-template-columns:1fr !important}}

/* ---- Startseite: Leistungen-Reihen ---- */
.tx-srow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:clamp(18px,2.6vw,44px);align-items:start;transition:background .3s ease}
.tx-srow h2{transition:color .25s ease}
.tx-srow > *{transition:transform .3s cubic-bezier(.16,.9,.24,1)}
.tx-srow .tx-ico{color:rgba(255,255,255,.42);transition:color .25s ease,transform .35s ease}
.tx-row-text:hover{background:rgba(143,156,247,.09)}
.tx-row-social:hover{background:rgba(207,143,228,.09)}
.tx-row-strategie:hover{background:rgba(79,211,222,.09)}
.tx-row-text:hover .tx-ico{color:var(--tx-purple)}
.tx-row-social:hover .tx-ico{color:var(--tx-pink)}
.tx-row-strategie:hover .tx-ico{color:var(--tx-teal)}
@media (max-width:900px){.tx-srow{grid-template-columns:1fr;gap:14px}.tx-srow .tx-ico{width:52px}}
@media (min-width:1081px){
  .tx-row-text,.tx-row-social,.tx-row-strategie{padding-left:max(44px,calc((100vw - 1220px)/2 + 44px)) !important}
  .tx-row-text:hover > *:not(.tx-ico),.tx-row-social:hover > *:not(.tx-ico),.tx-row-strategie:hover > *:not(.tx-ico){transform:translateX(clamp(12px,1.6vw,20px))}
}

@media (min-width:1081px){.tx-align-nav{padding-left:max(44px,calc((100vw - 1220px)/2 + 44px)) !important}}

/* ---- mobile menu (FAB + fullscreen sheet) ---- */
.tx-menu-toggle{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.tx-fab{display:none}
.tx-sheet{display:none}
@media (max-width:1080px){
  header{position:sticky !important;top:0 !important;padding:0 !important}
  header > nav{background:rgba(14,14,18,.55) !important;backdrop-filter:blur(16px) !important;-webkit-backdrop-filter:blur(16px) !important;border:0 !important;border-radius:0 !important;padding:12px 22px !important;min-height:0 !important}
  .tx-nav{display:none !important}
  .tx-logo{padding-left:0 !important}.tx-logo-text{display:none !important}.tx-logo-icon{display:block !important}
  footer > div:last-child{padding-bottom:112px !important}
  .tx-cta{padding:10px 22px !important;font-size:14px !important}
  .tx-fab-space{height:0}
  .tx-fab{position:fixed;z-index:90;bottom:22px;left:50%;transform:translateX(-50%);width:60px;height:60px;border-radius:50%;background:rgba(40,40,48,.98);display:grid;place-items:center;font-family:'Sora',system-ui,sans-serif;font-size:30px;font-weight:400;line-height:1;color:var(--tx-white);cursor:pointer;transition:transform .3s ease,background .3s ease;box-shadow:0 18px 40px -18px rgba(0,0,0,.8)}
  .tx-fab:active{background:rgba(255,255,255,.18)}
  .tx-menu-toggle:checked ~ .tx-fab{transform:translateX(-50%) rotate(45deg);background:rgba(255,255,255,.18)}
  .tx-sheet{position:fixed;inset:0;z-index:85;display:flex;flex-direction:column;justify-content:flex-end;gap:26px;padding:32px 26px 108px;background:rgba(10,10,14,.94);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);opacity:0;pointer-events:none;transition:opacity .28s ease}
  .tx-menu-toggle:checked ~ .tx-sheet{opacity:1;pointer-events:auto}
  .tx-sheet a{font-family:'Sora',system-ui,sans-serif;font-weight:700;font-size:clamp(1.375rem,5vw,2.375rem);letter-spacing:-.03em;line-height:1.1;color:var(--tx-white);white-space:nowrap;width:fit-content;transition:opacity .18s ease}
  .tx-sheet a:hover,.tx-sheet a:active{opacity:.55}
  .tx-sheet .tx-sheet-meta{display:flex;flex-direction:column;gap:6px;padding-top:22px}
  .tx-sheet .tx-sheet-meta a{font-family:'Inter',system-ui,sans-serif;font-weight:500;font-size:16px;letter-spacing:0;color:rgba(255,255,255,.7)}
}

/* ---- single.php: Fliesstext alter Blogartikel ---- */
.tx-article-content > * + *{margin-top:1.4em}
.tx-article-content h2{font-weight:700;font-size:clamp(1.25rem,2.4vw,1.7rem);letter-spacing:-.02em;line-height:1.3;color:var(--tx-white)}
.tx-article-content h3{font-weight:700;font-size:clamp(1.1rem,1.9vw,1.35rem);letter-spacing:-.015em;line-height:1.35;color:var(--tx-white)}
.tx-article-content a{color:var(--tx-purple);text-decoration:underline}
.tx-article-content ul,.tx-article-content ol{padding-left:1.3em}
.tx-article-content li+li{margin-top:.5em}
.tx-article-content blockquote{border-left:3px solid rgba(255,255,255,.25);padding-left:1.2em;color:rgba(255,255,255,.68)}
.tx-article-content img{border-radius:10px;display:block}
.tx-article-content figcaption{font-size:.85em;color:rgba(255,255,255,.5);margin-top:.6em}

/* ---- archive-reels.php: Vollbild-Scroll-Feed ---- */
.tx-reel-slide{position:relative;min-height:100vh;min-height:100dvh;scroll-snap-align:start;scroll-snap-stop:always;display:flex;align-items:center;justify-content:center;background:var(--tx-bg);overflow:hidden}
.tx-reel-box{position:relative;width:100%;height:100vh;height:100dvh;overflow:hidden;background:var(--tx-surface)}
.tx-reel-feed-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.tx-reel-overlay{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:24px clamp(20px,4vw,32px) clamp(28px,4vw,44px);display:flex;align-items:flex-end;justify-content:space-between;gap:16px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.75) 65%)}
.tx-reel-mute{flex:none;width:46px;height:46px;border-radius:50%;background:rgba(12,12,16,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:0;color:var(--tx-white);font-size:19px;line-height:1;cursor:pointer;transition:transform .2s ease,background .2s ease}
.tx-reel-mute:hover{transform:scale(1.06);background:rgba(255,255,255,.16)}

/* Ab Tablet-Breite: schmaler, hochkant-begrenzter Container statt Vollbild (analog blick.ch) */
@media (min-width:768px){
  .tx-reel-box{width:min(460px,92vw);max-width:460px;height:auto;aspect-ratio:9/16;border-radius:16px}
}