/* =================================================================== TRTDoc — Landingpage Alle Regeln sind unter #trtdoc gekapselt und wirken sich nicht auf Theme, Kopfzeile, Fusszeile oder die WordPress-Adminleiste aus. =================================================================== */ /* Seiten mit diesen Vorlagen liefern das komplette Dokument. Sie duerfen sich nicht darauf verlassen, dass das Elterntheme den Standardabstand des body nullt — sonst verschiebt sich alles um 8px und die klebende Kopfzeile sitzt schief. */ body.trtdoc-de,body.trtdoc-en{margin:0;padding:0} /* Global noetig: weiches Scrollen und Versatz fuer die klebende Kopfzeile */ html{scroll-behavior:smooth;scroll-padding-top:110px} /* =================================================================== Gekapselter Reset — neutralisiert Theme- und Elementor-Vorgaben, ohne ausserhalb von #trtdoc etwas zu veraendern. =================================================================== */ #trtdoc,#trtdoc *,#trtdoc *::before,#trtdoc *::after{ box-sizing:border-box;margin:0;padding:0;border:0;outline:0; background:transparent;color:inherit;font:inherit;font-size:100%; letter-spacing:inherit;text-transform:none;text-decoration:none; text-align:inherit;vertical-align:baseline;float:none;position:static; box-shadow:none;text-shadow:none;transform:none;filter:none; border-radius:0;line-height:inherit;white-space:normal} /* Groessenangaben bewusst NUR auf HTML-Elemente. Auf SVG-Formen wuerde width:auto die Geometrie auf 0 setzen und die Symbole verschwinden lassen. Fremde iframes (Calendly) muessen ihre eigene Groesse behalten. */ #trtdoc,#trtdoc header,#trtdoc footer,#trtdoc section,#trtdoc main,#trtdoc nav, #trtdoc div,#trtdoc p,#trtdoc ul,#trtdoc ol,#trtdoc li,#trtdoc h1,#trtdoc h2, #trtdoc h3,#trtdoc h4,#trtdoc span,#trtdoc a,#trtdoc button,#trtdoc details, #trtdoc summary,#trtdoc input,#trtdoc label,#trtdoc strong,#trtdoc b,#trtdoc i, #trtdoc em,#trtdoc small,#trtdoc blockquote,#trtdoc picture{ min-width:0;max-width:none;min-height:0;width:auto;height:auto} /* Calendly: fremdes Markup vollstaendig in Ruhe lassen */ #trtdoc .calendly-inline-widget{width:100%;min-width:320px} #trtdoc .calendly-inline-widget iframe{ width:100%;height:100%;min-width:0;max-width:none;border:0;display:block} #trtdoc img,#trtdoc svg,#trtdoc picture,#trtdoc source{max-width:100%;display:block;filter:none} #trtdoc details>summary{list-style:none} #trtdoc details ul{list-style:disc} #trtdoc details ul li{list-style:disc;display:list-item} #trtdoc button,#trtdoc input,#trtdoc a{font:inherit;color:inherit;background:none;cursor:pointer; -webkit-appearance:none;appearance:none} #trtdoc input[type=search]{-webkit-appearance:none} #trtdoc{ /* Farben */ --petrol:#00405E; --petrol-mid:#005F89; /* Markenpetrol */ --cyan:#009EE3; /* Markenfarbe: Flaechen, Raender, Fokus */ --cyan-lt:#7FD2F3; /* Text auf Dunkelblau */ /* Von #0076AB auf #005F89: auf dem getoenten Grund lag der Kontrast bei 4,40 und damit unter der Lesbarkeitsgrenze. */ --cyan-txt:#005F89; /* Text auf Hell */ --ink:#0C2632; /* Fliesstext: von #1E3A47 auf #0C2632. Der Abstand zum Motto in #0C2632 war zu gross und wirkte wie zwei verschiedene Schriften. Kontrast auf Weiss steigt von 11,99 auf 13,78. */ --body:#0C2632; --line:rgba(12,38,50,.10); --line-soft:rgba(12,38,50,.06); --card:#E9F1F7; /* Einheitliche Radien (Golden-Gate-Prinzip: gleiche Form überall) */ --r-xl:32px; --r-lg:24px; --r-md:18px; --r-sm:12px; --r-pill:18px; --r-chip:14px; --wrap:1180px; --ease:cubic-bezier(.22,.7,.28,1); --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Inter","Segoe UI",Roboto,system-ui,sans-serif; } #trtdoc *,#trtdoc *::before,#trtdoc *::after{box-sizing:border-box} #trtdoc{ margin:0;font-family:var(--sans);font-size:17.5px;line-height:1.68;color:var(--body); -webkit-font-smoothing:antialiased;font-optical-sizing:auto; background:#EFF5F9; } /* ===== Durchgehende Fläche ===== */ /* ===== Baender statt Fenster ===== */ #trtdoc .t-band{position:relative;overflow:hidden;padding:112px 0} #trtdoc .t-band-light{background:#FFFFFF} #trtdoc .t-band-soft,#trtdoc .t-band-tint{background:#E9F1F7} #trtdoc .t-band-dark{background:linear-gradient(158deg,#00486A,#00405E 50%,#00344E);color:#fff} #trtdoc .t-band-dark::before{content:"";position:absolute;width:780px;height:780px;border-radius:50%; background:radial-gradient(circle,rgba(0,160,220,.26),transparent 66%); top:-320px;right:-220px;pointer-events:none} #trtdoc .t-band-dark::after{content:"";position:absolute;width:600px;height:600px;border-radius:50%; background:radial-gradient(circle,rgba(127,214,248,.14),transparent 68%); bottom:-280px;left:-200px;pointer-events:none} #trtdoc .t-band>.t-wrap{position:relative;z-index:2} #trtdoc .t-band-dark h2,#trtdoc .t-band-dark h3,#trtdoc .t-band-dark h4{color:#fff} #trtdoc .t-band-dark p,#trtdoc .t-band-dark .t-lede,#trtdoc .t-band-dark li{color:#D6E8F2} #trtdoc .t-band-dark .t-big{color:var(--cyan-lt)} #trtdoc .t-band-dark .t-role{color:var(--cyan-lt)} #trtdoc .t-band-dark .t-tile{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.13); box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 18px 44px rgba(0,20,32,.24)} #trtdoc .t-band-dark .t-step:hover{background:rgba(255,255,255,.13);box-shadow:0 18px 44px rgba(0,20,32,.34)} #trtdoc .t-band-dark .t-stepn{-webkit-text-stroke-color:rgba(127,214,248,.55)} #trtdoc .t-band-dark .t-step:hover .t-stepn{color:var(--cyan-lt)} #trtdoc .t-band-dark .t-fee .t-amt{color:var(--cyan-lt)} #trtdoc .t-band-dark .t-toggle{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.26);color:#fff} #trtdoc .t-band-dark .t-toggle:hover{background:rgba(255,255,255,.2);border-color:#fff} #trtdoc .t-band-dark .t-qdisc{color:#B2D6EA} #trtdoc .t-band-dark .t-btn:hover{box-shadow:none} #trtdoc .t-band-dark .t-doc .t-ph{box-shadow:0 22px 50px rgba(0,14,24,.4)} #trtdoc h1,#trtdoc h2,#trtdoc h3,#trtdoc h4{color:var(--ink);margin:0 0 20px;line-height:1.08;font-weight:600; letter-spacing:-.032em} #trtdoc h1{font-size:clamp(1.7rem,3.05vw,2.6rem);line-height:1.12;letter-spacing:-.04em;font-weight:700} #trtdoc h2{font-size:clamp(1.7rem,3.2vw,2.65rem);letter-spacing:-.036em;font-weight:700} #trtdoc h3{font-size:1.16rem;letter-spacing:-.022em;line-height:1.34;margin-bottom:10px;font-weight:600} #trtdoc p{margin:0 0 18px} #trtdoc a{color:var(--cyan-txt)} #trtdoc .t-lede{font-size:1.16rem;max-width:700px;font-weight:450;color:#0C2632;letter-spacing:-.012em} #trtdoc .t-wrap{max-width:var(--wrap);margin:0 auto;padding:0 26px} #trtdoc .t-center{text-align:center} #trtdoc .t-center .t-lede,#trtdoc .t-center>p{margin-left:auto;margin-right:auto} /* ===== Glasebenen (getönt, Golden-Gate-Charakteristik) ===== */ #trtdoc .t-panel{background:#fff; -webkit-backdrop-filter:blur(30px) saturate(165%);backdrop-filter:blur(30px) saturate(165%); border:1px solid rgba(255,255,255,.85);border-radius:var(--r-xl); box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 20px 56px rgba(12,38,50,.09); padding:60px 52px;position:relative;overflow:hidden} #trtdoc .t-band-dark .t-panel{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14); box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 24px 60px rgba(0,20,32,.3)} #trtdoc .t-panel-deep{display:none; background:linear-gradient(160deg,rgba(0,64,94,.95),rgba(0,52,78,.97)); -webkit-backdrop-filter:blur(30px) saturate(150%);backdrop-filter:blur(30px) saturate(150%); border:1px solid rgba(255,255,255,.12);color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 26px 70px rgba(0,32,48,.24)} #trtdoc .t-panel-deep h2,#trtdoc .t-panel-deep h3,#trtdoc .t-panel-deep h4{color:#fff} #trtdoc .t-panel-deep p,#trtdoc .t-panel-deep .t-lede{color:#D6E8F2} #trtdoc .t-tile{background:rgba(255,255,255,.62); -webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%); border:1px solid rgba(255,255,255,.8);border-radius:var(--r-lg); box-shadow:0 8px 26px rgba(12,38,50,.055)} @supports not (backdrop-filter:blur(1px)){ #trtdoc .t-panel{background:rgba(255,255,255,.94)} #trtdoc .t-tile{background:rgba(255,255,255,.96)} } /* ===== Buttons ===== */ #trtdoc .t-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:inherit; font-weight:600;font-size:1.01rem;padding:16px 34px;border-radius:var(--r-pill);text-decoration:none; border:1.5px solid transparent;letter-spacing:-.014em;cursor:pointer; transition:transform .25s var(--ease),background .25s,box-shadow .25s,color .25s,border-color .25s} /* Beim Zeigen aendert sich nur der Grund — keine Anhebung, kein grosser Schatten. Das wirkt ruhiger und verhaelt sich auf Beruehrungsgeraeten identisch, wo es kein Zeigen gibt. */ #trtdoc .t-btn:hover{background-color:var(--petrol)} #trtdoc .t-btn:active{transform:translateY(-1px);box-shadow:0 6px 15px rgba(0,64,94,.22)} #trtdoc .t-btn:focus-visible{outline:3px solid var(--cyan);outline-offset:3px} #trtdoc.t-js .t-rv .t-btn{transition:transform .25s var(--ease),background .25s,box-shadow .25s,color .25s} #trtdoc .t-btn-solid{background:var(--petrol-mid);color:#fff} #trtdoc .t-btn-solid:hover{background:var(--petrol)} #trtdoc .t-btn-white{background:#fff;color:var(--petrol)} #trtdoc .t-btn-white:hover{background:#E9F4FA} #trtdoc .t-btn-outline{background:rgba(255,255,255,.6);color:var(--petrol-mid);border-color:var(--line)} #trtdoc .t-btn-outline:hover{border-color:var(--petrol-mid);background:#fff} #trtdoc .t-btn-ghost{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.4); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)} #trtdoc .t-btn-ghost:hover{background:rgba(255,255,255,.22);border-color:#fff} #trtdoc .t-btn-sm{padding:11px 22px;font-size:.94rem} #trtdoc .t-panel-deep .t-btn:hover,#trtdoc .t-hero .t-btn:hover{box-shadow:none} #trtdoc .t-ic{width:1.15em;height:1.15em;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.9; stroke-linecap:round;stroke-linejoin:round} #trtdoc .t-btn .t-ic{width:19px;height:19px} /* ===== Header ===== */ #trtdoc header{position:sticky;top:0;z-index:60;background:rgba(246,250,252,.66); -webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%); transition:box-shadow .3s,background .3s;border-bottom:1px solid transparent} #trtdoc header.t-scrolled{background:rgba(248,251,253,.88);border-bottom-color:var(--line-soft); box-shadow:0 8px 30px rgba(12,38,50,.06)} #trtdoc .t-hd{display:flex;align-items:center;height:92px;gap:26px;transition:height .3s var(--ease)} #trtdoc header.t-scrolled .t-hd{height:74px} #trtdoc .t-logo{display:inline-flex;align-items:center;text-decoration:none;flex:0 0 auto;min-height:44px} #trtdoc .t-logo img{height:50px;width:auto;display:block;transition:height .3s var(--ease)} #trtdoc header.t-scrolled .t-logo img{height:40px} #trtdoc footer .t-logo img{height:54px} #trtdoc nav{display:flex;gap:24px;margin-left:auto;margin-right:6px} #trtdoc nav a{font-size:.96rem;font-weight:500;color:var(--body);text-decoration:none;position:relative;padding:8px 0; letter-spacing:-.01em} #trtdoc nav a::after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:2px;background:var(--cyan-txt); border-radius:2px;transition:right .3s var(--ease)} #trtdoc nav a:hover,#trtdoc nav a.t-active{color:var(--ink)} #trtdoc nav a:hover::after,#trtdoc nav a.t-active::after{right:0} #trtdoc .t-prog{position:absolute;left:0;bottom:0;height:3px;width:0; background:linear-gradient(90deg,var(--cyan-txt),var(--cyan));border-radius:0 3px 3px 0;transition:width .1s linear} /* ===== Reveal ===== */ #trtdoc.t-js .t-rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)} #trtdoc.t-js .t-rv.t-in{opacity:1;transform:none} #trtdoc.t-js .t-rv[data-d="1"]{transition-delay:.08s} #trtdoc.t-js .t-rv[data-d="2"]{transition-delay:.16s} #trtdoc.t-js .t-rv[data-d="3"]{transition-delay:.24s} /* ===== Fotos ===== */ #trtdoc .t-ph{position:relative;overflow:hidden;background:#DCE8EE;display:block;border-radius:var(--r-md)} #trtdoc .t-ph img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.97) contrast(1.02); transition:transform .9s var(--ease)} #trtdoc .t-ph:hover img{transform:scale(1.035)} #trtdoc .t-ph-sq{aspect-ratio:1/1} /* ===== HERO ===== */ #trtdoc .t-hero{position:relative;overflow:visible;overflow-x:clip; background:linear-gradient(155deg,#00486A 0%,#00405E 46%,#00344E 100%);color:#fff} #trtdoc .t-hero-glow{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none} #trtdoc .t-hero-glow::before{content:"";position:absolute;width:820px;height:820px;border-radius:50%; background:radial-gradient(circle,rgba(0,160,220,.38),transparent 66%); top:-330px;right:-220px;animation:trt-drift 28s ease-in-out infinite alternate} #trtdoc .t-hero-glow::after{content:"";position:absolute;width:620px;height:620px;border-radius:50%; background:radial-gradient(circle,rgba(127,214,248,.20),transparent 68%); bottom:-300px;left:-200px;animation:trt-drift2 34s ease-in-out infinite alternate} @keyframes trt-drift{to{transform:translate(-70px,70px) scale(1.14)}} @keyframes trt-drift2{to{transform:translate(80px,-50px) scale(1.1)}} #trtdoc .t-hero .t-wrap{position:relative;z-index:2} #trtdoc .t-heroA{display:grid;grid-template-columns:.78fr 1.22fr;gap:0 50px;align-items:stretch; padding-block:78px 90px} #trtdoc .t-heroA>*{min-width:0} #trtdoc .t-h-copy{display:flex;flex-direction:column;gap:26px} /* Der Button sitzt am Fuss der Spalte, buendig mit der Unterkante der Karten. Ohne diese Zeile wuerde space-between die vier Elemente auseinanderziehen. */ #trtdoc .t-hero-cta{margin-top:auto;flex:0 0 auto;align-self:flex-start} #trtdoc .t-h-visual{display:flex;flex-direction:column;justify-content:space-between;gap:16px} #trtdoc .t-hero h1{color:#fff;margin-bottom:0} /* Heller als der uebrige Text auf dunklem Grund: #D6E8F2 wirkte neben der reinweissen Ueberschrift matt. #EDF5FA hebt den Kontrast von 7,81 auf 8,92 und bleibt minimal kuehler als die Ueberschrift, damit die Hierarchie erhalten bleibt. */ #trtdoc .t-hero .t-sub{font-size:1.14rem;color:#EDF5FA;font-weight:450;max-width:520px;margin:0 0 26px; letter-spacing:-.012em} /* position und z-index heben die Aerzteliste ueber den Schatten des Fotos: Der traegt 44 Pixel Versatz und 100 Pixel Weichzeichnung bei z-index:1 und faerbte auf schmalen Bildschirmen den ersten Namen ein — 215 statt 255 in den gezeichneten Pixeln. */ #trtdoc .t-docstrip{display:flex;flex-direction:column;gap:14px;margin:0;padding:2px 0 2px 22px; border-left:2px solid rgba(127,214,248,.55);position:relative;z-index:2} #trtdoc .t-docchip{position:relative} #trtdoc .t-docchip b{display:block;color:#fff;font-weight:600;font-size:1rem;line-height:1.35} #trtdoc .t-docchip span{color:#B2D6EA;font-size:.91rem;font-weight:450} #trtdoc .t-hero-note{margin:18px 0 0;font-size:.96rem;color:#B2D6EA;font-weight:450} #trtdoc .t-h-photo{position:relative} #trtdoc .t-h-photo::before{content:"";position:absolute;inset:-8% -6% -14%;border-radius:50%; background:radial-gradient(ellipse,rgba(0,160,220,.4),transparent 66%);filter:blur(48px);z-index:0} #trtdoc .t-h-photo .t-ph{position:relative;z-index:1;border-radius:26px;aspect-ratio:1.62; box-shadow:0 44px 100px rgba(0,12,20,.5),0 0 0 1px rgba(255,255,255,.10)} /* ===== Sektionen ===== */ #trtdoc .t-sections{padding:0} #trtdoc .t-sec-head{margin-bottom:52px;max-width:800px} #trtdoc .t-sec-head.t-center{margin-left:auto;margin-right:auto} /* Statement */ #trtdoc .t-big{font-size:clamp(3.4rem,7.6vw,5.8rem);font-weight:600;color:var(--petrol-mid);line-height:.92; letter-spacing:-.05em;display:block;margin-bottom:16px} #trtdoc .t-big small{font-size:.36em;font-weight:500;vertical-align:super;letter-spacing:-.02em} #trtdoc .t-stmt h2{max-width:17.5em;margin-left:auto;margin-right:auto} /* ===== SELBSTTEST ===== */ #trtdoc .t-quiz{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:start} #trtdoc .t-quiz>*{min-width:0} #trtdoc .t-qlist{display:grid;gap:10px} #trtdoc .t-qrow{display:flex;align-items:center;gap:18px;padding:16px 20px;border-radius:var(--r-md); background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.8);transition:background .25s} #trtdoc .t-qrow:hover{background:rgba(255,255,255,.82)} #trtdoc .t-qrow p{margin:0;flex:1;font-size:1.02rem;font-weight:450;color:var(--ink);letter-spacing:-.012em} #trtdoc .t-seg{display:inline-flex;background:rgba(12,38,50,.06);border-radius:var(--r-chip);padding:3px;flex:0 0 auto} #trtdoc .t-seg button{border:0;background:transparent;font:inherit;font-size:.92rem;font-weight:600;color:var(--body); padding:8px 18px;border-radius:12px;cursor:pointer;transition:background .25s,color .25s,box-shadow .25s} #trtdoc .t-seg button[aria-pressed="true"]{background:#fff;color:var(--petrol);box-shadow:0 2px 8px rgba(12,38,50,.14)} #trtdoc .t-seg button.t-no[aria-pressed="true"]{color:var(--body)} #trtdoc .t-seg button:focus-visible{outline:3px solid var(--cyan);outline-offset:2px} #trtdoc .t-qresult{position:sticky;top:120px;padding:34px 30px;border-radius:var(--r-lg)} #trtdoc .t-qmeter{height:8px;border-radius:8px;background:rgba(12,38,50,.10);overflow:hidden;margin:6px 0 22px} #trtdoc .t-qmeter i{display:block;height:100%;width:0;border-radius:8px; background:linear-gradient(90deg,var(--cyan),var(--petrol-mid));transition:width .5s var(--ease)} #trtdoc .t-qcount{font-size:2.6rem;font-weight:600;color:var(--petrol-mid);letter-spacing:-.04em;line-height:1; display:block;margin-bottom:4px} #trtdoc .t-qcount span{font-size:.4em;font-weight:500;color:var(--body)} #trtdoc .t-qtext{font-size:1.02rem;font-weight:450;margin-bottom:22px;min-height:5.4em} #trtdoc .t-qtext b{color:var(--ink);font-weight:600} #trtdoc .t-qdisc{font-size:.9rem;color:#2C4A57;font-weight:450;margin:20px 0 0;line-height:1.6} #trtdoc .t-qactions{display:flex;flex-direction:column;gap:10px} #trtdoc .t-qactions .t-btn{width:100%} /* ===== Ärzte ===== */ #trtdoc .t-docs{display:grid;gap:0} #trtdoc .t-doc{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(36px,5.5vw,80px);align-items:center; padding:clamp(46px,5.5vw,74px) 0;border-bottom:1px solid rgba(12,38,50,.09)} #trtdoc .t-doc:last-child{border-bottom:0} #trtdoc .t-doc:first-child{padding-top:0} #trtdoc .t-doc>*{min-width:0} #trtdoc .t-doc.t-flip{grid-template-columns:1.18fr .82fr} #trtdoc .t-doc.t-flip .t-doc-media{order:2} #trtdoc .t-doc .t-ph{margin:0;border-radius:var(--r-lg);aspect-ratio:1/1; box-shadow:0 22px 50px rgba(12,38,50,.16)} #trtdoc .t-doc h3{font-size:clamp(1.35rem,2.3vw,1.9rem);letter-spacing:-.032em;margin-bottom:6px} #trtdoc .t-doc .t-role{display:block;font-size:.96rem;font-weight:600;color:var(--cyan-txt);margin-bottom:18px; letter-spacing:-.01em} #trtdoc .t-doc p{font-size:1.03rem;line-height:1.72;font-weight:450;max-width:46em} #trtdoc .t-doc p:last-child{margin-bottom:0} #trtdoc .t-doc .t-quote{font-size:1.03rem;line-height:1.72;color:var(--ink);font-weight:500; letter-spacing:-.012em;margin-bottom:1.1em} #trtdoc .t-doc .t-more{max-height:none;overflow:visible} #trtdoc .t-toggle{background:#fff;border:1px solid var(--line);border-radius:var(--r-chip); padding:10px 20px;font:inherit;font-size:.94rem;font-weight:600;color:var(--petrol-mid);cursor:pointer; display:inline-flex;align-items:center;gap:9px;transition:background .25s,transform .25s var(--ease),border-color .25s} #trtdoc .t-toggle:hover{background:#fff;border-color:var(--petrol-mid)} #trtdoc .t-toggle::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px);transition:transform .3s var(--ease)} #trtdoc .t-doc.t-open .t-toggle::after{transform:rotate(225deg) translateY(-2px)} #trtdoc .t-toggle:focus-visible{outline:3px solid var(--cyan);outline-offset:3px} /* ===== Ablauf ===== */ #trtdoc .t-steps{display:grid;gap:12px} #trtdoc .t-step{display:grid;grid-template-columns:52px 1fr;gap:24px;padding:26px 28px;border-radius:var(--r-md); align-items:start;transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s} #trtdoc .t-step{border:1px solid rgba(12,38,50,.10)} #trtdoc .t-step:hover{transform:translateY(-3px);box-shadow:0 18px 44px rgba(0,64,94,.17); background:#fff;border-color:rgba(0,158,227,.45)} #trtdoc .t-stepn{width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center; font-size:1.35rem;font-weight:600;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums; color:var(--petrol-mid);background:rgba(0,158,227,.10);border:1px solid rgba(0,158,227,.16); transition:background .3s,color .3s,transform .3s var(--ease)} #trtdoc .t-step:hover .t-stepn{background:var(--petrol-mid);color:#fff;border-color:var(--petrol-mid);transform:scale(1.06)} #trtdoc .t-step p{font-size:1.02rem;margin:0;max-width:70ch;font-weight:450} /* ===== CTA ===== */ #trtdoc .t-cta{text-align:center;padding:82px 60px} #trtdoc .t-cta h2{max-width:19.5em;margin-left:auto;margin-right:auto} #trtdoc .t-cta p{max-width:740px;margin:0 auto 26px;font-size:1.12rem;font-weight:450} /* ===== FAQ ===== */ #trtdoc .t-faq-tools{display:flex;gap:11px;flex-wrap:wrap;align-items:center;margin-bottom:34px} #trtdoc .t-chip{background:#fff;border:1.5px solid var(--line);border-radius:var(--r-chip); padding:11px 22px;font:inherit;font-size:.96rem;font-weight:600;color:var(--ink);cursor:pointer; transition:all .25s var(--ease)} #trtdoc .t-chip:hover{border-color:var(--cyan-txt);background:#F4FAFD} #trtdoc .t-chip.t-active{background:var(--petrol-mid);border-color:var(--petrol-mid);color:#fff} #trtdoc .t-chip:focus-visible{outline:3px solid var(--cyan);outline-offset:3px} #trtdoc .t-search{flex:1;min-width:230px} #trtdoc .t-search input{width:100%;padding:13px 20px;border:1.5px solid var(--line);border-radius:var(--r-chip); font:inherit;font-size:1rem;color:var(--ink);background:rgba(255,255,255,.7); transition:border-color .25s,box-shadow .25s,background .25s} #trtdoc .t-search input:focus{outline:none;border-color:var(--cyan-txt);background:#fff; box-shadow:0 0 0 4px rgba(0,158,227,.12)} #trtdoc .t-search input::placeholder{color:#2C4A57;font-weight:450} #trtdoc .t-faqcat{margin-bottom:30px} #trtdoc .t-faqcat[hidden]{display:none} #trtdoc .t-faqcat h4{font-size:1rem;font-weight:700;color:var(--ink);margin:0 0 12px;letter-spacing:-.02em} #trtdoc details{border:1px solid rgba(12,38,50,.12);border-radius:var(--r-md);margin-bottom:10px; background:rgba(255,255,255,.72)} #trtdoc details:hover{background:#fff;border-color:rgba(0,158,227,.5);box-shadow:0 10px 26px rgba(0,64,94,.13)} #trtdoc details[open]{border-color:var(--petrol-mid);background:#fff;box-shadow:0 16px 40px rgba(0,64,94,.17)} #trtdoc details[open] summary{background:rgba(0,158,227,.06);border-radius:var(--r-md) var(--r-md) 0 0} #trtdoc details[hidden]{display:none} #trtdoc summary{padding:19px 24px;font-weight:600;font-size:1.04rem;color:var(--ink);cursor:pointer;list-style:none; display:flex;gap:22px;justify-content:space-between;align-items:flex-start;letter-spacing:-.018em;line-height:1.45} #trtdoc summary::-webkit-details-marker{display:none} #trtdoc summary i{flex:0 0 16px;height:16px;margin-top:5px;position:relative} #trtdoc summary i::before,#trtdoc summary i::after{content:"";position:absolute;background:var(--cyan-txt);border-radius:2px; transition:transform .3s var(--ease),opacity .3s} #trtdoc summary i::before{left:0;top:7px;width:16px;height:2px} #trtdoc summary i::after{left:7px;top:0;width:2px;height:16px} #trtdoc details[open] summary i::after{transform:rotate(90deg);opacity:0} #trtdoc details p{margin:0 0 20px;font-size:1.02rem;font-weight:450;padding:0 24px} #trtdoc details ul{margin:0 0 20px;padding-left:46px;padding-right:24px;font-size:1.02rem;font-weight:450} #trtdoc details li{margin-bottom:6px} #trtdoc .t-noresult{padding:26px 0;font-weight:500} /* ===== Honorar + Rechner ===== */ #trtdoc .t-feegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:40px} #trtdoc .t-feegrid>*{min-width:0} #trtdoc .t-fee{padding:34px 30px;border-radius:var(--r-md);border:1px solid rgba(12,38,50,.10); transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s} #trtdoc .t-fee:hover{transform:translateY(-5px);box-shadow:0 20px 48px rgba(0,64,94,.15); border-color:rgba(0,158,227,.45);background:#fff} #trtdoc .t-fee .t-amt{display:block;font-size:2.4rem;font-weight:600;color:var(--petrol-mid);letter-spacing:-.045em; line-height:1;margin:14px 0 16px} #trtdoc .t-fee p{font-size:1.01rem;margin:0;font-weight:450} #trtdoc .t-calc{padding:38px 36px;border-radius:var(--r-md)} #trtdoc .t-calc-grid{display:grid;grid-template-columns:1fr .8fr;gap:40px;align-items:center} #trtdoc .t-calc-grid>*{min-width:0} #trtdoc .t-ctrl{margin-bottom:26px} #trtdoc .t-ctrl label{display:flex;justify-content:space-between;align-items:baseline;font-weight:600; font-size:1rem;color:var(--ink);margin-bottom:10px;letter-spacing:-.012em} #trtdoc .t-ctrl label b{color:var(--petrol-mid);font-weight:600} #trtdoc input[type=range]{width:100%;-webkit-appearance:none;appearance:none; background:transparent;outline:none} #trtdoc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%; background:#fff;border:1px solid rgba(12,38,50,.10);box-shadow:0 2px 8px rgba(12,38,50,.24);cursor:pointer; transition:transform .2s var(--ease)} #trtdoc input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.1)} #trtdoc input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff; border:1.5px solid rgba(12,38,50,.12);box-shadow:0 3px 10px rgba(12,38,50,.22);cursor:pointer} #trtdoc input[type=range]:focus-visible{box-shadow:0 0 0 4px rgba(0,158,227,.18)} #trtdoc .t-calc-out{text-align:center;padding:30px 24px;border-radius:var(--r-md);background:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.9)} #trtdoc .t-calc-out .t-sum{display:block;font-size:2.7rem;font-weight:600;color:var(--petrol-mid);letter-spacing:-.045em; line-height:1;margin:8px 0} #trtdoc .t-calc-out small{display:block;font-size:.95rem;font-weight:500;color:var(--body)} #trtdoc .t-calc-rows{margin-top:20px;text-align:left;font-size:.97rem;font-weight:450} #trtdoc .t-calc-rows div{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line-soft)} #trtdoc .t-calc-rows div:last-child{border-bottom:0;font-weight:600;color:var(--ink)} /* ===== Buchen ===== */ #trtdoc .t-bookhead{text-align:center;max-width:740px;margin:0 auto 40px} #trtdoc .t-bookhead .t-lede{margin:0 auto} #trtdoc .t-blist{list-style:none;padding:0;margin:0 auto 36px;max-width:960px;display:grid; grid-template-columns:repeat(2,1fr);gap:12px} #trtdoc .t-blist li{display:flex;gap:13px;align-items:flex-start;padding:18px 22px;border-radius:var(--r-md); font-size:1.01rem;font-weight:450} #trtdoc .t-blist .t-ic{width:20px;height:20px;margin-top:3px;color:var(--cyan-txt);flex:0 0 auto} #trtdoc .t-blist b{color:var(--ink);font-weight:600} /* Buchungsbereich bekommt eine breitere Spalte, damit Calendlys zweispaltige Formularansicht ohne Querbalken passt */ #trtdoc #buchen>.t-wrap{max-width:1400px} #trtdoc .t-cal{border-radius:var(--r-md);padding:12px;position:relative;margin:0 auto;width:100%} #trtdoc .t-cal-head{display:flex;align-items:center;gap:12px;padding:16px 20px 18px;border-bottom:1px solid var(--line)} #trtdoc .t-cal-head .t-ic{width:20px;height:20px;color:var(--cyan-txt)} #trtdoc .t-cal-head strong{color:var(--ink);font-weight:600;font-size:1.05rem;letter-spacing:-.015em} #trtdoc .t-cal-head span{margin-left:auto;font-size:.94rem;font-weight:450} #trtdoc .t-cal-frame{border-radius:0 0 var(--r-md) var(--r-md);overflow:hidden;position:relative} #trtdoc .calendly-inline-widget{min-width:320px;height:1420px;width:100%} #trtdoc .t-cal-load{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:13px; font-size:1rem;font-weight:500;background:#fff;transition:opacity .5s;pointer-events:none;z-index:2} #trtdoc .t-cal-load.t-gone{opacity:0} #trtdoc .t-spin{width:20px;height:20px;border:2.5px solid var(--line);border-top-color:var(--cyan-txt); border-radius:50%;animation:trt-sp .8s linear infinite} @keyframes trt-sp{to{transform:rotate(360deg)}} #trtdoc .t-contact{margin-top:44px;padding:46px 40px;border-radius:var(--r-md);text-align:center;max-width:1060px; margin-left:auto;margin-right:auto} #trtdoc .t-contact h3{font-size:1.5rem;margin-bottom:12px} #trtdoc .t-contact p{max-width:660px;margin:0 auto 24px;font-weight:450} #trtdoc .t-contact-actions{display:flex;gap:13px;justify-content:center;flex-wrap:wrap} /* ===== Footer ===== */ #trtdoc footer{background:linear-gradient(165deg,#00405E,#002E45);color:#D6E8F2;padding:74px 0 34px} #trtdoc .t-ft{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:42px} #trtdoc .t-ft>*{min-width:0} #trtdoc .t-ft h4{color:#fff;font-size:1rem;margin-bottom:14px} #trtdoc .t-ft p{font-size:.99rem;color:#D6E8F2;font-weight:450} #trtdoc .t-ft a{color:#D6E8F2;text-decoration:none;font-size:.99rem;display:block;padding:6px 0;font-weight:450; transition:color .2s} #trtdoc .t-ft a:hover{color:var(--cyan-lt)} #trtdoc .t-ft a.t-with-ic{display:inline-flex;align-items:center;gap:10px} #trtdoc .t-ftb{border-top:1px solid rgba(255,255,255,.16);margin-top:48px;padding-top:24px;font-size:.94rem; color:#B2D6EA;font-weight:450} /* Korrekturen fuer dunkle Baender (hoehere Spezifitaet) */ #trtdoc .t-band-dark .t-doc .t-role{color:var(--cyan-lt)} #trtdoc .t-band-dark .t-ctrl label{color:#fff} #trtdoc .t-band-dark .t-ctrl label b{color:var(--cyan-lt)} #trtdoc .t-band-dark .t-band-dark .t-calc-out{background:rgba(255,255,255,.95);border-color:rgba(255,255,255,1)} #trtdoc .t-band-dark .t-calc-out small,#trtdoc .t-band-dark .t-calc-out span,#trtdoc .t-band-dark .t-calc-rows div{color:var(--body)} #trtdoc .t-band-dark .t-calc-out .t-sum{color:var(--cyan-txt)} #trtdoc .t-band-dark .t-calc-rows div:last-child{color:var(--ink)} #trtdoc .t-band-dark .t-fee p{color:#D6E8F2} #trtdoc .t-band-dark .t-feenote,#trtdoc .t-band-dark .t-calc>.t-qdisc{color:#B2D6EA} #trtdoc .t-band-dark .t-stmt .t-big,#trtdoc .t-band-dark .t-big{color:var(--cyan-lt)} /* ===== AMS-Selbsttest ===== */ #trtdoc .t-ams{padding:44px 44px 40px} #trtdoc .t-ams-top{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-bottom:30px} #trtdoc .t-ams-tabs{display:flex;gap:8px;flex-wrap:wrap} #trtdoc .t-ams-tab{display:inline-flex;align-items:center;gap:9px;padding:9px 18px;border-radius:var(--r-chip); background:rgba(12,38,50,.05);border:1px solid transparent;font-size:.93rem;font-weight:600; color:var(--body);transition:all .3s var(--ease)} #trtdoc .t-ams-tab.t-on{background:rgba(12,38,50,.05);color:var(--ink)} #trtdoc .t-ams-tab.t-on em{background:var(--cyan);color:#0C2632;font-weight:600} #trtdoc .t-ams-tab.t-done{background:rgba(12,38,50,.05);color:var(--ink);border-color:transparent} #trtdoc .t-ams-tab.t-done em{background:var(--petrol-mid);color:#fff} #trtdoc .t-ams-tab em{font-style:normal;width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:.875rem;font-weight:600;background:rgba(12,38,50,.09);color:var(--body);transition:background .25s var(--ease),color .25s var(--ease)} #trtdoc .t-ams-tab.t-done em::after{content:"✓"} #trtdoc .t-ams-tab.t-done em{font-size:.88rem} #trtdoc .t-ams-count{margin-left:auto;font-size:.94rem;font-weight:500;color:var(--body); font-variant-numeric:tabular-nums} #trtdoc .t-ams-bar{height:6px;border-radius:6px;background:rgba(12,38,50,.09);overflow:hidden;margin-bottom:30px} #trtdoc .t-ams-bar i{display:block;height:100%;width:0;border-radius:6px; background:linear-gradient(90deg,var(--cyan),var(--petrol-mid));transition:width .45s var(--ease)} #trtdoc .t-ams-group[hidden]{display:none} #trtdoc .t-q{padding:18px 0;border-bottom:1px solid var(--line-soft);display:grid; grid-template-columns:1fr auto;gap:14px 26px;align-items:center} #trtdoc .t-q:last-child{border-bottom:0} #trtdoc .t-q p{margin:0;font-size:1.02rem;font-weight:450;color:var(--ink);letter-spacing:-.012em} #trtdoc .t-q p b{font-weight:600;color:var(--petrol-mid);margin-right:8px;font-variant-numeric:tabular-nums} #trtdoc .t-scale{display:flex;gap:6px;flex:0 0 auto} #trtdoc .t-scale button{width:46px;height:42px;border-radius:12px;border:1px solid var(--line); background:rgba(255,255,255,.7);font:inherit;font-size:.88rem;font-weight:600;color:var(--body); cursor:pointer;transition:all .22s var(--ease);display:flex;align-items:center;justify-content:center; flex-direction:column;line-height:1.1} #trtdoc .t-scale button:hover{border-color:var(--cyan-txt);background:#F4FAFD} #trtdoc .t-scale button[aria-checked="true"]{background:var(--petrol-mid);border-color:var(--petrol-mid);color:#fff; box-shadow:0 6px 16px rgba(0,95,137,.28)} #trtdoc .t-scale button:focus-visible{outline:3px solid var(--cyan);outline-offset:2px} /* Selbsttest-Navigation: Hinweis auf eigener Zeile, Schaltflaechen in fester Reihe. Dadurch wandert "Weiter" nicht mehr, wenn der Hinweistext seine Laenge aendert oder "Zurueck" erscheint. */ #trtdoc .t-ams-nav{display:flex;flex-direction:column;gap:16px;margin-top:28px} #trtdoc .t-ams-nav-btns{display:flex;gap:12px;align-items:center} #trtdoc .t-ams-nav-btns .t-btn{flex:1 1 0;justify-content:center;min-width:0} /* Auf Schritt 1 bleibt "Zurueck" im Platz, nur unsichtbar — sonst springt "Weiter" beim Wechsel von Schritt 1 auf 2. */ #trtdoc #amsPrev[hidden]{display:inline-flex;visibility:hidden;pointer-events:none} @media (min-width:701px){ #trtdoc .t-ams-nav{flex-direction:row;align-items:center;justify-content:space-between;gap:20px} #trtdoc .t-ams-nav .t-ams-hint{order:2;text-align:center;flex:1 1 auto} #trtdoc .t-ams-nav-btns{order:3;flex:0 0 auto} #trtdoc .t-ams-nav-btns .t-btn{flex:0 0 auto} } #trtdoc .t-ams-hint{font-size:.92rem;font-weight:450;color:#2C4A57;align-self:center} #trtdoc .t-ams-result[hidden]{display:none} #trtdoc .t-ams-result{margin-top:6px} #trtdoc .t-res-top{display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:center; padding:30px 32px;border-radius:var(--r-lg);background:rgba(0,158,227,.06); border:1px solid rgba(0,158,227,.14);margin-bottom:26px} #trtdoc .t-res-score{text-align:center} #trtdoc .t-res-score b{display:block;font-size:3.2rem;font-weight:600;color:var(--petrol-mid);line-height:1; letter-spacing:-.045em;font-variant-numeric:tabular-nums} #trtdoc .t-res-score span{font-size:.9rem;font-weight:500;color:var(--body)} #trtdoc .t-res-cat{font-size:1.3rem;font-weight:600;color:var(--ink);margin:0 0 8px;letter-spacing:-.02em} #trtdoc .t-res-txt{margin:0;font-size:1.02rem;font-weight:450} #trtdoc .t-subs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:26px} #trtdoc .t-ams-sub{padding:20px 22px;border-radius:var(--r-md)} #trtdoc .t-ams-sub h4{font-size:.98rem;margin:0 0 4px;font-weight:600} #trtdoc .t-ams-sub .t-val{font-size:1.5rem;font-weight:600;color:var(--petrol-mid);letter-spacing:-.03em; font-variant-numeric:tabular-nums} #trtdoc .t-ams-sub .t-val small{font-size:.62em;font-weight:500;color:var(--body)} #trtdoc .t-ams-sub .t-track{height:5px;border-radius:5px;background:rgba(12,38,50,.09);overflow:hidden;margin-top:10px} #trtdoc .t-ams-sub .t-track i{display:block;height:100%;border-radius:5px;background:var(--petrol-mid);width:0; transition:width .6s var(--ease)} #trtdoc .t-res-actions{display:flex;gap:12px;flex-wrap:wrap} @media (max-width:1000px){ #trtdoc .t-ams{padding:26px 20px 28px} #trtdoc .t-q{grid-template-columns:1fr;gap:12px} #trtdoc .t-scale{justify-content:space-between} #trtdoc .t-scale button{flex:1;width:auto} #trtdoc .t-scale-legend{max-width:none;margin-left:0} #trtdoc .t-res-top{grid-template-columns:1fr;gap:18px;text-align:center;padding:24px 20px} #trtdoc .t-subs{grid-template-columns:1fr} } /* FAQ: weiches Auf- und Zuklappen */ #trtdoc .t-faq-body{height:0;overflow:hidden;will-change:height} #trtdoc .t-faq-inner{opacity:0;transform:translateY(-7px); transition:opacity .36s var(--ease-aus) .05s,transform .44s var(--ease-aus) .05s} #trtdoc details.t-opening .t-faq-inner,#trtdoc details[open].t-done .t-faq-inner{opacity:1;transform:none} #trtdoc details.t-closing .t-faq-inner{opacity:0;transform:translateY(-5px); transition:opacity .16s var(--ease-ein),transform .2s var(--ease-ein)} #trtdoc summary i::before,#trtdoc summary i::after{transition:transform .4s var(--ease),opacity .3s var(--ease)} #trtdoc details[open] summary i::before{transform:rotate(180deg)} #trtdoc summary{transition:color .25s var(--ease),padding .3s var(--ease)} #trtdoc details{transition:border-color .3s var(--ease),box-shadow .35s var(--ease),background .3s var(--ease), transform .3s var(--ease)} #trtdoc details[open]{transform:translateY(-1px)} @media (prefers-reduced-motion:reduce){ #trtdoc .t-faq-body{transition:none!important} #trtdoc .t-faq-inner{opacity:1!important;transform:none!important} } /* ===== Schwebende Info-Karten am Hero-Bild ===== */ #trtdoc .t-h-photo{--mx:0;--my:0} /* Drei gleich breite Glaselemente unter dem Bild */ #trtdoc .t-hero-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0;position:relative;z-index:4} #trtdoc .t-hero-card{position:relative;display:flex;align-items:flex-start;gap:11px;padding:15px 17px; border-radius:var(--r-md);color:var(--ink);max-width:none; background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.96); -webkit-backdrop-filter:blur(34px) saturate(200%);backdrop-filter:blur(34px) saturate(200%); box-shadow:0 18px 42px rgba(0,14,24,.30),inset 0 1px 0 rgba(255,255,255,1), inset 0 -1px 0 rgba(12,38,50,.05); transition:transform .25s var(--ease),background .25s,box-shadow .25s var(--ease)} #trtdoc .t-hero-card:hover{background:#fff;transform:translateY(-3px);box-shadow:0 28px 58px rgba(0,14,24,.4)} #trtdoc .t-hero-card:active{transform:translateY(-1px)} #trtdoc .t-hero-card .t-ic{width:19px;height:19px;color:var(--petrol-mid);flex:0 0 auto;margin-top:3px;stroke-width:2.2} #trtdoc .t-hero-card b{display:block;font-size:1.01rem;color:var(--ink);font-weight:600; letter-spacing:-.02em;line-height:1.25;margin-bottom:3px} #trtdoc .t-hero-card span{display:block;font-size:.89rem;color:#2C4A57;font-weight:450;line-height:1.38} #trtdoc .t-hero-card-a{transform:translate3d(calc(var(--mx)*-7px),calc(var(--my)*-5px),0)} #trtdoc .t-hero-card-b{transform:translate3d(calc(var(--mx)*0px),calc(var(--my)*-5px),0)} #trtdoc .t-hero-card-c{transform:translate3d(calc(var(--mx)*7px),calc(var(--my)*-5px),0)} #trtdoc .t-hero-card-a:hover{transform:translate3d(calc(var(--mx)*-7px),calc(var(--my)*-5px),0) translateY(-3px)} #trtdoc .t-hero-card-b:hover{transform:translate3d(0,calc(var(--my)*-5px),0) translateY(-3px)} #trtdoc .t-hero-card-c:hover{transform:translate3d(calc(var(--mx)*7px),calc(var(--my)*-5px),0) translateY(-3px)} #trtdoc .t-hero-card-a:hover,#trtdoc .t-hero-card-b:hover{ transform:translate3d(calc(var(--mx)*-14px),calc(var(--my)*-10px),0) scale(1.035)} #trtdoc .t-hero-card-b:hover{transform:translate3d(calc(var(--mx)*12px),calc(var(--my)*9px),0) scale(1.035)} /* ===== Zusaetzliche Interaktion ===== */ /* Fortschrittslinie im Ablauf, die beim Scrollen mitwaechst */ #trtdoc .t-steps{position:relative;padding-left:0} #trtdoc .t-steps::before{content:"";position:absolute;left:25px;top:26px;bottom:26px;width:2px; background:rgba(12,38,50,.09);border-radius:2px} #trtdoc .t-steps-fill{position:absolute;left:25px;top:26px;width:2px;height:0;border-radius:2px;z-index:0; background:linear-gradient(180deg,var(--cyan),var(--petrol-mid));transition:height .3s linear} #trtdoc .t-step{position:relative;z-index:1} #trtdoc .t-step .t-stepn{position:relative;z-index:2} #trtdoc .t-step.t-reached .t-stepn{background:var(--petrol-mid);color:#fff;border-color:var(--petrol-mid)} /* Hero-Foto bewegt sich beim Scrollen minimal langsamer */ /* Arztfotos reagieren feiner */ #trtdoc .t-doc .t-ph{transition:box-shadow .4s var(--ease),transform .4s var(--ease)} #trtdoc .t-doc:hover .t-ph{transform:translateY(-4px);box-shadow:0 26px 56px rgba(12,38,50,.2)} /* Preiskarten: Betrag hebt sich beim Ueberfahren */ #trtdoc .t-fee .t-amt{transition:transform .3s var(--ease),color .3s} #trtdoc .t-fee:hover .t-amt{transform:scale(1.06);transform-origin:left center;color:var(--petrol)} /* ===== Karten: weiss, klar abgesetzt ===== */ #trtdoc .t-tile,#trtdoc .t-step,#trtdoc #faqlist details,#trtdoc .t-fee,#trtdoc .t-blist li,#trtdoc .t-contact,#trtdoc .t-panel,#trtdoc .t-cal{ background:#fff;border:1px solid rgba(12,38,50,.10);border-radius:var(--r-md); box-shadow:0 1px 2px rgba(12,38,50,.03),0 8px 22px rgba(12,38,50,.05); transition:transform .25s var(--ease),background .25s,box-shadow .25s var(--ease),border-color .25s} #trtdoc .t-step:hover,#trtdoc .t-fee:hover,#trtdoc .t-blist li:hover{transform:translateY(-3px); border-color:rgba(0,158,227,.45);box-shadow:0 14px 34px rgba(0,64,94,.13)} #trtdoc .t-step:active,#trtdoc .t-fee:active{transform:translateY(-1px)} #trtdoc #faqlist details:hover{border-color:rgba(0,158,227,.45);box-shadow:0 12px 30px rgba(0,64,94,.12)} #trtdoc #faqlist details[open]{border-color:var(--petrol-mid);box-shadow:0 16px 38px rgba(0,64,94,.15)} #trtdoc #faqlist details[open] summary{background:rgba(0,158,227,.05)} /* Elemente innerhalb der weissen Karten leicht getönt */ #trtdoc .t-ams-sub{background:var(--card);border:1px solid rgba(12,38,50,.07);box-shadow:none} #trtdoc .t-q{border-bottom-color:rgba(12,38,50,.09)} #trtdoc .t-qresult{background:var(--card);border:1px solid rgba(12,38,50,.07);box-shadow:none} #trtdoc .t-scale button{background:var(--card);border-color:rgba(12,38,50,.10)} #trtdoc .t-scale button:hover{background:#fff} #trtdoc .t-scale button[aria-checked="true"]{background:var(--petrol-mid);border-color:var(--petrol-mid)} #trtdoc .t-calc .t-calc-out{background:var(--card);border-color:rgba(12,38,50,.07)} /* ===== Dunkles Band wie im Hero ===== */ #trtdoc .t-band-dark{background:linear-gradient(155deg,#00486A 0%,#00405E 46%,#00344E 100%);color:#fff; position:relative;overflow:hidden} #trtdoc .t-band-dark::before{content:"";position:absolute;width:760px;height:760px;border-radius:50%; background:radial-gradient(circle,rgba(0,160,220,.30),transparent 66%); top:-320px;right:-200px;pointer-events:none} #trtdoc .t-band-dark::after{content:"";position:absolute;width:600px;height:600px;border-radius:50%; background:radial-gradient(circle,rgba(127,214,248,.16),transparent 68%); bottom:-280px;left:-190px;pointer-events:none} #trtdoc .t-band-dark>.t-wrap{position:relative;z-index:2} #trtdoc .t-band-dark h2{color:#fff} #trtdoc .t-band-dark p,#trtdoc .t-band-dark .t-lede{color:#D6E8F2} #trtdoc .t-band-dark .t-btn-solid{background:#fff;color:var(--petrol)} #trtdoc .t-band-dark .t-btn-solid:hover{background:#E6F3FA;color:var(--petrol)} #trtdoc .t-band-dark .t-btn:hover{box-shadow:none} /* Honorar auf dunklem Grund */ #trtdoc .t-band-dark .t-feenote{color:#D6E8F2} #trtdoc .t-band-dark .t-fee p{color:var(--body)} #trtdoc .t-band-dark .t-calc>p{color:var(--body)} #trtdoc .t-band-dark .t-ctrl label{color:var(--body)} #trtdoc .t-band-dark .t-ctrl label b{color:var(--cyan-txt)} /* Honorar auf dunklem Grund: Karten bleiben weiss */ #trtdoc .t-band-dark .t-fee,#trtdoc .t-band-dark .t-calc,#trtdoc .t-band-dark .t-tile{background:#fff; border:1px solid rgba(255,255,255,.22); box-shadow:0 18px 44px rgba(0,20,32,.28)} #trtdoc .t-band-dark .t-fee h3,#trtdoc .t-band-dark .t-calc h3{color:var(--ink)} #trtdoc .t-band-dark .t-fee p,#trtdoc .t-band-dark .t-calc p{color:var(--body)} #trtdoc .t-band-dark .t-calc .t-qdisc{color:#2C4A57} #trtdoc .t-band-dark .t-fee .t-amt{color:var(--cyan-txt)} #trtdoc .t-band-dark .t-ctrl label{color:var(--body)} #trtdoc .t-band-dark .t-ctrl label b{color:var(--cyan-txt)} #trtdoc .t-band-dark .t-band-dark .t-calc-out{background:var(--card);border-color:rgba(12,38,50,.07)} #trtdoc .t-band-dark .t-calc-out .t-sum{color:var(--cyan-txt)} #trtdoc .t-band-dark .t-calc-out small,#trtdoc .t-band-dark .t-calc-rows div,#trtdoc .t-band-dark .t-calc-rows span{color:var(--body)} #trtdoc .t-band-dark .t-calc-rows div:last-child,#trtdoc .t-band-dark .t-calc-rows div:last-child span{color:var(--ink)} #trtdoc .t-band-dark .t-fee:hover{border-color:var(--cyan);box-shadow:0 26px 58px rgba(0,20,32,.38)} #trtdoc .t-band-dark .t-feenote{color:#D6E8F2} /* ===== Akzentsystem: Markenzyan #009EE3 konsequent ===== */ /* Zahlen tragen den Akzent */ #trtdoc .t-big{color:var(--cyan-txt)} #trtdoc .t-fee .t-amt{color:var(--cyan-txt)} #trtdoc .t-calc-out .t-sum{color:var(--cyan-txt)} #trtdoc .t-res-score b,#trtdoc .t-qcount{color:var(--cyan-txt)} /* Hover: Rand und Schimmer in der Markenfarbe */ #trtdoc .t-step:hover,#trtdoc .t-fee:hover,#trtdoc .t-blist li:hover,#trtdoc #faqlist details:hover,#trtdoc .t-hero-card:hover,#trtdoc .t-contact:hover,#trtdoc .t-tile:hover{border-color:var(--cyan)} #trtdoc #faqlist details[open]{border-color:var(--cyan)} #trtdoc .t-chip:hover{border-color:var(--cyan)} #trtdoc .t-search input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,158,227,.16)} #trtdoc .t-toggle:hover{border-color:var(--cyan)} #trtdoc .t-qrow:hover{border-color:var(--cyan)} /* Fortschritt und Linien in der Markenfarbe */ #trtdoc .t-prog{background:linear-gradient(90deg,var(--petrol-mid),var(--cyan))} #trtdoc .t-steps-fill{background:linear-gradient(180deg,var(--cyan),var(--petrol-mid))} #trtdoc .t-ams-bar i,#trtdoc .t-qmeter i{background:linear-gradient(90deg,var(--petrol-mid),var(--cyan))} #trtdoc nav a::after{background:var(--cyan)} /* Ablaufziffer: beim Ueberfahren Markenfarbe mit dunklem Text */ #trtdoc .t-step:hover .t-stepn{background:var(--petrol-mid);color:#fff;border-color:var(--petrol-mid)} #trtdoc .t-step.t-reached .t-stepn{background:var(--petrol-mid);color:#fff;border-color:var(--petrol-mid)} /* Buttons: Fokus und Lichtsaum */ #trtdoc .t-btn:focus-visible,#trtdoc .t-chip:focus-visible,#trtdoc .t-toggle:focus-visible,#trtdoc .t-scale button:focus-visible,#trtdoc .t-seg button:focus-visible,#trtdoc a:focus-visible,#trtdoc summary:focus-visible,#trtdoc input:focus-visible{ outline:3px solid var(--cyan);outline-offset:3px} #trtdoc .t-btn-solid:hover{background:var(--petrol);box-shadow:0 12px 30px rgba(0,158,227,.34)} #trtdoc .t-btn-white:hover{box-shadow:0 12px 30px rgba(0,158,227,.30)} #trtdoc .t-btn-outline:hover{border-color:var(--cyan);color:var(--cyan-txt)} /* Auswahl im Selbsttest */ #trtdoc .t-scale button[aria-checked="true"],#trtdoc .t-seg button[aria-pressed="true"]{ background:var(--petrol-mid);border-color:var(--petrol-mid)} #trtdoc .t-scale button:hover{border-color:var(--cyan)} /* Textmarkierung */ #trtdoc ::selection{background:rgba(0,158,227,.22);color:var(--ink)} /* ===== Feinschliff: Tippziele, Kleinstschrift, sehr schmale Geraete ===== */ /* Mindestgrösse für Tippziele nach Apples Richtlinie */ #trtdoc .t-chip{padding:13px 22px} #trtdoc nav a{padding:11px 0} #trtdoc .t-ft a{padding:10px 0} #trtdoc .t-ft a.t-with-ic{padding:10px 0} #trtdoc .t-verify{padding:8px 0;display:inline-flex} #trtdoc .t-toggle{padding:12px 20px} #trtdoc .t-scale button{min-height:46px} #trtdoc .t-seg button{min-height:44px;padding:11px 18px} #trtdoc summary{min-height:56px} /* Schieberegler: grössere Trefferfläche */ #trtdoc input[type=range]{height:40px;background:transparent;padding:0;cursor:pointer;margin:0} #trtdoc input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:rgba(12,38,50,.16)} #trtdoc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;margin-top:-10px;width:24px;height:24px} #trtdoc input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:rgba(12,38,50,.16)} #trtdoc .t-band-dark input[type=range]::-webkit-slider-runnable-track{background:rgba(12,38,50,.16)} #trtdoc .t-band-dark input[type=range]::-moz-range-track{background:rgba(12,38,50,.16)} #trtdoc .t-ctrl{margin-bottom:18px} @media (max-width:400px){ #trtdoc .t-wrap{padding:0 18px} /* Kalender randabfallend, damit Calendlys Mindestbreite passt */ #trtdoc .t-cal{margin-left:-18px;margin-right:-18px;border-radius:0;padding:0;border-left:0;border-right:0} #trtdoc .t-cal-head{padding:14px 16px} #trtdoc .t-cal-load{left:0;right:0;bottom:0} #trtdoc .calendly-inline-widget{min-width:0} #trtdoc .t-step{grid-template-columns:42px 1fr;gap:14px;padding:20px 16px} #trtdoc .t-stepn{width:42px;height:42px;border-radius:12px;font-size:1.1rem} #trtdoc .t-step>*{min-width:0} #trtdoc .t-hero-card{padding:12px 14px} #trtdoc summary{padding:17px 18px;gap:14px} #trtdoc #faqlist details p{padding:0 18px} #trtdoc #faqlist details ul{padding-left:38px;padding-right:18px} #trtdoc .t-panel{padding:26px 18px} #trtdoc .t-fee,#trtdoc .t-calc{padding:26px 20px} #trtdoc .t-blist li{padding:16px 18px} #trtdoc .t-contact{padding:30px 20px} } /* AMS-Reiter: dunkelblauer Grund, hellblauer Kreis, weisse Ziffer */ #trtdoc .t-ams-tab.t-on{background:var(--petrol-mid);color:#fff} #trtdoc .t-ams-tab.t-on em{background:#fff;color:var(--petrol-mid)} #trtdoc .t-ams-tab.t-done{background:rgba(0,158,227,.10);color:var(--petrol-mid); border-color:rgba(0,158,227,.24)} #trtdoc .t-ams-tab.t-done em{background:var(--petrol-mid);color:#fff} /* ===== Kostenrechner: Auswahlflaechen statt Schieberegler ===== */ #trtdoc .t-calc-intro{margin-bottom:32px} #trtdoc .t-opt{margin-bottom:26px} #trtdoc .t-opt:last-child{margin-bottom:0} #trtdoc .t-opt-lbl{display:block;font-size:.88rem;font-weight:600;letter-spacing:.06em; text-transform:uppercase;color:#2C4A57;margin-bottom:10px} #trtdoc .t-segrp{display:flex;gap:8px;flex-wrap:wrap} #trtdoc .t-segb{flex:1 1 0;min-width:150px;min-height:52px;padding:14px 18px;border-radius:var(--r-chip); border:1.5px solid rgba(12,38,50,.12);background:#fff;font:inherit;font-size:1rem; font-weight:500;color:var(--ink);cursor:pointer;text-align:center; transition:border-color .25s var(--ease),background .25s var(--ease), box-shadow .25s var(--ease),transform .25s var(--ease),color .25s var(--ease)} #trtdoc .t-segb:hover{border-color:var(--cyan);background:#F4FAFD} #trtdoc .t-segb.t-on{border-color:var(--petrol-mid);background:var(--petrol-mid);color:#fff; box-shadow:0 10px 24px rgba(0,64,94,.24)} #trtdoc .t-segb.t-on:hover{border-color:var(--petrol-mid)} #trtdoc .t-segb:focus-visible{outline:3px solid var(--cyan);outline-offset:3px} #trtdoc .t-band-dark .t-segb{background:#fff;border-color:rgba(12,38,50,.12);color:var(--ink)} #trtdoc .t-band-dark .t-segb.t-on{background:var(--petrol-mid);border-color:var(--petrol-mid);color:#fff} #trtdoc .t-band-dark .t-opt-lbl{color:#2C4A57} @media (max-width:1000px){ #trtdoc .t-segb{min-width:0;flex:1 1 140px} } /* ===== Sticky mobil ===== */ @media (max-width:1000px){ #trtdoc .t-heroA{grid-template-columns:1fr;gap:26px} #trtdoc .t-h-copy,#trtdoc .t-h-visual{gap:22px} #trtdoc .t-quiz,#trtdoc .t-calc-grid{grid-template-columns:1fr;gap:28px} #trtdoc .t-qresult{position:static} #trtdoc .t-feegrid,#trtdoc .t-ft,#trtdoc .t-blist{grid-template-columns:1fr} #trtdoc .t-doc,#trtdoc .t-doc.t-flip{grid-template-columns:1fr;gap:26px} #trtdoc .t-doc.t-flip .t-doc-media{order:0} #trtdoc .t-step{grid-template-columns:46px 1fr;gap:16px;padding:22px 20px} #trtdoc .t-hero-cards{grid-template-columns:1fr;gap:9px;margin-top:12px} #trtdoc .t-hero-card{padding:13px 15px;border-radius:15px;transform:none!important} #trtdoc .t-hero-card b{font-size:.98rem} #trtdoc .t-hero-card span{font-size:.88rem} #trtdoc .t-steps::before,#trtdoc .t-steps-fill{left:43px} #trtdoc .t-stepn{width:46px;height:46px;border-radius:14px;font-size:1.2rem} #trtdoc .t-panel{padding:34px 22px;border-radius:var(--r-lg)} #trtdoc .t-band{padding:66px 0} #trtdoc .t-cta{padding:52px 24px} #trtdoc .t-calc,#trtdoc .t-contact{padding:30px 22px} #trtdoc .t-cal{padding:6px} #trtdoc .calendly-inline-widget{height:1720px} #trtdoc .t-cal-head{padding:14px;flex-wrap:wrap} #trtdoc .t-cal-head span{margin-left:0;width:100%;margin-top:4px} #trtdoc .t-qrow{flex-wrap:wrap;gap:12px} #trtdoc nav{display:none} } @media (prefers-reduced-motion:reduce){ #trtdoc *,#trtdoc *::before,#trtdoc *::after{transition:none!important;animation:none!important;scroll-behavior:auto} #trtdoc.t-js .t-rv{opacity:1;transform:none} } /* =================================================================== Kopfzeile auf kleinen Geraeten Der Button darf nie umbrechen — sonst waechst die Kopfzeile auf das Doppelte. Auf schmalen Schirmen entfaellt zusaetzlich das Wort "Online". =================================================================== */ #trtdoc .t-btn{white-space:nowrap} @media (max-width:1000px){ #trtdoc .t-wide-only{display:none} #trtdoc .t-hd{height:64px;gap:14px} #trtdoc header.t-scrolled .t-hd{height:58px} #trtdoc .t-logo img{height:34px} #trtdoc header.t-scrolled .t-logo img{height:30px} #trtdoc header .t-btn{padding:10px 16px;font-size:.94rem;min-height:44px} #trtdoc header .t-btn .t-ic{width:17px;height:17px} } @media (max-width:360px){ #trtdoc header .t-btn{padding:10px 13px;font-size:.9rem} #trtdoc .t-logo img{height:30px} } /* =================================================================== Calendly auf sehr schmalen Geraeten Das Widget erzwingt 320px Mindestbreite. Auf einem 320px-Schirm passt das nur, wenn der Abschnitt ueber die volle Breite laeuft. =================================================================== */ @media (max-width:400px){ #trtdoc .t-cal{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw); padding:0;border-radius:0;border-left:0;border-right:0} #trtdoc .t-cal-frame{border-radius:0} #trtdoc .calendly-inline-widget{min-width:0;width:100%} } /* =================================================================== RECHTSTEXTE — Impressum, Datenschutzerklaerung Ruhige Lesespalte, mitlaufendes Inhaltsverzeichnis, gleiche Formensprache wie die Landingpage. =================================================================== */ #trtdoc.t-legal-page{background:#fff} #trtdoc .t-legal{padding:56px 0 96px} /* Zurueck-Verweis: als Umriss-Schaltflaeche statt als schlichter Textlink — zuvor war er kaum als Bedienelement erkennbar. */ #trtdoc .t-back{display:inline-flex;align-items:center;gap:9px; padding:0 18px;min-height:46px;border-radius:var(--r-md); border:1px solid rgba(12,38,50,.16);background:#fff; font-size:.98rem;font-weight:500;color:var(--petrol-mid); text-decoration:none;margin-bottom:30px; transition:background .22s var(--ease),border-color .22s var(--ease),color .22s var(--ease)} #trtdoc .t-back:hover{background:#F4FAFD;border-color:var(--petrol-mid);color:var(--petrol)} #trtdoc .t-back .t-ic{width:18px;height:18px;stroke-width:2.2} /* Zuvor width:100% — der Verweis lief ueber die ganze Breite und sah dadurch voellig anders aus als der gleiche Knopf oben. Die Trennlinie darueber liegt jetzt auf einem eigenen Element. */ #trtdoc .t-back-end{margin-top:0} #trtdoc .t-legal .t-wrap > .t-back-end{margin-top:52px} #trtdoc .t-legal h1{font-size:clamp(2rem,4.4vw,3rem);letter-spacing:-.035em;line-height:1.08; color:var(--ink);margin:18px 0 10px} #trtdoc .t-stand{font-size:.94rem;color:#2C4A57;margin-bottom:44px} /* Mehr Luft zwischen Inhaltsverzeichnis und Text: 64 auf 96 Pixel. */ #trtdoc .t-legal-grid{display:grid;grid-template-columns:246px minmax(0,1fr);gap:0 96px;align-items:start} /* Inhaltsverzeichnis */ /* display:block hebt die Regel #trtdoc nav{display:flex} auf. Diese gilt der Kopfzeilen-Navigation, trifft aber jedes nav — auch dieses Inhaltsverzeichnis. Ohne die Aufhebung stehen Titel und Liste nebeneinander und der Titel ragt in die senkrechte Linie hinein. */ #trtdoc .t-toc{display:block;margin-left:0;margin-right:0;gap:0; position:sticky;top:112px;max-height:calc(100vh - 150px);overflow-y:auto; padding-right:12px} /* Der Titel stand auf #2C4A57 mit Kontrast 6,0 — neben dem pechschwarzen Fliesstext wirkte das ausgegraut. */ #trtdoc .t-toc-titel{display:block;font-size:.95rem;font-weight:600;letter-spacing:.06em; text-transform:uppercase;color:#0C2632;margin-bottom:18px} /* Die Trennlinie war mit 10 Prozent Deckkraft kaum zu sehen. */ #trtdoc .t-toc ol{list-style:none;counter-reset:toc;border-left:1px solid rgba(12,38,50,.18)} #trtdoc .t-toc li{counter-increment:toc} /* Eintraege von #2C4A57 (Kontrast 7,2) auf #0C2632 (12,1) und von 14,7 auf 16 Pixel. Der Abstand zur senkrechten Linie waechst von 16 auf 24 Pixel. */ #trtdoc .t-toc a{display:block;padding:9px 0 9px 24px;margin-left:-1px;font-size:1rem; line-height:1.4;color:#0C2632;font-weight:450;text-decoration:none; border-left:2px solid transparent; transition:color .25s var(--ease),border-color .25s var(--ease)} #trtdoc .t-toc a:hover{color:var(--petrol-mid)} #trtdoc .t-toc a.t-cur{color:var(--petrol-mid);font-weight:600;border-left-color:var(--petrol-mid)} /* Textkoerper */ /* Breitere Spalte und groessere Schrift: 593 auf 820 Pixel, 16,5 auf 19,5 Pixel. Das ergibt rund 82 Zeichen je Zeile — etwas ueber dem Ideal von 60 bis 75, bei Rechtstexten aber vertretbar, weil sie ueberflogen und nicht am Stueck gelesen werden. */ #trtdoc .t-legal-body{max-width:820px;font-size:1.22rem;line-height:1.72;color:var(--body)} #trtdoc .t-legal-body h2{font-size:1.45rem;letter-spacing:-.022em;line-height:1.25;color:var(--ink); margin:52px 0 14px;scroll-margin-top:120px} #trtdoc .t-legal-body h2:first-child{margin-top:0} #trtdoc .t-legal-body h3{font-size:1.12rem;letter-spacing:-.012em;color:var(--ink); margin:32px 0 8px;scroll-margin-top:120px} #trtdoc .t-legal-body h4{font-size:1rem;color:var(--ink);margin:24px 0 6px} #trtdoc .t-legal-body p{margin:0 0 18px} #trtdoc .t-legal-body strong,#trtdoc .t-legal-body b{font-weight:600;color:var(--ink)} #trtdoc .t-legal-body ul,#trtdoc .t-legal-body ol{margin:0 0 18px;padding-left:24px} #trtdoc .t-legal-body ul li{list-style:disc;display:list-item;margin-bottom:7px;padding-left:4px} #trtdoc .t-legal-body ol li{list-style:decimal;display:list-item;margin-bottom:7px;padding-left:4px} #trtdoc .t-legal-body a{color:#005F89;text-decoration:underline; text-underline-offset:3px;text-decoration-thickness:1px;overflow-wrap:anywhere} #trtdoc .t-legal-body a:hover{color:var(--petrol-mid)} #trtdoc .t-legal-body hr{border:0;height:1px;background:rgba(12,38,50,.08);margin:40px 0} /* Hervorgehobener Block, z.B. Kontaktadresse */ #trtdoc .t-legal-body .t-box{background:var(--card);border-radius:var(--r-md);padding:24px 26px; margin:0 0 26px} #trtdoc .t-legal-body .t-box p:last-child{margin-bottom:0} /* Definitionsliste fuer Impressum-Angaben */ #trtdoc .t-legal-body dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 26px; margin:0 0 26px} #trtdoc .t-legal-body dt{font-weight:600;color:var(--ink)} #trtdoc .t-legal-body dd{margin:0} @media (max-width:900px){ #trtdoc .t-legal-grid{grid-template-columns:1fr;gap:0} #trtdoc .t-toc{position:static;max-height:none;margin-bottom:36px;padding:20px 22px; background:var(--card);border-radius:var(--r-md);overflow:visible} #trtdoc .t-toc ol{border-left:0;columns:2;column-gap:22px} #trtdoc .t-toc a{padding:6px 0;border-left:0} #trtdoc .t-toc a.t-cur{border-left:0} #trtdoc .t-legal-body{max-width:none} #trtdoc .t-legal{padding:36px 0 72px} } @media (max-width:520px){ #trtdoc .t-toc ol{columns:1} #trtdoc .t-legal-body dl{grid-template-columns:1fr;gap:2px 0} #trtdoc .t-legal-body dd{margin-bottom:12px} } /* =================================================================== MOBILE KOPFZEILE UND MENUE Der Zustand wird ueber die Klasse t-open gesteuert, nicht ueber das hidden-Attribut: eine display-Regel wuerde hidden ueberschreiben, und das Menue liesse sich nicht mehr schliessen. =================================================================== */ #trtdoc .t-burger{display:none;width:46px;height:46px;align-items:center;justify-content:center; border-radius:14px;background:transparent;color:var(--ink);cursor:pointer;position:relative; transition:background .25s var(--ease)} #trtdoc .t-burger:hover,#trtdoc .t-burger.t-open{background:rgba(12,38,50,.07)} #trtdoc .t-burger:focus-visible{outline:3px solid var(--cyan);outline-offset:2px} #trtdoc .t-burger .t-ic{width:23px;height:23px;stroke-width:2;position:absolute; transition:opacity .22s var(--ease),transform .28s var(--ease)} #trtdoc .t-burger-close{opacity:0;transform:rotate(-45deg) scale(.8)} #trtdoc .t-burger[aria-expanded="true"] .t-burger-open{opacity:0;transform:rotate(45deg) scale(.8)} #trtdoc .t-burger[aria-expanded="true"] .t-burger-close{opacity:1;transform:none} /* ═══════════════════════════════════════════════════════════════════ MOBILES MENUE — Vollbild, mittig, ruhig Nur unter 1000px. Der Desktop bleibt unberuehrt. ═══════════════════════════════════════════════════════════════════ */ #trtdoc .t-mnav{ position:fixed;inset:0;z-index:61; display:flex;flex-direction:column;align-items:center;justify-content:center; padding:96px 26px 40px; background:linear-gradient(168deg,#0A3A55 0%,#08293C 100%); opacity:0;visibility:hidden;pointer-events:none; transition:opacity .42s var(--ease-weich),visibility .42s var(--ease-weich)} #trtdoc .t-mnav.t-open{opacity:1;visibility:visible;pointer-events:auto} /* margin:0 auto hebt die Regel #trtdoc nav{margin-left:auto} auf, die fuer die Kopfzeilen-Navigation gedacht ist, aber jedes nav-Element trifft. */ #trtdoc .t-mnav nav{display:flex;flex-direction:column;align-items:center; gap:4px;width:100%;max-width:340px;margin:0 auto} #trtdoc .t-mnav nav a{ display:flex;align-items:center;justify-content:center; width:100%;min-height:60px; font-size:1.42rem;font-weight:500;letter-spacing:-.024em; color:#EDF5FA;text-decoration:none;text-align:center; border-radius:16px; opacity:0;transform:translateY(14px); transition:color .22s var(--ease),background .22s var(--ease), opacity .5s var(--ease),transform .5s var(--ease)} #trtdoc .t-mnav.t-open nav a{opacity:1;transform:none} #trtdoc .t-mnav.t-open nav a:nth-child(1){transition-delay:.06s} #trtdoc .t-mnav.t-open nav a:nth-child(2){transition-delay:.11s} #trtdoc .t-mnav.t-open nav a:nth-child(3){transition-delay:.16s} #trtdoc .t-mnav.t-open nav a:nth-child(4){transition-delay:.21s} #trtdoc .t-mnav.t-open nav a:nth-child(5){transition-delay:.26s} #trtdoc .t-mnav nav a:active{background:rgba(255,255,255,.09)} /* Haarlinie zwischen Navigation und Handlungsaufforderung */ #trtdoc .t-mnav-trenner{width:64px;height:1px;background:rgba(255,255,255,.20); margin:34px 0 30px;opacity:0;transition:opacity .6s var(--ease-weich)} #trtdoc .t-mnav.t-open .t-mnav-trenner{opacity:1} #trtdoc .t-mnav-cta{ display:inline-flex;justify-content:center;width:100%;max-width:340px; opacity:0;transform:translateY(26px); transition:opacity .16s var(--ease-ein),transform .16s var(--ease-ein)} #trtdoc .t-mnav.t-open .t-mnav-cta{opacity:1;transform:none} /* Zusatzangabe ganz unten */ /* Schliesskreuz oben rechts, innerhalb des Menues */ /* Der Kopfbereich des Menues nutzt denselben Rahmen wie die Kopfzeile. Dadurch deckt das Kreuz den Hamburger auf jeder Breite exakt. */ #trtdoc .t-mnav-kopf{position:absolute;top:9px;left:0;right:0} #trtdoc .t-mnav-kopf .t-wrap{display:flex;justify-content:flex-end} #trtdoc .t-mnav-zu{ width:46px;height:46px;display:flex;align-items:center;justify-content:center; border-radius:14px;background:rgba(255,255,255,.10);color:#fff;cursor:pointer; transition:background .22s var(--ease)} #trtdoc .t-mnav-zu:active{background:rgba(255,255,255,.18)} #trtdoc .t-mnav-zu .t-ic{width:23px;height:23px;stroke-width:2} body.t-menu-offen{overflow:hidden} @media (min-width:1001px){ #trtdoc .t-mnav,#trtdoc .t-mnav-bd{display:none} } @media (max-width:1000px){ #trtdoc .t-burger{display:flex} #trtdoc .t-hd{justify-content:space-between} #trtdoc .t-hd-cta{display:none} /* Alternative: Buchungsbutton statt Hamburger */ body.t-hd-btn #trtdoc .t-hd-cta{display:inline-flex;margin-left:auto} body.t-hd-btn #trtdoc .t-burger, body.t-hd-btn #trtdoc .t-mnav, body.t-hd-btn #trtdoc .t-mnav-bd{display:none} } /* =================================================================== HERO auf Mobil — neue Reihenfolge Titel, Untertitel, Foto, Aerzte, Button. Die Karten folgen im Fussstreifen darunter. =================================================================== */ @media (max-width:1000px){ #trtdoc .t-heroA{display:flex;flex-direction:column;gap:0;align-items:stretch} #trtdoc .t-h-copy,#trtdoc .t-h-visual{display:contents} #trtdoc .t-hero h1{order:1;margin-bottom:20px} #trtdoc .t-hero .t-sub{order:2;margin-bottom:30px} #trtdoc .t-h-photo{order:3;margin-bottom:32px} #trtdoc .t-docstrip{order:4;margin-bottom:32px} /* Karten vor dem Button — der Button schliesst den Hero ab */ #trtdoc .t-hero-cards{order:5;grid-template-columns:1fr;gap:10px;margin-bottom:34px} #trtdoc .t-hero-cta{order:6;margin-bottom:4px;align-self:stretch;margin-top:0;flex:0 0 auto} #trtdoc .t-hero-cta .t-btn{width:100%;justify-content:center;min-height:60px; font-size:1.1rem;font-weight:600;box-shadow:0 16px 38px rgba(0,18,30,.38)} } /* Links auf getoentem Grund brauchen mehr Kontrast als auf Weiss */ #trtdoc .t-legal-body .t-box a{color:#005F89} /* Beide Kontakt-Schaltflaechen exakt gleich breit */ @media (max-width:1000px){ #trtdoc .t-contact-actions{display:grid;grid-template-columns:1fr;gap:12px} #trtdoc .t-contact-actions .t-btn{width:100%;justify-content:center;margin:0} } /* ═══════════════════════════════════════════════════════════════════ WEITERE MOBILE ANPASSUNGEN — Desktop bleibt unberuehrt ═══════════════════════════════════════════════════════════════════ */ @media (max-width:1000px){ /* Rechner: kurze Beschriftung, damit sie einzeilig bleibt */ #trtdoc .t-narrow-only{display:inline} #trtdoc .t-segb .t-wide-only{display:none} /* Kontakt: beide Schaltflaechen gleich breit */ #trtdoc .t-contact-actions{display:flex;flex-direction:column;gap:10px;align-items:stretch} #trtdoc .t-contact-actions .t-btn{width:100%;justify-content:center;text-align:center} } @media (min-width:1001px){ #trtdoc .t-narrow-only{display:none} } /* ═══════════════════════════════════════════════════════════════════ KEIN WEISSRAUM UNTER DER FUSSZEILE Die Seite endet mit der Fusszeile. Sprachumschalter und Cookie-Hinweis sind schwebende Elemente und duerfen keine Seitenhoehe erzeugen. Beide liegen ausserhalb von #trtdoc, deshalb hier ohne Kapselung. ═══════════════════════════════════════════════════════════════════ */ body > #trp-floater-ls, body > .trp-language-switcher-container, body > #trp-floater-ls-current-language{position:fixed;bottom:0;right:0;z-index:70} body > #cmplz-cookiebanner-container{position:fixed;z-index:71} /* ═══════════════════════════════════════════════════════════════════ BEWEGUNG — drei Kurven, klar getrennt --ease-aus Eintritt: schnell los, weich aus. Fuer Dinge, die erscheinen. Endet entschieden, statt die letzten Prozent zu kriechen. --ease-ein Austritt: sanft los, zuegig weg. --ease-weich Lange Wege, etwa das Vollbildmenue. ═══════════════════════════════════════════════════════════════════ */ :root{ --ease-aus:cubic-bezier(.21,.78,.28,1); --ease-ein:cubic-bezier(.4,0,.72,.3); --ease-weich:cubic-bezier(.32,.72,0,1); } /* ---- Akkordeon: der Inhalt bewegt sich mit, statt nur beschnitten zu werden. Das ist der Unterschied zwischen "klappt auf" und "wird sichtbar". ---- */ /* Das Zeichen dreht sich mit derselben Kurve */ #trtdoc #faqlist summary i{transition:transform .44s var(--ease-aus), background .26s var(--ease-aus),color .26s var(--ease-aus)} /* ---- Vollbildmenue: laenger, weicher, gestaffelt ---- */ #trtdoc .t-mnav nav a{ transform:translateY(26px); transition:color .22s var(--ease-aus),background .22s var(--ease-aus), opacity .16s var(--ease-ein),transform .16s var(--ease-ein)} #trtdoc .t-mnav.t-open nav a{ transition:color .22s var(--ease-aus),background .22s var(--ease-aus), opacity .66s var(--ease-weich),transform .72s var(--ease-weich)} #trtdoc .t-mnav.t-open nav a:nth-child(1){transition-delay:0s,0s,.10s,.10s} #trtdoc .t-mnav.t-open nav a:nth-child(2){transition-delay:0s,0s,.17s,.17s} #trtdoc .t-mnav.t-open nav a:nth-child(3){transition-delay:0s,0s,.24s,.24s} #trtdoc .t-mnav.t-open nav a:nth-child(4){transition-delay:0s,0s,.31s,.31s} #trtdoc .t-mnav.t-open nav a:nth-child(5){transition-delay:0s,0s,.38s,.38s} #trtdoc .t-mnav.t-open .t-mnav-trenner{transition-delay:.44s} #trtdoc .t-mnav.t-open .t-mnav-cta{ transition:opacity .66s var(--ease-weich) .5s, transform .72s var(--ease-weich) .5s, background .22s var(--ease-aus)} /* Das Schliesszeichen dreht sanfter */ #trtdoc .t-burger .t-ic{transition:opacity .26s var(--ease-aus), transform .42s var(--ease-weich)} @media (prefers-reduced-motion:reduce){ #trtdoc .t-faq-inner{opacity:1!important;transform:none!important;transition:none!important} #trtdoc .t-mnav nav a,#trtdoc .t-mnav-cta{transform:none!important;transition:none!important} } /* Nur fuer Vorlese- und Uebersetzungswerkzeuge sichtbar, fuer Augen nicht. Das Attribut hidden waere hier falsch: TranslatePress ueberspringt versteckte Elemente, und die Texte blieben unuebersetzt oder leer. */ #trtdoc .t-nurlesen{position:absolute!important;width:1px;height:1px; margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0); clip-path:inset(50%);white-space:nowrap;border:0} /* ═══════════════════════════════════════════════════════════════════ SELBSTTEST — Skalenbeschriftung Die Pole muessen ohne Nachdenken lesbar sein: die Ziffer traegt die Markenfarbe, der Text steht ausgeschrieben daneben. ═══════════════════════════════════════════════════════════════════ */ #trtdoc .t-scale-legend{display:flex;justify-content:space-between;align-items:flex-start; gap:20px;margin:0 0 20px;padding:14px 18px; background:var(--card);border-radius:var(--r-md); font-size:.95rem;line-height:1.35;color:var(--body);font-weight:500} #trtdoc .t-scale-legend span{display:flex;align-items:center;gap:9px;max-width:16em} #trtdoc .t-scale-legend b{flex:0 0 auto;width:28px;height:28px;border-radius:9px; display:inline-flex;align-items:center;justify-content:center; background:var(--petrol-mid);color:#fff;font-size:.94rem;font-weight:600} #trtdoc .t-scale-legend span:last-child{text-align:right;justify-content:flex-end; flex-direction:row-reverse} @media (max-width:640px){ #trtdoc .t-scale-legend{flex-direction:column;gap:10px;padding:14px} #trtdoc .t-scale-legend span,#trtdoc .t-scale-legend span:last-child{ max-width:none;text-align:left;justify-content:flex-start;flex-direction:row} } /* ═══════════════════════════════════════════════════════════════════ ABLAUF — mehr Luft zwischen den Karten, laengere Verbindungslinie Die Linie reicht jetzt bis in die Ziffernkreise hinein, statt dazwischen zu enden. ═══════════════════════════════════════════════════════════════════ */ #trtdoc .t-steps{gap:22px} #trtdoc .t-steps::before{top:14px;bottom:14px} #trtdoc .t-steps-fill{top:14px} @media (max-width:1000px){ #trtdoc .t-steps{gap:18px} #trtdoc .t-steps::before{top:12px;bottom:12px} #trtdoc .t-steps-fill{top:12px} } /* ═══════════════════════════════════════════════════════════════════ PRAEVALENZ — zweite Zahl und Quellenangabe ═══════════════════════════════════════════════════════════════════ */ /* 14px und Kontrast 5,4 auf dem getoenten Grund — eine Quellenangabe muss lesbar sein, sonst ist sie Dekoration. */ #trtdoc .t-quelle{max-width:44rem;margin:26px auto 0;font-size:.875rem; line-height:1.55;color:#2C4A57} #trtdoc .t-quelle i{font-style:italic} /* ═══════════════════════════════════════════════════════════════════ SPRACHUMSCHALTER Zurueckhaltend: ein Kuerzel, kein Fahnensymbol. Fahnen stehen fuer Laender, nicht fuer Sprachen — Englisch ist keine Flagge. ═══════════════════════════════════════════════════════════════════ */ #trtdoc .t-lang{display:inline-flex;align-items:center;justify-content:center; min-width:44px;min-height:44px;padding:0 12px;margin-left:6px; /* Derselbe Radius wie alle uebrigen Schaltflaechen — vorher 12px. */ border-radius:var(--r-md);font-size:.9rem;font-weight:600;letter-spacing:.04em; color:var(--petrol-mid);text-decoration:none; transition:background .22s var(--ease-aus),color .22s var(--ease-aus)} #trtdoc .t-lang:hover{background:rgba(0,95,137,.09);color:var(--petrol)} #trtdoc .t-lang:focus-visible{outline:3px solid var(--cyan);outline-offset:2px} /* im Vollbildmenue */ #trtdoc .t-lang-mnav{display:none;margin:22px auto 0;color:#D6E8F2; border:1px solid rgba(255,255,255,.24);min-width:64px} #trtdoc .t-lang-mnav:hover{background:rgba(255,255,255,.10);color:#fff} @media (max-width:1000px){ /* Der Sprach-Button bleibt jetzt in der Kopfzeile sichtbar und sitzt mittig zwischen Logo und Menuesymbol. Die frühere Regel blendete ihn hier aus. */ #trtdoc .t-lang-mnav{display:inline-flex} } /* ═══════════════════════════════════════════════════════════════════ SPRACH-BUTTON Gleiche Formensprache wie "Haeufige Fragen ansehen": weisser Grund, farbiger Rand, Globus davor. Auf dunklem Grund die helle Fassung. ═══════════════════════════════════════════════════════════════════ */ #trtdoc .t-btn-outline-hell{ background:transparent;border:1.5px solid rgba(191,220,236,.42); color:#EDF5FA;font-weight:500; transition:border-color .25s var(--ease-aus),background .25s var(--ease-aus), color .25s var(--ease-aus),transform .2s var(--ease-aus)} #trtdoc .t-btn-outline-hell:hover{border-color:rgba(255,255,255,.75); background:rgba(255,255,255,.08);color:#fff} #trtdoc .t-btn-outline-hell .t-ic{color:currentColor} #trtdoc .t-lang{flex:0 0 auto;white-space:nowrap} #trtdoc .t-lang .t-ic{width:17px;height:17px} /* Im Footer als eigener Block unter den Rechtstexten */ /* Gleiche Masse wie in der Kopfzeile: kompakt, Kuerzel statt Wort. */ #trtdoc .t-ft-lang{display:inline-flex;width:auto;min-width:44px;max-width:max-content; margin-top:16px;padding:0 12px;min-height:44px;border-radius:var(--r-md); font-size:.9rem;font-weight:600;letter-spacing:.04em} #trtdoc .t-ft-lang .t-ic{width:17px;height:17px} /* Im mobilen Menue voll ausgeschrieben */ #trtdoc .t-lang-mnav{display:inline-flex;justify-content:center; width:100%;max-width:340px;margin-top:14px} /* ═══════════════════════════════════════════════════════════════════ KOPFZEILE AUF MOBIL UND TABLET Logo links, Sprach-Button mittig, Menuesymbol rechts. Die Luecke zwischen Logo und Menuesymbol wird damit genutzt statt gelassen. ═══════════════════════════════════════════════════════════════════ */ @media (max-width:1000px){ #trtdoc .t-hd{display:grid;grid-template-columns:1fr auto 1fr; align-items:center;gap:12px;height:72px} #trtdoc header.t-scrolled .t-hd{height:64px} #trtdoc .t-logo{justify-self:start} #trtdoc .t-logo img{height:40px} #trtdoc header.t-scrolled .t-logo img{height:35px} #trtdoc .t-lang{justify-self:center;padding:9px 15px;min-height:44px; font-size:.98rem} #trtdoc .t-burger{justify-self:end;width:52px;height:52px} #trtdoc .t-burger .t-ic{width:27px;height:27px} /* Das Kreuz erbt Groesse und Lage vom Menuesymbol, statt sie zu wiederholen. Bei einer Aenderung der einen Groesse verschiebt sich sonst die andere. */ #trtdoc .t-mnav-kopf{top:0;height:72px;display:flex;align-items:center} #trtdoc .t-mnav-kopf .t-wrap{display:flex;justify-content:flex-end;width:100%} #trtdoc .t-mnav-zu{width:52px;height:52px} #trtdoc .t-mnav-zu .t-ic{width:27px;height:27px} #trtdoc .t-mnav{padding-top:104px} } @media (max-width:400px){ #trtdoc .t-logo img{height:34px} #trtdoc .t-lang{padding:9px 12px;font-size:.94rem} #trtdoc .t-lang .t-ic{width:16px;height:16px} #trtdoc .t-burger,#trtdoc .t-mnav-zu{width:48px;height:48px} } /* ═══════════════════════════════════════════════════════════════════ TABLET IM HOCHFORMAT — 700 bis 1000 Pixel Das Problem war nicht der Aufbau, sondern die Breite: einspaltige Karten und Schaltflaechen liefen ueber 700 Pixel auseinander. Die Inhaltsspalte wird deshalb begrenzt, und wo zwei Karten nebeneinander sinnvoll sind, stehen sie nebeneinander. ═══════════════════════════════════════════════════════════════════ */ @media (min-width:700px) and (max-width:1000px){ #trtdoc .t-wrap{max-width:660px} /* Hero: Titel groesser, Foto in ruhigerem Verhaeltnis */ #trtdoc .t-hero h1{font-size:2.6rem} #trtdoc .t-h-photo .t-ph{aspect-ratio:1.6} /* Einspaltig wie auf dem Handy. Die Begrenzung der Inhaltsspalte auf 660px verhindert, dass Karten, Bilder und Schaltflaechen ueber die ganze Tabletbreite gezogen werden. */ #trtdoc .t-hero-cards{grid-template-columns:1fr;gap:12px} #trtdoc .t-hero-cta{align-self:stretch} #trtdoc .t-hero-cta .t-btn{width:100%;min-width:0} #trtdoc .t-contact-actions{flex-direction:column;align-items:stretch} #trtdoc .t-contact-actions .t-btn{width:100%;flex:0 0 auto} #trtdoc .t-fees{grid-template-columns:1fr;gap:14px} /* Rechner: Auswahlflaechen nebeneinander */ #trtdoc .t-segb{flex:1 1 0;min-width:0} /* Kalender ueber die volle Breite des Abschnitts */ #trtdoc .t-cal{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)} } /* ═══════════════════════════════════════════════════════════════════ KONTAKTKARTE — beide Schaltflaechen gleich breit Zuvor richtete sich die Breite nach der Beschriftung: 246 gegen 316 Pixel. Gleiche Breite wirkt ruhiger und stellt beide Wege gleichwertig nebeneinander. ═══════════════════════════════════════════════════════════════════ */ @media (min-width:1001px){ #trtdoc .t-contact-actions{display:flex;gap:14px;justify-content:center} #trtdoc .t-contact-actions .t-btn{flex:0 0 300px;width:300px;justify-content:center} } /* ═══════════════════════════════════════════════════════════════════ TABLET PORTRAIT — Buchungsbereich auf Spaltenbreite, ruhigere Buttons Der Buchungsbereich lief als einziger ueber die volle Breite von 834 Pixeln, waehrend alle sieben uebrigen Abschnitte 660 Pixel nutzen. Dadurch fielen Calendly und die Kontaktkarte aus der Flucht. Schaltflaechen laufen nicht mehr ueber die ganze Spalte. ═══════════════════════════════════════════════════════════════════ */ @media (min-width:700px) and (max-width:1000px){ #trtdoc #buchen>.t-wrap{max-width:660px} #trtdoc .t-cal{width:100%;margin-left:0;margin-right:0; border-radius:var(--r-md);border-left:1px solid rgba(12,38,50,.07); border-right:1px solid rgba(12,38,50,.07)} #trtdoc .t-hero-cta .t-btn, #trtdoc .t-contact-actions .t-btn{width:100%;max-width:380px;margin-left:auto;margin-right:auto} #trtdoc .t-contact-actions{align-items:center} } /* Der Fusszeilen-Button erbt sonst die Innenabstaende der Footer-Links (10px oben und unten, 0 seitlich) und wird dadurch 66 statt 44 hoch. Die Verdopplung des Klassennamens hebt die Spezifitaet gerade so weit, dass die Masse der Kopfzeile gelten. */ #trtdoc .t-ft-lang.t-ft-lang{padding:0 12px;min-height:44px;height:44px; align-items:center;margin-top:16px} /* Alle drei Merkmaltitel gleich hoch, damit die Unterzeilen auf einer Linie stehen — unabhaengig davon, wie lang der Text ist. */ @media (min-width:1001px){ #trtdoc .t-hero-card b{min-height:3.9em;display:flex;align-items:flex-start} } /* ═══════════════════════════════════════════════════════════════════ SPRACHUMSCHALTER — Masse angleichen In der Kopfzeile war er 44 Pixel hoch, die Buchungsschaltflaeche daneben 49. In der Fusszeile war er mit 49 Pixeln Breite zu klein und stand neben 447 Pixel breiten Textlinks. ═══════════════════════════════════════════════════════════════════ */ @media (min-width:1001px){ #trtdoc header .t-lang{min-height:49px;height:49px} } /* In der Fusszeile ueber die volle Spaltenbreite, ausgeschrieben. */ #trtdoc .t-ft-lang.t-ft-lang{display:flex;width:100%;max-width:none; justify-content:center;gap:9px;padding:0 18px; min-height:48px;height:48px;margin-top:18px; font-size:.98rem;font-weight:500;letter-spacing:0} /* ═══════════════════════════════════════════════════════════════════ HERO-KARTEN — alle drei Titel genau zweizeilig ═══════════════════════════════════════════════════════════════════ */ @media (min-width:1001px){ /* 0.9rem = 14.4px: "Über 750 Männer" braucht damit 140 statt 153 Pixel und passt in die 145 Pixel breite Spalte — zweizeilig wie die beiden anderen Titel. */ #trtdoc .t-hero-card b{font-size:.9rem;line-height:1.3; min-height:2.6em;display:flex;align-items:flex-start} } /* ═══════════════════════════════════════════════════════════════════ TABLET PORTRAIT — Hero-Schaltflaeche wirklich mittig Automatische Seitenraender greifen bei einem Inline-Element nicht. Der Container wird deshalb selbst zum Flex-Container. ═══════════════════════════════════════════════════════════════════ */ @media (min-width:700px) and (max-width:1000px){ #trtdoc .t-hero-cta{display:flex;justify-content:center} #trtdoc .t-contact-actions{align-items:center} } /* Zwischen 1001 und 1279 Pixeln sind die Karten nur 113 Pixel breit — dort passt der laengste Titel nicht in zwei Zeilen, ohne die Schrift unter 14 Pixel zu druecken. Die Mindesthoehe haelt die Unterzeilen trotzdem auf einer Linie. */ @media (min-width:1001px) and (max-width:1279px){ #trtdoc .t-hero-card b{min-height:3.9em} } /* Auf Tablet Portrait dieselbe Breite wie die Schaltflaechen der Kontaktkarte (380px), damit die Fusszeile in der Flucht bleibt. */ @media (min-width:700px) and (max-width:1000px){ #trtdoc .t-ft-lang.t-ft-lang{width:380px;max-width:380px} } /* ═══════════════════════════════════════════════════════════════════ NETZWERK — Partner, Fachmedizin und Presse Baut vollstaendig auf den vorhandenen Klassen auf: t-band-dark wie Honorar, t-sec-head fuer den Kopf, t-tile fuer die linke Karte. Neu sind nur das Logoraster und die Medienliste. ═══════════════════════════════════════════════════════════════════ */ /* Beide Karten exakt gleich breit und gleich hoch. Die Netzwerkkarte war zuvor 1,4-mal so breit — bei gleicher Groesse wirkt das Paar ruhiger und die Sektion bleibt in der Mitte ausgewogen. */ #trtdoc .t-netz{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px;align-items:stretch;justify-items:stretch} #trtdoc .t-netz > *{padding:32px 34px;display:flex;flex-direction:column} /* Rechte Karte durchscheinend auf dem Verlauf. Auf dem dunklen Band liegt der schwaechste Textkontrast damit bei 7,1. */ #trtdoc .t-netz-medien{background:rgba(0,20,32,.26); border:1px solid rgba(255,255,255,.18);border-radius:var(--r-md); backdrop-filter:blur(6px)} /* Auf dunklen Baendern faerbt das Theme alle h3 weiss. Die linke Karte ist aber selbst weiss — dort muss die Schrift dunkel bleiben, wie es fuer die Honorarkarten bereits geregelt ist. */ #trtdoc .t-band-dark .t-netz .t-tile h3{color:var(--ink)} #trtdoc .t-netz-medien h3{color:#fff} /* Die Verweise erben sonst die Linkfarbe des Themes — dunkles Cyan auf dunklem Grund. */ #trtdoc .t-netz-medien .t-medium{color:#fff} #trtdoc .t-netz-kopf{margin-bottom:30px;text-align:center} #trtdoc .t-netz-kopf h3{margin:0;font-size:1.34rem;letter-spacing:-.02em} /* Logoraster: zwei Spalten, drei Zeilen. Die Hoehen sind auf gleiche Flaeche gerechnet, nicht auf gleiche Hoehe — ein breites Schriftlogo belegt bei gleicher Hoehe die doppelte Flaeche und erschlaegt die gestapelten. object-fit verhindert, dass eine Breitenbegrenzung das Seitenverhaeltnis staucht. */ #trtdoc .t-netz-logos{display:grid;grid-template-columns:repeat(2,1fr); gap:34px 24px;place-items:center;flex:1 1 auto;align-content:center} /* Jedes Logo fuehrt auf die Website des Partners. Der Verweis traegt die Trefferflaeche, damit sie auch bei kleinen Logos ueber 44 Pixel liegt — das Bild selbst waere dafuer teils zu flach. */ #trtdoc .t-netz-link{display:grid;place-items:center;padding:8px 10px; min-height:48px;border-radius:var(--r-sm,12px);text-decoration:none; transition:transform .25s var(--ease),background .25s var(--ease)} #trtdoc .t-netz-link:hover{background:rgba(0,158,227,.09)} #trtdoc .t-netz-link:focus-visible{outline:2px solid var(--cyan);outline-offset:2px} #trtdoc .t-netz-logos img{width:auto;max-width:100%;object-fit:contain; display:block} /* Hoehen auf gleiche Flaeche gerechnet, nicht auf gleiche Hoehe. Bezugsflaeche von 7219 auf 10396 erhoeht — rund 44 Prozent groesser. */ #trtdoc .l-gestapelt{height:84px} #trtdoc .l-olten{height:77px} #trtdoc .l-wohlen{height:82px} #trtdoc .l-breit{height:54px} /* Medienliste */ #trtdoc .t-medliste{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center} #trtdoc .t-medium{display:block;padding:16px 0;text-decoration:none; border-bottom:1px solid rgba(255,255,255,.14); transition:padding-left .25s var(--ease)} #trtdoc .t-medium:last-of-type{border-bottom:0;padding-bottom:0} #trtdoc .t-medium:hover{padding-left:6px} #trtdoc .t-medium b{display:block;font-size:1.08rem;font-weight:600;color:#fff;margin-bottom:4px} #trtdoc .t-medium span{display:block;font-size:.9rem;line-height:1.5;color:#B2D6EA} #trtdoc .t-medium em{font-style:normal;color:var(--cyan-lt);font-weight:500} @media (max-width:900px){ #trtdoc .t-netz{grid-template-columns:1fr} } @media (max-width:520px){ #trtdoc .t-netz > *{padding:24px 20px} #trtdoc .t-netz-logos{gap:28px 16px} #trtdoc .l-gestapelt{height:68px} #trtdoc .l-olten{height:62px} #trtdoc .l-wohlen{height:66px} #trtdoc .l-breit{height:44px} } /* Auf sehr schmalen Geraeten ist die Spalte nur 121 Pixel breit — das breite Schriftlogo braeuchte dort 132 und wuerde beschnitten. */ @media (max-width:380px){ #trtdoc .l-gestapelt{height:58px} #trtdoc .l-olten{height:53px} #trtdoc .l-wohlen{height:56px} #trtdoc .l-breit{height:37px} } /* Auf dem Handy dieselbe Breite wie die Schaltflaechen der Kontaktkarte (308px bei 390px Bildschirm), damit die Fusszeile in der Flucht bleibt. Auf dem Tablet gilt weiterhin 380px. */ @media (max-width:699px){ #trtdoc .t-ft-lang.t-ft-lang{width:calc(100% - 46px);max-width:none; margin-left:auto;margin-right:auto} } /* Im Hochformat stehen die beiden Karten immer untereinander — auch auf einem iPad Pro, das dort 1024 Pixel breit ist und damit ueber der normalen Umbruchgrenze von 900 liegt. Die Abfrage nach der Ausrichtung trifft genau den Fall, statt ihn ueber die Breite zu raten. */ @media (max-width:1100px) and (orientation:portrait){ #trtdoc .t-netz{grid-template-columns:1fr} } /* ═══════════════════════════════════════════════════════════════════ MEDIENEINTRAEGE — Datum, Titel, Auszug ═══════════════════════════════════════════════════════════════════ */ #trtdoc .t-med-meta{display:block;font-size:.82rem;font-weight:500; letter-spacing:.04em;color:var(--cyan-lt);margin-bottom:6px} #trtdoc .t-med-titel{display:block;font-size:.98rem;font-weight:500; line-height:1.42;color:#fff;margin-bottom:7px} #trtdoc .t-med-text{display:block;font-size:.89rem;line-height:1.58;color:#B2D6EA} #trtdoc .t-medium b{margin-bottom:6px} #trtdoc .t-medium{padding:20px 0} /* ═══════════════════════════════════════════════════════════════════ RECHTSSEITEN — Kopfzeile wie auf der Startseite Die Vorlage hat jetzt Navigation, Hamburger und Vollbildmenue. Damit greifen dieselben Regeln wie auf der Landingpage; hier stehen nur die Abweichungen. ═══════════════════════════════════════════════════════════════════ */ /* Mehr Luft zwischen Sprachknopf und Buchungsknopf. Die Kopfzeile ist ein Flex-Container mit 26 Pixeln Abstand; ein zusaetzlicher Rand am Buchungsknopf trennt das Paar deutlicher vom Rest. Zur Schreibweise: .t-legal-page sitzt AUF dem Element #trtdoc, nicht darin — deshalb ohne Leerzeichen notiert. Mit Leerzeichen wuerde die Regel nie greifen. */ #trtdoc header .t-hd-cta{margin-left:12px} @media (min-width:1001px){ #trtdoc header .t-hd-cta{margin-left:16px} } /* Groessere Zwischentitel, passend zur groesseren Grundschrift */ #trtdoc .t-legal-body h2{font-size:1.62rem;margin-top:2.1em} #trtdoc .t-legal-body h3{font-size:1.22rem;margin-top:1.7em} @media (max-width:900px){ #trtdoc .t-legal-body{font-size:1.14rem} #trtdoc .t-legal-body h2{font-size:1.42rem} #trtdoc .t-legal-body h3{font-size:1.12rem} } /* Trennlinie vor dem abschliessenden Zurueck-Verweis. Zuvor lag sie als border-top auf dem Verweis selbst und zwang ihn dadurch auf volle Breite. */ #trtdoc .t-legal-schluss{border:0;border-top:1px solid rgba(12,38,50,.10); margin:52px 0 26px} /* Fusszeile: Das Symbol der E-Mail steht buendig mit der Anschrift darueber — also linke Kante an linker Kante, nicht Text an Text. */ #trtdoc .t-ft .t-with-ic{gap:11px} /* ═══════════════════════════════════════════════════════════════════ HERO AUF MOBIL — Schatten des Fotos kuerzen Der Schatten hat 44 Pixel Versatz nach unten und 100 Pixel Weichzeichnung; er reicht damit rund 94 Pixel unter das Foto. Auf dem Handy steht die Aerzteliste 34 Pixel darunter — der erste Name lag mitten im Schatten und wirkte dadurch dunkler. Auf dem Desktop steht das Foto neben der Liste, dort bleibt der grosse Schatten erhalten. ═══════════════════════════════════════════════════════════════════ */ @media (max-width:1000px){ #trtdoc .t-h-photo .t-ph{ box-shadow:0 12px 30px rgba(0,12,20,.38),0 0 0 1px rgba(255,255,255,.10)} } /* ═══════════════════════════════════════════════════════════════════ KOSTENRECHNER AUF MOBIL — Zeilen einzeilig halten Bei 430 Pixeln blieben der Zeile nur 282 Pixel; Beschriftung und Betrag brauchten zusammen genau so viel und brachen deshalb um. Weniger Innenabstand schafft 24 Pixel Luft. ═══════════════════════════════════════════════════════════════════ */ @media (max-width:520px){ #trtdoc .t-calc{padding-left:16px;padding-right:16px} #trtdoc .t-calc-out{padding-left:16px;padding-right:16px} #trtdoc .t-calc-rows > *{gap:12px} #trtdoc .t-calc-rows > * > *:first-child{flex:1 1 auto;min-width:0} #trtdoc .t-calc-rows > * > *:last-child{flex:0 0 auto;white-space:nowrap} } /* Unter 430 Pixeln reicht auch die gekuerzte Beschriftung nicht mehr. Eine Stufe kleinere Schrift schafft die fehlenden Pixel, ohne unter 14 Pixel zu fallen. */ @media (max-width:429px){ #trtdoc .t-calc-rows{font-size:.9rem} #trtdoc .t-calc{padding-left:14px;padding-right:14px} #trtdoc .t-calc-out{padding-left:14px;padding-right:14px} }