/* Theme Name: Technikon Consulting Theme URI: https://technikon-consulting.de/ Author: Technikon-Consulting by Sven Helle Description: Modern, multilingual-ready corporate theme for Technikon Consulting. Inspired by contemporary engineering/consulting layouts and the Technikon visual language; no third-party graphics included. Version: 1.9.86 Requires at least: 6.8 Requires PHP: 8.1 License: GPL-2.0-or-later Text Domain: technikon-consulting * Speziell für Technikon Consulting GmbH entwickelt; Projektverantwortlicher Sven Helle. * Anpassungen updatefest über Design → Technikon CSS vornehmen. */ :root{--tc-navy:#101b33;--tc-blue:#1769aa;--tc-cyan:#27a9e0;--tc-purple:#6b4fd3;--tc-gold:#c6a15b;--tc-ink:#152033;--tc-muted:#667085;--tc-light:#f5f7fa;--tc-white:#fff;--tc-line:#dfe5ec;--tc-radius:18px;--tc-shadow:0 16px 50px rgba(16,27,51,.10)} *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--tc-ink);background:#fff;line-height:1.65}a{color:inherit;text-decoration:none}img{max-width:100%;height:auto}.container{width:min(1180px,calc(100% - 40px));margin:auto}.site-header{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-bottom:1px solid rgba(223,229,236,.8)}.header-inner{height:82px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:-.03em}.brand-mark{width:42px;height:42px;border-radius:12px;background:linear-gradient(145deg,var(--tc-navy),var(--tc-blue));display:grid;place-items:center;color:#fff;box-shadow:0 8px 24px rgba(23,105,170,.25)}.brand-mark svg{width:25px}.brand-text{font-size:1.08rem}.brand-text small{display:block;font-size:.63rem;color:var(--tc-muted);font-weight:600;letter-spacing:.14em;text-transform:uppercase}.main-nav{display:flex;align-items:center;gap:24px;flex:1;justify-content:center;font-size:.94rem;font-weight:650}.main-nav a{padding:10px 0;position:relative}.main-nav a:hover{color:var(--tc-blue)}.main-nav .cta{padding:11px 17px;background:var(--tc-navy);color:#fff;border-radius:999px}.menu-toggle{display:none;border:0;background:none;font-size:1.6rem}.lang-switcher{display:flex;gap:7px;font-size:.75rem;color:var(--tc-muted)}.lang-switcher a{padding:5px 7px;border-radius:7px}.lang-switcher .current{background:var(--tc-light);color:var(--tc-navy);font-weight:700} /* RESPONSIVE / DESIGNREGEL: .hero{ – steuert Darstellung des zugehörigen Bereichs. */ .hero{position:relative;overflow:hidden;background:linear-gradient(120deg,#0d1830 0%,#14284d 58%,#1769aa 100%);color:#fff;min-height:650px;display:flex;align-items:center}.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(39,169,224,.28),transparent 35%),radial-gradient(circle at 25% 90%,rgba(107,79,211,.25),transparent 32%)}.hero-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;padding:86px 0}.eyebrow{font-size:.78rem;text-transform:uppercase;letter-spacing:.18em;font-weight:800;color:var(--tc-cyan);margin-bottom:18px}.hero h1{font-size:clamp(2.8rem,6vw,5.7rem);line-height:.98;letter-spacing:-.055em;margin:0 0 25px;max-width:760px}.hero p{font-size:1.15rem;color:rgba(255,255,255,.82);max-width:650px}.hero-actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:30px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:999px;padding:13px 20px;font-weight:750;border:1px solid transparent;transition:.2s ease}.btn-primary{background:#fff;color:var(--tc-navy)}.btn-primary:hover{transform:translateY(-2px)}.btn-outline{border-color:rgba(255,255,255,.35);color:#fff}.btn-dark{background:var(--tc-navy);color:#fff}.hero-art{min-height:430px;position:relative}.hero-art .panel{position:absolute;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);backdrop-filter:blur(12px);border-radius:28px;box-shadow:0 30px 80px rgba(0,0,0,.2)}.panel-a{inset:40px 20px 50px 40px}.panel-b{width:62%;height:55%;right:0;top:0}.panel-c{width:58%;height:44%;left:0;bottom:0}.tech-lines{position:absolute;inset:0;opacity:.75}.tech-lines svg{width:100%;height:100%} /* RESPONSIVE / DESIGNREGEL: .section{ – steuert Darstellung des zugehörigen Bereichs. */ .section{padding:100px 0}.section.alt{background:var(--tc-light)}.section-head{display:flex;justify-content:space-between;gap:40px;align-items:end;margin-bottom:45px}.section-kicker{font-size:.76rem;text-transform:uppercase;letter-spacing:.17em;font-weight:800;color:var(--tc-blue)}h2{font-size:clamp(2rem,4vw,3.5rem);line-height:1.05;letter-spacing:-.045em;margin:8px 0 0}.lead{max-width:650px;color:var(--tc-muted);font-size:1.08rem}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.card{border:1px solid var(--tc-line);border-radius:var(--tc-radius);padding:28px;background:#fff;transition:.2s ease;box-shadow:0 3px 0 rgba(16,27,51,.02)}.card:hover{transform:translateY(-5px);box-shadow:var(--tc-shadow)}.icon{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(145deg,#e8f5fb,#eeeaff);color:var(--tc-blue);margin-bottom:22px}.card h3{margin:0 0 10px;font-size:1.2rem}.card p{color:var(--tc-muted);font-size:.95rem}.arrow{display:inline-flex;margin-top:12px;font-weight:800;color:var(--tc-blue)} /* RESPONSIVE / DESIGNREGEL: .split{ – steuert Darstellung des zugehörigen Bereichs. */ .split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.feature-visual{min-height:480px;border-radius:30px;background:linear-gradient(135deg,#101b33,#1d4f78);position:relative;overflow:hidden;box-shadow:var(--tc-shadow)}.feature-visual:after{content:"";position:absolute;width:360px;height:360px;border-radius:50%;background:linear-gradient(135deg,rgba(39,169,224,.45),rgba(107,79,211,.12));right:-100px;top:-80px}.feature-content ul{list-style:none;padding:0;margin:28px 0}.feature-content li{display:flex;gap:12px;margin:14px 0;color:var(--tc-muted)}.check{color:var(--tc-blue);font-weight:900}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--tc-line);border:1px solid var(--tc-line);border-radius:22px;overflow:hidden}.stat{background:#fff;padding:30px}.stat strong{display:block;font-size:2.4rem;letter-spacing:-.05em}.stat span{color:var(--tc-muted);font-size:.9rem}.cta-band{background:linear-gradient(120deg,var(--tc-navy),#1a3867);color:#fff;border-radius:30px;padding:60px;display:flex;justify-content:space-between;align-items:center;gap:30px}.cta-band p{color:rgba(255,255,255,.75);max-width:620px}.site-footer{background:#0b1325;color:#fff;padding:65px 0 30px}.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}.site-footer h4{margin:0 0 15px}.site-footer p,.site-footer a{color:rgba(255,255,255,.65)}.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:50px;padding-top:22px;display:flex;justify-content:space-between;color:rgba(255,255,255,.5);font-size:.82rem}.page-hero{background:var(--tc-light);padding:85px 0}.page-hero h1{font-size:clamp(2.5rem,5vw,4.5rem);line-height:1;margin:0}.content{padding:80px 0}.content h2,.content h3{margin-top:2em}.content p,.content li{max-width:820px}.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:50px}.form-box{border:1px solid var(--tc-line);padding:32px;border-radius:22px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}.form-field{margin-bottom:17px}.form-field label{display:block;font-size:.85rem;font-weight:700;margin-bottom:7px}.form-field input,.form-field textarea,.form-field select{width:100%;border:1px solid var(--tc-line);border-radius:10px;padding:12px 13px;font:inherit}.form-field textarea{min-height:150px}.notice{padding:14px 16px;border-radius:10px;background:#eef7ff;border:1px solid #cbe7fa;color:#15537b;font-size:.9rem}.article-list{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.article{border:1px solid var(--tc-line);border-radius:18px;padding:24px}.article .meta{font-size:.78rem;color:var(--tc-muted)} /* RESPONSIVE / DESIGNREGEL: @media(max-width:980px){.main-nav{display:none;position:absolute;top:82px;l – steuert Darstellung des zugehörigen Bereichs. */ @media(max-width:980px){.main-nav{display:none;position:absolute;top:82px;left:0;right:0;background:#fff;padding:20px;box-shadow:0 15px 30px rgba(0,0,0,.08);flex-direction:column;align-items:stretch}.main-nav.open{display:flex}.menu-toggle{display:block}.header-inner{height:74px}.cards{grid-template-columns:repeat(2,1fr)}.hero-grid,.split,.contact-grid{grid-template-columns:1fr}.hero{min-height:auto}.hero-art{min-height:350px}.stats{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:1fr 1fr}.section-head{display:block}} /* RESPONSIVE / DESIGNREGEL: @media(max-width:620px){.container{width:min(100% - 28px,1180px)}.cards,.ar – steuert Darstellung des zugehörigen Bereichs. */ @media(max-width:620px){.container{width:min(100% - 28px,1180px)}.cards,.article-list,.stats{grid-template-columns:1fr}.hero-grid{padding:65px 0}.hero h1{font-size:3.1rem}.hero-art{min-height:280px}.section{padding:70px 0}.cta-band{padding:35px 25px;display:block}.footer-grid{grid-template-columns:1fr}.footer-bottom{display:block}.form-row{grid-template-columns:1fr}.lang-switcher{display:none}} /* Startseiten-Slider / KI-Demo-Bilder */ /* RESPONSIVE / DESIGNREGEL: .tc-slider{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-slider{position:relative;min-height:680px;overflow:hidden;background:#081326;color:#fff} /* RESPONSIVE / DESIGNREGEL: .tc-slides{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-slides{position:absolute;inset:0} /* RESPONSIVE / DESIGNREGEL: .tc-slide{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .7s ease,visibility .7s ease;display:flex;align-items:center} /* RESPONSIVE / DESIGNREGEL: .tc-slide.is-active{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-slide.is-active{opacity:1;visibility:visible;z-index:2} /* RESPONSIVE / DESIGNREGEL: .tc-slide img{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} /* RESPONSIVE / DESIGNREGEL: .tc-slide-overlay{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-slide-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,13,28,.92) 0%,rgba(7,19,39,.70) 35%,rgba(7,19,39,.15) 72%,rgba(7,19,39,.32) 100%),linear-gradient(0deg,rgba(4,10,22,.35),transparent 45%)} /* RESPONSIVE / DESIGNREGEL: .tc-slide-content{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-slide-content{position:relative;z-index:3;padding-top:100px;padding-bottom:90px} /* RESPONSIVE / DESIGNREGEL: .tc-slide-content h1{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-slide-content h1{font-size:clamp(3rem,6.4vw,6.3rem);line-height:.94;letter-spacing:-.055em;margin:0 0 25px;max-width:820px} /* RESPONSIVE / DESIGNREGEL: .tc-slide-content h1 span{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-slide-content h1 span{color:#e2bd70} /* RESPONSIVE / DESIGNREGEL: .tc-slide-content p{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-slide-content p{font-size:1.18rem;color:rgba(255,255,255,.88);max-width:650px;margin:0} /* RESPONSIVE / DESIGNREGEL: .tc-slider-arrow{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-slider-arrow{position:absolute;z-index:5;top:50%;transform:translateY(-50%);width:52px;height:52px;border:1px solid rgba(255,255,255,.4);background:rgba(7,19,39,.35);backdrop-filter:blur(8px);color:#fff;border-radius:50%;font-size:2rem;line-height:1;cursor:pointer;transition:.2s} /* RESPONSIVE / DESIGNREGEL: .tc-slider-arrow:hover{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-slider-arrow:hover{background:rgba(198,161,91,.9);border-color:#c6a15b;color:#101b33} /* RESPONSIVE / DESIGNREGEL: .tc-prev{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-prev{left:28px}.tc-next{right:28px} /* RESPONSIVE / DESIGNREGEL: .tc-dots{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-dots{position:absolute;z-index:6;bottom:34px;left:50%;transform:translateX(-50%);display:flex;gap:9px} /* RESPONSIVE / DESIGNREGEL: .tc-dots button{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-dots button{width:34px;height:4px;border:0;border-radius:5px;background:rgba(255,255,255,.4);cursor:pointer;padding:0}.tc-dots button.is-active{background:#e2bd70;width:54px} /* RESPONSIVE / DESIGNREGEL: @media(max-width:980px){.tc-slider{min-height:610px}.tc-slide-content{paddi – steuert Darstellung des zugehörigen Bereichs. */ @media(max-width:980px){.tc-slider{min-height:610px}.tc-slide-content{padding-top:80px}.tc-slide-content h1{font-size:clamp(2.8rem,10vw,4.7rem)}.tc-slider-arrow{width:44px;height:44px}.tc-prev{left:15px}.tc-next{right:15px}} /* RESPONSIVE / DESIGNREGEL: @media(max-width:620px){.tc-slider{min-height:620px}.tc-slide img{object-po – steuert Darstellung des zugehörigen Bereichs. */ @media(max-width:620px){.tc-slider{min-height:620px}.tc-slide img{object-position:62% center}.tc-slide-overlay{background:linear-gradient(90deg,rgba(5,13,28,.92),rgba(7,19,39,.60)),linear-gradient(0deg,rgba(4,10,22,.45),transparent 55%)}.tc-slide-content{padding:70px 14px 90px}.tc-slide-content h1{font-size:3.15rem}.tc-slide-content p{font-size:1rem}.tc-slider-arrow{top:auto;bottom:28px}.tc-prev{left:20px}.tc-next{right:20px}.tc-dots{bottom:48px}} /* Detailseiten */ /* RESPONSIVE / DESIGNREGEL: .tc-page-hero{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-page-hero{position:relative;min-height:520px;display:flex;align-items:flex-end;overflow:hidden;background:#081326;color:#fff}.tc-page-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.tc-page-hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,13,28,.92),rgba(7,19,39,.62) 48%,rgba(7,19,39,.18));}.tc-page-hero-content{position:relative;z-index:2;padding:90px 0 70px}.tc-page-hero h1{font-size:clamp(3rem,6vw,6rem);line-height:.95;letter-spacing:-.055em;margin:0 0 22px}.tc-page-hero p{font-size:1.2rem;max-width:720px;color:rgba(255,255,255,.86)}.tc-page-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:start}.tc-checklist{list-style:none;padding:0;margin:0 0 32px}.tc-checklist li{display:flex;gap:13px;margin:18px 0;color:var(--tc-muted);font-size:1.02rem}.tc-page-card{padding:38px;border-radius:24px;background:linear-gradient(145deg,#101b33,#1c426d);color:#fff;box-shadow:var(--tc-shadow)}.tc-page-card p{color:rgba(255,255,255,.75)}.tc-contact-points{display:grid;grid-template-columns:auto 1fr;gap:8px 20px;margin-top:30px}.tc-contact-points span{color:var(--tc-muted)} /* RESPONSIVE / DESIGNREGEL: @media(max-width:980px){.main-nav{justify-content:flex-start}.tc-page-grid{ – steuert Darstellung des zugehörigen Bereichs. */ @media(max-width:980px){.main-nav{justify-content:flex-start}.tc-page-grid{grid-template-columns:1fr}.tc-page-hero{min-height:460px}} /* RESPONSIVE / DESIGNREGEL: @media(max-width:620px){.tc-page-hero-content{padding:70px 0 50px}.tc-page- – steuert Darstellung des zugehörigen Bereichs. */ @media(max-width:620px){.tc-page-hero-content{padding:70px 0 50px}.tc-page-hero h1{font-size:3.2rem}.tc-contact-points{grid-template-columns:1fr}.tc-contact-points span{margin-bottom:12px}} /* v1.3: Original logo, unchanged brand blue; black lettering may turn white on dark surfaces */ /* RESPONSIVE / DESIGNREGEL: .brand img{ – steuert Darstellung des zugehörigen Bereichs. */ .brand img{width:238px;max-width:100%;height:auto;display:block}.tc-slide-brand{position:absolute;right:5%;bottom:8%;z-index:4;background:rgba(255,255,255,.93);padding:10px 16px;border-radius:8px}.tc-slide-brand img{width:200px;display:block}.tc-page-photo{width:100%;max-height:480px;object-fit:cover;border-radius:12px;margin:20px 0 32px}.tc-demo-section{margin:24px 0 42px}.tc-demo-section h2{color:#0c284a}.tc-lang-note{font-size:.8rem}.tc-slide:focus-within{visibility:visible}.tc-slider [aria-hidden="true"] a{pointer-events:none}@media(max-width:650px){.brand img{width:175px}.tc-slide-brand{display:none}} /* v1.3.4: compact native WordPress menu and accessible Polylang flag dropdown */ /* RESPONSIVE / DESIGNREGEL: .site-header .header-inner{ – steuert Darstellung des zugehörigen Bereichs. */ .site-header .header-inner{width:min(1540px,calc(100% - 48px));min-height:86px;height:auto;display:flex;gap:clamp(12px,2vw,30px);align-items:center;justify-content:space-between} /* RESPONSIVE / DESIGNREGEL: .site-header .brand{ – steuert Darstellung des zugehörigen Bereichs. */ .site-header .brand{flex:0 0 auto}.site-header .brand img{width:clamp(174px,16vw,238px)} /* RESPONSIVE / DESIGNREGEL: .site-header .tc-navigation{ – steuert Darstellung des zugehörigen Bereichs. */ .site-header .tc-navigation{min-width:0;flex:1 1 auto} /* RESPONSIVE / DESIGNREGEL: .site-header .main-nav{ – steuert Darstellung des zugehörigen Bereichs. */ .site-header .main-nav{display:flex;align-items:center;justify-content:flex-end;gap:clamp(12px,1.6vw,27px);margin:0;padding:0;list-style:none;font-size:clamp(.82rem,.9vw,.96rem);font-weight:650;line-height:1.3} /* RESPONSIVE / DESIGNREGEL: .site-header .main-nav li{ – steuert Darstellung des zugehörigen Bereichs. */ .site-header .main-nav li{list-style:none;margin:0;padding:0;position:relative} /* RESPONSIVE / DESIGNREGEL: .site-header .main-nav a{ – steuert Darstellung des zugehörigen Bereichs. */ .site-header .main-nav a{display:block;padding:13px 0;white-space:nowrap;color:#16233b} /* RESPONSIVE / DESIGNREGEL: .site-header .main-nav a:hover,.site-header .main-nav .current-menu-item>a{ – steuert Darstellung des zugehörigen Bereichs. */ .site-header .main-nav a:hover,.site-header .main-nav .current-menu-item>a{color:#005099} /* RESPONSIVE / DESIGNREGEL: .site-header .main-nav .sub-menu{ – steuert Darstellung des zugehörigen Bereichs. */ .site-header .main-nav .sub-menu{display:none;position:absolute;top:100%;left:0;min-width:210px;padding:10px 16px;margin:0;background:#fff;box-shadow:0 14px 35px rgba(5,20,45,.13);border-radius:9px;list-style:none} .site-header .main-nav li:hover>.sub-menu,.site-header .main-nav li:focus-within>.sub-menu{display:block} /* RESPONSIVE / DESIGNREGEL: .site-header .header-tools{ – steuert Darstellung des zugehörigen Bereichs. */ .site-header .header-tools{display:flex;align-items:center;gap:12px;flex:0 0 auto} /* RESPONSIVE / DESIGNREGEL: .tc-header-cta{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-header-cta{display:inline-flex;align-items:center;justify-content:center;padding:11px 17px;border-radius:7px;background:#005099;color:white!important;font-size:.87rem;font-weight:700;white-space:nowrap;line-height:1.2;transition:background .2s} /* RESPONSIVE / DESIGNREGEL: .tc-header-cta:hover{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-header-cta:hover{background:#17365d} /* RESPONSIVE / DESIGNREGEL: .tc-language{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-language{position:relative;flex:none}.tc-language-trigger{display:flex;align-items:center;gap:6px;padding:8px 9px;border:1px solid #e1e6ee;border-radius:7px;background:white;cursor:pointer;font-size:1.22rem;line-height:1.2} /* RESPONSIVE / DESIGNREGEL: .tc-chevron{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-chevron{font-size:.85rem;color:#34435c}.tc-language-options{position:absolute;z-index:1010;top:calc(100% + 9px);right:0;width:max-content;min-width:155px;max-height:70vh;overflow:auto;margin:0;padding:6px;list-style:none;background:#fff;border:1px solid #e1e6ee;border-radius:9px;box-shadow:0 15px 35px rgba(5,20,45,.16)} /* RESPONSIVE / DESIGNREGEL: .tc-language-options[hidden]{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-language-options[hidden]{display:none!important}.tc-language-options li{list-style:none}.tc-language-options a,.tc-lang-unavailable{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:6px;white-space:nowrap;font-size:.9rem;text-decoration:none;color:#15253c}.tc-language-options a:hover,.tc-language-options a[aria-current]{background:#eff5fa}.tc-lang-unavailable{opacity:.45} /* RESPONSIVE / DESIGNREGEL: @media(max-width:1250px){.site-header .header-inner{width:calc(100% - 32px) – steuert Darstellung des zugehörigen Bereichs. */ @media(max-width:1250px){.site-header .header-inner{width:calc(100% - 32px);gap:14px}.site-header .main-nav{gap:12px;font-size:.83rem}.site-header .brand img{width:180px}.tc-header-cta{padding:10px 12px;font-size:.8rem}} /* RESPONSIVE / DESIGNREGEL: @media(max-width:1080px){.site-header .header-inner{min-height:74px}.site-h – steuert Darstellung des zugehörigen Bereichs. */ @media(max-width:1080px){.site-header .header-inner{min-height:74px}.site-header .tc-navigation{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;padding:15px 22px;box-shadow:0 15px 30px rgba(0,0,0,.1)}.site-header .tc-navigation.open{display:block}.site-header .main-nav{display:flex;flex-direction:column;align-items:stretch;gap:0}.site-header .main-nav a{padding:11px 0;white-space:normal}.site-header .main-nav .sub-menu{display:block;position:static;box-shadow:none;padding:0 0 0 16px}.site-header .menu-toggle{display:block;cursor:pointer}.site-header .header-tools{margin-left:auto}} /* RESPONSIVE / DESIGNREGEL: @media(max-width:520px){.site-header .header-inner{width:calc(100% - 24px); – steuert Darstellung des zugehörigen Bereichs. */ @media(max-width:520px){.site-header .header-inner{width:calc(100% - 24px);gap:8px}.site-header .brand img{width:155px}.tc-header-cta{display:none}.site-header .header-tools{gap:8px}.tc-language-trigger{padding:6px}} /* Technikon Consulting 1.4.0: coherent corporate design */ :root{--tc-navy:#102b4c;--tc-blue:#005099;--tc-cyan:#24a9d8;--tc-ink:#17263b;--tc-light:#f3f5f7;--tc-radius:10px;--tc-shadow:0 12px 38px rgba(16,43,76,.08)} body{font-family:Arial,"Helvetica Neue",sans-serif;color:var(--tc-ink);line-height:1.6} /* RESPONSIVE / DESIGNREGEL: .container{ – steuert Darstellung des zugehörigen Bereichs. */ .container{width:min(1260px,calc(100% - 48px))} /* RESPONSIVE / DESIGNREGEL: .site-header{ – steuert Darstellung des zugehörigen Bereichs. */ .site-header{background:#fff;backdrop-filter:none;box-shadow:0 2px 9px rgba(15,38,69,.05)} /* RESPONSIVE / DESIGNREGEL: .tc-header-top{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-header-top{background:#fff}.tc-top-inner{display:flex;align-items:center;justify-content:space-between;min-height:95px;gap:24px}.tc-header-top .brand img{width:290px;max-width:100%;height:auto}.tc-top-tools{display:flex;align-items:center;gap:24px}.tc-top-contact{font-size:.87rem;font-weight:600;color:#005099}.tc-top-contact:hover{color:#17365d} /* RESPONSIVE / DESIGNREGEL: .tc-nav-bar{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-nav-bar{background:#f7f8fa;border-top:1px solid #e5eaf0;border-bottom:1px solid #d9e1e9}.tc-nav-inner{display:flex;align-items:center;justify-content:space-between;min-height:59px;gap:24px}.site-header .tc-navigation{display:block;flex:1;min-width:0}.site-header .main-nav{display:flex;justify-content:flex-start;gap:0;align-items:center;padding:0;margin:0;list-style:none;font-size:.91rem;font-weight:600;line-height:1.3}.site-header .main-nav li{margin:0;list-style:none;border-right:1px solid #e0e5eb;position:relative}.site-header .main-nav li:first-child{border-left:1px solid #e0e5eb}.site-header .main-nav a{padding:20px 17px;white-space:nowrap;display:block;color:#152e4b}.site-header .main-nav a:hover,.site-header .main-nav .current-menu-item>a{background:#eaf1f7;color:#005099}.site-header .main-nav .sub-menu{display:none;position:absolute;top:100%;left:0;background:#fff;min-width:200px;padding:8px 0;z-index:50;box-shadow:0 12px 30px #102b4c20}.site-header .main-nav .sub-menu li{border:0}.site-header .main-nav .sub-menu a{padding:12px 18px}.site-header .main-nav li:hover>.sub-menu,.site-header .main-nav li:focus-within>.sub-menu{display:block} /* RESPONSIVE / DESIGNREGEL: .tc-header-cta{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-header-cta{display:inline-flex;align-items:center;gap:10px;background:#005099;color:#fff!important;border-radius:4px;padding:11px 17px;white-space:nowrap;font-size:.87rem;font-weight:700}.tc-header-cta:hover{background:#17365d}.tc-language-trigger{border:1px solid #dce4eb;border-radius:4px;background:#fff;padding:6px 10px;min-width:56px}.tc-language-options{border-radius:6px}.menu-toggle{display:none} /* RESPONSIVE / DESIGNREGEL: .tc-slider{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-slider{min-height:590px}.tc-slide-content{padding-top:88px;padding-bottom:95px}.tc-slide-content h1{font-size:clamp(2.8rem,5.5vw,5.2rem);letter-spacing:-.04em;line-height:1.04}.tc-slide-content h1 span{color:#fff}.tc-slider-arrow{border-radius:5px}.tc-dots button.is-active{background:#24a9d8}.tc-slide-brand{display:none} /* RESPONSIVE / DESIGNREGEL: .section{ – steuert Darstellung des zugehörigen Bereichs. */ .section{padding:82px 0}.section-kicker{color:#005099}.section h2,.content h2{color:#17365d}.btn,.btn-primary{border-radius:4px}.cards .card,.tc-page-card,.article{border-radius:8px}.site-footer{background:#102b4c}.site-footer .brand img{width:210px;background:#fff;padding:7px;border-radius:4px} /* RESPONSIVE / DESIGNREGEL: .tc-contact-wrap{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-contact-wrap{max-width:940px;margin:0 auto 50px}.tc-contact-intro{margin:0 0 26px}.tc-contact-intro h2{margin:0 0 6px;font-size:clamp(1.6rem,2.7vw,2.2rem)}.tc-contact-intro p{margin:0;color:#62748b}.tc-contact-form{background:#fff;border:1px solid #e1e7ef;border-radius:8px;box-shadow:0 14px 38px rgba(14,40,72,.07);padding:clamp(20px,4vw,44px)}.tc-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:19px 22px}.tc-field{display:flex;flex-direction:column;gap:7px;margin-bottom:20px}.tc-form-grid .tc-field{margin:0}.tc-field label,.tc-captcha-title{font-weight:700;font-size:.88rem;color:#183657}.tc-field input,.tc-field select,.tc-field textarea,.tc-captcha-answer{display:block;width:100%;background:#fff;border:1px solid #cbd6e2;border-radius:4px;padding:12px 13px;font:inherit;color:#162f4d;min-height:46px}.tc-field textarea{min-height:135px;resize:vertical}.tc-field input:focus,.tc-field select:focus,.tc-field textarea:focus,.tc-captcha-answer:focus{outline:2px solid #005099;outline-offset:1px}.tc-contact-form .tc-field-full{margin-top:20px}.tc-captcha-area{margin:22px 0 18px;padding:18px;background:#f2f6fa;border:1px solid #dfe8f0;border-radius:6px}.tc-captcha-visual{display:flex;align-items:center;gap:10px;margin:10px 0}.tc-captcha-visual img{display:block;width:270px;max-width:calc(100% - 50px);height:85px;border:1px solid #cbd7e3;border-radius:4px;background:#eaf0f6}.tc-captcha-refresh{padding:10px;border:1px solid #cbd7e3;border-radius:4px;background:#fff;cursor:pointer}.tc-captcha-answer{max-width:320px}.tc-form-consent{display:flex;align-items:flex-start;gap:10px;font-size:.86rem;margin:17px 0 22px}.tc-form-consent input{margin-top:5px}.tc-form-consent a{color:#005099;text-decoration:underline}.tc-form-submit{display:block;width:100%;border:0;border-radius:4px;background:#005099;color:#fff;padding:14px 20px;font:700 1rem Arial,sans-serif;cursor:pointer}.tc-form-submit:hover{background:#17365d}.tc-form-notice{padding:13px 16px;background:#edf5fb;border-left:4px solid #005099;margin:0 0 22px}.tc-form-hp{position:absolute!important;left:-9999px!important;opacity:0!important} /* RESPONSIVE / DESIGNREGEL: @media(max-width:1200px){.site-header .main-nav{font-size:.82rem}.site-head – steuert Darstellung des zugehörigen Bereichs. */ @media(max-width:1200px){.site-header .main-nav{font-size:.82rem}.site-header .main-nav a{padding:20px 11px}} /* RESPONSIVE / DESIGNREGEL: @media(max-width:990px){.tc-top-inner{min-height:76px}.tc-header-top .brand – steuert Darstellung des zugehörigen Bereichs. */ @media(max-width:990px){.tc-top-inner{min-height:76px}.tc-header-top .brand img{width:225px}.tc-nav-bar{min-height:0}.tc-nav-inner{min-height:0}.site-header .tc-navigation{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;padding:12px 22px;box-shadow:0 18px 30px #102b4c25}.site-header .tc-navigation.open{display:block}.site-header .main-nav{display:flex;flex-direction:column;align-items:stretch}.site-header .main-nav li,.site-header .main-nav li:first-child{border:0;border-bottom:1px solid #e8edf2}.site-header .main-nav a{padding:13px 10px}.site-header .main-nav .sub-menu{display:block;position:static;box-shadow:none;padding-left:16px}.tc-header-cta{display:none}.menu-toggle{display:inline-flex;font-size:1.5rem;background:transparent;border:1px solid #dbe4ed;border-radius:4px;padding:4px 10px;cursor:pointer}.tc-top-tools{gap:12px}} /* RESPONSIVE / DESIGNREGEL: @media(max-width:600px){.container{width:calc(100% - 30px)}.tc-header-top . – steuert Darstellung des zugehörigen Bereichs. */ @media(max-width:600px){.container{width:calc(100% - 30px)}.tc-header-top .brand img{width:170px}.tc-top-contact{display:none}.tc-top-inner{min-height:70px}.tc-contact-form{padding:19px}.tc-form-grid{grid-template-columns:1fr}.tc-slider{min-height:590px}.tc-slide-content h1{font-size:2.75rem}} /* v1.4.1 – CTA contrast fix: override global heading color on dark background. */ /* RESPONSIVE / DESIGNREGEL: .cta-band h2, .cta-band h3, .cta-band .wp-block-heading { – steuert Darstellung des zugehörigen Bereichs. */ .cta-band h2, .cta-band h3, .cta-band .wp-block-heading { color: #fff !important; opacity: 1; } /* RESPONSIVE / DESIGNREGEL: .cta-band p { – steuert Darstellung des zugehörigen Bereichs. */ .cta-band p { color: #e8edf5 !important; opacity: 1; } /* RESPONSIVE / DESIGNREGEL: .cta-band .eyebrow { – steuert Darstellung des zugehörigen Bereichs. */ .cta-band .eyebrow { color: #24b8e8; } /* RESPONSIVE / DESIGNREGEL: .cta-band .btn.btn-primary { – steuert Darstellung des zugehörigen Bereichs. */ .cta-band .btn.btn-primary { background: #fff; color: #17365d; border-color: #fff; } /* RESPONSIVE / DESIGNREGEL: .cta-band .btn.btn-primary:hover, .cta-band .btn.btn-primary:focus-visible – steuert Darstellung des zugehörigen Bereichs. */ .cta-band .btn.btn-primary:hover, .cta-band .btn.btn-primary:focus-visible { background: #e8edf5; color: #17365d; border-color: #e8edf5; } /* v1.4.2: Entire language button including flag is a comfortable click target. */ /* RESPONSIVE / DESIGNREGEL: .site-header .tc-language-trigger{ – steuert Darstellung des zugehörigen Bereichs. */ .site-header .tc-language-trigger{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-width:76px;min-height:48px;padding:10px 15px;cursor:pointer;touch-action:manipulation;position:relative;z-index:1;} /* RESPONSIVE / DESIGNREGEL: .site-header .tc-language-trigger > span{ – steuert Darstellung des zugehörigen Bereichs. */ .site-header .tc-language-trigger > span{pointer-events:none;user-select:none;} /* RESPONSIVE / DESIGNREGEL: .site-header .tc-language-trigger > span:first-child{ – steuert Darstellung des zugehörigen Bereichs. */ .site-header .tc-language-trigger > span:first-child{display:inline-block;font-size:1.4rem;line-height:1;} /* RESPONSIVE / DESIGNREGEL: .site-header .tc-language-trigger:focus-visible{ – steuert Darstellung des zugehörigen Bereichs. */ .site-header .tc-language-trigger:focus-visible{outline:3px solid #005099;outline-offset:3px;} /* RESPONSIVE / DESIGNREGEL: .site-header .tc-language-options a{ – steuert Darstellung des zugehörigen Bereichs. */ .site-header .tc-language-options a{min-height:44px;} /* RESPONSIVE / DESIGNREGEL: @media(max-width:850px){.site-header .tc-language{display:block;}.site-head – steuert Darstellung des zugehörigen Bereichs. */ @media(max-width:850px){.site-header .tc-language{display:block;}.site-header .tc-language-trigger{min-width:64px;min-height:46px;padding:9px 12px;}} /* v1.4.3 – Polylang: one unified clickable dropdown, flag included. */ /* RESPONSIVE / DESIGNREGEL: .site-header .tc-language{ – steuert Darstellung des zugehörigen Bereichs. */ .site-header .tc-language{display:inline-flex;align-items:center;position:relative;} /* RESPONSIVE / DESIGNREGEL: .site-header .tc-language-trigger{ – steuert Darstellung des zugehörigen Bereichs. */ .site-header .tc-language-trigger{appearance:none;-webkit-appearance:none;box-sizing:border-box;display:flex;width:100%;min-width:96px;min-height:52px;align-items:center;justify-content:center;gap:12px;padding:11px 17px;background:#fff;border:1px solid #d9e3ed;border-radius:8px;color:#17365d;box-shadow:none;outline:none;cursor:pointer;position:static;z-index:auto;} .site-header .tc-language-trigger:hover,.site-header .tc-language-trigger[aria-expanded="true"]{background:#f0f6fb;border-color:#005099;} /* RESPONSIVE / DESIGNREGEL: .site-header .tc-language-trigger:focus:not(:focus-visible){ – steuert Darstellung des zugehörigen Bereichs. */ .site-header .tc-language-trigger:focus:not(:focus-visible){outline:none;box-shadow:none;} /* RESPONSIVE / DESIGNREGEL: .site-header .tc-language-trigger:focus-visible{ – steuert Darstellung des zugehörigen Bereichs. */ .site-header .tc-language-trigger:focus-visible{outline:2px solid #005099;outline-offset:2px;} /* RESPONSIVE / DESIGNREGEL: .site-header .tc-language-trigger > span{ – steuert Darstellung des zugehörigen Bereichs. */ .site-header .tc-language-trigger > span{pointer-events:none;} /* RESPONSIVE / DESIGNREGEL: .site-header .tc-language-trigger .tc-chevron{ – steuert Darstellung des zugehörigen Bereichs. */ .site-header .tc-language-trigger .tc-chevron{font-size:1rem;line-height:1;} /* RESPONSIVE / DESIGNREGEL: .site-header .tc-language-options{ – steuert Darstellung des zugehörigen Bereichs. */ .site-header .tc-language-options{top:calc(100% + 5px);right:0;} /* RESPONSIVE / DESIGNREGEL: @media(max-width:850px){.site-header .tc-language-trigger{min-width:88px;mi – steuert Darstellung des zugehörigen Bereichs. */ @media(max-width:850px){.site-header .tc-language-trigger{min-width:88px;min-height:48px;padding:9px 13px;}} /* RESPONSIVE / DESIGNREGEL: .tc-slide picture{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-slide picture{position:absolute;inset:0;display:block;width:100%;height:100%}.tc-slide picture img{width:100%;height:100%;object-fit:cover}.tc-slide-content h1{white-space:normal} /* Technikon 1.6.1: compact editorial pages, independent of homepage hero */ body:not(.home) .page-hero{padding:clamp(25px,4vw,54px) 0;min-height:0;height:auto} body:not(.home) .page-hero h1{font-size:clamp(2rem,4vw,3.6rem);line-height:1.12} body:not(.home) .content{padding:clamp(22px,3.5vw,48px) 0 55px;min-height:0} body:not(.home) .content .tc-page-photo{display:block;width:100%;max-width:1050px;height:auto;max-height:420px;object-fit:cover;object-position:center;border-radius:12px;margin:0 0 26px} body:not(.home) .content> .container > :first-child{margin-top:0} body:not(.home) .content h2,body:not(.home) .content h3{margin-top:.5em} /* RESPONSIVE / DESIGNREGEL: .tc-tiles{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-tiles{display:grid;grid-template-columns:repeat(var(--tc-cols,3),minmax(0,1fr));gap:18px;margin:24px 0;align-items:stretch} /* RESPONSIVE / DESIGNREGEL: .tc-tiles.tc-align-left{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-tiles.tc-align-left{margin-right:auto}.tc-tiles.tc-align-center{margin-left:auto;margin-right:auto}.tc-tiles.tc-align-right{margin-left:auto} /* RESPONSIVE / DESIGNREGEL: .tc-tiles.tc-width-narrow{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-tiles.tc-width-narrow{max-width:420px}.tc-tiles.tc-width-medium{max-width:780px}.tc-tiles.tc-width-wide{max-width:100%} /* RESPONSIVE / DESIGNREGEL: .tc-tiles .card{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-tiles .card{min-width:0}.tc-tiles .card img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:6px;margin:0 0 18px} /* RESPONSIVE / DESIGNREGEL: .tc-tiles .card .arrow{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-tiles .card .arrow{margin-top:auto}.tc-tiles .card{display:flex;flex-direction:column}.tc-tiles .card p{flex:1} /* RESPONSIVE / DESIGNREGEL: @media(max-width:800px){.tc-tiles{grid-template-columns:repeat(min(2,var(-- – steuert Darstellung des zugehörigen Bereichs. */ @media(max-width:800px){.tc-tiles{grid-template-columns:repeat(min(2,var(--tc-cols,3)),minmax(0,1fr))}} /* RESPONSIVE / DESIGNREGEL: @media(max-width:620px){body:not(.home) .page-hero{padding:28px 0 22px}body – steuert Darstellung des zugehörigen Bereichs. */ @media(max-width:620px){body:not(.home) .page-hero{padding:28px 0 22px}body:not(.home) .page-hero h1{font-size:clamp(1.9rem,8vw,2.65rem)}body:not(.home) .content{padding:22px 0 36px}body:not(.home) .content .tc-page-photo{max-height:270px;margin-bottom:18px}body:not(.home) .content h2,body:not(.home) .content h3{margin-top:.5em}.tc-tiles{grid-template-columns:1fr}} /* 1.6.2: remove unintended gaps in Gutenberg page layouts */ body:not(.home) .content .wp-block-spacer{max-height:clamp(12px,4vw,48px)} body:not(.home) .content .wp-block-group{min-height:0} body:not(.home) .content .wp-block-columns{margin-block:clamp(12px,2.5vw,28px);gap:clamp(15px,3vw,36px)} body:not(.home) .content .wp-block-image{margin-block:0 18px} body:not(.home) .content .wp-block-image img{height:auto;max-width:100%} /* RESPONSIVE / DESIGNREGEL: @media(max-width:620px){body:not(.home) .content .wp-block-columns{margin-b – steuert Darstellung des zugehörigen Bereichs. */ @media(max-width:620px){body:not(.home) .content .wp-block-columns{margin-block:10px 18px}body:not(.home) .content .wp-block-spacer{max-height:24px}body:not(.home) .content .tc-page-photo{max-height:240px}} /* RESPONSIVE / DESIGNREGEL: .tc-social-links{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-social-links{display:flex;flex-wrap:wrap;gap:12px 20px;margin-top:26px} /* RESPONSIVE / DESIGNREGEL: .tc-social-links a{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-social-links a{display:inline-flex;align-items:center;min-height:38px;padding:6px 12px;border:1px solid rgba(255,255,255,.28);border-radius:6px;color:#fff;text-decoration:none} /* RESPONSIVE / DESIGNREGEL: .tc-social-links a:hover,.tc-social-links a:focus-visible{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-social-links a:hover,.tc-social-links a:focus-visible{background:rgba(255,255,255,.13);outline-offset:3px} body:not(.home) .content .wp-block-group:empty{display:none} body:not(.home) .content .wp-block-spacer{height:min(3vw,32px)!important} /* RESPONSIVE / DESIGNREGEL: @media(max-width:650px){body:not(.home) .content .wp-block-spacer{height:16 – steuert Darstellung des zugehörigen Bereichs. */ @media(max-width:650px){body:not(.home) .content .wp-block-spacer{height:16px!important}} /* RESPONSIVE / DESIGNREGEL: .tc-legal-demo{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-legal-demo{background:#fff4cf;border:2px solid #bb7d13;color:#4c3200;padding:18px 22px;margin:16px 0 28px;font-weight:700;border-radius:6px} /* v1.6.7 – Original supplied corporate logo, unchanged geometry and blue emblem. */ /* RESPONSIVE / DESIGNREGEL: .site-footer .brand img{ – steuert Darstellung des zugehörigen Bereichs. */ .site-footer .brand img{background:transparent;padding:0;border-radius:0} /* RESPONSIVE / DESIGNREGEL: .site-header .brand img,.site-footer .brand img{ – steuert Darstellung des zugehörigen Bereichs. */ .site-header .brand img,.site-footer .brand img{object-fit:contain;object-position:left center} /* v1.6.8 – additive design tokens, consistent components; never modify logo assets. */ :root{ --tc-brand-primary:#005099;--tc-brand-deep:#17365d;--tc-surface:#ffffff; --tc-surface-muted:#f3f5f7;--tc-text:#292d32;--tc-border:#dce4eb; --tc-space-1:4px;--tc-space-2:8px;--tc-space-3:12px;--tc-space-4:16px; --tc-space-5:24px;--tc-space-6:32px;--tc-space-7:48px; --tc-control-radius:4px;--tc-card-radius:8px; --tc-focus-ring:3px solid #005099; } /* Match existing site buttons, Gutenberg buttons, and standalone tile links. */ /* RESPONSIVE / DESIGNREGEL: .btn,.tc-header-cta,.wp-block-button__link{ – steuert Darstellung des zugehörigen Bereichs. */ .btn,.tc-header-cta,.wp-block-button__link{border-radius:var(--tc-control-radius);font-weight:700;line-height:1.35;text-align:center} /* RESPONSIVE / DESIGNREGEL: .wp-block-button__link:not(.has-background){ – steuert Darstellung des zugehörigen Bereichs. */ .wp-block-button__link:not(.has-background){background:var(--tc-brand-primary);color:#fff} /* RESPONSIVE / DESIGNREGEL: .wp-block-button__link:not(.has-background):hover{ – steuert Darstellung des zugehörigen Bereichs. */ .wp-block-button__link:not(.has-background):hover{background:var(--tc-brand-deep)} /* RESPONSIVE / DESIGNREGEL: .cards .card,.tc-tiles .card,.article{ – steuert Darstellung des zugehörigen Bereichs. */ .cards .card,.tc-tiles .card,.article{border-radius:var(--tc-card-radius);border-color:var(--tc-border)} /* RESPONSIVE / DESIGNREGEL: .tc-tiles .card h3,.cards .card h3{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-tiles .card h3,.cards .card h3{color:var(--tc-brand-deep);line-height:1.3} /* RESPONSIVE / DESIGNREGEL: .tc-tiles .card .arrow,.cards .card .arrow{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-tiles .card .arrow,.cards .card .arrow{color:var(--tc-brand-primary)} /* RESPONSIVE / DESIGNREGEL: .tc-tiles .card img{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-tiles .card img{border-radius:var(--tc-control-radius)} .form-field input,.form-field textarea,.form-field select,.wp-block-search__input{border-radius:var(--tc-control-radius);border-color:var(--tc-border)} :where(a,button,input,textarea,select,[tabindex]):focus-visible{outline:var(--tc-focus-ring);outline-offset:3px} /* RESPONSIVE / DESIGNREGEL: .site-footer a:focus-visible,.site-header a:focus-visible{ – steuert Darstellung des zugehörigen Bereichs. */ .site-footer a:focus-visible,.site-header a:focus-visible{outline-color:currentColor} /* RESPONSIVE / DESIGNREGEL: @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.card,.btn, – steuert Darstellung des zugehörigen Bereichs. */ @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.card,.btn,.tc-tiles .card{transition:none!important;transform:none!important}} /* RESPONSIVE / DESIGNREGEL: @media(max-width:620px){.tc-tiles,.cards{gap:var(--tc-space-4)}.tc-tiles .c – steuert Darstellung des zugehörigen Bereichs. */ @media(max-width:620px){.tc-tiles,.cards{gap:var(--tc-space-4)}.tc-tiles .card,.cards .card{padding:var(--tc-space-5)}.wp-block-button__link{max-width:100%;white-space:normal}} /* 1.6.9 – cards inherit existing design tokens, consistent image crop and spacing. */ /* RESPONSIVE / DESIGNREGEL: .tc-tiles .card{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-tiles .card{overflow:hidden;min-width:0} /* RESPONSIVE / DESIGNREGEL: .tc-tiles .card h3{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-tiles .card h3{overflow-wrap:anywhere} /* RESPONSIVE / DESIGNREGEL: .tc-tiles .card .arrow{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-tiles .card .arrow{align-self:flex-start;min-height:36px;display:inline-flex;align-items:center} /* RESPONSIVE / DESIGNREGEL: .tc-tiles .card .arrow:focus-visible{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-tiles .card .arrow:focus-visible{outline:var(--tc-focus-ring);outline-offset:3px} /* RESPONSIVE / DESIGNREGEL: @media(max-width:620px){.tc-tiles .card img{aspect-ratio:16/10}} – steuert Darstellung des zugehörigen Bereichs. */ @media(max-width:620px){.tc-tiles .card img{aspect-ratio:16/10}} /* v1.7.5: native WordPress footer menu; inherits the existing footer palette. */ /* RESPONSIVE / DESIGNREGEL: .tc-footer-native-nav{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-footer-native-nav{grid-column:span 3} /* RESPONSIVE / DESIGNREGEL: .tc-footer-native-nav .tc-footer-menu{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-footer-native-nav .tc-footer-menu{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 24px;list-style:none;margin:0;padding:0} /* RESPONSIVE / DESIGNREGEL: .tc-footer-native-nav .tc-footer-menu li{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-footer-native-nav .tc-footer-menu li{list-style:none} /* RESPONSIVE / DESIGNREGEL: .tc-footer-native-nav .tc-footer-menu a{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-footer-native-nav .tc-footer-menu a{color:inherit;text-decoration:none} .tc-footer-native-nav .tc-footer-menu a:hover,.tc-footer-native-nav .tc-footer-menu a:focus-visible{text-decoration:underline} /* RESPONSIVE / DESIGNREGEL: .tc-footer-native-nav .sub-menu{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-footer-native-nav .sub-menu{list-style:none;margin:6px 0 0;padding:0} /* RESPONSIVE / DESIGNREGEL: @media(max-width:720px){.tc-footer-native-nav{grid-column:auto}.tc-footer-n – steuert Darstellung des zugehörigen Bereichs. */ @media(max-width:720px){.tc-footer-native-nav{grid-column:auto}.tc-footer-native-nav .tc-footer-menu{grid-template-columns:1fr;gap:10px}} /* Compact interior-page hero without changing logo or corporate colors. */ body:not(.home) .page-hero{padding:clamp(24px,3vw,44px) 0!important;min-height:0!important} body:not(.home) .page-hero .section-kicker{margin-bottom:8px} body:not(.home) .page-hero h1{line-height:1.12} body:not(.home) main.content{padding-top:clamp(20px,3vw,40px)!important} /* RESPONSIVE / DESIGNREGEL: @media(max-width:700px){body:not(.home) .page-hero{padding:22px 0!important – steuert Darstellung des zugehörigen Bereichs. */ @media(max-width:700px){body:not(.home) .page-hero{padding:22px 0!important}} /* v1.7.8: tighter interior title band */ body:not(.home) .page-hero{padding:14px 0 16px!important;min-height:0!important;height:auto!important} body:not(.home) .page-hero .section-kicker{margin:0 0 5px!important} body:not(.home) .page-hero h1{font-size:clamp(1.95rem,3.2vw,3.15rem)!important;line-height:1.08!important;margin:0!important} body:not(.home) .content{padding-top:18px!important} /* RESPONSIVE / DESIGNREGEL: @media(max-width:700px){body:not(.home) .page-hero{padding:12px 0 14px!impo – steuert Darstellung des zugehörigen Bereichs. */ @media(max-width:700px){body:not(.home) .page-hero{padding:12px 0 14px!important}body:not(.home) .content{padding-top:14px!important}} /* Consulting 2026: structured, restrained B2B layout. */ /* RESPONSIVE / DESIGNREGEL: .tc-consulting-home-hero{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-consulting-home-hero{padding:clamp(45px,7vw,90px) 0;background:linear-gradient(125deg,#17365d,#2874a6);color:#fff} /* RESPONSIVE / DESIGNREGEL: .tc-consulting-home-hero h1{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-consulting-home-hero h1{max-width:900px;font-size:clamp(2.4rem,5vw,4.6rem);line-height:1.09;color:#fff;margin:12px 0 20px} /* RESPONSIVE / DESIGNREGEL: .tc-consulting-home-hero .lead{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-consulting-home-hero .lead{max-width:780px;color:#eef4fb} /* RESPONSIVE / DESIGNREGEL: .tc-consulting-home-hero .hero-actions{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-consulting-home-hero .hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px} /* RESPONSIVE / DESIGNREGEL: .tc-consulting-home-intro .container{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-consulting-home-intro .container{max-width:1260px} /* RESPONSIVE / DESIGNREGEL: .tc-consulting-home-intro h2{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-consulting-home-intro h2{color:#17365d} /* RESPONSIVE / DESIGNREGEL: .tc-consulting-home-cards{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-consulting-home-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px} /* RESPONSIVE / DESIGNREGEL: .tc-consulting-intro{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-consulting-intro{max-width:980px;margin:0 auto 28px} /* RESPONSIVE / DESIGNREGEL: .tc-consulting-subtitle{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-consulting-subtitle{font-size:clamp(1.1rem,2vw,1.4rem);font-weight:600;color:#17365d;margin-bottom:24px} /* RESPONSIVE / DESIGNREGEL: .tc-consulting-services{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-consulting-services{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:20px 0 30px} /* RESPONSIVE / DESIGNREGEL: .tc-consulting-service{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-consulting-service{padding:22px 24px;background:#f3f5f7;border-left:3px solid #2874a6;border-radius:5px} /* RESPONSIVE / DESIGNREGEL: .tc-consulting-service h3{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-consulting-service h3{margin:0 0 8px;color:#17365d;font-size:1.12rem} /* RESPONSIVE / DESIGNREGEL: .tc-consulting-service p{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-consulting-service p{margin:0} /* RESPONSIVE / DESIGNREGEL: .tc-regulatory-note{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-regulatory-note{font-size:.91rem;color:#505c69} body:not(.home) .page-hero{padding:12px 0 15px!important;min-height:0!important;height:auto!important} body:not(.home) .page-hero h1{line-height:1.12!important;margin:0!important} /* RESPONSIVE / DESIGNREGEL: @media(max-width:720px){.tc-consulting-home-cards,.tc-consulting-services{g – steuert Darstellung des zugehörigen Bereichs. */ @media(max-width:720px){.tc-consulting-home-cards,.tc-consulting-services{grid-template-columns:1fr}.tc-consulting-home-hero{padding:42px 0}.tc-consulting-service{padding:18px}} /* v1.8.7 – single authoritative responsive navigation state. */ /* RESPONSIVE / DESIGNREGEL: @media(max-width:1080px){ – steuert Darstellung des zugehörigen Bereichs. */ @media(max-width:1080px){ .site-header .menu-toggle{display:inline-flex!important;align-items:center;justify-content:center;cursor:pointer;min-width:44px;min-height:44px} .site-header .tc-nav-bar{display:none!important;position:relative!important} .site-header .tc-nav-bar.tc-mobile-expanded{display:block!important} .site-header .tc-nav-inner{display:block!important;min-height:0!important} .site-header #main-nav{display:block!important;position:static!important;visibility:visible!important;width:100%!important;max-height:min(65dvh,620px);overflow-y:auto;overscroll-behavior:contain;padding:6px 0!important;box-shadow:none!important;background:#fff!important} .site-header #main-nav .main-nav{display:flex!important;position:static!important;flex-direction:column!important;align-items:stretch!important;gap:0!important;padding:0!important;margin:0!important;box-shadow:none!important;width:100%!important} .site-header #main-nav .main-nav>li{display:block!important;width:100%;border:0!important;border-bottom:1px solid #e8edf2!important;position:relative} .site-header #main-nav .main-nav li a{display:block!important;white-space:normal!important;padding:13px 50px 13px 16px!important} .site-header #main-nav .main-nav .sub-menu{display:none!important;position:static!important;box-shadow:none!important;padding:0 0 0 14px!important;margin:0!important;min-width:0!important} .site-header #main-nav .main-nav li.submenu-open>.sub-menu{display:block!important} .site-header #main-nav .main-nav li:hover:not(.submenu-open)>.sub-menu,.site-header #main-nav .main-nav li:focus-within:not(.submenu-open)>.sub-menu{display:none!important} .site-header #main-nav .tc-submenu-toggle{display:inline-flex!important;position:absolute;right:5px;top:5px;align-items:center;justify-content:center;min-width:42px;min-height:42px;border:1px solid #dbe4ed;border-radius:5px;background:#fff;color:#17365d;cursor:pointer} .site-header .tc-header-cta{display:none!important} } /* RESPONSIVE / DESIGNREGEL: @media(min-width:1081px){.site-header .tc-nav-bar{display:block!important}. – steuert Darstellung des zugehörigen Bereichs. */ @media(min-width:1081px){.site-header .tc-nav-bar{display:block!important}.site-header .menu-toggle{display:none!important}.site-header #main-nav .tc-submenu-toggle{display:none!important}} /* v1.9.0: Polylang missing-translation and 404 states. */ /* RESPONSIVE / DESIGNREGEL: .tc-state-page{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-state-page{background:linear-gradient(145deg,#f1f5f9,#fff 65%);padding:clamp(34px,6vw,88px) 0;min-height:55vh} /* RESPONSIVE / DESIGNREGEL: .tc-state-card{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-state-card{max-width:900px;margin:auto;background:#fff;border:1px solid #dbe4ed;border-radius:20px;box-shadow:0 18px 45px rgba(23,54,93,.07);padding:clamp(26px,5vw,68px);text-align:center;overflow:hidden} /* RESPONSIVE / DESIGNREGEL: .tc-state-card h1{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-state-card h1{color:#17365d;font-size:clamp(1.8rem,4vw,3.2rem);line-height:1.17;margin:10px 0 18px} /* RESPONSIVE / DESIGNREGEL: .tc-state-card p{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-state-card p{color:#475569;font-size:clamp(1rem,1.7vw,1.2rem);line-height:1.65;max-width:660px;margin:0 auto 22px} /* RESPONSIVE / DESIGNREGEL: .tc-state-eyebrow{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-state-eyebrow{font-size:.75rem!important;letter-spacing:.22em;color:#005099!important;font-weight:800} /* RESPONSIVE / DESIGNREGEL: .tc-state-symbol{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-state-symbol{font-size:clamp(48px,7vw,88px);font-weight:750;color:#005099;line-height:1.2;margin-bottom:20px} /* RESPONSIVE / DESIGNREGEL: .tc-state-symbol span{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-state-symbol span{color:#64748b;font-size:.55em;padding:0 .22em} /* RESPONSIVE / DESIGNREGEL: .tc-state-actions{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-state-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:26px} /* RESPONSIVE / DESIGNREGEL: .tc-state-actions .btn{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-state-actions .btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:11px 20px;text-decoration:none;border-radius:7px} /* RESPONSIVE / DESIGNREGEL: .tc-state-actions .btn-outline{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-state-actions .btn-outline{border:1px solid #005099;color:#005099;background:#fff} /* RESPONSIVE / DESIGNREGEL: .tc-state-circuit{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-state-circuit{font-size:clamp(80px,14vw,150px);font-weight:900;line-height:1;color:#005099;letter-spacing:-.06em;position:relative;margin:0 auto 24px;width:max-content;max-width:100%} /* RESPONSIVE / DESIGNREGEL: .tc-state-circuit:before,.tc-state-circuit:after{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-state-circuit:before,.tc-state-circuit:after{content:"";position:absolute;top:50%;height:2px;width:65px;background:linear-gradient(90deg,transparent,#005099)} /* RESPONSIVE / DESIGNREGEL: .tc-state-circuit:before{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-state-circuit:before{right:100%;margin-right:12px}.tc-state-circuit:after{left:100%;margin-left:12px;transform:rotate(180deg)} /* RESPONSIVE / DESIGNREGEL: .tc-state-search{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-state-search{display:flex;gap:8px;max-width:450px;margin:32px auto 0} /* RESPONSIVE / DESIGNREGEL: .tc-state-search input{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-state-search input{flex:1;min-width:0;padding:12px;border:1px solid #b6c6d6;border-radius:6px} /* RESPONSIVE / DESIGNREGEL: .tc-state-search button{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-state-search button{border:0;background:#17365d;color:#fff;padding:12px 17px;border-radius:6px;cursor:pointer} /* RESPONSIVE / DESIGNREGEL: @media(max-width:600px){.tc-state-page{padding:22px 0}.tc-state-card{border – steuert Darstellung des zugehörigen Bereichs. */ @media(max-width:600px){.tc-state-page{padding:22px 0}.tc-state-card{border-radius:12px}.tc-state-circuit:before,.tc-state-circuit:after{width:25px}.tc-state-search{flex-direction:column}} /* v1.9.3: Technikon technical error-state visual system; no external assets. */ /* RESPONSIVE / DESIGNREGEL: .tc-state-page{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-state-page{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 10% 10%,#234e7b 0,transparent 42%),radial-gradient(ellipse at 95% 80%,#12608e 0,transparent 38%),linear-gradient(135deg,#0b2039,#17365d 60%,#0b2a4a);padding:clamp(36px,7vw,95px) 0} /* RESPONSIVE / DESIGNREGEL: .tc-state-page:before{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-state-page:before{content:"";position:absolute;inset:0;z-index:-1;opacity:.24;background-image:linear-gradient(90deg,transparent 96%,#79bde8 97%,transparent 98%),linear-gradient(0deg,transparent 96%,#79bde8 97%,transparent 98%);background-size:65px 65px;mask-image:linear-gradient(120deg,#000,transparent 75%);pointer-events:none} /* RESPONSIVE / DESIGNREGEL: .tc-state-page:after{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-state-page:after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 78% 18%,rgba(92,183,244,.15),transparent 28%);pointer-events:none} /* RESPONSIVE / DESIGNREGEL: .tc-state-card{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-state-card{position:relative;max-width:880px;border:1px solid rgba(177,212,241,.28);border-radius:24px;background:linear-gradient(150deg,rgba(255,255,255,.98),rgba(239,247,253,.96));box-shadow:0 26px 85px rgba(0,12,30,.32),inset 0 1px 0 #fff;padding:clamp(28px,5vw,64px)} /* RESPONSIVE / DESIGNREGEL: .tc-state-card:before{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-state-card:before{content:"";position:absolute;top:0;left:15%;right:15%;height:3px;background:linear-gradient(90deg,transparent,#2874a6,#6ec9f7,#2874a6,transparent)} /* RESPONSIVE / DESIGNREGEL: .tc-state-card h1{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-state-card h1{max-width:710px;margin:10px auto 20px;letter-spacing:-.025em} /* RESPONSIVE / DESIGNREGEL: .tc-state-card>p:not(.tc-state-eyebrow){ – steuert Darstellung des zugehörigen Bereichs. */ .tc-state-card>p:not(.tc-state-eyebrow){max-width:650px} /* RESPONSIVE / DESIGNREGEL: .tc-state-eyebrow{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-state-eyebrow{margin-bottom:12px!important} /* RESPONSIVE / DESIGNREGEL: .tc-state-visual{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-state-visual{position:relative;width:min(100%,340px);height:190px;margin:0 auto 24px;display:grid;place-items:center;isolation:isolate} /* RESPONSIVE / DESIGNREGEL: .tc-state-visual-language{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-state-visual-language{height:200px} /* RESPONSIVE / DESIGNREGEL: .tc-state-globe{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-state-globe{position:relative;width:145px;height:145px;border:4px solid #17609c;border-radius:50%;box-shadow:0 0 0 11px rgba(40,116,166,.08),inset 0 0 28px rgba(40,116,166,.10);background:linear-gradient(145deg,rgba(131,210,249,.18),rgba(255,255,255,.12));animation:tc-globe-float 6s ease-in-out infinite} /* RESPONSIVE / DESIGNREGEL: .tc-state-globe:before,.tc-state-globe:after{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-state-globe:before,.tc-state-globe:after{content:"";position:absolute;left:0;right:0;top:50%;border-top:3px solid #17609c;transform:translateY(-50%)} /* RESPONSIVE / DESIGNREGEL: .tc-state-globe:after{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-state-globe:after{top:28%;box-shadow:0 63px 0 #17609c;opacity:.65} /* RESPONSIVE / DESIGNREGEL: .tc-state-globe-long{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-state-globe-long{position:absolute;inset:-4px 28px;border:3px solid #17609c;border-radius:50%} /* RESPONSIVE / DESIGNREGEL: .tc-state-globe-long-two{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-state-globe-long-two{inset:-4px 51px;opacity:.45} /* RESPONSIVE / DESIGNREGEL: .tc-state-orbit{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-state-orbit{position:absolute;inset:16px 30px;border:1px dashed rgba(40,116,166,.38);border-radius:50%;transform:rotate(-28deg)} /* RESPONSIVE / DESIGNREGEL: .tc-state-orbit-two{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-state-orbit-two{transform:rotate(34deg);inset:8px 45px} /* RESPONSIVE / DESIGNREGEL: .tc-state-language-badge{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-state-language-badge{position:absolute;display:grid;place-items:center;width:46px;height:46px;border-radius:13px;background:#fff;border:1px solid #b7d6eb;color:#005099;font-size:24px;font-weight:800;box-shadow:0 8px 25px rgba(23,54,93,.17)} /* RESPONSIVE / DESIGNREGEL: .tc-state-language-badge-a{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-state-language-badge-a{left:18px;top:30px}.tc-state-language-badge-b{right:20px;top:18px}.tc-state-language-badge-c{right:27px;bottom:11px} /* RESPONSIVE / DESIGNREGEL: .tc-state-visual-404{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-state-visual-404{height:165px} /* RESPONSIVE / DESIGNREGEL: .tc-state-404-number{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-state-404-number{font-size:clamp(90px,14vw,145px);font-weight:900;letter-spacing:-.09em;line-height:1;color:#17609c;text-shadow:0 8px 20px rgba(23,54,93,.15)} /* RESPONSIVE / DESIGNREGEL: .tc-state-trace{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-state-trace{position:absolute;top:48%;width:52px;height:2px;background:linear-gradient(90deg,transparent,#2874a6)} /* RESPONSIVE / DESIGNREGEL: .tc-state-trace-left{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-state-trace-left{right:90%;}.tc-state-trace-right{left:92%;transform:rotate(180deg)} /* RESPONSIVE / DESIGNREGEL: .tc-state-node{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-state-node{position:absolute;width:9px;height:9px;border-radius:50%;background:#4ab9ec;box-shadow:0 0 0 5px rgba(40,116,166,.14),0 0 18px #4ab9ec;animation:tc-node-pulse 3.2s ease-in-out infinite} /* RESPONSIVE / DESIGNREGEL: .tc-state-node-one{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-state-node-one{top:26px;left:18px}.tc-state-node-two{right:12px;bottom:26px;animation-delay:1.6s} /* RESPONSIVE / DESIGNREGEL: .tc-state-actions .btn{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-state-actions .btn{min-height:50px;padding:12px 23px;border-radius:9px;transition:transform .2s,box-shadow .2s} /* RESPONSIVE / DESIGNREGEL: .tc-state-actions .btn:hover{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-state-actions .btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(23,54,93,.15)} /* RESPONSIVE / DESIGNREGEL: .tc-state-search{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-state-search{padding:8px;border:1px solid #dce8f1;border-radius:11px;background:rgba(255,255,255,.85)} /* RESPONSIVE / DESIGNREGEL: .tc-state-search input{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-state-search input{border:0;background:transparent}.tc-state-search button{border-radius:8px} @keyframes tc-globe-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}} @keyframes tc-node-pulse{0%,100%{opacity:.5;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}} /* RESPONSIVE / DESIGNREGEL: @media(max-width:600px){.tc-state-page{padding:24px 0}.tc-state-card{paddin – steuert Darstellung des zugehörigen Bereichs. */ @media(max-width:600px){.tc-state-page{padding:24px 0}.tc-state-card{padding:28px 18px;border-radius:18px}.tc-state-visual{transform:scale(.86);margin-bottom:6px}.tc-state-card h1{font-size:clamp(1.75rem,7vw,2.3rem)}.tc-state-search{padding:8px}} /* RESPONSIVE / DESIGNREGEL: @media(prefers-reduced-motion:reduce){.tc-state-globe,.tc-state-node{animat – steuert Darstellung des zugehörigen Bereichs. */ @media(prefers-reduced-motion:reduce){.tc-state-globe,.tc-state-node{animation:none!important}.tc-state-actions .btn{transition:none!important}.tc-state-actions .btn:hover{transform:none}} /* v1.9.4: language menu must stay clickable over error-state artwork. */ /* RESPONSIVE / DESIGNREGEL: .site-header{ – steuert Darstellung des zugehörigen Bereichs. */ .site-header{position:relative;z-index:2000}.site-header .tc-language{position:relative;z-index:2010}.site-header .tc-language-options{z-index:2020;max-height:min(65vh,480px);overflow-y:auto}.tc-state-page{position:relative;z-index:1} /* RESPONSIVE / DESIGNREGEL: .tc-email-reveal a{ – steuert Darstellung des zugehörigen Bereichs. */ .tc-email-reveal a{color:var(--tc-blue);text-decoration:underline;text-underline-offset:3px}.tc-email-reveal a:focus-visible{outline:2px solid var(--tc-blue);outline-offset:3px} /* Leistungsgruppen: Layout folgt der im Admin gespeicherten Gruppenreihenfolge. */ .tc-services{display:grid;gap:1.5rem}.tc-services-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.tc-services-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.tc-services-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.tc-services-liste{display:block}.tc-service-card{min-width:0;margin-bottom:1rem;padding:1.4rem;border:1px solid #dce4eb;border-radius:8px;background:#fff}.tc-service-card h3{margin-top:0;color:#17365d}@media(max-width:800px){.tc-services{grid-template-columns:1fr}} /* ================================================================ * TECHNIKON CONSULTING | LEISTUNGSKARTEN | DESIGNKORREKTUR 1.9.19 * Verantwortlich: Sven Helle | Individuell für Technikon Consulting. * * ZWECK: Die vom Core-Plugin generierten Leistungskarten an die * bisherige Corporate-Design-Darstellung angleichen. Diese Regeln * gelten für alle Shortcodes [tc_leistungen] und [tc_leistung]. * * ABSTAND: Die Überschrift vor dem Grid erhält ausreichend Abstand. * AUSRICHTUNG: Karten einer Zeile sind gleich hoch, Inhalte oben. * RESPONSIVE: Auf kleinen Geräten nur eine Spalte. * ÄNDERUNG: Anpassungen sind updatefest über Technikon > CSS & Design * möglich. Die Regeln hier sind die Theme-Standardgestaltung. * ================================================================ */ .tc-services { display: grid; align-items: stretch; gap: 22px; margin-block: 32px 40px; } /* Überschrift und Grid: unabhängig vom Gutenberg-Blocktyp. */ .entry-content h2:has(+ .tc-services), .page-content h2:has(+ .tc-services), h2:has(+ .tc-services) { margin-bottom: 32px; } /* Bei WordPress-Block-Wrappern: Grid-Abstand bleibt wirksam. */ .tc-services .tc-service-card { box-sizing: border-box; min-width: 0; height: 100%; margin: 0; padding: 28px 30px 30px; background: #f3f5f7; border: 1px solid #e0e8f0; border-left: 4px solid #2874a6; border-radius: 8px; box-shadow: none; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .tc-services .tc-service-card:hover { border-color: #b5cddd; border-left-color: #2874a6; box-shadow: 0 10px 25px rgba(23,54,93,.075); transform: translateY(-2px); } .tc-services .tc-service-card h3 { margin: 0 0 13px; color: #17365d; font-size: clamp(1.08rem, 1.3vw, 1.2rem); font-weight: 700; line-height: 1.38; letter-spacing: -.012em; } .tc-services .tc-service-body, .tc-services .tc-service-body p { color: #292d32; font-size: 1rem; line-height: 1.7; } .tc-services .tc-service-body p { margin: 0; } .tc-services .tc-service-body p + p { margin-top: 12px; } .tc-services.tc-services-liste { display: block; } .tc-services.tc-services-liste .tc-service-card { margin-bottom: 16px; } @media (max-width: 1050px) { .tc-services.tc-services-cols-3, .tc-services.tc-services-cols-4 { grid-template-columns: repeat(2,minmax(0,1fr)); } } @media (max-width: 700px) { .tc-services.tc-services-cols-2, .tc-services.tc-services-cols-3, .tc-services.tc-services-cols-4 { grid-template-columns: minmax(0,1fr); } .tc-services { gap: 16px; margin-block: 24px 30px; } .tc-services .tc-service-card { padding: 22px 22px 24px; } h2:has(+ .tc-services) { margin-bottom: 24px; } } @media (prefers-reduced-motion: reduce) { .tc-services .tc-service-card { transition: none; } .tc-services .tc-service-card:hover { transform: none; } } /* ============================================================= * TECHNIKON CONSULTING | v1.9.20 | SVEN HELLE * BEREICH: Seitentitel / page-hero auf Unterseiten * ZWECK: Die in älteren Versionen mehrfach auf 12 px reduzierte * vertikale Innenluft moderat erweitern, ohne den Hero wieder * übermäßig hoch zu machen. Die Kachelgestaltung bleibt unberührt. * SPEZIFITÄT: Am Dateiende, um ältere !important-Regeln abzulösen. * DESKTOP: 28 px oben, 30 px unten. * MOBIL: 22 px oben, 24 px unten. * ============================================================= */ body:not(.home) .page-hero { padding: 28px 0 30px !important; } @media (max-width: 700px) { body:not(.home) .page-hero { padding: 22px 0 24px !important; } } /* v1.9.24: Social Media im Footer rechts ausrichten, auch bei schmalen Bildschirmen. */ .site-footer .tc-social-links{display:flex!important;justify-content:flex-end;align-items:center;flex-wrap:wrap;gap:12px 16px;width:100%;margin:22px 0 18px;visibility:visible;opacity:1} .site-footer .tc-social-links a{display:inline-flex!important;visibility:visible;opacity:1;color:#fff} @media(max-width:700px){.site-footer .tc-social-links{justify-content:center}} .site-footer .footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px}.site-footer .tc-footer-bottom-social{margin-left:auto;display:flex;justify-content:flex-end}.site-footer .tc-footer-bottom-social .tc-social-links{margin:0!important;width:auto!important;justify-content:flex-end}@media(max-width:700px){.site-footer .tc-footer-bottom-social{width:100%;margin-left:0;justify-content:center}} /* v1.9.26: konfigurierbare Footer-Menüs und Leistungsgruppen-Designauswahl */ .site-footer .tc-footer-menu{list-style:none;margin:0;padding:0} .site-footer .tc-footer-menu li{margin:0 0 8px} .site-footer .tc-footer-fallback a{display:block;margin:0 0 8px} .site-footer .footer-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px} .site-footer .tc-footer-bottom-social{margin-left:auto} .tc-services.tc-services-design1,.tc-services.tc-services-design2{display:grid} .tc-services-design2 .tc-service-card{background:#fff;border:1px solid #e4e9ef;border-radius:18px;padding:28px;box-shadow:0 10px 28px rgba(23,54,93,.07);transition:transform .2s ease,box-shadow .2s ease} .tc-services-design2 .tc-service-card:hover{transform:translateY(-4px);box-shadow:0 15px 35px rgba(23,54,93,.13)} .tc-services-design2 .tc-service-card h3{color:#17365d;font-weight:700} @media(max-width:700px){.site-footer .tc-footer-bottom-social{margin-left:0;width:100%;justify-content:center}} /* v1.9.27 – dezente, lokal gerenderte Social-Icons rechts im Footer. */ .site-footer .tc-social-icon-row{display:flex!important;gap:13px!important;align-items:center;justify-content:flex-end;flex-wrap:wrap;margin:0!important;width:auto!important} .site-footer .tc-social-icon-row a.tc-social-icon{display:inline-flex!important;align-items:center;justify-content:center;padding:4px!important;width:32px;height:32px;min-height:32px;border:0!important;background:transparent!important;border-radius:6px;color:#fff!important;transition:color .18s ease,transform .18s ease} .site-footer .tc-social-icon-row a.tc-social-icon:hover{color:#65b7e8!important;transform:translateY(-2px)} .site-footer .tc-social-icon-row a.tc-social-icon:focus-visible{outline:2px solid #fff;outline-offset:3px} .site-footer .tc-social-icon-row svg{display:block;width:21px;height:21px;flex:none} @media(max-width:700px){.site-footer .tc-social-icon-row{justify-content:center}} /* v1.9.28 – Vertikaler Abstand für Standard-Sections und CTA-Band reduziert. */ @media(min-width:701px){.section{padding:62px 0}} /* v1.9.29 – CTA-Abstand: vorherige Section unten und CTA-Section oben jeweils um 1/3 reduziert. */ @media (min-width:701px) { .section:has(+ .section .cta-band) { padding-bottom: 41px; } .section:has(.cta-band) { padding-top: 41px; } } /* v1.9.30: komplette Leistungskachel als Link; Hinweis nur bei veröffentlichtem Ziel. */ .tc-services a.tc-service-card-link{display:flex;flex-direction:column;color:inherit;text-decoration:none;cursor:pointer} .tc-services a.tc-service-card-link:hover,.tc-services a.tc-service-card-link:focus-visible{text-decoration:none;border-color:#2874a6} .tc-services a.tc-service-card-link:focus-visible{outline:3px solid #2874a6;outline-offset:3px} .tc-service-card-link .tc-service-more{display:block;margin-top:auto;padding-top:20px;color:#2874a6;font-weight:700} /* v1.9.32: neutrale graue Social-Media-Markenicons ohne Text oder Rahmen. */ .site-footer .tc-social-icon-row a.tc-social-icon{color:#aeb5bf!important;border:0!important;background:transparent!important;width:34px;height:34px;padding:5px!important;border-radius:0!important} .site-footer .tc-social-icon-row a.tc-social-icon:hover{color:#fff!important;transform:translateY(-2px)} .site-footer .tc-social-icon-row svg{width:23px;height:23px} /* v1.9.33 – Der Einleitungstext der Startseite verwendet dieselbe äußere Containerbreite wie das CTA-Band. */ .home .tc-consulting-home-intro > .container{max-width:1260px;} /* ============================================================ * v1.9.34 | Einheitliche responsive Layout-Achsen * Entwickler: Sven Helle – Technikon Consulting * Gilt für die äußeren Inhaltscontainer; die Lesebreite von * Fließtext darf aus typografischen Gründen kleiner bleiben. * Keine starren Breiten oder Höhen für Inhaltsbereiche. * ============================================================ */ :root { --tc-container-width: 1260px; --tc-page-gutter: clamp(16px, 2.5vw, 32px); } /* Einheitliche Außenkanten für Hauptbereiche einschließlich CTA. */ .container, .tc-container, .home .tc-consulting-home-intro > .container { width: min(var(--tc-container-width), calc(100% - (2 * var(--tc-page-gutter)))); max-width: var(--tc-container-width); margin-inline: auto; } /* Flex- und Grid-Kinder dürfen auf schmalen Bildschirmen schrumpfen. */ .container > *, .tc-container > *, .footer-grid > *, .section-head > *, .cta-band > * { min-width: 0; } /* Eingebettete Medien bleiben innerhalb der Spalten. */ .content img, .content video, .content iframe, .tc-consulting-home-intro img, .tc-services img { max-width: 100%; } @media (max-width: 700px) { /* Mobiler Rand bleibt flexibel; CTA-Innenpadding wird nicht nivelliert. */ .container, .tc-container, .home .tc-consulting-home-intro > .container { width: calc(100% - (2 * var(--tc-page-gutter))); } .cta-band { max-width: 100%; } } /* v1.9.36 – Zurückhaltende Rechtstexte; nur Impressum, Datenschutz, AGB usw. */ .tc-legal-page-hero { padding-block: clamp(28px, 4vw, 48px); } .tc-legal-page-hero h1 { font-size: clamp(1.65rem, 3vw, 2.35rem); line-height: 1.2; } .tc-legal-content { padding-block: clamp(28px, 4vw, 52px); } .tc-legal-content h3 { font-size: clamp(1.1rem, 1.7vw, 1.35rem); line-height: 1.35; margin: 1.3em 0 .5em; } .tc-legal-content h3:first-child { margin-top: 0; } /* v1.9.40 – Einheitliche horizontale Achse auf Inhaltsseiten. * Bisher war .tc-consulting-intro auf 980px begrenzt und zentriert, * während Bilder und Leistungskacheln die 1260px-Achse verwendeten. * Nur nicht-Startseiten: volle Breite des übergeordneten responsiven * Containers; keine festen Pixelbreiten und keine Änderungen an H1/CTA. */ body:not(.home) main.content .tc-consulting-intro { width: 100%; max-width: none; margin-inline: 0; } /* v1.9.41 – Globale, zukunftssichere Inhaltsachsen. * Jede bestehende und neu angelegte WordPress-Seite erbt die gemeinsame * äußere 1260px-Achse. Ausgenommen sind absichtlich wählbare * Kachelbreiten (narrow/medium) und vollflächige Hero-Hintergründe. * Bestehende Bildgrößen und Textformatierungen bleiben erhalten. */ :root{--tc-container-width:1260px;--tc-page-gutter:clamp(16px,2.5vw,32px)} .container,.tc-container,body .content > .container,body .content > .tc-container{ width:min(var(--tc-container-width),calc(100% - 2 * var(--tc-page-gutter))); max-width:var(--tc-container-width);margin-inline:auto; } /* Inhaltselemente nutzen die gemeinsame Achse; keine eigenständigen * Zentrierungen für Intro-Texte auf künftigen Seiten. */ body .content .tc-consulting-intro, body .content .tc-consulting-home-intro, body .content .entry-content, body .content .wp-block-post-content{max-width:none;width:100%;margin-inline:0} /* Die bisherige globale 820px-Absatzgrenze erzeugte versetzte Spalten. * Nur die Breite auf Inhaltsseiten korrigieren, nicht die Typografie. */ body .content .container > p,body .content .container > ul, body .content .container > ol,body .content .entry-content p, body .content .entry-content li,body .content .tc-consulting-intro p{max-width:none} /* Standardbilder sind flüssig, ohne feste Höhe oder Seitenüberlauf. */ body .content .container img,body .content .entry-content img{max-width:100%;height:auto} body .content .container > *,body .content .entry-content > *{min-width:0} @media(max-width:700px){ .container,.tc-container,body .content > .container,body .content > .tc-container{ width:calc(100% - 2 * var(--tc-page-gutter)); } } /* v1.9.42 | Einheitliche Bild- und Textachsen für bestehende und neue Seiten. * Das Seitenbild wird nicht länger auf 1050px begrenzt. Der äußere * .container bestimmt die Breite (max. 1260px) für Bild, Text und Kacheln. * Die Höhenbegrenzung bleibt für die Bildkomposition erhalten. */ body:not(.home) main.content > .container > img.tc-page-photo, body:not(.home) main.content .tc-page-photo { display:block; box-sizing:border-box; width:100%; max-width:100%; height:auto; max-height:420px; object-fit:cover; object-position:center; } /* v1.9.45: header search; localized WordPress search, no external assets. */ .site-header .tc-top-tools{position:relative} .tc-header-search{position:relative;display:inline-flex;align-items:center} .tc-search-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid rgba(23,54,93,.16);border-radius:8px;background:transparent;color:#17365d;cursor:pointer} .tc-search-toggle:hover,.tc-search-toggle:focus-visible{background:#edf3f8;outline-offset:3px} .tc-search-panel{position:absolute;right:0;top:calc(100% + 12px);z-index:1500;width:min(420px,calc(100vw - 32px));padding:16px;background:#fff;border:1px solid #d8e1ea;border-radius:10px;box-shadow:0 16px 40px rgba(12,30,54,.18)} .tc-search-panel[hidden]{display:none!important} .tc-search-panel form{display:flex;gap:8px} .tc-search-panel input[type=search]{flex:1;min-width:0;width:100%;padding:11px;border:1px solid #a8b8c9;border-radius:6px;color:#292d32} .tc-search-panel button[type=submit]{padding:10px 14px;border:0;border-radius:6px;background:#17365d;color:white;cursor:pointer} @media(max-width:600px){.tc-search-panel{position:fixed;top:80px;left:16px;right:16px;width:auto}.tc-search-panel form{flex-wrap:wrap}.tc-search-panel button[type=submit]{flex:0 0 auto}} /* v1.9.46 – identische 44px-Bedienflächen für Suche und Sprachen. Die Flagge bleibt als vollständiger, barrierefrei beschrifteter Button klickbar. */ .site-header .tc-top-tools .tc-language-trigger, .site-header .tc-top-tools .tc-search-toggle{box-sizing:border-box;width:44px!important;min-width:44px!important;max-width:44px!important;height:44px!important;min-height:44px!important;max-height:44px!important;padding:0!important;display:inline-flex;align-items:center;justify-content:center;border:1px solid #d9e3ed;border-radius:8px;background:#fff;line-height:1;cursor:pointer} .site-header .tc-top-tools .tc-language-trigger{gap:0!important} .site-header .tc-top-tools .tc-language-trigger>span:first-child{font-size:22px;line-height:1} .site-header .tc-top-tools .tc-language-trigger .tc-chevron{display:none!important} .site-header .tc-top-tools .tc-language-trigger:hover,.site-header .tc-top-tools .tc-search-toggle:hover{background:#f0f6fb;border-color:#2874a6} @media(max-width:850px){.site-header .tc-top-tools .tc-language-trigger{width:44px!important;min-width:44px!important;min-height:44px!important;padding:0!important}} /* v1.9.75 | Einheitliche vertikale Abstaende: Desktop-Section 62px bleibt verbindlich. * Startseite: Abstand Intro -> Kacheln wird als EIN gemeinsamer Abstand * definiert, statt Section-Padding und Grid-Margins zu addieren. * Keine globalen Eingriffe in andere Seiten, CTA oder mobile Typografie. */ @media (min-width:701px) { .section { padding-block:62px; } .home .tc-consulting-home-intro { padding-bottom:31px; } .home .tc-consulting-home-intro + .section#leistungen { padding-top:31px; } .home .tc-consulting-home-intro + .section#leistungen .tc-services { margin-top:0; margin-bottom:0; } .home .tc-consulting-home-intro + .section#leistungen .tc-services .tc-service-card { margin-bottom:0; } .home .tc-consulting-home-intro .container > :last-child { margin-bottom:0; } .home .section#leistungen .tc-services { margin-block:0; } .home .section#leistungen .tc-services .tc-service-card { margin-bottom:0; } } @media (max-width:700px) { .home .tc-consulting-home-intro { padding-bottom:24px; } .home .tc-consulting-home-intro + .section#leistungen { padding-top:24px; } .home .section#leistungen .tc-services { margin-block:0; } .home .section#leistungen .tc-services .tc-service-card { margin-bottom:0; } }