/* PRAKTELLO — REFERENZDESIGN V2 | ausschließlich visuelle Anpassungen
   Basierend auf der vom Nutzer ausgewählten Startseiten-Vorlage.
   Keine externen Fonts, keine Tracker, kein Admin-Backend. */
:root{--bg:#061219;--panel:#0c1c22;--mint:#58ebd0;--txt:#f6faf9;--muted:#c8d3d5;--border:#2a3a40}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{background:var(--bg);color:var(--txt);font-family:Inter,'Segoe UI',Arial,Helvetica,sans-serif;line-height:1.58;-webkit-font-smoothing:antialiased}
.wrap{width:calc(100% - 104px);max-width:1530px;margin-inline:auto}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--mint);outline-offset:4px}
p{color:#c8d4d5}
h1,h2,h3{letter-spacing:-.046em}
.kicker,.smalltag{color:var(--mint);font-size:10px;font-weight:800;letter-spacing:.16em}
.mint{color:var(--mint)}
/* Header is genuine translucent glass ON TOP OF the photo, like the reference */
.head{position:sticky;top:0;z-index:90;width:100%;background:rgba(6,19,25,.74);backdrop-filter:blur(15px) saturate(105%);-webkit-backdrop-filter:blur(15px);border-bottom:1px solid rgba(214,252,246,.13);box-shadow:none}
.pr-reference-home .head{position:absolute;top:0;left:0;right:0;background:rgba(4,19,25,.35)}
.headin{min-height:76px;gap:20px}
.head .brand{display:inline-flex;flex:0 0 auto;width:auto;max-width:235px;gap:6px;align-items:center}
.head .brand .brand-mark{width:54px;height:54px;object-fit:contain;filter:none}
.brand-word{font-family:Inter,'Segoe UI',Arial,sans-serif;font-weight:800;color:#fff;font-size:27px;letter-spacing:-.065em;line-height:1}
.brand-word small{font-size:7px;letter-spacing:.19em;margin-top:6px;color:#d4dbdc;display:block}
.brand-dot{color:var(--mint)}
.nav{gap:clamp(18px,2.2vw,35px)}
.nav a{color:#f2f5f5;font-weight:550;font-size:13px;white-space:nowrap;transition:color .18s}
.nav a:hover,.nav a[aria-current=page]{color:var(--mint)}
.nav a[aria-current=page]:after{height:2px;bottom:-11px;background:var(--mint)}
.navbutton{border:1px solid var(--mint);border-radius:8px;background:var(--mint);color:#042921;padding:12px 21px;font-size:12px;font-weight:800;white-space:nowrap;box-shadow:none}
.navbutton:hover{background:#a2ffec;color:#05251e;transform:none}
.menu{border:1px solid rgba(255,255,255,.28);border-radius:8px;background:rgba(4,21,25,.45);color:#fff}
.availability-status{background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:4px 0!important}
.availability-status .availability-words strong{color:#dbfaee!important;font-size:11px!important}
.availability-status .availability-words small{color:#d3dfe0!important;font-size:9.5px!important}
.availability-status .availability-dot{width:9px;height:9px}
.btn{border-radius:8px;background:var(--mint);border-color:var(--mint);color:#082822;font-weight:750;padding:13px 18px}
.btn:hover{background:#a2ffea;transform:none;color:#072620}
/* HERO — one uninterrupted photograph, left vignette, transparent header */
.pr-home-hero{position:relative;isolation:isolate;overflow:hidden;background:#071219;min-height:527px;display:flex;align-items:center}
.pr-hero-image{position:absolute;inset:0 0 0 33%;z-index:-2;background-image:url('/bilder/hero-referenz-workspace.webp');background-size:cover;background-position:center 52%;background-repeat:no-repeat}
.pr-hero-overlay{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#061218 0%,rgba(6,18,24,.99) 17%,rgba(6,18,24,.96) 33%,rgba(6,18,24,.66) 46%,rgba(6,18,24,.12) 75%,rgba(6,18,24,.04) 100%),linear-gradient(0deg,#07151a 0%,transparent 24%,rgba(6,18,24,.08) 75%,rgba(6,18,24,.18) 100%)}
.pr-hero-content{padding-top:116px;padding-bottom:35px;position:relative;z-index:2;min-height:527px;display:flex;align-items:center}
.pr-hero-copy{max-width:720px}
.pr-hero-eyebrow{font-size:10px;letter-spacing:.19em;color:#64f5df;display:block;margin-bottom:17px}
.pr-home-hero h1{font-size:clamp(47px,4.85vw,66px);letter-spacing:-.06em;line-height:1.025;margin:0 0 15px;color:#fff;font-weight:800;max-width:760px;text-wrap:balance}
.pr-home-hero h1 span{color:#58eacf}
.pr-home-hero p{font-size:clamp(15px,1.2vw,18px);line-height:1.55;color:#edf2f3;max-width:580px;margin:0}
.pr-hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:13px;margin-top:22px}
.pr-btn{display:inline-flex;gap:13px;justify-content:center;align-items:center;padding:13px 20px;min-height:46px;border-radius:8px;font-size:13px;font-weight:750;border:1px solid rgba(235,255,253,.65);white-space:nowrap;transition:background .2s,color .2s,border-color .2s}
.pr-btn svg{width:17px;height:17px;flex-shrink:0}
.pr-btn-primary{color:#062820;background:var(--mint);border-color:var(--mint)}
.pr-btn-primary:hover{background:#b2fff1;border-color:#b2fff1}
.pr-btn-ghost{color:#fff;background:rgba(5,20,27,.33);border-color:#a7bcc0}
.pr-btn-ghost:hover{background:rgba(77,121,118,.3);border-color:#efffff}
.pr-hero-trust{display:flex;align-items:center;flex-wrap:wrap;gap:clamp(20px,3.3vw,48px);margin-top:27px}
.pr-hero-trust>span{display:flex;gap:12px;align-items:center;font-size:11px;line-height:1.42;color:#e0e9ea}
.pr-hero-trust svg{width:23px;height:23px;color:var(--mint);flex-shrink:0}
/* Two cinematic cards, photo to the right and readable content left */
.pr-home-offers{background:#07151a;padding:20px 0 12px}
.pr-offers-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:19px}
.pr-service-card{min-width:0;min-height:158px;position:relative;overflow:hidden;border:1px solid #344c53;border-radius:10px;display:flex;align-items:center;padding:20px 64px 20px 23px;background:#0b1b23;transition:border-color .2s}
.pr-service-card::before{content:"";position:absolute;inset:0;opacity:.82;background-position:100% center;background-size:cover;background-repeat:no-repeat;pointer-events:none}
.pr-service-it::before{background-image:linear-gradient(90deg,#09171e 0%,rgba(9,23,30,.98) 40%,rgba(9,23,30,.33) 100%),url('/bilder/hero-it-hd.webp')}
.pr-service-web::before{background-image:linear-gradient(90deg,#09171e 0%,rgba(9,23,30,.98) 43%,rgba(9,23,30,.30) 100%),url('/bilder/webdesign-vorschau.webp')}
.pr-service-card:hover{border-color:#5ebca8}
.pr-service-copy{position:relative;z-index:1;display:flex;gap:15px;align-items:flex-start;max-width:490px}
.pr-service-symbol{flex:0 0 auto;color:var(--mint);width:58px;height:58px;display:grid;place-items:center;border-radius:50%;background:rgba(72,220,184,.23)}
.pr-service-symbol svg{width:30px;height:30px}
.pr-service-card h2{font-size:25px;line-height:1.2;margin:6px 0 9px;font-weight:750;color:#fff}
.pr-service-card p{font-size:12px;line-height:1.62;color:#d1dddf;margin:0;max-width:352px}
.pr-round-arrow{position:absolute;right:15px;bottom:20px;z-index:2;width:41px;height:41px;display:grid;place-items:center;border-radius:50%;border:1px solid #75888e;background:rgba(8,19,25,.75);color:#fff;font-size:21px}
/* tight 6-service rail from screenshot */
.pr-mini-services{background:#07151a;border-bottom:1px solid rgba(185,230,218,.14);padding:12px 0 19px}
.pr-mini-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:stretch}
.pr-mini-service{display:flex;gap:12px;align-items:center;padding:13px 13px 13px 18px;min-width:0;border-right:1px solid #264047}
.pr-mini-service:first-child{padding-left:0}
.pr-mini-service:last-child{border-right:0;padding-right:0}
.pr-mini-service>svg{width:26px;height:26px;flex-shrink:0;color:var(--mint)}
.pr-mini-service>span{display:flex;flex-direction:column;gap:3px;min-width:0}
.pr-mini-service strong{font-size:10.5px;line-height:1.22;color:#fff;white-space:normal}
.pr-mini-service small{font-size:9.5px;line-height:1.24;color:#aebec1}
.pr-mini-service:hover strong{color:var(--mint)}
/* Screenshot-inspired Weiden trust block */
.pr-region{display:grid;grid-template-columns:1fr 1fr;min-height:345px;background:#08161c}
.pr-region-photo{position:relative;overflow:hidden;min-height:345px;background:#1a2a30}
.pr-region-photo img{display:block;height:100%;width:100%;object-fit:cover;object-position:center center}
.pr-region-text{display:flex;align-items:center;padding:45px clamp(35px,4vw,65px) 45px clamp(40px,4vw,70px);background:linear-gradient(105deg,#0a1c22,#07151a)}
.pr-region-text>div{max-width:640px}
.pr-region h2{color:#fff;font-size:clamp(27px,2.65vw,39px);margin:12px 0 9px}
.pr-region p{color:#c8d5d7;font-size:13px;line-height:1.7;max-width:570px;margin-bottom:18px}
.pr-region-checks{display:flex;flex-wrap:wrap;gap:15px 25px;margin:18px 0 24px}
.pr-region-checks span{display:inline-flex;gap:7px;align-items:center;font-size:11px;color:#dbe5e5}
.pr-region-checks svg{width:20px;height:20px;color:var(--mint)}
.pr-region-cta{min-height:42px;font-size:12px;padding:10px 15px}
/* All remaining pages: consistent dark photographic style and high contrast */
.pr-reference-page .section{background:#07151b;color:#f8fbfb}
.pr-reference-page .section-alt{background:#0a1b22}
.pr-reference-page .p-hero-full{background:#08161b}
.pr-reference-page .p-hero-full::before{background-position:70% center}
.pr-reference-page .p-hero-full::after{background:linear-gradient(90deg,#07151b 0%,rgba(7,21,27,.98) 28%,rgba(7,21,27,.84) 50%,rgba(7,21,27,.13) 100%),linear-gradient(0deg,#07151b,transparent 30%)}
.pr-reference-page .tile,.pr-reference-page .simplecard,.pr-reference-page .form,.pr-reference-page .seo-card,.pr-reference-page .seo-note{background:#0d2027;border:1px solid #30505a;box-shadow:none;color:#f5faf9}
.pr-reference-page .tile,.pr-reference-page .simplecard{border-radius:10px}
.pr-reference-page .tile:hover,.pr-reference-page .tile.open{border-color:#5ca99c;transform:none}
.pr-reference-page .tile h3,.pr-reference-page .simplecard h3,.pr-reference-page .seo-note h3{color:#f7fbfa}
.pr-reference-page .tile p,.pr-reference-page .simplecard p,.pr-reference-page .seo-card p,.pr-reference-page .seo-note p{color:#c4d4d7}
.pr-reference-page .tile img{filter:saturate(.9)}
.pr-reference-page .price-basket,.pr-reference-page .price-category{box-shadow:none;border-radius:12px}
.pr-reference-page .price-basket{background:#112a2e}
.pr-reference-page .price-card{box-shadow:none}
.pr-reference-page .price-basket h2,.pr-reference-page .price-category h2{color:#fff}
.pr-reference-page .pickup-section{background:#0a1c22}
.pr-reference-page .pickup-feature{background:#10242a;border-color:#355257}
.pr-reference-page .wd-hero,.pr-reference-page .wd-gallery,.pr-reference-page .wd-offers{background:#08161c}
.pr-reference-page .wd-offers .simplecard{background:#102027}
/* Normalize homepage's previously green-on-light SEO disclosure to visual reference palette */
.pr-reference-home .seo-section{background:#08171e;padding:38px 0}
.pr-reference-home .seo-disclosure{background:#0e2026;border-color:#2f4b50;border-radius:10px}
.pr-reference-home .seo-disclosure-toggle:hover{background:#133036}
.pr-reference-home .seo-disclosure-title{color:#f8fafa}
.pr-reference-home .seo-card,.pr-reference-home .seo-note{background:#102229;color:#eef6f6}
.pr-reference-home .section-alt{background:#0b1b20}
.pr-reference-home .cta{background:#0a2427}
.footer{background:#07151b;border-top:1px solid #2c454b;color:#fff}
.footer .brand{gap:7px}
.footer .brand img.brand-mark{width:43px;height:43px}
.footer .brand-word{font-size:24px}
.footer p,.footer .copyright{color:#aebec0}
/* desktop breakpoints: legible, not squeezed */
@media(max-width:1280px){
 .headin{gap:14px}.nav{gap:16px}.head .brand .brand-mark{width:46px;height:46px}.brand-word{font-size:24px}.navbutton{padding:11px 14px}
 .pr-home-hero h1{font-size:clamp(45px,4.8vw,64px)}
 .pr-mini-service{gap:8px;padding-inline:9px}.pr-mini-service>svg{width:23px;height:23px}
 .pr-mini-service strong{font-size:10px}.pr-mini-service small{font-size:9px}
}
@media(max-width:1060px){
 .wrap{width:calc(100% - 64px)}
 .head .nav{gap:13px}.headin{gap:11px}
 .navbutton{display:none}
 .pr-hero-image{left:37%}
 .pr-hero-overlay{background:linear-gradient(90deg,#061218 0%,rgba(6,18,24,.99) 30%,rgba(6,18,24,.77) 54%,rgba(6,18,24,.23) 100%),linear-gradient(0deg,#07151a,transparent 24%)}
 .pr-home-hero h1{font-size:clamp(44px,5.8vw,62px)}
 .pr-mini-row{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:7px}.pr-mini-service:nth-child(3){border-right:0}.pr-mini-service:nth-child(4){padding-left:0}
}
@media(max-width:880px){
 .head{position:sticky}
 .pr-reference-home .head{position:absolute}
 .headin{min-height:74px}
 .menu{display:block;margin-left:auto}
 .head .nav{display:none;position:absolute;top:74px;left:0;right:0;background:rgba(6,20,26,.98);padding:18px 32px;gap:10px;flex-direction:column;border-bottom:1px solid #385257;box-shadow:0 12px 20px #0009}
 .head .nav.open{display:flex}
 .head .nav a{padding:11px 0}
 .head .nav a[aria-current=page]:after{display:none}
 .head .availability-status{margin-left:auto}
 .pr-home-hero{min-height:600px}
 .pr-hero-image{left:21%;background-position:62% center;opacity:.8}
 .pr-hero-overlay{background:linear-gradient(90deg,#061218 0%,rgba(6,18,24,.95) 25%,rgba(6,18,24,.68) 60%,rgba(6,18,24,.30) 100%),linear-gradient(0deg,#07151a 0%,transparent 37%)}
 .pr-hero-content{padding:145px 0 55px;min-height:600px}
 .pr-home-hero h1{font-size:clamp(47px,7.1vw,64px)}
 .pr-service-card{padding:17px 42px 18px 17px}.pr-service-copy{gap:11px}.pr-service-symbol{width:43px;height:43px}.pr-service-symbol svg{width:23px;height:23px}.pr-service-card h2{font-size:22px}
 .pr-region{grid-template-columns:1fr}.pr-region-photo{min-height:260px;height:260px}.pr-region-text{padding:45px 32px}
}
@media(max-width:630px){
 .wrap{width:calc(100% - 38px)}
 .headin{min-height:70px;gap:8px}
 .head .brand .brand-mark{width:40px;height:40px}.brand-word{font-size:22px}.brand-word small{font-size:6.7px}
 .availability-status{margin-left:auto}.availability-status .availability-words{display:none!important}
 .head .nav{top:70px;padding:13px 20px}
 .pr-home-hero{min-height:650px}
 .pr-hero-image{inset:0;background-position:59% center;opacity:.62}
 .pr-hero-overlay{background:linear-gradient(90deg,rgba(4,17,23,.98),rgba(4,17,23,.78)),linear-gradient(0deg,#07151a 0%,transparent 60%)}
 .pr-hero-content{min-height:650px;display:flex;align-items:center;padding:120px 0 51px}
 .pr-home-hero h1{font-size:clamp(41px,10.3vw,54px);margin-bottom:16px;letter-spacing:-.055em;line-height:1.07}
 .pr-home-hero p{font-size:15px;line-height:1.66}
 .pr-hero-actions{margin-top:25px;gap:11px}.pr-btn{font-size:12px;min-height:45px;padding:11px 13px}
 .pr-hero-trust{gap:16px 23px;margin-top:24px}.pr-hero-trust>span{font-size:10px;gap:8px}.pr-hero-trust svg{width:20px;height:20px}
 .pr-home-offers{padding:16px 0 10px}.pr-offers-grid{grid-template-columns:1fr;gap:13px}
 .pr-service-card{min-height:155px;padding:21px 49px 20px 17px}
 .pr-service-card h2{font-size:23px}.pr-service-card p{font-size:12px;line-height:1.5}
 .pr-mini-services{padding:8px 0 19px}.pr-mini-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
 .pr-mini-service{border-right:0;border-bottom:1px solid #20383f;min-height:69px;padding:10px 6px!important}
 .pr-mini-service:nth-child(odd){border-right:1px solid #20383f}
 .pr-mini-service svg{width:21px;height:21px}.pr-mini-service strong{font-size:10px}.pr-mini-service small{font-size:9px}
 .pr-region-photo{height:260px;min-height:260px}.pr-region-text{padding:36px 20px 40px}.pr-region h2{font-size:29px}.pr-region p{font-size:13px}
 .pr-region-checks{gap:12px 16px}
 .pr-reference-page .p-hero-full{padding-top:65px}
}
@media(prefers-reduced-motion:reduce){.pr-btn,.pr-service-card,.nav a{transition:none}}

/* Post-QA: IT hero is a single full-width image, no duplicated framed photo. */
.pr-reference-page .p-hero-full{min-height:560px;padding:70px 0 75px;display:flex;align-items:center;overflow:hidden}
.pr-reference-page .p-hero-full .refined-hero-layout{display:block;width:calc(100% - 104px);max-width:1530px;margin-inline:auto}
.pr-reference-page .p-hero-full .refined-hero-photo{display:none!important}
.pr-reference-page .p-hero-full .p-hero-contents{width:100%;max-width:690px;margin:0}
.pr-reference-page .p-hero-full .p-hero-contents>div{max-width:610px}
.pr-reference-page .p-hero-full h1{font-size:clamp(49px,5vw,70px)}
/* Mobile availability: indicator stays inline with logo and menu, never a second header row. */
@media(max-width:880px){
 .head .availability-status{order:0;flex:0 0 auto;width:auto;justify-content:center;margin-left:auto;padding:4px 7px!important}
 .head .menu{order:1;margin-left:2px}
 .head .nav{z-index:99}
}
@media(max-width:630px){
 .pr-reference-page .p-hero-full .refined-hero-layout{width:calc(100% - 38px)}
 .pr-reference-page .p-hero-full{min-height:560px}
}
/* Reference picture position: keep the location badge visible in the visual. */
.pr-region-photo img{object-position:25% center}
@media(max-width:630px){.pr-region-photo img{object-position:15% center}}


/* PRAKTELLO v3 – Bildqualität, Lesbarkeit, Original-Logo & zentrierte Standortsektion.
   Nur Staging. Dateistand 2026-10-29. */
:root{--mint:#59e7cd;--txt:#f7fbfa;--muted:#c7d7d7}
/* Original vollständiges transparentes Praktello-Logo. Kein nachgebautes P. */
.head .brand,.footer .brand{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:flex-start;gap:0;width:235px;max-width:235px;min-width:0;padding:0;overflow:visible}
.head .brand img.brand-logo{width:235px;max-width:100%;height:auto;max-height:72px;object-fit:contain;object-position:left center;display:block;filter:none}
.footer .brand{width:228px;max-width:228px}
.footer .brand img.brand-logo{width:228px;max-width:100%;height:auto;max-height:75px;object-fit:contain}
/* Durchgehendes scharfes 2560px-Hero-Bild statt 698px-Thumbnail; leichte Vignette nur zur Textsicherung. */
.pr-home-hero{background:#07161b;min-height:570px}
.pr-hero-image{inset:0;background-image:url('/bilder/hero-home-2560.webp');background-size:cover;background-repeat:no-repeat;background-position:center center;opacity:1;filter:none}
.pr-hero-overlay{background:linear-gradient(90deg,#06151b 0%,rgba(6,21,27,.95) 22%,rgba(6,21,27,.82) 38%,rgba(6,21,27,.30) 66%,rgba(6,21,27,.04) 100%),linear-gradient(0deg,rgba(6,18,24,.78) 0%,transparent 20%,transparent 85%,rgba(6,17,22,.25) 100%)}
.pr-hero-content{min-height:570px;padding-top:126px;padding-bottom:45px}
.pr-hero-copy{max-width:745px}
.pr-home-hero h1{font-size:clamp(44px,4.55vw,66px);color:#fff;max-width:740px;line-height:1.06}
.pr-home-hero p{color:#f0f6f5;font-size:clamp(15px,1.15vw,18px);line-height:1.62;text-shadow:0 1px 2px rgba(0,0,0,.15)}
/* Karten: rechter Bildbereich voll sichtbar, linker Textbereich ohne störende dunkle Bildmaske. */
.pr-home-offers{padding:21px 0 15px}
.pr-service-card{background:#091a21;min-height:185px;padding:25px 61px 24px 24px;isolation:isolate;box-shadow:none}
.pr-service-card::before{content:'';position:absolute;inset:0 0 0 42%;opacity:1;background-size:cover;background-position:center;background-repeat:no-repeat;z-index:-2;filter:none}
.pr-service-it::before{background-image:url('/bilder/service-it-hd.webp');background-position:center 44%}
.pr-service-web::before{background-image:url('/bilder/service-webdesign-hd.webp');background-position:center 35%}
.pr-service-card::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#091a21 0%,#091a21 39%,rgba(9,26,33,.93) 52%,rgba(9,26,33,.2) 79%,rgba(9,26,33,.08) 100%);pointer-events:none}
.pr-service-copy{max-width:470px;gap:18px;align-items:flex-start}
.pr-service-card h2{color:#fff;font-size:26px;line-height:1.25;margin:4px 0 10px;text-shadow:none}
.pr-service-card p{color:#eff5f4;font-size:13px;line-height:1.7;max-width:335px;text-shadow:0 1px 2px #0003}
.pr-service-symbol{background:#155a50;color:#7dffde}
.pr-round-arrow{background:rgba(7,19,25,.90);border-color:#a1bac0}
/* Kein qualitativ schlechtes Stadtfoto. Ruhige, mittige und hochwertige Textsektion. */
.pr-region.pr-region-centered{display:block;min-height:0;padding:82px 28px 88px;background:#081a20;border-top:1px solid #28444b;border-bottom:1px solid #28444b;text-align:center}
.pr-region-centered .pr-region-photo{display:none!important}
.pr-region-centered .pr-region-text{display:block;width:100%;max-width:1000px;margin:0 auto;padding:0;background:transparent}
.pr-region-centered .pr-region-text>div{max-width:850px;margin:0 auto}
.pr-region-centered .kicker{display:block;font-size:11px;letter-spacing:.17em;color:#70f0d4}
.pr-region-centered h2{font-size:clamp(35px,4.3vw,60px);line-height:1.12;color:#fff;letter-spacing:-.046em;margin:17px 0 16px}
.pr-region-centered p{max-width:730px;margin:0 auto;color:#cbdcde;font-size:clamp(15px,1.28vw,18px);line-height:1.75}
.pr-region-centered .pr-region-checks{justify-content:center;gap:24px 34px;margin:30px auto}
.pr-region-centered .pr-region-checks span{font-size:13px;color:#eff7f5}
.pr-region-centered .pr-region-cta{margin:4px auto 0}
@media(max-width:1160px){.head .brand{width:195px;max-width:195px}.head .brand img.brand-logo{width:195px}.headin{gap:13px}.head .nav{gap:15px}}
@media(max-width:880px){.head .brand{width:210px;max-width:210px}.head .brand img.brand-logo{width:210px}.pr-hero-overlay{background:linear-gradient(90deg,#06151b 0%,rgba(6,21,27,.95) 30%,rgba(6,21,27,.74) 65%,rgba(6,21,27,.35) 100%),linear-gradient(0deg,#06151b,transparent 30%)}.pr-service-card{padding:23px 50px 23px 19px}.pr-service-card::before{left:42%}}
@media(max-width:630px){
 .head .brand{width:185px;max-width:185px}.head .brand img.brand-logo{width:185px;max-height:65px}
 .footer .brand{width:195px;max-width:195px}.footer .brand img.brand-logo{width:195px}
 .pr-home-hero{min-height:650px}.pr-hero-content{min-height:650px}
 .pr-hero-image{background-position:60% center;opacity:.82}
 .pr-hero-overlay{background:linear-gradient(90deg,rgba(5,20,26,.97),rgba(5,20,26,.68)),linear-gradient(0deg,rgba(5,19,25,.9),transparent 64%)}
 .pr-home-hero h1{font-size:clamp(39px,10vw,53px)}
 .pr-service-card{min-height:183px;padding:21px 48px 21px 19px}
 .pr-service-card::before{inset:0 0 0 33%}
 .pr-service-card::after{background:linear-gradient(90deg,#091a21 0%,rgba(9,26,33,.97) 40%,rgba(9,26,33,.69) 67%,rgba(9,26,33,.27) 100%)}
 .pr-service-card h2{font-size:22px}.pr-service-card p{font-size:12px;line-height:1.65}
 .pr-region.pr-region-centered{padding:62px 20px 68px}
 .pr-region-centered h2{font-size:clamp(35px,9vw,48px)}
 .pr-region-centered p{font-size:14px}
 .pr-region-centered .pr-region-checks{gap:16px 19px;justify-content:center}
 .pr-region-centered .pr-region-checks span{font-size:11px}
}

/* Praktello V4 – scharfer Originalbild-Hero und klare Desktop/Mobil-Navigation */
.pr-hero-image{
  background-image:url('/bilder/hero-praktello-v4-scharf.webp')!important;
  background-size:cover;
  background-position:center center;
  opacity:1;
  filter:none;
}
/* Image itself has a soft dark photographic fade left. Avoid re-darkening the whole image. */
.pr-hero-overlay{
  background:linear-gradient(180deg,rgba(4,18,24,.26) 0%,transparent 22%,transparent 78%,rgba(4,18,24,.30) 100%);
}
/* Crisp, visible right halves of the cards; left typography stays legible. */
.pr-service-card{background:#091a20;overflow:hidden}
.pr-service-card::before{inset:0 0 0 43%;opacity:1;filter:none;background-size:cover;background-position:center}
.pr-service-it::before{background-image:url('/bilder/service-it-hd.webp');background-position:center 45%}
.pr-service-web::before{background-image:url('/bilder/service-webdesign-v4.webp');background-position:57% 45%}
.pr-service-card::after{
 background:linear-gradient(90deg,#091a20 0%,#091a20 34%,rgba(9,26,32,.91) 47%,rgba(9,26,32,.25) 75%,rgba(9,26,32,.01) 100%);
}
.pr-service-card p{max-width:295px;color:#f3f7f5}
/* Entire primary navigation: start / IT / web / prices / contact. */
.head .nav{gap:clamp(12px,1.45vw,26px)}
.head .nav a{font-size:13px;white-space:nowrap}
@media(min-width:881px) and (max-width:1180px){
 .head .brand{width:195px;max-width:195px}
 .head .brand img.brand-logo{width:195px}
 .headin{gap:clamp(7px,1vw,14px)}
 .head .nav{gap:clamp(8px,1vw,14px)}
 .head .nav a{font-size:12px}
 .head .navbutton{padding:10px 11px;font-size:11px}
}
@media(max-width:880px){
 .head .nav a{font-size:15px;padding:12px 0}
 .pr-hero-image{background-position:60% center;opacity:1}
 .pr-hero-overlay{background:linear-gradient(90deg,rgba(4,18,24,.94),rgba(4,18,24,.35)),linear-gradient(0deg,#06151b 0%,transparent 30%)}
}
@media(max-width:630px){
 .pr-hero-image{background-position:62% center;opacity:1}
 .pr-hero-overlay{background:linear-gradient(90deg,rgba(4,17,23,.97),rgba(4,17,23,.77)),linear-gradient(0deg,#06151b 0%,transparent 35%)}
 .pr-service-card::before{inset:0 0 0 34%;opacity:1}
 .pr-service-card::after{background:linear-gradient(90deg,#091a20 0%,rgba(9,26,32,.95) 37%,rgba(9,26,32,.36) 84%,rgba(9,26,32,.12))}
}

/* IT-Seite: Originalaufnahme statt vergrößerter Thumbnail */
.p-hero-it::before{background-image:url("/bilder/hero-it-v4-scharf.webp")!important;filter:none}


/* PRAKTELLO V5 – neue HTML-Ziele, korrektes Webdesign-Motiv & harmonisierte Unterseiten.
 * Nur Staging; originale Templates und Formularfunktion bleiben unberührt.
 */
/* Die V4-Service-Webdesign-Kachel zeigte versehentlich das Motiv mit Versandkartons. */
.pr-service-card.pr-service-web::before {
  background-image: url('/bilder/webdesign-hero-v7.webp?v=20261029-8');
  background-position: 50% 44%;
  background-size: cover;
}
.pr-service-card.pr-service-web::after {
  background:linear-gradient(90deg,#091a20 0%,#091a20 35%,rgba(9,26,32,.95) 47%,rgba(9,26,32,.34) 74%,rgba(9,26,32,.06) 100%);
}
/* Webdesign: prägnante V4-Typografie und flächige Karten statt altem, losgelöstem Layout. */
.pr-v5-webdesign .wd-hero {
  position:relative; isolation:isolate;
  min-height:605px; display:flex; align-items:center;
  padding:78px 0 85px;
  background:linear-gradient(125deg,#06141a 0%,#07171c 45%,#10252a 100%);
  border-bottom:1px solid #25434a;
}
.pr-v5-webdesign .wd-hero::before {
  content:""; position:absolute; z-index:-1; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 55% 80% at 95% 38%,rgba(56,221,186,.10),transparent 70%);
}
.pr-v5-webdesign .wd-hero-inner {gap:clamp(28px,4.5vw,72px);align-items:center}
.pr-v5-webdesign .wd-hero h1 {font-size:clamp(47px,4.65vw,70px);line-height:1.07;letter-spacing:-.059em;color:#fff;max-width:620px;margin:20px 0 20px;font-weight:800}
.pr-v5-webdesign .wd-hero .lead {font-size:clamp(15px,1.15vw,18px);line-height:1.72;color:#d9e8e9;max-width:540px}
.pr-v5-webdesign .wd-hero .actions {gap:12px 19px;margin-top:27px}
.pr-v5-webdesign .wd-hero .btn,.pr-v5-webdesign .wd-info .btn {border-radius:8px;font-size:13px;padding:13px 17px}
.pr-v5-webdesign .wd-hero .mutelink {font-size:13px}
.pr-v5-webdesign .wd-points {border-top:1px solid rgba(165,221,213,.18);padding-top:21px;margin-top:26px;gap:12px 21px}
.pr-v5-webdesign .wd-points span {font-size:12px;color:#d8e6e7}
.pr-v5-webdesign .wd-device {border:1px solid #3b6970;border-radius:12px;box-shadow:0 25px 65px #0008}
.pr-v5-webdesign .wd-art-badge {border-radius:8px;background:#0b2327}
.pr-v5-webdesign .wd-gallery {background:#07161b;padding:79px 0 90px}
.pr-v5-webdesign .wd-view {border-radius:11px;background:#0c2026;box-shadow:none}
.pr-v5-webdesign .wd-filter,.pr-v5-webdesign .wd-outline {border-radius:8px}
.pr-v5-webdesign .wd-ctrlbuttons .wd-control {border-radius:8px}
.pr-v5-webdesign .wd-services .wd-service {border-radius:10px;background:#10242a}
/* Kontakt: dieselbe visuelle Sprache wie die Startseite. */
.pr-v5-contact .section:first-child {
  position:relative;isolation:isolate;overflow:hidden;
  padding:92px 0 108px;
  background:linear-gradient(110deg,#06161c 0%,#07171c 58%,#0a2025 100%);
}
.pr-v5-contact .section:first-child::before {
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(circle at 93% 6%,rgba(59,215,182,.085),transparent 38%);
}
.pr-v5-contact .contactgrid {grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(36px,6vw,105px);align-items:start}
.pr-v5-contact .contactgrid>div:first-child {padding-top:19px}
.pr-v5-contact .contactgrid h1 {font-size:clamp(49px,5vw,72px);line-height:1.09;letter-spacing:-.059em;font-weight:800;margin:20px 0 27px;color:#fff}
.pr-v5-contact .contactgrid .lead {font-size:clamp(15px,1.22vw,18px);line-height:1.75;color:#d3e1e3;max-width:510px}
.pr-v5-contact .contactgrid a[href^="mailto:"] {color:#75efd0;text-decoration:underline;text-decoration-color:rgba(117,239,208,.5);text-underline-offset:5px}
.pr-v5-contact .response-note {margin-top:25px;background:rgba(30,75,73,.13);padding:16px 18px;border-left:3px solid #59e7cd;border-radius:0 6px 6px 0}
.pr-v5-contact .form {border-radius:12px;background:#0d2026;border-color:#31525b;padding:clamp(25px,3vw,39px);box-shadow:0 23px 60px #0003}
.pr-v5-contact .form h3 {font-size:clamp(23px,2vw,29px);margin:0 0 23px;color:#fff}
.pr-v5-contact .form .field {margin-bottom:18px}
.pr-v5-contact .field input,.pr-v5-contact .field select,.pr-v5-contact .field textarea {background:#061319;border:1px solid #34525a;border-radius:7px;padding:13px 14px;color:#fff}
.pr-v5-contact .form .btn {border-radius:8px;padding:13px 19px}
.pr-v5-contact .form :is(input,select,textarea,button):focus-visible {outline:2px solid #75efd0;outline-offset:2px}
@media(max-width:980px){
 .pr-v5-webdesign .wd-hero {padding:73px 0 76px;min-height:0}
 .pr-v5-webdesign .wd-hero-inner {grid-template-columns:1fr}
 .pr-v5-webdesign .wd-hero-art {width:min(100%,760px);margin:0 auto}
 .pr-v5-contact .contactgrid {grid-template-columns:1fr;gap:38px}
 .pr-v5-contact .contactgrid>div:first-child {padding-top:0;max-width:730px}
 .pr-v5-contact .section:first-child {padding:67px 0 80px}
}
@media(max-width:630px){
 .pr-service-card.pr-service-web::after {background:linear-gradient(90deg,#091a20 0%,rgba(9,26,32,.96) 39%,rgba(9,26,32,.68) 75%,rgba(9,26,32,.29) 100%)}
 .pr-v5-webdesign .wd-hero {padding:56px 0 66px}
 .pr-v5-webdesign .wd-hero h1 {font-size:clamp(41px,10vw,55px)}
 .pr-v5-webdesign .wd-hero .actions {gap:12px}
 .pr-v5-webdesign .wd-art-badge {bottom:18px;right:0}
 .pr-v5-contact .section:first-child {padding:53px 0 72px}
 .pr-v5-contact .contactgrid h1 {font-size:clamp(42px,10vw,56px);margin:16px 0 22px}
 .pr-v5-contact .form {padding:22px}
}


/* PRAKTELLO V6 – Webdesign-Hero mit exakt derselben Layout-Sprache wie die Startseite.
   Die getrennte V5-Webdesign-Heroansicht wurde im HTML entfernt. */
.pr-v6-webdesign .head {
  position:absolute;
  top:0;left:0;right:0;
  background:rgba(4,19,25,.35);
}
.pr-v6-webdesign .pr-webdesign-hero {
  position:relative;
  min-height:clamp(525px,37vw,615px);
  background:#061219;
}
.pr-v6-webdesign .pr-webdesign-hero .pr-hero-image {
  inset:0 0 0 31%;
  background-image:url('/bilder/webdesign-hero-v7.webp?v=20261029-8')!important;
  background-position:53% 55%;
  background-size:cover;
  opacity:.94;
}
.pr-v6-webdesign .pr-webdesign-hero .pr-hero-overlay {
  background:linear-gradient(90deg,#061218 0%,rgba(6,18,24,.99) 25%,rgba(6,18,24,.95) 38%,rgba(6,18,24,.58) 54%,rgba(6,18,24,.08) 80%,rgba(6,18,24,.04) 100%),linear-gradient(0deg,#07151a 0%,transparent 28%,rgba(6,18,24,.06) 100%);
}
.pr-v6-webdesign .pr-webdesign-hero .pr-hero-content {
  min-height:clamp(525px,37vw,615px);
  padding-top:135px;
  padding-bottom:57px;
}
.pr-v6-webdesign .pr-webdesign-hero .pr-hero-copy {
  max-width:700px;
}
.pr-v6-webdesign .pr-webdesign-hero h1 {
  font-size:clamp(47px,4.85vw,66px);
  line-height:1.025;
  letter-spacing:-.06em;
  max-width:690px;
  margin:0 0 19px;
  font-weight:800;
}
.pr-v6-webdesign .pr-webdesign-hero p {
  max-width:515px;
}
.pr-v6-webdesign .pr-webdesign-hero .pr-hero-trust>span {
  position:relative;
  padding-left:15px;
}
.pr-v6-webdesign .pr-webdesign-hero .pr-hero-trust>span::before {
  content:'•';position:absolute;left:0;color:var(--mint);font-size:17px;top:-2px;
}
.pr-v6-webdesign .pr-webdesign-hero .pr-hero-actions {margin-top:26px;}
.pr-v6-webdesign .wd-gallery {padding-top:78px;}
@media(max-width:880px){
  .pr-v6-webdesign .head {position:absolute;}
  .pr-v6-webdesign .pr-webdesign-hero .pr-hero-image {inset:0 0 0 16%;background-position:48% center;opacity:.68;}
  .pr-v6-webdesign .pr-webdesign-hero .pr-hero-overlay {
    background:linear-gradient(90deg,#061218 0%,rgba(6,18,24,.96) 42%,rgba(6,18,24,.66) 77%,rgba(6,18,24,.30) 100%),linear-gradient(0deg,#07151a 0%,transparent 30%);
  }
  .pr-v6-webdesign .pr-webdesign-hero .pr-hero-content {padding-top:135px;min-height:580px;}
}
@media(max-width:630px){
  .pr-v6-webdesign .pr-webdesign-hero {min-height:590px;}
  .pr-v6-webdesign .pr-webdesign-hero .pr-hero-image {inset:0;opacity:.38;background-position:55% center;}
  .pr-v6-webdesign .pr-webdesign-hero .pr-hero-overlay {
    background:linear-gradient(90deg,rgba(4,17,23,.98),rgba(4,17,23,.83)),linear-gradient(0deg,#07151a 0%,transparent 55%);
  }
  .pr-v6-webdesign .pr-webdesign-hero .pr-hero-content {padding:125px 0 58px;min-height:590px;}
  .pr-v6-webdesign .pr-webdesign-hero h1 {font-size:clamp(41px,10.3vw,55px);line-height:1.06;}
  .pr-v6-webdesign .pr-webdesign-hero .pr-hero-trust {gap:13px 18px;margin-top:26px;}
  .pr-v6-webdesign .pr-webdesign-hero .pr-hero-trust>span {font-size:10px;}
  .pr-v6-webdesign .wd-gallery {padding-top:60px;}
}

/* PRAKTELLO V7: high-res webdesign preview; no stretched low-resolution thumbnail */
.pr-v6-webdesign .pr-webdesign-hero .pr-hero-image{background-image:url('/bilder/webdesign-hero-v7.webp?v=20261029-8')!important;background-position:center 48%;background-size:cover;}

/* Praktello V8: Verdichtete Vertrauenshinweise im Webdesign-Hero; kein großer Leerraum. */
.pr-v6-webdesign .pr-webdesign-hero .pr-hero-actions { margin-top: 24px; }
.pr-v6-webdesign .pr-webdesign-hero .pr-hero-trust { margin-top: 12px; gap: 7px 23px; }
.pr-v6-webdesign .pr-webdesign-hero .pr-hero-trust > span { padding-left: 12px; line-height: 1.35; }
.pr-v6-webdesign .pr-webdesign-hero .pr-hero-trust > span::before { top: -1px; font-size: 15px; }
@media (max-width: 630px) {
 .pr-v6-webdesign .pr-webdesign-hero .pr-hero-trust { margin-top: 13px; gap: 7px 15px; }
 .pr-v6-webdesign .pr-webdesign-hero .pr-hero-trust > span { font-size: 10px; }
}