*,
*::before,
*::after{
box-sizing: border-box;
}
html{
scroll-behavior: smooth;
text-size-adjust: 100%;
}
body{
margin: 0;


-webkit-font-smoothing: antialiased;
}
img,
svg{
display: block;
max-width: 100%;
}
button,
a,
summary{
-webkit-tap-highlight-color: transparent;
}
button,
input,
textarea,
select{
font: inherit;
}
button{
border: 0;
}
a{
color: var(--mint-dunkel);
text-underline-offset: 0.18em;
text-decoration-thickness: 1px;
}
a:hover{
text-decoration-thickness: 2px;
}
code,
.mono{
font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
overflow-wrap: anywhere;
}
h1,
h2,
h3,
p{
margin-top: 0;
}
h1,
h2,
h3{

line-height: 1.13;

}
h1{
font-size: clamp(2.75rem, 6vw, 5.75rem);
}
.rahmen{
width: var(--rahmen);
margin-inline: auto;
}
.sprunglink{
position: fixed;
z-index: 1000;
top: 12px;
left: 12px;
padding: 10px 15px;
color: var(--nacht);
background: var(--weiss);
border-radius: 8px;
box-shadow: var(--schatten-klein);
transform: translateY(-160%);
transition: transform 0.16s ease;
}
.sprunglink:focus{
transform: translateY(0);
}
.seitenkopf{
position: absolute;

top: 0;
right: 0;
left: 0;

}
.kopf-inhalt{
display: flex;

align-items: center;
justify-content: space-between;
gap: 32px;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.wortmarke{


color: inherit;
text-decoration: none;
white-space: nowrap;
}
.wortmarke img{
flex: 0 0 auto;
width: 44px;
height: 44px;
}
.wortmarke span{
display: flex;
align-items: baseline;
font-size: 1.05rem;
letter-spacing: -0.025em;
}
.wortmarke strong{
color: inherit;
font-weight: 750;
}
.wortmarke small{
color: var(--mint);
font-size: inherit;
font-weight: 750;
}
.hauptnavigation{
display: flex;
align-items: center;

}
.hauptnavigation a{
position: relative;


text-decoration: none;
}
.hauptnavigation a::after{
position: absolute;
right: 0;
bottom: -9px;
left: 0;
height: 2px;
background: var(--mint);
content: "";
transform: scaleX(0);
transition: transform 0.18s ease;
}
.hauptnavigation a:hover::after{
transform: scaleX(1);
}
.hero{
position: relative;
overflow: hidden;


}
.hero::before{
position: absolute;


}
.hero::after{
position: absolute;


}
.hero-inhalt{
position: relative;

display: grid;

align-items: start;
column-gap: clamp(44px, 5vw, 70px);
}
.hero-links{
display: flex;
flex-direction: column;
align-items: flex-start;

min-width: 0;
}
.hero-bild{
position: relative;
overflow: hidden;
width: 100%;

min-width: 0;
aspect-ratio: 16 / 9;
margin: 0;
border: 1px solid rgba(255, 255, 255, 0.12);


}
.hero-bild::after{
position: absolute;
inset: 0;

content: "";
pointer-events: none;
}
.hero-bild picture,
.hero-bild img{
width: 100%;
height: 100%;
}
.hero-bild picture{
display: block;
}
.hero-bild img{
object-fit: cover;
}
.ueberzeile{
display: inline-flex;
align-items: center;


color: var(--mint);


text-transform: uppercase;
}
.ueberzeile::before{

height: 2px;
background: currentColor;
content: "";
}
.ueberzeile.dunkel{
color: var(--mint-dunkel);
}
.ueberzeile.hell{
color: var(--mint);
}
.hero h1 > span{
display: block;

}
.hero h1 em{
display: block;

font-style: normal;

}
.hero-merkmale{
display: flex;
flex-wrap: wrap;

}
.hero-merkmale span{

border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 999px;


font-weight: 700;
}
.netz-dekoration{
position: absolute;

inset: 0;
pointer-events: none;
}
.netz-linie{
position: absolute;


transform-origin: left center;
}
.linie-eins{
top: 32%;
left: 9%;
width: 38%;
transform: rotate(21deg);
}
.linie-zwei{
right: 3%;
bottom: 22%;
width: 31%;
transform: rotate(-28deg);
}
.netz-punkt{
position: absolute;


border: 2px solid rgba(64, 230, 194, 0.85);
border-radius: 50%;


}
.punkt-eins{ top: 24%; left: 8%; }
.punkt-zwei{ top: 45%; left: 39%;  }
.punkt-drei{ right: 7%; bottom: 33%;  }
.punkt-vier{ right: 31%; bottom: 11%;  }
.ergebnis-karte{
position: relative;
overflow: hidden;
padding: clamp(28px, 4vw, 46px);
color: var(--text);


}
.ergebnis-karte::before{
position: absolute;
top: 0;
right: 0;
left: 0;


content: "";
}
.ergebnis-karte.warnung::before{
background: linear-gradient(90deg, var(--gelb), var(--orange));
}
.ergebnis-karte.hinweis::before{
background: linear-gradient(90deg, var(--cyan), #6f92e8);
}
.ergebnis-kopf{
display: flex;

justify-content: space-between;
gap: 28px;

}
.ergebnis-augenbraue{
display: block;


font-weight: 800;

text-transform: uppercase;
}
.ergebnis-kopf h2{

margin: 0;

overflow-wrap: anywhere;
}
.vertrauensanzeige{
position: relative;
display: grid;
flex: 0 0 84px;


place-items: center;
}
.vertrauensanzeige svg{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
transform: rotate(-90deg);
}
.vertrauensanzeige circle{
fill: none;
stroke-width: 4;
}
.vertrauensanzeige-basis{
stroke: #e0ebe8;
}
.vertrauensanzeige-wert{
stroke: var(--mint);
stroke-linecap: round;
}
.vertrauensanzeige > span{
position: relative;
z-index: 1;
color: var(--tinte);
font-size: 1.25rem;
font-weight: 820;
letter-spacing: -0.04em;
}
.vertrauensanzeige small{
font-size: 0.65em;
}
.ergebnis-erklaerung{


border-bottom: 1px solid var(--linie);

}
.ergebnis-details{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1px;
overflow: hidden;
margin: 0 0 25px;
border: 1px solid var(--linie);


}
.ergebnis-details > div{
min-width: 0;


}
.ergebnis-details dt{
margin-bottom: 3px;


font-weight: 750;

text-transform: uppercase;
}
.ergebnis-details dd{
min-width: 0;
margin: 0;


overflow-wrap: anywhere;
}
.ip-mit-kopieren{
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.kopieren-knopf{
flex: 0 0 auto;


border-radius: 7px;
cursor: pointer;
font-size: 0.72rem;
font-weight: 800;
}
.sicherheitszeile{
display: grid;
align-items: start;
justify-items: start;
gap: 11px;
min-width: 0;
margin-bottom: 20px;
}
.sicherheitszeile strong,
.sicherheitszeile span{
display: block;
}
.sicherheitszeile strong{
margin-bottom: 2px;

font-size: 0.91rem;
}
.sicherheitszeile > div > span{
color: var(--leise);
font-size: 0.78rem;
line-height: 1.45;
}
.zuordnungsquelle{
display: grid;
justify-items: start;
gap: 6px;
min-width: 0;
max-width: 100%;
}
.status-plakette{
flex: 0 1 auto;
width: fit-content;
max-width: 100%;
padding: 7px 10px;


border-radius: 999px;
font-size: 0.7rem !important;
font-weight: 800;
line-height: 1.3;
letter-spacing: 0.035em;
overflow-wrap: anywhere;
text-align: left;
text-transform: uppercase;
white-space: normal;
}
.status-detail{
display: block;
min-width: 0;
max-width: 100%;
color: var(--leise);
font-size: 0.72rem;
line-height: 1.45;
overflow-wrap: anywhere;
}
.fehlerzustand{
padding: 17px 19px;
border-radius: 14px;
}
.fehlerzustand{
color: #675335;
background: #fff7e3;
border-left: 3px solid var(--orange);
}
.fehlerzustand p{
margin: 0;
font-size: 0.82rem;
line-height: 1.55;
}
.fehlerzustand p + p{
margin-top: 10px;
}
.klein{
font-size: 0.78rem !important;
}
.datenstand{
margin: 16px 0 0;

font-size: 0.72rem;
text-align: right;
}
.datenstand a{
color: inherit;
}
.vergleich-sektion{
position: relative;

padding: 0 0 118px;
}
.vergleich-raster{
position: relative;
z-index: 4;
display: grid;
grid-template-columns: 0.72fr 1.28fr;
align-items: center;
gap: clamp(45px, 7vw, 105px);
padding: clamp(34px, 5vw, 66px);


}
.vergleich-einleitung h2{
margin-bottom: 23px;

}
.vergleich-einleitung p{
margin: 0;

}
.vergleich-werkzeug{
display: grid;
gap: 14px;
}
.vergleich-schritt{
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 16px;
padding: 19px;
border: 1px solid var(--linie);
border-radius: 17px;
background: #fbfdfd;
}
.schrittzahl,
.ablauf-nummer{
display: grid;
place-items: center;
color: var(--mint-dunkel);
background: var(--mint-hell);
font-weight: 850;
}
.schrittzahl{
width: 38px;
height: 38px;
border-radius: 11px;
}
.vergleich-schritt strong{
display: block;
color: var(--tinte);
font-size: 0.91rem;
}
.vergleich-schritt p{
margin: 2px 0 0;
color: var(--leise);
font-size: 0.78rem;
line-height: 1.4;
}
.primaer-knopf,
.sekundaer-knopf,
.heller-knopf{
display: inline-flex;
min-height: 44px;
align-items: center;
justify-content: center;
padding: 10px 16px;

cursor: pointer;
font-size: 0.79rem;

text-decoration: none;

}
.primaer-knopf{


box-shadow: 0 8px 20px rgba(17, 170, 139, 0.18);
}
.primaer-knopf:hover,
.heller-knopf:hover{
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(17, 170, 139, 0.27);
}
.sekundaer-knopf:hover:not(:disabled){
background: #dce8e6;
}
button:disabled{
cursor: not-allowed;
opacity: 0.46;
}
.vergleich-noscript{
margin: 0;
padding: 18px 20px;
border: 1px solid #d4e4e1;
border-radius: 16px;
color: var(--text);
background: var(--weiss);
box-shadow: var(--schatten-klein);
}
.vergleich-ausgabe{
padding: 21px;
border: 1px solid #bce9de;
border-radius: 17px;
background: linear-gradient(135deg, #effbf8, #f8fdfc);
}
.vergleich-ausgabe[hidden]{
display: none;
}
.vergleich-ergebnis-kopf{
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 14px;
}
.vergleich-ergebnis-kopf strong{
color: var(--tinte);
}
.vergleich-verwerfen{
padding: 5px 9px;
color: #6e5555;
background: #f6eaea;
border-radius: 7px;
cursor: pointer;
font-size: 0.72rem;
font-weight: 750;
}
.verbindungs-karten{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.verbindungs-karte{
min-width: 0;
padding: 14px;
background: var(--weiss);
border: 1px solid #dcebe7;
border-radius: 12px;
}
.verbindungs-karte span,
.verbindungs-karte small{
display: block;
color: var(--leise);
overflow-wrap: anywhere;
}
.verbindungs-karte span{
margin-bottom: 3px;
font-size: 0.69rem;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.verbindungs-karte strong{
display: block;
color: var(--tinte);
font-size: 0.94rem;
overflow-wrap: anywhere;
}
.verbindungs-karte small{
margin-top: 4px;
font-size: 0.7rem;
}
.vergleich-fazit{
margin: 12px 0 0;
color: #39534c;
font-size: 0.8rem;
}
.verbindungs-karte .verbindungs-geraetehinweis{
margin-top: 7px;
padding-top: 6px;
border-top: 1px solid #e5ecec;
color: #466a68;
font-weight: 680;
}
.vergleich-geraetehinweis{
margin: 8px 0 0;
color: #667985;
font-size: 0.74rem;
line-height: 1.5;
}
.live-status{
min-height: 1.5em;
margin: 0;
color: var(--leise);
font-size: 0.78rem;
}
.abschnittskopf{
max-width: 790px;

}
.abschnittskopf.zentriert{
margin-inline: auto;
text-align: center;
}
.abschnittskopf.zentriert .ueberzeile::before{
display: none;
}
.abschnittskopf h2{
margin-bottom: 21px;
}
.abschnittskopf p{

font-size: 1.05rem;
}
.ablauf-raster{
display: grid;


}
.ablauf-raster article{
position: relative;
overflow: hidden;


border: 1px solid var(--linie);


}
.ablauf-raster article::after{
position: absolute;


border: 1px solid #d8eee8;
border-radius: 50%;
content: "";
}
.ablauf-nummer{


border-radius: 14px;
font-size: 0.79rem;
}
.ablauf-raster h3{
margin-bottom: 13px;
}
.ablauf-raster p{
margin: 0;

font-size: 0.92rem;
}
.browser-sektion{
position: relative;
overflow: hidden;

color: rgba(255, 255, 255, 0.7);

}
.browser-sektion::before{
position: absolute;
inset: 0;


content: "";

}
.browser-raster{
position: relative;
z-index: 1;
display: grid;

align-items: center;

}
.browser-einleitung h2{
margin-bottom: 24px;
color: var(--weiss);
}
.browser-einleitung p{
margin: 0;
}
.noscript-hinweis{
margin-top: 18px !important;
padding: 12px 14px;
border: 1px solid rgba(255, 255, 255, 0.17);
border-radius: 10px;
}
.browser-karten{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));

margin: 0;
}
.browser-karten > div{
min-width: 0;

border: 1px solid rgba(255, 255, 255, 0.11);


backdrop-filter: blur(6px);
}
.browser-karten dt{
margin-bottom: 6px;

font-size: 0.69rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.browser-karten dd{
margin: 0;

font-size: 0.93rem;
font-weight: 680;
overflow-wrap: anywhere;
}
.hilfe-raster{
display: grid;
grid-template-columns: 0.68fr 1.32fr;

}
.hilfe-raster h2{
position: sticky;
top: 30px;
}
.hilfe-liste{
display: grid;

}
.hilfe-liste article{
display: grid;
grid-template-columns: 50px minmax(0, 1fr);
gap: 20px;

border-bottom: 1px solid #d8e3e1;
}
.hilfe-liste article > span{
display: grid;
width: 43px;
height: 43px;
place-items: center;

border: 1px solid #b8d9d1;
border-radius: 50%;
font-size: 0.8rem;
font-weight: 850;
}
.hilfe-liste h3{
margin-bottom: 8px;
}
.hilfe-liste p{
margin: 0;

}
.faq-raster{
display: grid;
grid-template-columns: 0.65fr 1.35fr;
align-items: start;
gap: clamp(55px, 9vw, 140px);
}
.faq-einleitung{
position: sticky;
top: 30px;
}
.faq-einleitung h2{
margin-bottom: 24px;
}
.faq-einleitung p{
color: var(--leise);
}
.faq-liste details{
border-bottom: 1px solid var(--linie);
}
.faq-liste summary{
display: grid;
grid-template-columns: minmax(0, 1fr) 28px;
align-items: center;
gap: 20px;

color: var(--tinte);
cursor: pointer;

font-weight: 760;
list-style: none;
}
.faq-liste summary::-webkit-details-marker{
display: none;
}
.faq-liste summary span{
position: relative;
width: 26px;
height: 26px;
border: 1px solid #c9d8d5;
border-radius: 50%;
}
.faq-liste summary span::before,
.faq-liste summary span::after{
position: absolute;
top: 50%;
left: 50%;
width: 10px;
height: 1.5px;
background: var(--mint-dunkel);
content: "";
transform: translate(-50%, -50%);
transition: transform 0.18s ease;
}
.faq-liste summary span::after{
transform: translate(-50%, -50%) rotate(90deg);
}
.faq-liste details[open] summary span::after{
transform: translate(-50%, -50%) rotate(0);
}
.faq-liste details p{
margin: 0;

}
.abschluss-inhalt{
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
padding: clamp(38px, 6vw, 72px);
color: rgba(255, 255, 255, 0.72);


}
.abschluss-inhalt h2{
max-width: 760px;
margin: 0;
color: var(--weiss);
font-size: clamp(2rem, 4vw, 3.5rem);
}
.heller-knopf{
flex: 0 0 auto;


}
.fussbereich{
padding: 68px 0 24px;


}
.fuss-inhalt{
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 50px;
padding-bottom: 45px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.fuss-marke .wortmarke{
color: var(--weiss);
}
.fuss-marke p{
margin: 15px 0 0;
font-size: 0.86rem;
}
.fuss-inhalt nav{
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 25px;
}
.fuss-inhalt nav a{

font-size: 0.82rem;
font-weight: 650;
text-decoration: none;
}
.fuss-unterzeile{
display: flex;
justify-content: space-between;
gap: 30px;
padding-top: 22px;
font-size: 0.73rem;
}
.rechtsseite .seitenkopf,
.fehlerseite .seitenkopf{
position: relative;

}
.recht-main{
padding: 92px 0 120px;
}
.recht-raster{
display: grid;
grid-template-columns: 220px minmax(0, 780px);
gap: clamp(50px, 8vw, 110px);
justify-content: center;
}
.recht-seitennavi{
position: sticky;

display: grid;
align-self: start;
padding: 18px;
border: 1px solid var(--linie);


}
.recht-seitennavi span{
margin-bottom: 9px;
padding: 0 10px;
color: var(--leise);
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.recht-seitennavi a{
padding: 9px 10px;
color: var(--text);
border-radius: 8px;
font-size: 0.84rem;
font-weight: 700;
text-decoration: none;
}
.recht-inhalt{
padding: clamp(32px, 6vw, 70px);
background: var(--weiss);
border: 1px solid var(--linie);

box-shadow: var(--schatten-klein);
}
.recht-inhalt h1{
margin-bottom: 54px;
font-size: clamp(2.8rem, 6vw, 4.8rem);
}
.recht-inhalt h2{
margin: 46px 0 14px;
padding-top: 5px;
font-size: 1.42rem;
letter-spacing: -0.025em;
}
.recht-inhalt h2:first-of-type{
margin-top: 0;
}
.recht-inhalt p{
color: #526871;
}
.recht-inhalt p:last-child{
margin-bottom: 0;
}
.nicht-gefunden{
min-height: 670px;
padding: 110px 0;
}
.nicht-gefunden-inhalt{
max-width: 760px;
text-align: center;
}
.fehlercode{
display: block;

font-size: clamp(6rem, 19vw, 13rem);
font-weight: 880;
line-height: 0.82;
letter-spacing: -0.08em;
}
.nicht-gefunden h1{
margin: 15px 0 24px;
}
.nicht-gefunden p{
max-width: 640px;
margin: 0 auto 32px;
color: var(--leise);
}
.als-link{
display: inline-flex;
}
@media (max-width: 1060px){
.hero{
min-height: auto;
}
.hero-inhalt,
.browser-raster{
grid-template-columns: 1fr;
}
.hero-inhalt{

row-gap: 40px;
}
.vergleich-raster,
.hilfe-raster,
.faq-raster{
grid-template-columns: 1fr;
}
.vergleich-einleitung{
max-width: 740px;
}
.hilfe-raster h2,
.faq-einleitung{
position: static;
}
.hilfe-raster > div:first-child,
.faq-einleitung{
max-width: 730px;
}
}
@media (max-width: 820px){
:root{
--rahmen: min(100% - 28px, 720px);
}
body{
font-size: 16px;
}
.kopf-inhalt{
min-height: 78px;
}
.hauptnavigation{
display: none;
}
.hero{
padding: 128px 0 92px;
}
.hero-inhalt{
gap: 48px;
}
.vergleich-sektion{
margin-top: -38px;
padding-bottom: 85px;
}
.vergleich-raster{
padding: 30px;
}
.vergleich-schritt{
grid-template-columns: auto 1fr;
}
.vergleich-schritt button{
grid-column: 2;
justify-self: start;
}
.ablauf-sektion,
.hilfe-sektion,
.faq-sektion{
padding-block: 90px;
}
.ablauf-raster{
grid-template-columns: 1fr;
}
.ablauf-raster article{
min-height: auto;
}
.ablauf-nummer{
margin-bottom: 30px;
}
.browser-sektion{
padding: 90px 0;
}
.abschluss-inhalt{
align-items: flex-start;
flex-direction: column;
}
.recht-raster{
grid-template-columns: 1fr;
gap: 25px;
}
.recht-seitennavi{
position: static;
display: flex;
align-items: center;
gap: 4px;
}
.recht-seitennavi span{
margin: 0 auto 0 0;
}
}
@media (max-width: 590px){
:root{
--rahmen: calc(100% - 22px);

}
.wortmarke img{
width: 39px;
height: 39px;
}
.wortmarke span{
font-size: 0.94rem;
}
.hero{
padding-top: 117px;
}
.hero-text > p{
font-size: 1rem;
}
.ergebnis-karte{
padding: 25px 20px;
}
.ergebnis-kopf{
align-items: flex-start;
}
.vertrauensanzeige{
flex-basis: 69px;
width: 69px;
height: 69px;
}
.vertrauensanzeige > span{
font-size: 1.05rem;
}
.ergebnis-details{
grid-template-columns: 1fr;
}
.sicherheitszeile{
gap: 10px;
}
.vergleich-raster{
padding: 27px 19px;
}
.vergleich-schritt{
grid-template-columns: 38px minmax(0, 1fr);
padding: 16px;
}
.vergleich-schritt button{
grid-column: 1 / -1;
width: 100%;
}
.verbindungs-karten,
.browser-karten{
grid-template-columns: 1fr;
}
.browser-karten > div{
padding: 16px;
}
.hilfe-liste article{
grid-template-columns: 42px minmax(0, 1fr);
gap: 14px;
}
.faq-liste summary{
font-size: 0.96rem;
}
.faq-liste details > div{
padding-right: 5px;
}
.fuss-inhalt,
.fuss-unterzeile{
align-items: flex-start;
flex-direction: column;
}
.fuss-inhalt nav{
justify-content: flex-start;
}
.recht-main{
padding: 55px 0 75px;
}
.recht-inhalt{
padding: 28px 20px;
}
.recht-seitennavi span{
display: none;
}
}
@media (prefers-reduced-motion: reduce){
html{
scroll-behavior: auto;
}
*,
*::before,
*::after{
scroll-behavior: auto !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
@media print{
.seitenkopf,
.vergleich-sektion,
.abschluss-sektion,
.fussbereich,
.browser-sektion,
.netz-dekoration,
.hero-bild,
.kopieren-knopf{
display: none !important;
}
body,
.hero,
.hilfe-sektion,
.rechtsseite{
color: #000;
background: #fff;
}
.hero{
min-height: 0;
padding: 30px 0;
}
.hero-inhalt{
display: block;
}
.hero-text{
display: none;
}
.ergebnis-karte,
.recht-inhalt{
box-shadow: none;
border: 1px solid #999;
}
a{
color: #000;
}
}
.diagnose-raster{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));

margin: 18px 0;
}
.diagnose-karte{
min-width: 0;


}
.diagnose-karte.diagnose-warnung{
border-color: #efd8aa;
background: linear-gradient(145deg, #fffaf0, #fff4dc);
}
.diagnose-karte > span{
display: block;
margin-bottom: 5px;


font-weight: 850;

text-transform: uppercase;
}
.diagnose-karte strong{
display: block;

font-size: 0.95rem;
overflow-wrap: anywhere;
}
.diagnose-karte p,
.diagnose-karte small{
display: block;
margin: 7px 0 0;

font-size: 0.76rem;
line-height: 1.48;
}
.diagnose-karte small{
color: #7b6a4f;
}
.datenquellen-main{
padding: 92px 0 120px;
background: var(--flaeche);
}
.datenquellen-kopf{

margin-bottom: 48px;
}
.datenquellen-kopf h1{
margin-bottom: 20px;
}
.datenquellen-kopf p{
color: var(--leise);
font-size: 1.04rem;
}
.quellen-raster{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));

}
.quellen-karte{
min-width: 0;
padding: 28px;
border: 1px solid var(--linie);

background: var(--weiss);
box-shadow: var(--schatten-klein);
}
.quellen-karte.quelle-breit{
grid-column: 1 / -1;
}
.quellen-kopfzeile{
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
margin-bottom: 14px;
}
.quellen-karte h2{
margin: 0;
font-size: 1.25rem;
}
.quellen-status{
flex: 0 0 auto;
padding: 5px 9px;
border-radius: 999px;


font-size: 0.68rem;
font-weight: 850;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.quellen-status.inaktiv{
color: #735d3b;
background: #fff0d1;
}
.quellen-status.veraltet{
color: #7b3f2b;
background: #ffe7df;
}
.quellen-status.rueckfall{
color: #5e4b22;
background: #fff0c7;
}
.quellen-karte p{
color: var(--leise);
}
.quellen-details{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px 22px;
margin: 22px 0 0;
}
.quellen-details > div{
min-width: 0;
padding-top: 10px;
border-top: 1px solid var(--linie);
}
.quellen-details dt{
color: var(--leise);
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.quellen-details dd{
margin: 4px 0 0;
color: var(--tinte);
font-size: 0.86rem;
font-weight: 700;
overflow-wrap: anywhere;
}
.quellen-hinweis{
margin-top: 25px;
padding: 20px 22px;
border-left: 3px solid var(--mint);
border-radius: 13px;
color: #4e6568;

}
@media (max-width: 1060px){
.ablauf-raster{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 820px){
.ablauf-raster,
.quellen-raster{
grid-template-columns: 1fr;
}
.quellen-karte.quelle-breit{
grid-column: auto;
}
}
@media (max-width: 590px){
.diagnose-raster,
.quellen-details{
grid-template-columns: 1fr;
}
.quellen-karte{
padding: 23px 19px;
}
}
:root{
--nacht: #07111f;


--tinte: #111c2d;
--text: #405262;

--linie: #dce5ec;

--weiss: #ffffff;


--mint-hell: #e3faf4;
--cyan: #65d8ef;


--gelb: #ffda78;
--orange: #e7953e;





--schatten-klein: 0 13px 38px rgba(24, 47, 64, 0.08);

--rahmen: min(1240px, calc(100% - 48px));
--schrift: "Manrope Local", "Avenir Next", Avenir, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--schrift-zahlen: "DM Sans Local", "Manrope Local", ui-sans-serif, system-ui, sans-serif;
}
html{
background: var(--nacht);
}
body{
min-width: 320px;


font-family: var(--schrift);
font-size: 16.5px;
line-height: 1.68;
text-rendering: optimizeLegibility;
}
h1,
h2,
h3{
color: var(--tinte);
font-family: var(--schrift);
font-weight: 760;
letter-spacing: -0.045em;
}
h2{
font-size: clamp(2.15rem, 4.25vw, 3.85rem);
}
h3{
font-size: 1.22rem;
letter-spacing: -0.03em;
}
code,
.mono,
.ergebnis-details dd,
.browser-karten dd,
.quellen-details dd,
.vertrauensanzeige > span{
font-family: var(--schrift-zahlen);
font-variant-numeric: tabular-nums;
}
p{
text-wrap: pretty;
}
::selection{
color: #031d19;
background: rgba(54, 223, 184, 0.78);
}
:focus-visible{
outline: 3px solid var(--gelb);
outline-offset: 4px;
}
.seitenkopf{
z-index: 50;
color: var(--weiss);

-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.kopf-inhalt{
min-height: 86px;
border-bottom-color: rgba(255, 255, 255, 0.1);
}
.wortmarke{
--wortmarke-breite: clamp(250px, 27vw, 430px);
--wortmarke-einzug: clamp(44px, 5vw, 78px);
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 0;
padding: 6px 10px 6px 4px;
border-radius: 13px;
transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.wortmarke:hover{
color: var(--weiss);
background: rgba(255, 255, 255, 0.065);
transform: translateY(-1px);
}
.wortmarke .wortmarke-bild{
display: block;
width: clamp(250px, 27vw, 430px);
height: auto;
filter: drop-shadow(0 12px 30px rgba(8, 16, 30, 0.28));
}
.wortmarke .wortmarke-claim{
display: block;
margin-top: -8px;
margin-left: var(--wortmarke-einzug);
color: rgba(226, 239, 247, 0.64);
font-size: 0.61rem;
font-weight: 680;
letter-spacing: 0.04em;
text-transform: uppercase;
white-space: nowrap;
}
.wortmarke.kompakt{
--wortmarke-breite: clamp(220px, 24vw, 360px);
--wortmarke-einzug: clamp(40px, 4.4vw, 66px);
}
.wortmarke.kompakt .wortmarke-bild{
width: var(--wortmarke-breite);
}
.wortmarke.kompakt .wortmarke-claim{
color: #718994;
}
.hauptnavigation{
gap: 5px;
}
.hauptnavigation a{
padding: 9px 13px;
border-radius: 10px;

font-size: 0.86rem;
font-weight: 690;
transition: color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.hauptnavigation a::after{
display: none;
}
.hauptnavigation a:hover{
color: #ffffff;
background: rgba(255, 255, 255, 0.075);
transform: translateY(-1px);
}
.mobilnavigation{
position: relative;
display: none;
}
.mobilnavigation summary{
min-height: 42px;
padding: 10px 13px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 11px;
color: #f2f8fb;
background: rgba(255, 255, 255, 0.065);
font-size: 0.84rem;
font-weight: 750;
list-style: none;
}
.mobilnavigation summary::-webkit-details-marker{
display: none;
}
.mobilnavigation summary::after{
display: inline-block;
margin-left: 7px;
content: "+";
}
.mobilnavigation[open] summary::after{
content: "–";
}
.mobilnavigation nav{
position: absolute;
z-index: 80;
top: calc(100% + 9px);
right: 0;
display: grid;
width: min(260px, calc(100vw - 30px));
padding: 9px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 14px;
background: rgba(5, 18, 31, 0.97);
box-shadow: 0 20px 55px rgba(0, 5, 15, 0.4);
}
.mobilnavigation nav a{
padding: 11px 12px;
border-radius: 9px;
color: rgba(244, 250, 255, 0.86);
font-size: 0.86rem;
font-weight: 680;
text-decoration: none;
}
.mobilnavigation nav a:hover,
.mobilnavigation nav a:focus-visible{
color: #ffffff;
background: rgba(54, 223, 184, 0.12);
}
@media (max-width: 820px){
.kopf-inhalt{
gap: 12px;
}
.wortmarke{
--wortmarke-breite: min(62vw, 300px);
min-width: 0;
}
.mobilnavigation{
display: block;
flex: 0 0 auto;
}
}
.hero{
isolation: isolate;
min-height: 0;
padding: 145px 0 108px;

}
.hero::before{
z-index: -3;
inset: -15%;

background-size: 72px 72px;
content: "";

-webkit-mask-image: radial-gradient(ellipse at center, #000 28%, transparent 82%);
mask-image: radial-gradient(ellipse at center, #000 28%, transparent 82%);
animation: hero-rasterfahrt 44s linear infinite;
}
.hero::after{
z-index: -2;
right: -13vw;
bottom: -310px;
width: min(930px, 70vw);
height: min(620px, 48vw);
border: 1px solid rgba(101, 216, 239, 0.18);
border-radius: 50%;
background: radial-gradient(circle at 38% 38%, rgba(54, 223, 184, 0.11), transparent 58%);

content: "";
transform: rotate(-9deg);
animation: hero-ring 19s ease-in-out infinite alternate;
}
.hero-inhalt{
z-index: 4;
grid-template-columns: minmax(0, 1.06fr) minmax(500px, 0.94fr);
gap: clamp(48px, 5.5vw, 76px);
}
.hero-links{
gap: 28px;
}
.hero-text{
position: relative;
max-width: 685px;
padding-top: 4px;
}
.hero-text::before{
position: absolute;
top: -42px;
left: -50px;
width: 240px;
height: 240px;
border-radius: 50%;
background: radial-gradient(circle, rgba(54, 223, 184, 0.08), transparent 69%);
content: "";
pointer-events: none;
}
.ueberzeile{
gap: 12px;
margin-bottom: 19px;
font-size: 0.73rem;
font-weight: 820;
letter-spacing: 0.145em;
}
.ueberzeile::before{
width: 31px;
box-shadow: 0 0 20px rgba(54, 223, 184, 0.36);
}
.hero h1{
max-width: 700px;
margin-bottom: 26px;
color: #f9fbff;
font-size: clamp(3.15rem, 5.25vw, 5.35rem);
font-weight: 770;
line-height: 0.99;
letter-spacing: -0.06em;
text-shadow: 0 5px 30px rgba(0, 5, 18, 0.42);
}
.hero h1 > span{
margin-top: 0.05em;
font-size: 0.78em;
}
.hero h1 em{
margin-top: 0.08em;
color: var(--mint);
font-size: 0.94em;
font-weight: 520;
background: linear-gradient(105deg, #48e7bd 0%, #62d9ef 58%, #a69cf0 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero-text > p{
max-width: 625px;
margin-bottom: 30px;

font-size: clamp(1.02rem, 1.55vw, 1.17rem);
line-height: 1.75;
}
.hero-merkmale{
gap: 9px;
}
.hero-merkmale span{
position: relative;
padding: 9px 14px 9px 31px;


-webkit-backdrop-filter: blur(7px);
backdrop-filter: blur(7px);
font-size: 0.77rem;
}
.hero-merkmale span::before{
position: absolute;
top: 50%;
left: 13px;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--mint);
box-shadow: 0 0 0 5px rgba(54, 223, 184, 0.08), 0 0 15px rgba(54, 223, 184, 0.34);
content: "";
transform: translateY(-50%);
}
.hero-bild{
max-width: 665px;

border-radius: 25px;
background: rgba(255, 255, 255, 0.05);

transform-origin: center;
animation: hero-bild-schweben 11s ease-in-out infinite;
}
.hero-bild::before{
position: absolute;
z-index: 2;
inset: 0;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: inherit;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.09);
content: "";
pointer-events: none;
}
.hero-bild::after{
z-index: 1;
background:
linear-gradient(180deg, rgba(4, 16, 28, 0.015), rgba(4, 16, 28, 0.22)),
linear-gradient(125deg, rgba(54, 223, 184, 0.055), transparent 42%, rgba(101, 216, 239, 0.07));
}
.hero-bild img{
transition: none;
}
.provider-himmel{
position: absolute;
z-index: 2;
inset: 0;
overflow: hidden;
pointer-events: none;


}
.provider-marke{
position: absolute;
display: grid;
min-width: 94px;
min-height: 48px;
place-items: center;
padding: 10px 16px;


will-change: transform;
}
.provider-marke--logo img{
width: auto;
max-width: 142px;
height: auto;
max-height: 42px;
object-fit: contain;


}
.provider-marke--text{


font-family: var(--schrift);
font-size: clamp(0.88rem, 1vw, 1.04rem);
font-weight: 790;
letter-spacing: -0.02em;
white-space: nowrap;

}
.provider-slot-1{ top: 16%; left: 4%; animation: provider-drift-a 21s ease-in-out -7s infinite; }
.provider-slot-2{ top: 10%; left: 37%; animation: provider-drift-b 26s ease-in-out -13s infinite; }
.provider-slot-3{ top: 19%; right: 5%; animation: provider-drift-c 23s ease-in-out -3s infinite; }
.provider-slot-4{ top: 45%; left: 4%; animation: provider-drift-c 28s ease-in-out -18s infinite; }
.provider-slot-5{ top: 46%; left: 39%; animation: provider-drift-a 24s ease-in-out -11s infinite; }
.provider-slot-6{ top: 50%; right: 5%; animation: provider-drift-b 27s ease-in-out -6s infinite; }
.provider-slot-7{ bottom: 10%; left: 10%; animation: provider-drift-b 25s ease-in-out -17s infinite; }
.netz-dekoration{
z-index: 1;
}
.netz-linie{
overflow: hidden;
height: 1px;


}
.netz-linie::after{
position: absolute;
top: -1px;
left: -20%;
width: 20%;
height: 3px;
border-radius: 999px;


content: "";
animation: netz-signal 7.8s ease-in-out infinite;
}
.linie-zwei::after{
animation-delay: -3.6s;
}
.linie-drei{
top: 66%;
left: 13%;
width: 29%;
transform: rotate(-17deg);
}
.linie-vier{
top: 71%;
right: 16%;
width: 25%;
transform: rotate(14deg);
}
.linie-drei::after{
animation-delay: -5.1s;
}
.linie-vier::after{
animation-delay: -1.7s;
}
.netz-punkt{
width: 8px;
height: 8px;


animation: punkt-puls-neu 3.4s ease-in-out infinite, punkt-schweben 10s ease-in-out infinite;
}
.punkt-zwei{ animation-delay: -1.2s, -4s; }
.punkt-drei{ animation-delay: -2.1s, -7s; }
.punkt-vier{ animation-delay: -0.5s, -2s; }
.punkt-fuenf{ top: 65%; left: 28%; animation-delay: -2.8s, -5.5s; }
.punkt-sechs{ top: 15%; right: 37%; animation-delay: -1.7s, -8s; }
.ergebnis-karte{
border: 1px solid rgba(255, 255, 255, 0.78);
border-radius: 29px;


animation: ergebnis-schweben 13s ease-in-out infinite;
}
.ergebnis-karte::before{
height: 4px;

}
.ergebnis-karte::after{
position: absolute;
top: -90px;
right: -75px;
width: 210px;
height: 210px;
border: 1px solid rgba(54, 223, 184, 0.11);
border-radius: 50%;
content: "";
pointer-events: none;
}
.ergebnis-karte > *{
position: relative;
z-index: 1;
}
.ergebnis-meta{
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
margin-bottom: 22px;
padding-bottom: 16px;
border-bottom: 1px solid #e4eaef;
}
.ergebnis-meta a{
color: #71838f;
font-size: 0.72rem;
font-weight: 690;
text-decoration: none;
}
.ergebnis-meta a:hover{
color: #08705e;
}
.live-indikator{
display: inline-flex;
align-items: center;
gap: 8px;
color: #49636f;
font-size: 0.7rem;
font-weight: 810;
letter-spacing: 0.075em;
text-transform: uppercase;
}
.live-indikator i{
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--mint);
box-shadow: 0 0 0 5px rgba(54, 223, 184, 0.1), 0 0 18px rgba(54, 223, 184, 0.36);
animation: live-puls 2.8s ease-in-out infinite;
}
.ergebnis-kopf{
align-items: flex-start;
margin-bottom: 20px;
}
.ergebnis-augenbraue{
margin-bottom: 8px;
color: #617585;
font-size: 0.75rem;
letter-spacing: 0.085em;
}
.ergebnis-kopf h2{
max-width: 445px;
font-size: clamp(2rem, 3.7vw, 3.15rem);
line-height: 1.04;
}
.vertrauensanzeige{
flex-basis: 82px;
width: 82px;
height: 82px;
border: 7px solid #e1ecea;
box-shadow: 0 8px 25px rgba(15, 76, 66, 0.09);
}
.ergebnis-erklaerung{
margin-bottom: 24px;
padding-bottom: 23px;
border-bottom-color: #e2e9ee;
color: #536877;
font-size: 0.98rem;
}
.ergebnis-details{
border-color: #dce6ec;
border-radius: 16px;
background: #dce6ec;
}
.ergebnis-details > div{
padding: 16px 18px;
background: rgba(248, 251, 252, 0.96);
transition: background 0.18s ease;
}
.ergebnis-details > div:hover{
background: #ffffff;
}
.ergebnis-details dt{
color: #72838f;
font-size: 0.69rem;
letter-spacing: 0.07em;
}
.ergebnis-details dd{
color: #192737;
font-size: 0.94rem;
font-weight: 720;
}
.kopieren-knopf{
padding: 5px 9px;
color: #086956;
background: #dcf8f0;
box-shadow: inset 0 0 0 1px rgba(8, 105, 86, 0.06);
transition: color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.kopieren-knopf:hover{
color: #034c3e;
background: #c8f2e7;
transform: translateY(-1px);
}
.diagnose-raster{
gap: 12px;
}
.diagnose-karte{
min-height: 176px;
padding: 19px;
border: 1px solid #dfe9ec;
border-radius: 15px;

}
.diagnose-karte > span{
color: #71838f;
font-size: 0.68rem;
letter-spacing: 0.075em;
}
.diagnose-karte strong{
color: #182736;
}
.diagnose-karte p,
.diagnose-karte small{
color: #667985;
}
.diagnose-konfidenz{
display: block;
margin-top: 10px;
font-weight: 720;
}
.lokaler-zugangshinweis{
display: block;
margin-top: 11px;
padding: 9px 10px;
border: 1px solid #d7e6e7;
border-radius: 10px;
color: #506b73 !important;
background: rgba(255, 255, 255, 0.72);
font-size: 0.73rem !important;
line-height: 1.48;
}
.lokaler-zugangshinweis[hidden]{
display: none;
}
.diagnose-belege{
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid #dce7e9;
color: #526976;
font-size: 0.78rem;
}
.diagnose-belege summary{
color: #265b55;
font-weight: 760;
}
.diagnose-belege ul{
display: grid;
gap: 5px;
margin: 9px 0 0;
padding-left: 18px;
}
.sicherheitszeile{
padding-top: 4px;
}
.sicherheitszeile strong{
color: #192737;
}
.status-plakette{
color: #08705e;
background: #dcf8f0;
box-shadow: inset 0 0 0 1px rgba(8, 112, 94, 0.06);
}
.datenstand{
color: #84939c;
}
.vergleich-sektion{
margin-top: -58px;
padding-bottom: 116px;
}
.vergleich-raster{
border: 1px solid rgba(202, 217, 226, 0.75);
border-radius: 26px;
background:
radial-gradient(circle at 8% 0, rgba(54, 223, 184, 0.08), transparent 28%),
rgba(255, 255, 255, 0.985);
box-shadow: 0 26px 68px rgba(10, 31, 47, 0.12);
}
.vergleich-einleitung h2{
max-width: 460px;
font-size: clamp(1.9rem, 3.1vw, 2.75rem);
}
.vergleich-einleitung p{
color: #687b89;
}
.vergleich-werkzeug{
padding: 13px;
border: 1px solid #dce5eb;
border-radius: 18px;
background: #f7f9fb;
}
.vergleich-schritt{
border-color: #e0e7ec;
}
.schrittzahl{
color: #08735f;
background: #ddf8f1;
box-shadow: inset 0 0 0 1px rgba(8, 115, 95, 0.08);
}
.primaer-knopf,
.sekundaer-knopf,
.heller-knopf{
border-radius: 11px;
font-weight: 780;
box-shadow: 0 10px 24px rgba(8, 73, 65, 0.12);
transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.primaer-knopf{
color: #052820;
background: linear-gradient(120deg, #39deb8, #62d9ef);
}
.sekundaer-knopf{
color: #1d3443;
border: 1px solid #cbd8df;
background: #ffffff;
}
.primaer-knopf:not(:disabled):hover,
.sekundaer-knopf:not(:disabled):hover,
.heller-knopf:hover{
transform: translateY(-2px);
box-shadow: 0 15px 30px rgba(8, 73, 65, 0.16);
filter: brightness(1.02);
}
.ablauf-sektion{
padding: 52px 0 126px;
background:
radial-gradient(circle at 50% 0, rgba(63, 123, 232, 0.045), transparent 30%),
var(--flaeche);
}
.abschnittskopf{
margin-bottom: 52px;
}
.abschnittskopf p{
color: #697b89;
}
.ablauf-raster{
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}
.ablauf-raster article{
min-height: 285px;
padding: 28px;
border-color: #dde6ed;
border-radius: 18px;
background: rgba(255, 255, 255, 0.94);
box-shadow: 0 12px 34px rgba(27, 52, 71, 0.055);
transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}
.ablauf-raster article:hover{
border-color: #bfded7;
box-shadow: 0 18px 44px rgba(18, 58, 74, 0.1);
transform: translateY(-4px);
}
.ablauf-raster article::before{
position: absolute;
top: 0;
right: 0;
left: 0;
height: 3px;
background: linear-gradient(90deg, var(--mint), var(--cyan));
content: "";
opacity: 0;
transition: opacity 0.22s ease;
}
.ablauf-raster article:hover::before{
opacity: 1;
}
.ablauf-raster article::after{
right: -60px;
bottom: -65px;
width: 155px;
height: 155px;
border-color: #e5f0ee;
}
.ablauf-nummer{
display: grid;
width: 46px;
height: 46px;
margin-bottom: 44px;
place-items: center;
color: #09705e;
background: #e3faf4;
box-shadow: inset 0 0 0 1px rgba(9, 112, 94, 0.07);
}
.ablauf-raster p{
color: #6a7c89;
}
.browser-sektion{
padding: 124px 0;

}
.browser-sektion::before{
background-image:
radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px),
linear-gradient(115deg, transparent 48%, rgba(54, 223, 184, 0.06) 49%, transparent 50%);
background-size: 28px 28px, 100% 100%;
opacity: 0.22;
}
.browser-raster{
grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
gap: clamp(58px, 8vw, 118px);
}
.browser-einleitung p{
color: rgba(231, 241, 248, 0.68);
}
.browser-karten{
gap: 10px;
}
.browser-karten > div{
padding: 19px 20px;
border-color: rgba(209, 237, 241, 0.1);
border-radius: 14px;
background: rgba(255, 255, 255, 0.045);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.browser-karten > div:hover{
border-color: rgba(54, 223, 184, 0.24);
background: rgba(255, 255, 255, 0.07);
transform: translateY(-2px);
}
.browser-karten dt{
color: rgba(218, 234, 241, 0.48);
}
.browser-karten dd{
color: #f6fbff;
}
.browser-karten dd.browser-fakt-mit-link{
display: grid;
gap: 8px;
}
.browser-zusatzlink{
display: block;
color: rgba(218, 234, 241, 0.62);
font-size: 0.76rem;
font-weight: 570;
line-height: 1.45;
}
.browser-zusatzlink a{
color: #78ead2;
font-weight: 720;
text-decoration: underline;
text-decoration-color: rgba(120, 234, 210, 0.5);
text-underline-offset: 3px;
transition: color 0.18s ease, text-decoration-color 0.18s ease;
}
.browser-zusatzlink a:hover{
color: #b3f7e7;
text-decoration-color: currentColor;
}
.hilfe-sektion{
padding: 128px 0;
background: #ffffff;
}
.hilfe-raster{
gap: clamp(56px, 8vw, 128px);
}
.hilfe-raster h2,
.faq-einleitung{
top: 34px;
}
.hilfe-liste{
gap: 12px;
}
.hilfe-liste article{
padding: 25px 27px;
border: 1px solid #e0e7ed;
border-radius: 16px;
background: #f8fafc;
transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.hilfe-liste article:first-child{
padding-top: 25px;
}
.hilfe-liste article:hover{
border-color: #c5ded9;
background: #ffffff;
transform: translateX(4px);
}
.hilfe-liste article > span{
color: #08735f;
border-color: #bedfd7;
background: #e7faf5;
}
.hilfe-liste p{
color: #697b89;
}
.faq-sektion{
padding: 128px 0;
background:
radial-gradient(circle at 92% 10%, rgba(54, 223, 184, 0.055), transparent 26%),
var(--flaeche);
}
.faq-raster,
.faq-einleitung,
.faq-liste{
min-width: 0;
}
.faq-einleitung h2{
hyphens: auto;
overflow-wrap: anywhere;
}
.faq-liste{
display: grid;
gap: 10px;
border-top: 0;
}
.faq-liste details{
overflow: hidden;
border: 1px solid #dfe7ed;
border-radius: 15px;
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 7px 22px rgba(27, 52, 71, 0.035);
}
.faq-liste details[open]{
border-color: #c4ddd8;
box-shadow: 0 12px 30px rgba(24, 64, 75, 0.07);
}
.faq-liste summary{
padding: 21px 22px;
font-size: 0.99rem;
}
.faq-liste summary:hover{
color: #08735f;
}
.faq-liste summary span{
border-color: #c8d7db;
background: #f7fafb;
}
.faq-liste details > div{
padding: 0 62px 22px 22px;
}
.faq-liste details p{
color: #657887;
}
.abschluss-sektion{
padding: 96px 0;

}
.abschluss-inhalt{
position: relative;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.09);
border-radius: 27px;
background:
radial-gradient(circle at 85% 10%, rgba(54, 223, 184, 0.23), transparent 28%),
radial-gradient(circle at 15% 120%, rgba(63, 123, 232, 0.15), transparent 35%),
linear-gradient(127deg, #07111f, #0b2235 58%, #0c3040);
box-shadow: 0 28px 74px rgba(5, 25, 40, 0.2);
}
.abschluss-inhalt::after{
position: absolute;
top: -80px;
right: 18%;
width: 210px;
height: 210px;
border: 1px solid rgba(101, 216, 239, 0.15);
border-radius: 50%;
content: "";
}
.heller-knopf{
color: #05261f;
background: linear-gradient(120deg, #43e2bb, #66d8ee);
}
.fussbereich{
padding-top: 72px;
color: #8298a5;

}
.fuss-inhalt{
border-bottom-color: rgba(255, 255, 255, 0.085);
}
.fuss-marke p{
color: #8196a2;
}
.fuss-inhalt nav a{
color: #9fb1bb;
transition: color 0.18s ease, transform 0.18s ease;
}
.fuss-inhalt nav a:hover{
color: #ffffff;
transform: translateY(-1px);
}
.rechtsseite,
.fehlerseite{
background: var(--flaeche);
}
.rechtsseite .seitenkopf,
.fehlerseite .seitenkopf{
background:
radial-gradient(circle at 80% 0, rgba(54, 223, 184, 0.11), transparent 29%),
linear-gradient(135deg, #07111f, #0b2637);
}
.recht-main,
.datenquellen-main{
padding-top: 94px;
padding-bottom: 124px;
}
.recht-seitennavi{
top: 28px;
border-color: #dce5ec;
border-radius: 14px;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 10px 30px rgba(25, 49, 67, 0.05);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.recht-seitennavi a[aria-current="page"]{
color: #08705e;
background: #e3faf4;
}
.recht-raster,
.recht-raster > *,
.recht-inhalt,
.quellen-karte{
min-width: 0;
}
.recht-inhalt,
.quellen-karte{
border-color: #dfe7ed;
background: rgba(255, 255, 255, 0.97);
box-shadow: 0 18px 48px rgba(25, 49, 67, 0.07);
}
.recht-inhalt{
border-radius: 26px;
}
.recht-inhalt h1,
.datenquellen-kopf h1{
color: #111c2d;
font-size: clamp(2.75rem, 5.5vw, 4.75rem);
hyphens: auto;
overflow-wrap: anywhere;
}
.recht-inhalt p,
.datenquellen-kopf p,
.quellen-karte p{
color: #5d7180;
}
.datenquellen-kopf{
max-width: 830px;
}
.quellen-raster{
gap: 18px;
}
.quellen-karte{
border-radius: 20px;
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.quellen-karte:hover{
border-color: #c7ddd8;
box-shadow: 0 22px 55px rgba(22, 58, 73, 0.1);
transform: translateY(-3px);
}
.quellen-kopfzeile{
flex-wrap: wrap;
}
.quellen-kopfzeile h2{
min-width: 0;
letter-spacing: -0.035em;
overflow-wrap: anywhere;
}
.quellen-status{
max-width: 100%;
color: #08705e;
background: #e3faf4;
white-space: normal;
}
.quellen-details > div{
padding: 13px 14px;
border: 1px solid #e1e8ed;
border-radius: 12px;
background: #f8fafc;
}
.quellen-hinweis{
border-color: #cce1dc;
background: #edf9f6;
}
.fehlerseite main{
min-height: calc(100vh - 260px);
}
.fehlercode{
color: #08705e;
text-shadow: 0 12px 35px rgba(54, 223, 184, 0.12);
}
@keyframes hero-rasterfahrt{
from{ transform: translate3d(-2%, -2%, 0); }
to{ transform: translate3d(70px, 70px, 0); }
}
@keyframes hero-ring{
0%{ transform: translate3d(0, 0, 0) rotate(-9deg) scale(0.97); opacity: 0.62; }
100%{ transform: translate3d(-35px, -26px, 0) rotate(-4deg) scale(1.04); opacity: 1; }
}
@keyframes hero-bild-schweben{
0%,
100%{ transform: translate3d(0, 0, 0); }
50%{ transform: translate3d(0, -6px, 0); }
}
@keyframes ergebnis-schweben{
0%,
100%{ transform: translate3d(0, 0, 0); }
50%{ transform: translate3d(0, -4px, 0); }
}
@keyframes live-puls{
0%,
100%{ opacity: 0.55; transform: scale(0.88); }
50%{ opacity: 1; transform: scale(1.08); }
}
@keyframes provider-drift-a{
0%,
100%{ transform: translate3d(0, 0, 0) rotate(-1deg); }
40%{ transform: translate3d(18px, -15px, 0) rotate(1deg); }
72%{ transform: translate3d(-7px, 9px, 0) rotate(0deg); }
}
@keyframes provider-drift-b{
0%,
100%{ transform: translate3d(0, 0, 0) rotate(1deg); }
45%{ transform: translate3d(-17px, 13px, 0) rotate(-1deg); }
75%{ transform: translate3d(8px, -9px, 0) rotate(0.5deg); }
}
@keyframes provider-drift-c{
0%,
100%{ transform: translate3d(0, 0, 0) scale(0.98); }
38%{ transform: translate3d(10px, 18px, 0) scale(1.02); }
76%{ transform: translate3d(-11px, -7px, 0) scale(1); }
}
@keyframes netz-signal{
0%{ transform: translateX(0); opacity: 0; }
15%{ opacity: 0.8; }
75%{ opacity: 0.7; }
100%{ transform: translateX(600%); opacity: 0; }
}
@keyframes punkt-puls-neu{
0%,
100%{ opacity: 0.36; box-shadow: 0 0 0 7px rgba(54, 223, 184, 0.035), 0 0 20px rgba(54, 223, 184, 0.28); }
50%{ opacity: 1; box-shadow: 0 0 0 11px rgba(54, 223, 184, 0.065), 0 0 34px rgba(54, 223, 184, 0.58); }
}
@keyframes punkt-schweben{
0%,
100%{ translate: 0 0; }
50%{ translate: 4px -8px; }
}
.hero:not(.hero-ist-sichtbar)::before,
.hero:not(.hero-ist-sichtbar)::after,
.hero:not(.hero-ist-sichtbar) .provider-marke,
.hero:not(.hero-ist-sichtbar) .netz-linie::after,
.hero:not(.hero-ist-sichtbar) .netz-punkt,
.hero:not(.hero-ist-sichtbar) .hero-bild,
.hero:not(.hero-ist-sichtbar) .ergebnis-karte,
.hero:not(.hero-ist-sichtbar) .live-indikator i{
animation-play-state: paused;
}
@media (max-width: 1120px){
.ablauf-raster{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ablauf-raster article{
min-height: 245px;
}
}
@media (max-width: 1060px){
.hero{
padding-top: 132px;
}
.hero-inhalt{
grid-template-columns: minmax(0, 1fr);
max-width: 860px;
gap: 40px;
}
.hero-links{
display: contents;
}
.hero-text{
order: 1;
max-width: 710px;
}
.ergebnis-karte{
order: 2;
animation: none;
}
.hero-bild{
order: 3;
max-width: none;
animation: none;
}
.startseite .hero-share-startseite{
order: 5;
}
.provider-slot-5,
.provider-slot-6,
.provider-slot-7{
display: none;
}
.provider-marke--logo{
opacity: 0.72;
}
.provider-marke--text{
opacity: 0.68;
}
.browser-raster{
grid-template-columns: 1fr;
}
}
@media (max-width: 760px){
:root{
--rahmen: min(100% - 30px, 1240px);
}
body{
font-size: 16px;
}
.kopf-inhalt{
min-height: 78px;
}
.wortmarke{
padding-left: 0;
}
.wortmarke{
--wortmarke-breite: min(62vw, 300px);
--wortmarke-einzug: clamp(40px, 10vw, 56px);
}
.wortmarke .wortmarke-bild{
width: var(--wortmarke-breite);
}
.wortmarke .wortmarke-claim{
font-size: 0.56rem;
}
.hero{
padding: 116px 0 82px;
}
.hero h1{
font-size: clamp(2.7rem, 13vw, 4.25rem);
}
.hero-text > p{
font-size: 1rem;
}
.hero::before{
opacity: 0.5;
}
.ergebnis-karte{
padding: 25px 20px;
border-radius: 23px;
}
.ergebnis-kopf h2{
font-size: clamp(1.9rem, 10vw, 2.65rem);
}
.vergleich-sektion{
margin-top: -34px;
padding-bottom: 82px;
}
.vergleich-raster{
border-radius: 21px;
}
.ablauf-sektion,
.browser-sektion,
.hilfe-sektion,
.faq-sektion{
padding-top: 88px;
padding-bottom: 88px;
}
.browser-karten > div{
padding: 16px;
}
.ablauf-raster{
grid-template-columns: 1fr;
}
.ablauf-raster article{
min-height: 0;
}
.ablauf-nummer{
margin-bottom: 30px;
}
.hilfe-liste article{
padding: 22px;
}
.faq-liste summary{
padding: 19px 18px;
}
.faq-liste details > div{
padding: 0 50px 20px 18px;
}
.abschluss-sektion{
padding: 74px 0;
}
.abschluss-inhalt{
border-radius: 22px;
}
.recht-seitennavi{
flex-wrap: wrap;
}
.recht-inhalt{
padding-inline: 21px;
}
.recht-inhalt h1{
font-size: clamp(2.15rem, 12vw, 3.1rem);
}
.quellen-kopfzeile{
align-items: flex-start;
}
}
@media (max-width: 540px){
.wortmarke{
--wortmarke-breite: min(62vw, 260px);
--wortmarke-einzug: clamp(34px, 10vw, 48px);
gap: 0;
}
.wortmarke .wortmarke-bild{
width: var(--wortmarke-breite);
}
.wortmarke .wortmarke-claim{
max-width: 250px;
overflow: hidden;
font-size: 0.52rem;
text-overflow: ellipsis;
}
.hero-merkmale span{
padding-left: 29px;
}
.ergebnis-kopf{
gap: 14px;
}
.vertrauensanzeige{
flex-basis: 70px;
width: 70px;
height: 70px;
}
.ergebnis-details,
.diagnose-raster,
.browser-karten{
grid-template-columns: 1fr;
}
.diagnose-karte{
min-height: 0;
}
.sicherheitszeile{
gap: 10px;
}
.status-plakette{
align-self: flex-start;
}
.ip-mit-kopieren{
align-items: flex-start;
flex-direction: column;
}
.kopieren-knopf{
align-self: flex-start;
}
}
@media (max-width: 360px){
.wortmarke .wortmarke-claim{
display: none;
}
.wortmarke{
--wortmarke-breite: min(60vw, 210px);
}
.wortmarke .wortmarke-bild{
width: var(--wortmarke-breite);
}
}
@media (prefers-reduced-motion: reduce){
.hero::before,
.hero::after,
.provider-marke,
.netz-linie::after,
.netz-punkt,
.hero-bild,
.ergebnis-karte,
.live-indikator i{
animation: none !important;
}
.ablauf-raster article:hover,
.hilfe-liste article:hover,
.quellen-karte:hover{
transform: none;
}
}
.kopier-hilfsfeld{
position: fixed;
top: -9999px;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
opacity: 0;
pointer-events: none;
}
@media print{
.provider-himmel{
display: none !important;
}
}
.ratgeber-teaser-raster{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.ratgeber-teaser-raster article{ position:relative; min-width:0; padding:24px; border:1px solid #dce8e6; border-radius:18px; background:linear-gradient(150deg,#fff,#f5faf9); transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.ratgeber-teaser-raster article:hover{ border-color:#b9ddd4; box-shadow:0 17px 42px rgba(18,50,61,.08); transform:translateY(-3px); }
.ratgeber-teaser-raster article > span{ display:block; margin-bottom:12px; color:var(--mint-dunkel); font-size:.7rem; font-weight:820; letter-spacing:.08em; text-transform:uppercase; }
.ratgeber-teaser-raster h3{ margin:0 0 10px; font-size:1.24rem; }
.ratgeber-teaser-raster h3 a{ color:inherit; text-decoration:none; }
.ratgeber-teaser-raster p{ margin-bottom:17px; color:#627780; font-size:.91rem; }
.ratgeber-mehr{ color:var(--mint-dunkel); font-size:.85rem; font-weight:790; }
.ratgeber-teaser-sektion{ padding:104px 0; background:radial-gradient(circle at 90% 10%,rgba(54,223,184,.08),transparent 26%),#eef5f3; }
.ratgeber-teaser-kopf{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(300px,.6fr); gap:clamp(36px,7vw,90px); align-items:end; margin-bottom:38px; }
.ratgeber-teaser-kopf h2{ margin-bottom:0; }
.ratgeber-teaser-kopf > p{ margin:0; color:#627780; }
.ratgeber-teaser-raster{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.ratgeber-teaser-raster article:first-child{ grid-column:span 2; }
@media (max-width:1100px){
.ratgeber-teaser-raster{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.ratgeber-teaser-raster article:first-child{ grid-column:auto; }
}
@media (max-width:760px){
.ratgeber-teaser-raster,
.ratgeber-teaser-kopf{ grid-template-columns:1fr; }
.ratgeber-teaser-sektion{ padding:78px 0; }
}
@media (max-width:420px){
.ratgeber-teaser-raster article{ padding:20px; }
}
@media (prefers-reduced-motion:reduce){
.ratgeber-teaser-raster article{ transition:none; }
.ratgeber-teaser-raster article:hover{ transform:none; }
}
@media print{
.ratgeber-teaser-sektion{ display:none!important; }
}
:root{








--v16-sky-50: #f5faff;

--mint: #1bc9e8;
--mint-dunkel: #087ba9;

--flaeche: #f4f8ff;
--leise: #5c718d;
}
body{
color: #102442;
background: var(--v16-sky-50);
}
.seitenkopf{
border-bottom-color: rgba(159, 217, 255, 0.17);
background: rgba(4, 17, 45, 0.82);
box-shadow: 0 12px 40px rgba(2, 18, 54, 0.14);
}
.hauptnavigation a{
color: rgba(239, 249, 255, 0.82);
}
.hauptnavigation a:hover,
.hauptnavigation a:focus-visible{
color: #ffffff;
background: rgba(94, 213, 255, 0.14);
}
.hero{
color: rgba(244, 251, 255, 0.86);
background:
radial-gradient(circle at 83% 16%, rgba(104, 230, 255, 0.34), transparent 28%),
radial-gradient(circle at 7% 80%, rgba(28, 160, 255, 0.31), transparent 31%),
radial-gradient(circle at 48% 104%, rgba(17, 201, 236, 0.18), transparent 39%),
linear-gradient(132deg, #061a43 0%, #0a3fa8 44%, #0879dc 76%, #0aa6d5 100%);
}
.hero::before{
opacity: 0.73;
background-image:
linear-gradient(rgba(188, 229, 255, 0.075) 1px, transparent 1px),
linear-gradient(90deg, rgba(188, 229, 255, 0.075) 1px, transparent 1px);
}
.hero::after{
border-color: rgba(125, 231, 255, 0.38);
box-shadow: 0 0 100px rgba(28, 198, 240, 0.12);
}
.hero h1,
.hero h1 > span{
color: #ffffff;
text-shadow: 0 10px 35px rgba(1, 18, 58, 0.34);
}
.hero h1 em,
.hero .ueberzeile{
color: #70e7f8;
}
.hero-text > p{
color: rgba(239, 249, 255, 0.82);
}
.hero-merkmale span{
border-color: rgba(215, 245, 255, 0.28);
color: rgba(247, 252, 255, 0.92);
background: rgba(4, 43, 111, 0.28);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.08), 0 12px 28px rgba(1, 29, 86, 0.13);
}
.netz-linie{
opacity: 0.92;
background: linear-gradient(90deg, transparent, rgba(116, 233, 255, 0.55), rgba(82, 192, 255, 0.38), transparent);
}
.netz-linie::after{
background: #b8f6ff;
box-shadow: 0 0 16px #54dcf5, 0 0 34px rgba(76, 213, 255, 0.7);
}
.netz-punkt{
border-color: rgba(206, 249, 255, 0.78);
background: #57def4;
box-shadow: 0 0 0 6px rgba(91, 225, 247, 0.12), 0 0 27px rgba(88, 231, 255, 0.72);
}
.provider-himmel{
opacity: 0.94;
-webkit-mask-image: linear-gradient(to bottom, transparent 1%, #000 8%, #000 92%, transparent 99%);
mask-image: linear-gradient(to bottom, transparent 1%, #000 8%, #000 92%, transparent 99%);
}
.provider-marke{
border: 1px solid rgba(255, 255, 255, 0.68);
border-radius: 17px;
box-shadow: 0 18px 45px rgba(2, 34, 104, 0.22), inset 0 1px rgba(255, 255, 255, 0.86);
}
.provider-marke--logo{
opacity: 0.82;
background: rgba(255, 255, 255, 0.88);
}
.provider-marke--logo img{
opacity: 1;
filter: drop-shadow(0 4px 8px rgba(7, 30, 74, 0.13));
}
.provider-marke--text{
opacity: 0.84;
border-color: rgba(255, 255, 255, 0.58);
color: #0b347f;
background: rgba(243, 251, 255, 0.88);
text-shadow: none;
}
.hero-bild{
border-color: rgba(222, 247, 255, 0.5);
box-shadow: 0 28px 72px rgba(1, 31, 91, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.ergebnis-karte{
border-color: rgba(119, 181, 232, 0.34);
background:
radial-gradient(circle at 100% 0, rgba(35, 201, 235, 0.09), transparent 29%),
linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(247, 252, 255, 0.99));
box-shadow: 0 32px 85px rgba(3, 35, 92, 0.29), 0 1px 0 rgba(255, 255, 255, 0.9) inset;
}
.ergebnis-karte::before{
background: linear-gradient(90deg, #17d2e8, #0b78e3 62%, #5277ef);
}
.live-indikator i{
background: #19d4e9;
box-shadow: 0 0 0 7px rgba(25, 212, 233, 0.11), 0 0 22px rgba(25, 212, 233, 0.36);
}
.diagnose-karte{
border-color: rgba(92, 157, 211, 0.23);
background: rgba(239, 248, 255, 0.76);
}
.kopieren-knopf,
.feedback-knopf,
.feedback-absenden{
border-color: transparent;
color: #ffffff;
background: linear-gradient(135deg, #0b69df, #0aa9d8);
box-shadow: 0 10px 23px rgba(9, 107, 215, 0.2);
}
.kopieren-knopf:hover,
.feedback-knopf:hover,
.feedback-absenden:hover{
filter: brightness(1.06);
transform: translateY(-1px);
}
.vergleich-sektion,
.hilfe-sektion,
.faq-sektion,
.rechtsseite{
background: #f4f8ff;
}
.ablauf-sektion{
background: linear-gradient(180deg, #eaf5ff, #f5faff);
}
.browser-sektion{
background:
radial-gradient(circle at 82% 12%, rgba(81, 224, 249, 0.2), transparent 28%),
linear-gradient(135deg, #071d49, #0a4ebc 62%, #0785d1);
}
.browser-sektion .browser-karte,
.browser-sektion .browser-fakt{
border-color: rgba(196, 238, 255, 0.22);
background: rgba(4, 32, 83, 0.42);
box-shadow: 0 18px 44px rgba(0, 20, 64, 0.16);
}
.vergleich-raster,
.ablauf-raster article,
.hilfe-liste article,
.faq-liste details,
.quellen-karte{
border-color: rgba(82, 145, 203, 0.2);
background: rgba(255, 255, 255, 0.94);
box-shadow: 0 20px 54px rgba(16, 70, 133, 0.09);
}
.abschluss-sektion{
background: linear-gradient(125deg, #0a3ca6, #0879df 62%, #10b4d9);
}
.fussbereich{
background:
radial-gradient(circle at 82% 0, rgba(36, 199, 232, 0.12), transparent 27%),
#04112d;
}
.erkennungs-feedback{
margin-top: 24px;
padding: 21px;
border: 1px solid rgba(49, 139, 212, 0.24);
border-radius: 18px;
background:
radial-gradient(circle at 100% 0, rgba(34, 206, 235, 0.11), transparent 37%),
linear-gradient(135deg, rgba(237, 248, 255, 0.98), rgba(255, 255, 255, 0.98));
box-shadow: 0 16px 42px rgba(20, 82, 146, 0.08);
}
.feedback-kopf{
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
}
.feedback-ueberzeile{
display: block;
margin-bottom: 4px;
color: #0b74bd;
font-size: 0.67rem;
font-weight: 830;
letter-spacing: 0.09em;
text-transform: uppercase;
}
.erkennungs-feedback h3{
margin: 0;
color: #0b294f;
font-size: 1.15rem;
}
.feedback-schnellwahl,
.feedback-aktionen{
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.feedback-knopf,
.feedback-absenden,
.feedback-abbrechen{
min-height: 40px;
padding: 8px 15px;
border: 1px solid transparent;
border-radius: 11px;
font: inherit;
font-size: 0.84rem;
font-weight: 780;
cursor: pointer;
transition: transform 0.18s ease, filter 0.18s ease, opacity 0.18s ease;
}
.feedback-nein,
.feedback-abbrechen{
border-color: rgba(42, 115, 178, 0.22);
color: #174b7f;
background: rgba(255, 255, 255, 0.78);
box-shadow: none;
}
.feedback-nein[aria-expanded="true"]{
border-color: rgba(11, 105, 223, 0.46);
background: rgba(225, 243, 255, 0.92);
}
.feedback-einleitung,
.feedback-datenschutz,
.feedback-status,
.feedback-noscript{
color: #60758f;
font-size: 0.82rem;
line-height: 1.55;
}
.feedback-einleitung{
margin: 12px 0 0;
}
.feedback-noscript{
margin: 12px 0 0;
}
.feedback-datenschutz a{
font-weight: 750;
}
.feedback-formular{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 13px 15px;
margin-top: 17px;
padding-top: 17px;
border-top: 1px solid rgba(66, 135, 190, 0.18);
}
.feedback-formular[hidden]{
display: none;
}
.feedback-feld{
display: grid;
gap: 7px;
}
.feedback-feld label{
color: #183c67;
font-size: 0.78rem;
font-weight: 750;
}
.feedback-feld select{
min-width: 0;
min-height: 44px;
padding: 8px 36px 8px 11px;
border: 1px solid rgba(58, 128, 188, 0.31);
border-radius: 11px;
color: #12345d;
background-color: #ffffff;
font: inherit;
font-size: 0.84rem;
}
.feedback-aktionen{
grid-column: 1 / -1;
margin-top: 2px;
}
.feedback-datenschutz{
margin: 13px 0 0;
}
.feedback-status{
min-height: 1.3em;
margin: 9px 0 0;
font-weight: 700;
}
.feedback-status[data-status-kind="success"]{
color: #087858;
}
.feedback-status[data-status-kind="error"]{
color: #a13b37;
}
.feedback-laedt{
opacity: 0.78;
}
.feedback-erledigt .feedback-schnellwahl,
.feedback-erledigt .feedback-einleitung,
.feedback-erledigt .feedback-datenschutz{
display: none;
}
.erkennungs-feedback button:disabled,
.erkennungs-feedback select:disabled{
cursor: not-allowed;
opacity: 0.55;
}
.erkennungs-feedback :focus-visible{
outline: 3px solid rgba(16, 156, 226, 0.35);
outline-offset: 3px;
}
@media (max-width: 760px){
.provider-himmel{
display: none;
}
.feedback-kopf{
align-items: flex-start;
flex-direction: column;
}
.feedback-formular{
grid-template-columns: 1fr;
}
.feedback-schnellwahl,
.feedback-knopf{
width: 100%;
}
.feedback-knopf{
flex: 1 1 0;
}
}
@media (prefers-reduced-motion: reduce){
.feedback-knopf,
.feedback-absenden,
.feedback-abbrechen{
transition: none;
}
}
@media print{
.provider-himmel,
.erkennungs-feedback{
display: none !important;
}
body,
.rechtsseite{
color: #000;
background: #fff;
}
}
.tarif-teaser{
width: 100%;
padding: 24px;
border: 1px solid rgba(218, 246, 255, 0.26);
border-radius: 24px;
background:
radial-gradient(circle at 100% 0, rgba(117, 232, 255, 0.14), transparent 36%),
rgba(4, 35, 91, 0.38);
box-shadow: 0 24px 62px rgba(1, 27, 83, 0.2), inset 0 1px rgba(255, 255, 255, 0.1);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
.tarif-teaser-einleitung{
max-width: 620px;
margin-bottom: 18px;
}
.tarif-teaser-kicker{
display: block;
margin-bottom: 7px;
color: #79eaf9;
font-size: 0.68rem;
font-weight: 850;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.tarif-teaser h2{
margin: 0 0 8px;
color: #ffffff;
font-size: clamp(1.25rem, 2vw, 1.62rem);
letter-spacing: -0.035em;
}
.tarif-teaser-einleitung p{
margin: 0;
color: rgba(239, 249, 255, 0.88);
font-size: 0.9rem;
line-height: 1.55;
}
.tarif-teaser-raster{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.tarif-teaser-karte{
position: relative;
display: flex;
min-width: 0;
min-height: 258px;
flex-direction: column;
padding: 20px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 18px;
color: #ffffff;
text-decoration: none;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.13), 0 16px 35px rgba(1, 25, 73, 0.16);
transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.tarif-teaser-karte::before{
position: absolute;
top: -60px;
right: -52px;
width: 150px;
height: 150px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
content: "";
}
.tarif-teaser-festnetz{
background: linear-gradient(145deg, #094ab9, #06638b);
}
.tarif-teaser-mobilfunk{
background: linear-gradient(145deg, #1c3297, #3e3ea5);
}
.tarif-teaser-karte:hover{
border-color: rgba(255, 255, 255, 0.64);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.17), 0 22px 48px rgba(1, 24, 74, 0.26);
transform: translateY(-3px);
}
.tarif-teaser-karte:focus-visible{
outline: 3px solid #ffffff;
outline-offset: 4px;
}
.tarif-teaser-kategorie{
position: relative;
z-index: 1;
display: block;
margin-bottom: 13px;
color: rgba(255, 255, 255, 0.86);
font-size: 0.66rem;
font-weight: 850;
letter-spacing: 0.09em;
text-transform: uppercase;
}
.tarif-teaser-karte > strong{
position: relative;
z-index: 1;
display: flex;
align-items: baseline;
gap: 7px;
margin-bottom: 14px;
color: #ffffff;
font-size: 0.86rem;
font-weight: 760;
}
.tarif-teaser-karte > strong b{
font-family: var(--schrift-zahlen);
font-size: clamp(2rem, 4.2vw, 3.1rem);
font-weight: 860;
line-height: 0.95;
letter-spacing: -0.055em;
}
.tarif-teaser-karte h3{
position: relative;
z-index: 1;
margin: 0 0 8px;
color: #ffffff;
font-size: 1.05rem;
line-height: 1.24;
letter-spacing: -0.025em;
}
.tarif-teaser-karte p{
position: relative;
z-index: 1;
margin: 0 0 18px;
color: rgba(255, 255, 255, 0.88);
font-size: 0.8rem;
line-height: 1.5;
}
.tarif-teaser-aktion{
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: auto;
padding-top: 13px;
border-top: 1px solid rgba(255, 255, 255, 0.25);
color: #ffffff;
font-size: 0.8rem;
font-weight: 820;
}
.tarif-teaser > small{
display: block;
margin-top: 12px;
color: rgba(231, 246, 255, 0.8);
font-size: 0.68rem;
line-height: 1.45;
}
.ergebnis-aufklapper{
overflow: hidden;
margin-top: 9px;
border: 1px solid rgba(73, 143, 198, 0.2);
border-radius: 13px;
background: rgba(245, 250, 253, 0.86);
}
.ergebnis-aufklapper summary{
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 13px 15px;
color: #263e59;
cursor: pointer;
font-size: 0.82rem;
font-weight: 780;
line-height: 1.4;
list-style: none;
}
.ergebnis-aufklapper summary::-webkit-details-marker{
display: none;
}
.ergebnis-aufklapper summary:hover{
background: rgba(228, 243, 252, 0.72);
}
.ergebnis-aufklapper summary:focus-visible{
outline: 3px solid rgba(11, 105, 223, 0.42);
outline-offset: -3px;
}
.ergebnis-aufklapper-symbol{
position: relative;
flex: 0 0 22px;
width: 22px;
height: 22px;
border-radius: 50%;
background: rgba(11, 105, 223, 0.09);
}
.ergebnis-aufklapper-symbol::before,
.ergebnis-aufklapper-symbol::after{
position: absolute;
top: 10px;
left: 5px;
width: 12px;
height: 2px;
border-radius: 2px;
background: #0b69df;
content: "";
}
.ergebnis-aufklapper-symbol::after{
transform: rotate(90deg);
transition: transform 0.18s ease;
}
.ergebnis-aufklapper[open] .ergebnis-aufklapper-symbol::after{
transform: rotate(0);
}
.ergebnis-aufklapper-inhalt{
padding: 14px 15px 16px;
border-top: 1px solid rgba(73, 143, 198, 0.16);
color: #526a82;
font-size: 0.78rem;
line-height: 1.55;
}
.ergebnis-aufklapper-inhalt p{
margin: 0;
}
.ergebnis-aufklapper .sicherheitszeile{
gap: 12px;
margin: 0;
}
.ergebnis-aufklapper .sicherheitszeile strong{
font-size: 0.82rem;
}
.ergebnis-aufklapper .sicherheitszeile > div > span{
font-size: 0.76rem;
}
.alternativen-aufklapper{
border-left: 3px solid #347f73;
background: linear-gradient(135deg, rgba(240, 249, 247, 0.94), rgba(249, 252, 252, 0.94));
}
.hero-share{
display: flex;
width: 100%;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
grid-column: 1 / -1;
margin-top: 12px;
}
.startseite .hero-share-startseite{
align-self: end;
margin-top: 8px;
}
.hero-share-link{
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: 1px solid rgba(255, 255, 255, 0.72);
border-radius: 999px;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 8px 22px rgba(0, 17, 68, 0.18), inset 0 1px rgba(255, 255, 255, 0.86);
transition: transform 0.16s ease, background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.hero-share-link:hover{
transform: translateY(-1px);
background: #ffffff;
border-color: #ffffff;
box-shadow: 0 11px 26px rgba(0, 17, 68, 0.24);
}
.hero-share-link:focus-visible{
outline: 3px solid #ffffff;
outline-offset: 4px;
}
.hero-share-link img{
display: block;
width: 24px;
height: 24px;
}
@media (max-width: 1060px){
.tarif-teaser{
order: 4;
}
}
@media (max-width: 1100px){
.hero-share{
margin-top: 6px;
}
}
@media (max-width: 760px){
.tarif-teaser{
padding: 20px;
border-radius: 20px;
}
.tarif-teaser-raster{
grid-template-columns: 1fr;
}
.tarif-teaser-karte{
min-height: 0;
}
.ergebnis-aufklapper summary{
align-items: flex-start;
}
.hero-share{
gap: 10px;
}
.hero-share-link{
width: 42px;
height: 42px;
}
}
@media (max-width: 420px){
.tarif-teaser{
margin-inline: -5px;
width: calc(100% + 10px);
padding: 18px;
}
.tarif-teaser-karte{
padding: 18px;
}
}
@media (prefers-reduced-motion: reduce){
.tarif-teaser-karte,
.ergebnis-aufklapper-symbol::after{
transition: none;
}
.tarif-teaser-karte:hover{
transform: none;
}
}
@media print{
.tarif-teaser{
display: none !important;
}
.ergebnis-aufklapper:not([open]) > .ergebnis-aufklapper-inhalt{
display: block;
}
}


.fuss-hinweislink{
  color: inherit;
  font-size: inherit;
  font-weight: 600;
}

.fuss-hinweislink:hover{
  color: inherit;
}

.nutzungs-infografik-hinweis{
  margin: 12px 0 0;
  color: #3f5670;
  font-size: 0.95rem;
}