.ratgeberseite{ --rahmen: min(1340px, calc(100% - 40px)); background: var(--flaeche); }
.ratgeberseite .seitenkopf{
position: relative;
background: radial-gradient(circle at 82% 0, rgba(54,223,184,.12), transparent 30%), linear-gradient(135deg,#07111f,#0b2637);
}
.ratgeber-main{
overflow: hidden;
padding: 30px 0 124px;
background: radial-gradient(circle at 8% 8%, rgba(54,223,184,.07), transparent 22%), linear-gradient(180deg,#edf5f4 0,var(--flaeche) 420px,var(--flaeche) 100%);
}
.brotkrumen{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 24px; color:#71858e; font-size:.82rem; font-weight:650; }
.brotkrumen a{ color:#49646f; text-decoration:none; }
.brotkrumen a:hover{ color:var(--mint-dunkel); text-decoration:underline; }
.ratgeber-hero{
position:relative; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr); gap:clamp(34px,5vw,72px); align-items:center;
overflow:hidden; padding:clamp(38px,5vw,68px); border:1px solid rgba(255,255,255,.11); border-radius:34px; 

box-shadow:0 34px 92px rgba(8,30,42,.2);
}
.ratgeber-hero::before{ position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:64px 64px; content:""; mask-image:linear-gradient(135deg,#000,transparent 78%); pointer-events:none; }
.ratgeber-hero > *{ position:relative; z-index:1; }
.ratgeber-hero h1{ max-width:900px; margin:0 0 22px; color:#fff; font-size:clamp(2.15rem,3.65vw,3.45rem); overflow-wrap:anywhere; text-wrap:balance; }
.ratgeber-einleitung{ max-width:790px; margin-bottom:28px; color:rgba(235,246,250,.76); font-size:clamp(1.05rem,1.5vw,1.22rem); line-height:1.7; }
.ratgeber-aktionen{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.ratgeber-hero .sekundaer-knopf{ border-color:rgba(255,255,255,.2); color:#e9f7f8; background:rgba(255,255,255,.065); }
.ratgeber-hero .sekundaer-knopf:hover{ border-color:rgba(255,255,255,.32); color:#fff; background:rgba(255,255,255,.11); }
.ratgeber-stand{ margin:23px 0 0; color:rgba(217,235,240,.48); font-size:.76rem; font-weight:650; }
.ratgeber-kurzantwort,
.ratgeber-livekarte{ min-width:0; padding:28px; border:1px solid rgba(255,255,255,.16); border-radius:24px; background:rgba(255,255,255,.085); box-shadow:inset 0 1px rgba(255,255,255,.08),0 24px 65px rgba(0,10,20,.17); backdrop-filter:blur(12px); }
.ratgeber-kurzantwort > span,
.ratgeber-livekarte > span{ display:block; margin-bottom:11px; color:var(--mint); font-size:.72rem; font-weight:820; letter-spacing:.1em; text-transform:uppercase; }
.ratgeber-kurzantwort p,
.ratgeber-livekarte p{ margin-bottom:18px; color:rgba(242,249,251,.84); }
.ratgeber-kurzantwort a,
.ratgeber-livekarte a{ color:#fff; font-size:.9rem; font-weight:780; }
.ratgeber-livekarte > strong{ display:block; margin-bottom:20px; color:#fff; font-family:var(--schrift-zahlen); font-size:clamp(2.1rem,4vw,3.4rem); letter-spacing:-.045em; }
.ratgeber-livekarte dl{ display:grid; gap:10px; margin:0 0 20px; }
.ratgeber-livekarte dl div{ display:grid; grid-template-columns:110px minmax(0,1fr); gap:14px; padding-top:10px; border-top:1px solid rgba(255,255,255,.1); }
.ratgeber-livekarte dt{ color:rgba(227,241,245,.52); font-size:.75rem; font-weight:700; }
.ratgeber-livekarte dd{ min-width:0; margin:0; color:#fff; font-size:.86rem; font-weight:690; overflow-wrap:anywhere; }
.ratgeber-livekarte code{ color:inherit; }
.ratgeber-layout{ display:grid; grid-template-columns:minmax(190px,230px) minmax(0,960px); justify-content:center; gap:clamp(34px,4vw,56px); align-items:start; margin-top:64px; }
.ratgeber-navigation{ position:sticky; top:22px; }
.ratgeber-navigation nav{ display:grid; gap:4px; padding:20px; border:1px solid #dce8e6; border-radius:18px; background:rgba(255,255,255,.82); box-shadow:0 16px 45px rgba(19,48,59,.06); backdrop-filter:blur(10px); }
.ratgeber-navigation strong{ margin-bottom:8px; color:var(--tinte); font-size:.8rem; letter-spacing:.03em; text-transform:uppercase; }
.ratgeber-navigation a{ padding:8px 9px; border-radius:9px; color:#536b75; font-size:.82rem; font-weight:650; line-height:1.35; text-decoration:none; }
.ratgeber-navigation a:hover{ color:var(--mint-dunkel); background:var(--mint-hell); }
.ratgeber-artikel{ min-width:0; padding:clamp(30px,5vw,58px); border:1px solid #e0eae8; border-radius:30px; background:#fff; box-shadow:0 25px 75px rgba(15,42,53,.08); }
.ratgeber-artikel section{ scroll-margin-top:24px; }
.ratgeber-artikel section + section{ margin-top:64px; padding-top:58px; border-top:1px solid #e4ecea; }
.ratgeber-artikel h2{ margin-bottom:22px; font-size:clamp(1.75rem,3vw,2.55rem); text-wrap:balance; }
.ratgeber-artikel h3{ margin:30px 0 11px; color:#203b47; font-size:clamp(1.2rem,2vw,1.48rem); }
.ratgeber-artikel p{ max-width:86ch; margin-bottom:20px; }
.ratgeber-artikel p:last-child{ margin-bottom:0; }
.ratgeber-artikel > section > p,
.ratgeber-artikel > section > .ratgeber-liste li,
.ratgeber-artikel > section > .ratgeber-nummernliste li,
.ratgeber-artikel > section > .ratgeber-definitionen dd,
.ratgeber-artikel .ratgeber-hinweis p,
.ratgeber-artikel .ratgeber-merksatz p,
.ratgeber-artikel .ratgeber-beispiel p,
.ratgeber-artikel .ratgeber-schluss p,
.ratgeber-faq-liste details p{
text-align: justify;
text-justify: inter-word;
-webkit-hyphens: auto;
hyphens: auto;
overflow-wrap: break-word;
}
.ratgeber-liste,
.ratgeber-checkliste,
.ratgeber-nummernliste{ display:grid; gap:11px; margin:24px 0; padding-left:24px; }
.ratgeber-liste li,
.ratgeber-checkliste li,
.ratgeber-nummernliste li{ padding-left:5px; }
.ratgeber-checkliste{ padding:0; list-style:none; }
.ratgeber-checkliste li{ position:relative; padding:13px 16px 13px 44px; border:1px solid #dce9e6; border-radius:13px; background:#f8fbfa; }
.ratgeber-checkliste li::before{ position:absolute; top:15px; left:16px; width:18px; height:18px; border-radius:50%; color:#fff; background:var(--mint-dunkel); content:"✓"; font-size:.72rem; font-weight:900; line-height:18px; text-align:center; }
.ratgeber-schritte{ display:grid; gap:14px; margin:28px 0; padding:0; list-style:none; }
.ratgeber-schritte li{ display:grid; grid-template-columns:48px minmax(0,1fr); gap:18px; align-items:start; padding:20px; border:1px solid #dce8e6; border-radius:17px; background:#f8fbfa; }
.ratgeber-schritte li > span{ display:grid; width:42px; height:42px; place-items:center; border-radius:13px; color:#073e35; background:var(--mint-hell); font-family:var(--schrift-zahlen); font-weight:820; }
.ratgeber-schritte h3{ margin:0 0 7px; font-size:1.12rem; }
.ratgeber-schritte p{ margin:0; color:#5b7079; font-size:.94rem; }
.ratgeber-methoden{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:28px; }
.ratgeber-methoden article{ position:relative; min-width:0; padding:24px; border:1px solid #dce8e6; border-radius:18px; background:linear-gradient(155deg,#fff,#f7fbfa); box-shadow:0 12px 34px rgba(20,48,59,.05); }
.ratgeber-methoden article > span{ display:block; margin-bottom:18px; color:var(--mint-dunkel); font-family:var(--schrift-zahlen); font-size:.78rem; font-weight:850; letter-spacing:.08em; }
.ratgeber-methoden h3{ margin:0 0 10px; font-size:1.2rem; }
.ratgeber-methoden p{ margin:0; color:#5c717a; font-size:.93rem; }
.ratgeber-definitionen{ display:grid; gap:12px; margin:25px 0; }
.ratgeber-definitionen div{ display:grid; grid-template-columns:minmax(150px,.34fr) minmax(0,.66fr); gap:24px; padding:18px 20px; border:1px solid #dde9e7; border-radius:15px; background:#fafcfc; }
.ratgeber-definitionen dt{ color:var(--tinte); font-weight:780; }
.ratgeber-definitionen dd{ margin:0; color:#5b7079; }
.ratgeber-hinweis,
.ratgeber-merksatz,
.ratgeber-beispiel{ margin:28px 0; padding:20px 22px; border:1px solid #cce8e0; border-left:4px solid var(--mint-dunkel); border-radius:15px; background:#f1faf7; }
.ratgeber-hinweis.warnung{ border-color:#efd9ba; border-left-color:var(--orange); background:#fff8ed; }
.ratgeber-hinweis strong,
.ratgeber-merksatz strong,
.ratgeber-beispiel > span{ display:block; margin-bottom:6px; color:var(--tinte); font-size:.82rem; font-weight:820; letter-spacing:.04em; text-transform:uppercase; }
.ratgeber-hinweis p,
.ratgeber-merksatz p,
.ratgeber-beispiel p{ margin:0; }
.ratgeber-beispiel{ border-left-color:var(--cyan); background:#f2f9fc; }
.ratgeber-tabelle-wrap{ max-width:100%; margin:28px 0; overflow-x:auto; border:1px solid #dce8e6; border-radius:17px; background:#fff; }
.ratgeber-tabelle{ width:100%; min-width:650px; border-collapse:collapse; font-size:.88rem; line-height:1.5; }
.ratgeber-tabelle th,
.ratgeber-tabelle td{ padding:15px 17px; border-bottom:1px solid #e3ecea; text-align:left; vertical-align:top; }
.ratgeber-tabelle th{ color:#27434d; background:#edf7f4; font-size:.76rem; letter-spacing:.04em; text-transform:uppercase; }
.ratgeber-tabelle tr:last-child td{ border-bottom:0; }
.ratgeber-quellenzeile{ padding-top:12px; color:#6d818a; font-size:.83rem; }
.ratgeber-quellenzeile a{ font-weight:720; }
.ratgeber-schluss{ padding:clamp(26px,4vw,40px); border-radius:22px; color:rgba(235,246,250,.78); background:radial-gradient(circle at 90% 0,rgba(54,223,184,.18),transparent 28%),linear-gradient(135deg,#071522,#0b2a39); }
.ratgeber-schluss h2{ color:#fff; font-size:clamp(1.65rem,2.7vw,2.25rem); }
.ratgeber-schluss p{ color:rgba(235,246,250,.78); }
.ratgeber-schluss .primaer-knopf{ margin-top:8px; }
.ratgeber-faq,
.ratgeber-verwandt{ max-width:1220px; margin:72px auto 0; padding:clamp(30px,5vw,54px); border:1px solid #dfe9e7; border-radius:28px; background:#fff; box-shadow:0 24px 72px rgba(16,45,56,.07); }
.ratgeber-abschnittskopf{ max-width:780px; margin-bottom:30px; }
.ratgeber-abschnittskopf h2{ margin-bottom:14px; font-size:clamp(1.75rem,3vw,2.55rem); text-wrap:balance; }
.ratgeber-abschnittskopf p{ color:#617680; }
.ratgeber-faq-liste{ display:grid; gap:10px; }
.ratgeber-faq-liste details{ overflow:hidden; border:1px solid #dce8e6; border-radius:15px; background:#fbfdfc; }
.ratgeber-faq-liste summary{ position:relative; display:flex; justify-content:space-between; gap:20px; padding:18px 20px; color:var(--tinte); font-weight:760; list-style:none; }
.ratgeber-faq-liste summary::-webkit-details-marker{ display:none; }
.ratgeber-faq-liste summary span{ position:relative; flex:0 0 20px; width:20px; height:20px; }
.ratgeber-faq-liste summary span::before,
.ratgeber-faq-liste summary span::after{ position:absolute; top:9px; left:3px; width:14px; height:2px; border-radius:2px; background:var(--mint-dunkel); content:""; }
.ratgeber-faq-liste summary span::after{ transform:rotate(90deg); transition:transform .18s ease; }
.ratgeber-faq-liste details[open] summary span::after{ transform:rotate(0); }
.ratgeber-faq-liste details > div{ padding:0 20px 20px; color:#5d727b; }
.ratgeber-faq-liste details p{ margin:0; }
.ratgeber-kartenraster{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.ratgeber-linkkarte{ 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-linkkarte:hover{ border-color:#b9ddd4; box-shadow:0 17px 42px rgba(18,50,61,.08); transform:translateY(-3px); }
.ratgeber-linkkarte > span{ display:block; margin-bottom:12px; color:var(--mint-dunkel); font-size:.7rem; font-weight:820; letter-spacing:.08em; text-transform:uppercase; }
.ratgeber-linkkarte h3{ margin:0 0 10px; font-size:1.24rem; }
.ratgeber-linkkarte h3 a{ color:inherit; text-decoration:none; }
.ratgeber-linkkarte p{ margin-bottom:17px; color:#627780; font-size:.91rem; }
@media (max-width:1100px){
.ratgeber-hero{ grid-template-columns:1fr; }
.ratgeber-kurzantwort,
.ratgeber-livekarte{ max-width:720px; }
.ratgeber-layout{ grid-template-columns:1fr; max-width:1030px; margin-inline:auto; }
.ratgeber-navigation{ position:static; }
.ratgeber-navigation nav{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.ratgeber-navigation strong{ grid-column:1/-1; }
}
@media (max-width:760px){
.ratgeberseite{ --rahmen: min(1340px, calc(100% - 30px)); }
.ratgeber-main{ padding-top:20px; padding-bottom:88px; }
.ratgeber-hero{ padding:30px 24px; border-radius:25px; }
.ratgeber-hero h1{ font-size:clamp(2rem,8.8vw,2.85rem); }
.ratgeber-aktionen,
.ratgeber-aktionen a{ width:100%; }
.ratgeber-kurzantwort,
.ratgeber-livekarte{ padding:22px; border-radius:19px; }
.ratgeber-livekarte dl div{ grid-template-columns:1fr; gap:3px; }
.ratgeber-layout{ gap:28px; margin-top:38px; }
.ratgeber-navigation nav{ grid-template-columns:1fr; }
.ratgeber-artikel,
.ratgeber-faq,
.ratgeber-verwandt{ padding:25px 20px; border-radius:22px; }
.ratgeber-artikel section + section{ margin-top:48px; padding-top:44px; }
.ratgeber-artikel > section > p,
.ratgeber-artikel > section > .ratgeber-liste li,
.ratgeber-artikel > section > .ratgeber-nummernliste li,
.ratgeber-artikel > section > .ratgeber-definitionen dd,
.ratgeber-artikel .ratgeber-hinweis p,
.ratgeber-artikel .ratgeber-merksatz p,
.ratgeber-artikel .ratgeber-beispiel p,
.ratgeber-artikel .ratgeber-schluss p,
.ratgeber-faq-liste details p{ text-align:left; }
.ratgeber-methoden,
.ratgeber-kartenraster{ grid-template-columns:1fr; }
.ratgeber-definitionen div{ grid-template-columns:1fr; gap:6px; }
.ratgeber-schritte li{ grid-template-columns:40px minmax(0,1fr); gap:14px; padding:17px; }
.ratgeber-schritte li > span{ width:36px; height:36px; }
}
@media (max-width:420px){
.brotkrumen{ font-size:.75rem; }
.ratgeber-hero{ margin-inline:-5px; padding:27px 20px; }
.ratgeber-artikel,
.ratgeber-faq,
.ratgeber-verwandt{ padding-inline:17px; }
.ratgeber-schritte li{ grid-template-columns:1fr; }
.ratgeber-schritte li > span{ margin-bottom:2px; }
.ratgeber-methoden article,
.ratgeber-linkkarte{ padding:20px; }
}
@media (prefers-reduced-motion:reduce){
.ratgeber-linkkarte{ transition:none; }
.ratgeber-linkkarte:hover{ transform:none; }
}
@media print{
.ratgeberseite .seitenkopf,
.ratgeber-navigation,
.ratgeber-aktionen,
.ratgeber-verwandt,
.ratgeberseite .fussbereich{ display:none!important; }
.ratgeber-main,
.ratgeber-hero,
.ratgeber-artikel,
.ratgeber-faq{ color:#000; background:#fff; box-shadow:none; }
.ratgeber-hero{ display:block; padding:0 0 25px; border:0; }
.ratgeber-hero h1,
.ratgeber-schluss h2{ color:#000; }
.ratgeber-einleitung,
.ratgeber-stand,
.ratgeber-schluss p{ color:#222; }
.ratgeber-kurzantwort,
.ratgeber-livekarte,
.ratgeber-schluss{ border:1px solid #aaa; color:#000; background:#fff; }
.ratgeber-layout{ display:block; margin-top:20px; }
.ratgeber-artikel,
.ratgeber-faq{ padding:0; border:0; }
}
.ratgeber-abschnitt:nth-of-type(even){
background: linear-gradient(180deg, #eaf5ff, #f5faff);
}
.ratgeber-artikel,
.ratgeber-faq details,
.ratgeber-verwandt a{
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);
}
.ratgeber-hero{
color: rgba(245, 251, 255, 0.88);
background:
radial-gradient(circle at 82% 13%, rgba(104, 230, 255, 0.28), transparent 29%),
linear-gradient(132deg, #071b45, #0b4fc8 58%, #098fd4);
}
.ratgeber-hero h1,
.ratgeber-hero h2{
color: #ffffff;
}
.ipv6x-hinweis{
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 18px;
align-items: start;
max-width: 960px;
margin: 38px auto;
padding: 22px 24px;
border: 1px solid rgba(25, 139, 218, 0.24);
border-radius: 18px;
background: linear-gradient(135deg, rgba(232, 247, 255, 0.96), rgba(255, 255, 255, 0.96));
box-shadow: 0 18px 48px rgba(16, 74, 139, 0.1);
}
.ipv6x-hinweis::before{
display: grid;
width: 42px;
height: 42px;
place-items: center;
border-radius: 13px;
color: #ffffff;
background: linear-gradient(135deg, #0b69df, #12badb);
content: "v6";
font-size: 0.78rem;
font-weight: 850;
letter-spacing: -0.02em;
}
.ipv6x-hinweis h2,
.ipv6x-hinweis h3{
margin: 0 0 7px;
color: #0b2d64;
font-size: clamp(1.18rem, 2vw, 1.45rem);
}
.ipv6x-hinweis p{
margin: 0;
color: #4d6481;
}
.ipv6x-hinweis a{
font-weight: 800;
}
.ipv6x-hinweis a:focus-visible{
outline: 3px solid rgba(16, 156, 226, 0.35);
outline-offset: 3px;
}
@media (max-width: 760px){
.ipv6x-hinweis{
grid-template-columns: 1fr;
margin-inline: 15px;
padding: 20px;
}
}
@media print{
.ipv6x-hinweis{
display: none !important;
}
}
.vergleichsseite .seitenkopf{
background: linear-gradient(135deg, #06183b, #0b4db5);
}
.tarifvergleich-main{
background:
radial-gradient(circle at 88% 6%, rgba(34, 195, 234, 0.1), transparent 25%),
linear-gradient(180deg, #edf6ff 0, #f5faff 520px, #f5faff 100%);
}
.tarifvergleich-hero{
grid-template-columns: minmax(0, 1.2fr) minmax(310px, 0.72fr);
background:
radial-gradient(circle at 86% 12%, rgba(119, 235, 255, 0.22), transparent 27%),
radial-gradient(circle at 6% 92%, rgba(43, 160, 255, 0.2), transparent 29%),
linear-gradient(132deg, #061b43 0%, #0b4fc7 58%, #0876a4 100%);
}
.tarifvergleich-hero-mobilfunk{
background:
radial-gradient(circle at 86% 12%, rgba(168, 194, 255, 0.2), transparent 27%),
radial-gradient(circle at 6% 92%, rgba(48, 188, 248, 0.18), transparent 29%),
linear-gradient(132deg, #091942 0%, #3143b8 55%, #3e3ea5 100%);
}
.tarifvergleich-hero .ueberzeile.dunkel{
color: #7deaf8;
}
.tarifvergleich-hero .ratgeber-einleitung{
color: rgba(244, 250, 255, 0.9);
}
.tarifvergleich-hero .ratgeber-stand{
color: rgba(235, 246, 255, 0.74);
}
.tarif-hero-fakten{
min-width: 0;
padding: 28px;
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: 24px;
background: rgba(3, 27, 74, 0.34);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 24px 65px rgba(0, 19, 72, 0.2);
-webkit-backdrop-filter: blur(13px);
backdrop-filter: blur(13px);
}
.tarif-hero-fakten > span{
display: block;
margin-bottom: 11px;
color: #8cecf8;
font-size: 0.7rem;
font-weight: 840;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.tarif-hero-fakten > strong{
display: block;
margin-bottom: 21px;
color: #ffffff;
font-family: var(--schrift-zahlen);
font-size: clamp(2rem, 3.6vw, 3rem);
line-height: 1;
letter-spacing: -0.05em;
}
.tarif-hero-fakten dl{
display: grid;
gap: 10px;
margin: 0 0 21px;
}
.tarif-hero-fakten dl div{
display: grid;
grid-template-columns: 82px minmax(0, 1fr);
gap: 12px;
padding-top: 10px;
border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.tarif-hero-fakten dt{
color: rgba(235, 247, 255, 0.78);
font-size: 0.73rem;
font-weight: 740;
}
.tarif-hero-fakten dd{
margin: 0;
color: #ffffff;
font-size: 0.82rem;
font-weight: 700;
line-height: 1.45;
}
.tarif-hero-fakten > a{
color: #ffffff;
font-size: 0.86rem;
font-weight: 800;
}
.tarif-hero-fakten > a:focus-visible{
outline: 3px solid #ffffff;
outline-offset: 4px;
}
.tarifvergleich-bereich{
position: relative;
z-index: 2;
max-width: 1220px;
margin: 54px auto 0;
padding: clamp(28px, 4.8vw, 54px);
border: 1px solid rgba(83, 153, 210, 0.22);
border-radius: 30px;
background:
radial-gradient(circle at 100% 0, rgba(45, 203, 235, 0.09), transparent 30%),
rgba(255, 255, 255, 0.97);
box-shadow: 0 28px 78px rgba(13, 69, 133, 0.11);
scroll-margin-top: 24px;
}
.tarifvergleich-kopf{
max-width: 820px;
}
.tarifvergleich-label{
display: block;
margin-bottom: 10px;
color: #086ba9;
font-size: 0.7rem;
font-weight: 850;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.tarifvergleich-kopf h2{
margin: 0 0 14px;
color: #0b2b59;
font-size: clamp(1.8rem, 3.3vw, 2.75rem);
text-wrap: balance;
}
.tarifvergleich-kopf p{
margin: 0;
color: #50677f;
}
.tariffuxx-slot{
min-width: 0;
min-height: 320px;
padding: clamp(10px, 2vw, 18px);
overflow-x: auto;
border: 1px solid rgba(42, 126, 191, 0.26);
border-radius: 19px;
background: #ffffff;
box-shadow: 0 14px 40px rgba(16, 76, 140, 0.08);
scrollbar-gutter: stable;
}
.tariffuxx-einbettung{
width: 100%;
min-width: 0;
}
.tariffuxx-einbettung iframe{
display: block;
width: 100% !important;
max-width: 100% !important;
border: 0;
}
.tariffuxx-einbettung noscript{
display: block;
padding: 24px;
border-radius: 14px;
color: #52677d;
background: #f5faff;
text-align: center;
}
.tariffuxx-hilfe{
margin: 12px 4px 0;
color: #65798c;
font-size: 0.75rem;
line-height: 1.5;
}
.tariffuxx-hilfe .mono{
color: #365a7d;
}
.tariffuxx-slot.tariffuxx-geladen .tariffuxx-hilfe,
.tariffuxx-slot:has(.tariffuxx-einbettung iframe) .tariffuxx-hilfe{
display: none;
}
.tarif-ratgeber-layout{
max-width: 1220px;
margin-top: 64px;
}
.tarif-ratgeber-artikel{
max-width: 960px;
}
.tarif-crosslink{
display: flex;
max-width: 1220px;
align-items: center;
justify-content: space-between;
gap: 28px;
margin: 72px auto 0;
padding: clamp(28px, 4vw, 42px);
border: 1px solid rgba(88, 157, 211, 0.22);
border-radius: 25px;
background:
radial-gradient(circle at 100% 0, rgba(42, 201, 233, 0.13), transparent 34%),
linear-gradient(135deg, #ffffff, #edf7ff);
box-shadow: 0 23px 66px rgba(16, 76, 140, 0.09);
}
.tarif-crosslink > div{
max-width: 770px;
}
.tarif-crosslink > div > span{
display: block;
margin-bottom: 8px;
color: #086c9c;
font-size: 0.68rem;
font-weight: 850;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.tarif-crosslink h2{
margin: 0 0 9px;
color: #0b2d5e;
font-size: clamp(1.55rem, 2.8vw, 2.25rem);
}
.tarif-crosslink p{
margin: 0;
color: #536b82;
}
.tarif-crosslink .primaer-knopf{
flex: 0 0 auto;
text-align: center;
}
@media (max-width: 1100px){
.tarifvergleich-hero{
grid-template-columns: 1fr;
}
.tarif-hero-fakten{
max-width: 720px;
}
}
@media (max-width: 760px){
.tarifvergleich-bereich{
margin-top: 38px;
padding: 25px 20px;
border-radius: 23px;
}
.tariffuxx-slot{
min-height: 260px;
padding: 8px;
}
.tariffuxx-hilfe{
margin-inline: 2px;
}
.tarif-hero-fakten{
padding: 22px;
border-radius: 19px;
}
.tarif-hero-fakten dl div{
grid-template-columns: 1fr;
gap: 3px;
}
.tarif-crosslink{
align-items: stretch;
flex-direction: column;
margin-top: 54px;
border-radius: 21px;
}
.tarif-crosslink .primaer-knopf{
width: 100%;
}
}
@media (max-width: 420px){
.tarifvergleich-bereich{
margin-inline: -5px;
}
}
@media print{
.tariffuxx-slot,
.tarif-crosslink{
display: none !important;
}
}
.vergleichsseite .ratgeber-merkboxen{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin: 24px 0;
}
.vergleichsseite .ratgeber-merkboxen article,
.vergleichsseite .ratgeber-beispielzeile article,
.vergleichsseite .technik-karte,
.vergleichsseite .nutzungs-infografik-raster article,
.vergleichsseite .bedarfsstufen > div,
.vergleichsseite .bedarf-ampel > div{
min-width: 0;
padding: 20px;
border: 1px solid rgba(78, 143, 201, 0.18);
border-radius: 18px;
background: linear-gradient(180deg, #ffffff, #f4faff);
box-shadow: 0 14px 34px rgba(11, 57, 116, 0.07);
}
.vergleichsseite .ratgeber-merkboxen article strong{
display: inline-block;
margin-bottom: 8px;
color: #096796;
font-size: 0.72rem;
font-weight: 860;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.vergleichsseite .ratgeber-merkboxen article h3,
.vergleichsseite .ratgeber-beispielzeile article h3,
.vergleichsseite .technik-karte h3,
.vergleichsseite .nutzungs-infografik-raster article b{
margin: 0 0 8px;
color: #0b2b59;
}
.vergleichsseite .ratgeber-merkboxen article p,
.vergleichsseite .ratgeber-beispielzeile article p,
.vergleichsseite .technik-karte p,
.vergleichsseite .nutzungs-infografik-raster article p,
.vergleichsseite .bedarfsstufen small,
.vergleichsseite .bedarf-ampel small{
margin: 0;
color: #50677f;
font-size: 0.95rem;
}
.vergleichsseite .technik-duell,
.vergleichsseite .ratgeber-beispielzeile,
.vergleichsseite .nutzungs-infografik-raster,
.vergleichsseite .bedarfsstufen,
.vergleichsseite .bedarf-ampel{
display: grid;
gap: 18px;
}
.vergleichsseite .technik-duell{
grid-template-columns: repeat(2, minmax(0, 1fr));
margin: 26px 0 18px;
}
.vergleichsseite .technik-karte{
position: relative;
overflow: hidden;
}
.vergleichsseite .technik-karte::before{
content: "";
position: absolute;
inset: 0 0 auto;
height: 5px;
background: linear-gradient(90deg, #2cbbe3, #0e73bb);
}
.vergleichsseite .technik-karte.glasfaser::before{
background: linear-gradient(90deg, #7867ff, #1aa7e0);
}
.vergleichsseite .technik-karte > span{
display: inline-block;
margin-bottom: 12px;
color: #0a6c9d;
font-size: 0.72rem;
font-weight: 860;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.vergleichsseite .technik-werte{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin: 16px 0 18px;
}
.vergleichsseite .technik-werte div{
min-width: 0;
padding: 14px;
border-radius: 16px;
background: rgba(10, 95, 149, 0.06);
}
.vergleichsseite .technik-werte b{
display: block;
color: #0b2b59;
font-family: var(--schrift-zahlen);
font-size: 1.55rem;
line-height: 1.05;
}
.vergleichsseite .technik-werte small,
.vergleichsseite .nutzungs-infografik-raster article strong,
.vergleichsseite .bedarfsstufen span,
.vergleichsseite .bedarf-ampel span{
display: block;
}
.vergleichsseite .technik-werte small{
margin-top: 4px;
color: #5a738a;
font-size: 0.8rem;
line-height: 1.35;
}
.vergleichsseite .ratgeber-checkliste.kompakt{
margin: 0 0 16px;
}
.vergleichsseite .ratgeber-checkliste.kompakt li{
margin-bottom: 10px;
}
.vergleichsseite .ratgeber-beispielzeile{
grid-template-columns: repeat(3, minmax(0, 1fr));
margin: 22px 0 14px;
}
.vergleichsseite .ratgeber-beispielzeile article{
background: linear-gradient(180deg, #fdfefe, #eef7ff);
}
.vergleichsseite .nutzungs-infografik{
margin: 26px 0;
padding: 24px;
border: 1px solid rgba(78, 143, 201, 0.18);
border-radius: 26px;
background:
radial-gradient(circle at 100% 0, rgba(45, 203, 235, 0.14), transparent 28%),
linear-gradient(180deg, #ffffff, #eef7ff 100%);
box-shadow: 0 20px 54px rgba(11, 57, 116, 0.08);
}
.vergleichsseite .mobilfunk-infografik{
background:
radial-gradient(circle at 100% 0, rgba(121, 112, 255, 0.14), transparent 28%),
linear-gradient(180deg, #ffffff, #f2f3ff 100%);
}
.vergleichsseite .nutzungs-infografik-kopf{
max-width: 760px;
margin-bottom: 18px;
}
.vergleichsseite .nutzungs-infografik-kopf span{
display: inline-block;
margin-bottom: 8px;
color: #0b6a9f;
font-size: 0.72rem;
font-weight: 860;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.vergleichsseite .nutzungs-infografik-kopf strong{
display: block;
color: #0b2b59;
font-size: clamp(1.15rem, 2vw, 1.45rem);
line-height: 1.35;
}
.vergleichsseite .nutzungs-infografik-raster{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.vergleichsseite .nutzungs-infografik-raster article{
background: rgba(255, 255, 255, 0.92);
}
.vergleichsseite .nutzungs-infografik-raster article b{
display: block;
font-size: 1rem;
}
.vergleichsseite .nutzungs-infografik-raster article strong{
margin: 0 0 8px;
color: #0f75b8;
font-family: var(--schrift-zahlen);
font-size: 1.45rem;
line-height: 1.1;
}
.vergleichsseite .bedarfsstufen,
.vergleichsseite .bedarf-ampel{
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 18px;
}
.vergleichsseite .bedarfsstufen > div,
.vergleichsseite .bedarf-ampel > div{
position: relative;
overflow: hidden;
}
.vergleichsseite .bedarfsstufen > div::before,
.vergleichsseite .bedarf-ampel > div::before{
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 6px;
background: linear-gradient(180deg, #31c7a1, #1b8e7e);
}
.vergleichsseite .bedarfsstufen > div:nth-child(2)::before,
.vergleichsseite .bedarf-ampel > div:nth-child(2)::before{
background: linear-gradient(180deg, #45b3ff, #0b75bb);
}
.vergleichsseite .bedarfsstufen > div:nth-child(3)::before,
.vergleichsseite .bedarf-ampel > div:nth-child(3)::before{
background: linear-gradient(180deg, #ffa44a, #ef6b37);
}
.vergleichsseite .bedarfsstufen span,
.vergleichsseite .bedarf-ampel span{
margin-bottom: 6px;
color: #0b2b59;
font-family: var(--schrift-zahlen);
font-size: 1.45rem;
line-height: 1;
}
.vergleichsseite .bedarf-ampel .passt-locker span{
color: #0b855a;
}
.vergleichsseite .bedarf-ampel .passt-gut span{
color: #0b63b8;
}
.vergleichsseite .bedarf-ampel .passt-knapp span{
color: #cf5b23;
}
@media (max-width: 980px){
.vergleichsseite .ratgeber-merkboxen,
.vergleichsseite .ratgeber-beispielzeile,
.vergleichsseite .bedarfsstufen,
.vergleichsseite .bedarf-ampel,
.vergleichsseite .technik-duell,
.vergleichsseite .nutzungs-infografik-raster{
grid-template-columns: 1fr;
}
}
@media (max-width: 760px){
.vergleichsseite .technik-werte{
grid-template-columns: 1fr;
}
.vergleichsseite .nutzungs-infografik{
padding: 18px;
border-radius: 22px;
}
.vergleichsseite .nutzungs-infografik-raster article strong,
.vergleichsseite .bedarfsstufen span,
.vergleichsseite .bedarf-ampel span,
.vergleichsseite .technik-werte b{
font-size: 1.28rem;
}
}
@media print{
.vergleichsseite .ratgeber-merkboxen article,
.vergleichsseite .ratgeber-beispielzeile article,
.vergleichsseite .technik-karte,
.vergleichsseite .nutzungs-infografik,
.vergleichsseite .nutzungs-infografik-raster article,
.vergleichsseite .bedarfsstufen > div,
.vergleichsseite .bedarf-ampel > div{
box-shadow: none;
break-inside: avoid;
}
}