@font-face{font-family:'EB Garamond';font-weight:400;font-display:swap;src:url(schrift/eb-garamond-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'EB Garamond';font-weight:500;font-display:swap;src:url(schrift/eb-garamond-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'EB Garamond';font-weight:600;font-display:swap;src:url(schrift/eb-garamond-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Cinzel';font-weight:600;font-display:swap;src:url(schrift/cinzel-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Cinzel';font-weight:700;font-display:swap;src:url(schrift/cinzel-latin-700-normal.woff2) format('woff2')}

:root{
  color-scheme:dark;
  --schwarz:#000;
  --text:#ece6da;
  --leise:#a9a296;
  --fuge:#1c1b19;
  --linie:rgba(236,230,218,.42);
  --chrom:linear-gradient(180deg,#fbfcfd 0%,#dfe3e7 34%,#a6adb5 52%,#c9ced3 60%,#f3f5f7 84%,#d4d8dd 100%);
  --schrift:'EB Garamond',Georgia,'Times New Roman',serif;
  --titel:'Cinzel','EB Garamond',Georgia,serif;
  --rand:clamp(20px,4vw,48px);
  --breite:1200px;
}
*{box-sizing:border-box}
html{background:var(--schwarz)}
body{margin:0;background:var(--schwarz);color:var(--text);font:400 1.25rem/1.55 var(--schrift);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:#d9dde2;color:#000}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid #e9ecef;outline-offset:4px;border-radius:2px}
h1,h2,h3{font-family:var(--titel);font-weight:600;line-height:1.08;margin:0;text-wrap:balance}
h1{font-size:clamp(2.4rem,4.4vw,3.6rem);letter-spacing:.005em}
h2{font-size:clamp(1.8rem,2.8vw,2.4rem)}
h3{font-size:1.3rem}
p{margin:0;max-width:34em}
.huelle{width:100%;max-width:calc(var(--breite) + 2*var(--rand));margin:0 auto;padding-inline:var(--rand)}

.kopf{position:sticky;top:0;z-index:5;background:rgba(0,0,0,.86);backdrop-filter:blur(6px)}
.kopf .huelle{display:flex;align-items:center;justify-content:space-between;gap:24px;height:84px}
.marke{display:flex;align-items:center;text-decoration:none}
.marke img{height:66px;width:auto}
.kopf nav{display:flex;gap:28px;align-items:center;font-weight:500;font-size:1.1rem}
.kopf nav a{text-decoration:none;color:var(--leise)}
.kopf nav a:hover{color:var(--text)}
.kopf nav .sprache{color:var(--leise);font-size:1rem}
.menue{display:none;background:none;border:0;color:var(--text);font:500 1.1rem var(--schrift);padding:10px 0;cursor:pointer}

.knopf{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;
  height:58px;padding:0 40px;border:0;border-radius:29px;
  background:url(ornament/knopf-l.webp) left center/auto 100% no-repeat,url(ornament/knopf-r.webp) right center/auto 100% no-repeat,
    url(ornament/knopf-m.webp) center/calc(100% - 52px) 100% no-repeat;
  color:#0b0d11;font:700 1.05rem/1 var(--titel);letter-spacing:.06em;white-space:nowrap;text-decoration:none;cursor:pointer;
  text-shadow:0 1px 0 rgba(255,255,255,.7),0 -1px 0 rgba(0,0,0,.12);
  filter:brightness(1) drop-shadow(0 0 14px rgba(165,190,225,.16)) drop-shadow(0 0 0 rgba(255,255,255,0)) drop-shadow(0 6px 10px rgba(0,0,0,.8));
  -webkit-tap-highlight-color:transparent;transition:filter .3s,scale .12s}
.knopf-text{display:block;translate:var(--tx,0px) var(--ty,0px)}
.knopf::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;clip-path:inset(1px round 29px);mix-blend-mode:screen;
  background:radial-gradient(circle at var(--mx,50%) var(--my,30%),rgba(255,255,255,.95) 0,rgba(215,232,255,.6) 10%,rgba(255,255,255,0) 34%);
  opacity:0;transition:opacity .3s}
.knopf::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;clip-path:inset(1px round 29px);
  background:linear-gradient(104deg,transparent 40%,rgba(255,255,255,.95) 47%,rgba(205,225,255,.7) 50%,rgba(255,255,255,.95) 52%,transparent 59%)
    no-repeat 110% 0/250% 100%;
  animation:knopfglanz 7s 1.2s cubic-bezier(.3,.1,.2,1) infinite}
.funkel{position:absolute;left:12px;top:-11px;width:26px;height:26px;pointer-events:none;opacity:0;scale:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='.55' stop-color='%23eef5ff'/%3E%3Cstop offset='1' stop-color='%23b9d2ff'/%3E%3C/radialGradient%3E%3Cpath fill='url(%23g)' d='M12 0C12.6 8 16 11.4 24 12 16 12.6 12.6 16 12 24 11.4 16 8 12.6 0 12 8 11.4 11.4 8 12 0Z'/%3E%3C/svg%3E") center/contain no-repeat;filter:drop-shadow(0 0 5px rgba(200,225,255,.95))}
.funkel.f2{left:auto;top:auto;right:20px;bottom:-9px;width:19px;height:19px;animation:funkeln-ruhe 7s 2.1s infinite}
.knopf:hover,.knopf:focus-visible{animation:knopfblitz .55s ease-out;
  filter:brightness(1.07) drop-shadow(0 0 22px rgba(185,210,245,.5)) drop-shadow(0 0 3px rgba(255,255,255,.6)) drop-shadow(0 6px 10px rgba(0,0,0,.8))}
.knopf:hover::before{opacity:1}
.knopf:hover::after,.knopf:focus-visible::after{animation:knopfglanz-wieder .6s cubic-bezier(.3,.1,.2,1) 1}
.knopf:hover .funkel,.knopf:focus-visible .funkel{animation:funkeln .9s cubic-bezier(.2,.8,.2,1) both}
.knopf:hover .funkel.f2,.knopf:focus-visible .funkel.f2{animation-delay:.14s}
.knopf:active{scale:.97;filter:brightness(1.3) drop-shadow(0 0 26px rgba(210,230,255,.85)) drop-shadow(0 0 6px rgba(255,255,255,.9)) drop-shadow(0 4px 8px rgba(0,0,0,.8))}
.knopf:focus-visible{outline-offset:5px;border-radius:29px}
@keyframes knopfglanz{0%{background-position:110% 0}15%,100%{background-position:-10% 0}}
@keyframes knopfglanz-wieder{from{background-position:110% 0}to{background-position:-10% 0}}
@keyframes knopfblitz{0%{filter:brightness(1) drop-shadow(0 0 14px rgba(165,190,225,.16)) drop-shadow(0 0 0 rgba(255,255,255,0)) drop-shadow(0 6px 10px rgba(0,0,0,.8))}
  22%{filter:brightness(1.45) drop-shadow(0 0 34px rgba(215,232,255,.95)) drop-shadow(0 0 7px rgba(255,255,255,1)) drop-shadow(0 6px 10px rgba(0,0,0,.8))}}
@keyframes funkeln{0%{opacity:0;scale:0;rotate:-70deg}35%{opacity:1;scale:1.2;rotate:0deg}100%{opacity:0;scale:.5;rotate:35deg}}
@keyframes funkeln-ruhe{0%{opacity:0;scale:0;rotate:-70deg}4%{opacity:1;scale:1.1;rotate:0deg}10%,100%{opacity:0;scale:.4;rotate:30deg}}
@media (prefers-reduced-motion:reduce){.knopf,.knopf::after,.funkel{animation:none!important}}
.leiser{font-weight:500;font-size:1.15rem}
.reihe{display:flex;flex-wrap:wrap;align-items:center;gap:18px 30px}
.klein{font-size:1rem;color:var(--leise)}

.anfang{overflow-x:clip}
.anfang .huelle{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center;padding-block:clamp(40px,6vw,96px) clamp(48px,6vw,88px)}
.anfang .text{display:grid;gap:26px}
.anfang .bild{position:relative}
.anfang figure{margin:0}
.anfang figcaption{font:600 .74rem/1.25 var(--titel);letter-spacing:.16em;text-transform:uppercase;color:var(--leise)}
.anfang figcaption b{font-weight:inherit}
.anfang .meister{width:58%}
.anfang .meister figcaption{margin-bottom:10px}
.anfang .tv{position:relative;z-index:1;width:70%;margin:-15% 0 0 auto}
.anfang .tv figcaption{margin-top:10px;text-align:right}
.anfang .handy{position:absolute;z-index:2;left:0;bottom:0;width:30%}
.anfang .handy .zwei{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:end}
.anfang .handy figcaption{margin-top:10px;white-space:nowrap}
.anfang .bild video{display:block;width:100%;height:auto}
.anfang .bild img,.anfang .bild video{border-radius:4px;box-shadow:0 0 0 1px var(--fuge),0 40px 80px -30px rgba(0,0,0,.9)}
.anfang .handy img{border-radius:13px;box-shadow:0 0 0 1px #2a2926,0 30px 60px -12px #000}

.vignette{display:block;width:min(760px,92vw);height:auto;margin:0 auto}
.fakten ul{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 36px;margin-block:0;padding-block:0}
.fakten li{display:grid;gap:4px;align-content:start;padding-top:14px;border-top:1px solid var(--fuge)}
.fakten b{font:600 1.08rem/1.2 var(--titel)}
.fakten span{color:var(--leise);font-size:1.02rem;line-height:1.4}
.pause{padding-block:clamp(48px,6vw,80px) 0}
.ranke{--g:calc((100vw - var(--breite))/2);--b:clamp(0px,calc(var(--g) - 44px),120px);position:absolute;top:0;
  left:max(6px,calc(var(--g) - 38px - var(--b)));width:var(--b);height:auto;pointer-events:none}
@media (max-width:1439px){.ranke{display:none}}

.abschnitt{padding-block:clamp(56px,8vw,112px)}
.abschnitt>.huelle>h2{margin-bottom:clamp(28px,4vw,48px)}


.moeglich{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:56px;align-items:start}
.moeglich ol{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.moeglich button{all:unset;box-sizing:border-box;display:grid;grid-template-columns:22px 1fr;gap:4px 14px;width:100%;padding:16px 0;cursor:pointer}
.moeglich button img{grid-row:span 2;margin-top:6px;opacity:0;transition:opacity .2s}
.moeglich button[aria-pressed="true"] img{opacity:1}
.moeglich button b{font:600 1.25rem/1.2 var(--titel);color:var(--leise)}
.moeglich button[aria-pressed="true"] b,.moeglich button:hover b{color:var(--text)}
.moeglich button span{grid-column:2;color:var(--leise);font-size:1.05rem;line-height:1.45}
.moeglich .schau img{border-radius:4px;box-shadow:0 0 0 1px var(--fuge);width:100%;aspect-ratio:16/9;object-fit:cover}
.moeglich .nur-handy{display:none}

.funktionen{display:grid;gap:clamp(64px,9vw,128px)}
.zeile{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(28px,4vw,64px);align-items:center}
.zeile:nth-child(even){grid-template-columns:minmax(0,4fr) minmax(0,7fr)}
.zeile:nth-child(even) .zeile-bild{order:2}
.zeile-bild{margin:0;display:grid;gap:14px}
.zeile-bild img{width:100%;border-radius:4px;box-shadow:0 0 0 1px var(--fuge),0 40px 70px -34px rgba(0,0,0,.95)}
.zeile-bild .neben{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:14px}
.zeile-bild .handys{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;max-width:640px}
.zeile-bild .handys img{border-radius:16px}
.zeile-bild .geraet{position:relative;padding-bottom:14%}
.zeile-bild .geraet>img{width:84%}
.zeile-bild .geraet .handys{position:absolute;right:0;bottom:0;width:40%;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:none}
.zeile-bild .geraet .handys img{border-radius:14px}
.zeile-text{display:grid;gap:14px;align-content:center}
.zeile-text h3{font-size:clamp(1.45rem,2.2vw,1.9rem)}
.zeile-text p{color:var(--leise);font-size:1.15rem}
.wo{font:600 .78rem/1 var(--titel);letter-spacing:.16em;text-transform:uppercase;color:var(--leise)}

.kacheln{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 24px}
.kacheln li{display:grid;gap:8px;align-content:start}
.kacheln img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:4px;box-shadow:0 0 0 1px var(--fuge)}
.kacheln b{font:600 1.08rem/1.2 var(--titel);margin-top:6px}
.kacheln span{color:var(--leise);font-size:1rem;line-height:1.45}
.auch{margin:clamp(40px,5vw,64px) 0 0;padding:0;list-style:none;columns:3 260px;column-gap:36px}
.auch li{break-inside:avoid;padding:10px 0;border-top:1px solid var(--fuge);color:var(--leise);font-size:1.02rem;line-height:1.4}
.auch b{color:var(--text);font-weight:500}

.aufruf .huelle{display:grid;gap:22px;justify-items:center;text-align:center}
.aufruf .huelle>h2{margin-bottom:0}
.aufruf p{color:var(--leise)}
.aufruf .reihe{justify-content:center}
.knopf.zu{cursor:default;filter:saturate(.6) brightness(.82) drop-shadow(0 6px 10px rgba(0,0,0,.8));color:#2a2d33}
.knopf.zu::after,.knopf.zu .funkel{display:none}
.knopf.zu:hover{animation:none;filter:saturate(.6) brightness(.86) drop-shadow(0 6px 10px rgba(0,0,0,.8))}
.knopf.zu:hover::before{opacity:0}
.zweit{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 28px;border:1px solid var(--linie);border-radius:26px;
  background:transparent;color:var(--text);font:600 .95rem/1 var(--titel);letter-spacing:.06em;white-space:nowrap;text-decoration:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:border-color .25s,background-color .25s}
.zweit:hover,.zweit:focus-visible{border-color:var(--text);background-color:rgba(236,230,218,.07)}
.zweit:active{background-color:rgba(236,230,218,.14)}
.zweit:focus-visible{outline:2px solid var(--text);outline-offset:4px}

.demo{position:relative}
.demo .huelle{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:56px;align-items:center}
.demo .text{display:grid;gap:24px}
.demo .vorschau img{border-radius:4px;box-shadow:0 0 0 1px var(--fuge)}
.check{display:flex;gap:10px;align-items:baseline;color:var(--leise);font-size:1rem}
.check i{width:12px;height:12px;background:url(ornament/perle.webp) center/contain no-repeat;flex:none;transform:translateY(1px)}
.check.nein{color:var(--text)}
.check.nein i{background:none;border:1px solid var(--leise);border-radius:50%}

.bald{display:inline-flex;align-items:center;gap:10px;min-height:52px;color:var(--leise);font-size:1.05rem}
.bald::before{content:'';width:10px;height:10px;flex:none;background:url(ornament/perle.webp) center/contain no-repeat;opacity:.7}

.brauchst{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px;margin:0}
.brauchst div{display:grid;gap:6px;align-content:start}
.brauchst dt{font:600 1.15rem var(--titel)}
.brauchst dd{margin:0;color:var(--leise);font-size:1.05rem;line-height:1.45}

.kaufen .huelle{display:grid;gap:24px;justify-items:start}
.kaufen .huelle>h2{margin-bottom:0}

.fragen{display:grid;gap:0;max-width:820px}
.fragen details{border-top:1px solid var(--fuge)}
.fragen details:last-child{border-bottom:1px solid var(--fuge)}
.fragen summary{cursor:pointer;list-style:none;padding:20px 0;font-weight:500;font-size:1.25rem;display:flex;justify-content:space-between;gap:24px}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{content:'+';color:var(--leise);font-size:1.4rem;line-height:1}
.fragen details[open] summary::after{content:'–'}
.fragen details p{padding:0 0 22px;color:var(--leise)}

.fuss{padding-block:48px 64px;border-top:1px solid var(--fuge)}
.fuss .huelle{display:flex;flex-wrap:wrap;gap:20px 36px;align-items:center;justify-content:space-between;font-size:1rem;color:var(--leise)}
.fuss nav{display:flex;flex-wrap:wrap;gap:12px 28px}
.fuss a{text-decoration:none}
.fuss a:hover{color:var(--text)}
.fuss img{height:35px;width:auto}

.nur-handy{display:none}

.glanz{position:relative;width:min(760px,92vw);margin:0 auto;overflow:hidden}
.glanz::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);
  mix-blend-mode:overlay;transform:translateX(-100%);animation:glanz 2.4s .6s ease-out 1 forwards}
@keyframes glanz{to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.glanz::after{animation:none;display:none}}

@media (max-width:1100px){
  .kopf nav .lang{display:none}
  .anfang .huelle,.moeglich,.demo .huelle{grid-template-columns:1fr}
  .fakten ul{grid-template-columns:1fr 1fr}
  .brauchst{grid-template-columns:1fr 1fr}
  .ranke{display:none}
  .zeile,.zeile:nth-child(even){grid-template-columns:1fr}
  .zeile:nth-child(even) .zeile-bild{order:0}
  .kacheln{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  body{font-size:1.15rem}
  .kopf .huelle{height:64px}
  .marke img{height:48px}
  .kopf nav{display:none}
  .menue{display:block}
  .kopf.offen nav{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    padding:4px var(--rand) 16px;background:rgba(0,0,0,.97);border-bottom:1px solid var(--fuge)}
  .kopf.offen nav a,.kopf.offen nav .lang{display:block;padding:14px 0;font-size:1.15rem}
  .kopf.offen nav a+a{border-top:1px solid var(--fuge)}
  .anfang .huelle{min-height:0;padding-block:20px 56px;gap:40px}
  .anfang .bild{order:2}
  .anfang .handy{width:36%}
  .anfang .handy .zwei{gap:5px}
  .anfang figcaption span{display:none}
  .nur-laptop{display:none!important}
  .nur-handy{display:revert}
  .reihe .knopf,.reihe .zweit{width:100%;padding-inline:30px;font-size:1rem}
  .moeglich ol{display:none}
  .moeglich .schau{display:none}
  .moeglich .nur-handy{display:grid;gap:36px}
  .moeglich .nur-handy figure{margin:0;display:grid;gap:12px}
  .moeglich .nur-handy img{border-radius:4px;box-shadow:0 0 0 1px var(--fuge)}
  .moeglich .nur-handy b{font:600 1.15rem var(--titel)}
  .moeglich .nur-handy span{color:var(--leise);font-size:1.05rem;line-height:1.45}
  .brauchst{grid-template-columns:1fr;gap:24px}
  .fuss .huelle{flex-direction:column;align-items:flex-start}
  .kacheln{grid-template-columns:1fr 1fr;gap:28px 16px}
  .zeile-bild .handys{gap:10px}
  .zeile-bild .geraet{padding-bottom:0;display:grid;gap:14px}
  .zeile-bild .geraet>img{width:100%}
  .zeile-bild .geraet .handys{position:static;width:100%;max-width:340px;margin-inline:auto}
}

.recht .huelle{max-width:calc(68ch + 2*var(--rand));padding-block:56px 96px}
.recht h1{font:600 clamp(1.6rem,5vw,2.6rem)/1.15 var(--titel);margin:0 0 12px;overflow-wrap:break-word}
.recht h2{font:600 1.25rem/1.3 var(--titel);margin:40px 0 10px;scroll-margin-top:100px}
.recht p,.recht li{font-size:1.1rem;line-height:1.6;margin:0 0 12px;overflow-wrap:break-word;hyphens:auto}
.recht ul{padding-left:1.2em;margin:0 0 12px}
.recht a{color:var(--text);overflow-wrap:anywhere}
.recht .entwurf,.recht .hinweis{color:var(--leise);font-size:1rem;border-left:2px solid var(--fuge);padding-left:12px;margin-bottom:32px}
.luecke{background:rgba(255,255,255,.07);outline:1px dashed var(--leise);outline-offset:1px;padding:0 4px;color:var(--leise)}

.recht .verzeichnis h2{font-size:1.15rem;margin:36px 0 4px;overflow-wrap:anywhere}
.recht .verzeichnis .wozu{color:var(--leise);font-size:1rem;margin-bottom:8px}
.recht .verzeichnis p{font-size:1rem;line-height:1.55;overflow-wrap:anywhere}
.recht .verzeichnis b{font-weight:600}