@font-face{font-family:Manrope;src:url('fonts/manrope-latin.woff2') format('woff2');font-style:normal;font-weight:200 800;font-display:swap}
@font-face{font-family:Inter;src:url('fonts/inter-latin.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
@font-face{font-family:"Manrope Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Arial");size-adjust:100.63%;ascent-override:106.33%;descent-override:29.81%;line-gap-override:0%}
@font-face{font-family:"Inter Fallback";src:local("Arial"),local("ArialMT");size-adjust:105.84%;ascent-override:91.65%;descent-override:22.68%;line-gap-override:0%}
/* Section spacing (--hero-pad-bottom, also used for the content area of legal pages and blog articles) and spacing of the hero area on every page (header to first content, last content to the end of the hero), taken from
   the homepage: 92px/108px on desktop, 100px/108px on tablets, 55px/64px on phones. */
:root{--hero-pad-top:92px;--hero-pad-bottom:108px}
@media(max-width:1100px){:root{--hero-pad-top:100px}}
@media(max-width:760px){:root{--hero-pad-top:55px;--hero-pad-bottom:64px}}
:root{--bg:#0a0a0a;--surface:#121212;--text:#f8f8f8;--muted:#aaaeb3;--cyan:#3cbfff;--orange:#ff652a;--line:#282828;--light:#f6f7f8;--ink:#0a0a0a;--ink-muted:#50565c;--ink-accent:#0b6e9c;--divider:#222;--font-heading:Manrope,"Manrope Fallback",Arial,sans-serif;--font-body:Inter,"Inter Fallback",Arial,sans-serif}

/* Base */
*{box-sizing:border-box}
html{background-color:var(--bg);scroll-behavior:smooth;scroll-padding-top:106px}
body{margin:0;background:transparent;color:var(--text);font-family:var(--font-body);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
body.menu-open{overflow:hidden}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}
button{cursor:pointer;color:inherit}
img{display:block;max-width:100%;height:auto}
p,h1,h2,h3,h4{margin:0}
::selection{background:var(--cyan);color:var(--bg)}
:focus-visible{outline:2px solid var(--cyan);outline-offset:6px}
section[tabindex="-1"]:focus{outline:none}
h1,h2,h3,h4{font-family:var(--font-heading);font-weight:700;line-height:1.15;letter-spacing:-.02em}
h1{font-size:clamp(2.9rem,4.7vw,4.5rem);line-height:1.05;letter-spacing:-.04em}
h2{font-size:clamp(2rem,3.2vw,3rem);line-height:1.12;letter-spacing:-.035em}
h3{font-size:1.3rem}
.container{width:min(1200px,calc(100% - 80px));margin-inline:auto}
.skip-link{position:fixed;left:16px;top:-80px;z-index:100;background:var(--cyan);color:#080808;padding:12px 20px}
.skip-link:focus{top:12px}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Brand name: "irma" bold, "designs" light */
.brand-irma{font-weight:800}
.brand-designs{font-weight:300}
.brand-name{font-family:var(--font-heading);font-size:21px;line-height:1;letter-spacing:-.035em}
.brand-dot{color:var(--cyan);font-weight:800}

/* Header */
.site-header{height:94px;border-bottom:1px solid var(--divider);background:var(--bg);position:sticky;top:0;z-index:50}
.header-inner{height:100%;display:flex;align-items:center;gap:34px}
.brand{display:inline-flex;align-items:center;gap:12px;flex-shrink:0}
.brand img{width:36px;height:45px;object-fit:contain}
.desktop-nav{display:flex;gap:26px;margin-left:auto}
.desktop-nav a{position:relative;padding-block:6px;font-size:13px;font-weight:650;color:#d5d9dc;transition:color .25s ease}
.desktop-nav a:after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--cyan);transform:scaleX(0);transform-origin:right center;transition:transform .35s cubic-bezier(.65,0,.35,1)}
.desktop-nav a:hover,.desktop-nav a:focus-visible,.desktop-nav a[aria-current]{color:#fff}
.desktop-nav a:hover:after,.desktop-nav a:focus-visible:after,.desktop-nav a[aria-current]:after{transform:scaleX(1);transform-origin:left center}
.text-link:hover{color:var(--cyan)}
.header-cta{display:inline-flex;align-items:center;gap:14px;border:1px solid #343434;background:#121212;border-radius:40px;padding:8px 8px 8px 18px;font-size:12px;font-weight:600;transition:background-color .3s ease,border-color .3s ease,color .3s ease}
.header-cta span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--cyan);color:#061018;font-family:Arial,sans-serif;font-size:15px;line-height:1;box-shadow:0 0 0 0 var(--cyan);transition:transform .3s ease,box-shadow .3s ease}
.header-cta:hover,.header-cta:focus-visible{background:#f8f8f8;border-color:#f8f8f8;color:var(--ink)}
.header-cta:hover span,.header-cta:focus-visible span{transform:rotate(45deg);box-shadow:0 0 0 8px var(--cyan)}
.menu-toggle{display:none;background:transparent;border:1px solid var(--line);border-radius:50%;width:44px;height:44px;padding:12px;transition:border-color .25s ease}
.menu-toggle span{height:1px;background:#fff;display:block;margin:5px 0;transition:transform .3s ease}
.menu-toggle[aria-expanded="true"]{border-color:var(--cyan)}
.menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(3px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-3px) rotate(-45deg)}
.mobile-nav[hidden]{display:none}
/* Mobile menu: icon links that fade in one after another, CTA and quick contact tiles */
.mobile-nav-links{list-style:none;margin:0;padding:0}
.mobile-nav-links li{border-bottom:1px dashed #262626;animation:mobile-link-in .45s ease both}
.mobile-nav-links li:nth-child(2){animation-delay:.04s}
.mobile-nav-links li:nth-child(3){animation-delay:.08s}
.mobile-nav-links li:nth-child(4){animation-delay:.12s}
.mobile-nav-links li:nth-child(5){animation-delay:.16s}
.mobile-nav-links li:nth-child(6){animation-delay:.2s}
.mobile-nav-links li:nth-child(7){animation-delay:.24s}
.mobile-nav-links a{display:flex;align-items:center;gap:14px;padding:11px 2px;font-family:var(--font-heading);font-size:18px;font-weight:600;letter-spacing:-.015em;color:#f3f5f6;transition:color .2s ease}
.mobile-nav-icon{display:grid;place-items:center;width:38px;height:38px;flex:none;border:1px solid #2c2c2c;border-radius:12px;color:var(--cyan);transition:border-color .2s ease}
.mobile-nav-icon svg{width:18px;height:18px}
.mobile-nav-icon img{width:26px;height:26px}
.mobile-nav-arrow{margin-left:auto;font-family:Arial,sans-serif;font-size:18px;color:#5f676d;transition:color .2s ease,transform .2s ease}
.mobile-nav-links a:hover,.mobile-nav-links a:focus-visible{color:var(--cyan)}
.mobile-nav-links a:hover .mobile-nav-icon,.mobile-nav-links a:focus-visible .mobile-nav-icon{border-color:var(--cyan)}
.mobile-nav-links a:hover .mobile-nav-arrow,.mobile-nav-links a:focus-visible .mobile-nav-arrow{color:var(--cyan);transform:translateX(3px)}
.mobile-nav-footer{display:grid;gap:12px;margin-top:auto;padding-top:24px;animation:mobile-link-in .45s .28s ease both}
.mobile-nav-cta{width:100%;justify-content:space-between}
.mobile-nav-contact{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mobile-nav-contact a{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border:1px solid #232323;border-radius:16px;background:var(--surface);font-size:12px;font-weight:600;line-height:1.3;color:#c9ced2;transition:border-color .2s ease}
.mobile-nav-contact a:hover,.mobile-nav-contact a:focus-visible{border-color:#3cbfff73}
.mobile-nav-contact img{width:26px;height:26px}
@keyframes mobile-nav-in{from{opacity:0}to{opacity:1}}
@keyframes mobile-link-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Buttons: no lift or shadow; colour change and a rotating arrow */
.button{display:inline-flex;justify-content:center;align-items:center;gap:20px;border-radius:50px;padding:9px 9px 9px 24px;font-size:14px;line-height:1.5;font-weight:600;border:1px solid transparent;transition:background-color .25s ease,border-color .25s ease,color .25s ease}
.button span{display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:50%;font-family:Arial,sans-serif;font-size:16px;line-height:1;box-shadow:0 0 0 0 #061018;transition:transform .3s ease,box-shadow .3s ease,background-color .25s ease,color .25s ease}
/* On hover the circle grows (solid spread in its own colour) until it is 1px away from the edge of the 52px button */
.button:hover span,.button:focus-visible span{transform:rotate(45deg);box-shadow:0 0 0 9px #061018}
.button:disabled{opacity:.65;cursor:progress}
.button-primary{background:var(--cyan);border-color:var(--cyan);color:#061018}
.button-primary span{background:#061018;color:var(--cyan)}
.button-primary:hover,.button-primary:focus-visible{background:#f8f8f8;border-color:#f8f8f8;color:var(--ink)}
.button-dark{background:var(--ink);border-color:var(--ink);color:#fff}
.button-dark span{background:var(--cyan);color:#061018}
.button-dark:hover,.button-dark:focus-visible{background:var(--cyan);border-color:var(--cyan);color:#061018}
.button-dark:hover span,.button-dark:focus-visible span{background:#061018;color:var(--cyan)}
.text-link{font-size:13px;line-height:1.5;font-weight:650;display:inline-flex;align-items:center;gap:15px;transition:color .2s}
.text-link span{font-size:20px;font-family:Arial,sans-serif;line-height:1}
/* Inline SVG icons instead of the ↗ / ✳ characters, which iOS renders as emoji */
.icon{display:block;flex:none;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.icon-arrow{width:.8em;height:.8em;stroke-width:1.9}
.button .icon-arrow,.header-cta .icon-arrow,.contact-bar-arrow .icon-arrow{width:.95em;height:.95em}
.icon-star{width:.85em;height:.85em;stroke-width:2.4}

/* Section background: subtle film grain from pure random noise (every pixel independent, so no lattice or tile edges).
   One noise pixel per screen pixel thanks to 1x, 2x and 3x files: the grain stays crisp on sharp screens and when zooming */
.grid-bg{position:relative;isolation:isolate}
.grid-bg:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:url("images/grain.png");background-image:-webkit-image-set(url("images/grain.png") 1x,url("images/grain-2x.png") 2x,url("images/grain-3x.png") 3x);background-image:image-set(url("images/grain.png") 1x,url("images/grain-2x.png") 2x,url("images/grain-3x.png") 3x);background-size:256px 256px;background-repeat:repeat}

/* Hero */
.hero{position:relative;overflow:hidden}
.hero-inner{display:grid;grid-template-columns:1.08fr 1fr;gap:30px;min-height:630px;align-items:center;padding-block:70px 64px}
.hero-copy{position:relative;z-index:2}
.eyebrow{font-family:var(--font-heading);font-size:12px;font-weight:700;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);display:flex;gap:12px;align-items:center;margin-bottom:22px}
.eyebrow:before{content:'';width:28px;height:10px;display:inline-block;flex:none;background:repeating-linear-gradient(130deg,transparent 0 4px,var(--orange) 4px 6px,transparent 6px 9px)}
.eyebrow-dark{color:var(--ink-accent)}
.hero-description{color:#b9bdc2;max-width:500px;margin-top:26px;font-size:16px;line-height:1.85}
.button-row{display:flex;gap:26px;align-items:center;flex-wrap:wrap;margin-top:32px}
/* Hero moon: moonrise behind the bar with the six advantages, which serves as the horizon. The picture area reaches
   40px behind the top edge of that bar and is clipped only at the bottom, so the moon disappears exactly behind it.
   On load the moon rises from behind the horizon; with a mouse, script.js lets it set again while scrolling down
   (--moon-shift). It turns very slowly (one turn in 6 minutes). Decorative only (aria-hidden). */
.hero-visual{position:relative;align-self:stretch;margin-bottom:-104px;clip-path:inset(-100vmax -100vmax 0 -100vmax)}
.hero-moon{position:absolute;left:0;right:0;bottom:0;width:min(510px,92%);margin-inline:auto;pointer-events:none;transform:translateY(calc(20% + var(--moon-shift,0) * 1px));animation:moon-rise 2.6s cubic-bezier(.22,.8,.3,1) .3s backwards}
.hero-moon img{display:block;width:100%;height:auto;border-radius:50%;filter:brightness(.72) contrast(1.05);animation:moon-turn 360s linear infinite}
@keyframes moon-rise{from{translate:0 85%}}
@keyframes moon-turn{to{rotate:360deg}}
.hero-bottom{display:flex;align-items:center;gap:28px;padding-bottom:108px}
.hero-features{flex:1;list-style:none;margin:0;padding:8px;display:grid;grid-template-columns:repeat(6,1fr)}
.hero-feature{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:16px}
.hero-feature:before{content:'';position:absolute;left:16px;right:16px;top:0;border-top:1px dashed #333;display:none}
.hero-feature:after{content:'';position:absolute;left:0;top:20%;bottom:20%;border-left:1px dashed #333}
.hero-feature:first-child:after{display:none}
.hero-feature img{width:34px;height:34px;transition:transform .35s ease}
.hero-feature strong{display:block;font-family:var(--font-heading);font-size:14px;font-weight:700;line-height:1.35;color:#f4f5f6;overflow-wrap:anywhere}
.hero-feature small{display:block;margin-top:3px;font-size:13px;line-height:1.45;color:#8f969c}
/* Page-load entrance for the top of each page (pure CSS, so nothing flickers and it also works without JavaScript) */
.hero-copy>*,.legal-hero-grid>div>*,.article-head-grid>div>*{animation:reveal-up .8s cubic-bezier(.16,.8,.3,1) backwards}
.hero-copy>:nth-child(2),.legal-hero-grid>div>:nth-child(2),.article-head-grid>div>:nth-child(2){animation-delay:.07s}
.hero-copy>:nth-child(3),.legal-hero-grid>div>:nth-child(3),.article-head-grid>div>:nth-child(3){animation-delay:.14s}
.hero-copy>:nth-child(4),.legal-hero-grid>div>:nth-child(4),.article-head-grid>div>:nth-child(4){animation-delay:.21s}
.article-figure{animation:reveal-up .9s cubic-bezier(.16,.8,.3,1) .15s backwards}
.hero-features{animation:reveal-up .9s cubic-bezier(.16,.8,.3,1) .3s backwards}
@keyframes reveal-up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* Sections and cards */
.section{padding-block:108px}
/* One divider between neighbouring sections; none next to the marquee ribbons */
main>section+section{border-top:1px solid var(--divider)}
/* The CTA panel sits between "Ablauf" and "Blog" without dividers of its own */
main>.cta-section,main>.cta-section+section{border-top:0}
/* Stars and shooting stars (fixed layer behind the page) only show through the areas with grain (.grid-bg):
   every other part of the page gets the solid page colour. Blog articles have their grainy head inside <article>. */
main>:not(.grid-bg):not(:has(>.grid-bg)),main>:has(>.grid-bg)>:not(.grid-bg){background-color:var(--bg)}
.section-heading{margin-bottom:46px}
.centered{text-align:center;margin-inline:auto}
.centered .eyebrow{justify-content:center}
.section-heading .eyebrow{margin-bottom:16px}
.section-heading>p:last-child:not(.eyebrow){color:var(--muted);margin-top:21px;font-size:15px;line-height:1.8}
.heading-row{display:flex;justify-content:space-between;align-items:flex-end;gap:32px}
.heading-row>div{min-width:0}
.heading-row>p{max-width:350px;margin:0 0 5px!important;font-size:14px!important}
/* Cards: light outer frame, dark 4px ring and a dashed line on the inner edge */
.framed-card{position:relative;border:1px solid #2b2b2b;border-radius:24px;background:#131313;box-shadow:inset 0 0 0 4px #0e0e0e;overflow:hidden;isolation:isolate}
.framed-card:before{content:'';position:absolute;inset:4px;border:1px dashed #ffffff0d;border-radius:19px;pointer-events:none;transition:border-color .3s ease}
/* Card zones: a slightly lighter title bar and a darker cell behind the icon, both inside the dashed inner line;
   the text sits on the card surface */
.card-heading{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:99px;margin:5px 5px 0;padding:20px 0 20px 21px;border-bottom:1px dashed #2f2f2f;border-radius:18px 18px 0 0;background:#171717}
.card-heading:after{content:'';position:absolute;top:0;right:0;bottom:0;width:94px;border-left:1px dashed #2f2f2f;border-top-right-radius:18px;background:#0f0f0f}
.card-heading img{position:relative;z-index:1;width:48px;height:48px;margin-right:23px;flex:none;object-fit:contain;transition:transform .35s ease}
.card-heading h3{font-size:1.35rem;min-width:0;padding-right:24px;overflow-wrap:break-word;hyphens:auto}
/* The title stops before the darker icon cell (94px wide, of which the icon takes 71px), so long titles wrap instead of running under it */
.card-body{padding:24px 27px 28px}
.card-body>p{font-size:16px;line-height:1.85;color:#b2b4b8}
.check-list{list-style:none;padding:0;margin:22px 0 25px;display:grid;gap:0;border-top:1px dashed #2a2a2a}
.check-list li{display:flex;align-items:flex-start;gap:12px;padding:11px 2px;border-bottom:1px dashed #2a2a2a;font-size:13.5px;line-height:1.5;color:#d3d5d7}
/* Plain list: one blue check per line, lines separated by dashed rules (top and bottom closed like a small table) */
.check-list li:before{content:'';flex:none;width:16px;height:16px;margin-top:2px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233cbfff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5L19.5 7'/%3E%3C/svg%3E") center/16px no-repeat}
.card-body>.text-link{padding-top:20px;border-top:1px solid #272727;width:100%;justify-content:space-between}
.card-body>.text-link span{color:var(--cyan)}

/* Services */
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.service-card{display:flex;flex-direction:column}
.service-card .card-body{flex:1;display:flex;flex-direction:column}
.service-card .card-body>.text-link{margin-top:auto}

/* References */
/* Reference showcase: tabs for the four websites and one large screen with a slideshow of the selected website, first
   the laptop view, then the smartphone view (on phones the other way round). script.js cross-fades the pictures, moves
   on to the next reference, fills the progress line of the active tab and handles the view switch and the pause
   button. Without JavaScript all pictures are shown one below the other. */
.showcase-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:24px}
.showcase-tab{position:relative;display:flex;align-items:center;gap:16px;min-width:0;padding:18px 22px 22px;border:1px solid #2b2b2b;border-radius:18px;background:#131313;transition:border-color .3s ease,background-color .3s ease}
.showcase-tab-number{flex:none;font-family:var(--font-heading);font-size:13px;font-weight:700;color:#6f767c;transition:color .3s ease}
.showcase-tab-text{display:grid;gap:3px;min-width:0}
.showcase-tab-category{font-size:11px;line-height:1.4;color:#959ca3}
.showcase-tab-name{font-family:var(--font-heading);font-size:1.1rem;font-weight:700;line-height:1.3;color:#c3c8cc;transition:color .3s ease}
.showcase-tab-progress{position:absolute;left:22px;right:22px;bottom:11px;height:2px;border-radius:2px;background:#ffffff12;overflow:hidden;opacity:0;transition:opacity .3s ease}
.showcase-tab-progress span{display:block;height:100%;background:var(--cyan);transform:scaleX(0);transform-origin:left center}
.showcase-tab.is-active{border-color:#444;background:#171717}
.showcase-tab.is-active .showcase-tab-number{color:var(--cyan)}
.showcase-tab.is-active .showcase-tab-name{color:#fff}
.showcase.is-enhanced .showcase-tab.is-active .showcase-tab-progress{opacity:1}
.showcase-stage{padding:10px}
.showcase:not(.is-enhanced) .showcase-slide+.showcase-slide{margin-top:14px}
.showcase-bar{display:flex;align-items:center;gap:12px;min-height:46px;padding:0 4px 10px 12px}
.showcase-dots{display:flex;gap:7px;flex:0 0 48px}
.showcase-dots span{width:9px;height:9px;border-radius:50%;background:#2f2f2f}
.showcase-caption{flex:1;min-width:0;margin:0;overflow:hidden;font-size:13px;line-height:1.4;color:#959ca3;text-align:center;white-space:nowrap;text-overflow:ellipsis}
.showcase-caption strong{font-weight:600;color:#f3f5f6}
.showcase-toggle{display:grid;place-items:center;flex:none;width:36px;height:36px;margin-left:8px;padding:0;border:1px solid #333;border-radius:50%;background:transparent;color:#f3f5f6;transition:border-color .2s ease}
.showcase-toggle[hidden],.showcase-views[hidden]{display:none}
.showcase-toggle svg{width:14px;height:14px;fill:currentColor}
.showcase-toggle .icon-resume,.showcase-toggle.is-paused .icon-pause{display:none}
.showcase-toggle.is-paused .icon-resume{display:block;margin-left:2px}
.showcase-views{display:flex;flex:none;gap:2px;padding:3px;border:1px solid #333;border-radius:999px}
.showcase-views button{padding:6px 14px;border:0;border-radius:999px;background:transparent;color:#959ca3;font-family:var(--font-heading);font-size:12px;font-weight:700;line-height:1.3;cursor:pointer;transition:color .2s ease,background-color .2s ease}
.showcase-views button[aria-pressed="true"]{background:var(--cyan);color:#061018}
.showcase-screen{position:relative;overflow:hidden;width:100%;aspect-ratio:3/2;border-radius:14px;background:#0f0f0f;touch-action:pan-y}
.showcase-view{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s ease;user-select:none;-webkit-user-drag:none}
.showcase-view.is-active{opacity:1}
.showcase.is-enhanced .showcase-slide:not([hidden]){animation:showcase-in .5s ease}
@keyframes showcase-in{from{opacity:0}}
.showcase:not(.is-enhanced) .showcase-screen{display:grid;gap:10px;aspect-ratio:auto;max-height:none;background:none}
.showcase:not(.is-enhanced) .showcase-view{position:static;height:auto;border-radius:14px;opacity:1}
@media(hover:hover){
  .showcase-tab:not(.is-active):hover{border-color:#363636}
  .showcase-toggle:hover{border-color:#ffffff59}
  .showcase-views button[aria-pressed="false"]:hover{color:#fff}
}
.circle-arrow{display:grid;place-items:center;width:38px;height:38px;border:1px solid #383838;border-radius:50%;font-size:20px;color:var(--cyan);flex-shrink:0;transition:background-color .2s,color .2s}
.section-bottom{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:37px;font-size:13px;color:var(--muted)}
.section-bottom .text-link{color:#e0e4e7}
.section-bottom .text-link:hover{color:var(--cyan)}

/* Process timeline: vertical line, steps turn blue while scrolling */
.process-layout{display:grid;grid-template-columns:.85fr 1.4fr;gap:80px;align-items:start}
.process-intro{position:sticky;top:130px;margin:0}
/* The lines stay behind the number circles (isolation + z-index), also while a step has its own layer during the
   entrance animation */
.timeline{--progress:0px;position:relative;isolation:isolate;list-style:none;margin:0;padding:0;display:grid;gap:18px}
.timeline:before,.timeline:after{content:'';position:absolute;z-index:-1;left:23px;top:42px;width:2px;border-radius:2px;pointer-events:none}
.timeline:before{bottom:0;background:linear-gradient(180deg,#2e2e2e 72%,transparent)}
.timeline:after{height:var(--progress);background:var(--cyan);transition:height .4s ease}
.timeline-step{position:relative;display:grid;grid-template-columns:48px 1fr;gap:24px;align-items:start}
.timeline-number{position:relative;z-index:1;display:grid;place-items:center;width:48px;height:48px;margin-top:18px;border:1px solid #2e2e2e;border-radius:50%;background:var(--bg);font-family:var(--font-heading);font-size:14px;font-weight:700;color:#7d858b;transition:color .3s ease,border-color .3s ease}
.timeline-step.is-active .timeline-number,.timeline:not(.timeline-scroll) .timeline-number{border-color:var(--cyan);color:var(--cyan)}
.timeline-card{padding:0 0 22px}
.timeline-card h3{font-size:1.2rem;margin-bottom:10px}
/* Same zones as the service cards; the 74px title bar is centred on the step number (both at 42px) */
.timeline-card-head{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:74px;margin:5px 5px 0;padding:14px 0 14px 23px;border-bottom:1px dashed #2f2f2f;border-radius:18px 18px 0 0;background:#171717}
.timeline-card-head:after{content:'';position:absolute;top:0;right:0;bottom:0;width:80px;border-left:1px dashed #2f2f2f;border-top-right-radius:18px;background:#0f0f0f}
.timeline-card-head h3{margin:0}
.timeline-card-head img{position:relative;z-index:1;width:40px;height:40px;flex:none;margin-right:20px;transition:transform .35s ease}
.timeline-card p{margin:18px 28px 0;color:var(--muted);font-size:15px;line-height:1.8}

/* Call to action */
.cta-section{padding-block:0}
.cta-panel{position:relative;display:grid;justify-items:center;padding:72px 64px;text-align:center;border-radius:32px;background:var(--light);color:var(--ink);overflow:hidden;isolation:isolate}
/* Faint dots on the same 18px positions the hover shimmer uses, so pixels light up "on" the dots */
.cta-panel:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(circle at center,#00000014 1px,transparent 1.6px);background-size:18px 18px;background-position:0 0}
.cta-panel:after{content:'';position:absolute;inset:8px;border:1px dashed #0000001f;border-radius:25px;pointer-events:none}
.cta-panel :focus-visible{outline-color:var(--ink)}
.pixel-canvas{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
.cta-content{max-width:720px}
.cta-panel .eyebrow{justify-content:center;margin-bottom:18px}
.cta-panel .cta-phone{text-align:left}
.cta-panel h2{color:var(--ink);font-size:clamp(1.9rem,3vw,2.8rem);line-height:1.15}
.cta-content>p:not(.eyebrow){margin:20px auto 0;max-width:560px;color:var(--ink-muted);font-size:16px;line-height:1.8}
.cta-panel .button-row{justify-content:center;margin-top:30px;gap:28px}
.cta-phone{display:inline-flex;align-items:center;gap:12px;font-size:15px;font-weight:600;line-height:1.4;color:var(--ink)}
.cta-phone img{width:30px;height:30px;flex:none;transition:transform .3s}
.cta-phone small{display:block;font-size:12px;font-weight:500;color:#5d646a}
.cta-phone:hover img{transform:rotate(-10deg)}

/* Pricing: one tab per service with three price cards each; without JavaScript all tables are listed one below the other */
.pricing-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 34px}
.pricing-tabs[hidden],.pricing-panel[hidden]{display:none}
.pricing-tabs button{padding:10px 20px;border:1px solid #2c2c2c;border-radius:40px;background:#121212;color:#d5d9dc;font:inherit;font-size:14px;font-weight:600;line-height:1.4;cursor:pointer;transition:background-color .25s ease,border-color .25s ease,color .25s ease}
.pricing-tabs button[aria-selected="true"]{background:var(--cyan);border-color:var(--cyan);color:#061018}
.pricing-panel+.pricing-panel{margin-top:48px}
.pricing-panel-title{margin-bottom:18px;font-family:var(--font-heading);font-size:1.15rem;font-weight:700}
.is-tabbed .pricing-panel-title{display:none}
.pricing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.price-card{display:flex;flex-direction:column;padding:0 27px 26px}
.price-top{margin:5px -22px 0;padding:23px 22px 22px;border-bottom:1px dashed #2f2f2f;border-radius:18px 18px 0 0;background:#171717}
.price-card h3{font-size:1.3rem}
.price-desc{margin-top:10px;font-size:15px;line-height:1.75;color:var(--muted)}
.price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin-top:22px}
.price-from,.price-unit{font-size:13px;color:#8b949b}
.price-tax{flex-basis:100%;font-size:12px;color:#7d858b}
.price-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px}
.price-badge{padding:4px 12px;border-radius:30px;background:var(--cyan);color:#061018;font-size:12px;font-weight:700;line-height:1.4}
/* Business-Website: a blue highlight travels around the border
   (browsers without @property show the gradient without movement) */
@property --border-angle{syntax:'<angle>';inherits:false;initial-value:0deg}
.price-card-featured{border-width:2px;border-color:transparent;background:linear-gradient(#131313,#131313) padding-box,conic-gradient(from var(--border-angle,0deg),#2b2b2b 0deg,#2b2b2b 190deg,#3cbfff 260deg,#3cbfff 300deg,#2b2b2b 360deg) border-box;animation:border-orbit 5s linear infinite}
@keyframes border-orbit{to{--border-angle:360deg}}
.price-amount{font-family:var(--font-heading);font-size:2.4rem;font-weight:700;line-height:1.1;letter-spacing:-.03em;color:#fff}
.price-card .check-list{margin:14px 0 26px;align-content:start;border-top:0}
.price-card>.text-link{margin-top:auto;padding-top:20px;border-top:1px solid #272727;width:100%;justify-content:space-between}
.price-card>.text-link span{color:var(--cyan)}
.pricing-note{max-width:640px;margin:32px auto 0;text-align:center;font-size:13px;line-height:1.8;color:var(--muted)}
/* Side by side, name, description, price, list and link line up across the three cards even with texts of different length */
@supports (grid-template-rows:subgrid){
  @media(min-width:761px){
    .pricing-grid{grid-template-rows:auto auto auto 1fr auto;row-gap:0}
    .price-card{display:grid;grid-row:span 5;grid-template-rows:subgrid;align-content:start}
    .price-top{display:grid;grid-row:span 3;grid-template-rows:subgrid}
  }
}

/* Blog */
/* Three columns with a 24px gap: in the full 1200px container every cover is exactly 362 x 226 px, the size of the
   prepared 362/453/543/724 px files (1x, 1.25x, 1.5x, 2x screens), so the browser does not resample them */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.blog-card{padding:10px}
.blog-card-link{display:flex;flex-direction:column;height:100%}
.image-placeholder{display:grid;place-items:center;border:1px solid #242424;background:#0f0f0f;color:#3d4347}
.blog-cover{aspect-ratio:362/226;border-radius:17px}
.blog-card-body{display:flex;flex-direction:column;flex:1;padding:0 13px 13px}
.blog-meta{display:flex;align-items:center;gap:14px;font-size:11px;margin-block:22px 12px;color:#808890}
.blog-meta>span:first-child{color:var(--cyan)}
.blog-meta>span+span:before{content:'·';margin-right:14px}
.blog-card h3{font-size:1.2rem;line-height:1.35;hyphens:auto;overflow-wrap:break-word}
.blog-card p{font-size:16px;color:var(--muted);line-height:1.8;margin:13px 0 24px}
.blog-card .text-link{margin-top:auto;padding-top:18px;border-top:1px solid #272727;width:100%;justify-content:space-between;color:#dfe3e6}
.blog-card .text-link>span{color:var(--cyan)}
@supports selector(:has(*)){.blog-card-link:focus-visible{outline:none}.blog-card:has(.blog-card-link:focus-visible){outline:2px solid var(--cyan);outline-offset:4px}}

/* FAQ */
.faq-layout{display:grid;grid-template-columns:.85fr 1.5fr;gap:80px;align-items:start}
.faq-layout>*{min-width:0}
.faq-intro{position:sticky;top:130px}
.faq-layout .section-heading{margin:0}
.faq-contact{--icon-cell:72px;display:flex;align-items:center;gap:35px;margin-top:36px;padding:22px 24px 22px 22px}
/* Darker cell behind the icon, like the icon cell of the service cards */
.faq-contact:after,.contact-option:after{content:'';position:absolute;left:5px;top:5px;bottom:5px;width:var(--icon-cell);border-right:1px dashed #2f2f2f;border-radius:18px 0 0 18px;background:#0f0f0f;pointer-events:none}
.faq-contact img{position:relative;z-index:1;width:38px;height:38px;flex:none;transition:transform .35s ease}
.faq-contact-title{font-family:var(--font-heading);font-size:16px;font-weight:700}
.faq-contact p:not(.faq-contact-title){margin-top:4px;font-size:14px;line-height:1.6;color:var(--muted)}
.faq-contact .text-link{margin-top:10px;color:#e6eaed}
.faq-list{display:grid;gap:12px}
.faq-item{border:1px solid #232323;border-radius:18px;background:var(--surface);transition:border-color .3s}
.faq-item[open]{border-color:#3cbfff66}
.faq-item summary{list-style:none;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;padding:20px 22px;cursor:pointer;font-family:var(--font-heading);font-size:18px;font-weight:600;line-height:1.45;border-radius:18px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:focus-visible{outline-offset:-2px}
.faq-question{min-width:0;overflow-wrap:anywhere;hyphens:auto}
.faq-number{font-size:12px;font-weight:700;letter-spacing:.04em;color:#6d757b;transition:color .3s}
.faq-item[open] .faq-number{color:var(--cyan)}
.faq-toggle{position:relative;width:34px;height:34px;border:1px solid #333;border-radius:50%;transition:transform .35s ease,background-color .3s,border-color .3s}
.faq-toggle:before,.faq-toggle:after{content:'';position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:#e8ecef;transform:translate(-50%,-50%);transition:background-color .3s}
.faq-toggle:after{transform:translate(-50%,-50%) rotate(90deg)}
.faq-item[open] .faq-toggle{transform:rotate(45deg);background:var(--cyan);border-color:var(--cyan)}
.faq-item[open] .faq-toggle:before,.faq-item[open] .faq-toggle:after{background:#061018}
.faq-answer{padding:0 76px 24px 62px;color:var(--muted);font-size:15px;line-height:1.85}
.faq-answer a{color:var(--cyan);text-decoration:underline;text-decoration-color:#3cbfff70;text-underline-offset:4px}
@supports (interpolate-size:allow-keywords){.faq-item{interpolate-size:allow-keywords}.faq-item::details-content{block-size:0;overflow:hidden;transition:block-size .35s ease,content-visibility .35s allow-discrete}.faq-item[open]::details-content{block-size:auto}}

/* Marquee */
.brand-ribbon{overflow:hidden;user-select:none}
.ribbon-row{display:flex;overflow:hidden;background:var(--cyan);color:#08212c}
.ribbon-row-reverse{background:var(--orange);color:#321106}
.ribbon-track{display:flex;flex:none;align-items:center;gap:24px;padding-right:24px;white-space:nowrap;font-family:var(--font-heading);font-size:15px;font-weight:700;line-height:2.5;letter-spacing:-.01em;animation:ribbon-scroll 60s linear infinite}
.ribbon-row-reverse .ribbon-track{animation-direction:reverse}
.ribbon-track span{font-size:16px;line-height:1}
.brand-ribbon:hover .ribbon-track{animation-play-state:paused}
@keyframes ribbon-scroll{from{transform:translateX(0)}to{transform:translateX(-100%)}}

/* Contact */
.contact-section{padding-block:108px}
.contact-layout{display:grid;grid-template-columns:1fr 1.02fr;gap:80px;align-items:start}
.contact-copy h2{line-height:1.12}
.contact-lead{margin-top:24px;max-width:430px;color:var(--muted);font-size:15px}
.contact-options{list-style:none;margin:36px 0 0;padding:0;display:grid;gap:12px;max-width:470px}
.contact-option{--icon-cell:66px;display:flex;align-items:center;gap:33px;padding:18px 22px}
.contact-option img{position:relative;z-index:1;width:32px;height:32px;flex:none;transition:transform .3s}
.contact-option-text{display:flex;flex-direction:column;min-width:0}
.contact-option small{font-size:12px;color:#8b949b}
.contact-option-text>span{font-size:16px;font-weight:600;line-height:1.5;color:#f3f5f6;overflow-wrap:anywhere}
.contact-option-arrow{margin-left:auto;font-family:Arial,sans-serif;font-size:20px;color:#6f777d;transition:color .25s,transform .25s}
.contact-note{margin-top:32px;font-size:12px;color:#747e87;line-height:1.9}
.contact-form{padding:35px}
.contact-form h3{font-size:1.25rem;line-height:1.35}
.form-intro{color:#8e969d;font-size:12px;margin:6px 0 27px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:17px}
.form-field{display:flex;flex-direction:column;margin-bottom:21px;min-width:0}
.form-field label{font-size:12px;font-weight:600;margin-bottom:8px}
.form-field label>span{color:var(--cyan)}
.form-field label>.optional{font-weight:400;color:#939da5}
.form-field input,.form-field textarea,.form-field select{width:100%;border:1px solid #2c2c2c;border-radius:12px;background:#0c0d0e;color:#fff;padding:12px 15px;line-height:1.6;font-size:14px;transition:border-color .2s}
.form-field input::placeholder,.form-field textarea::placeholder{color:#8b969e}
.form-field input:hover,.form-field textarea:hover,.form-field select:hover{border-color:#3a3a3a}
.form-field select{appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233cbfff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:16px}
.form-field select option,.form-field select optgroup{background:#0c0d0e;color:#f3f5f6}
/* Service preselected via "Angebot anfragen": blue border until the visitor changes it */
.form-field select.is-preselected{border-color:var(--cyan)}
.form-field input:focus,.form-field textarea:focus,.form-field select:focus{border-color:var(--cyan);outline:1px solid var(--cyan);outline-offset:0}
.form-field [aria-invalid="true"]{border-color:var(--orange)}
.form-field textarea{resize:vertical;min-height:130px;max-height:500px}
.field-error{margin-top:7px;font-size:12px;line-height:1.5;color:#ff9a76}
.form-hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.form-note{font-size:12px;line-height:1.8;color:#929ca4;margin-bottom:22px}
.form-note a{text-decoration:underline;text-underline-offset:3px;color:#b3bec7}
.contact-form .button{width:100%;justify-content:space-between}
.form-status{border-left:2px solid var(--cyan);background:#10202a;color:#c2dfef;font-size:13px;line-height:1.8;padding:13px 16px;margin-top:19px;overflow-wrap:anywhere}
.form-status.is-error{border-left-color:var(--orange);background:#26140e;color:#ffd6c7}

/* Card highlight: real hover only on devices with a pointer. Touch screens get .is-inview from
   script.js while a card passes the middle of the screen, so the effect shows while scrolling
   instead of sticking after a tap. Keyboard focus uses the same look. */
/* Highlighted card: a light white/grey segment orbits along the inner line (like the frame of the featured price
   card, but not blue). Drawn with padding-box/border-box backgrounds behind the card content (z-index -1). */
.service-card:focus-within:before,.blog-card:focus-within:before,.faq-contact:focus-within:before,.contact-option:focus-within:before,.price-card:focus-within:before,.review-card:focus-within:before,
.service-card.is-inview:before,.blog-card.is-inview:before,.faq-contact.is-inview:before,.contact-option.is-inview:before,.timeline-card.is-inview:before,.price-card.is-inview:before,.review-card.is-inview:before{z-index:-1;border-style:solid;border-color:transparent;background:linear-gradient(#131313,#131313) padding-box,conic-gradient(from var(--border-angle,0deg),#ffffff1a 0deg,#ffffff1a 190deg,#ffffff66 260deg,#ffffff66 300deg,#ffffff1a 360deg) border-box;animation:border-orbit 5s linear infinite}
.hero-feature.is-inview img,.service-card.is-inview .card-heading img,.timeline-card.is-inview .timeline-card-head img,.faq-contact.is-inview img,.faq-contact:focus-within img{transform:translateY(-3px) rotate(-6deg)}
.contact-option.is-inview img{transform:rotate(-6deg)}
.blog-card.is-inview .text-link,.faq-contact.is-inview .text-link,.faq-contact:focus-within .text-link{color:var(--cyan)}
.contact-option.is-inview .contact-option-arrow{color:var(--cyan);transform:rotate(45deg)}
.legal-facts a.is-inview{border-color:#3cbfff73}
.faq-item.is-inview{border-color:#3a3a3a}
.faq-item.is-inview .faq-toggle{border-color:var(--cyan)}
/* Entrance animations further down the page: script.js marks elements below the first screen with .reveal and adds
   .is-revealed when they scroll into view. Without JavaScript or with "reduce motion" nothing is hidden. */
.reveal:not(.is-revealed){opacity:0}
.reveal.is-revealed{animation:reveal-up .8s cubic-bezier(.16,.8,.3,1) var(--reveal-delay,0s) backwards}
.price-card-featured.reveal.is-revealed{animation:reveal-up .8s cubic-bezier(.16,.8,.3,1) var(--reveal-delay,0s) backwards,border-orbit 5s linear infinite}
@media(hover:hover){
  .service-card:hover:before,.blog-card:hover:before,.faq-contact:hover:before,.contact-option:hover:before,.timeline-card:hover:before,.price-card:hover:before,.review-card:hover:before{z-index:-1;border-style:solid;border-color:transparent;background:linear-gradient(#131313,#131313) padding-box,conic-gradient(from var(--border-angle,0deg),#ffffff1a 0deg,#ffffff1a 190deg,#ffffff66 260deg,#ffffff66 300deg,#ffffff1a 360deg) border-box;animation:border-orbit 5s linear infinite}
  .hero-feature:hover img,.service-card:hover .card-heading img,.timeline-card:hover .timeline-card-head img,.faq-contact:hover img{transform:translateY(-3px) rotate(-6deg)}
  .contact-option:hover img{transform:rotate(-6deg)}
  .blog-card:hover .text-link,.faq-contact:hover .text-link{color:var(--cyan)}
  .contact-option:hover .contact-option-arrow{color:var(--cyan);transform:rotate(45deg)}
  .legal-facts a:hover{border-color:#3cbfff73}
  .faq-item:hover{border-color:#343434}
  .faq-item summary:hover .faq-toggle{border-color:var(--cyan)}
  .pricing-tabs button[aria-selected="false"]:hover{border-color:var(--cyan);color:#fff}
}

/* Footer */
.site-footer{position:relative;overflow:hidden;border-top:1px solid var(--divider);padding-top:88px;background:#080808}
main:has(>.brand-ribbon:last-child)+.site-footer{border-top:0}
.site-footer-compact{padding-top:0}
.site-footer-compact .footer-bottom{border-top:0}
.footer-main{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:48px}
.footer-brand>p{margin-top:22px;max-width:360px;font-size:14px;line-height:1.8;color:#8f969c}
.footer-cta{margin-top:28px}
.footer-title{margin-bottom:20px;font-family:var(--font-heading);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#f3f5f6}
.footer-col ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.footer-col a{display:inline-flex;align-items:center;gap:11px;padding-block:2px;font-size:14px;color:#9aa1a7;transition:color .2s}
.footer-contact-col a{overflow-wrap:anywhere}
.footer-col a:hover,.footer-col a[aria-current]{color:#fff}
.footer-col img{width:20px;height:20px;flex:none}
.footer-wordmark{margin:72px 0 0;padding-bottom:.12em;font-family:var(--font-heading);font-size:clamp(2.5rem,14.5vw,11.5rem);line-height:1.2;letter-spacing:-.045em;text-align:center;white-space:nowrap;color:#222;user-select:none}
.footer-bottom{position:relative;display:flex;align-items:center;gap:24px;padding:24px 0 30px;border-top:1px solid var(--cyan);font-size:13px;color:#7d858b}
.footer-bottom nav{display:flex;flex-wrap:wrap;gap:8px 22px;margin-left:auto}
.footer-bottom nav a{padding-block:4px;transition:color .2s}
.footer-bottom nav a:hover,.footer-bottom nav a[aria-current]{color:#fff}
.back-to-top{display:grid;place-items:center;width:42px;height:42px;flex:none;border:1px solid #30383c;border-radius:50%;color:var(--cyan);font-size:20px;transition:background-color .25s,border-color .25s,color .25s}
.back-to-top:hover{background:var(--cyan);border-color:var(--cyan);color:#061018}

/* Quick contact bar: rail on the right edge (desktop), bar at the bottom (tablets and phones) */
.contact-bar{position:fixed;z-index:40;right:0;top:50%;display:flex;flex-direction:column;align-items:center;gap:4px;padding:5px 4px 5px 5px;border:1px solid #2b2b2b;border-right:0;border-radius:22px 0 0 22px;background:#101010eb;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transform:translateY(-50%);transition:opacity .35s ease,transform .35s ease,visibility .35s}
.contact-bar.is-hidden{opacity:0;visibility:hidden;transform:translate(20px,-50%)}
.contact-bar a{position:relative;display:grid;place-items:center;width:38px;height:38px;border:1px solid transparent;border-radius:50%;transition:background-color .25s ease,border-color .25s ease}
.contact-bar img{width:22px;height:22px;transition:transform .3s ease}
.contact-bar a:hover,.contact-bar a:focus-visible{background:#1b1b1b;border-color:#3cbfff73}
.contact-bar a:hover img,.contact-bar a:focus-visible img{transform:rotate(-8deg)}
.contact-bar a:focus-visible{outline-offset:2px}
.contact-bar-label{position:absolute;right:calc(100% + 14px);top:50%;padding:7px 14px;border-radius:30px;background:#f8f8f8;color:var(--ink);font-size:13px;font-weight:600;line-height:1.4;white-space:nowrap;pointer-events:none;opacity:0;transform:translate(8px,-50%);transition:opacity .25s ease,transform .25s ease}
.contact-bar a:hover .contact-bar-label,.contact-bar a:focus-visible .contact-bar-label{opacity:1;transform:translate(0,-50%)}
.cb-short{display:none}
.contact-bar .contact-bar-cta{margin-top:9px;background:var(--cyan);border-color:var(--cyan);color:#061018}
.contact-bar-cta:before{content:'';position:absolute;left:6px;right:6px;top:-8px;height:1px;background:#2b2b2b}
.contact-bar .contact-bar-cta:hover,.contact-bar .contact-bar-cta:focus-visible{background:#f8f8f8;border-color:#f8f8f8}
.contact-bar-arrow{font-family:Arial,sans-serif;font-size:17px;line-height:1;transition:transform .3s ease}
.contact-bar-cta:hover .contact-bar-arrow,.contact-bar-cta:focus-visible .contact-bar-arrow{transform:rotate(45deg)}
body.menu-open .contact-bar{opacity:0;visibility:hidden}

/* Articles, legal pages and 404 */
.article-hero{padding:var(--hero-pad-top) 0 var(--hero-pad-bottom);border-bottom:1px solid var(--divider)}
.article-container{width:min(800px,calc(100% - 48px));margin-inline:auto}
.breadcrumb{font-size:12px;color:#929aa1;margin-bottom:43px}
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:4px 12px;list-style:none;margin:0;padding:0}
.breadcrumb li{display:flex;gap:12px;min-width:0}
.breadcrumb li+li:before{content:"/"}
.breadcrumb [aria-current]{color:#c4cad0}
.breadcrumb a:hover{color:var(--cyan)}
.article-hero .eyebrow{margin-bottom:20px}
.article-hero h1{font-size:clamp(2.2rem,4.2vw,3.5rem);line-height:1.12;letter-spacing:-.035em;hyphens:auto;overflow-wrap:anywhere}
.article-deck{color:#b6bdc3;font-size:18px;line-height:1.8;margin-top:24px}
.article-byline{display:flex;gap:18px;color:#8b969e;font-size:12px;margin-top:27px}
.article-cover{margin:36px 0 0;height:260px;border-radius:22px}
.article-content{padding-top:55px;padding-bottom:60px}
.article-content>p,.article-content li{color:#bfc4c9;font-size:17px;line-height:1.95}
.article-content>p{margin-bottom:24px}
.article-content>h2{font-size:1.55rem;letter-spacing:-.025em;line-height:1.35;margin:44px 0 16px;color:#f4f5f6}
.article-content>h2:first-child{margin-top:0}
.article-content>ul{padding-left:23px;margin:22px 0 30px}
.article-content li{padding-left:6px;margin:8px 0}
.article-content li::marker{color:var(--cyan)}
.article-content a{color:var(--cyan);text-decoration:underline;text-decoration-color:#3cbfff70;text-underline-offset:4px}
.article-content a:hover{text-decoration-color:var(--cyan)}
.article-content p,.article-content li,.article-content a{overflow-wrap:break-word}
.article-content address{font-style:normal;color:#bfc4c9;font-size:17px;line-height:1.95;margin-bottom:24px}
.article-cta{position:relative;margin:15px 0 55px;padding:34px;border-radius:22px;background:var(--light);color:var(--ink);isolation:isolate}
.article-cta:after{content:'';position:absolute;inset:6px;z-index:-1;border:1px dashed #0000001f;border-radius:17px;pointer-events:none}
.article-cta h2{font-size:1.4rem;letter-spacing:-.025em;color:var(--ink)}
.article-cta p{font-size:15px;color:var(--ink-muted);margin-block:12px 21px}
.article-cta p a{color:var(--ink-accent);text-decoration:underline;text-decoration-color:#0b6e9c66;text-underline-offset:4px}
.article-cta p a:hover{text-decoration-color:var(--ink-accent)}
.article-cta .button-primary{background:var(--ink);border-color:var(--ink);color:#fff}
.article-cta .button-primary span{background:var(--cyan);color:#061018}
.article-cta .button-primary:hover,.article-cta .button-primary:focus-visible{background:var(--cyan);border-color:var(--cyan);color:#061018}
.article-cta .button-primary:hover span,.article-cta .button-primary:focus-visible span{background:#061018;color:var(--cyan)}
.article-cta :focus-visible{outline-color:var(--ink)}
.article-navigation{padding-bottom:65px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.article-navigation>a{font-size:13px;color:#bbc7cf;max-width:48%}
.article-navigation>a:last-child{text-align:right}
.article-navigation>a:hover{color:var(--cyan)}
.error-page{border-bottom:0}
.error-links{display:flex;flex-wrap:wrap;gap:10px 26px;list-style:none;margin:40px 0 0;padding:28px 0 0;border-top:1px solid #272727;font-size:14px}
.error-links a{color:#dce1e6;display:inline-block;padding-block:4px}
.error-links a:hover{color:var(--cyan)}

/* Thank-you page after the contact form (kontakt-gesendet.html): confirmation, next steps, contact options */
.thanks-hero{padding-block:var(--hero-pad-top) var(--hero-pad-bottom)}
.thanks-layout{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.thanks-copy>*{animation:reveal-up .8s cubic-bezier(.16,.8,.3,1) backwards}
.thanks-copy>:nth-child(2){animation-delay:.07s}
.thanks-copy>:nth-child(3){animation-delay:.14s}
.thanks-copy>:nth-child(4){animation-delay:.21s}
.thanks-copy>:nth-child(5){animation-delay:.28s}
.thanks-copy>:nth-child(6){animation-delay:.35s}
.thanks-steps{padding-bottom:10px;animation:reveal-up .9s cubic-bezier(.16,.8,.3,1) .2s backwards}
.thanks-check{display:grid;place-items:center;width:64px;height:64px;margin-bottom:30px;border:1px solid var(--cyan);border-radius:50%;color:var(--cyan)}
.thanks-check svg,.thanks-number svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
/* The check mark draws itself once; without animation (reduced motion) it is simply visible */
.thanks-check svg{width:28px;height:28px;stroke-width:2;stroke-dasharray:22;animation:thanks-check .6s cubic-bezier(.65,0,.35,1) .5s backwards}
@keyframes thanks-check{from{stroke-dashoffset:22}to{stroke-dashoffset:0}}
.thanks-copy .eyebrow{margin-bottom:20px}
.thanks-copy h1{font-size:clamp(2.3rem,4.4vw,3.6rem);line-height:1.1;letter-spacing:-.035em}
.thanks-lead{max-width:540px;margin-top:24px;color:#b6bdc3;font-size:18px;line-height:1.8}
.thanks-hint{max-width:540px;margin-top:34px}
.thanks-steps .timeline-card-head h2{font-size:1.25rem}
.thanks-list{list-style:none;margin:0;padding:28px 28px 18px;display:grid;gap:26px}
.thanks-list li{position:relative;display:grid;grid-template-columns:44px 1fr;gap:20px;align-items:start}
.thanks-list li:not(:last-child):after{content:'';position:absolute;left:21px;top:44px;bottom:-26px;width:2px;background:#2e2e2e}
.thanks-list li.is-done:after{background:var(--cyan)}
.thanks-number{display:grid;place-items:center;width:44px;height:44px;border:1px solid #2e2e2e;border-radius:50%;font-family:var(--font-heading);font-size:13px;font-weight:700;color:#7d858b}
.thanks-list .is-done .thanks-number{border-color:var(--cyan);background:var(--cyan);color:#061018}
.thanks-list .is-next .thanks-number{border-color:var(--cyan);color:var(--cyan)}
.thanks-number svg{width:18px;height:18px;stroke-width:2.6}
.thanks-list h3{margin:10px 0 6px;font-size:1.05rem;line-height:1.4}
.thanks-list p{margin:0;color:var(--muted);font-size:15px;line-height:1.75}
.thanks-more .section-heading{max-width:660px}
.thanks-columns{display:grid;grid-template-columns:1fr 1fr;gap:32px 40px;max-width:1000px;margin-inline:auto}
.thanks-column-title{margin-bottom:16px;font-family:var(--font-heading);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#f3f5f6}
.thanks-columns .contact-options{max-width:none;margin:0}

/* Legal pages: page switch, sticky table of contents, numbered sections */
.legal-hero{padding:var(--hero-pad-top) 0 var(--hero-pad-bottom);border-bottom:1px solid var(--divider)}
.legal-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px 40px;align-items:end}
.legal-hero .eyebrow{margin-bottom:20px}
.legal-hero h1{font-size:clamp(2.4rem,4.6vw,4rem);line-height:1.08;letter-spacing:-.04em;overflow-wrap:break-word}
/* Service pages (webdesign-, seo-, grafikdesign-regensburg.html): hero with buttons and the service icon on the right */
.service-hero .legal-hero-grid{align-items:center}
.service-hero .legal-deck{max-width:640px}
.service-hero .button-row{margin-top:30px}
.service-hero-icon{width:132px;height:132px;object-fit:contain}
.service-grid-two{grid-template-columns:repeat(2,1fr)}
.service-card .card-body>.text-link{margin-top:auto}
/* Service pages: hero with a page-specific visual, in-page navigation, compact links to the other services */
.service-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,480px);gap:40px 64px;align-items:center}
.service-hero h1{font-size:clamp(2.4rem,4.6vw,4rem);line-height:1.08;letter-spacing:-.04em}
html:has(.page-nav){scroll-padding-top:168px}
.page-nav{position:sticky;top:94px;z-index:30;border-bottom:1px solid var(--divider);background:var(--bg)}
.page-nav .container{display:flex;gap:6px;overflow-x:auto;padding-block:12px;scrollbar-width:none}
.page-nav .container::-webkit-scrollbar{display:none}
.page-nav a{flex:none;padding:7px 16px;border:1px solid #262626;border-radius:999px;font-size:13px;font-weight:600;color:#aab1b7;transition:color .2s ease,border-color .2s ease}
.page-nav a:hover,.page-nav a.is-active{border-color:var(--cyan);color:#fff}
.service-links .container{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}
.service-links span{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#7d858b}
.service-links a{display:inline-flex;align-items:center;gap:12px;font-family:var(--font-heading);font-size:1.15rem;font-weight:700;color:#f4f5f6;transition:color .2s ease}
.service-links a img{width:30px;height:30px}
.service-links a>span{letter-spacing:0;text-transform:none;color:var(--cyan)}
.service-links a:hover{color:var(--cyan)}
/* SEO page: stylised search result in the hero */
.serp{margin:0;padding:22px;border:1px solid #2b2b2b;border-radius:22px;background:#131313}
.serp-bar{display:flex;align-items:center;gap:12px;padding:12px 18px;border:1px solid #333;border-radius:999px;font-size:14px;color:#d3d7da}
.serp-bar svg{width:18px;height:18px;flex:none;color:var(--cyan)}
.serp-result{position:relative;display:grid;gap:6px;margin-top:22px;padding:18px 18px 18px 20px;border:1px dashed #2f2f2f;border-radius:14px}
.serp-site{display:flex;align-items:center;gap:10px;font-size:12.5px;color:#8f969c}
.serp-favicon{width:18px;height:18px;border-radius:50%;background:#2a2a2a}
.serp-title{font-family:var(--font-heading);font-size:1.15rem;font-weight:700;line-height:1.35;color:var(--cyan)}
.serp-text{font-size:13.5px;line-height:1.6;color:#aab1b7}
.serp-local{display:flex;align-items:center;gap:14px;margin-top:12px;padding:14px 18px;border:1px dashed #2f2f2f;border-radius:14px}
.serp-local-map{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:12px;background:#0f0f0f;color:var(--orange)}
.serp-local-map svg{width:20px;height:20px}
.serp-local-name{display:block;font-family:var(--font-heading);font-size:15px;font-weight:700;color:#f4f5f6}
.serp-local-meta{display:block;font-size:12.5px;color:#8f969c}
.serp-notes{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:18px;font-size:12px;color:#8f969c}
.serp-notes b{margin-right:6px;font-family:var(--font-heading);color:var(--orange)}
/* SEO page: three pillars */
.pillars{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #2b2b2b;border-radius:24px;background:#131313;overflow:hidden}
.pillar{position:relative;padding:34px 30px 32px}
.pillar+.pillar{border-left:1px dashed #2f2f2f}
.pillar-number{display:inline-grid;place-items:center;width:42px;height:42px;border:1px solid #333;border-radius:50%;font-family:var(--font-heading);font-size:13px;font-weight:700;color:var(--cyan)}
.pillar h3{margin:22px 0 10px;font-size:1.35rem}
.pillar>p{margin:0;font-size:15px;line-height:1.75;color:var(--muted)}
.pillar ul{list-style:none;margin:22px 0 0;padding:18px 0 0;display:grid;gap:10px;border-top:1px dashed #2a2a2a}
.pillar ul li{display:flex;gap:10px;font-size:14px;line-height:1.5;color:#d3d5d7}
.pillar ul li:before{content:'';flex:none;width:6px;height:6px;margin-top:8px;border-radius:50%;background:var(--orange)}
/* SEO page: self check */
.selfcheck-layout{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:48px;align-items:start}
.selfcheck-intro{position:sticky;top:180px}
.selfcheck-result{margin-top:32px;padding:26px}
.selfcheck-score{margin:0;font-family:var(--font-heading);font-size:2.4rem;font-weight:700;line-height:1;color:#fff}
.selfcheck-meter{height:6px;margin:18px 0;border-radius:6px;background:#262626;overflow:hidden}
.selfcheck-meter span{display:block;width:0;height:100%;border-radius:6px;background:var(--cyan);transition:width .4s ease}
.selfcheck-text{margin:0 0 18px;font-size:15px;line-height:1.7;color:#c9cdd1}
.selfcheck-list{list-style:none;margin:0;padding:6px 26px}
.check-question{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:6px 16px;align-items:center;padding:20px 0}
.check-question+.check-question{border-top:1px dashed #2a2a2a}
.check-question-number{font-family:var(--font-heading);font-size:13px;font-weight:700;color:#6f767c}
.check-question p{margin:0;font-size:15px;line-height:1.6;color:#e0e4e7}
.check-answer{display:flex;gap:2px;padding:3px;border:1px solid #333;border-radius:999px}
.check-answer[hidden]{display:none}
.check-answer button{min-width:58px;padding:7px 14px;border:0;border-radius:999px;background:transparent;color:#959ca3;font-family:var(--font-heading);font-size:13px;font-weight:700;cursor:pointer;transition:color .2s ease,background-color .2s ease}
.check-answer button:hover{color:#fff}
.check-answer button[aria-pressed="true"][data-value="1"]{background:var(--cyan);color:#061018}
.check-answer button[aria-pressed="true"][data-value="0"]{background:#2a2a2a;color:#fff}
.selfcheck-result:not(.is-enhanced){display:none}
/* Webdesign page: 3D illustration in the hero, package comparison, preparation checklist */
.service-hero-art{width:100%;height:auto}
.compare{display:grid;grid-template-columns:minmax(180px,.8fr) repeat(3,minmax(0,1fr));grid-template-rows:repeat(var(--compare-rows),auto);gap:0 16px}
.compare-col{display:grid;grid-row:span var(--compare-rows);grid-template-rows:subgrid;border:1px solid #2b2b2b;border-radius:22px;background:#131313}
.compare-labels{border-color:transparent;background:none}
.compare-col-featured{border:2px solid transparent;background:linear-gradient(#131313,#131313) padding-box,conic-gradient(from var(--border-angle,0deg),#2b2b2b 0deg,#2b2b2b 190deg,#3cbfff 260deg,#3cbfff 300deg,#2b2b2b 360deg) border-box;animation:border-orbit 5s linear infinite}
.compare-col-featured.reveal.is-revealed{animation:reveal-up .8s cubic-bezier(.16,.8,.3,1) var(--reveal-delay,0s) backwards,border-orbit 5s linear infinite}
.compare-head{padding:24px 24px 20px;border-bottom:1px dashed #2a2a2a}
.compare-labels .compare-head{border-bottom-color:transparent}
.compare-head h3{font-size:1.25rem}
.compare-head .price{margin-top:16px}
.compare-cell{display:flex;align-items:center;min-height:54px;padding:12px 24px;border-bottom:1px dashed #2a2a2a;font-size:14px;line-height:1.5;color:#d3d5d7}
.compare-labels .compare-cell{padding-left:4px;border-bottom-color:#1f1f1f;color:#8f969c;font-size:13.5px}
.compare-fit{align-items:flex-start;color:#bfc4c9}
.compare-label{display:none}
.compare-yes{width:18px;height:18px;color:var(--cyan)}
.compare-no{color:#5f676d}
.compare-foot{display:flex;align-items:flex-end;padding:20px 24px 22px}
.compare-foot .text-link{width:100%;justify-content:space-between;color:#e0e4e7}
.compare-foot .text-link:hover{color:var(--cyan)}
.compare+.pricing-note{margin-top:26px}
.prep-layout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:start}
.prep-layout .section-heading{position:sticky;top:180px;margin:0}
.prep-layout .section-heading h2+p{margin-top:21px;color:var(--muted);font-size:15px;line-height:1.8}
.prep-layout .section-heading .text-link{margin-top:24px;color:#e0e4e7}
.prep-list{list-style:none;margin:0;padding:6px 26px}
.prep-list li+li{border-top:1px dashed #2a2a2a}
.prep-item{display:grid;grid-template-columns:24px minmax(0,1fr);gap:16px;padding:20px 0;cursor:pointer}
.prep-item input{position:absolute;opacity:0;pointer-events:none}
.prep-box{width:24px;height:24px;margin-top:1px;border:1px solid #3a3a3a;border-radius:7px;transition:border-color .2s ease,background-color .2s ease}
.prep-item input:checked+.prep-box{border-color:var(--cyan);background:var(--cyan) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23061018' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/15px no-repeat}
.prep-item input:focus-visible+.prep-box{outline:2px solid var(--cyan);outline-offset:3px}
.prep-item strong{display:block;font-family:var(--font-heading);font-size:1.05rem;color:#f4f5f6}
.prep-item small{display:block;margin-top:4px;font-size:14px;line-height:1.65;color:#aab1b7}
.prep-item input:checked~span strong{color:#8f969c;text-decoration:line-through;text-decoration-color:#5f676d}
/* Grafikdesign page: brand board in the hero, building blocks, sketched applications, deliverables */
.brand-board{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0}
.brand-tile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:150px;padding:18px;border:1px solid #2b2b2b;border-radius:18px;background:#131313}
.brand-tile-logo{grid-column:1/-1;min-height:170px;align-items:center;justify-content:center}
.brand-tile-label{position:absolute;left:18px;top:14px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#6f767c}
.brand-board-logo{display:flex;align-items:center;gap:14px}
.brand-board-logo img{width:46px;height:56px;object-fit:contain}
.brand-board-logo .brand-name{font-size:30px}
.swatches{display:flex;gap:8px}
.swatches span{flex:1;height:54px;border:1px solid #ffffff1a;border-radius:10px;background:var(--swatch)}
.type-sample{display:flex;align-items:baseline;gap:18px;line-height:1;color:#f4f5f6}
.type-heading{font-family:var(--font-heading);font-size:3rem;font-weight:800}
.type-body{font-family:var(--font-body);font-size:2.2rem;font-weight:400;color:#aab1b7}
.type-names{margin-top:10px;font-size:12.5px;color:#8f969c}
.brand-board figcaption{grid-column:1/-1;font-size:12px;color:#7d858b}
.pillars-four{grid-template-columns:repeat(4,1fr)}
.mockups{display:grid;grid-template-columns:1.2fr .62fr .85fr;gap:28px;align-items:end;padding:40px;border:1px solid #2b2b2b;border-radius:24px;background:#0f0f0f}
.mockup{margin:0}
.mockup figcaption{margin-top:14px;font-size:13px;color:#8f969c;text-align:center}
.mock{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:14px;background:#f6f7f8;color:#0a0a0a}
.mock .brand-name{font-size:15px;color:#0a0a0a}
.mock .brand-dot{color:#0b6e9c}
.mock-logo{display:flex;align-items:center;gap:8px}
.mock-logo img{width:20px;height:25px;object-fit:contain}
.mock-stripes{display:block;width:28px;height:10px;flex:none;background:repeating-linear-gradient(130deg,transparent 0 4px,var(--orange) 4px 6px,transparent 6px 9px)}
.mock-card-lines{display:grid;gap:7px}
.mock-card-lines i{display:block;height:5px;border-radius:5px;background:#d6d9dc}
.mock-card-lines i:nth-child(2){width:80%}
.mock-card-lines i:nth-child(3){width:60%}
.mock-card-lines i:nth-child(4){width:70%}
.mock-card{aspect-ratio:85/55;justify-content:space-between;padding:22px}
.mock-card .mock-card-lines{width:55%}
.mock-card .mock-stripes{position:absolute;right:22px;top:24px}
.mock-flyer{aspect-ratio:105/148;gap:14px;padding:22px 20px;border:1px solid #2f2f2f;background:#0a0a0a;color:#f8f8f8}
.mock-flyer .brand-name{color:#f8f8f8}
.mock-flyer .brand-dot{color:var(--cyan)}
.mock-flyer-title{font-family:var(--font-heading);font-size:1.25rem;font-weight:700;line-height:1.15}
.mock-flyer .mock-card-lines i{background:#2f2f2f}
.mock-button{display:block;width:62%;height:26px;border-radius:999px;background:var(--cyan)}
.mock-flyer .mock-logo{margin-top:auto}
.mock-post{aspect-ratio:1;justify-content:space-between;padding:22px;background:var(--cyan);color:#061018}
.mock-post-eyebrow{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.mock-post-title{font-family:var(--font-heading);font-size:1.45rem;font-weight:700;line-height:1.15}
.mock-post .brand-name{color:#061018}
.mock-post .brand-dot{color:#061018}
.deliver-list{list-style:none;margin:0;padding:6px 28px}
.deliver-row{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr) 220px;gap:10px 32px;align-items:center;padding:24px 0}
.deliver-row+.deliver-row{border-top:1px dashed #2a2a2a}
.deliver-row h3{font-size:1.15rem}
.deliver-row p{margin:0;font-size:14.5px;line-height:1.7;color:#aab1b7}
.deliver-tags{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
.deliver-tags span{padding:5px 12px;border:1px solid #333;border-radius:999px;font-family:var(--font-heading);font-size:12px;font-weight:700;color:var(--cyan)}
/* Header: "Leistungen" opens a small menu with the three service pages (mouse hover or keyboard focus) */
.nav-dropdown{position:relative;display:flex;align-items:center}
.nav-caret{width:10px;height:10px;margin-left:3px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s ease}
.nav-menu{position:absolute;left:-18px;top:100%;z-index:60;display:grid;min-width:190px;padding:14px 0 0;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .2s ease,transform .2s ease,visibility .2s}
.nav-menu:before{content:'';position:absolute;inset:14px 0 0;border:1px solid #2b2b2b;border-radius:14px;background:#131313;z-index:-1}
.desktop-nav .nav-menu a{margin:0 6px;padding:10px 12px;border-radius:9px}
.desktop-nav .nav-menu a:first-child{margin-top:6px}
.desktop-nav .nav-menu a:last-child{margin-bottom:6px}
.desktop-nav .nav-menu a:after{display:none}
.desktop-nav .nav-menu a:hover,.desktop-nav .nav-menu a:focus-visible,.desktop-nav .nav-menu a[aria-current]{background:#1c1c1c;color:#fff}
.desktop-nav .nav-menu a[aria-current]{color:var(--cyan)}
.nav-dropdown:hover .nav-menu,.nav-dropdown:focus-within .nav-menu{opacity:1;visibility:visible;transform:none}
.nav-dropdown:hover .nav-caret,.nav-dropdown:focus-within .nav-caret{transform:rotate(180deg)}
/* Mobile menu: the service pages as small sub links below "Leistungen" */
.mobile-nav-sub{list-style:none;margin:-2px 0 12px;padding:0 0 0 52px;display:flex;flex-wrap:wrap;gap:6px}
.mobile-nav-links .mobile-nav-sub li{border:0;animation:none}
.mobile-nav-links .mobile-nav-sub a{gap:8px;padding:7px 12px 7px 9px;border:1px solid #262626;border-radius:999px;font-size:14px}
.mobile-nav-sub img{width:20px;height:20px}
/* Homepage service cards: link to the service page and the inquiry link side by side */
.card-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;margin-top:auto;padding-top:18px;border-top:1px solid #272727}
.service-card .card-body>.card-links .text-link{margin:0}
.card-links .text-link span{color:var(--cyan)}
.card-more{color:#e0e4e7}
.card-more:hover{color:var(--cyan)}
/* Webdesign page: browser and phone sketch in the hero */
.devices{position:relative;margin:0;padding:0 34px 0 0}
.device-browser{overflow:hidden;border:1px solid #2b2b2b;border-radius:18px;background:#131313}
.device-bar{display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px dashed #2a2a2a}
.device-dots{display:flex;gap:6px}
.device-dots i{width:8px;height:8px;border-radius:50%;background:#2f2f2f}
.device-url{flex:1;max-width:220px;padding:5px 14px;border:1px solid #2a2a2a;border-radius:999px;font-size:11.5px;color:#8f969c}
.wf{display:grid;gap:18px;padding:20px 22px 24px}
.wf-nav{display:flex;align-items:center;justify-content:space-between}
.wf-logo{width:62px;height:12px;border-radius:6px;background:var(--cyan)}
.wf-links{display:flex;gap:8px}
.wf-links i{width:28px;height:7px;border-radius:4px;background:#2f2f2f}
.wf-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:20px;align-items:center}
.wf-copy{display:grid;gap:8px}
.wf-eyebrow{width:36%;height:6px;border-radius:4px;background:var(--orange)}
.wf-title{height:14px;border-radius:7px;background:#e8ecef}
.wf-line{height:7px;border-radius:4px;background:#2f2f2f}
.wf-short{width:70%}
.wf-button{width:48%;height:20px;margin-top:6px;border-radius:999px;background:var(--cyan)}
.wf-image{display:grid;place-items:center;aspect-ratio:4/3;border:1px dashed #333;border-radius:12px;background:#0f0f0f}
.wf-image svg{width:34%;fill:#2f2f2f}
.wf-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.wf-cards i{height:46px;border:1px solid #262626;border-radius:10px;background:#171717}
.device-phone{position:absolute;right:0;bottom:-26px;width:31%;padding:10px 8px 14px;border:1px solid #333;border-radius:26px;background:#0f0f0f}
.device-notch{display:block;width:34%;height:6px;margin:2px auto 8px;border-radius:6px;background:#2a2a2a}
.wf-mobile{gap:8px;padding:6px 8px 4px}
.wf-mobile .wf-logo{width:40px;height:8px}
.wf-menu{width:14px;height:8px;border-top:2px solid #555;border-bottom:2px solid #555}
.wf-mobile .wf-title{height:9px}
.wf-mobile .wf-line{height:5px}
.wf-mobile .wf-eyebrow{height:4px}
.wf-mobile .wf-button{width:62%;height:13px;margin-top:2px}
.wf-mobile .wf-image{margin-top:4px}
.devices .serp-notes{max-width:64%;margin-top:44px}
/* Service pages: the bar with the other services sits between the last section and the CTA panel, with the usual
   section spacing below it (108px, phones 64px) */
.service-links{padding-bottom:var(--hero-pad-bottom);background:var(--bg)}
.service-links .container{padding:20px 26px;border:1px solid #2b2b2b;border-radius:18px;background:#131313}
.card-title-link{color:inherit;transition:color .2s ease}
.card-title-link:hover{color:var(--cyan)}
.service-read{margin-top:26px;font-size:14px;color:var(--muted)}
.service-read .text-link{display:inline-flex;margin-top:6px;color:#e0e4e7}
.service-read .text-link:hover{color:var(--cyan)}
.legal-deck{max-width:620px;margin-top:20px;color:#b6bdc3;font-size:17px;line-height:1.8}
.legal-meta{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:26px 0 0;padding:0}
.legal-meta li{display:inline-flex;align-items:center;gap:8px;padding:5px 13px;border:1px solid #262626;border-radius:30px;background:#111;font-size:12px;line-height:1.6;color:#aab1b7}
.legal-meta svg{width:14px;height:14px;flex:none;color:var(--cyan)}
.legal-switch{display:inline-flex;gap:4px;padding:4px;border:1px solid #2b2b2b;border-radius:40px;background:#121212}
.legal-switch a{padding:8px 18px;border-radius:30px;font-size:13px;font-weight:600;line-height:1.5;color:#9aa1a7;transition:color .2s ease,background-color .2s ease}
.legal-switch a:hover{color:#fff}
.legal-switch a[aria-current]{background:var(--cyan);color:#061018}
.legal-page{padding-block:var(--hero-pad-bottom)}
.legal-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:72px;align-items:start}
.legal-toc{position:sticky;top:126px;padding:22px 16px 16px}
.legal-toc-title{margin:0 10px 12px;font-family:var(--font-heading);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#f3f5f6}
.legal-toc ol{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.legal-toc a{position:relative;display:grid;grid-template-columns:24px minmax(0,1fr);gap:6px;padding:7px 10px;border-radius:10px;font-size:14px;line-height:1.45;color:#9aa1a7;transition:color .2s ease,background-color .2s ease}
.legal-toc a:before{content:'';position:absolute;left:0;top:9px;bottom:9px;width:2px;border-radius:2px;background:transparent;transition:background-color .2s ease}
.legal-toc a span{padding-top:1px;font-family:var(--font-heading);font-size:12px;font-weight:700;color:#5f676d;transition:color .2s ease}
.legal-toc a:hover{color:#fff;background:#1b1b1b}
.legal-toc a:focus-visible{outline-offset:-2px}
.legal-toc a.is-active{color:#fff;background:#1c1c1c}
.legal-toc a.is-active:before{background:var(--cyan)}
.legal-toc a.is-active span{color:var(--cyan)}
.legal-body{min-width:0;max-width:800px}
.legal-lead{margin-bottom:34px;font-size:18px;line-height:1.85;color:#d0d4d8}
.legal-summary{margin-bottom:44px}
.legal-label{margin-bottom:14px;font-family:var(--font-heading);font-size:12px;font-weight:700;line-height:1.5;letter-spacing:.1em;text-transform:uppercase;color:#f3f5f6}
.legal-facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.legal-facts a{display:flex;align-items:flex-start;gap:14px;height:100%;padding:18px;border:1px solid #232323;border-radius:18px;background:var(--surface);transition:border-color .25s ease}
.legal-facts strong{display:block;font-family:var(--font-heading);font-size:15px;font-weight:700;line-height:1.4;color:#f3f5f6}
.legal-facts small{display:block;margin-top:3px;font-size:13px;line-height:1.55;color:#8f969c}
.legal-icon{display:grid;place-items:center;width:40px;height:40px;flex:none;border:1px solid #2c2c2c;border-radius:12px;color:var(--cyan)}
.legal-icon svg{width:20px;height:20px}
.legal-section{display:grid;grid-template-columns:44px minmax(0,1fr);gap:0 24px;padding-block:36px;border-top:1px dashed #2a2a2a}
.legal-number{display:grid;place-items:center;flex:none;width:44px;height:44px;border:1px solid #2e2e2e;border-radius:50%;font-family:var(--font-heading);font-size:13px;font-weight:700;color:#7d858b;transition:color .3s ease,border-color .3s ease}
.is-active .legal-number{border-color:var(--cyan);color:var(--cyan)}
.legal-section h2{margin:7px 0 14px;font-size:1.45rem;line-height:1.3;letter-spacing:-.025em;color:#f4f5f6;overflow-wrap:break-word}
.legal-section p{font-size:16px;line-height:1.9;color:#bfc4c9;overflow-wrap:break-word}
.legal-section p+p,.legal-section p+.legal-address,.legal-section .legal-address+p{margin-top:16px}
.legal-section a,.legal-row a{color:var(--cyan);text-decoration:underline;text-decoration-color:#3cbfff70;text-underline-offset:4px;overflow-wrap:anywhere}
.legal-section a:hover,.legal-row a:hover{text-decoration-color:var(--cyan)}
.legal-address{display:flex;align-items:flex-start;gap:16px;width:fit-content;max-width:100%;padding:18px 24px 18px 18px;border:1px solid #232323;border-radius:16px;background:var(--surface);font-style:normal;font-size:15px;line-height:1.8;color:#d3d7da;overflow-wrap:anywhere}
.legal-sheet{padding:6px 34px}
.legal-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:12px 40px;padding-block:28px;border-top:1px dashed #2a2a2a}
.legal-row:first-child{border-top:0}
.legal-row-head{display:flex;align-items:flex-start;gap:16px}
.legal-row h2{margin-top:9px;font-size:1.1rem;line-height:1.45;letter-spacing:-.015em;color:#f4f5f6;overflow-wrap:break-word}
.legal-row address,.legal-row p{padding-top:8px;font-style:normal;font-size:16px;line-height:1.85;color:#d3d7da;overflow-wrap:break-word}
.legal-row strong{font-family:var(--font-heading);font-weight:700;letter-spacing:.02em;color:#f4f5f6}
.legal-contact{margin-top:36px}
.legal-end{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-top:40px;padding-top:26px;border-top:1px solid #232323}
.legal-updated{font-size:14px;color:#8b969e}
.legal-end .text-link{margin-left:auto;color:#e0e4e7}
.legal-end .text-link span{color:var(--cyan)}
.legal-end .text-link:hover{color:var(--cyan)}

/* Blog: article pages (same table of contents and numbered sections as the legal pages), overview and cover images */
.article-head{padding:var(--hero-pad-top) 0 var(--hero-pad-bottom);border-bottom:1px solid var(--divider)}
.article-head .breadcrumb{margin-bottom:40px}
.article-head .eyebrow{margin-bottom:20px}
.article-head-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center}
.article-head h1{font-size:clamp(2.2rem,4vw,3.5rem);line-height:1.1;letter-spacing:-.035em;hyphens:auto;overflow-wrap:break-word}
.article-figure{display:grid;place-items:center;margin:0;aspect-ratio:16/10;overflow:hidden;border:1px solid #242424;border-radius:24px;background:#0f0f0f}
.article-figure img{width:100%;height:100%;object-fit:cover}
.article-body .legal-lead{margin-bottom:28px}
.article-intro p+p{margin:-10px 0 28px;font-size:17px;line-height:1.9;color:#bfc4c9}
.article-summary{margin:8px 0 44px;padding:26px 28px 24px}
.article-summary .legal-label{margin-bottom:14px}
.article-summary ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.article-summary li{position:relative;padding-left:28px;font-size:16px;line-height:1.7;color:#d0d4d8}
.article-summary li:before{content:'✓';position:absolute;left:3px;top:0;font-weight:700;color:var(--cyan)}
.article-body .legal-section p,.article-body .legal-section li{font-size:17px;line-height:1.9;color:#bfc4c9}
.article-body .legal-section h3{margin:26px 0 8px;font-size:1.15rem;line-height:1.4;letter-spacing:-.015em;color:#f4f5f6}
.article-body .legal-section ul{margin:16px 0 0;padding-left:22px}
.article-body .legal-section li{margin:8px 0;padding-left:4px}
.article-body .legal-section li::marker{color:var(--cyan)}
.article-body .legal-section ul+p,.article-body .legal-section .table-wrap+p{margin-top:16px}
.article-body .legal-section strong{font-weight:600;color:#f3f5f6}
.table-wrap{margin-top:20px;overflow-x:auto;border:1px solid #232323;border-radius:16px}
.table-wrap:focus-visible{outline-offset:2px}
.article-table{width:100%;min-width:540px;border-collapse:collapse;font-size:15px;line-height:1.6}
.article-table th,.article-table td{padding:13px 18px;text-align:left;vertical-align:top;border-bottom:1px solid #1f1f1f}
.article-table thead th{background:#121212;font-family:var(--font-heading);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#f3f5f6}
.article-table tbody th{font-weight:600;color:#f3f5f6}
.article-table td{color:#bfc4c9}
.article-table tr:last-child>*{border-bottom:0}
.cta-section-last{padding-bottom:108px}
.blog-cover{position:relative;overflow:hidden;background:#0f0f0f}
.blog-cover img{width:100%;height:100%;object-fit:cover}.blog-card[hidden]{display:none}
.blog-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.blog-filter[hidden]{display:none}
.blog-filter button{padding:8px 16px;border:1px solid #2b2b2b;border-radius:30px;background:#121212;font-size:13px;font-weight:600;line-height:1.5;color:#aab1b7;transition:color .2s ease,border-color .2s ease,background-color .2s ease}
.blog-filter button:hover{color:#fff;border-color:#3a3a3a}
.blog-filter button[aria-pressed="true"]{background:var(--cyan);border-color:var(--cyan);color:#061018}
.blog-grid-pair{grid-template-columns:repeat(2,minmax(0,1fr))}
.related-posts .heading-row .text-link{margin-bottom:6px;color:#e0e4e7}
.related-posts .heading-row .text-link span{color:var(--cyan)}
.related-posts .heading-row .text-link:hover{color:var(--cyan)}

/* Responsive */
/* Google reviews */
.reviews-summary{flex:none;text-align:right}
.reviews-score{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin:0}
.reviews-score strong{font-family:var(--font-heading);font-size:2.4rem;font-weight:700;line-height:1;letter-spacing:-.03em;color:#fff}
.reviews-summary .review-stars{width:110px;height:22px}
.reviews-count{margin:8px 0 5px;font-size:14px;color:var(--muted)}
.review-stars{display:block;width:90px;height:18px;flex:none;fill:var(--orange)}
.review-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:stretch}
.review-card{display:flex;flex-direction:column;margin:0}
.review-head{display:flex;align-items:center;gap:14px;margin:5px 5px 0;padding:16px 20px;border-bottom:1px dashed #2f2f2f;border-radius:18px 18px 0 0;background:#171717}
.review-avatar{display:grid;place-items:center;width:44px;height:44px;flex:none;border:1px solid #2f2f2f;border-radius:50%;background:#0f0f0f;font-family:var(--font-heading);font-size:15px;letter-spacing:.02em;font-weight:700;color:var(--cyan)}
.review-head figcaption{flex:1;min-width:0}
.review-name{display:block;font-family:var(--font-heading);font-size:1.05rem;font-weight:700;line-height:1.35;color:#f4f5f6}
.review-source{display:block;font-size:13px;line-height:1.5;color:#8f969c}
.review-card blockquote{flex:1;margin:0;padding:22px 26px 26px}
.review-quote{display:block;width:30px;height:24px;margin-bottom:14px;fill:#ffffff2e}
.review-quote-end{margin:14px 0 0 auto;transform:rotate(180deg)}
.review-card blockquote p{margin:0;font-size:15.5px;line-height:1.8;color:#c9cdd1}
/* Long reviews: script.js shortens them to 3 lines and adds "Mehr anzeigen" (without JavaScript the full text shows) */
.review-card blockquote p.is-clamped{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.review-more{display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding:0;border:0;background:none;color:var(--cyan);font-family:var(--font-heading);font-size:13px;font-weight:700;line-height:1.4;cursor:pointer}
.review-more[hidden]{display:none}
.review-more svg{width:12px;height:12px;transition:transform .25s ease}
.review-more[aria-expanded="true"] svg{transform:rotate(180deg)}
.reviews-footer{display:flex;justify-content:flex-end;margin-top:32px}
.reviews-footer .text-link{flex:none;color:#e0e4e7}
.reviews-footer .text-link span{color:var(--cyan)}
.reviews-footer .text-link:hover{color:var(--cyan)}
@media(max-width:960px){
  .review-grid{grid-template-columns:minmax(0,1fr);gap:18px}
  .reviews-footer{justify-content:flex-start}
}
@media(max-width:760px){
  .reviews-summary{margin-top:24px;text-align:left}
  .reviews-score{justify-content:flex-start}
  .review-head{padding:14px 16px;gap:12px}
  .review-head .review-stars{width:75px;height:15px}
  .review-card blockquote{padding:18px 20px 22px}
  .review-quote{width:26px;height:21px;margin-bottom:12px}
  .review-quote-end{margin:12px 0 0 auto}
  .review-card blockquote p{font-size:16px}
}

/* Shooting stars: script.js now and then sends a small star diagonally across the page, behind all content:
   a sharp pixel head with a tail fading from blue (or orange) to transparent. Nothing with "reduce motion". */
.shooting-stars{position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;z-index:-1;overflow:hidden;pointer-events:none}
.star-field{position:absolute;inset:0;width:100%;height:100%}
.shooting-star{--star:var(--cyan);--star-head:#e8f7ff;position:absolute;left:0;top:0;display:flex;align-items:center;opacity:0;transform-origin:100% 50%;animation:shooting-star var(--dur,1.4s) linear forwards}
.shooting-star:before{content:'';width:var(--len,80px);height:2px;background:linear-gradient(90deg,transparent,var(--star))}
.shooting-star:after{content:'';width:3px;height:3px;flex:none;background:var(--star-head)}
.shooting-star-orange{--star:var(--orange);--star-head:#ffe3d6}
@keyframes shooting-star{
  0%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--a)) translateX(0)}
  12%{opacity:1}
  75%{opacity:1}
  100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--a)) translateX(var(--d))}
}

@media(min-width:1600px){.hero-inner{min-height:710px;gap:45px}}

@media(max-width:1100px){
  .compare{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 12px}
  .compare-labels{display:none}
  .compare-cell{flex-direction:column;align-items:flex-start;gap:4px;padding:12px 18px}
  .compare-label{display:block;font-size:12px;color:#7d858b}
  .compare-head{padding:20px 18px 18px}
  .compare-foot{padding:18px}
  .mockups{grid-template-columns:1.2fr .7fr .9fr;gap:18px;padding:24px}
  .deliver-row{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);}
  .deliver-tags{grid-column:2;justify-content:flex-start}
  .prep-layout{grid-template-columns:1fr;gap:28px}
  .prep-layout .section-heading{position:static}
  .pillars-four{grid-template-columns:repeat(2,1fr)}
  .pillars-four .pillar:nth-child(3){border-left:0}
  .pillars-four .pillar:nth-child(n+3){border-top:1px dashed #2f2f2f}
  .brand-board{max-width:560px}
  .service-hero-grid{grid-template-columns:1fr}
  .serp{max-width:560px}
  .page-nav{top:94px}
  .pillars{grid-template-columns:1fr}
  .pillar+.pillar{border-left:0;border-top:1px dashed #2f2f2f}
  .selfcheck-layout{display:flex;flex-direction:column;gap:28px}
  .selfcheck-intro{display:contents}
  .selfcheck-list{order:2}
  .selfcheck-result{order:3;margin-top:0}
  .container{width:calc(100% - 56px)}
  .desktop-nav{gap:18px}
  .header-inner{gap:22px}
  .thanks-layout{grid-template-columns:1fr;gap:52px}
  .thanks-copy,.thanks-steps{max-width:680px}
  .header-cta{display:none}
  .hero-inner{min-height:580px}
  .hero-description{font-size:15px}
  .button-row{gap:18px}
  .hero-features{grid-template-columns:repeat(3,1fr)}
  .hero-feature:after{display:block}
  .hero-feature:nth-child(3n+1):after{display:none}
  .hero-feature:nth-child(n+4):before{display:block}
  .card-heading{padding:18px 0 18px 17px}
  .card-body{padding:22px}
  .service-grid{gap:14px}
  .pricing-grid{gap:14px}
  .price-card{padding:0 22px 22px}
  .price-top{margin-inline:-17px;padding:19px 17px 20px}
  .price-amount{font-size:2.1rem}
  .process-layout{grid-template-columns:1fr;gap:40px}
  .process-intro{position:static}
  .timeline{max-width:760px}
  .cta-panel{padding:56px 48px}
  .faq-layout{grid-template-columns:1fr 1.45fr;gap:40px}
  .footer-main{grid-template-columns:repeat(3,1fr);gap:40px 32px}
  .footer-brand{grid-column:1/-1}
  .footer-brand>p{max-width:560px}
  /* Phones and tablets: the bar is docked to the bottom edge and always visible, like the header at the top */
  .contact-bar{left:0;right:0;top:auto;bottom:0;flex-direction:row;align-items:stretch;gap:4px;padding:6px max(6px,calc((100% - 520px) / 2)) calc(6px + env(safe-area-inset-bottom));border:0;border-top:1px solid var(--divider);border-radius:0;background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none;transform:none}
  .contact-bar.is-hidden{opacity:1;visibility:visible;transform:none}
  .contact-bar a{flex:1;width:auto;height:52px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;border-radius:16px}
  .contact-bar-label{position:static;padding:0;border-radius:0;background:none;color:#aab1b7;font-size:11px;opacity:1;transform:none;transition:color .25s ease}
  .contact-bar a:hover .contact-bar-label,.contact-bar a:focus-visible .contact-bar-label{transform:none;color:#fff}
  .cb-long{display:none}
  .cb-short{display:inline}
  .contact-bar .contact-bar-cta{flex:1.5;flex-direction:row-reverse;gap:8px;margin:0;border-radius:999px}
  .contact-bar-cta:before{display:none}
  .contact-bar-cta .contact-bar-label{color:#061018;font-size:13px}
  .contact-bar .contact-bar-cta:hover .contact-bar-label,.contact-bar .contact-bar-cta:focus-visible .contact-bar-label{color:var(--ink)}
  .contact-bar-arrow{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#061018;color:var(--cyan);font-size:13px}
  .site-footer{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  body:has(:is(input,textarea):focus) .contact-bar{opacity:0;visibility:hidden}
}

@media(min-width:761px) and (max-width:1100px){
  .card-heading h3{font-size:1.15rem}
  .showcase-tabs{gap:14px;margin-bottom:18px}
  .showcase-tab{gap:12px;padding:14px 16px 20px}
  .showcase-tab-name{font-size:1rem}
  .showcase-tab-progress{left:16px;right:16px;bottom:9px}
  .blog-card-body{padding:0 8px 8px}
  .blog-card h3{font-size:1.1rem}
  .faq-answer{padding:0 24px 22px 62px}
  .contact-layout{gap:42px}
  .contact-option{--icon-cell:60px;gap:28px;padding:16px 18px 16px 19px}
  .contact-option-text>span{font-size:15px}
  .contact-form{padding:27px}
  .form-row{grid-template-columns:1fr;gap:0}
}

@media(max-width:960px){
  .legal-layout{grid-template-columns:minmax(0,1fr);gap:36px}
  .legal-toc{position:relative;top:auto}
  .legal-toc ol{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:8px}
  .article-head-grid{grid-template-columns:minmax(0,1fr);gap:36px}
  .article-figure{width:100%;max-width:750px}
}
@media(max-width:760px){
  /* Phones: everything a touch smaller (root 15px instead of 16px, text 1px smaller) so more fits on the screen */
  html{scroll-padding-top:84px;font-size:15px}
  body{font-size:16px}
  .container{width:calc(100% - 40px)}
  .site-header{height:70px}
  .brand img{width:27px;height:33px}
  .brand-name{font-size:18px}
  .desktop-nav{display:none}
  .header-cta{display:none}
  .header-inner{gap:14px}
  .menu-toggle{display:block;flex:none;width:40px;height:40px;margin-left:auto;padding:11px}
  /* Contact bar at the bottom: a touch smaller on phones (tablets keep the larger bar) */
  .contact-bar{padding:5px max(5px,calc((100% - 520px) / 2)) calc(5px + env(safe-area-inset-bottom))}
  .contact-bar a{height:46px;gap:3px;border-radius:14px}
  .contact-bar img{width:20px;height:20px}
  .contact-bar-cta .contact-bar-label{font-size:12.5px}
  .contact-bar-arrow{width:22px;height:22px;font-size:12px}
  .site-footer{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  .mobile-nav{position:absolute;top:70px;inset-inline:0;display:flex;flex-direction:column;height:calc(100vh - 70px);height:calc(100dvh - 70px);padding:12px 20px calc(20px + env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;background:var(--bg);border-bottom:1px solid var(--divider);animation:mobile-nav-in .3s ease both}
  .hero-inner{grid-template-columns:1fr;gap:28px;padding-block:55px 25px;min-height:auto}
  .hero-copy{max-width:590px}
  .hero .eyebrow{margin-bottom:20px}
  h1{font-size:clamp(2.3rem,9.6vw,3.2rem)}
  h2{font-size:clamp(1.7rem,6.6vw,2.2rem)}
  .hero-description{font-size:15px;max-width:520px;margin-top:20px}
  .hero-visual{height:min(66vw,290px);margin-bottom:-65px}
  .hero-moon{width:min(72vw,320px)}
  .button-row{margin-top:27px}
  .button{font-size:14px}
  .text-link{font-size:13px}
  .hero .button-row{gap:20px}
  .hero-bottom{padding-bottom:64px}
  .hero-features{grid-template-columns:repeat(2,1fr);padding:6px}
  .hero-feature{padding:14px}
  .hero-feature:nth-child(3n+1):after{display:block}
  .hero-feature:nth-child(odd):after{display:none}
  .hero-feature:nth-child(n+3):before{display:block}
  .section{padding-block:64px}
  .section-heading{margin-bottom:30px}
  .section-heading>p:last-child:not(.eyebrow){font-size:14.5px}
  .eyebrow{font-size:11px;gap:9px}
  .desktop-break{display:none}
  .heading-row{display:block}
  .heading-row>p{margin-top:20px!important;font-size:14.5px!important}
  .card-heading h3{font-size:1.3rem}
  .service-grid{grid-template-columns:1fr;gap:18px}
  .pricing-tabs{gap:6px;margin-bottom:26px}
  .pricing-tabs button{padding:9px 15px;font-size:13px}
  .pricing-grid{grid-template-columns:1fr;gap:18px}
  .pricing-panel+.pricing-panel{margin-top:40px}
  .price-card{padding:0 23px 22px}
  .price-top{margin-inline:-18px;padding:19px 18px 20px}
  .price-amount{font-size:2.2rem}
  .price-desc{font-size:14.5px}
  .pricing-note{margin-top:26px}
  .service-card .card-heading{min-height:81px}
  .service-card .card-body{padding:23px}
  .card-body>p{font-size:15px;line-height:1.75}
  .showcase-tabs{grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:12px}
  .showcase-tab{justify-content:center;padding:12px 8px 17px;border-radius:14px;text-align:center}
  .showcase-tab-number,.showcase-tab-category{display:none}
  .showcase-tab-name{font-size:14px;line-height:1.25}
  .showcase-tab-progress{left:14px;right:14px;bottom:8px}
  .showcase-bar{min-height:40px;padding:0 0 10px}
  .showcase-dots{display:none}
  .showcase-caption{display:none}
  .showcase-views{flex:1}
  .showcase-views button{flex:1}
  .showcase-toggle{width:32px;height:32px;margin-left:6px}
  .showcase-views button{padding:5px 10px;font-size:11.5px}
  .showcase-screen{max-height:none;border-radius:12px}
  .section-bottom{flex-direction:column;gap:9px;margin-top:29px;font-size:13px}
  .process-layout{gap:32px}
  .timeline:before,.timeline:after{left:19px;top:37px}
  .timeline-step{grid-template-columns:40px 1fr;gap:14px}
  .timeline-number{width:40px;height:40px;margin-top:17px;font-size:13px}
  .timeline-card{padding:0 0 18px}
  .timeline-card h3{font-size:1.1rem}
  .timeline-card-head{min-height:64px;padding:12px 0 12px 17px}
  .timeline-card-head:after{width:66px}
  .timeline-card-head img{width:34px;height:34px;margin-right:16px}
  .timeline-card p{margin:14px 20px 0;font-size:14.5px;line-height:1.75}
    .cta-panel{padding:40px 22px 30px;border-radius:24px}
  .cta-panel:after{inset:6px;border-radius:19px}
  .cta-panel h2{font-size:clamp(1.7rem,7vw,2.2rem)}
  .cta-content>p:not(.eyebrow){font-size:15px}
  .cta-panel .button-row{gap:20px}
  .cta-panel .button{width:100%;justify-content:space-between}
  .blog-grid{grid-template-columns:1fr;gap:20px}
  .blog-meta{margin-top:20px;font-size:13px}
  .blog-card-body{padding:0 12px 12px}
  .blog-card p{font-size:15px;line-height:1.75}
  .faq-layout{grid-template-columns:1fr;gap:32px}
  .faq-intro{position:static}
  .faq-contact{--icon-cell:66px;gap:28px;margin-top:28px;padding:18px 18px 18px 19px}
  .faq-item summary{gap:12px;padding:16px;font-size:16px}
  .faq-toggle{width:30px;height:30px}
  .faq-answer{padding:0 18px 20px;font-size:15px}
  .ribbon-track{font-size:13px;gap:18px;padding-right:18px}
  .contact-section{padding-block:64px}
  .contact-lead{font-size:15px}
  .contact-layout{grid-template-columns:1fr;gap:38px}
  .contact-options{margin-top:30px}
  .contact-option{--icon-cell:60px;gap:28px;padding:16px 18px 16px 19px}
  .contact-option{--icon-cell:56px}
  .contact-option img{width:28px;height:28px}
  .contact-option-text>span{font-size:15px}
  .contact-note{font-size:13.5px}
  .contact-form{padding:28px 24px}
  .form-row{grid-template-columns:1fr;gap:0}
  .form-field input,.form-field textarea,.form-field select{font-size:16px}
  .site-footer{padding-top:64px}
  .site-footer-compact{padding-top:0}
  .footer-main{grid-template-columns:1fr 1fr;gap:36px 20px}
  .footer-contact-col{grid-column:1/-1}
  .footer-wordmark{margin-top:52px}
  .footer-bottom{flex-wrap:wrap;gap:12px 20px;font-size:13px}
  .footer-bottom nav{margin-left:0}
  .back-to-top{margin-left:auto}
  .article-container{width:calc(100% - 40px)}
  .breadcrumb{margin-bottom:28px;font-size:11px}
  .article-deck{font-size:17px}
  .thanks-layout{gap:40px}
  .thanks-check{width:54px;height:54px;margin-bottom:24px}
  .thanks-check svg{width:24px;height:24px}
  .thanks-lead{font-size:17px}
  .thanks-hint{margin-top:28px}
  .thanks-list{padding:24px 20px 12px;gap:22px}
  .thanks-list li{grid-template-columns:40px 1fr;gap:16px}
  .thanks-list li:not(:last-child):after{left:19px;top:40px;bottom:-22px}
  .thanks-number{width:40px;height:40px}
  .thanks-list h3{margin-top:8px;font-size:1rem}
  .thanks-list p{font-size:15px}
  .thanks-columns{grid-template-columns:1fr;gap:32px}
  .article-byline{flex-wrap:wrap;gap:9px 17px;font-size:11px}
  .article-cover{height:210px;margin-top:28px}
  .article-content{padding-top:30px}
  .article-content>p,.article-content li{font-size:17px;line-height:1.85}
  .article-content>h2{font-size:1.3rem;margin-top:32px}
  .article-content address{font-size:17px;line-height:1.85}
  .article-cta{padding:25px}
  .article-navigation{flex-direction:column;align-items:flex-start;gap:14px}
  .article-navigation>a{font-size:12px;max-width:none}
  .article-navigation>a:last-child{text-align:left}
  .legal-hero-grid{grid-template-columns:minmax(0,1fr);gap:26px}
  .legal-hero h1{font-size:clamp(2.1rem,9vw,2.8rem)}
  .legal-deck{font-size:16px}
  .legal-switch{justify-self:start}
  .legal-toc ol{grid-template-columns:minmax(0,1fr)}
  .legal-lead{margin-bottom:28px;font-size:16px}
  .legal-facts{grid-template-columns:minmax(0,1fr);gap:10px}
  .legal-facts a{padding:16px}
  .legal-section{grid-template-columns:36px minmax(0,1fr);gap:0 14px;padding-block:28px}
  .legal-number{width:36px;height:36px;font-size:12px}
  .legal-section h2{margin:4px 0 12px;font-size:1.2rem}
  .legal-address{gap:14px;padding:16px}
  .legal-sheet{padding:4px 20px}
  .legal-row{grid-template-columns:minmax(0,1fr);gap:4px;padding-block:22px}
  .legal-row h2{margin-top:6px;font-size:1.05rem}
  .legal-row address,.legal-row p{padding:0 0 0 50px}
  .legal-contact{margin-top:28px}
  .article-head .breadcrumb{margin-bottom:28px}
  .article-head h1{font-size:clamp(2rem,8.4vw,2.6rem)}
  .article-figure{border-radius:18px}
  .article-summary{padding:22px 20px}
  .article-body .legal-section p,.article-body .legal-section li,.article-intro p+p{font-size:16px;line-height:1.8}
  /* Blog articles: number above the section, so the text uses the full width of the phone */
  .article-body .legal-section{grid-template-columns:minmax(0,1fr);gap:14px 0}
  .blog-grid-pair{grid-template-columns:minmax(0,1fr)}
  .cta-section-last{padding-bottom:64px}
  .related-posts .heading-row .text-link{margin-top:18px}
  .check-list li{font-size:14px}
  .legal-section p{font-size:16px}
  .service-hero-icon{display:none}
  .service-grid-two{grid-template-columns:1fr}
  .page-nav{top:70px}
  html:has(.page-nav){scroll-padding-top:136px}
  .serp{padding:16px}
  .serp-title{font-size:1.02rem}
  .pillar{padding:26px 22px}
  .selfcheck-list{padding:4px 18px}
  .check-question{grid-template-columns:28px minmax(0,1fr);padding:18px 0}
  .check-answer{grid-column:2;justify-self:start}
  .service-links .container{width:calc(100% - 40px);padding:16px 18px}
  .devices{padding-right:22px}
  .wf{gap:12px;padding:14px}
  .wf-cards i{height:30px}
  .device-phone{border-radius:18px}
  .compare{grid-template-columns:1fr;grid-template-rows:none;gap:16px}
  .compare-col{grid-row:auto;grid-template-rows:none}
  .prep-list{padding:4px 18px}
  .pillars-four{grid-template-columns:1fr}
  .pillars-four .pillar+.pillar{border-left:0;border-top:1px dashed #2f2f2f}
  .brand-tile{min-height:120px;padding:16px}
  .brand-tile-logo{min-height:130px}
  .brand-board-logo .brand-name{font-size:24px}
  .type-heading{font-size:2.4rem}
  .type-body{font-size:1.8rem}
  .mockups{grid-template-columns:1fr 1fr;gap:16px;padding:18px}
  .mockup:first-child{grid-column:1/-1}
  .mock-post-title{font-size:.88rem}
  .mock-post-eyebrow{font-size:8.5px;gap:6px}
  .mock-post-eyebrow .mock-stripes{width:20px}
  .mock .brand-name{font-size:12px}
  .mock-logo img{width:16px;height:20px}
  .mock-flyer-title{font-size:1rem}
  .mock-card,.mock-post{padding:16px}
  .mock-flyer{padding:16px 14px;gap:10px}
  .deliver-list{padding:4px 18px}
  .deliver-row{grid-template-columns:1fr;gap:8px;padding:20px 0}
  .deliver-tags{justify-content:flex-start}
}

@media(max-width:400px){
  .container{width:calc(100% - 32px)}
  .brand{gap:9px}
  .header-inner{gap:10px}
  .button-row{gap:18px}
  .hero-feature strong{font-size:13px}
  .footer-main{grid-template-columns:1fr}
  .legal-address .legal-icon{display:none}
  .legal-sheet{padding-inline:16px}
  .legal-row address,.legal-row p{padding-left:0}
}

@media(max-width:370px){
  .button-row{gap:17px}
  .contact-form{padding:25px 19px}
  .cta-panel{padding-inline:18px}
  .contact-bar-arrow{display:none!important}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;animation-iteration-count:1!important}
  .ribbon-track{animation:none}
}

@media print{
  .site-header,.site-footer,.skip-link,.contact-bar,.legal-toc,.legal-switch,.legal-contact,.legal-end .text-link{display:none!important}
  body{background:#fff;color:#000}
  .grid-bg:before{display:none}
  .reveal{opacity:1!important;animation:none!important}
  .legal-hero,.legal-page{padding:0 0 16px;border:0}
  .legal-layout{display:block}
  .legal-hero h1,.legal-deck,.legal-meta li,.legal-lead,.legal-label,.legal-facts strong,.legal-facts small,.legal-section h2,.legal-section p,.legal-address,.legal-row h2,.legal-row address,.legal-row p,.legal-row strong,.legal-updated,.legal-page a{color:#000!important}
  .framed-card,.legal-address,.legal-facts a,.legal-meta li{background:none!important;border-color:#bbb!important}
  .legal-section,.legal-row,.legal-facts li{break-inside:avoid}
}