/*
Theme Name: Dörfleser IT
Description: Eigenes Theme für die Website von Dörfleser IT. Einrichtung unter Design > Website einrichten.
Author: Dörfleser IT
Version: 1.4.0
Requires at least: 6.6
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: doerfleser-it
*/
body{-webkit-font-smoothing:antialiased}
:focus-visible{outline:3px solid #9AA8E6;outline-offset:2px}
.dit-main>.wp-block-post-content>*:first-child{margin-top:0}
.dit-main,.dit-main .wp-block-post-content{margin-block:0}
.wp-site-blocks{padding:0}
.wp-site-blocks>*{margin-block:0}

/* Kopf */
.dit-head{background:#141B33;color:#fff;padding:.9rem clamp(1rem,4vw,2.5rem)}
.dit-head .wp-block-site-title,.dit-head .wp-block-site-title a{font-family:var(--wp--preset--font-family--display);font-weight:700;font-size:1.45rem;color:#fff;text-decoration:none;white-space:nowrap}
.dit-head a{color:#fff}
.dit-head .wp-block-navigation{font-size:1rem;font-weight:500}
.dit-head .wp-block-navigation a:hover{color:#9AA8E6}
.dit-head .current-menu-item>a{color:#9AA8E6}
.dit-head .wp-block-navigation__responsive-container.is-menu-open{background:#141B33;color:#fff;padding:1.5rem}
.dit-head .wp-block-navigation__responsive-container.is-menu-open a{font-size:1.3rem}
.dit-head .wp-block-button__link{white-space:nowrap}
@media(max-width:1000px){.dit-head .wp-block-buttons{display:none}}

/* Seitentitel */
.dit-title{background:#141B33;color:#fff;padding:clamp(2.5rem,7vw,5rem) clamp(1rem,4vw,2.5rem) clamp(2rem,5vw,3.5rem)}
.dit-title h1{font-size:clamp(2.4rem,6vw,4.5rem);margin:0}

/* Bänder */
.dit-band{padding:clamp(3rem,7vw,5.5rem) clamp(1rem,4vw,2.5rem)}
.dit-band+.dit-band{margin-top:0}
.dit-band.has-ink-background-color,.dit-band.has-ink-background-color :is(h1,h2,h3,p,li){color:#fff}
.dit-band.has-ink-background-color a:not(.wp-block-button__link){color:#9AA8E6}
.wp-block-post-content>.alignfull{margin-block:0}
.dit-lead{font-size:var(--wp--preset--font-size--l);line-height:1.45}
.dit-photo img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:3px}
.dit-photo{margin:0}
.dit-logo{margin:0}
.dit-logo img{display:block;background:#fff}
.dit-photo-wide img{aspect-ratio:21/8}
.dit-photo.dit-photo-wide{margin-block:1.75rem}
.dit-band>.dit-form,.dit-band>.dit-msg{max-width:720px;width:100%;margin-inline:auto;box-sizing:border-box}

/* Hero */
.dit-hero.wp-block-cover{min-height:min(78vh,720px);padding:clamp(1rem,4vw,2.5rem);align-items:flex-end}
.dit-hero h1{margin:0 0 1rem;max-width:12ch}
.dit-hero p{max-width:34em;font-size:var(--wp--preset--font-size--l);line-height:1.4}
.dit-hero .wp-block-cover__inner-container{max-width:1160px;margin-inline:auto;width:100%;padding-bottom:1.5rem}
.dit-hero .is-style-outline .wp-block-button__link{color:#fff;border:2px solid #fff;background:transparent}
.dit-hero .is-style-outline .wp-block-button__link:hover{background:#fff;color:#141B33}

/* Patchfeld: acht Ports, acht Seiten */
.dit-patchband{background:#141B33;padding:0 clamp(1rem,4vw,2.5rem) clamp(2.5rem,6vw,4rem)}
.dit-patch{--gap:.5rem;max-width:1160px;margin:0 auto;background:linear-gradient(#2A3560,#1E2747);border-radius:4px;padding:1.5rem 2.75rem 1.15rem;display:grid;grid-template-columns:repeat(8,1fr);gap:var(--gap);position:relative;box-shadow:inset 0 1px 0 #47548a}
.dit-patch::before,.dit-patch::after{content:"";position:absolute;top:50%;width:11px;height:11px;margin-top:-5px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#7985b5,#141B33)}
.dit-patch::before{left:15px}.dit-patch::after{right:15px}
.dit-patch p{margin:0}
.dit-patch a{display:flex;flex-direction:column;align-items:center;gap:.55rem;color:#fff;text-decoration:none;font-weight:500;font-size:.98rem;line-height:1.15;text-align:center;position:relative;padding-top:.75rem}
/* Buchse */
.dit-patch a::before{content:"";width:54px;height:46px;background:repeating-linear-gradient(90deg,#c9a34e 0 2px,#0c1020 2px 6px) 8px 0/38px 7px no-repeat,#0c1020;clip-path:polygon(0 0,100% 0,100% 70%,80% 70%,80% 84%,63% 84%,63% 100%,37% 100%,37% 84%,20% 84%,20% 70%,0 70%);transition:transform .12s}
/* LED */
.dit-patch a::after{content:"";position:absolute;top:0;left:calc(50% - 22px);width:8px;height:8px;border-radius:50%;background:#46507a;transition:background .12s,box-shadow .12s}
.dit-patch a:hover::after,.dit-patch a:focus-visible::after{background:#5BE08F;box-shadow:0 0 9px 2px #5BE08F}
.dit-patch a:hover::before{transform:translateY(-1px)}
@media(prefers-reduced-motion:no-preference){
 .dit-patch p a::after{animation:dit-link .5s linear 1 both;animation-delay:calc(var(--i,0)*90ms + .3s)}
 @keyframes dit-link{0%,100%{background:#46507a;box-shadow:none}35%{background:#5BE08F;box-shadow:0 0 9px 2px #5BE08F}}
}
.dit-patch p:nth-child(2) a{--i:1}.dit-patch p:nth-child(3) a{--i:2}.dit-patch p:nth-child(4) a{--i:3}.dit-patch p:nth-child(5) a{--i:4}.dit-patch p:nth-child(6) a{--i:5}.dit-patch p:nth-child(7) a{--i:6}.dit-patch p:nth-child(8) a{--i:7}
@media(max-width:820px){.dit-patch{grid-template-columns:repeat(4,1fr);row-gap:1.25rem;padding-inline:1.75rem}.dit-patch::before{left:7px}.dit-patch::after{right:7px}}
@media(max-width:420px){.dit-patch{padding-inline:1.1rem}.dit-patch::before,.dit-patch::after{display:none}.dit-patch a{font-size:.88rem}.dit-patch a::before{width:44px;height:38px;background-position:6px 0;background-size:32px 6px}}

/* Tabellen, Listen */
.wp-block-table table{border-collapse:collapse;width:100%}
.wp-block-table td,.wp-block-table th{border:0;border-bottom:1px solid #D3D8E9;padding:.65rem .5rem .65rem 0;text-align:left;vertical-align:top}
.wp-block-table th{font-weight:600}
.wp-block-table td:last-child,.wp-block-table th:last-child{text-align:right;white-space:nowrap;padding-right:0}
.dit-col2{columns:2 280px;column-gap:3rem;padding-left:1.1em}
.dit-col2 li{break-inside:avoid;margin-bottom:.35rem}
.dit-names{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;padding:0}
.dit-names li{background:#F3F4FA;border:1px solid #D3D8E9;border-radius:3px;padding:.45rem .85rem;font-weight:500}

/* Formulare */
.dit-form{display:grid;gap:1.1rem;max-width:640px}
.dit-form label{display:block;font-weight:600;margin-bottom:.3rem}
.dit-form small{display:block;color:#525a74;margin-top:.25rem;font-size:.92rem}
.dit-form input,.dit-form textarea{width:100%;box-sizing:border-box;padding:.7rem .75rem;border:1px solid #79809c;border-radius:3px;font:inherit;background:#fff;color:#232A42}
.dit-form textarea{min-height:10rem;resize:vertical}
.dit-form button{justify-self:start;background:#141B33;color:#fff;border:0;border-radius:3px;padding:.8rem 1.5rem;font:inherit;font-weight:600;cursor:pointer}
.dit-form button:hover{background:#3A4BA8}
.dit-hp{position:absolute!important;left:-9999px}
.dit-msg{padding:.9rem 1.1rem;border-left:5px solid;border-radius:3px;max-width:640px}
.dit-msg.ok{background:#E6F6EC;border-color:#1E8A4C}.dit-msg.err{background:#FBEAEA;border-color:#B3261E}

/* Fuß */
.dit-foot{background:#141B33;color:#fff;padding:2.5rem clamp(1rem,4vw,2.5rem)}
.dit-foot a{color:#fff}
.dit-foot p{margin:0}
.dit-foot a.dit-wa{position:fixed;right:1rem;bottom:1rem;z-index:50;background:#fff;color:#141B33;border:2px solid #141B33;border-radius:3px;padding:.5rem .8rem;font-weight:600;text-decoration:none;font-size:.98rem}
.dit-foot a.dit-wa:hover{background:#9AA8E6;color:#141B33}

/* IT-Newsticker */
.dit-newsband{background:#141B33;padding:0 clamp(1rem,4vw,2.5rem) clamp(2rem,5vw,3rem);margin-block:0}
.dit-news{max-width:1160px;margin:0 auto;display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:.9rem;color:#fff;border-block:1px solid #3a4570;padding:.7rem 0}
.dit-news-head{font-family:var(--wp--preset--font-family--display);font-size:1.15rem;color:#9AA8E6;white-space:nowrap}
.dit-news input{position:absolute;opacity:0;width:1px;height:1px}
.dit-news label{cursor:pointer;font-size:.92rem;font-weight:500;border:1px solid #6d79a8;border-radius:3px;padding:.15rem .55rem;white-space:nowrap}
.dit-news label:hover{background:#9AA8E6;color:#141B33}
.dit-news input:focus-visible+label{outline:3px solid #9AA8E6;outline-offset:2px}
.dit-news label .b,.dit-news input:checked+label .a{display:none}
.dit-news input:checked+label .b{display:inline}
.dit-news-view{overflow:hidden;min-width:0}
.dit-news-track{display:flex;width:max-content}
.dit-news ul{list-style:none;margin:0;padding:0;display:flex}
.dit-news li{white-space:nowrap;padding-right:2.5rem}
.dit-news li a{color:#fff;text-decoration:none}
.dit-news li a:hover,.dit-news li a:focus-visible{text-decoration:underline}
.dit-news li span{color:#9AA8E6;font-weight:600;margin-right:.35rem}
@media(prefers-reduced-motion:no-preference){
 .dit-news-track{animation:dit-ticker calc(var(--dit-n,10)*7s) linear infinite}
 .dit-news-view:hover .dit-news-track,.dit-news-view:focus-within .dit-news-track,.dit-news input:checked~.dit-news-view .dit-news-track{animation-play-state:paused}
 @keyframes dit-ticker{to{transform:translateX(-50%)}}
}
@media(prefers-reduced-motion:reduce){
 .dit-news label{display:none}
 .dit-news-view{overflow-x:auto}
 .dit-news ul[aria-hidden]{display:none}
}
@media(max-width:600px){.dit-news{grid-template-columns:auto 1fr}.dit-news-view{grid-column:1/-1}.dit-news label{justify-self:end}}

/* Eigener Ticker ganz oben */
.dit-ownband{background:#9AA8E6;padding:.15rem clamp(1rem,4vw,2.5rem);margin-block:0}
.dit-own{color:#141B33;border:0;padding:.45rem 0}
.dit-own .dit-news-head{color:#141B33}
.dit-own label{border-color:#141B33}
.dit-own label:hover{background:#141B33;color:#fff}
.dit-own input:focus-visible+label{outline-color:#141B33}
.dit-own li{font-weight:600}
@media(prefers-reduced-motion:reduce){.dit-own li[aria-hidden]{display:none}.dit-own li{white-space:normal}}

/* Logo in der Kopfzeile */
.dit-head .wp-block-site-logo{line-height:0;flex:0 0 auto;width:auto}
.dit-head .wp-block-site-logo img{width:auto;max-width:none;height:54px;object-fit:contain}
.dit-head:has(.wp-block-site-logo img) .wp-block-site-title{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media(max-width:600px){.dit-head .wp-block-site-logo img{height:44px}}

/* Mitlaufende Kopfzeile */
header.wp-block-template-part{position:sticky;top:var(--wp-admin--admin-bar--height,0px);z-index:40;transition:box-shadow .25s}
header.wp-block-template-part.is-scrolled{box-shadow:0 6px 18px rgba(20,27,51,.35)}
.dit-form{scroll-margin-top:110px}

/* Bewegung: nur wenn das Gerät sie nicht abgeschaltet hat */
@media(prefers-reduced-motion:no-preference){
 html{scroll-behavior:smooth}
 @keyframes dit-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
 @keyframes dit-drift{from{transform:scale(1)}to{transform:scale(1.09)}}
 @keyframes dit-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
 @keyframes dit-idle{0%,93%,100%{background:#46507a;box-shadow:none}95%,98%{background:#5BE08F;box-shadow:0 0 9px 2px #5BE08F}}

 /* Einstieg Startseite */
 .dit-hero .wp-block-cover__image-background{animation:dit-drift 26s ease-in-out infinite alternate}
 .dit-hero h1{animation:dit-rise .8s cubic-bezier(.2,.7,.2,1) .1s both}
 .dit-hero .wp-block-cover__inner-container>p{animation:dit-rise .8s cubic-bezier(.2,.7,.2,1) .3s both}
 .dit-hero .wp-block-buttons{animation:dit-rise .8s cubic-bezier(.2,.7,.2,1) .5s both}
 .dit-patch{animation:dit-rise .8s cubic-bezier(.2,.7,.2,1) .65s both}

 /* Unterseiten */
 .dit-title{position:relative;overflow:hidden}
 .dit-title h1{animation:dit-rise .7s cubic-bezier(.2,.7,.2,1) both}
 .dit-title::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:#4E8890;transform-origin:left;animation:dit-grow 1.1s cubic-bezier(.2,.7,.2,1) .15s both}

 /* Patchfeld: Aktivität auf den Ports */
 .dit-patch p a::after{animation:dit-link .5s linear 1 both,dit-idle 7s linear infinite;animation-delay:calc(var(--i,0)*90ms + 1.2s),calc(var(--i,0)*1.3s + 3s)}
 .dit-patch a:hover::after,.dit-patch a:focus-visible::after{animation:none}
 .dit-patch a{transition:transform .15s}
 .dit-patch a:hover{transform:translateY(-3px)}

 /* Einblenden beim Scrollen */
 .dit-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--dit-d,0ms)}
 .dit-reveal.is-in{opacity:1;transform:none}
 .dit-photo{overflow:hidden;border-radius:3px}
 .dit-photo img{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
 .dit-reveal .dit-photo img,.dit-photo.dit-reveal img{transform:scale(1.07)}
 .dit-reveal.is-in .dit-photo img,.dit-photo.dit-reveal.is-in img{transform:none}
 .dit-reveal.is-in .dit-photo:hover img,.dit-photo.dit-reveal.is-in:hover img{transform:scale(1.035)}
 .dit-logo img{transition:transform .25s}
 .dit-logo:hover img{transform:translateY(-3px)}

 /* Reaktion auf Maus und Tastatur */
 .wp-block-button__link{transition:transform .15s,background-color .15s,color .15s}
 .wp-block-button__link:hover{transform:translateY(-2px)}
 .wp-block-button__link:active{transform:translateY(0)}
 .dit-head .wp-block-navigation a{transition:color .15s}
 .dit-names li{transition:transform .15s,border-color .15s}
 .dit-names li:hover{transform:translateY(-2px);border-color:#4E8890}
 .wp-block-table tbody tr{transition:background-color .15s}
 .wp-block-table tbody tr:hover{background:#F3F4FA}
 .dit-form input,.dit-form textarea{transition:border-color .15s,box-shadow .15s}
 .dit-form input:focus,.dit-form textarea:focus{border-color:#3A4BA8;box-shadow:0 0 0 3px #d9def5;outline:0}
 .dit-form button{transition:transform .15s,background-color .15s}
 .dit-form button:hover{transform:translateY(-2px)}
 .dit-foot a.dit-wa{transition:transform .15s,background-color .15s}
 .dit-foot a.dit-wa:hover{transform:translateY(-2px)}
}
@media print{.dit-reveal{opacity:1!important;transform:none!important}header.wp-block-template-part{position:static}}

/* Maskottchen im Startbild */
.dit-hero .wp-block-cover__inner-container{position:relative}
.dit-hero-botwrap{position:absolute;right:0;bottom:1.5rem;width:min(40vw,470px);margin:0;pointer-events:none}
.dit-hero-bot{display:block;width:100%;height:auto}
.dit-hero .dit-bubble{position:absolute;top:1%;right:82%;width:220px;max-width:none;margin:0;padding:.75rem .95rem;background:#fff;color:#141B33;border-radius:16px;font-size:1rem;font-weight:500;line-height:1.3;box-shadow:0 8px 22px rgba(10,16,35,.35);transform-origin:100% 100%}
.dit-hero .dit-bubble::after{content:"";position:absolute;right:-13px;bottom:16px;border-left:18px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent}
@media(min-width:901px){.dit-hero .wp-block-cover__inner-container>p:not(.dit-bubble){max-width:min(34em,52%)}}
@media(max-width:900px){
 .dit-hero-botwrap{position:relative;right:auto;bottom:auto;width:min(64vw,300px);margin:1.25rem 0 0 auto}
 .dit-hero .dit-bubble{top:-2%;right:68%;width:170px;font-size:.92rem;padding:.6rem .75rem}
}
@media(prefers-reduced-motion:no-preference){
 .dit-hero-botwrap{animation:dit-rise .9s cubic-bezier(.2,.7,.2,1) .45s both}
 .dit-hero .dit-bubble{animation:dit-pop 16s ease-out 1.6s infinite both}
 @keyframes dit-pop{0%{opacity:0;transform:scale(.5)}3%{opacity:1;transform:scale(1.07)}5%{transform:scale(1)}58%{opacity:1;transform:scale(1)}61%,100%{opacity:0;transform:scale(.7)}}
}