/* swisshausarzt.ch — Darstellung, erzeugt aus dem Prototyp. */ /* =================================================================== TRTDoc — Landingpage Alle Regeln sind unter #olten 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.olten-seite{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 #olten etwas zu veraendern. =================================================================== */ #olten,#olten *,#olten *::before,#olten *::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. */ #olten,#olten header,#olten footer,#olten section,#olten main,#olten nav, #olten div,#olten p,#olten ul,#olten ol,#olten li,#olten h1,#olten h2, #olten h3,#olten h4,#olten span,#olten a,#olten button,#olten details, #olten summary,#olten input,#olten label,#olten strong,#olten b,#olten i, #olten em,#olten small,#olten blockquote,#olten picture{ min-width:0;max-width:none;min-height:0;width:auto;height:auto} /* Calendly: fremdes Markup vollstaendig in Ruhe lassen */ #olten .calendly-inline-widget{width:100%;min-width:320px} #olten .calendly-inline-widget iframe{ width:100%;height:100%;min-width:0;max-width:none;border:0;display:block} #olten img,#olten svg,#olten picture,#olten source{max-width:100%;display:block;filter:none} #olten details>summary{list-style:none} #olten details ul{list-style:disc} #olten details ul li{list-style:disc;display:list-item} #olten button,#olten input,#olten a{font:inherit;color:inherit;background:none;cursor:pointer; -webkit-appearance:none;appearance:none} #olten input[type=search]{-webkit-appearance:none} #olten{ /* 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; } #olten *,#olten *::before,#olten *::after{box-sizing:border-box} #olten{ 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 ===== */ #olten .t-band{position:relative;overflow:hidden;padding:112px 0} #olten .t-band-light{background:#FFFFFF} #olten .t-band-soft,#olten .t-band-tint{background:#E9F1F7} #olten .t-band-dark{background:linear-gradient(158deg,#00486A,#00405E 50%,#00344E);color:#fff} #olten .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} #olten .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} #olten .t-band>.t-wrap{position:relative;z-index:2} #olten .t-band-dark h2,#olten .t-band-dark h3,#olten .t-band-dark h4{color:#fff} #olten .t-band-dark p,#olten .t-band-dark li{color:#D6E8F2} /* Der einleitende Text unter jeder Ueberschrift ist heller als der uebrige Fliesstext — dieselbe Farbe wie der Untertitel im Hero. Kontrast steigt von 7,81 auf 8,92. */ #olten .t-band-dark .t-lede{color:#EDF5FA} #olten .t-band-dark .t-big{color:var(--cyan-lt)} #olten .t-band-dark .t-role{color:var(--cyan-lt)} #olten .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)} #olten .t-band-dark .t-step:hover{background:rgba(255,255,255,.13);box-shadow:0 18px 44px rgba(0,20,32,.34)} #olten .t-band-dark .t-stepn{-webkit-text-stroke-color:rgba(127,214,248,.55)} #olten .t-band-dark .t-step:hover .t-stepn{color:var(--cyan-lt)} #olten .t-band-dark .t-fee .t-amt{color:var(--cyan-lt)} #olten .t-band-dark .t-toggle{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.26);color:#fff} #olten .t-band-dark .t-toggle:hover{background:rgba(255,255,255,.2);border-color:#fff} #olten .t-band-dark .t-qdisc{color:#B2D6EA} #olten .t-band-dark .t-btn:hover{box-shadow:none} #olten .t-band-dark .t-doc .t-ph{box-shadow:0 22px 50px rgba(0,14,24,.4)} #olten h1,#olten h2,#olten h3,#olten h4{color:var(--ink);margin:0 0 20px;line-height:1.08;font-weight:600; letter-spacing:-.032em} #olten h1{font-size:clamp(1.7rem,3.05vw,2.6rem);line-height:1.12;letter-spacing:-.04em;font-weight:700} #olten h2{font-size:clamp(1.7rem,3.2vw,2.65rem);letter-spacing:-.036em;font-weight:700} #olten h3{font-size:1.16rem;letter-spacing:-.022em;line-height:1.34;margin-bottom:10px;font-weight:600} #olten p{margin:0 0 18px} #olten a{color:var(--cyan-txt)} #olten .t-lede{font-size:1.16rem;max-width:700px;font-weight:450;color:#0C2632;letter-spacing:-.012em} #olten .t-wrap{max-width:var(--wrap);margin:0 auto;padding:0 26px} #olten .t-center{text-align:center} #olten .t-center .t-lede,#olten .t-center>p{margin-left:auto;margin-right:auto} /* ===== Glasebenen (getönt, Golden-Gate-Charakteristik) ===== */ #olten .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} #olten .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)} #olten .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)} #olten .t-panel-deep h2,#olten .t-panel-deep h3,#olten .t-panel-deep h4{color:#fff} #olten .t-panel-deep p,#olten .t-panel-deep .t-lede{color:#D6E8F2} #olten .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)){ #olten .t-panel{background:rgba(255,255,255,.94)} #olten .t-tile{background:rgba(255,255,255,.96)} } /* ===== Buttons ===== */ #olten .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. */ #olten .t-btn:hover{background-color:var(--petrol)} #olten .t-btn:active{transform:translateY(-1px);box-shadow:0 6px 15px rgba(0,64,94,.22)} #olten .t-btn:focus-visible{outline:3px solid var(--cyan);outline-offset:3px} #olten.t-js .t-rv .t-btn{transition:transform .25s var(--ease),background .25s,box-shadow .25s,color .25s} #olten .t-btn-solid{background:var(--petrol-mid);color:#fff} #olten .t-btn-solid:hover{background:var(--petrol)} #olten .t-btn-white{background:#fff;color:var(--petrol)} #olten .t-btn-white:hover{background:#E9F4FA} #olten .t-btn-outline{background:rgba(255,255,255,.6);color:var(--petrol-mid);border-color:var(--line)} #olten .t-btn-outline:hover{border-color:var(--petrol-mid);background:#fff} #olten .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)} #olten .t-btn-ghost:hover{background:rgba(255,255,255,.22);border-color:#fff} #olten .t-btn-sm{padding:11px 22px;font-size:.94rem} #olten .t-panel-deep .t-btn:hover,#olten .t-hero .t-btn:hover{box-shadow:none} #olten .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} #olten .t-btn .t-ic{width:19px;height:19px} /* ===== Header ===== */ #olten 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} #olten 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)} #olten .t-hd{display:flex;align-items:center;height:92px;gap:26px;transition:height .3s var(--ease)} #olten header.t-scrolled .t-hd{height:74px} #olten .t-logo{display:inline-flex;align-items:center;text-decoration:none;flex:0 0 auto;min-height:44px} #olten .t-logo img{height:50px;width:auto;display:block;transition:height .3s var(--ease)} #olten header.t-scrolled .t-logo img{height:40px} #olten footer .t-logo img{height:54px} #olten nav{display:flex;gap:24px;margin-left:auto;margin-right:6px} #olten nav a{font-size:.96rem;font-weight:500;color:var(--body);text-decoration:none;position:relative;padding:8px 0; letter-spacing:-.01em} #olten 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)} #olten nav a:hover,#olten nav a.t-active{color:var(--ink)} #olten nav a:hover::after,#olten nav a.t-active::after{right:0} /* Lesefortschritt. Die Breite steht fest, gestaucht wird per transform — das laeuft auf dem Compositor, ohne Layout und ohne Neuzeichnen. Bewusst ohne Ueberblendung: der Balken bildet die Scrollposition ab, er laeuft ihr nicht hinterher. Verlauf hier zusammengefuehrt, er war frueher ein zweites Mal weiter unten definiert. */ #olten .t-prog{position:absolute;left:0;bottom:0;height:3px;width:100%; transform:scaleX(0);transform-origin:0 50%;will-change:transform; background:linear-gradient(90deg,var(--petrol-mid),var(--cyan));border-radius:0 3px 3px 0} /* ===== Reveal ===== */ #olten.t-js .t-rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)} #olten.t-js .t-rv.t-in{opacity:1;transform:none} #olten.t-js .t-rv[data-d="1"]{transition-delay:.08s} #olten.t-js .t-rv[data-d="2"]{transition-delay:.16s} #olten.t-js .t-rv[data-d="3"]{transition-delay:.24s} /* ===== Fotos ===== */ #olten .t-ph{position:relative;overflow:hidden;background:#DCE8EE;display:block;border-radius:var(--r-md)} #olten .t-ph img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.97) contrast(1.02); transition:transform .9s var(--ease)} #olten .t-ph:hover img{transform:scale(1.035)} #olten .t-ph-sq{aspect-ratio:1/1} /* ===== HERO ===== */ #olten .t-hero{position:relative;overflow:visible;overflow-x:clip; background:linear-gradient(155deg,#00486A 0%,#00405E 46%,#00344E 100%);color:#fff} #olten .t-hero-glow{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none} #olten .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} #olten .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)}} #olten .t-hero .t-wrap{position:relative;z-index:2} #olten .t-heroA{display:grid;grid-template-columns:.78fr 1.22fr;gap:0 50px;align-items:stretch; padding-block:78px 90px} #olten .t-heroA>*{min-width:0} #olten .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. */ #olten .t-hero-cta{margin-top:auto;flex:0 0 auto;align-self:flex-start} #olten .t-h-visual{display:flex;flex-direction:column;justify-content:space-between;gap:16px} #olten .t-hero h1{color:#fff;margin-bottom:0} /* Reines Weiss, wie die Ueberschrift darueber. Zuvor #EDF5FA — der Unterschied war winzig, wirkte aber matt. Die Hierarchie traegt jetzt allein die Schriftgroesse. */ #olten .t-hero .t-sub{font-size:1.14rem;color:#fff;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. */ #olten .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} #olten .t-docchip{position:relative} #olten .t-docchip b{display:block;color:#fff;font-weight:600;font-size:1rem;line-height:1.35} #olten .t-docchip span{color:#B2D6EA;font-size:.91rem;font-weight:450} #olten .t-hero-note{margin:18px 0 0;font-size:.96rem;color:#B2D6EA;font-weight:450} #olten .t-h-photo{position:relative} #olten .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} #olten .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 ===== */ #olten .t-sections{padding:0} #olten .t-sec-head{margin-bottom:52px;max-width:800px} #olten .t-sec-head.t-center{margin-left:auto;margin-right:auto} /* Statement */ #olten .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} #olten .t-big small{font-size:.36em;font-weight:500;vertical-align:super;letter-spacing:-.02em} #olten .t-stmt h2{max-width:17.5em;margin-left:auto;margin-right:auto} /* ===== SELBSTTEST ===== */ #olten .t-quiz{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:start} #olten .t-quiz>*{min-width:0} #olten .t-qlist{display:grid;gap:10px} #olten .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} #olten .t-qrow:hover{background:rgba(255,255,255,.82)} #olten .t-qrow p{margin:0;flex:1;font-size:1.02rem;font-weight:450;color:var(--ink);letter-spacing:-.012em} #olten .t-seg{display:inline-flex;background:rgba(12,38,50,.06);border-radius:var(--r-chip);padding:3px;flex:0 0 auto} #olten .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} #olten .t-seg button[aria-pressed="true"]{background:#fff;color:var(--petrol);box-shadow:0 2px 8px rgba(12,38,50,.14)} #olten .t-seg button.t-no[aria-pressed="true"]{color:var(--body)} #olten .t-seg button:focus-visible{outline:3px solid var(--cyan);outline-offset:2px} #olten .t-qresult{position:sticky;top:120px;padding:34px 30px;border-radius:var(--r-lg)} #olten .t-qmeter{height:8px;border-radius:8px;background:rgba(12,38,50,.10);overflow:hidden;margin:6px 0 22px} #olten .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)} #olten .t-qcount{font-size:2.6rem;font-weight:600;color:var(--petrol-mid);letter-spacing:-.04em;line-height:1; display:block;margin-bottom:4px} #olten .t-qcount span{font-size:.4em;font-weight:500;color:var(--body)} #olten .t-qtext{font-size:1.02rem;font-weight:450;margin-bottom:22px;min-height:5.4em} #olten .t-qtext b{color:var(--ink);font-weight:600} #olten .t-qdisc{font-size:.9rem;color:#2C4A57;font-weight:450;margin:20px 0 0;line-height:1.6} #olten .t-qactions{display:flex;flex-direction:column;gap:10px} #olten .t-qactions .t-btn{width:100%} /* ===== Ärzte ===== */ #olten .t-docs{display:grid;gap:0} #olten .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)} #olten .t-doc:last-child{border-bottom:0} #olten .t-doc:first-child{padding-top:0} #olten .t-doc>*{min-width:0} #olten .t-doc.t-flip{grid-template-columns:1.18fr .82fr} #olten .t-doc.t-flip .t-doc-media{order:2} #olten .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)} #olten .t-doc h3{font-size:clamp(1.35rem,2.3vw,1.9rem);letter-spacing:-.032em;margin-bottom:6px} #olten .t-doc .t-role{display:block;font-size:.96rem;font-weight:600;color:var(--cyan-txt);margin-bottom:18px; letter-spacing:-.01em} #olten .t-doc p{font-size:1.03rem;line-height:1.72;font-weight:450;max-width:46em} #olten .t-doc p:last-child{margin-bottom:0} #olten .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} #olten .t-doc .t-more{max-height:none;overflow:visible} #olten .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} #olten .t-toggle:hover{background:#fff;border-color:var(--petrol-mid)} #olten .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)} #olten .t-doc.t-open .t-toggle::after{transform:rotate(225deg) translateY(-2px)} #olten .t-toggle:focus-visible{outline:3px solid var(--cyan);outline-offset:3px} /* ===== Ablauf ===== */ #olten .t-steps{display:grid;gap:12px} #olten .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} #olten .t-step{border:1px solid rgba(12,38,50,.10)} #olten .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)} #olten .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)} #olten .t-step:hover .t-stepn{background:var(--petrol-mid);color:#fff;border-color:var(--petrol-mid);transform:scale(1.06)} #olten .t-step p{font-size:1.02rem;margin:0;max-width:70ch;font-weight:450} /* ===== CTA ===== */ #olten .t-cta{text-align:center;padding:82px 60px} #olten .t-cta h2{max-width:19.5em;margin-left:auto;margin-right:auto} #olten .t-cta p{max-width:740px;margin:0 auto 26px;font-size:1.12rem;font-weight:450} /* ===== FAQ ===== */ #olten .t-faq-tools{display:flex;gap:11px;flex-wrap:wrap;align-items:center;margin-bottom:34px} #olten .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)} #olten .t-chip:hover{border-color:var(--cyan-txt);background:#F4FAFD} #olten .t-chip.t-active{background:var(--petrol-mid);border-color:var(--petrol-mid);color:#fff} #olten .t-chip:focus-visible{outline:3px solid var(--cyan);outline-offset:3px} #olten .t-search{flex:1;min-width:230px} #olten .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} #olten .t-search input:focus{outline:none;border-color:var(--cyan-txt);background:#fff; box-shadow:0 0 0 4px rgba(0,158,227,.12)} #olten .t-search input::placeholder{color:#2C4A57;font-weight:450} #olten .t-faqcat{margin-bottom:30px} #olten .t-faqcat[hidden]{display:none} #olten .t-faqcat h4{font-size:1rem;font-weight:700;color:var(--ink);margin:0 0 12px;letter-spacing:-.02em} #olten details{border:1px solid rgba(12,38,50,.12);border-radius:var(--r-md);margin-bottom:10px; background:rgba(255,255,255,.72)} #olten details:hover{background:#fff;border-color:rgba(0,158,227,.5);box-shadow:0 10px 26px rgba(0,64,94,.13)} #olten details[open]{border-color:var(--petrol-mid);background:#fff;box-shadow:0 16px 40px rgba(0,64,94,.17)} #olten details[open] summary{background:rgba(0,158,227,.06);border-radius:var(--r-md) var(--r-md) 0 0} #olten details[hidden]{display:none} #olten 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} #olten summary::-webkit-details-marker{display:none} #olten summary i{flex:0 0 16px;height:16px;margin-top:5px;position:relative} #olten summary i::before,#olten summary i::after{content:"";position:absolute;background:var(--cyan-txt);border-radius:2px; transition:transform .3s var(--ease),opacity .3s} #olten summary i::before{left:0;top:7px;width:16px;height:2px} #olten summary i::after{left:7px;top:0;width:2px;height:16px} #olten details[open] summary i::after{transform:rotate(90deg);opacity:0} #olten details p{margin:0 0 20px;font-size:1.02rem;font-weight:450;padding:0 24px} #olten details ul{margin:0 0 20px;padding-left:46px;padding-right:24px;font-size:1.02rem;font-weight:450} #olten details li{margin-bottom:6px} #olten .t-noresult{padding:26px 0;font-weight:500} /* ===== Honorar + Rechner ===== */ #olten .t-feegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:40px} #olten .t-feegrid>*{min-width:0} #olten .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} #olten .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} #olten .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} #olten .t-fee p{font-size:1.01rem;margin:0;font-weight:450} #olten .t-calc{padding:38px 36px;border-radius:var(--r-md)} #olten .t-calc-grid{display:grid;grid-template-columns:1fr .8fr;gap:40px;align-items:center} #olten .t-calc-grid>*{min-width:0} #olten .t-ctrl{margin-bottom:26px} #olten .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} #olten .t-ctrl label b{color:var(--petrol-mid);font-weight:600} #olten input[type=range]{width:100%;-webkit-appearance:none;appearance:none; background:transparent;outline:none} #olten 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)} #olten input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.1)} #olten 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} #olten input[type=range]:focus-visible{box-shadow:0 0 0 4px rgba(0,158,227,.18)} #olten .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)} #olten .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} #olten .t-calc-out small{display:block;font-size:.95rem;font-weight:500;color:var(--body)} #olten .t-calc-rows{margin-top:20px;text-align:left;font-size:.97rem;font-weight:450} /* Nur die Postenzeilen, nicht die Gruppen und Gruppentitel. Der fruehere Selektor .t-calc-rows div traf jedes div und machte damit auch die Gruppencontainer zu Flex-Zeilen. */ #olten .t-calc-zeile{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line-soft)} #olten .t-calc-gruppe .t-calc-zeile:last-child{border-bottom:0} /* ===== Buchen ===== */ #olten .t-bookhead{text-align:center;max-width:740px;margin:0 auto 40px} #olten .t-bookhead .t-lede{margin:0 auto} #olten .t-blist{list-style:none;padding:0;margin:0 auto 36px;max-width:960px;display:grid; grid-template-columns:repeat(2,1fr);gap:12px} #olten .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} #olten .t-blist .t-ic{width:20px;height:20px;margin-top:3px;color:var(--cyan-txt);flex:0 0 auto} #olten .t-blist b{color:var(--ink);font-weight:600} /* Buchungsbereich bekommt eine breitere Spalte, damit Calendlys zweispaltige Formularansicht ohne Querbalken passt */ #olten #buchen>.t-wrap{max-width:1400px} #olten .t-cal{border-radius:var(--r-md);padding:12px;position:relative;margin:0 auto;width:100%} #olten .t-cal-head{display:flex;align-items:center;gap:12px;padding:16px 20px 18px;border-bottom:1px solid var(--line)} #olten .t-cal-head .t-ic{width:20px;height:20px;color:var(--cyan-txt)} #olten .t-cal-head strong{color:var(--ink);font-weight:600;font-size:1.05rem;letter-spacing:-.015em} #olten .t-cal-head span{margin-left:auto;font-size:.94rem;font-weight:450} #olten .t-cal-frame{border-radius:0 0 var(--r-md) var(--r-md);overflow:hidden;position:relative} #olten .calendly-inline-widget{min-width:320px;height:1420px;width:100%} #olten .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} #olten .t-cal-load.t-gone{opacity:0} #olten .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)}} #olten .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} #olten .t-contact h3{font-size:1.5rem;margin-bottom:12px} #olten .t-contact p{max-width:660px;margin:0 auto 24px;font-weight:450} #olten .t-contact-actions{display:flex;gap:13px;justify-content:center;flex-wrap:wrap} /* ===== Footer ===== */ #olten footer{background:linear-gradient(165deg,#00405E,#002E45);color:#D6E8F2;padding:74px 0 34px} #olten .t-ft{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:42px} #olten .t-ft>*{min-width:0} #olten .t-ft h4{color:#fff;font-size:1rem;margin-bottom:14px} #olten .t-ft p{font-size:.99rem;color:#D6E8F2;font-weight:450} #olten .t-ft a{color:#D6E8F2;text-decoration:none;font-size:.99rem;display:block;padding:6px 0;font-weight:450; transition:color .2s} #olten .t-ft a:hover{color:var(--cyan-lt)} #olten .t-ft a.t-with-ic{display:inline-flex;align-items:center;gap:10px} #olten .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) */ #olten .t-band-dark .t-doc .t-role{color:var(--cyan-lt)} #olten .t-band-dark .t-ctrl label{color:#fff} #olten .t-band-dark .t-ctrl label b{color:var(--cyan-lt)} #olten .t-band-dark .t-band-dark .t-calc-out{background:rgba(255,255,255,.95);border-color:rgba(255,255,255,1)} #olten .t-band-dark .t-calc-out small,#olten .t-band-dark .t-calc-out span,#olten .t-band-dark .t-calc-zeile{color:var(--body)} #olten .t-band-dark .t-calc-out .t-sum{color:var(--cyan-txt)} #olten .t-band-dark .t-calc-gesamt{color:var(--ink)} /* Die Honorarkarten sind weiss — der Text darin muss dunkel sein. Er stand versehentlich noch auf der hellen Glasfarbe und erreichte damit nur Kontrast 1,26. */ #olten .t-band-dark .t-fee p{color:var(--body)} #olten .t-band-dark .t-feenote,#olten .t-band-dark .t-calc>.t-qdisc{color:#B2D6EA} #olten .t-band-dark .t-stmt .t-big,#olten .t-band-dark .t-big{color:var(--cyan-lt)} /* ===== AMS-Selbsttest ===== */ #olten .t-ams{padding:44px 44px 40px} #olten .t-ams-top{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-bottom:30px} #olten .t-ams-tabs{display:flex;gap:8px;flex-wrap:wrap} #olten .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)} #olten .t-ams-tab.t-on{background:rgba(12,38,50,.05);color:var(--ink)} #olten .t-ams-tab.t-on em{background:var(--cyan);color:#0C2632;font-weight:600} #olten .t-ams-tab.t-done{background:rgba(12,38,50,.05);color:var(--ink);border-color:transparent} #olten .t-ams-tab.t-done em{background:var(--petrol-mid);color:#fff} #olten .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)} #olten .t-ams-tab.t-done em::after{content:"✓"} #olten .t-ams-tab.t-done em{font-size:.88rem} #olten .t-ams-count{margin-left:auto;font-size:.94rem;font-weight:500;color:var(--body); font-variant-numeric:tabular-nums} #olten .t-ams-bar{height:6px;border-radius:6px;background:rgba(12,38,50,.09);overflow:hidden;margin-bottom:30px} #olten .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)} #olten .t-ams-group[hidden]{display:none} #olten .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} #olten .t-q:last-child{border-bottom:0} #olten .t-q p{margin:0;font-size:1.02rem;font-weight:450;color:var(--ink);letter-spacing:-.012em} #olten .t-q p b{font-weight:600;color:var(--petrol-mid);margin-right:8px;font-variant-numeric:tabular-nums} #olten .t-scale{display:flex;gap:6px;flex:0 0 auto} #olten .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} #olten .t-scale button:hover{border-color:var(--cyan-txt);background:#F4FAFD} #olten .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)} #olten .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. */ #olten .t-ams-nav{display:flex;flex-direction:column;gap:16px;margin-top:28px} #olten .t-ams-nav-btns{display:flex;gap:12px;align-items:center} #olten .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. */ #olten #amsPrev[hidden]{display:inline-flex;visibility:hidden;pointer-events:none} @media (min-width:701px){ #olten .t-ams-nav{flex-direction:row;align-items:center;justify-content:space-between;gap:20px} #olten .t-ams-nav .t-ams-hint{order:2;text-align:center;flex:1 1 auto} #olten .t-ams-nav-btns{order:3;flex:0 0 auto} #olten .t-ams-nav-btns .t-btn{flex:0 0 auto} } #olten .t-ams-hint{font-size:.92rem;font-weight:450;color:#2C4A57;align-self:center} #olten .t-ams-result[hidden]{display:none} #olten .t-ams-result{margin-top:6px} #olten .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} #olten .t-res-score{text-align:center} #olten .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} #olten .t-res-score span{font-size:.9rem;font-weight:500;color:var(--body)} #olten .t-res-cat{font-size:1.3rem;font-weight:600;color:var(--ink);margin:0 0 8px;letter-spacing:-.02em} #olten .t-res-txt{margin:0;font-size:1.02rem;font-weight:450} #olten .t-subs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:26px} #olten .t-ams-sub{padding:20px 22px;border-radius:var(--r-md)} #olten .t-ams-sub h4{font-size:.98rem;margin:0 0 4px;font-weight:600} #olten .t-ams-sub .t-val{font-size:1.5rem;font-weight:600;color:var(--petrol-mid);letter-spacing:-.03em; font-variant-numeric:tabular-nums} #olten .t-ams-sub .t-val small{font-size:.62em;font-weight:500;color:var(--body)} #olten .t-ams-sub .t-track{height:5px;border-radius:5px;background:rgba(12,38,50,.09);overflow:hidden;margin-top:10px} #olten .t-ams-sub .t-track i{display:block;height:100%;border-radius:5px;background:var(--petrol-mid);width:0; transition:width .6s var(--ease)} /* justify-content zentriert die Knoepfe, wenn sie auf schmalen Bildschirmen umbrechen. align-items waere hier wirkungslos, weil die Reihenrichtung waagrecht ist. */ #olten .t-res-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center} @media (max-width:1000px){ #olten .t-ams{padding:26px 20px 28px} #olten .t-q{grid-template-columns:1fr;gap:12px} #olten .t-scale{justify-content:space-between} #olten .t-scale button{flex:1;width:auto} #olten .t-scale-legend{max-width:none;margin-left:0} #olten .t-res-top{grid-template-columns:1fr;gap:18px;text-align:center;padding:24px 20px} #olten .t-subs{grid-template-columns:1fr} } /* FAQ: weiches Auf- und Zuklappen */ #olten .t-faq-body{height:0;overflow:hidden;will-change:height} #olten .t-faq-inner{opacity:0;transform:translateY(-7px); transition:opacity .36s var(--ease-aus) .05s,transform .44s var(--ease-aus) .05s} #olten details.t-opening .t-faq-inner,#olten details[open].t-done .t-faq-inner{opacity:1;transform:none} #olten details.t-closing .t-faq-inner{opacity:0;transform:translateY(-5px); transition:opacity .16s var(--ease-ein),transform .2s var(--ease-ein)} #olten summary i::before,#olten summary i::after{transition:transform .4s var(--ease),opacity .3s var(--ease)} #olten details[open] summary i::before{transform:rotate(180deg)} #olten summary{transition:color .25s var(--ease),padding .3s var(--ease)} #olten details{transition:border-color .3s var(--ease),box-shadow .35s var(--ease),background .3s var(--ease), transform .3s var(--ease)} #olten details[open]{transform:translateY(-1px)} @media (prefers-reduced-motion:reduce){ #olten .t-faq-body{transition:none!important} #olten .t-faq-inner{opacity:1!important;transform:none!important} } /* ===== Schwebende Info-Karten am Hero-Bild ===== */ #olten .t-h-photo{--mx:0;--my:0} /* Drei gleich breite Glaselemente unter dem Bild */ #olten .t-hero-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0;position:relative;z-index:4} /* Heller Schleier statt deckendem Weiss. Zuvor waren Karten und Buchungsknopf beide weiss mit gleichem Radius und dadurch verwechselbar. Jetzt ist der Knopf das einzige weisse Element im Hero und zieht den Blick. Der Schleier bleibt bei 10 Prozent: Bei 14 Prozent faellt der Kontrast des Nebentextes auf 4,38 und damit unter die Grenze. */ /* Symbol ueber dem Titel statt daneben — das gibt dem Text die volle Kartenbreite. Auf jedem Geraet gleich. */ #olten .t-hero-card{position:relative;display:flex;flex-direction:column; align-items:center;justify-content:center;text-align:center;gap:7px;padding:15px 17px; border-radius:var(--r-md);color:#fff;max-width:none; /* 6 statt 10 Prozent: Waehrend des Einblendens wirkte der Schleier schwaecher und damit glasiger — dieser Zustand ist jetzt der dauerhafte. Weniger Schleier heisst dunklerer Grund, der Kontrast steigt dadurch von 7,55 auf 8,38. */ background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.26); -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%); box-shadow:0 14px 34px rgba(0,14,24,.22),inset 0 1px 0 rgba(255,255,255,.22); transition:transform .25s var(--ease),background .25s, border-color .25s var(--ease),box-shadow .25s var(--ease)} #olten .t-hero-card:hover{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.40);transform:translateY(-3px); box-shadow:0 22px 48px rgba(0,14,24,.30)} #olten .t-hero-card:active{transform:translateY(-1px)} /* #9BDCF7 statt #7FD2F3: am hellsten Ende des Verlaufs steigt der Kontrast damit von 4,46 auf 5,02. */ #olten .t-hero-card .t-ic{width:19px;height:19px;color:#9BDCF7;flex:0 0 auto;stroke-width:2.2} /* Auch der Titel braucht die Umbruchsicherung: "telemedizinisch" stand bei 1024 Pixeln 8 Pixel ueber den Kartenrand hinaus. hyphens:auto setzt einen Trennstrich, weil die Seite lang="de-CH" traegt. */ #olten .t-hero-card b{display:block;font-size:1.01rem;color:#fff;font-weight:600; letter-spacing:-.02em;line-height:1.25;margin-bottom:3px; overflow-wrap:anywhere;hyphens:auto} /* Bei drei Karten nebeneinander bleiben ab 1024 Pixeln nur 115 Pixel fuer den Text. Ein einzelnes langes Wort kann nicht umbrechen und wuerde ueberstehen — diese beiden Eigenschaften fangen das ab, falls der Text spaeter wieder laenger wird. */ #olten .t-hero-card-a{transform:translate3d(calc(var(--mx)*-7px),calc(var(--my)*-5px),0)} #olten .t-hero-card-b{transform:translate3d(calc(var(--mx)*0px),calc(var(--my)*-5px),0)} #olten .t-hero-card-c{transform:translate3d(calc(var(--mx)*7px),calc(var(--my)*-5px),0)} #olten .t-hero-card-a:hover{transform:translate3d(calc(var(--mx)*-7px),calc(var(--my)*-5px),0) translateY(-3px)} #olten .t-hero-card-b:hover{transform:translate3d(0,calc(var(--my)*-5px),0) translateY(-3px)} #olten .t-hero-card-c:hover{transform:translate3d(calc(var(--mx)*7px),calc(var(--my)*-5px),0) translateY(-3px)} #olten .t-hero-card-a:hover,#olten .t-hero-card-b:hover{ transform:translate3d(calc(var(--mx)*-14px),calc(var(--my)*-10px),0) scale(1.035)} #olten .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 */ #olten .t-steps{position:relative;padding-left:0} #olten .t-steps::before{content:"";position:absolute;left:25px;top:26px;bottom:26px;width:2px; background:rgba(12,38,50,.09);border-radius:2px} #olten .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} #olten .t-step{position:relative;z-index:1} #olten .t-step .t-stepn{position:relative;z-index:2} #olten .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 */ #olten .t-doc .t-ph{transition:box-shadow .4s var(--ease),transform .4s var(--ease)} #olten .t-doc:hover .t-ph{transform:translateY(-4px);box-shadow:0 26px 56px rgba(12,38,50,.2)} /* Preiskarten */ /* Der Betrag bleibt beim Zeigen unveraendert. Die Karte darf sich weiterhin anheben — nur die Zahl soll nicht mitwachsen, sonst wirkt der Preis wie ein Werbeelement statt wie eine Angabe. */ /* ===== Karten: weiss, klar abgesetzt ===== */ #olten .t-tile,#olten .t-step,#olten #faqlist details,#olten .t-fee,#olten .t-blist li,#olten .t-contact,#olten .t-panel,#olten .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} #olten .t-step:hover,#olten .t-fee:hover,#olten .t-blist li:hover{transform:translateY(-3px); border-color:rgba(0,158,227,.45);box-shadow:0 14px 34px rgba(0,64,94,.13)} #olten .t-step:active,#olten .t-fee:active{transform:translateY(-1px)} #olten #faqlist details:hover{border-color:rgba(0,158,227,.45);box-shadow:0 12px 30px rgba(0,64,94,.12)} #olten #faqlist details[open]{border-color:var(--petrol-mid);box-shadow:0 16px 38px rgba(0,64,94,.15)} #olten #faqlist details[open] summary{background:rgba(0,158,227,.05)} /* Elemente innerhalb der weissen Karten leicht getönt */ #olten .t-ams-sub{background:var(--card);border:1px solid rgba(12,38,50,.07);box-shadow:none} #olten .t-q{border-bottom-color:rgba(12,38,50,.09)} #olten .t-qresult{background:var(--card);border:1px solid rgba(12,38,50,.07);box-shadow:none} #olten .t-scale button{background:var(--card);border-color:rgba(12,38,50,.10)} #olten .t-scale button:hover{background:#fff} #olten .t-scale button[aria-checked="true"]{background:var(--petrol-mid);border-color:var(--petrol-mid)} #olten .t-calc .t-calc-out{background:var(--card);border-color:rgba(12,38,50,.07)} /* ===== Dunkles Band wie im Hero ===== */ #olten .t-band-dark{background:linear-gradient(155deg,#00486A 0%,#00405E 46%,#00344E 100%);color:#fff; position:relative;overflow:hidden} #olten .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} #olten .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} #olten .t-band-dark>.t-wrap{position:relative;z-index:2} #olten .t-band-dark h2{color:#fff} #olten .t-band-dark p{color:#D6E8F2} #olten .t-band-dark .t-btn-solid{background:#fff;color:var(--petrol)} #olten .t-band-dark .t-btn-solid:hover{background:#E6F3FA;color:var(--petrol)} #olten .t-band-dark .t-btn:hover{box-shadow:none} /* Honorar auf dunklem Grund */ #olten .t-band-dark .t-feenote{color:#D6E8F2} #olten .t-band-dark .t-calc>p{color:#D6E8F2} #olten .t-band-dark .t-ctrl label{color:var(--body)} #olten .t-band-dark .t-ctrl label b{color:var(--cyan-txt)} /* Honorar auf dunklem Grund: Karten bleiben weiss */ /* Die drei Honorarkarten bleiben weiss: Dort steht Fliesstext, der gelesen wird. Auf Weiss erreicht er Kontrast 15,7 statt 6,0. */ #olten .t-band-dark .t-fee,#olten .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)} /* Der Kostenrechner als Glas. Dort stehen Zahlen und Bedienelemente, keine Lesetexte — der Effekt traegt hier, ohne zu stoeren. */ #olten .t-band-dark .t-calc{background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.24); -webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%); box-shadow:0 16px 38px rgba(0,14,24,.24),inset 0 1px 0 rgba(255,255,255,.22)} #olten .t-band-dark .t-fee h3{color:var(--ink)} #olten .t-band-dark .t-calc h3{color:#fff} #olten .t-band-dark .t-calc p{color:#D6E8F2} #olten .t-band-dark .t-calc .t-qdisc{color:#D6E8F2} #olten .t-band-dark .t-fee .t-amt{color:var(--cyan-txt)} #olten .t-band-dark .t-ctrl label{color:var(--body)} #olten .t-band-dark .t-ctrl label b{color:var(--cyan-txt)} #olten .t-band-dark /* Das Ausgabefeld bleibt hell: Zahlen brauchen den hoechsten Kontrast. Es sitzt als helle Flaeche im Glas — derselbe Aufbau wie die Medienkarte, nur umgekehrt. */ .t-band-dark .t-calc-out{background:rgba(255,255,255,.94);border-color:rgba(255,255,255,.5)} #olten .t-band-dark .t-calc-out .t-sum{color:var(--cyan-txt)} #olten .t-band-dark .t-calc-out small,#olten .t-band-dark .t-calc-zeile,#olten .t-band-dark .t-calc-zeile span{color:var(--body)} #olten .t-band-dark .t-calc-gesamt,#olten .t-band-dark .t-calc-gesamt span{color:var(--ink)} #olten .t-band-dark .t-fee:hover{border-color:var(--cyan);box-shadow:0 26px 58px rgba(0,20,32,.38)} /* ===== Akzentsystem: Markenzyan #009EE3 konsequent ===== */ /* Zahlen tragen den Akzent */ #olten .t-big{color:var(--cyan-txt)} #olten .t-fee .t-amt{color:var(--cyan-txt)} #olten .t-calc-out .t-sum{color:var(--cyan-txt)} #olten .t-res-score b,#olten .t-qcount{color:var(--cyan-txt)} /* Hover: Rand und Schimmer in der Markenfarbe */ #olten .t-step:hover,#olten .t-fee:hover,#olten .t-blist li:hover,#olten #faqlist details:hover,#olten .t-hero-card:hover,#olten .t-contact:hover,#olten .t-tile:hover{border-color:var(--cyan)} #olten #faqlist details[open]{border-color:var(--cyan)} #olten .t-chip:hover{border-color:var(--cyan)} #olten .t-search input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,158,227,.16)} #olten .t-toggle:hover{border-color:var(--cyan)} #olten .t-qrow:hover{border-color:var(--cyan)} /* Linien in der Markenfarbe. Der Lesefortschritt stand hier frueher ein zweites Mal — er ist jetzt oben in seiner Grundregel enthalten. */ #olten .t-steps-fill{background:linear-gradient(180deg,var(--cyan),var(--petrol-mid))} #olten .t-ams-bar i,#olten .t-qmeter i{background:linear-gradient(90deg,var(--petrol-mid),var(--cyan))} #olten nav a::after{background:var(--cyan)} /* Ablaufziffer: beim Ueberfahren Markenfarbe mit dunklem Text */ #olten .t-step:hover .t-stepn{background:var(--petrol-mid);color:#fff;border-color:var(--petrol-mid)} #olten .t-step.t-reached .t-stepn{background:var(--petrol-mid);color:#fff;border-color:var(--petrol-mid)} /* Buttons: Fokus und Lichtsaum */ #olten .t-btn:focus-visible,#olten .t-chip:focus-visible,#olten .t-toggle:focus-visible,#olten .t-scale button:focus-visible,#olten .t-seg button:focus-visible,#olten a:focus-visible,#olten summary:focus-visible,#olten input:focus-visible{ outline:3px solid var(--cyan);outline-offset:3px} #olten .t-btn-solid:hover{background:var(--petrol);box-shadow:0 12px 30px rgba(0,158,227,.34)} #olten .t-btn-white:hover{box-shadow:0 12px 30px rgba(0,158,227,.30)} #olten .t-btn-outline:hover{border-color:var(--cyan);color:var(--cyan-txt)} /* Auswahl im Selbsttest */ #olten .t-scale button[aria-checked="true"],#olten .t-seg button[aria-pressed="true"]{ background:var(--petrol-mid);border-color:var(--petrol-mid)} #olten .t-scale button:hover{border-color:var(--cyan)} /* Textmarkierung */ #olten ::selection{background:rgba(0,158,227,.22);color:var(--ink)} /* ===== Feinschliff: Tippziele, Kleinstschrift, sehr schmale Geraete ===== */ /* Mindestgrösse für Tippziele nach Apples Richtlinie */ #olten .t-chip{padding:13px 22px} #olten nav a{padding:11px 0} #olten .t-ft a{padding:10px 0} #olten .t-ft a.t-with-ic{padding:10px 0} #olten .t-verify{padding:8px 0;display:inline-flex} #olten .t-toggle{padding:12px 20px} #olten .t-scale button{min-height:46px} #olten .t-seg button{min-height:44px;padding:11px 18px} #olten summary{min-height:56px} /* Schieberegler: grössere Trefferfläche */ #olten input[type=range]{height:40px;background:transparent;padding:0;cursor:pointer;margin:0} #olten input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:rgba(12,38,50,.16)} #olten input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;margin-top:-10px;width:24px;height:24px} #olten input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:rgba(12,38,50,.16)} #olten .t-band-dark input[type=range]::-webkit-slider-runnable-track{background:rgba(12,38,50,.16)} #olten .t-band-dark input[type=range]::-moz-range-track{background:rgba(12,38,50,.16)} #olten .t-ctrl{margin-bottom:18px} @media (max-width:400px){ #olten .t-wrap{padding:0 18px} /* Kalender randabfallend, damit Calendlys Mindestbreite passt */ #olten .t-cal{margin-left:-18px;margin-right:-18px;border-radius:0;padding:0;border-left:0;border-right:0} #olten .t-cal-head{padding:14px 16px} #olten .t-cal-load{left:0;right:0;bottom:0} #olten .calendly-inline-widget{min-width:0} #olten .t-step{grid-template-columns:42px 1fr;gap:14px;padding:20px 16px} #olten .t-stepn{width:42px;height:42px;border-radius:12px;font-size:1.1rem} #olten .t-step>*{min-width:0} #olten .t-hero-card{padding:12px 14px} #olten summary{padding:17px 18px;gap:14px} #olten #faqlist details p{padding:0 18px} #olten #faqlist details ul{padding-left:38px;padding-right:18px} #olten .t-panel{padding:26px 18px} #olten .t-fee,#olten .t-calc{padding:26px 20px} #olten .t-blist li{padding:16px 18px} #olten .t-contact{padding:30px 20px} } /* AMS-Reiter: dunkelblauer Grund, hellblauer Kreis, weisse Ziffer */ #olten .t-ams-tab.t-on{background:var(--petrol-mid);color:#fff} #olten .t-ams-tab.t-on em{background:#fff;color:var(--petrol-mid)} #olten .t-ams-tab.t-done{background:rgba(0,158,227,.10);color:var(--petrol-mid); border-color:rgba(0,158,227,.24)} #olten .t-ams-tab.t-done em{background:var(--petrol-mid);color:#fff} /* ===== Kostenrechner: Auswahlflaechen statt Schieberegler ===== */ #olten .t-calc-intro{margin-bottom:32px} #olten .t-opt{margin-bottom:26px} #olten .t-opt:last-child{margin-bottom:0} #olten .t-opt-lbl{display:block;font-size:.88rem;font-weight:600;letter-spacing:.06em; text-transform:uppercase;color:#2C4A57;margin-bottom:10px} #olten .t-segrp{display:flex;gap:8px;flex-wrap:wrap} #olten .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)} /* Beim Zeigen derselbe Effekt wie bei den Fragen im FAQ: ein cyaner Rand mit 45 Prozent Deckkraft und ein weicher blauer Schatten. Der hellblaue Grund bleibt zusaetzlich erhalten. */ #olten .t-segb:hover{border-color:rgba(0,158,227,.45);background:#F4FAFD; box-shadow:0 12px 30px rgba(0,64,94,.12)} #olten .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)} /* Die gewaehlte Flaeche traegt bereits einen Schatten; beim Zeigen wird er eine Spur staerker, damit auch sie reagiert. */ #olten .t-segb.t-on:hover{border-color:var(--petrol-mid); box-shadow:0 14px 32px rgba(0,64,94,.30)} #olten .t-segb:focus-visible{outline:3px solid var(--cyan);outline-offset:3px} /* Auf dem Glasgrund des Rechners gilt umgekehrt: Weiss ist die auffaelligste Fuellung und gehoert deshalb der gewaehlten Flaeche. Zuvor war die nicht gewaehlte weiss und zog den Blick staerker an als die gewaehlte. */ #olten .t-band-dark .t-segb{background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.26);color:#EDF5FA} /* Diese Regel steht nach .t-segb:hover und ist gleich stark — ohne eigene Hover-Fassung wuerde sie den Randwechsel wieder aufheben. Der Kostenrechner liegt auf einem dunklen Band, also greift sie. */ #olten .t-band-dark .t-segb:hover{border-color:rgba(255,255,255,.48); background:rgba(255,255,255,.18); box-shadow:0 12px 30px rgba(0,14,24,.20)} /* Die gewaehlte Flaeche behaelt ihre Fuellung und bekommt nur einen kraeftigeren Schatten. Ohne diese Regel wuerde die Zeile darueber sie mit hellblauem Grund ueberschreiben. */ #olten .t-band-dark .t-segb.t-on:hover{border-color:#fff;background:#fff; box-shadow:0 12px 28px rgba(0,14,24,.32)} #olten .t-band-dark .t-segb.t-on{background:#fff;border-color:#fff; color:var(--petrol);box-shadow:0 8px 20px rgba(0,14,24,.24)} #olten .t-band-dark .t-opt-lbl{color:#2C4A57} @media (max-width:1000px){ #olten .t-segb{min-width:0;flex:1 1 140px} } /* ===== Sticky mobil ===== */ @media (max-width:1000px){ #olten .t-heroA{grid-template-columns:1fr;gap:26px} #olten .t-h-copy,#olten .t-h-visual{gap:22px} #olten .t-quiz,#olten .t-calc-grid{grid-template-columns:1fr;gap:28px} #olten .t-qresult{position:static} #olten .t-feegrid,#olten .t-ft,#olten .t-blist{grid-template-columns:1fr} #olten .t-doc,#olten .t-doc.t-flip{grid-template-columns:1fr;gap:26px} #olten .t-doc.t-flip .t-doc-media{order:0} #olten .t-step{grid-template-columns:46px 1fr;gap:16px;padding:22px 20px} #olten .t-hero-cards{grid-template-columns:1fr;gap:9px;margin-top:12px} #olten .t-hero-card{padding:13px 15px;border-radius:15px;transform:none!important} #olten .t-hero-card b{font-size:.98rem} #olten .t-steps::before,#olten .t-steps-fill{left:43px} #olten .t-stepn{width:46px;height:46px;border-radius:14px;font-size:1.2rem} #olten .t-panel{padding:34px 22px;border-radius:var(--r-lg)} #olten .t-band{padding:66px 0} #olten .t-cta{padding:52px 24px} #olten .t-calc,#olten .t-contact{padding:30px 22px} #olten .t-cal{padding:6px} #olten .calendly-inline-widget{height:1720px} #olten .t-cal-head{padding:14px;flex-wrap:wrap} #olten .t-cal-head span{margin-left:0;width:100%;margin-top:4px} #olten .t-qrow{flex-wrap:wrap;gap:12px} #olten nav{display:none} } @media (prefers-reduced-motion:reduce){ #olten *,#olten *::before,#olten *::after{transition:none!important;animation:none!important;scroll-behavior:auto} #olten.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". =================================================================== */ #olten .t-btn{white-space:nowrap} @media (max-width:1000px){ #olten .t-wide-only{display:none} #olten .t-hd{height:64px;gap:14px} #olten header.t-scrolled .t-hd{height:58px} #olten .t-logo img{height:34px} #olten header.t-scrolled .t-logo img{height:30px} #olten header .t-btn{padding:10px 16px;font-size:.94rem;min-height:44px} #olten header .t-btn .t-ic{width:17px;height:17px} } @media (max-width:360px){ #olten header .t-btn{padding:10px 13px;font-size:.9rem} #olten .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){ #olten .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} #olten .t-cal-frame{border-radius:0} #olten .calendly-inline-widget{min-width:0;width:100%} } /* =================================================================== RECHTSTEXTE — Impressum, Datenschutzerklaerung Ruhige Lesespalte, mitlaufendes Inhaltsverzeichnis, gleiche Formensprache wie die Landingpage. =================================================================== */ #olten.t-legal-page{background:#fff} #olten .t-legal{padding:56px 0 96px} /* Zurueck-Verweis: als Umriss-Schaltflaeche statt als schlichter Textlink — zuvor war er kaum als Bedienelement erkennbar. */ #olten .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)} #olten .t-back:hover{background:#F4FAFD;border-color:var(--petrol-mid);color:var(--petrol)} #olten .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. */ #olten .t-back-end{margin-top:0} #olten .t-legal .t-wrap > .t-back-end{margin-top:52px} #olten .t-legal h1{font-size:clamp(2rem,4.4vw,3rem);letter-spacing:-.035em;line-height:1.08; color:var(--ink);margin:18px 0 10px} #olten .t-stand{font-size:.94rem;color:#2C4A57;margin-bottom:44px} /* Mehr Luft zwischen Inhaltsverzeichnis und Text: 64 auf 96 Pixel. */ #olten .t-legal-grid{display:grid;grid-template-columns:246px minmax(0,1fr);gap:0 96px;align-items:start} /* Inhaltsverzeichnis */ /* display:block hebt die Regel #olten 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. */ #olten .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. */ #olten .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. */ #olten .t-toc ol{list-style:none;counter-reset:toc;border-left:1px solid rgba(12,38,50,.18)} #olten .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. */ #olten .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)} #olten .t-toc a:hover{color:var(--petrol-mid)} #olten .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. */ #olten .t-legal-body{max-width:820px;font-size:1.22rem;line-height:1.72;color:var(--body)} #olten .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} #olten .t-legal-body h2:first-child{margin-top:0} #olten .t-legal-body h3{font-size:1.12rem;letter-spacing:-.012em;color:var(--ink); margin:32px 0 8px;scroll-margin-top:120px} #olten .t-legal-body h4{font-size:1rem;color:var(--ink);margin:24px 0 6px} #olten .t-legal-body p{margin:0 0 18px} #olten .t-legal-body strong,#olten .t-legal-body b{font-weight:600;color:var(--ink)} #olten .t-legal-body ul,#olten .t-legal-body ol{margin:0 0 18px;padding-left:24px} #olten .t-legal-body ul li{list-style:disc;display:list-item;margin-bottom:7px;padding-left:4px} #olten .t-legal-body ol li{list-style:decimal;display:list-item;margin-bottom:7px;padding-left:4px} #olten .t-legal-body a{color:#005F89;text-decoration:underline; text-underline-offset:3px;text-decoration-thickness:1px;overflow-wrap:anywhere} #olten .t-legal-body a:hover{color:var(--petrol-mid)} #olten .t-legal-body hr{border:0;height:1px;background:rgba(12,38,50,.08);margin:40px 0} /* Hervorgehobener Block, z.B. Kontaktadresse */ #olten .t-legal-body .t-box{background:var(--card);border-radius:var(--r-md);padding:24px 26px; margin:0 0 26px} #olten .t-legal-body .t-box p:last-child{margin-bottom:0} /* Definitionsliste fuer Impressum-Angaben */ #olten .t-legal-body dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 26px; margin:0 0 26px} #olten .t-legal-body dt{font-weight:600;color:var(--ink)} #olten .t-legal-body dd{margin:0} @media (max-width:900px){ #olten .t-legal-grid{grid-template-columns:1fr;gap:0} #olten .t-toc{position:static;max-height:none;margin-bottom:36px;padding:20px 22px; background:var(--card);border-radius:var(--r-md);overflow:visible} #olten .t-toc ol{border-left:0;columns:2;column-gap:22px} #olten .t-toc a{padding:6px 0;border-left:0} #olten .t-toc a.t-cur{border-left:0} #olten .t-legal-body{max-width:none} #olten .t-legal{padding:36px 0 72px} } @media (max-width:520px){ #olten .t-toc ol{columns:1} #olten .t-legal-body dl{grid-template-columns:1fr;gap:2px 0} #olten .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. =================================================================== */ #olten .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)} #olten .t-burger:hover,#olten .t-burger.t-open{background:rgba(12,38,50,.07)} #olten .t-burger:focus-visible{outline:3px solid var(--cyan);outline-offset:2px} #olten .t-burger .t-ic{width:23px;height:23px;stroke-width:2;position:absolute; transition:opacity .22s var(--ease),transform .28s var(--ease)} #olten .t-burger-close{opacity:0;transform:rotate(-45deg) scale(.8)} #olten .t-burger[aria-expanded="true"] .t-burger-open{opacity:0;transform:rotate(45deg) scale(.8)} #olten .t-burger[aria-expanded="true"] .t-burger-close{opacity:1;transform:none} /* ═══════════════════════════════════════════════════════════════════ MOBILES MENUE — Vollbild, mittig, ruhig Nur unter 1000px. Der Desktop bleibt unberuehrt. ═══════════════════════════════════════════════════════════════════ */ #olten .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)} #olten .t-mnav.t-open{opacity:1;visibility:visible;pointer-events:auto} /* margin:0 auto hebt die Regel #olten nav{margin-left:auto} auf, die fuer die Kopfzeilen-Navigation gedacht ist, aber jedes nav-Element trifft. */ #olten .t-mnav nav{display:flex;flex-direction:column;align-items:center; gap:4px;width:100%;max-width:340px;margin:0 auto} #olten .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)} #olten .t-mnav.t-open nav a{opacity:1;transform:none} #olten .t-mnav.t-open nav a:nth-child(1){transition-delay:.06s} #olten .t-mnav.t-open nav a:nth-child(2){transition-delay:.11s} #olten .t-mnav.t-open nav a:nth-child(3){transition-delay:.16s} #olten .t-mnav.t-open nav a:nth-child(4){transition-delay:.21s} #olten .t-mnav.t-open nav a:nth-child(5){transition-delay:.26s} #olten .t-mnav nav a:active{background:rgba(255,255,255,.09)} /* Haarlinie zwischen Navigation und Handlungsaufforderung */ #olten .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)} #olten .t-mnav.t-open .t-mnav-trenner{opacity:1} #olten .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)} #olten .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. */ #olten .t-mnav-kopf{position:absolute;top:9px;left:0;right:0} #olten .t-mnav-kopf .t-wrap{display:flex;justify-content:flex-end} #olten .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)} #olten .t-mnav-zu:active{background:rgba(255,255,255,.18)} #olten .t-mnav-zu .t-ic{width:23px;height:23px;stroke-width:2} body.t-menu-offen{overflow:hidden} @media (min-width:1001px){ #olten .t-mnav,#olten .t-mnav-bd{display:none} } @media (max-width:1000px){ #olten .t-burger{display:flex} #olten .t-hd{justify-content:space-between} #olten .t-hd-cta{display:none} /* Alternative: Buchungsbutton statt Hamburger */ body.t-hd-btn #olten .t-hd-cta{display:inline-flex;margin-left:auto} body.t-hd-btn #olten .t-burger, body.t-hd-btn #olten .t-mnav, body.t-hd-btn #olten .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){ #olten .t-heroA{display:flex;flex-direction:column;gap:0;align-items:stretch} #olten .t-h-copy,#olten .t-h-visual{display:contents} #olten .t-hero h1{order:1;margin-bottom:20px} #olten .t-hero .t-sub{order:2;margin-bottom:30px} #olten .t-h-photo{order:3;margin-bottom:32px} #olten .t-docstrip{order:4;margin-bottom:32px} /* Karten vor dem Button — der Button schliesst den Hero ab */ #olten .t-hero-cards{order:5;grid-template-columns:1fr;gap:10px;margin-bottom:34px} #olten .t-hero-cta{order:6;margin-bottom:4px;align-self:stretch;margin-top:0;flex:0 0 auto} #olten .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 */ #olten .t-legal-body .t-box a{color:#005F89} /* Beide Kontakt-Schaltflaechen exakt gleich breit */ @media (max-width:1000px){ #olten .t-contact-actions{display:grid;grid-template-columns:1fr;gap:12px} #olten .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 */ #olten .t-narrow-only{display:inline} #olten .t-segb .t-wide-only{display:none} /* Kontakt: beide Schaltflaechen gleich breit */ #olten .t-contact-actions{display:flex;flex-direction:column;gap:10px;align-items:stretch} #olten .t-contact-actions .t-btn{width:100%;justify-content:center;text-align:center} } @media (min-width:1001px){ #olten .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 #olten, 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 */ #olten #faqlist summary i{transition:transform .44s var(--ease-aus), background .26s var(--ease-aus),color .26s var(--ease-aus)} /* ---- Vollbildmenue: laenger, weicher, gestaffelt ---- */ #olten .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)} #olten .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)} #olten .t-mnav.t-open nav a:nth-child(1){transition-delay:0s,0s,.10s,.10s} #olten .t-mnav.t-open nav a:nth-child(2){transition-delay:0s,0s,.17s,.17s} #olten .t-mnav.t-open nav a:nth-child(3){transition-delay:0s,0s,.24s,.24s} #olten .t-mnav.t-open nav a:nth-child(4){transition-delay:0s,0s,.31s,.31s} #olten .t-mnav.t-open nav a:nth-child(5){transition-delay:0s,0s,.38s,.38s} #olten .t-mnav.t-open .t-mnav-trenner{transition-delay:.44s} #olten .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 */ #olten .t-burger .t-ic{transition:opacity .26s var(--ease-aus), transform .42s var(--ease-weich)} @media (prefers-reduced-motion:reduce){ #olten .t-faq-inner{opacity:1!important;transform:none!important;transition:none!important} #olten .t-mnav nav a,#olten .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. */ #olten .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. ═══════════════════════════════════════════════════════════════════ */ #olten .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} #olten .t-scale-legend span{display:flex;align-items:center;gap:9px;max-width:16em} #olten .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} #olten .t-scale-legend span:last-child{text-align:right;justify-content:flex-end; flex-direction:row-reverse} @media (max-width:640px){ #olten .t-scale-legend{flex-direction:column;gap:10px;padding:14px} #olten .t-scale-legend span,#olten .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. ═══════════════════════════════════════════════════════════════════ */ #olten .t-steps{gap:22px} #olten .t-steps::before{top:14px;bottom:14px} #olten .t-steps-fill{top:14px} @media (max-width:1000px){ #olten .t-steps{gap:18px} #olten .t-steps::before{top:12px;bottom:12px} #olten .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. */ #olten .t-quelle{max-width:44rem;margin:26px auto 0;font-size:.875rem; line-height:1.55;color:#2C4A57} #olten .t-quelle i{font-style:italic} /* ═══════════════════════════════════════════════════════════════════ SPRACHUMSCHALTER Zurueckhaltend: ein Kuerzel, kein Fahnensymbol. Fahnen stehen fuer Laender, nicht fuer Sprachen — Englisch ist keine Flagge. ═══════════════════════════════════════════════════════════════════ */ #olten .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)} #olten .t-lang:hover{background:rgba(0,95,137,.09);color:var(--petrol)} #olten .t-lang:focus-visible{outline:3px solid var(--cyan);outline-offset:2px} /* im Vollbildmenue */ #olten .t-lang-mnav{display:none;margin:22px auto 0;color:#D6E8F2; border:1px solid rgba(255,255,255,.24);min-width:64px} #olten .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. */ #olten .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. ═══════════════════════════════════════════════════════════════════ */ #olten .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)} #olten .t-btn-outline-hell:hover{border-color:rgba(255,255,255,.75); background:rgba(255,255,255,.08);color:#fff} #olten .t-btn-outline-hell .t-ic{color:currentColor} #olten .t-lang{flex:0 0 auto;white-space:nowrap} #olten .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. */ #olten .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} #olten .t-ft-lang .t-ic{width:17px;height:17px} /* Im mobilen Menue voll ausgeschrieben */ #olten .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){ #olten .t-hd{display:grid;grid-template-columns:1fr auto 1fr; align-items:center;gap:12px;height:72px} #olten header.t-scrolled .t-hd{height:64px} #olten .t-logo{justify-self:start} #olten .t-logo img{height:40px} #olten header.t-scrolled .t-logo img{height:35px} #olten .t-lang{justify-self:center;padding:9px 15px;min-height:44px; font-size:.98rem} #olten .t-burger{justify-self:end;width:52px;height:52px} #olten .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. */ #olten .t-mnav-kopf{top:0;height:72px;display:flex;align-items:center} #olten .t-mnav-kopf .t-wrap{display:flex;justify-content:flex-end;width:100%} #olten .t-mnav-zu{width:52px;height:52px} #olten .t-mnav-zu .t-ic{width:27px;height:27px} #olten .t-mnav{padding-top:104px} } @media (max-width:400px){ #olten .t-logo img{height:34px} #olten .t-lang{padding:9px 12px;font-size:.94rem} #olten .t-lang .t-ic{width:16px;height:16px} #olten .t-burger,#olten .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){ #olten .t-wrap{max-width:660px} /* Hero: Titel groesser, Foto in ruhigerem Verhaeltnis */ #olten .t-hero h1{font-size:2.6rem} #olten .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. */ #olten .t-hero-cards{grid-template-columns:1fr;gap:12px} #olten .t-hero-cta{align-self:stretch} #olten .t-hero-cta .t-btn{width:100%;min-width:0} #olten .t-contact-actions{flex-direction:column;align-items:stretch} #olten .t-contact-actions .t-btn{width:100%;flex:0 0 auto} #olten .t-fees{grid-template-columns:1fr;gap:14px} /* Rechner: Auswahlflaechen nebeneinander */ #olten .t-segb{flex:1 1 0;min-width:0} /* Kalender ueber die volle Breite des Abschnitts */ #olten .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){ #olten .t-contact-actions{display:flex;gap:14px;justify-content:center} #olten .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){ #olten #buchen>.t-wrap{max-width:660px} #olten .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)} #olten .t-hero-cta .t-btn, #olten .t-contact-actions .t-btn{width:100%;max-width:380px;margin-left:auto;margin-right:auto} #olten .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. */ #olten .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){ } /* ═══════════════════════════════════════════════════════════════════ 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){ #olten header .t-lang{min-height:49px;height:49px} } /* In der Fusszeile ueber die volle Spaltenbreite, ausgeschrieben. */ #olten .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. */ #olten .t-hero-card b{font-size:.9rem;line-height:1.3; } } /* ═══════════════════════════════════════════════════════════════════ 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){ #olten .t-hero-cta{display:flex;justify-content:center} #olten .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){ } /* 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){ #olten .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. */ #olten .t-netz{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px;align-items:stretch;justify-items:stretch} #olten .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. */ /* Gleiche Machart wie die Hero-Karten: heller Schleier statt abgedunkeltem Grund. */ #olten .t-netz-medien{background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.24);border-radius:var(--r-md); -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%); box-shadow:0 14px 34px rgba(0,14,24,.22),inset 0 1px 0 rgba(255,255,255,.22)} /* 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. */ #olten .t-band-dark .t-netz .t-tile h3{color:var(--ink)} #olten .t-netz-medien h3{color:#fff} /* Die Verweise erben sonst die Linkfarbe des Themes — dunkles Cyan auf dunklem Grund. */ #olten .t-netz-medien .t-medium{color:#fff} #olten .t-netz-kopf{margin-bottom:30px;text-align:center} #olten .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. */ #olten .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. */ #olten .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)} #olten .t-netz-link:hover{background:rgba(0,158,227,.09)} #olten .t-netz-link:focus-visible{outline:2px solid var(--cyan);outline-offset:2px} #olten .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. */ #olten .l-gestapelt{height:84px} #olten .l-olten{height:77px} #olten .l-wohlen{height:82px} #olten .l-breit{height:54px} /* Medienliste */ #olten .t-medliste{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center} #olten .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)} #olten .t-medium:last-of-type{border-bottom:0;padding-bottom:0} #olten .t-medium:hover{padding-left:6px} #olten .t-medium b{display:block;font-size:1.08rem;font-weight:600;color:#fff;margin-bottom:4px} /* Ohne Elementnamen notiert, damit die spaeteren Regeln fuer .t-med-meta, .t-med-titel und .t-med-text nicht ueberstimmt werden. Mit "span" waere dieser Selektor spezifischer und wuerde gewinnen. */ #olten .t-medium > span{display:block;font-size:.9rem;line-height:1.5} #olten .t-medium em{font-style:normal;color:#9BDCF7;font-weight:500} @media (max-width:900px){ #olten .t-netz{grid-template-columns:1fr} } @media (max-width:520px){ #olten .t-netz > *{padding:24px 20px} #olten .t-netz-logos{gap:28px 16px} #olten .l-gestapelt{height:68px} #olten .l-olten{height:62px} #olten .l-wohlen{height:66px} #olten .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){ #olten .l-gestapelt{height:58px} #olten .l-olten{height:53px} #olten .l-wohlen{height:56px} #olten .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){ #olten .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){ #olten .t-netz{grid-template-columns:1fr} } /* ═══════════════════════════════════════════════════════════════════ MEDIENEINTRAEGE — Datum, Titel, Auszug ═══════════════════════════════════════════════════════════════════ */ #olten .t-med-meta{display:block;font-size:.82rem;font-weight:500; letter-spacing:.04em;color:#9BDCF7;margin-bottom:6px} #olten .t-med-titel{display:block;font-size:.98rem;font-weight:500; line-height:1.42;color:#fff;margin-bottom:7px} #olten .t-med-text{display:block;font-size:.89rem;line-height:1.58;color:#D6E8F2} #olten .t-medium b{margin-bottom:6px} #olten .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 #olten, nicht darin — deshalb ohne Leerzeichen notiert. Mit Leerzeichen wuerde die Regel nie greifen. */ #olten header .t-hd-cta{margin-left:12px} @media (min-width:1001px){ #olten header .t-hd-cta{margin-left:16px} } /* Groessere Zwischentitel, passend zur groesseren Grundschrift */ #olten .t-legal-body h2{font-size:1.62rem;margin-top:2.1em} #olten .t-legal-body h3{font-size:1.22rem;margin-top:1.7em} @media (max-width:900px){ #olten .t-legal-body{font-size:1.14rem} #olten .t-legal-body h2{font-size:1.42rem} #olten .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. */ #olten .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. */ #olten .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){ #olten .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){ #olten .t-calc{padding-left:16px;padding-right:16px} #olten .t-calc-out{padding-left:16px;padding-right:16px} #olten .t-calc-zeile,#olten .t-calc-gesamt{gap:12px} #olten .t-calc-zeile > span:first-child,#olten .t-calc-gesamt > span:first-child{flex:1 1 auto;min-width:0} #olten .t-calc-zeile > span:last-child,#olten .t-calc-gesamt > span: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){ #olten .t-calc-rows{font-size:.9rem} #olten .t-calc{padding-left:14px;padding-right:14px} #olten .t-calc-out{padding-left:14px;padding-right:14px} } /* ═══════════════════════════════════════════════════════════════════ KOSTENRECHNER — nach Kostentraeger gruppiert Die Posten stehen in drei Gruppen: unser Honorar, Laborkosten, Medikament. Nur die erste geht an TRTDoc; das wird durch eine farbige Kante links sichtbar gemacht. ═══════════════════════════════════════════════════════════════════ */ #olten .t-calc-gruppe{margin-bottom:18px} #olten .t-calc-gruppe:last-of-type{margin-bottom:12px} #olten .t-calc-gtitel{font-size:.82rem;font-weight:600;letter-spacing:.07em; text-transform:uppercase;color:var(--cyan-txt);margin-bottom:8px;padding-bottom:6px; border-bottom:1px solid rgba(12,38,50,.10)} /* Unsere eigene Gruppe abgesetzt — sie ist der Teil, den wir verrechnen */ #olten .t-calc-uns{padding-left:14px;border-left:3px solid var(--cyan); margin-left:-2px} #olten .t-calc-uns .t-calc-gtitel{color:var(--petrol-mid)} #olten .t-calc-zwischen{font-weight:600;color:var(--ink); border-top:1px solid rgba(12,38,50,.10);margin-top:4px;padding-top:8px} #olten .t-calc-gesamt{display:flex;justify-content:space-between;gap:12px; font-size:1.06rem;font-weight:700;color:var(--ink); border-top:2px solid rgba(12,38,50,.16);margin-top:14px;padding-top:12px} @media (max-width:520px){ #olten .t-calc-uns{padding-left:11px;border-left-width:3px} #olten .t-calc-gtitel{font-size:.78rem} } /* ═══════════════════════════════════════════════════════════════════ MOBILES MENUE — kuerzere Unterstreichung Im Vollbildmenue lief der Strich ueber die volle Eintragsbreite von 338 Pixeln und wirkte dadurch wie eine Trennlinie. Jetzt halb so breit und aus der Mitte wachsend, passend zu den zentrierten Eintraegen. Die Kopfzeilen-Navigation bleibt unveraendert. ═══════════════════════════════════════════════════════════════════ */ #olten .t-mnav nav a::after{left:50%;right:50%} #olten .t-mnav nav a:hover::after, #olten .t-mnav nav a:active::after, #olten .t-mnav nav a.t-active::after, #olten .t-mnav nav a:focus-visible::after{left:25%;right:25%} /* ═══════════════════════════════════════════════════════════════════ RECHTSSEITEN — breitere Textspalte auf Tablets Zwei Ursachen: Die Regel .t-wrap{max-width:660px} galt auch hier und liess nur 608 Pixel Text uebrig. Und im Hochformat eines iPad Pro (1024 Pixel) griff noch das zweispaltige Raster, in dem das Inhaltsverzeichnis nur 246 Pixel breit war — dort brachen die Kapitelnamen auf zwei bis drei Woerter um. Die Zeilenlaenge bleibt durch max-width:820px am Textkoerper begrenzt; sie waechst also nicht ins Unlesbare. ═══════════════════════════════════════════════════════════════════ */ @media (max-width:1000px){ #olten.t-legal-page .t-wrap{max-width:none} } @media (max-width:1100px) and (orientation:portrait){ #olten .t-legal-grid{grid-template-columns:1fr;gap:0} #olten.t-legal-page .t-wrap{max-width:none} /* Verzeichnis oben, als getoente Karte — wie auf dem Handy */ #olten .t-toc{position:static;max-height:none;margin-bottom:36px; padding:20px 22px;background:var(--card);border-radius:var(--r-md); overflow:visible} #olten .t-toc ol{border-left:0;columns:2;column-gap:22px} #olten .t-toc a{padding-left:0;border-left:0} } /* Vorsatz über der grossen Zahl. "Bis zu 25 %" ist die vorsichtigere und fachlich korrektere Aussage — die Studie nennt eine Obergrenze, keinen festen Anteil. */ #olten .t-vorsatz{display:block;font-size:1.05rem;font-weight:600; letter-spacing:.04em;color:var(--petrol-mid);margin-bottom:2px} @media (max-width:640px){ #olten .t-vorsatz{font-size:.98rem} } /* ═══════════════════════════════════════════════════════════════════ KOSTENRECHNER AUF GLAS — Beschriftungen aufhellen Alles ausserhalb des hellen Ausgabefeldes steht jetzt auf dem Glasgrund und braucht helle Schrift. Die Auswahlflaechen behalten ihren weissen Grund und dunklen Text — sie sind Bedienelemente und sollen sich abheben. Kontraste auf dem Glas (rgb(26,90,121) am hellsten Verlaufsende): Weiss 7,6 · #D6E8F2 6,0 · #9BDCF7 5,0 ═══════════════════════════════════════════════════════════════════ */ #olten .t-band-dark .t-calc .t-opt-lbl{color:#9BDCF7} #olten .t-band-dark .t-calc>.t-qdisc{color:#D6E8F2} /* ═══════════════════════════════════════════════════════════════════ HERO-KARTEN — Einblenden ohne Deckkraftwechsel Der Behaelter blendete ueber 0,8 Sekunden von durchsichtig auf voll ein. Waehrend dieser Zeit wirkte der Glasschleier schwaecher, danach sprang er auf seine volle Staerke — genau der sichtbare Wechsel nach etwa einer Sekunde. Jetzt gleiten die Karten nur noch herauf, ohne dass sich die Deckkraft aendert. Der Glaseffekt bleibt von der ersten Bildzeile an derselbe. ═══════════════════════════════════════════════════════════════════ */ #olten.t-js .t-hero-cards.t-rv{opacity:1;transform:translateY(26px); transition:transform .7s var(--ease)} #olten.t-js .t-hero-cards.t-rv.t-in{opacity:1;transform:none} /* ===================================================================== Artikelseiten Erben die Typografie der Rechtstextseiten (.t-legal). Hier stehen nur die Ergaenzungen: der Handlungsblock am Textende und die Positionierung des Lesefortschritts im Kopf. ===================================================================== */ /* Der Fortschrittsbalken sitzt absolut am unteren Kopfrand — der Kopf braucht dafuer einen eigenen Bezugsrahmen. */ #olten.t-artikel-page header{position:relative} #olten .t-artikel-cta{ margin-top:3rem;padding:1.75rem;border-radius:14px; background:var(--grau-hell,#f4f7fa);border:1px solid rgba(0,0,0,.06)} #olten .t-artikel-cta h2{margin-top:0;font-size:1.25rem} #olten .t-artikel-cta p{margin-bottom:1.25rem} #olten .t-artikel-cta-knoepfe{display:flex;flex-wrap:wrap;gap:.75rem} /* Auf schmalen Bildschirmen volle Breite, damit die Beschriftungen nicht umbrechen. */ @media (max-width:480px){ #olten .t-artikel-cta{padding:1.25rem} #olten .t-artikel-cta-knoepfe .t-btn{width:100%;justify-content:center} } /* Gitterschutz und Tabellen in Artikeln. Die Mobilregel fuer .t-legal-grid setzt grid-template-columns:1fr ohne minmax(0,…). Ein Element mit grosser Mindestbreite — etwa eine Tabelle — sprengt dadurch die Spalte, und das Inhaltsverzeichnis wird als zweites Gitterelement mitgezogen. min-width:0 nimmt den Gitterelementen diese Mindestbreite. Bewusst auf .t-artikel-page begrenzt: die Rechtsseiten teilen sich dasselbe Gitter, und ich aendere ihr Verhalten nicht ohne Auftrag. */ #olten.t-artikel-page .t-legal-grid > *{min-width:0} /* Breite Tabellen bekommen einen eigenen Querlauf, statt die Seite zu verschieben. */ #olten .t-artikel .t-legal-body table{ display:block;width:100%;max-width:100%;overflow-x:auto; border-collapse:collapse;-webkit-overflow-scrolling:touch} #olten .t-artikel .t-legal-body table th, #olten .t-artikel .t-legal-body table td{ padding:.6rem .75rem;text-align:left;vertical-align:top; border-bottom:1px solid rgba(12,38,50,.14)} #olten .t-artikel .t-legal-body table th{ font-weight:600;white-space:nowrap; border-bottom:2px solid rgba(12,38,50,.28)} /* Erste Spalte darf umbrechen, die Betragsspalte nicht. */ #olten .t-artikel .t-legal-body table td:last-child{white-space:nowrap} /* Lange deutsche Komposita. Woerter wie "Testosteronersatztherapie" passen auf schmalen Bildschirmen in keine Zeile. Der Text laeuft dann ueber seinen Kasten hinaus, ohne dass der Kasten mitwaechst — messbar als Querueberlauf der Seite, ohne dass ein Element herausragt. hyphens:auto trennt sauber nach Sprachregeln (das html-Element traegt lang="de" beziehungsweise lang="en"); overflow-wrap greift dort, wo keine Trennstelle existiert. */ #olten.t-artikel-page .t-legal-body, #olten.t-artikel-page .t-legal-body h2, #olten.t-artikel-page .t-legal-body h3, #olten.t-artikel-page .t-legal-body dt, #olten.t-artikel-page .t-toc a, #olten.t-artikel-page .t-legal h1{ hyphens:auto;overflow-wrap:break-word} /* ===================================================================== Kontaktblock als tiefe Glasflaeche Der Block lag bisher als weisse Kachel vor: die Sammelregel weiter oben (.t-tile, .t-step, … , .t-contact) setzt background:#fff und ueberschreibt damit die Glasdefinition. Diese Regeln stehen bewusst am Dateiende, damit sie in der Reihenfolge gewinnen — ohne die Sammelregel anzufassen, an der acht weitere Bausteine haengen. Farbwerte aus .t-panel-deep uebernommen, damit der Block zur bestehenden Glasfamilie gehoert und keine neue Toenung einfuehrt. ===================================================================== */ #olten .t-contact{ 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); box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 26px 70px rgba(0,32,48,.24); color:#D6E8F2; position:relative;overflow:hidden} /* Lichtkante oben — dieselbe Anmutung wie bei den hellen Kacheln, nur seitenverkehrt. */ #olten .t-contact::before{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(120% 80% at 50% 0%,rgba(0,158,227,.20),transparent 60%)} #olten .t-contact>*{position:relative} #olten .t-contact h3{color:#fff} #olten .t-contact p{color:#D6E8F2} /* Die Sammelregel faerbt den Rahmen beim Ueberfahren cyan. Auf der dunklen Flaeche wirkt das zu hart, deshalb hier gedaempft. */ #olten .t-contact:hover{border-color:rgba(0,158,227,.55)} /* Ohne backdrop-filter bleibt der Verlauf allein stehen — er ist ohnehin nahezu deckend, die Flaeche bleibt also lesbar. */ @supports not (backdrop-filter:blur(1px)){ #olten .t-contact{background:linear-gradient(160deg,#00405E,#00344E)} } /* Das overflow:hidden oben schneidet lange deutsche Komposita ab, statt sie umbrechen zu lassen — "Testosteronersatztherapie" passt auf Handybreite in keine Zeile. Die Kappung faellt in einer reinen Ueberlaufmessung nicht auf, weil die Seite dadurch gerade nicht breiter wird. Deshalb hier ausdruecklich trennen. */ #olten .t-contact h3, #olten .t-contact p{hyphens:auto;overflow-wrap:break-word} /* Preislisten in Artikeln. Nur fuer
. Die Grundregel setzt grid-template-columns:auto minmax(0,1fr) — die Begriffsspalte waechst also mit ihrem laengsten Eintrag und quetscht die Wertspalte zusammen, sodass ausgerechnet der Betrag abgeschnitten wird. Bewusst an eine eigene Klasse gebunden: gewoehnliche Definitionslisten im Artikel enthalten ganze Saetze und muessen umbrechen duerfen. */ #olten.t-artikel-page .t-legal-body dl.t-preise{ grid-template-columns:minmax(0,1fr) auto} #olten.t-artikel-page .t-legal-body dl.t-preise dd{ white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums} #olten.t-artikel-page .t-legal-body dt small{ display:inline-block;font-weight:400;opacity:.72;font-size:.88em; margin-top:2px} /* Einspaltig auf schmalen Bildschirmen: dann keine Rechtsbuendigkeit, sonst steht der Betrag verloren am Rand. */ @media (max-width:520px){ #olten.t-artikel-page .t-legal-body dl.t-preise{grid-template-columns:1fr} #olten.t-artikel-page .t-legal-body dl.t-preise dd{text-align:left;white-space:normal} } /* Akzentpalette, portiert aus azw.css */ #olten{ --a-cyan:#0091D6; --a-cyan-l:#67C9F5; --a-green:#16A96B; --a-green-l:#4FD9A0; --a-amber:#E8981C; --a-amber-l:#FFC46B; --a-violet:#7A5AF0; --a-violet-l:#B49CFF; --a-teal:#0FA2A0; --a-teal-l:#5FD9D6; --a-rose:#E0446F; --a-rose-l:#FF8FA8; --a-blue:#3568D4; --a-blue-l:#8AAEF5; } /* Wortmarke als Platzhalter, bis das Logo vorliegt */ #olten .t-wordmark{font-weight:700;letter-spacing:-.015em;line-height:1.18; font-size:clamp(1.12rem,1.05rem + .25vw,1.24rem);color:var(--petrol)} /* #009EE3 auf Weiss misst 3,0 — unter der Lesbarkeitsgrenze für Text. --cyan-txt (#005F89) ist dieselbe Markenfarbe, nur dunkel genug, und misst 6,4. */ #olten .t-wordmark b{display:block;color:var(--cyan-txt)} #olten .t-ph-sq{aspect-ratio:1/1} /* Fünf Karten in einem Vierer-Raster ergaben 4 + 1 — die einzelne Karte stand allein links. Als Flexreihe entsteht 3 + 2, und die angebrochene Reihe sitzt mittig. */ #olten .t-prax{display:flex;flex-wrap:wrap;justify-content:center;gap:26px} #olten .t-prax-c{flex:0 1 clamp(240px,calc(33.333% - 18px),340px); display:flex;flex-direction:column;border-radius:var(--r-lg); background:#fff;border:1px solid var(--line);overflow:hidden;cursor:default; box-shadow:0 10px 30px rgba(12,38,50,.06); transition:box-shadow .3s var(--ease),border-color .3s var(--ease)} #olten .t-prax-c:hover{box-shadow:0 20px 46px rgba(0,64,94,.14); border-color:rgba(0,158,227,.35)} #olten .t-prax-logo{display:flex;align-items:center;justify-content:center; min-height:150px;padding:26px 22px;background:#fff; transition:background .25s var(--ease)} #olten .t-prax-logo img{max-height:96px;width:auto; transition:transform .3s var(--ease)} #olten .t-prax-c:hover .t-prax-logo img{transform:scale(1.04)} /* Alles im Kartenfuss steht auf derselben Mittelachse wie das Logo darüber. Vorher war nur der Kartenknopf mittig, Kanton, Adresse und der Verweis standen links — die Karte wirkte dadurch schief. */ #olten .t-prax-b{padding:0 22px 22px;display:flex;flex-direction:column; align-items:center;text-align:center;gap:10px; border-top:1px solid var(--line-soft);padding-top:18px} #olten .t-prax-kt{font-size:.85rem;font-weight:650;letter-spacing:.02em; text-transform:uppercase;color:var(--cyan-txt)} #olten .t-prax-adr{font-size:1rem;color:var(--body);line-height:1.5} #olten .t-prax-map,#olten .t-prax-web{display:inline-flex;align-items:center;gap:8px; border-radius:var(--r-pill);font-size:.95rem;font-weight:600; white-space:nowrap;transition:background .25s var(--ease),color .25s var(--ease)} /* Der Knopf nimmt die volle Kartenbreite, der Textverweis nicht — sonst sähe er wie ein zweiter, defekter Knopf aus. Gefüllt in Petrol waren diese fünf Knöpfe die auffälligsten Elemente der ganzen Seite und traten damit gegen die eigentliche Handlung an — die Voranmeldung. Jetzt tragen sie dieselbe Glasfläche wie die Countdown-Kachel im Hero, nur auf hellem Grund: getönt statt gefüllt, Schrift in Markenpetrol. */ /* Über die volle Kartenbreite wirkte der Knopf wie ein Balken und zog wieder Aufmerksamkeit. Jetzt richtet er sich nach seinem Inhalt und sitzt mittig — die getönte Fläche unterscheidet ihn ohnehin deutlich vom Textverweis darunter. */ #olten .t-prax-map{justify-content:center;padding:12px 22px;width:auto; background:rgba(0,158,227,.10);color:var(--cyan-txt); border:1px solid rgba(0,158,227,.26); -webkit-backdrop-filter:blur(14px) saturate(150%); backdrop-filter:blur(14px) saturate(150%); box-shadow:inset 0 1px 0 rgba(255,255,255,.55)} #olten .t-prax-map:hover{background:rgba(0,158,227,.18); border-color:rgba(0,158,227,.45);color:var(--petrol)} #olten .t-prax-web{color:var(--cyan-txt);padding:2px 0} #olten .t-prax-web:hover{color:var(--petrol)} /* Der eigene Standort: Schriftzug statt Logo, und der Hinweis ersetzt den Website-Verweis. */ #olten .t-prax-wort{cursor:default} #olten .t-prax-wort .t-wordmark{text-align:center} #olten .t-prax-hier{color:var(--body);font-weight:600;cursor:default} #olten .t-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} /* Mittig gesetzte Kachel */ #olten .t-tile-c{text-align:center;display:flex;flex-direction:column;align-items:center; padding:34px 26px} #olten .t-tile-c .t-ibox{margin-left:auto;margin-right:auto; width:74px;height:74px;border-radius:22px;margin-bottom:20px} /* 30px wirkten in der 74er-Fläche verloren. Zusätzlich etwas kräftigere Strichstärke, damit die Zeichnung trägt. */ #olten .t-tile-c .t-ibox .t-ic{width:38px;height:38px;flex:none;stroke-width:1.9} #olten .t-tile-c h3{margin-bottom:10px;font-size:clamp(1.18rem,1.1rem + .3vw,1.3rem);font-weight:700} #olten .t-tile-c p{max-width:30ch} /* =================================================================== Symbolflächen — tragen ihre Akzentfarbe =================================================================== */ #olten .t-ibox{width:52px;height:52px;border-radius:16px;display:flex; align-items:center;justify-content:center;margin-bottom:18px; background:rgba(0,145,214,.12);color:var(--a-cyan); border:1px solid rgba(0,158,227,.16); transition:background .3s,transform .3s var(--ease)} #olten .t-ibox .t-ic{width:25px;height:25px;flex:none} #olten .t-tile:hover .t-ibox{transform:scale(1.06)} #olten .t-ibox{ background:color-mix(in srgb,var(--ak,var(--a-cyan)) 13%,transparent); border-color:color-mix(in srgb,var(--ak,var(--a-cyan)) 22%,transparent); color:var(--ak,var(--a-cyan))} #olten .t-tile:hover .t-ibox{ background:color-mix(in srgb,var(--ak,var(--a-cyan)) 20%,transparent)} /* Auf der weissen Karte trägt die Symbolfläche wieder die kräftige Akzentfarbe — die helle Fassung wäre auf Weiss nicht lesbar. */ #olten .t-band-dark .t-tile .t-ibox, #olten .t-band-dark .t-cc .t-ibox{ background:rgba(0,145,214,.12);border-color:rgba(0,145,214,.2);color:var(--a-cyan)} #olten .t-band-dark .t-tile .t-ibox, #olten .t-band-dark .t-cc .t-ibox{ background:color-mix(in srgb,var(--ak,var(--a-cyan)) 13%,transparent); border-color:color-mix(in srgb,var(--ak,var(--a-cyan)) 24%,transparent); color:var(--ak,var(--a-cyan))} #olten .t-band-dark .t-tile:hover .t-ibox{ background:color-mix(in srgb,var(--ak,var(--a-cyan)) 20%,transparent)} #olten .t-band-dark [style*="--a-cyan"]{--akl:var(--a-cyan-l)} /* =================================================================== Galerie — Sechserraster wie in svajci-child Zwei grosse Bilder oben, drei kleinere darunter. Fünf Bilder gehen damit ohne Lücke auf: 3+3 und 2+2+2. =================================================================== */ #olten .t-galerie{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} #olten .t-gal{grid-column:span 1;border-radius:var(--r-lg);overflow:hidden; background:#fff;border:1px solid var(--line); box-shadow:0 10px 30px rgba(12,38,50,.08); transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s} #olten .t-gal-gross{grid-column:span 1} #olten .t-gal img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover; transition:transform .6s var(--ease)} #olten .t-gal:hover{transform:translateY(-4px);border-color:rgba(0,158,227,.45); box-shadow:0 22px 52px rgba(0,64,94,.16)} #olten .t-gal:hover img{transform:scale(1.04)} #olten .t-gal figcaption{padding:14px 18px 16px;font-size:1rem;font-weight:650; color:var(--ink);letter-spacing:-.012em;text-align:center} #olten .t-cc .t-ibox{width:66px;height:66px;border-radius:21px;margin-bottom:18px} #olten .t-cc .t-ibox .t-ic{width:32px;height:32px;flex:none} #olten a.t-cc:hover .t-ibox{transform:scale(1.08) rotate(-4deg)} @supports (color:color-mix(in srgb,red 50%,blue)){ #olten .t-ibox{ background:color-mix(in srgb,var(--ak,var(--a-cyan)) 13%,transparent); border-color:color-mix(in srgb,var(--ak,var(--a-cyan)) 22%,transparent); color:var(--ak,var(--a-cyan))} #olten .t-tile:hover .t-ibox{ background:color-mix(in srgb,var(--ak,var(--a-cyan)) 20%,transparent)} } /* =================================================================== Verhalten auf schmalen Geräten. Beim Portieren aus azw.css sind die @media-Blöcke nicht mitgekommen. Diese Regeln sind deshalb neu geschrieben und decken die drei Bausteine ab, die ein Raster benutzen. =================================================================== */ /* Drei Kacheln nebeneinander werden unterhalb von 1080 Pixeln zu schmal — die Überschriften brechen zweizeilig, der Fliesstext läuft über sechs Zeilen. Ab hier zwei Spalten. Die neunte Kachel bliebe dabei allein links stehen; sie rückt in die Mitte. Eigene Grenze, damit die Galerie davon unberührt bleibt. */ @media (max-width:1080px){ #olten .t-grid-3{grid-template-columns:repeat(2,1fr)} #olten .t-grid-3>*:last-child:nth-child(odd){ grid-column:1 / -1;max-width:calc(50% - 11px);margin-inline:auto} } @media (max-width:1000px){ #olten .t-galerie{grid-template-columns:repeat(2,1fr);gap:16px} #olten .t-gal,#olten .t-gal-gross{grid-column:span 1} } @media (max-width:700px){ #olten .t-grid-3{grid-template-columns:1fr} #olten .t-grid-3>*:last-child:nth-child(odd){max-width:none;margin-inline:0} } @media (max-width:680px){ #olten .t-galerie{grid-template-columns:1fr;gap:14px} #olten .t-gal,#olten .t-gal-gross{grid-column:span 1} #olten .t-prax{flex-direction:column} } /* Bildhöhe: die grossen Kacheln liegen im Sechserraster über drei Spalten, die kleinen über zwei. Ohne feste Höhe entstünden zwei unterschiedlich hohe Zeilen. */ #olten .t-gal img{aspect-ratio:4/3} /* Beschriftung: darf umbrechen und läuft nicht mehr über die Kante. */ #olten .t-gal figcaption{max-width:calc(100% - 28px);white-space:normal;line-height:1.25} /* ================================================================= Ergänzungen zu trtdoc.css. Alles andere stammt unverändert von dort. Kontrast: keine aufgehellte Schriftfarbe, nirgends. ================================================================= */ /* --- Vergleich: heller Grund, weil der Hero darüber dunkel ist --- */ #olten .v-schalter{position:relative;display:inline-flex;padding:6px;border-radius:99px; background:#fff;border:1px solid rgba(12,38,50,.16);box-shadow:0 8px 24px rgba(12,38,50,.09)} #olten .v-sb{position:relative;z-index:2;border:0;background:none;font:inherit;font-weight:700; cursor:pointer;padding:14px 26px;border-radius:99px;color:var(--ink);transition:color .35s var(--ease)} #olten .v-sb.an{color:#fff} #olten .v-pille{position:absolute;top:6px;bottom:6px;left:6px;width:0;border-radius:99px;z-index:1; background:linear-gradient(140deg,#00618C,#00405E);box-shadow:0 8px 22px rgba(0,64,94,.32); transition:left .5s cubic-bezier(.34,1.56,.64,1),width .5s cubic-bezier(.34,1.56,.64,1)} #olten .v-tafel{max-width:900px;margin:30px auto 0;text-align:left;padding:8px clamp(16px,3vw,34px)} #olten .v-z{display:grid;grid-template-columns:240px 1fr;gap:20px;align-items:baseline; padding:20px 6px;border-bottom:1px solid rgba(12,38,50,.12)} #olten .v-z:last-child{border-bottom:0} #olten .v-z b{color:var(--ink);font-weight:700} #olten .v-w{color:var(--ink);font-weight:600;font-size:1.06rem; transition:opacity .3s var(--ease),filter .3s var(--ease)} #olten .v-w.weg{opacity:0;filter:blur(4px)} #olten .v-tafel.uns .v-w{color:var(--petrol-mid)} #olten .v-hinweis{display:block;max-width:64ch;margin:16px auto 0;text-align:center; color:var(--ink);font-weight:600} @media(max-width:660px){#olten .v-z{grid-template-columns:1fr;gap:2px}} /* Der Vergleichsumschalter trägt zwei lange Beschriftungen. Auf schmalen Geräten stehen sie untereinander, sonst ragt er über den Rand hinaus — gemessen 102 Pixel bei 390 Pixel Breite. */ @media (max-width:660px){ #olten .v-schalter{display:grid;grid-template-columns:1fr;width:100%; border-radius:20px;gap:4px} #olten .v-sb{border-radius:16px;padding:13px 14px;white-space:normal; font-size:.96rem;text-align:center} #olten .v-pille{display:none} #olten .v-sb.an{background:linear-gradient(140deg,#00618C,#00405E);color:#fff} } /* Bildbeschriftung auf dem Handy schmaler. */ @media (max-width:520px){ #olten .t-gal figcaption{left:10px;top:10px;padding:7px 12px;font-size:.88rem; max-width:calc(100% - 20px)} } /* --- Lohnkarte --- */ #olten .v-lohn{max-width:860px;margin:0 auto;text-align:center;border-radius:var(--r-xl); padding:clamp(32px,4vw,48px) clamp(24px,3.4vw,42px); background:linear-gradient(152deg,#00618C,#00405E);box-shadow:0 26px 62px rgba(0,64,94,.28)} #olten .v-lohn h3,#olten .v-lohn p,#olten .v-lohn span,#olten .v-lohn b{color:#fff} #olten .v-zahlen{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:0 0 20px} #olten .v-zahlen div{background:rgba(255,255,255,.14);border-radius:var(--r-md);padding:24px 18px} #olten .v-zahlen b{display:block;font-size:clamp(1.9rem,4.4vw,2.8rem);font-weight:700; line-height:1;letter-spacing:-.03em;margin-bottom:6px} #olten .v-zahlen span{font-size:.98rem;font-weight:600} @media(max-width:560px){#olten .v-zahlen{grid-template-columns:1fr}} /* --- Kontaktkarte: blaue Karte auf hellem Band --- */ #olten .v-kontakt{max-width:640px;margin:0 auto;text-align:center;border-radius:var(--r-xl); padding:clamp(32px,4vw,46px) clamp(24px,3.4vw,42px); background:linear-gradient(152deg,#00618C,#00405E);box-shadow:0 26px 62px rgba(0,64,94,.28)} #olten .v-kontakt h3,#olten .v-kontakt p,#olten .v-kontakt .v-name{color:#fff} #olten .v-kontakt img{display:block;width:104px;height:104px;border-radius:50%;object-fit:cover; margin:0 auto 20px;border:3px solid rgba(255,255,255,.75)} #olten .v-kontakt .v-name{display:block;margin-top:16px;font-weight:600} #olten .v-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:24px} /* Die beiden Knöpfe tragen jetzt je ein Wort. Ohne Mindestbreite wäre „E-Mail" deutlich schmaler als „WhatsApp" — das Paar wirkte schief. Gleiche Breite, gleicher Abstand. */ #olten .v-cta .t-btn{min-width:190px;justify-content:center} @media (max-width:520px){#olten .v-cta .t-btn{min-width:0;width:100%}} /* WhatsApp in der Markenfarbe. Schrift dunkel: Weiss auf #25D366 misst 1,98 und wäre nicht lesbar. */ #olten .v-wa{background:#25D366;color:#06251A;border:0} #olten .v-wa .t-ic{color:#06251A} /* WhatsApp behält beim Zeigen seine Farbe, nur etwas satter. #1EBE5A auf #06251A misst 6,9 — die Schrift bleibt dunkel. */ #olten .v-wa:hover{background:#1EBE5A;color:#06251A} #olten .v-wa:active{transform:translateY(-1px)} #olten .v-mail{background:#fff;color:var(--petrol)} #olten .v-mail .t-ic{color:var(--petrol)} /* Ohne eigenen Hover greift die Grundregel .t-btn:hover und färbt den Knopf petrol — bei petrolfarbener Schrift also unlesbar. Diese Zustände folgen denselben Werten wie .t-btn-white im Grundsystem. */ #olten .v-mail:hover{background:#E9F4FA;color:var(--petrol)} #olten .v-mail:active{transform:translateY(-1px)} /* Gestapelt bis 1000 Pixel statt bis 560: Mit dem Trennwort brauchen die drei Teile zusammen 554 Pixel plus Abstände. In der Karte stehen bei 834 Pixeln Bildschirmbreite aber nur 520 zur Verfügung — die Reihe brach um, und „oder" landete am Zeilenende statt dazwischen. */ @media(max-width:1000px){#olten .v-cta{flex-direction:column}} /* --- Fusszeile --- */ #olten .v-fuss{background:#00344E;padding:clamp(44px,6vw,68px) 0 30px} #olten .v-fuss-in{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(24px,4vw,52px)} #olten .v-fuss img{width:104px;height:auto;margin-bottom:16px} #olten .v-fuss p,#olten .v-fuss a,#olten .v-fuss h3,#olten .v-fuss span{color:#fff} #olten .v-fuss h3{font-size:1rem;font-weight:700;margin-bottom:12px} #olten .v-fuss p{font-size:.97rem;font-weight:600;line-height:1.6;margin:0 0 6px} #olten .v-fuss a{display:block;font-size:.97rem;font-weight:600;margin-bottom:8px} #olten .v-fuss a:hover{text-decoration:underline} #olten .v-fuss-c{margin-top:34px;padding-top:22px;border-top:1px solid rgba(255,255,255,.24); font-size:.93rem;font-weight:600} @media(max-width:760px){#olten .v-fuss-in{grid-template-columns:1fr}} /* ================================================================= Zwei Hintergründe, mehr nicht. Blau: der Radialschimmer aus trtdoc.css, oben rechts kräftig, unten links schwach. Bleibt unverändert. Hell: derselbe Aufbau, nur in sehr geringer Deckung — dadurch ist die Fläche nicht flach weiss, sondern hat dieselbe Tiefe wie das blaue Band. Der Verlauf geht von reinem Weiss in ein sehr helles Blaugrau, damit die Bänder nicht aneinanderkleben. ================================================================= */ /* ================================================================= Material statt Hintergrundkunst Der drehende Verlauf ist raus. Was Weiss hochwertig aussehen lässt, ist nicht Farbe, sondern Materialität: eine feine Körnung, ein kaum messbarer Temperaturverlauf, und Schichtung durch echte Schatten. Gewählt ist die Fassung „Korn": eine feine Körnung über einem Temperaturverlauf. Die beiden Alternativen — Punktraster und reines Weiss — sind entfernt, ebenso die Umschaltleiste der Vorschau. Bewegung kommt aus der Struktur: Überschriften steigen auf, eine Haarlinie zieht sich unter jeder Überschrift auf, Bilder wandern minimal gegen den Text, Zahlen zählen hoch. ================================================================= */ #olten{--sp:0} /* Temperaturverlauf: oben kühl-weiss, unten eine Spur blaugrau. Gemessene Spanne 9 Stufen — spürbar, nie als Fläche erkennbar. */ #olten::before{ content:"";position:fixed;inset:0;z-index:0;pointer-events:none; background:linear-gradient(180deg,#FFFFFF 0%,#FAFCFD 44%,#F1F5F9 100%)} /* Körnung. Ein einzelnes SVG-Rauschen, gekachelt, sehr schwach. */ #olten::after{ content:"";position:fixed;inset:0;z-index:0;pointer-events:none; opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:180px 180px} #olten>*{position:relative;z-index:1} #olten .t-band-light{background:transparent} /* ================================================================= Liquid Glass — die Bauteile Ein Glasbauteil besteht nicht aus einer durchsichtigen Fläche, sondern aus fünf Dingen, die zusammen den Eindruck von Material erzeugen: 1 Körper Verlauf von oben hell nach unten etwas dichter, dahinter Unschärfe, Sättigung und eine Spur Helligkeit 2 Randlinse ein 1,5 Pixel breiter Ring, der SELBST eine Unschärfe hat — dadurch wirkt die Kante wie geschliffenes Glas 3 Innenkanten Lichtkante oben, schwächere Kante unten, Innenrand 4 Lichtquelle ein Schein oben links, in allen Karten gleich gerichtet 5 Schattenstapel vier Stufen von Kontaktschatten bis Streuschatten Punkt 2 ist das, was den Unterschied macht. Eine Karte mit nur backdrop-filter sieht aus wie Milchglas; erst der eigene Ring am Rand lässt sie wie ein geschliffenes Stück wirken. ================================================================= */ /* Werte nach macOS Golden Gate, nicht nach Tahoe. Geändert gegenüber der Tahoe-Fassung: · dunkle Aussenkante ergänzt — sie trennt das Bauteil vom Grund · Glanzlicht heller und zweistufig · Deckkraft deutlich erhöht, Lesbarkeit vor Durchblick · Radius von 26 auf 18 Pixel, einheitlich über alle Bauteile */ #olten{ --glas-1:rgba(255,255,255,.88); --glas-2:rgba(255,255,255,.76); --glas-fest-1:rgba(255,255,255,.95); --glas-fest-2:rgba(255,255,255,.88); --glas-radius:18px; --glas-kanten: 0 0 0 1px rgba(12,38,50,.13), inset 0 1.5px 0 rgba(255,255,255,1), inset 0 2.5px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(255,255,255,.5), inset 0 0 0 1px rgba(255,255,255,.5); --glas-tiefe: 0 1px 2px rgba(12,38,50,.06), 0 6px 12px rgba(12,38,50,.06), 0 16px 30px rgba(12,38,50,.07), 0 30px 58px rgba(12,38,50,.09)} #olten .glas{ position:relative; border-radius:var(--glas-radius); border:0; background:linear-gradient(180deg,var(--glas-1),var(--glas-2)); box-shadow:var(--glas-kanten),var(--glas-tiefe); transition:transform .35s var(--ease),box-shadow .35s var(--ease), background .35s var(--ease)} @supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){ #olten .glas{ -webkit-backdrop-filter:blur(32px) saturate(180%) brightness(1.02); backdrop-filter:blur(32px) saturate(180%) brightness(1.02)} /* Randlinse: nur der Ring trägt diese Unschärfe. Der Trick ist die ausgeschlossene Maske — sie lässt vom Element nur den Rahmen übrig. */ #olten .glas::before{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; padding:1.5px; -webkit-backdrop-filter:blur(5px) saturate(150%) brightness(1.12); backdrop-filter:blur(5px) saturate(150%) brightness(1.12); -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000); mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000); -webkit-mask-composite:xor;mask-composite:exclude} } /* Lichtquelle oben links — in jeder Karte gleich gerichtet. */ #olten .glas::after{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; background: radial-gradient(120% 74% at 12% -12%,rgba(255,255,255,.9),transparent 42%), radial-gradient(60% 44% at 24% -6%,rgba(255,255,255,.7),transparent 40%), radial-gradient(80% 60% at 96% 108%,rgba(0,95,137,.06),transparent 60%)} #olten .glas>*{position:relative;z-index:1} /* Golden Gate vereinheitlicht die Eckenradien über alle Bauteile. Die Symbolfläche in der Kachel zieht mit — eine Stufe kleiner als die Karte, damit die Rundungen ineinander aufgehen. */ #olten .glas .t-ibox{border-radius:13px} /* Der Umschalter ist jetzt ebenfalls Glas — aber ohne den Lichtschein oben links. Genau der hatte beim ersten Versuch die Beschriftung überlagert. Körper, Kanten und Schatten bleiben, die Ebene darüber entfällt. */ #olten .v-schalter{ /* 88/76 Prozent wie alle Bedienelemente. Der Wert war versehentlich auf 68/56 gefallen: Beim Abstimmen der Bildbeschriftungen hatte mein Suchmuster auch diese Regel erfasst, weil beide dieselbe Unschärfe tragen. Ein Schalter soll eindeutig sein, nicht durchsichtig — Durchsicht gehört nur auf die Fotos. */ background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.76)); -webkit-backdrop-filter:blur(26px) saturate(180%); backdrop-filter:blur(26px) saturate(180%); border:0; box-shadow: 0 0 0 1px rgba(12,38,50,.13), inset 0 1.5px 0 rgba(255,255,255,1), inset 0 -1px 0 rgba(255,255,255,.5), 0 1px 2px rgba(12,38,50,.06), 0 10px 22px rgba(12,38,50,.08), 0 24px 46px rgba(12,38,50,.09)} #olten .v-sb{position:relative;z-index:2} #olten .v-pille{z-index:1} /* Die Vorschauleiste trägt dasselbe Material. */ /* ------------------- Glas auf dunklem Band ---------------------- Auf blauem Grund kann das Bauteil nicht weiss sein. Es nimmt die Farbe des Grundes auf, behält aber dieselben fünf Bestandteile: dunkle Aussenkante, helle Innenkante, Glanzsaum, Schattenstapel. ----------------------------------------------------------------- */ #olten .t-band-dark .t-gal{ position:relative;border-radius:var(--glas-radius);overflow:hidden; background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.07)); -webkit-backdrop-filter:blur(18px) saturate(160%); backdrop-filter:blur(18px) saturate(160%); border:0; box-shadow: 0 0 0 1px rgba(0,20,32,.34), inset 0 1.5px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(255,255,255,.14), 0 2px 4px rgba(0,14,24,.16), 0 14px 28px rgba(0,14,24,.22), 0 30px 56px rgba(0,14,24,.26)} #olten .t-band-dark .t-gal:hover{ box-shadow: 0 0 0 1px rgba(0,158,227,.5), inset 0 1.5px 0 rgba(255,255,255,.6), 0 4px 8px rgba(0,14,24,.18), 0 20px 38px rgba(0,14,24,.26), 0 42px 78px rgba(0,14,24,.3)} /* Die Beschriftung wird selbst zum Glasbauteil. */ /* Die Beschriftung sitzt unten rechts statt oben links — dort liegt auf allen sechs Aufnahmen der ruhigste Bildbereich, und die Ecke bleibt für den Blick auf das Motiv frei. */ /* Dunkles Glas statt hellem: Weisse Schrift auf dunklem Grund verträgt viel mehr Durchsicht als dunkle Schrift auf hellem. Vorher 68 Prozent helle Deckung — mehr Durchsicht ging nicht, ohne dass der Kontrast unter 4,5 fiel. Abgetastet ergab dunkles Glas: 38 Prozent zu wenig (3,64), 50 Prozent knapp (5,09), 58 Prozent bequem. Gesetzt sind 52 auf 64 Prozent im Verlauf. */ #olten .t-band-dark .t-gal figcaption{ top:auto;left:auto;right:14px;bottom:14px; color:#FFFFFF; background:linear-gradient(180deg,rgba(4,22,34,.46),rgba(4,22,34,.58)); -webkit-backdrop-filter:blur(24px) saturate(190%); backdrop-filter:blur(24px) saturate(190%); box-shadow:0 0 0 1px rgba(255,255,255,.24), inset 0 1px 0 rgba(255,255,255,.34), 0 8px 20px rgba(0,14,24,.30)} /* ---------------------- Blaues Glas ----------------------------- Dieselben fünf Bestandteile, nur eingefärbt. Die Deckkraft liegt bei 88 Prozent, weil weisse Schrift darauf steht — bei weniger wird der Grund durchscheinend und der Kontrast fällt unter die Grenze. ----------------------------------------------------------------- */ #olten .glas-blau{ /* Deckkraft von 90/86 auf 95/93 erhöht: Bei 90 Prozent lag der hellste Punkt der Fläche bei 3,79 gegen weisse Schrift. */ /* Dieselben Farben wie die Kontaktkarte am Seitenende: #00618C nach #00405E, derselbe Winkel. Vorher lag hier ein dunkleres, graueres Blau — dadurch sahen die beiden Karten aus, als gehörten sie nicht zusammen. Die Deckung bleibt bei 92 Prozent, damit das Bauteil Glas bleibt und nicht zur Fläche wird. */ background:linear-gradient(152deg,rgba(0,97,140,.93),rgba(0,64,94,.91)); -webkit-backdrop-filter:blur(30px) saturate(190%); backdrop-filter:blur(30px) saturate(190%); /* Das Glanzlicht lag bei 55 Prozent. Auf gesättigtem Blau erzeugt das zwei deutlich hellere Zeilen an der Oberkante — gemessen (72,164,203) und (34,141,190) vor der Kartenfarbe (18,107,147). Das liest sich als zweite Rundung, als läge eine Karte auf einer anderen. Auf hellem Glas ist derselbe Wert unauffällig, deshalb wird er nur hier gedämpft. */ box-shadow: 0 0 0 1px rgba(0,20,32,.22), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.10), 0 1px 2px rgba(0,20,32,.08), 0 6px 12px rgba(0,20,32,.10), 0 16px 30px rgba(0,20,32,.13), 0 30px 58px rgba(0,20,32,.17)} /* Das Glanzlicht bleibt, wird aber zu einem schmalen Saum an der Oberkante — als grosse Fläche hellte es die Überschrift auf. */ /* Der Glanzsaum lag bei 24 Prozent und hob die Oberkante auf 4,41 gegen weisse Schrift — knapp unter der Grenze. Bei 16 Prozent bleibt der Materialeindruck, der Kontrast steigt. */ #olten .glas-blau::after{ background: radial-gradient(80% 26% at 14% -22%,rgba(255,255,255,.16),transparent 44%), radial-gradient(70% 46% at 92% 108%,rgba(0,158,227,.12),transparent 62%)} #olten .glas-blau, #olten .glas-blau h3,#olten .glas-blau p,#olten .glas-blau b, #olten .glas-blau span,#olten .glas-blau li{color:#FFFFFF} #olten .glas-blau .v-zeilen,#olten .glas-blau .v-zeilen li{ border-color:rgba(255,255,255,.26)} #olten .glas-blau:hover{ box-shadow: 0 0 0 1px rgba(0,158,227,.42), inset 0 1.5px 0 rgba(255,255,255,.6), 0 2px 4px rgba(0,20,32,.12), 0 18px 34px rgba(0,20,32,.16), 0 40px 76px rgba(0,20,32,.20)} /* Flächen mit viel Lesetext werden dichter. */ #olten .glas-fest{ background:linear-gradient(180deg,var(--glas-fest-1),var(--glas-fest-2))} /* Die Kacheln sind neutral. Farbe trägt allein das Symbol — neun verschieden getönte Karten nebeneinander wirkten unruhig und liessen das Raster in neun Einzelteile zerfallen. */ /* Zeigen und Drücken. Das Anheben ist Teil des Materials, nicht Zierde. */ /* Die Einblendung setzt im Endzustand transform:none mit höherem Gewicht. Der Hover muss dieses Gewicht erreichen, sonst passiert sichtbar nichts. */ #olten .glas:hover,#olten .glas.t-in:hover,#olten .glas.t-rv.t-in:hover{ transform:translateY(-4px); box-shadow:0 0 0 1px rgba(0,95,137,.30), inset 0 1.5px 0 rgba(255,255,255,1), inset 0 -1px 0 rgba(255,255,255,.5), 0 2px 4px rgba(12,38,50,.07), 0 10px 20px rgba(12,38,50,.08), 0 26px 46px rgba(12,38,50,.10), 0 46px 84px rgba(12,38,50,.12)} #olten .glas:active,#olten .glas.t-rv.t-in:active{transform:translateY(-1px) scale(.992)} /* Auf schmalen Geräten fällt die Randlinse weg — zwei Unschärfe- ebenen je Karte kosten dort zu viel. */ @media (max-width:760px){ #olten .glas::before{display:none} #olten .glas{-webkit-backdrop-filter:blur(18px) saturate(180%); backdrop-filter:blur(18px) saturate(180%)} } @media (prefers-reduced-motion:reduce){ #olten .glas:hover{transform:none} } /* Golden Gate gibt dem Benutzer einen Regler für die Deckkraft des Glases. Das Gegenstück im Web ist die Systemeinstellung für erhöhten Kontrast — dort wird das Glas nahezu undurchsichtig. */ @media (prefers-contrast:more){ /* Die Akzentfärbung der Kacheln hat mehr Gewicht und muss hier ausdrücklich mitgenannt werden. */ #olten .glas,#olten .glas.t-tile-c,#olten .glas.glas-fest{ background:rgba(255,255,255,.99); -webkit-backdrop-filter:none;backdrop-filter:none; box-shadow:0 0 0 1px rgba(12,38,50,.34),0 8px 20px rgba(12,38,50,.12)} #olten .glas::before,#olten .glas::after{display:none} } /* Der Logorahmen trug aus dem Wettswil-Theme ein background:#fff. Dort lagen die Karten auf weissem Grund, da fiel es nicht auf. Auf Glas ergibt es einen sichtbaren weissen Kasten hinter jedem Logo. Die Fläche entfällt, der obere Kartenteil bleibt durch die Trennlinie darunter trotzdem abgesetzt. */ /* Beim Zeigen legte sich eine getönte Fläche über den Logobereich. Auf Glas wirkte sie grau und trennte die Karte optisch in zwei Hälften. Die Fläche entfällt; die Karte antwortet weiterhin als Ganzes — sie hebt sich an und das Logo wächst leicht. */ #olten .t-prax-logo{background:transparent} #olten .t-prax-logo:hover{background:transparent} /* Diese Regel legte hinter jedes Bild eine weisse Fläche. Gedacht war sie gegen Durchscheinen bei Fotos — bei den Praxislogos, die zu 99 Prozent durchsichtig sind, erzeugte sie genau den weissen Kasten, den es nicht geben soll. Fotos sind ohnehin deckend und brauchen sie nicht. Ersatzlos gestrichen. */ /* Die vier Fakten im Hero heben sich beim Zeigen leicht an und werden heller — sie sind keine Knöpfe, sollen aber auf den Zeiger antworten. */ #olten .v-fakt:hover{ transform:translateY(-2px); background:rgba(255,255,255,.22); border-color:rgba(255,255,255,.55); box-shadow:0 8px 20px rgba(0,14,24,.22)} @media (prefers-reduced-motion:reduce){#olten .v-fakt:hover{transform:none}} /* ------------------- Bewegung aus der Struktur ------------------- */ /* Haarlinie unter jeder Abschnittsüberschrift zieht sich auf. */ #olten .t-sec-head{position:relative} /* Die erste Fassung war zwei Pixel hoch und leuchtete in der Mitte auf — das wirkte aufgespritzt. Jetzt eine Haarlinie von einem Pixel, zurückhaltend gefärbt, mit weich auslaufenden Enden. */ /* Der Verlauf mit ausgeblendeten Enden liess die Linie zerfasern — sie wirkte an den Rändern unscharf. Jetzt eine durchgehende Haarlinie in einem Ton, ohne Leuchten, ohne weiche Enden. */ #olten .t-sec-head::after{ content:"";display:block;height:1px;width:0;margin:20px auto 0; background:rgba(12,38,50,.20); transition:width .9s cubic-bezier(.22,.7,.28,1) .12s} #olten .t-sec-head.t-in::after,#olten .t-in .t-sec-head::after{width:80px} #olten .t-band-dark .t-sec-head::after{background:rgba(255,255,255,.34)} /* Bilder wandern minimal gegen den Text. */ #olten .t-doc-media,#olten .t-h-photo{ transform:translate3d(0,calc(var(--sp,0)*-14px),0)} @media (prefers-reduced-motion:reduce){ #olten .t-doc-media,#olten .t-h-photo{transform:none} #olten .t-sec-head::after{transition:none;width:132px} } /* Abstände. Zwei Bänder stossen ohne Zwischenraum aneinander, ihre Polsterung addiert sich also. Bei 144 Pixel je Seite lagen 288 Pixel zwischen zwei Inhaltsblöcken — auf einem Notebook fast eine halbe Bildschirmhöhe. Jetzt 96, macht 192 zwischen den Blöcken. */ #olten .t-band{padding:clamp(44px,5.2vw,74px) 0} #olten .t-band-dark{padding:clamp(42px,4.9vw,70px) 0} /* Der Abstand unter der Abschnittsüberschrift zieht mit. */ #olten .t-sec-head{margin-bottom:clamp(24px,2.8vw,36px)} /* Getönte Bänder gibt es nicht mehr — falls doch eines übrig ist, verhält es sich wie ein helles. */ #olten .t-band-tint,#olten .t-band-soft{background:transparent} /* --------------------- Galerie: Beschriftung schwebt -------------- */ #olten .t-gal{position:relative} #olten .t-gal figcaption{position:absolute;top:14px;left:14px;z-index:2; background:rgba(255,255,255,.94);color:var(--petrol); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); padding:9px 16px;border-radius:99px;font-size:.94rem;font-weight:700; box-shadow:0 6px 18px rgba(0,20,32,.18); transition:transform .3s var(--ease)} #olten .t-gal:hover figcaption{transform:translateY(-2px)} #olten .t-gal button{display:block;width:100%;border:0;padding:0;background:none;cursor:zoom-in} #olten .t-gal img{transition:transform .6s var(--ease)} #olten .t-gal:hover img{transform:scale(1.045)} #olten .t-lupe-z{position:absolute;right:14px;bottom:14px;z-index:2;width:38px;height:38px; border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.94); color:var(--petrol);box-shadow:0 6px 18px rgba(0,20,32,.18); opacity:0;transform:scale(.9);transition:opacity .3s var(--ease),transform .3s var(--ease)} #olten .t-gal:hover .t-lupe-z{opacity:1;transform:none} /* ------------------------------ Lupe ------------------------------ */ #olten .v-lupe{position:fixed;inset:0;z-index:80;display:none; align-items:center;justify-content:center;padding:28px; background:rgba(2,24,36,.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)} #olten .v-lupe.auf{display:flex} #olten .v-lupe img{max-width:min(1100px,92vw);max-height:82vh;width:auto;height:auto; border-radius:var(--r-lg);box-shadow:0 40px 90px rgba(0,0,0,.5)} #olten .v-lupe-zu{position:absolute;top:22px;right:22px;width:46px;height:46px;border:0; border-radius:50%;background:rgba(255,255,255,.16);color:#fff;display:grid;place-items:center; cursor:pointer} #olten .v-lupe-zu:hover{background:rgba(255,255,255,.28)} #olten .v-lupe-cim{position:absolute;bottom:26px;left:0;right:0;text-align:center;color:#fff; font-weight:700} /* ================================================================= Gegenlage auf dunklem Grund. trtdoc verfährt so: Flächen, auf denen gelesen wird, bleiben weiss mit dunkler Schrift — dort liegt der Kontrast bei 15,7 statt 6,0. Flächen mit Zahlen und Bedienelementen dürfen Glas sein. Diese Regeln ziehen das für unsere eigenen Bausteine nach. ================================================================= */ /* trtdoc setzt Fliesstext auf dunklem Grund auf #D6E8F2 und den Einleitungssatz auf #EDF5FA. Beides ist aufgehelltes Weiss. Hier steht reines Weiss — die Kacheln darunter fangen ihre eigene Textfarbe über die spezifischeren Regeln wieder ab. */ #olten .t-band-dark p,#olten .t-band-dark li, #olten .t-band-dark .t-lede{color:#FFFFFF} /* Kacheln und Schritte: weiss, Schrift dunkel. Das Grundsystem geht davon aus, dass Schritte auf dunklem Band durchscheinend sind, und setzt beim Zeigen rgba(255,255,255,.13). Da unsere Karten dort weiss sind, würde die Fläche beim Zeigen dunkel und die dunkle Schrift verschwinden. Deshalb bleibt Weiss auch im Hover, und die Ziffer verhält sich wie auf hellem Grund. */ #olten .t-band-dark .t-step:hover,#olten .t-band-dark .t-tile:hover{ background:#FFFFFF;border-color:rgba(0,158,227,.55); box-shadow:0 20px 46px rgba(0,14,24,.34)} #olten .t-band-dark .t-step:hover .t-stepn{ background:var(--petrol-mid);color:#FFFFFF;border-color:var(--petrol-mid)} #olten .t-band-dark details:hover{border-color:rgba(0,158,227,.55)} #olten .t-band-dark .t-tile h3,#olten .t-band-dark .t-step h3{color:var(--ink)} #olten .t-band-dark .t-tile p,#olten .t-band-dark .t-step p{color:var(--body)} #olten .t-band-dark .t-step .t-dauer{color:var(--cyan-txt)} #olten .t-band-dark .t-stepn{color:var(--cyan-txt);-webkit-text-stroke-color:transparent} /* Aufklapper: ebenfalls weiss, hier steht der meiste Lesetext */ #olten .t-band-dark details{background:rgba(255,255,255,.95); border-color:rgba(255,255,255,.24)} #olten .t-band-dark details:hover,#olten .t-band-dark details[open]{background:#fff} #olten .t-band-dark summary{color:var(--ink)} #olten .t-band-dark details p{color:var(--body)} #olten .t-band-dark .t-faqtitel{color:#fff} /* Glasflächen mit Aufzählungen: Schrift reines Weiss, nicht aufgehellt */ #olten .t-band-dark .t-panel h3{color:#fff} #olten .t-band-dark .t-panel p, #olten .t-band-dark .v-liste li,#olten .t-band-dark .v-liste span, #olten .t-band-dark .v-zeilen li,#olten .t-band-dark .v-zeilen b, #olten .t-band-dark .v-zeilen span{color:#FFFFFF} #olten .t-band-dark .v-liste,#olten .t-band-dark .v-liste li, #olten .t-band-dark .v-zeilen,#olten .t-band-dark .v-zeilen li{ border-color:rgba(255,255,255,.24)} #olten .t-band-dark .v-liste .t-ic{color:var(--cyan-lt)} #olten .t-band-dark .v-offen{background:rgba(255,255,255,.16);color:#FFFFFF} /* Die Lohnkarte lag als blaue Fläche auf blauem Band — das löst sich nicht voneinander. Auf dunklem Grund ist sie weiss. */ #olten .t-band-dark .v-lohn{background:#FFFFFF;box-shadow:0 22px 54px rgba(0,14,24,.34)} #olten .t-band-dark .v-lohn h3{color:var(--ink)} #olten .t-band-dark .v-lohn p{color:var(--body)} #olten .t-band-dark .v-zahlen div{background:rgba(0,64,94,.07); border:1px solid rgba(12,38,50,.10)} #olten .t-band-dark .v-zahlen b{color:var(--petrol)} #olten .t-band-dark .v-zahlen span{color:var(--body)} /* --- Anstellung und Partnerschaft --- */ #olten .v-liste{list-style:none;display:grid;gap:0;border-top:1px solid rgba(12,38,50,.12); max-width:820px;margin:0 auto} #olten .v-liste li{display:grid;grid-template-columns:26px 1fr;gap:16px;padding:18px 0; border-bottom:1px solid rgba(12,38,50,.12);align-items:start} #olten .v-liste .t-ic{width:20px;height:20px;color:var(--cyan-txt);margin-top:4px} #olten .v-offen{display:inline-block;margin-top:20px;padding:9px 18px;border-radius:var(--r-chip); background:rgba(0,158,227,.12);color:var(--cyan-txt);font-size:.94rem;font-weight:700} /* --- Ankommen: Zeilen statt Kacheln, damit nicht drei Kachelraster hintereinander stehen --- */ #olten .v-zeilen{list-style:none;max-width:820px;margin:0 auto; border-top:1px solid rgba(12,38,50,.12)} #olten .v-zeilen li{display:grid;grid-template-columns:170px 1fr;gap:20px;padding:18px 0; border-bottom:1px solid rgba(12,38,50,.12);align-items:baseline} #olten .v-zeilen b{font-weight:700;color:var(--ink)} /* Diese Regel steht nach der Farbgebung des blauen Glases und hat dieselbe Spezifität — dadurch wurden „Wohnen", „Anmeldung", „Familie" und „Region" dunkelblau auf blauem Grund, also unsichtbar. Sie wird hier zurückgeholt. */ #olten .glas-blau .v-zeilen b,#olten .glas-blau .v-zeilen span, #olten .glas-blau .v-zeilen li{color:#FFFFFF} #olten .v-zeilen span{font-weight:450} @media(max-width:700px){#olten .v-zeilen li{grid-template-columns:1fr;gap:4px}} /* Gruppentitel der Fragen: im Original ein h4 unter einem h2 — das ist ein übersprungener Rang. Jetzt h3, Aussehen unverändert. */ #olten .t-faqtitel{font-size:1rem;font-weight:700;color:var(--ink);margin:0 0 12px; letter-spacing:-.02em} /* --- Porträtzeilen: Bild quadratisch, nicht schmal beschnitten --- */ #olten .t-doc .t-ph-sq{aspect-ratio:1/1;border-radius:var(--r-lg);overflow:hidden} #olten .t-doc .t-ph-sq img{width:100%;height:100%;object-fit:cover} } /* Der Hero des Grundsystems gibt der Textspalte .78fr. Unsere Überschrift und der Absatz sind länger, dort wurde es zu eng. */ /* Das Foto steht jetzt in der rechten Spalte oben bündig mit der Überschrift, die Kapseln darunter. Die rechte Spalte bekommt etwas mehr Breite, damit das Bild grösser wird; der Knopf bleibt links. Vorher füllte die linke Spalte auch die Kapseln. */ /* Beide Spalten gleich hoch, damit der Knopf unten auf derselben Linie endet wie die zweite Kapselreihe. Die Anlaufzeile schiebt sich mit `margin-top:auto` samt Knopf nach unten; dazwischen verteilt sich der Raum von selbst. */ #olten .t-heroA{grid-template-columns:.94fr 1.06fr;align-items:stretch} @media (min-width:1001px){ #olten .t-h-copy{display:flex;flex-direction:column} #olten .t-hero .v-anlauf{margin-top:auto} } /* Nur auf breiten Geräten wird die rechte Spalte zur eigenen Säule. Darunter löst sie sich mit display:contents auf, damit die Reihenfolgewerte greifen — setzt man hier display:flex ohne Begrenzung, wandert der ganze Block als ein Element nach oben und das Foto steht vor der Überschrift. */ @media (min-width:1001px){ #olten .t-h-visual{display:flex;flex-direction:column; gap:clamp(16px,1.8vw,24px)} #olten .t-h-photo{margin:0} #olten .t-hero .v-fakten{margin:0} } /* Auf dem Handy beginnt der Hero unmittelbar unter der Kopfzeile — die Überschrift klebte an der Leiste. */ @media (max-width:1000px){#olten .t-hero{padding-top:34px}} @media (max-width:560px){#olten .t-hero{padding-top:26px}} /* --- Wegstrecke: derselbe Umschalter wie im Vergleich ----------- Vorher drei gleich grosse Kreise auf einer Linie — der aktive Punkt unterschied sich allein durch die Füllung und war zu schwach erkennbar. Jetzt derselbe Baustein wie der Vergleichsumschalter im Abschnitt darüber: Glaskörper, gleitende Pille, Sprungfeder-Kurve. Die Seite bekommt damit ein wiederkehrendes Bedienelement statt zweier verschiedener. ----------------------------------------------------------------- */ #olten .m-weg{max-width:900px;margin:0 auto} #olten .m-achse{position:relative;display:inline-flex;padding:6px;border-radius:99px; margin-bottom:clamp(24px,3vw,34px); background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.76)); -webkit-backdrop-filter:blur(26px) saturate(180%); backdrop-filter:blur(26px) saturate(180%); border:0; box-shadow: 0 0 0 1px rgba(12,38,50,.13), inset 0 1.5px 0 rgba(255,255,255,1), inset 0 -1px 0 rgba(255,255,255,.5), 0 1px 2px rgba(12,38,50,.06), 0 10px 22px rgba(12,38,50,.08), 0 24px 46px rgba(12,38,50,.09)} #olten .m-pille{position:absolute;top:6px;bottom:6px;left:6px;width:0;border-radius:99px; z-index:1;background:linear-gradient(140deg,#00618C,#00405E); box-shadow:0 8px 22px rgba(0,64,94,.32); transition:left .5s cubic-bezier(.34,1.56,.64,1),width .5s cubic-bezier(.34,1.56,.64,1)} #olten .m-punkt{position:relative;z-index:2;background:none;border:0;font:inherit; cursor:pointer;text-align:center;padding:11px 24px;border-radius:99px;display:grid;gap:1px} #olten .m-punkt b{display:block;font-weight:700;font-size:.99rem;color:var(--ink); transition:color .35s var(--ease)} #olten .m-punkt>b+span{font-size:.83rem;color:var(--body);transition:color .35s var(--ease)} #olten .m-punkt.an b,#olten .m-punkt.an>b+span{color:#fff} /* Auf schmalen Geräten stehen die drei Stufen untereinander; die gleitende Pille entfällt, der aktive Eintrag wird selbst gefüllt. */ /* Die frühere Stapelung unter 760 Pixeln ist entfallen — der Umschalter bleibt waagrecht. */ /* Die Tafel trägt dasselbe blaue Glas wie „Direkt bei uns" und die Kontaktkarte — gleiche Farben, gleiche Deckung, gleiche Kanten. */ #olten .m-tafelw{text-align:left;padding:clamp(24px,3vw,34px)} #olten .m-tafelw h3,#olten .m-tafelw p,#olten .m-tafelw span{color:#FFFFFF} #olten .m-pan{display:none} #olten .m-pan.an{display:block} #olten .m-liste{list-style:none;display:grid;gap:0;margin-top:18px; border-top:1px solid rgba(255,255,255,.26)} #olten .m-liste li{display:grid;grid-template-columns:24px 1fr;gap:14px;padding:14px 0; border-bottom:1px solid rgba(255,255,255,.26);align-items:start} #olten .m-liste .t-ic{width:19px;height:19px;color:var(--cyan-lt);margin-top:4px} #olten .m-liste span{color:#FFFFFF} @media (max-width:640px){ #olten .m-achse{grid-template-columns:1fr;gap:14px} #olten .m-achse::before{display:none} #olten .m-punkt{display:grid;grid-template-columns:40px 1fr;gap:14px;text-align:left; align-items:center} } /* ------------------- Gegenüberstellung (Fassung V2) ------------- Links der Weg über eine Agentur auf hellem Glas, rechts der direkte Weg auf blauem. Der Materialwechsel trägt die Aussage — ohne dass sie behauptet werden muss. ----------------------------------------------------------------- */ #olten .n-zwei{display:grid;grid-template-columns:1fr 1fr;gap:18px; max-width:1140px;margin:0 auto} @media (max-width:860px){#olten .n-zwei{grid-template-columns:1fr}} #olten .n-sp{padding:clamp(24px,3vw,34px);text-align:left} #olten .n-sp h3{margin-bottom:14px} #olten .n-sp ul{list-style:none;display:grid;gap:0; border-top:1px solid rgba(12,38,50,.12)} #olten .n-sp li{padding:13px 0;border-bottom:1px solid rgba(12,38,50,.12); display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start} #olten .n-sp .t-ic{width:18px;height:18px;margin-top:3px;flex:none} #olten .n-agentur .t-ic{color:#B33A3A} #olten .n-wir .t-ic{color:var(--cyan-lt)} #olten .n-wir ul,#olten .n-wir li{border-color:rgba(255,255,255,.26)} #olten .n-wir h3,#olten .n-wir li,#olten .n-wir span{color:#FFFFFF} /* Die Knappheit stand auf einer eigenen blauen Karte. Zusammen mit der Gegenüberstellung darüber waren das drei Karten in einem Abschnitt. Sie steht jetzt frei — der Satz trägt sich selbst und wirkt ohne Rahmen ruhiger und bestimmter. */ /* Die Zahl wird beim Sichtbarwerden unterstrichen. Der Strich liegt hinter der Schrift und wächst von links nach rechts — dadurch wirkt er wie mit der Hand gezogen und nicht wie ein Rahmen. */ /* Unterstreichung, nicht Markierung. Vorher lag ein 0,34em hohes Band bei 80 Prozent der Zeilenhöhe — also mitten über den Unterlängen. Das las sich als Durchstrich. Jetzt eine Linie von 0,09em, die unterhalb der Schrift sitzt: Das Wort bekommt eine Polsterung nach unten, die Linie hängt an deren Unterkante. Sie berührt die Buchstaben nicht mehr. Technisch weiterhin ein Hintergrundbild statt ::after — ein negativer z-index würde im Hero hinter den Verlauf rutschen. */ #olten .v-strich{display:inline-block;white-space:nowrap; padding-bottom:.12em; background-image:linear-gradient(90deg,var(--cyan-txt),rgba(0,158,227,.55)); background-repeat:no-repeat;background-position:0 100%;background-size:0 .09em; transition:background-size 1.05s cubic-bezier(.22,.7,.28,1) .35s} #olten .t-in .v-strich,#olten .v-aussage.t-in .v-strich, #olten h1.t-in .v-strich{background-size:100% .09em} /* Im Hero und auf blauen Bändern weiss — jede Blaunuance verliert sich im Verlauf. Weiss auf dem Hero liegt bei 14,1. */ #olten .t-hero .v-strich,#olten .t-band-dark .v-strich{ background-image:linear-gradient(90deg,#FFFFFF,rgba(255,255,255,.72))} @media (prefers-reduced-motion:reduce){ #olten .v-strich{transition:none;background-size:100% .09em}} #olten .v-aussage{max-width:64ch;margin:clamp(40px,4.6vw,60px) auto 0;text-align:center} #olten .v-aussage h3{font-size:clamp(1.4rem,2.9vw,2rem);letter-spacing:-.03em; line-height:1.2;margin-bottom:14px;color:var(--ink)} #olten .v-aussage p{max-width:56ch;margin:0 auto;color:var(--body)} /* Die beiden Rechtsverweise waren 26 Pixel hoch. Auf dem Handy ist das unter der Marke von 44, die eine Fingerkuppe braucht. */ #olten .v-fuss a{display:inline-flex;align-items:center;min-height:44px} /* Fusszeilenlogo: farbig, ohne Tafel, direkt auf dem dunklen Grund. */ #olten .v-fuss-in>div>img{display:block;height:52px;width:auto;margin-bottom:18px} /* Die Praxiskarten sind Verweise. Als brauchen sie die Blockdarstellung und dürfen die Linkfarbe nicht erben. */ #olten a.t-prax-c{display:flex;flex-direction:column;text-decoration:none;color:inherit} #olten .t-prax-web{display:inline-flex;align-items:center;gap:6px;margin-top:10px; font-weight:700;color:var(--petrol-mid)} #olten .t-prax-web .t-ic{width:15px;height:15px;transition:transform .3s var(--ease)} #olten a.t-prax-c:hover .t-prax-web .t-ic{transform:translate(2px,-2px)} #olten .t-prax-hier{color:var(--ink)} /* ---------------- Zwei Stufen für Zwischenüberschriften --------- Gemessen lagen drei vor: 32 für die Knappheitsaussage, 30,4 für die Ärztenamen, 27,2 für „Wie wir uns das leisten können". Alle drei stehen im selben Rang — eine Ebene unter dem Abschnittstitel. Also eine Grösse für alle, und eine kleinere für Kartentitel. ----------------------------------------------------------------- */ /* Feste Grösse wäre falsch: Die Abschnittsüberschrift schrumpft auf schmalen Geräten von 42,4 auf 27,2 Pixel. Eine feste Zwischen- überschrift von 30,4 wäre dort grösser als der Titel darüber. Also dieselbe Mechanik, nur eine Stufe tiefer gedeckelt. */ #olten .v-aussage h3, #olten .t-doc h3, #olten .t-sec-head h3{font-size:clamp(1.3rem,2.5vw,1.9rem); line-height:1.16;letter-spacing:-.03em} /* Die absolute Zahl unter den Balken. Ein Faktor ohne Bezugsgrösse ist keine Zahl — 1,15 mal wie viel? Erst mit dem Anker darunter lässt sich rechnen. */ #olten .v-summe{margin-top:20px;padding-top:20px; border-top:1px solid rgba(255,255,255,.26);text-align:left} #olten .v-summe b{font-size:1.24rem;font-weight:700;display:inline} /* ------------------ Lohnvergleich als Balken -------------------- Zwei gleich grosse Prozentzahlen nebeneinander liessen offen, welche die wichtigere ist. Drei Balken zeigen den Abstand, statt ihn zu behaupten. Die Werte sind Verhältniszahlen — 1,0 als Ausgangspunkt, nicht 100 —, weil Prozentangaben hier zweimal vorkämen und sich gegenseitig entwerten. Die Balken wachsen erst, wenn der Abschnitt sichtbar wird. Die Zielbreite steht als --w am Element, die Klasse t-in löst aus. ----------------------------------------------------------------- */ #olten .v-balken{display:grid;gap:18px;text-align:left} #olten .v-bz{display:grid;grid-template-columns:250px 1fr 84px;gap:18px;align-items:center} #olten .v-bz b{font-weight:600;font-size:1.09375rem} #olten .v-bahn{height:24px;border-radius:99px;background:rgba(255,255,255,.16); overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,20,32,.18)} #olten .v-fuell{display:block;height:100%;width:0;border-radius:99px; background:linear-gradient(90deg,rgba(127,210,243,.85),var(--cyan)); transition:width 1.1s cubic-bezier(.22,.7,.28,1)} #olten .v-bz-uns .v-fuell{background:linear-gradient(90deg,#7FD2F3,#FFFFFF)} #olten .v-lohn.t-in .v-fuell{width:var(--w)} #olten .v-wert{font-weight:700;font-size:1.24rem;text-align:right; font-variant-numeric:tabular-nums} #olten .v-lohn p{margin-top:22px;text-align:left;opacity:.92} @media (max-width:720px){ #olten .v-bz{grid-template-columns:1fr 62px;grid-template-areas:"a a" "b c";gap:8px 14px} #olten .v-bz b{grid-area:a} #olten .v-bahn{grid-area:b} #olten .v-wert{grid-area:c} } @media (prefers-reduced-motion:reduce){ #olten .v-fuell{transition:none;width:var(--w)} } /* Der Menüknopf war nur ein Strichsymbol ohne Fläche. Rechnerisch liegt er bei 15:1, in der Praxis übersieht man ihn trotzdem, weil drei dünne Linien auf hellem Grund wenig Halt haben. Er bekommt dieselbe Glasfläche wie die übrigen Bedienelemente — damit ist er als Schaltfläche erkennbar, nicht nur als Zeichen. */ /* Der Menüknopf trägt keine Fläche mehr — nur die drei Striche. Die Glastafel aus 1.1.0 war als Hilfe gedacht, erschien auf dem Gerät aber als weisses Rechteck ohne erkennbare Striche. Die Farbe wird ausdrücklich gesetzt, nicht geerbt: In WordPress steht zwischen Kopfzeile und Knopf fremdes CSS, das die Schriftfarbe auf Weiss setzen kann — dann verschwinden weisse Striche auf hellem Grund. Beides wird hier festgelegt, Farbe und Strichfarbe. */ #olten .t-burger{ background:none;border:0;box-shadow:none; -webkit-backdrop-filter:none;backdrop-filter:none; color:#0C2632} #olten .t-burger .t-ic{width:26px;height:26px;stroke-width:2.2; color:#0C2632;stroke:#0C2632} #olten .t-burger:hover .t-ic{stroke:var(--petrol-mid)} /* ============ Kapseln als Fliesskette, Umschalter waagrecht ======= 1. Die vier Faktenkapseln füllten auf schmalen Geräten je eine ganze Zeile und sahen dadurch aus wie Schaltflächen, obwohl sie nichts tun. Jetzt laufen sie wie Wörter um: jede so breit wie ihr Text, zwei bis drei pro Zeile. 2. Beide Umschalter klappten unter 760 Pixeln untereinander. Das Glas mit der gleitenden Pille blieb dabei auf der Strecke. Sie liegen jetzt auf jeder Breite waagrecht — dieselbe Bauform wie auf dem Desktop, nur mit kleinerer Schrift und engerer Polsterung. Möglich wurde das erst durch die kürzeren Beschriftungen und den Wegfall der Unterzeile. ================================================================= */ /* --- Faktenkapseln --- Eine spätere Regel setzte sie unter 760 Pixeln auf eine Spalte. Die hier steht mit dem Hero im Selektor und wiegt deshalb schwerer. */ #olten .t-hero .v-fakten{display:flex;flex-wrap:wrap;gap:8px; grid-template-columns:none;justify-content:center} #olten .t-hero .v-fakt{flex:0 0 auto;width:auto;text-align:center;white-space:nowrap} /* Unter dem Foto ein Zweierraster statt einer Fliesskette: So enden beide Reihen auf der Bildkante. Linksbündig blieben sie 166 und 75 Pixel davor stehen, was ungeordnet wirkte. Diese Regel muss nach der Fliesskette stehen — bei gleichem Gewicht entscheidet die Reihenfolge, und die Kette stand 229 Zeilen später. Auf schmalen Geräten bleibt die Kette: Dort gibt es keine Bildkante, an der sich etwas ausrichten liesse. */ @media (min-width:1001px){ #olten .t-hero .v-fakten{display:grid;grid-template-columns:1fr 1fr;gap:10px} #olten .t-hero .v-fakten .v-fakt{width:auto;text-align:center} } /* --- Umschalter: waagrecht auf jeder Breite --- Gleich breite Spalten gehen auf schmalen Geräten nicht auf: „Verantwortung" braucht bei 390 Pixeln 136, ein Drittel der Leiste sind aber nur 114. Deshalb bekommt jeder Knopf die Breite seines Textes; die gleitende Pille übernimmt sie ohnehin einzeln. */ /* inline-grid, nicht grid: Ein Raster auf Blockebene nimmt die volle Breite des Behälters — die Leiste war dadurch 880 Pixel breit, obwohl die Knöpfe nur 430 brauchen. Inline umschliesst den Inhalt, wie es der Umschalter vorher als inline-flex tat. */ #olten .v-schalter,#olten .m-achse{ display:inline-grid;grid-auto-flow:column;grid-auto-columns:auto; width:auto;max-width:100%;gap:0} #olten .v-sb,#olten .m-punkt{white-space:nowrap;text-align:center} @media (max-width:760px){ /* Gleiche Drittel statt inhaltsabhängiger Breiten: Bei „auto" bekam „Anstellung" nur 59 Pixel, während die beiden längeren Wörter 148 und 136 belegten — das kürzeste Wort lief über. Mit gleichen Spalten und weichen Trennstellen passt jedes Wort in sein Drittel. */ /* Auf schmalen Geräten dagegen volle Breite, damit die drei Knöpfe den vorhandenen Platz ausnutzen. */ /* Spalten nach Inhalt: Gleiche Drittel gäben dem kürzesten Wort zu viel und dem längsten zu wenig. So bekommt jedes genau, was es braucht, und die Leiste füllt trotzdem die Breite. */ #olten .v-schalter,#olten .m-achse{display:grid;width:100%; border-radius:99px;grid-auto-columns:1fr} #olten .v-pille,#olten .m-pille{display:block} /* Nachgerechnet für die engste Stelle: Bei 320 Pixeln stehen 284 zur Verfügung. Die drei Wörter messen bei 2,85vw zusammen 246, dazu sechsmal 6 Pixel Polsterung — 282. Bei 390 sind es 335 von 354. Mehr Polsterung passt nicht. */ /* Gemessen brauchen die drei Wörter bei 11,5 Pixeln zusammen 376, bei 390 Pixeln Bildschirmbreite stehen 354 zur Verfügung. Damit nichts umbricht, muss die Schrift auf etwa 9,7 Pixel — das ist 2,5vw. Die weichen Trennstellen bleiben als Rückfall für sehr schmale Geräte. */ #olten .v-sb,#olten .m-punkt{ padding:10px 4px;border-radius:99px;line-height:1.18; white-space:nowrap;font-weight:600; font-size:clamp(.58rem,2.9vw,.78rem)} #olten .m-punkt b{font-size:inherit;line-height:1.18;white-space:nowrap} /* Die Kapseln werden kleiner, damit zwei nebeneinanderpassen. Der Selektor nennt zusätzlich den Behälter, weil die Schriftskala weiter unten sonst schwerer wiegt. */ #olten .t-hero .v-fakten .v-fakt{padding:7px 12px;font-size:.82rem} #olten .t-hero .v-fakten{gap:7px} } /* --- Der neue Absatz über dem Umschalter --- */ #olten .m-einleitung{max-width:64ch;margin:0 auto clamp(26px,3vw,36px); color:var(--body)} /* ================= Korrekturen für schmale Geräte ================ Vier Fehler, alle nachgemessen: 1. Der Menüknopf sass in der Mitte. Die Kopfzeile ist ein Raster mit vier Spalten; weil Navigation und Knopf ausgeblendet sind, rutschte der Menüknopf in Spalte zwei. Auf schmalen Geräten genügen zwei Spalten. 2. In der Wegstrecke überlagerten sich die beiden Textzeilen. Der Knopf erbte ein Raster von 40 und 260 Pixeln aus der früheren Achsendarstellung — die Beschriftung landete neben statt unter dem Titel. 3. Unter jedem Galeriebild lag eine blaue Linie von einem Pixel. Das ist die Farbe des Bandes, die durch die gebrochene Höhe des Bildes durchscheint. Ein Flexbereich lässt das Bild die Fläche exakt füllen. 4. Die Bildbeschriftungen tragen mehr Durchsicht. ================================================================= */ @media (max-width:1000px){ #olten .t-hd{grid-template-columns:1fr auto} #olten .t-burger{justify-self:end} } @media (max-width:760px){ #olten .m-achse .m-punkt{grid-template-columns:1fr;gap:1px;text-align:left} /* Diese Regel stammt aus der Zeit, als der Knopf zwei Zeilen trug und links ausgerichtet war. Seit die Unterzeile weg ist, stand die Beschriftung dadurch 19 Pixel neben der Pillenmitte. */ #olten .m-achse .m-punkt b{text-align:center} } /* Die dunkle Linie unter den Fotos war kein durchscheinender Hintergrund — mit einer Testfarbe hinter der Galerie erschien nichts. Es ist der Ring der Karte: rgba(0,20,32,.34) auf allen vier Seiten. Oben und an den Seiten überdeckt ihn das weisse Glanzlicht, unten trifft er auf das helle Foto und liest sich als blaue Kante. Auf dunklem Band gehört dort ein heller Ring hin, so wie ihn auch die Bildbeschriftungen tragen. Das feste Seitenverhältnis bleibt, weil es gebrochene Höhen ausschliesst. Die Aufnahmen liegen bereits im Verhältnis 3:2 vor, es wird also nichts abgeschnitten. */ #olten .t-band-dark .t-gal{ box-shadow: 0 0 0 1px rgba(255,255,255,.20), inset 0 1.5px 0 rgba(255,255,255,.42), inset 0 -1px 0 rgba(255,255,255,.16), 0 2px 4px rgba(0,14,24,.16), 0 14px 28px rgba(0,14,24,.22), 0 30px 56px rgba(0,14,24,.26)} #olten .t-gal .t-gal-b{display:block;aspect-ratio:3/2;overflow:hidden} #olten .t-gal .t-gal-b img{display:block;width:100%;height:100%;object-fit:cover} /* ---------------- Gleiche Abstände zwischen den Abschnitten ----- Zwei Stellen brachen die Regelmässigkeit: 1. Die Ärzteblöcke trennen sich durch je 74 Pixel Polsterung. Beim letzten Block addierte sich diese Polsterung zur Polsterung des Abschnitts — 148 statt 74 Pixel, und das genau an der Stelle, wo das hohe Porträt ohnehin Luft neben dem Text lässt. 2. Die letzte Fragengruppe trug 40 Pixel Aussenrand. Da die Liste weder Polsterung noch Rahmen hat, schlug dieser Rand nach aussen durch — der Abstand von den Fragen zum nächsten Abschnitt wuchs auf 188 statt 148 Pixel. ----------------------------------------------------------------- */ #olten .t-docs .t-doc:last-child{padding-bottom:0} #olten #faqlist .t-faqcat:last-child{margin-bottom:0} #olten #faqlist .t-faqcat:last-child details:last-of-type{margin-bottom:0} /* Alle drei Kennenlernen-Knöpfe sprangen auf den Abschnittsanfang. Dort steht zuerst die Eignungsliste — der eigentliche Schreib-Knopf lag auf dem Handy nochmals 1099 Pixel weiter unten, also mehr als eine Bildschirmhöhe. Das Ziel ist jetzt die Kontaktkarte selbst; die Liste bleibt direkt darüber sichtbar. */ #olten #schreiben{scroll-margin-top:96px} /* Die Zeitangabe im Ablauf trug die Klasse t-role — dieselbe wie die Facharztbezeichnung bei den Ärzteporträts. Dadurch stand sie in einer Grösse und Stärke, die zu ihrer Aufgabe nicht passt, und wirkte wie eine dritte Schriftart. Sie ist jetzt ein Etikett: klein, versal, in Petrol — erkennbar als Angabe, nicht als Text. */ /* ==================== Drei Inhaltsbreiten ======================= Gemessen lagen acht verschiedene vor: 1128 · 1020 · 900 · 880 · 860 · 713 · 708 · 700 · 640. Das wirkt zufällig, weil es zufällig gewachsen ist. Drei genügen: Voll 1128px Raster mit mehreren Spalten Lesebreite 880px längere Textblöcke, Listen, Abläufe Schmal 700px freistehende Aussagen, Kontaktkarte ================================================================= */ #olten .t-steps, #olten .v-lohn, #olten .v-zusage, #olten .v-gruende, #olten #faqlist, #olten .m-weg{max-width:880px;margin-left:auto;margin-right:auto} #olten .v-aussage, #olten .m-hinweis, #olten .v-profil, #olten .v-kontakt{max-width:700px;margin-left:auto;margin-right:auto} #olten .t-dauer{display:inline-block;margin-top:8px;font-size:.84rem;font-weight:700; letter-spacing:.09em;text-transform:uppercase;color:var(--petrol-mid)} /* ==================== Eine Schriftskala ========================== Gemessen lagen im Fliesstext neun verschiedene Grössen vor: 18,56 · 18,24 · 17,5 · 16,96 · 16,48 · 16,32 · 15,68 · 15,36 · 15,2. Sie stammen aus unterschiedlichen clamp()-Angaben der geerbten Bausteine und wirken wie Zufall, weil sie es auch sind. Vier Stufen, mehr braucht die Seite nicht: Vorspann 1.16rem Abschnittseinleitung, tragende Aussagen Fliesstext 1.09375rem alles Laufende Klein 0.97rem Bildunterschriften, Rollen, Kennzeichen Mikro 0.84rem Kantone, Zeitangaben unter Schaltflächen ================================================================= */ #olten .t-lede, #olten .t-sub, #olten .v-aussage p, #olten .m-hinweis{font-size:1.16rem;line-height:1.68} #olten .t-doc p, #olten .t-step p, #olten .t-tile p, #olten .m-tafelw p, #olten .n-sp li, #olten .v-zeilen span, #olten .v-w, #olten #faqlist details p, #olten .m-liste span, #olten .v-kontakt p, #olten .v-lohn p{font-size:1.09375rem;line-height:1.68} #olten .t-role, #olten .v-zahlen span, #olten .v-fakt, #olten .v-name, #olten .t-gal figcaption, #olten .t-prax-hier{font-size:.97rem} #olten .t-prax-kt, #olten .m-punkt>b+span{font-size:.84rem} } /* Nachtrag aus der Messung: Diese sechs lagen noch daneben — der Hero-Absatz bei 18,24 statt 18,56, die Rollenbezeichnung bei 15,36, die Fakten-Chips bei 15,2, die Praxisangabe bei 15,52 und die beiden Beschriftungen im Kopfzeilenknopf bei 15,04. */ #olten .t-h-copy .t-sub{font-size:1.16rem} #olten .t-role, #olten .v-fakt, #olten .v-hinweis, #olten .t-prax-web, #olten .v-name, #olten .t-hd-cta span{font-size:.97rem} #olten .m-hinweis, #olten .v-aussage p{font-size:1.16rem} /* Letzte drei Ausreisser der Messung, jeweils mit mehr Gewicht als die Regel, die sie vorher gesetzt hat: Umschalterbeschriftung 15,84 · Rollenangabe 15,36 · Chips 15,2. Alle drei gehören zur Stufe „Klein" und liegen jetzt bei 15,52. */ #olten .m-achse .m-punkt b, #olten .t-doc .t-role, #olten .v-fakten .v-fakt{font-size:.97rem} /* --------- Verbindungslinie im Ablauf, die mitwächst ------------ Die Linie war im Grundsystem angelegt, aber nie angeschlossen: Es fehlten das Element und das Skript. Sie liegt hinter den Ziffern und füllt sich in Cyan nach Petrol, während man scrollt. ----------------------------------------------------------------- */ #olten .t-steps{position:relative} #olten .t-steps::before{content:"";position:absolute;left:44px;top:34px;bottom:34px; width:3px;background:rgba(12,38,50,.10);border-radius:3px;z-index:0} #olten .t-steps-fill{position:absolute;left:44px;top:34px;width:3px;height:0; border-radius:3px;z-index:1; background:linear-gradient(180deg,var(--cyan),var(--petrol-mid)); transition:height .35s linear} #olten .t-step{position:relative;z-index:2} #olten .t-step .t-stepn{position:relative;z-index:3;transition:.35s var(--ease)} #olten .t-step.t-reached .t-stepn{background:linear-gradient(140deg,#00618C,#00405E); color:#fff;border-color:transparent;box-shadow:0 8px 20px rgba(0,64,94,.28)} @media (max-width:640px){ #olten .t-steps::before,#olten .t-steps-fill{left:36px} } @media (prefers-reduced-motion:reduce){ #olten .t-steps-fill{transition:none} } /* ================== Karten mit Augenmass ======================== Nicht jeder Text braucht einen Rahmen — die Knappheitsaussage und die Zusage beim Ankommen stehen bewusst frei. Ablauf und Fragen tragen dagegen Glas: Beide bestehen aus vielen gleichartigen Einheiten, die sich einzeln lesen und im Fall der Fragen auch einzeln öffnen lassen. Dort trennt die Fläche besser als eine Linie. Beide nutzen dieselben Werte, damit sie sich nicht voneinander unterscheiden. ================================================================= */ /* Die Regeln des Grundsystems für die Aufklapper stehen unter #olten #faqlist details — zwei IDs. Das wiegt schwerer als .glas und hat den Schattenstapel auf zwei Stufen gestutzt. Diese Regeln holen die Vorgabe mit gleichem Gewicht zurück. */ #olten #faqlist details.glas{ background:linear-gradient(180deg,var(--glas-1),var(--glas-2)); border:0;border-radius:var(--glas-radius); box-shadow:var(--glas-kanten),var(--glas-tiefe)} #olten #faqlist details.glas[open]{ background:linear-gradient(180deg,var(--glas-fest-1),var(--glas-fest-2)); box-shadow:0 0 0 1px rgba(0,95,137,.30), inset 0 1.5px 0 rgba(255,255,255,1), inset 0 -1px 0 rgba(255,255,255,.5), 0 2px 4px rgba(12,38,50,.07),0 10px 20px rgba(12,38,50,.08), 0 26px 46px rgba(12,38,50,.10)} #olten #faqlist details.glas:hover{ background:rgba(255,255,255,.94); box-shadow:0 0 0 1px rgba(0,95,137,.30), inset 0 1.5px 0 rgba(255,255,255,1), inset 0 -1px 0 rgba(255,255,255,.5), 0 2px 4px rgba(12,38,50,.07),0 10px 20px rgba(12,38,50,.08), 0 26px 46px rgba(12,38,50,.10)} #olten #faqlist details.glas[open] summary{background:transparent} /* Der Absatz trug einen Aussenrand statt einer Polsterung. Da die Karte weder Rand noch Polsterung hat, schlug er nach aussen durch und der Text sass direkt auf der Unterkante — gemessen null Pixel. Jetzt Polsterung, oben und unten gleich viel. */ #olten #faqlist details.glas p{margin:0;padding:5px 26px 24px} #olten .t-faqcat{margin-bottom:clamp(28px,3vw,40px)} #olten #faqlist details+details{margin-top:12px} #olten .t-steps{display:grid;gap:14px} /* ---------------------- Ankommen als Zusage --------------------- Die vier Punkte waren eine Leistungsliste, und Leistungslisten überzeugen niemanden. Wer mit Familie umzieht, hat keine Frage nach Dienstleistungen, sondern eine Sorge. Deshalb spricht hier zuerst ein Mensch, der das sechzehnmal begleitet hat; die Punkte folgen als Beleg. Keine Karte — der Satz trägt sich selbst. ----------------------------------------------------------------- */ /* Bild und Zitat je zur Hälfte, darunter die Liste über die volle Breite. Das Bild trägt ausdrücklich kein object-fit und keine feste Höhe — es behält sein Verhältnis von 3:2, es wird nichts abgeschnitten. Die Liste unten bleibt dadurch einzeilig, statt in einer schmalen Spalte umzubrechen. */ #olten .v-zusage{margin:clamp(44px,5vw,68px) auto 0} #olten .v-zusage-oben{display:grid;grid-template-columns:1fr 1fr; gap:clamp(22px,3vw,40px);align-items:center} #olten .v-zusage-bild{border-radius:var(--glas-radius);overflow:hidden; box-shadow:0 0 0 1px rgba(12,38,50,.10),0 16px 36px rgba(12,38,50,.13)} #olten .v-zusage-bild img{display:block;width:100%;height:auto} #olten .v-zusage blockquote{margin:0} /* Blocksatz, damit die rechte Kante des Zitats mit der Kante der Fragenliste und des Bildes fluchtet. Silbentrennung dazu, sonst reisst der Blocksatz bei langen deutschen Wörtern grosse Lücken zwischen die Wörter. */ #olten .v-zusage blockquote p{font-size:clamp(1.12rem,1.9vw,1.36rem);line-height:1.44; font-weight:600;color:var(--ink);letter-spacing:-.015em;margin:0 0 12px; text-align:justify;text-justify:inter-word; hyphens:auto;-webkit-hyphens:auto} #olten .v-zusage cite{font-style:normal;font-weight:700;font-size:.97rem; color:var(--petrol-mid)} /* Die geteilte Klasse .v-zeilen begrenzt jede Liste auf 820 Pixel und zentriert sie. Im 880 Pixel breiten Block ergibt das 30 Pixel Einzug auf jeder Seite — die Liste stand damit weder auf der linken Kante des Bildes noch auf der rechten des Zitats. Hier nimmt sie die volle Breite des Blocks. */ #olten .v-zusage-liste{margin:clamp(26px,3.2vw,38px) 0 0;max-width:none; border-top:1px solid rgba(12,38,50,.14)} #olten .v-zusage-liste li{border-bottom-color:rgba(12,38,50,.14)} #olten .v-zusage-liste b,#olten .v-zusage-liste span{color:var(--ink)} #olten .v-zusage-liste span{font-weight:450;color:var(--body)} @media (max-width:820px){ #olten .v-zusage-oben{grid-template-columns:1fr} #olten .v-zusage-bild{max-width:520px} } /* --- Neue Bausteine für die Positionierung als Praxisbetreiber --- */ /* Begründungen als Zeilenpaare, nicht als Kacheln — Symbolkacheln kommen auf der Seite nur ein einziges Mal vor. */ #olten .v-gruende{list-style:none;margin:32px auto 0;text-align:left; display:grid;grid-template-columns:repeat(2,1fr);gap:0 40px; border-top:1px solid rgba(12,38,50,.14)} #olten .v-gruende li{padding:18px 0;border-bottom:1px solid rgba(12,38,50,.14)} #olten .v-gruende b{display:block;font-weight:700;margin-bottom:4px} #olten .t-band-light .v-gruende,#olten .t-band-light .v-gruende li{ border-color:rgba(12,38,50,.14)} @media (max-width:760px){#olten .v-gruende{grid-template-columns:1fr;gap:0}} #olten .t-logo{display:inline-flex;align-items:center;gap:12px} /* In der Kopfzeile bricht nichts um: die Menüpunkte standen zweizeilig, der Knopftext ebenfalls. */ #olten #hdr nav a,#olten .t-hd-cta{white-space:nowrap} #olten #hdr nav{gap:20px} @media (max-width:1240px){#olten #hdr nav{gap:14px} #olten #hdr nav a{font-size:.92rem}} /* Das Foto behält seine eigenen Proportionen und sitzt mittig in der Spalte. Ein Strecken auf volle Höhe hatte es über den Rand gezogen und das Team angeschnitten. */ @media (min-width:1001px){ #olten .t-hero .t-h-visual{justify-content:center} #olten .t-hero .t-h-photo .t-ph{overflow:hidden} #olten .t-hero .t-h-photo img{width:100%;height:auto} } #olten .v-wort{font-size:1.12rem;font-weight:600;letter-spacing:-.02em;color:var(--ink)} #olten .v-wort b{font-weight:800;color:var(--petrol-mid)} @media (max-width:420px){#olten .v-wort{display:none}} /* Kapseln: Zeile mit Umbruch, Beschriftung nie umbrechend. Als Raster wurden sie in der schmalen Textspalte zu Kreisen zusammengedrückt und die Beschriftungen überlagerten sich. */ #olten .v-fakten{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 0} #olten .v-fakt{cursor:default; transition:transform .3s var(--ease),background .3s var(--ease), border-color .3s var(--ease),box-shadow .3s var(--ease);white-space:nowrap;text-align:center} @media (max-width:520px){ #olten .v-fakten{display:grid;grid-template-columns:1fr} #olten .v-fakt{cursor:default; transition:transform .3s var(--ease),background .3s var(--ease), border-color .3s var(--ease),box-shadow .3s var(--ease);white-space:normal} } /* Unter 1000px setzt trtdoc den Hero über `order` neu zusammen. Elemente ohne eigene Angabe landen dabei auf order:0 und rutschen vor die Überschrift — genau das ist mit den Kapseln passiert. */ @media (max-width:1000px){ /* Reihenfolge auf Wunsch: Überschrift, Text, Foto, Kapseln, Knopf. Der Knopf liegt damit unterhalb des ersten Bildschirms — das ist bewusst so entschieden. */ #olten .t-hero .t-h-photo{order:3} #olten .v-fakten{order:4;margin-bottom:30px} #olten .t-hero .t-hero-cta{order:5;margin-bottom:0} } #olten .v-fakt{cursor:default; transition:transform .3s var(--ease),background .3s var(--ease), border-color .3s var(--ease),box-shadow .3s var(--ease);padding:9px 16px;border-radius:99px;font-size:.95rem;font-weight:700; cursor:default; background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);color:#FFFFFF} #olten .v-profil{list-style:none;max-width:700px;margin:0 auto 30px;display:grid;gap:0; border-top:1px solid rgba(12,38,50,.12)} #olten .v-profil li{display:grid;grid-template-columns:26px 1fr;gap:14px;padding:15px 0; border-bottom:1px solid rgba(12,38,50,.12);align-items:start} #olten .v-profil .t-ic{width:20px;height:20px;color:var(--cyan-txt);margin-top:4px} /* ---- Anlaufzeile über dem Knopf -------------------------------- Die linke Spalte endet früher als das Foto rechts; zwischen dem Vorspann und dem Knopf blieb Raum leer. Die Zeile füllt ihn und gibt dem Knopf einen Anlauf. */ /* Dieselben Werte wie die Hauptüberschrift, damit beide gleich gross erscheinen: clamp(1.7rem, 3.05vw, 2.6rem), Zeilenhöhe 1,12, Laufweite -0,04em, Stärke 700. */ #olten .v-anlauf{color:#fff;font-weight:700;letter-spacing:-.04em; line-height:1.12;font-size:clamp(1.7rem,3.05vw,2.6rem);margin:0 0 14px} /* Unter 1000 Pixeln mittig. Die feste Grösse von 2,6rem gilt im Eltern-Theme nur zwischen 700 und 1000 Pixeln — darunter greift die Formel, die für beide dieselbe ist. Ohne diese Eingrenzung stand die Anlaufzeile auf dem Handy mit 41,6 Pixeln neben einer 27,2 Pixel grossen Überschrift. */ @media (max-width:1000px){#olten .t-hero .v-anlauf{text-align:center}} @media (min-width:700px) and (max-width:1000px){ #olten .t-hero .v-anlauf{font-size:2.6rem} } /* Auf breiten Geräten ist die linke Spalte ein Flexbereich mit 26 Pixeln Abstand. Zusammen mit den Aussenabständen von Zeile und Knopf ergab das 57 Pixel. Hier zählt allein der Spaltenabstand. */ @media (min-width:1001px){ #olten .t-hero .v-anlauf{margin-bottom:0} #olten .t-hero .v-anlauf + .t-hero-cta{margin-top:0} } /* Auf schmalen Geräten setzt der Hero die Reihenfolge über `order`. Ohne eigene Angabe landete die Zeile auf 0 und damit vor der Überschrift — derselbe Fehler wie früher bei den Kapseln. */ @media (max-width:1000px){ #olten .t-hero .v-anlauf{order:5;margin-bottom:12px} #olten .t-hero .t-hero-cta{order:6} } /* ---- Aufgeklapptes Menü ---------------------------------------- Die Liste stand mittig im Fenster, dadurch blieb oben viel Raum leer. Sie beginnt jetzt weiter oben; das Logo schliesst unten ab und füllt den Raum, der sonst leer bliebe. */ #olten .t-mnav{justify-content:flex-start;padding-top:132px;padding-bottom:28px} #olten .t-mnav-fuss{margin-top:auto;padding-top:32px; display:flex;align-items:center;gap:10px;opacity:.9} #olten .t-mnav-fuss img{height:34px;width:auto} /* Die Wortmarke ist auf schmalen Geräten global ausgeblendet, damit sie in der Kopfzeile nicht mit dem Menüknopf kollidiert. Im aufgeklappten Menü ist Platz — hier wird sie wieder eingeblendet. */ #olten .t-mnav-fuss .v-wort{display:inline;color:#fff;font-weight:700; font-size:1.02rem;letter-spacing:-.01em} #olten .t-mnav-fuss .v-wort b{color:var(--cyan-lt);font-weight:700} @media (max-width:400px){#olten .t-mnav{padding-top:112px}} /* ---- „oder" zwischen den beiden Kontaktwegen ------------------- Ohne Trennwort standen zwei gleich grosse Knöpfe unmittelbar übereinander — das las sich wie ein Versehen statt wie eine Wahl. */ #olten .v-oder{display:block;text-align:center;color:#fff; font-size:.97rem;font-weight:600;margin:2px 0;align-self:center} /* ================ Umschalter auf schmalen Geräten ================ Diese Regel steht bewusst ganz am Ende des Stylesheets. Die Schriftskala weiter oben legt .m-achse .m-punkt b auf 0,97rem fest, mit höherem Gewicht als eine Regel für .m-punkt b. Jede frühere Einstellung der Grösse lief deshalb ins Leere, ohne dass etwas gemeldet wurde — die Schrift blieb bei 15,52 Pixeln. Die Grösse wächst mit der Breite. Abgetastet: Bei 320 Pixeln passt 0,58rem gerade (4 Pixel Reserve), bei 360 sind es 0,66 und bei 390 0,72. Die Obergrenze von 0,78 greift ab etwa 430 Pixeln. ================================================================= */ @media (max-width:760px){ #olten .m-achse .m-punkt, #olten .m-achse .m-punkt b, #olten .v-schalter .v-sb{ font-size:clamp(.58rem,2.9vw,.78rem);line-height:1.18;white-space:nowrap} } /* ============ Die Schriftskala aufräumen ========================== Gezählt: dreizehn verschiedene Grössen im Fliesstextbereich. Drei davon waren Fehler, nicht Absicht: 18,24 Hero-Vorspann → gehört auf die Stufe Vorspann (18,56) 15,36 Navigation → gehört auf die Stufe Klein (15,52) 14,72 „oder" → von mir gesetzt, ohne Stufe (15,52) Die übrigen Werte sind Rollen, keine Zufälle: 41,6 Überschrift · 30,4 Zwischenüberschrift · 21,76 das Zitat · 19,84 die Balkenwerte · 18,56 Vorspann · 17,44 Fliesstext · 15,52 Klein · 13,44 Mikro. 17,92 ist keine Schrift, sondern die Wortmarke im Logo. ================================================================= */ #olten .t-hero .t-sub{font-size:1.16rem} #olten #hdr nav a,#olten .t-mnav nav a{font-size:.97rem} /* Der Name in der Kontaktkarte steht auf derselben Stufe wie die Überschrift darüber — beide auf Vorspann, 1,16rem. Vorher lag er auf der Stufe „Klein". Diese Regel steht am Ende, weil die Schriftskala .v-name weiter oben auf 0,97rem setzt. */ #olten .v-kontakt .v-name{font-size:1.16rem} /* ---- Hero: Grösse, Verteilung, Schatten ------------------------ 1. „Klingt nach Dir?" stand auf der Stufe der Hauptüberschrift und wirkte dadurch wie eine zweite Überschrift. Jetzt eine Stufe tiefer — dieselbe wie die Zwischenüberschriften. Keine neue Grösse, die Skala bleibt bei acht. 2. Die Zeile wurde mit `margin-top:auto` nach unten geschoben. Der ganze Freiraum sammelte sich dadurch in einer Lücke zwischen Vorspann und Zeile. Mit `space-between` verteilt er sich gleichmässig auf die drei Zwischenräume; der Knopf bleibt unten und damit auf einer Linie mit den Kapseln. 3. Das Hero-Foto warf einen Schatten von 44 Pixeln Versatz und 100 Pixeln Unschärfe — er reichte 144 Pixel nach unten, die erste Kapselreihe liegt 24 Pixel darunter. Gemessen war sie dadurch um zwölf Blauwerte dunkler als die zweite. Auf dunklem Grund trägt der Schatten ohnehin wenig; die helle Kante bleibt. ----------------------------------------------------------------- */ #olten .v-anlauf{font-size:clamp(1.3rem,2.5vw,1.9rem);letter-spacing:-.02em} @media (min-width:700px) and (max-width:1000px){ #olten .t-hero .v-anlauf{font-size:1.9rem} } @media (min-width:1001px){ #olten .t-h-copy{justify-content:space-between} #olten .t-hero .v-anlauf{margin-top:0;margin-bottom:0} /* Der Vorspann trug zusätzlich 26 Pixel Aussenrand unten. Zusammen mit dem Spaltenabstand ergab das eine mittlere Lücke von 63 gegenüber 37 aussen. Ohne diesen Rand verteilt sich der Freiraum gleichmässig. */ #olten .t-hero .t-sub{margin-bottom:0} } #olten .t-h-photo .t-ph{box-shadow:0 0 0 1px rgba(255,255,255,.10)} /* Der Strich unter „Dir" läuft zwei Sekunden später los als der unter „Dich" in der Überschrift. So zieht er den Blick ein zweites Mal auf sich, wenn die Überschrift schon gelesen ist — und nicht gleichzeitig mit ihr. Die Dauer des Striches selbst bleibt unverändert. */ #olten .v-anlauf .v-strich{transition-delay:2s} /* „Klingt nach Dir?" steht jetzt als Schlusssatz im Absatz, nicht mehr als eigene Zeile darüber. Damit trägt es dieselbe Grösse wie der Absatz — es gibt keine eigene Regel mehr dafür. Der Strich unter „Dir" läuft weiterhin zwei Sekunden nach dem Strich in der Überschrift los. */ #olten .t-hero .t-sub .v-strich{transition-delay:2s} /* Der Knopf trug aus dem Grundsystem `margin-top:auto`. Zusammen mit `space-between` sammelte sich der gesamte Freiraum vor ihm — Lücken von 26 und 142 Pixeln statt zweier gleicher. Ohne den automatischen Rand verteilt `space-between` gleichmässig, und der Knopf bleibt trotzdem unten, weil er das letzte Element ist. */ @media (min-width:1001px){ #olten .t-hero .t-hero-cta{margin-top:0} } /* Der blaue Streifen zwischen Kopfzeile und Überschrift war geräteabhängig: 26 Pixel bei 390 Pixeln Breite, aber 104 bei 430 und 112 bei 834. Die Verkleinerung galt nur bis 400 Pixel, darüber griff wieder die volle Polsterung von 78 Pixeln. Jetzt auf allen Geräten unter 1000 Pixeln derselbe Wert. */ @media (max-width:1000px){ /* Zwei Polsterungen addierten sich: der Abschnitt und die Inhaltsspalte, je 26 Pixel. Der Gesamtwert steht jetzt an einer Stelle — und oben wie unten gleich. Vorher war auch der untere Abstand uneinheitlich: minus 6 Pixel bei 390 Breite, wo der Knopf unten aus dem Abschnitt herausragte, und 83 bei 430. */ #olten .t-hero{padding-top:0;padding-bottom:0} #olten .t-heroA{padding-top:48px;padding-bottom:48px} /* Der Knopf trug unten noch vier Pixel Rand aus dem Grundsystem — dadurch blieben unten 41 statt 48. */ #olten .t-hero .t-hero-cta{margin-bottom:0} } /* Die Häkchen und Kreuze sassen über der Mitte der ersten Textzeile — in der Gegenüberstellung drei Pixel, in den übrigen Listen einen. Der Wert ist keine Geschmacksfrage, sondern eine Rechnung: die halbe Differenz zwischen Zeilenhöhe und Symbolhöhe, also (29,4 − 18) ÷ 2 = 5,7 Pixel. Als Formel geschrieben stimmt sie auch dann noch, wenn sich die Schriftgrösse ändert. Der Selektor nennt die Klasse .t-ic, nicht das Element svg: Im Grundsystem setzt `#olten .n-sp .t-ic` drei Pixel, und zwei Klassen wiegen schwerer als eine Klasse mit zwei Elementen. Mein erster Versuch lief deshalb wirkungslos durch. */ #olten .n-sp li .t-ic, #olten .m-liste li .t-ic, #olten .v-profil li .t-ic{margin-top:calc((1.68em - 18px) / 2)} /* ---- Kapseln als Zweierraster auf jeder Breite ------------------ Bisher galt das Raster erst ab 1001 Pixeln. Auf dem iPad mit 834 flossen die Kapseln stattdessen und ergaben drei in der ersten und eine in der zweiten Reihe — das wirkt verschoben. Jetzt überall zwei mal zwei. */ #olten .t-hero .v-fakten{display:grid;grid-template-columns:1fr 1fr; gap:10px;justify-content:stretch} #olten .t-hero .v-fakten .v-fakt{width:auto;text-align:center; white-space:normal;justify-content:center} /* Im Zweierraster steht je Feld nur die halbe Breite zur Verfügung: bei 320 Pixeln rund 137, bei 390 rund 172. „planbare Arbeitszeiten" misst ungebrochen 169 Pixel bei 13,12 Pixeln Schrift. Nachgerechnet je Breite: bei 320 sind höchstens 9,39 Pixel möglich, bei 360 sind es 10,94, bei 430 sind es 13,02. Der Faktor 2,87vw bleibt überall darunter; die Untergrenze von 0,55rem greift erst unter 307 Pixeln. */ @media (max-width:700px){ #olten .t-hero .v-fakten .v-fakt{ font-size:clamp(.55rem,2.87vw,.82rem);padding:7px 7px} } /* ---- Gegenüberstellung: eine Karte je Reihe unter 1000 Pixeln --- Bei 834 standen beide Karten nebeneinander und waren je rund 290 Pixel breit — fast jede Zeile brach dadurch um. Bei 1024 waren es 477 und noch immer drei umbrechende Zeilen. Die Grenze liegt deshalb bei 1100, nicht bei 1000. */ @media (max-width:1100px){ #olten .n-zwei{grid-template-columns:1fr} } /* Die beiden Kontaktknöpfe stehen unter 1000 Pixeln untereinander und dehnten sich dabei über die ganze Kartenbreite: bei 768 und 834 waren sie 551 bis 556 Pixel breit. Auf dem Handy ist das richtig, dort misst die Karte nur 354. Ab 521 Pixeln bekommen sie eine feste Breite und stehen mittig. */ @media (min-width:521px) and (max-width:1000px){ #olten .v-cta{align-items:center} #olten .v-cta .t-btn{width:auto;min-width:340px} } /* ---- Aufgeklapptes Menü auf Tablets ---------------------------- Die Einträge klebten oben, das Logo unten am Fensterrand: bei 834 Pixeln Höhe klaffte dazwischen eine Lücke von 439 Pixeln. Auf dem Handy ist das richtig, dort ist der Platz knapp. Auf Tablets steht die Gruppe jetzt mittig, das Logo folgt in normalem Abstand, und die Einträge sind grösser. */ @media (min-width:601px) and (max-width:1000px){ #olten .t-mnav{justify-content:center;padding-top:96px;padding-bottom:96px} #olten .t-mnav nav{gap:6px} #olten .t-mnav nav a{font-size:1.42rem;padding:16px 8px} #olten .t-mnav-cta{font-size:1.12rem} #olten .t-mnav-fuss{margin-top:clamp(52px,7vh,92px);padding-top:0} #olten .t-mnav-fuss img{height:42px} #olten .t-mnav-fuss .v-wort{font-size:1.24rem} } /* ============ Rückseitenunschärfe nur dort, wo sie wirkt ========= Gemessen auf einem Handy: 64 Millisekunden je Bild beim Scrollen mit Unschärfe, 25 ohne — das Zweieinhalbfache. Die Ursache sind 48 Flächen, deren Hintergrund der Browser bei jedem Bild neu abtasten und weichzeichnen muss. Der Nutzen ist dabei fast überall null: Die Seite hat einen gleichmässigen hellen Verlauf als Grund. Weichzeichnen einer gleichmässigen Fläche ergibt dieselbe Fläche. Nachgemessen beträgt der Bildunterschied mit und ohne Unschärfe im Kachelbereich 0,88 von 765 — unsichtbar. Sie bleibt deshalb nur dort, wo sich tatsächlich etwas dahinter bewegt oder ein Foto liegt: · Kopfzeile — Inhalt scrollt darunter durch · aufgeklapptes Menü — liegt über der Seite · Galerie-Lupe — liegt über der Seite · Bildbeschriftungen — liegen auf Fotos ================================================================= */ #olten .glas, #olten .glas-blau, #olten .t-tile, #olten .v-schalter, #olten .m-achse, #olten .t-panel, #olten .t-contact, #olten .t-calc, #olten .t-btn-ghost, #olten .t-netz-medien, #olten .t-prax-map, #olten .t-band-dark .t-gal{ -webkit-backdrop-filter:none;backdrop-filter:none} /* Geprüft und wieder verworfen: `content-visibility:auto` auf den Abschnitten halbierte die Bildzeit auf dem Handy von 52,7 auf 23,6 Millisekunden — verfälschte aber die Seitenhöhe von 21'143 auf 14'529 Pixel, weil ungezeichnete Abschnitte nur geschätzt werden. Die Folge: Der Sprung auf die Kontaktkarte landete 6806 Pixel daneben. Ein funktionierender Knopf wiegt schwerer als eine flüssigere Bildfolge. */ /* ============ Kopfzeile behält ihre Höhe ======================== Die Leiste schrumpfte beim Scrollen von 92 auf 74 Pixel, das Logo von 50 auf 40. Sie steht aber im Textfluss (position:sticky), also zog jede Höhenänderung die ganze Seite mit: Der Abschnitt „Direkt bei uns" sass ganz oben bei 793 Pixeln, gescrollt bei 775. Die Seite sprang damit bei jedem Scrollbeginn um 18 Pixel — und beim Zurückscrollen wieder zurück. Weil die Änderung über 0,3 Sekunden lief, war es kein Sprung, sondern ein Rutschen. Die Höhe bleibt jetzt fest. Der Wechsel beim Scrollen bleibt sichtbar, nur eben über Hintergrund, Trennlinie und Schatten — nicht mehr über die Grösse. ================================================================= */ #olten header.t-scrolled .t-hd{height:92px} #olten header.t-scrolled .t-logo img{height:50px} #olten .t-hd,#olten .t-logo img{transition:none} /* Unter 1000 Pixeln setzen zwei Regelblöcke nacheinander die Höhe; massgebend ist der zweite mit 72 Pixeln. Mein erster Versuch mit 64 liess deshalb bei 390 Pixeln acht Pixel Rutschen übrig. */ @media (max-width:1000px){ #olten header.t-scrolled .t-hd{height:72px} #olten header.t-scrolled .t-logo img{height:40px} } /* =================================================================== Ergänzungen für den Olten-Prototyp. Alles darüber steht unverändert so, wie es in swisshausarzt-child 1.6.9 ausgeliefert wird. =================================================================== */ /* ---------- Kopfzeile: Querfassung des Olten-Logos ---------- */ #olten .t-logo img{height:46px;width:auto} #olten header.t-scrolled .t-logo img{height:38px} #olten .t-mnav-fuss img{height:38px;width:auto} @media (max-width:1000px){#olten .t-logo img{height:38px} #olten header.t-scrolled .t-logo img{height:33px}} @media (max-width:560px){#olten .t-logo img{height:32px} #olten header.t-scrolled .t-logo img{height:29px}} /* ---------- Seitenkopf der Unterseiten (weiss, kein blaues Band) ---------- */ #olten .o-seitenkopf{padding:clamp(46px,3rem + 2.4vw,86px) 0 clamp(30px,2rem + 1.6vw,52px)} #olten .o-seitenkopf h1{font-size:clamp(2rem,1.2rem + 2.6vw,3.1rem);margin-bottom:18px} /* Die Haarlinie zentriert das Grundsystem bereits über margin:auto. Eine zusätzliche Verschiebung hätte sie um 40 px nach links gezogen. */ /* ---------- Startseite: Leistungskacheln, nur Titel ---------- */ #olten .o-lkachel{display:flex;flex-direction:column;padding:0;overflow:hidden;text-decoration:none;color:inherit} #olten .o-lkachel:hover{text-decoration:none} #olten .o-lkachel .t-ph{border-radius:0} #olten .o-lkachel img{width:100%;height:100%;object-fit:cover} #olten .o-lkachel-b{padding:22px 24px 24px;display:flex;flex-direction:column;align-items:flex-start;gap:2px;flex:1} #olten .o-lkachel-b .t-ibox{margin-bottom:12px} #olten .o-lkachel h3{margin:0 0 12px;font-size:1.16rem} #olten .o-mehr{margin-top:auto;display:inline-flex;align-items:center;gap:8px; font-size:.95rem;font-weight:650;color:var(--cyan-txt)} #olten .o-mehr .t-ic{width:18px;height:18px;transition:transform .3s var(--ease)} #olten .o-lkachel:hover .o-mehr .t-ic{transform:translateX(4px)} /* ---------- Zeile mit einem einzelnen Knopf ---------- */ #olten .o-mehrzeile{margin-top:clamp(30px,3vw,44px);display:flex;justify-content:center} /* ---------- Kontaktkacheln ---------- */ #olten .o-kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px} #olten .o-kachel{display:flex;align-items:center;gap:13px;padding:16px 18px;text-decoration:none} #olten .o-kachel .t-ic{color:var(--cyan-txt);flex:0 0 auto} #olten .o-kachel span{font-size:.9rem;line-height:1.4;color:var(--body)} #olten .o-kachel b{display:block;font-weight:650;color:var(--ink);font-size:.99rem} #olten .o-kachel:hover{text-decoration:none} /* ---------- Symbol und Titel auf einer Linie (Leistungen) ---------- */ #olten .o-titelzeile{display:flex;align-items:center;gap:16px;margin-bottom:16px} #olten .o-titelzeile .t-ibox{margin-bottom:0;flex:0 0 auto} #olten .o-titelzeile h3{margin:0} #olten .o-titelzeile h2{margin:0;font-size:clamp(1.28rem,1rem + .95vw,1.72rem);line-height:1.14} /* ---------- Personen ---------- */ #olten .o-sprachen{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px} #olten .o-sprachen span{font-size:.8rem;font-weight:650;padding:4px 10px;border-radius:var(--r-chip); background:rgba(0,158,227,.10);color:var(--cyan-txt)} /* Platzhalter für fehlende Porträts. Statt Schraffur eine ruhige Fläche in den Markentönen mit angedeuteter Silhouette — sie soll wie ein noch leerer Rahmen wirken, nicht wie eine Baustelle. */ #olten .o-kein-foto{aspect-ratio:3/2;border-radius:var(--r-lg); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px; background:linear-gradient(180deg,#F4F8FB 0%,#E7EFF6 100%); box-shadow:inset 0 0 0 1px rgba(0,64,94,.10); color:var(--cyan-txt);font-size:.78rem;font-weight:700;letter-spacing:.14em; text-transform:uppercase;text-align:center;padding:16px} #olten .o-kein-foto::before{content:"";width:clamp(38px,22%,58px);aspect-ratio:1/1; background:currentColor;opacity:.28; -webkit-mask:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.4' r='4'/%3E%3Cpath d='M4.4 20.5a7.6 7.6 0 0 1 15.2 0'/%3E%3C/svg%3E"); mask:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.4' r='4'/%3E%3Cpath d='M4.4 20.5a7.6 7.6 0 0 1 15.2 0'/%3E%3C/svg%3E")} /* ---------- Praxisassistenz: vier in einer Reihe, kleiner ---------- */ #olten .o-mpa{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,26px); max-width:900px;margin:0 auto} #olten .o-mpa-k{margin:0;text-align:center} #olten .o-mpa-k .t-ph{border-radius:var(--r-lg);margin-bottom:14px} #olten .o-mpa-k img{width:100%;height:100%;object-fit:cover} #olten .o-mpa-k figcaption b{display:block;font-weight:650;color:var(--ink);font-size:1rem} #olten .o-mpa-k figcaption span{display:block;font-size:.88rem;color:var(--cyan-txt);font-weight:600;margin-top:2px} @media (max-width:700px){#olten .o-mpa{grid-template-columns:repeat(2,1fr)}} /* ---------- Anfahrt: Karte links, Bild mit Text rechts ---------- */ #olten .o-anfahrt{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(20px,2.4vw,32px);align-items:stretch} #olten .o-anfahrt-karte{border-radius:var(--r-lg);overflow:hidden;min-height:100%} #olten .o-anfahrt-karte iframe{width:100%;height:100%;min-height:430px;border:0;display:block} #olten .o-anfahrt-bild{margin:0;display:flex;flex-direction:column} #olten .o-anfahrt-bild img{width:100%;height:100%;object-fit:cover} #olten .o-anfahrt-bild figcaption{padding-top:18px;display:flex;flex-direction:column; align-items:flex-start;gap:8px;flex:1} #olten .o-anfahrt-bild figcaption strong{font-size:1.1rem;font-weight:650;color:var(--ink)} #olten .o-anfahrt-bild figcaption span{color:var(--body);font-size:1rem;line-height:1.6} #olten .o-anfahrt-bild figcaption .t-btn{margin-top:auto} @media (max-width:860px){ #olten .o-anfahrt{grid-template-columns:1fr} #olten .o-anfahrt-karte iframe{min-height:300px} #olten .o-anfahrt-bild figcaption .t-btn{margin-top:14px} } /* ---------- Neupatienten, Fassung A: Merkmalsliste mit Symbolen ---------- */ #olten .o-schritte{list-style:none;display:grid;gap:0;margin:0;padding:0} #olten .o-schritte li{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start; padding:26px 0;border-top:1px solid var(--line)} #olten .o-schritte li:first-child{padding-top:0;border-top:0} #olten .o-schritte li:last-child{padding-bottom:0} #olten .o-schritte .t-ibox{margin-bottom:0;width:46px;height:46px;border-radius:13px} #olten .o-schritte .t-ibox .t-ic{width:23px;height:23px} #olten .o-schritte h3, #olten .o-schritte h2{margin:0 0 6px;font-size:1.2rem;line-height:1.26;letter-spacing:-.01em} #olten .o-schritte p{margin:0} @media (max-width:560px){#olten .o-schritte li{grid-template-columns:1fr;gap:12px}} /* ---------- Neupatienten, Fassung B: Begriffsliste ---------- */ #olten .o-dl{margin:0;display:grid;gap:0} #olten .o-dz{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(16px,3vw,44px); padding:26px 0;border-top:1px solid var(--line)} #olten .o-dz:first-child{border-top:0;padding-top:0} #olten .o-dl dt{font-weight:650;color:var(--ink);font-size:1.12rem;letter-spacing:-.02em;line-height:1.3} #olten .o-dl dd{margin:0;color:var(--body)} @media (max-width:700px){#olten .o-dz{grid-template-columns:1fr;gap:8px}} /* ---------- Neupatienten, Fassung C: Fliesstext mit Randspalte ---------- */ #olten .o-zweispalt{display:grid;grid-template-columns:1.5fr .8fr;gap:clamp(28px,4vw,56px);align-items:start} #olten .o-fliess h3{margin:30px 0 8px;font-size:1.16rem} #olten .o-fliess h3:first-child{margin-top:0} #olten .o-fliess p{margin:0 0 4px} #olten .o-rand{padding:26px 24px;position:sticky;top:120px} #olten .o-rand h3{margin:0 0 16px;font-size:1.04rem} #olten .o-haken{list-style:none;display:grid;gap:12px;margin:0 0 22px;padding:0} #olten .o-haken li{display:flex;gap:10px;align-items:flex-start;font-size:.96rem;line-height:1.45} #olten .o-haken .t-ic{width:19px;height:19px;color:var(--cyan);flex:0 0 auto;margin-top:2px} @media (max-width:860px){#olten .o-zweispalt{grid-template-columns:1fr} #olten .o-rand{position:static}} /* ---------- Formular-Platzhalter ---------- */ #olten .t-fplatz{border:2px dashed var(--cyan);border-radius:var(--r-md);padding:34px 24px; text-align:center;background:rgba(0,158,227,.06)} #olten .t-fplatz b{display:block;font-size:1.05rem;color:var(--petrol);margin-bottom:6px} #olten .t-fplatz code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9rem; background:#fff;border:1px solid var(--line);border-radius:8px;padding:4px 8px; display:inline-block;margin-top:10px} /* ---------- Fusszeile ---------- */ #olten .v-fuss{padding:clamp(48px,6vw,74px) 0 26px} #olten .o-fuss{display:grid;grid-template-columns:1.6fr 1fr 1.1fr 1fr .8fr; gap:clamp(22px,3vw,44px);align-items:start} #olten .v-fuss .o-fuss-marke img{width:auto;height:44px;margin:0 0 16px} #olten .o-fuss h3{font-size:.82rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase; color:#7FD2F3;margin:0 0 14px} #olten .o-fuss p{font-size:.97rem;font-weight:400;line-height:1.62;margin:0;color:#D6E8F2} #olten .o-fuss-marke p{max-width:34ch} #olten .v-fuss .o-fuss a{display:block;font-size:.97rem;font-weight:400;color:#D6E8F2; margin:0 0 9px;min-height:0;line-height:1.55} #olten .v-fuss .o-fuss a:last-child{margin-bottom:0} #olten .v-fuss .o-fuss a:hover{color:#fff;text-decoration:underline} #olten .o-fuss-ende{margin-top:clamp(34px,4vw,50px);padding-top:22px; border-top:1px solid rgba(255,255,255,.22);display:flex;flex-wrap:wrap;gap:12px 26px; justify-content:space-between;font-size:.9rem;color:#B9D3E2} #olten .v-fuss .o-fuss-ende a{display:inline;color:#B9D3E2;margin:0 0 0 22px;font-size:.9rem} #olten .v-fuss .o-fuss-ende a:first-child{margin-left:0} @media (max-width:1100px){#olten .o-fuss{grid-template-columns:1fr 1fr 1fr} #olten .o-fuss-marke{grid-column:1 / -1}} @media (max-width:620px){#olten .o-fuss{grid-template-columns:1fr 1fr}} /* ---------- Schluss-Block: zwei Knöpfe nebeneinander ---------- */ #olten .v-kontakt .v-cta .t-btn-outline{background:rgba(255,255,255,.10);color:#fff; border-color:rgba(255,255,255,.55)} #olten .v-kontakt .v-cta .t-btn-outline:hover{background:rgba(255,255,255,.20);border-color:#fff} #olten .v-kontakt .v-name{opacity:.86;font-size:.98rem} /* =================================================================== DESIGNDURCHGANG — Materialien, Radien, Typografie, Zustände Grundsatz: Glas braucht einen Untergrund. Auf reinweissem Grund hat eine Glasfläche nichts zu brechen und sieht aus wie ein weisser Kasten mit Rand. Deshalb bekommen die hellen Bänder eine sehr zurückhaltende Tönung, aus der das Glas etwas aufnehmen kann. =================================================================== */ /* --- Bänder bleiben flach ------------------------------------------ Ein getönter Verlauf hinter den Abschnitten wurde verworfen. Die hellen Bänder sind reinweiss, der Seitengrund bleibt #EFF5F9 wie in swisshausarzt. Das Glas holt sich seine Wirkung damit aus dem eigenen Material, nicht aus dem Untergrund. */ #olten .t-band-light{background:transparent} /* --- Glas: Lichtkante oben, Tiefe unten, mehr Sättigung ------------ */ #olten .glas{ backdrop-filter:blur(18px) saturate(180%); -webkit-backdrop-filter:blur(18px) saturate(180%); background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.68)); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(255,255,255,.55), 0 1px 2px rgba(12,38,50,.05), 0 12px 30px -12px rgba(0,64,94,.20); transition:transform .42s var(--ease), box-shadow .42s var(--ease), background-color .3s var(--ease)} #olten .glas:hover{ box-shadow: inset 0 1px 0 rgba(255,255,255,.98), inset 0 0 0 1px rgba(0,158,227,.22), 0 2px 4px rgba(12,38,50,.05), 0 26px 52px -18px rgba(0,64,94,.30)} /* Druckzustand: kurz und knapp, wie ein echter Knopf. */ #olten a.glas:active,#olten button.glas:active{transform:translateY(0) scale(.992); transition-duration:.09s} /* --- Konzentrische Radien ----------------------------------------- Innenradius = Aussenradius minus Innenabstand. Sonst wirkt die innere Ecke eckiger als die äussere, obwohl sie enger ist. */ #olten .glas{border-radius:var(--r-lg)} #olten .glas .t-ibox{border-radius:14px} #olten .o-lkachel{border-radius:var(--r-lg);overflow:hidden} #olten .o-lkachel .t-ph{border-radius:0} #olten .t-prax-c{border-radius:var(--r-lg)} #olten .v-kontakt{border-radius:var(--r-xl)} /* --- Symbolflächen: Glyph auf 44 % der Fläche ---------------------- */ #olten .t-ibox{width:52px;height:52px;display:grid;place-items:center} #olten .t-ibox .t-ic{width:23px;height:23px;stroke-width:1.65} /* --- Typografie ---------------------------------------------------- */ #olten h1{letter-spacing:-.032em;text-wrap:balance} #olten h2{letter-spacing:-.028em;text-wrap:balance} #olten h3{letter-spacing:-.018em;text-wrap:balance} #olten p,#olten li,#olten dd{text-wrap:pretty} #olten .t-lede{line-height:1.58;letter-spacing:-.006em} #olten .t-role{letter-spacing:.002em} /* Zahlen in Adressen und Zeiten laufen sonst unterschiedlich breit. */ #olten address,#olten .o-kachel span,#olten .v-name,#olten .o-fuss p{ font-variant-numeric:tabular-nums} /* --- Raster mit zentrierter letzter Zeile -------------------------- Sieben oder acht Kacheln ergeben in einem starren Dreierraster eine angebrochene Schlusszeile, die links klebt. Flex mit fester Spalten- breite zentriert sie stattdessen. */ #olten .o-flexraster{display:flex;flex-wrap:wrap;justify-content:center;gap:22px} #olten .o-flexraster > *{flex:0 1 calc((100% - 44px) / 3);min-width:0} @media (max-width:980px){#olten .o-flexraster > *{flex:0 1 calc((100% - 22px) / 2)}} @media (max-width:640px){#olten .o-flexraster > *{flex:1 1 100%}} /* --- Bildplatzhalter, solange ein Foto fehlt ----------------------- */ #olten .o-kein-bild{aspect-ratio:3/2;display:grid;place-items:center; background:linear-gradient(180deg,#F4F8FB 0%,#E7EFF6 100%); box-shadow:inset 0 0 0 1px rgba(0,64,94,.10); color:var(--cyan-txt);font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase} #olten .t-doc-media > .o-kein-bild{border-radius:var(--r-lg)} /* --- Fokus: überall sichtbar, nie unterdrückt ---------------------- */ #olten a:focus-visible,#olten button:focus-visible{ outline:3px solid var(--cyan);outline-offset:3px;border-radius:6px} #olten .glas:focus-visible{outline-offset:4px;border-radius:var(--r-lg)} /* --- Bewegung nur, wenn gewünscht ---------------------------------- */ @media (prefers-reduced-motion:reduce){ #olten *,#olten *::before,#olten *::after{ animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;scroll-behavior:auto!important} #olten.t-js .t-rv{opacity:1;transform:none} } /* --- Rechtsseiten: Lesebreite und Inhaltsverzeichnis --------------- */ #olten .t-legal-body{max-width:72ch} #olten .t-legal-body h2{font-size:clamp(1.2rem,1rem + .7vw,1.5rem);margin:38px 0 12px} #olten .t-legal-body h2:first-child{margin-top:0} #olten .t-legal-body ul{margin:0 0 16px 22px;list-style:disc} #olten .t-legal-body li{margin-bottom:7px;display:list-item} /* =================================================================== LESBARKEIT AUF DUNKLEM GRUND Regel: Schrift ist schwarz oder weiss, nie eine Graustufe. Das swisshausarzt-CSS setzt auf dunklen Flächen getönte Blaugraus (#D6E8F2, #B9D3E2, #EDF5FA). Auf einer Fläche mit viel Glas und Verlauf verlieren die zu viel. Hier wird alles auf Weiss gezogen; Hierarchie entsteht über Grösse, Gewicht und Laufweite. =================================================================== */ /* --- Dunkles Band ---------------------------------------------------- */ #olten .t-band-dark p, #olten .t-band-dark li, #olten .t-band-dark .t-lede, #olten .t-band-dark address, #olten .t-band-dark span{color:#FFFFFF} #olten .t-band-dark .t-kicker{color:#7FD2F3} #olten .t-band-dark .t-gal figcaption{color:#FFFFFF} /* --- Hero ------------------------------------------------------------ */ #olten .t-hero .t-sub, #olten .t-hero p, #olten .t-hero span{color:#FFFFFF} /* --- Schluss-Karte --------------------------------------------------- */ #olten .v-kontakt h3, #olten .v-kontakt p, #olten .v-kontakt .v-name{color:#FFFFFF} #olten .v-kontakt .v-name{opacity:1;font-weight:600} #olten .v-oder{color:#FFFFFF} /* --- Mobilmenü -------------------------------------------------------- */ #olten .t-mnav nav a,#olten .t-mnav p,#olten .t-mnav span{color:#FFFFFF} /* --- Fusszeile: alles weiss ------------------------------------------ */ #olten .v-fuss, #olten .v-fuss p, #olten .v-fuss span, #olten .v-fuss address, #olten .o-fuss p, #olten .v-fuss .o-fuss a, #olten .o-fuss-ende, #olten .v-fuss .o-fuss-ende a{color:#FFFFFF} /* Die Spaltentitel unterscheiden sich durch Grösse, Laufweite und Gewicht — nicht durch eine schwächere Farbe. */ #olten .o-fuss h3{color:#FFFFFF;font-size:.78rem;font-weight:700; letter-spacing:.12em;text-transform:uppercase;margin:0 0 16px;opacity:1} #olten .v-fuss .o-fuss a:hover,#olten .v-fuss .o-fuss-ende a:hover{ color:#FFFFFF;text-decoration:underline;text-underline-offset:3px} #olten .o-fuss-ende{border-top-color:rgba(255,255,255,.34)} /* Kontaktspalte breiter, damit die Mailadresse nicht mitten im Wort umbricht. Zusätzlich bricht sie nur an sinnvollen Stellen. */ #olten .o-fuss{grid-template-columns:1.45fr .95fr 1.35fr .95fr .8fr} #olten .v-fuss .o-fuss a{overflow-wrap:normal;word-break:normal;hyphens:none} @media (max-width:1100px){#olten .o-fuss{grid-template-columns:1fr 1fr 1fr} #olten .o-fuss-marke{grid-column:1 / -1}} @media (max-width:620px){#olten .o-fuss{grid-template-columns:1fr 1fr}} /* =================================================================== MEHR TIEFE — Vergleichsfassungen Die Seite wirkte durchgehend zu hell. Drei Wege, gebaut als index-dunkel-a / -b / -c. Sobald einer gewählt ist, fliegt der Rest samt dieser Körperklassen wieder heraus. =================================================================== */ /* Reihenfolge-Korrektur: Der Designdurchgang weiter oben setzt .glas neu und stünde damit vor .glas-blau. Hier wird das blaue Glas zurückgeholt — sonst wäre es wieder weiss. */ #olten .glas.glas-blau{ background:linear-gradient(152deg,rgba(0,97,140,.93),rgba(0,64,94,.91)); -webkit-backdrop-filter:blur(30px) saturate(190%); backdrop-filter:blur(30px) saturate(190%); box-shadow: 0 0 0 1px rgba(0,20,32,.22), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.10), 0 1px 2px rgba(0,20,32,.08), 0 6px 12px rgba(0,20,32,.10), 0 16px 30px rgba(0,20,32,.13), 0 30px 58px rgba(0,20,32,.17)} #olten .glas.glas-blau:hover{ box-shadow: 0 0 0 1px rgba(0,158,227,.42), inset 0 1.5px 0 rgba(255,255,255,.6), 0 2px 4px rgba(0,20,32,.12), 0 18px 34px rgba(0,20,32,.16), 0 40px 76px rgba(0,20,32,.20)} #olten .glas-blau, #olten .glas-blau h3,#olten .glas-blau p,#olten .glas-blau b, #olten .glas-blau span,#olten .glas-blau li{color:#FFFFFF} /* Symbolfläche auf blauem Glas: die Akzentfarbe trägt hier nicht mehr, sie liegt zu nah am Grund. Weisses Glyph auf durchscheinendem Weiss. */ #olten .glas-blau .t-ibox{background:rgba(255,255,255,.16);color:#FFFFFF} /* Fassung C: tieferer Seitengrund. Der Grund liegt NICHT auf #olten, sondern auf dessen ::before — dort sitzt der Temperaturverlauf des Grundsystems. Ein background auf #olten selbst bliebe unsichtbar. Deshalb wird hier ausschliesslich die Farbe des Verlaufs vertieft, Position und Ebene bleiben unangetastet. */ #olten::before{ background:linear-gradient(180deg,#FDFEFF 0%,#F5F9FC 44%,#E9F1F7 100%)} /* Die Körnung darf etwas kräftiger werden, sonst wirkt der tiefere Grund flacher als der helle. */ #olten::after{opacity:.055} /* Fassung B: Vorteile als dunkles Band — dort steht helles Glas auf dunklem Grund, also genau umgekehrt zu Fassung A. */ /* =================================================================== LESBARKEIT Die Patientenschaft ist zu einem erheblichen Teil über 60. Deshalb: grössere Grundschrift, kräftigere Strichstärke, schwarzer Text, weniger enge Laufweite. Alle Werte sind gegen den vertieften Grund (#E3ECF3) gemessen, nicht gegen Weiss. =================================================================== */ /* --- Farben: schwarz heisst schwarz -------------------------------- */ #olten{ --ink:#000000; --body:#000000; /* Markenblau für Text von #005F89 auf #00506F: auf dem vertieften Grund stieg der Kontrast damit von 5,86 auf 7,39. Die Fläche in Markencyan #009EE3 bleibt unverändert — sie trägt keinen Text. */ --cyan-txt:#00506F; --line:rgba(0,0,0,.14); --line-soft:rgba(0,0,0,.08); } /* --- Grundschrift: 17,5 auf 19 Pixel, Zeilenabstand knapp erhöht --- */ #olten{font-size:19px;line-height:1.66;font-weight:450} #olten p,#olten li,#olten dd,#olten address{font-weight:450} /* --- Überschriften: kräftiger, Laufweite entspannt ------------------ Sehr enge Laufweite spart Platz, kostet aber genau die Trennschärfe zwischen den Buchstaben, die beim Lesen mit nachlassender Sehschärfe zuerst fehlt. Von -.032em auf -.018em. */ /* Untergrenze deutlich gesenkt. Deutsche Komposita wie „Hausärztinnen" oder „Verkehrsmedizinische" sind lang; bei 2,25 rem passte auf einem schmalen Schirm ein Wort je Zeile. Zusätzlich darf getrennt werden, bevor ein Wort über den Rand läuft. */ #olten h1{font-weight:700;letter-spacing:-.018em; font-size:clamp(1.72rem,1.05rem + 2.7vw,3.4rem);line-height:1.12} #olten h2{font-weight:700;letter-spacing:-.016em; font-size:clamp(1.44rem,1rem + 1.9vw,2.5rem);line-height:1.16} #olten h3{font-weight:700;letter-spacing:-.01em; font-size:clamp(1.14rem,.98rem + .55vw,1.4rem);line-height:1.26} /* Trennung nur als Notbremse: hyphens:auto setzte Trennstriche auch dann, wenn genug Platz war — «Hausärztin-nen» mitten in der Zeile. overflow-wrap greift erst, wenn ein Wort sonst über den Rand liefe. */ #olten h1,#olten h2,#olten h3,#olten h4{ overflow-wrap:break-word;hyphens:manual;-webkit-hyphens:manual} /* Auf sehr schmalen Geräten zusätzlich zurücknehmen und die Ausgleichsumbrüche abschalten — dort kostet balance mehr Zeilen. */ @media (max-width:520px){ #olten h1{font-size:1.62rem;text-wrap:pretty} #olten h2{font-size:1.36rem;text-wrap:pretty} #olten .t-hero .t-sub{font-size:1.06rem} } #olten .o-titelzeile h2{font-size:clamp(1.4rem,1.05rem + 1vw,1.85rem)} /* --- Einleitungssätze ---------------------------------------------- */ #olten .t-lede{font-size:clamp(1.14rem,1.02rem + .48vw,1.36rem); line-height:1.56;font-weight:450;letter-spacing:0} #olten .t-hero .t-sub{font-size:clamp(1.16rem,1rem + .6vw,1.3rem); line-height:1.56;font-weight:450} /* --- Bedienelemente: grösser und fetter ---------------------------- */ #olten .t-btn{font-size:1.06rem;font-weight:650;padding:16px 32px} #olten .t-btn-sm{font-size:1rem;padding:13px 24px} #olten #hdr nav a{font-size:1.03rem;font-weight:550} #olten #hdr nav a[aria-current="page"]{font-weight:700} #olten .t-mnav nav a{font-size:1.7rem;font-weight:650} /* --- Kleinteile, die zuvor unter 15 Pixel lagen -------------------- */ #olten .t-kicker{font-size:.88rem;font-weight:700;letter-spacing:.1em} #olten .t-role{font-size:1.02rem;font-weight:650} #olten .o-sprachen span{font-size:.9rem;font-weight:700;padding:5px 12px} #olten .o-kachel b{font-size:1.06rem;font-weight:700} #olten .o-kachel span{font-size:1rem;font-weight:450} #olten .o-mehr{font-size:1.02rem;font-weight:700} #olten .t-gal figcaption{font-size:1.04rem;font-weight:650} #olten .t-prax-kt{font-size:.92rem;font-weight:700} #olten .t-prax-adr,#olten .t-prax-web{font-size:1.02rem;font-weight:500} #olten .o-mpa-k figcaption b{font-size:1.06rem;font-weight:700} #olten .o-mpa-k figcaption span{font-size:.96rem;font-weight:600} #olten .o-schritte h3{font-size:1.2rem} #olten .t-legal-body{font-size:1.05rem} #olten .t-legal-body li{margin-bottom:9px} /* --- Fusszeile ----------------------------------------------------- */ #olten .o-fuss p,#olten .v-fuss .o-fuss a{font-size:1.04rem;font-weight:450;line-height:1.6} #olten .o-fuss h3{font-size:.84rem;font-weight:700;letter-spacing:.12em} #olten .o-fuss-ende,#olten .v-fuss .o-fuss-ende a{font-size:.96rem;font-weight:450} /* --- Schluss-Karte -------------------------------------------------- */ #olten .v-kontakt p{font-size:1.1rem;font-weight:450} #olten .v-kontakt .v-name{font-size:1.06rem;font-weight:650} /* --- Blaues Glas: weisse Schrift braucht etwas mehr Gewicht --------- */ #olten .glas-blau h3{font-weight:700} #olten .glas-blau p{font-weight:500} /* --- Klickflächen: nie unter 44 Pixel ------------------------------ */ #olten a,#olten button{min-height:0} #olten .t-btn,#olten .o-kachel,#olten .t-prax-c,#olten #hdr nav a{min-height:44px} #olten #hdr nav a{display:inline-flex;align-items:center} /* --- Sehr grosse Schriftvorgabe im Betriebssystem ------------------- */ @media (min-resolution:1x){ #olten .t-wrap{padding-left:max(24px,env(safe-area-inset-left)); padding-right:max(24px,env(safe-area-inset-right))} } /* =================================================================== KACHELN ZENTRIERT — Symbol, Titel und Text auf einer Mittelachse Gilt für die Kachelraster. Fliesstext in den Leistungszeilen, auf den Rechtsseiten und in der Merkmalsliste der Neupatientenseite bleibt linksbündig: mehrzeiliger zentrierter Fliesstext hat an jedem Zeilenanfang eine andere Einstiegskante und ist genau für die Zielgruppe schwerer zu lesen, für die wir eben vergrössert haben. =================================================================== */ /* --- Leistungskacheln auf der Startseite --------------------------- */ #olten .o-lkachel-b{align-items:center;text-align:center} #olten .o-lkachel-b .t-ibox{margin-left:auto;margin-right:auto} #olten .o-lkachel h3{text-align:center} #olten .o-mehr{justify-content:center;width:100%} /* --- Kontaktkacheln: Symbol über den Text -------------------------- */ #olten .o-kachel{flex-direction:column;text-align:center;gap:10px;padding:22px 18px} #olten .o-kachel .t-ic{width:26px;height:26px} /* --- Vorteilskarten sind über .t-tile-c bereits zentriert ---------- */ #olten .t-tile-c .t-ibox{margin-left:auto;margin-right:auto} /* =================================================================== KOPFZEILE ALS LIQUID GLASS Das Grundsystem legt eine getönte Fläche mit Unschärfe darüber. Was fehlt, ist das, was Glas als Glas lesbar macht: eine Lichtkante an der Oberseite, eine Brechungslinie an der Unterkante und ein Verhalten, das sich beim Scrollen ändert. Oben auf der Seite bleibt die Leiste offen und randlos; erst wenn Inhalt darunter durchläuft, verdichtet sie sich und setzt eine Trennlinie. =================================================================== */ #olten header#hdr{ background:linear-gradient(180deg,rgba(255,255,255,.58),rgba(255,255,255,.44)); -webkit-backdrop-filter:blur(26px) saturate(190%); backdrop-filter:blur(26px) saturate(190%); border-bottom:0; box-shadow:inset 0 1px 0 rgba(255,255,255,.85); transition:background .45s var(--ease), box-shadow .45s var(--ease), backdrop-filter .45s var(--ease)} /* Sobald Inhalt darunter läuft: dichter, mit Brechungslinie und einem sehr weichen Schlagschatten, der die Leiste vom Inhalt abhebt. */ #olten header#hdr.t-scrolled{ background:linear-gradient(180deg,rgba(255,255,255,.80),rgba(255,255,255,.68)); -webkit-backdrop-filter:blur(34px) saturate(200%); backdrop-filter:blur(34px) saturate(200%); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(0,64,94,.10), 0 12px 34px -16px rgba(0,64,94,.30)} /* Brechungssaum: ein sehr schmaler Verlauf direkt unter der Leiste. Er gehört nicht zur Fläche, sondern liegt darunter — dadurch wirkt die Kante wie eine Materialstärke und nicht wie ein Strich. */ #olten header#hdr::after{ content:"";position:absolute;left:0;right:0;bottom:-14px;height:14px; pointer-events:none;opacity:0;transition:opacity .45s var(--ease); background:linear-gradient(180deg,rgba(0,64,94,.07),transparent)} #olten header#hdr.t-scrolled::after{opacity:1} /* Das Logo im Glas: eine Spur mehr Zeichnung, damit es nicht in der Milchglasfläche versinkt. */ #olten .t-logo img{filter:saturate(1.06) contrast(1.03)} /* Menüpunkte bekommen beim Überfahren eine eigene kleine Glasfläche statt nur der Unterstreichung. Die Unterstreichung bleibt. */ /* Keine Fläche hinter den Menüpunkten. Der aktive Punkt und der Überfahrzustand zeigen sich allein über die Unterstreichung und das Schriftgewicht — eine gefüllte Pille im Glas wirkte wie ein zweites Bedienelement. */ #olten #hdr nav a{padding:8px 2px;border-radius:0;background:none; transition:color .3s var(--ease)} #olten #hdr nav a:hover, #olten #hdr nav a[aria-current="page"]{background:none} #olten #hdr nav a::after{left:0;right:100%} #olten #hdr nav a:hover::after, #olten #hdr nav a[aria-current="page"]::after{right:0} /* Der Knopf in der Kopfzeile ist das einzige gefüllte Element dort — er darf einen Hauch Tiefe tragen, damit er auf dem Glas steht. */ #olten header#hdr .t-btn-solid{ box-shadow:0 1px 2px rgba(0,64,94,.18), 0 8px 18px -8px rgba(0,64,94,.45)} /* Auf schmalen Geräten kostet doppelte Unschärfe zu viel. */ @media (max-width:760px){ #olten header#hdr{-webkit-backdrop-filter:blur(20px) saturate(180%); backdrop-filter:blur(20px) saturate(180%)} #olten header#hdr.t-scrolled{-webkit-backdrop-filter:blur(24px) saturate(190%); backdrop-filter:blur(24px) saturate(190%)} } /* =================================================================== KONTAKTKACHELN IM HERO Erste Fassung hatte einen breiten Glanzstreifen an der Oberkante — das Grundsystem legt über jede Glasfläche zusätzlich eine Randlinse (::before) und zwei Lichthöfe (::after). Auf hellem Glas ist das unauffällig, auf dunklem Grund entsteht daraus ein Plastikglanz. Beide Ebenen werden hier abgeschaltet; es bleibt eine ruhige, durchscheinende Fläche mit Haarlinie. =================================================================== */ #olten .o-hero-kacheln{position:relative;z-index:2; margin-top:clamp(28px,3.2vw,46px);padding-bottom:clamp(6px,1.4vw,16px)} #olten .o-hero-kacheln .o-kacheln{margin:0} #olten .t-hero .o-kachel{ background:rgba(255,255,255,.10); -webkit-backdrop-filter:blur(20px) saturate(150%); backdrop-filter:blur(20px) saturate(150%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.22); border-radius:var(--r-md); padding:20px 16px;gap:8px; transition:background-color .3s var(--ease), box-shadow .3s var(--ease)} /* Randlinse und Lichthöfe des Grundsystems abschalten. */ #olten .t-hero .o-kachel::before, #olten .t-hero .o-kachel::after{display:none;content:none} #olten .t-hero .o-kachel:hover{ background:rgba(255,255,255,.17); box-shadow:inset 0 0 0 1px rgba(127,210,243,.45); transform:none} #olten .t-hero .o-kachel .t-ic{color:#7FD2F3;width:24px;height:24px} #olten .t-hero .o-kachel b{color:#FFFFFF;font-size:1.02rem} #olten .t-hero .o-kachel span{color:#FFFFFF;font-weight:450;font-size:.98rem} /* Vier nebeneinander, solange der Platz reicht. */ @media (min-width:1000px){ #olten .o-hero-kacheln .o-kacheln{grid-template-columns:repeat(4,1fr)} } /* Der Einleitungsblock trägt jetzt zwei Absätze und steht direkt über dem Kachelraster. Etwas mehr Luft nach unten, damit die Haarlinie des Abschnittskopfs nicht an die erste Kartenreihe stösst. */ #olten #willkommen .t-sec-head{margin-bottom:clamp(38px,4vw,58px);max-width:900px} #olten #willkommen .t-lede:last-of-type{margin-bottom:0} /* =================================================================== GALERIE GRÖSSER Drei Spalten im 1180er Wrapper ergaben rund 370 Pixel je Bild — zu klein, um einen Raum zu zeigen. Zwei Spalten im breiteren Wrapper ergeben rund 615 Pixel, also zwei Drittel mehr Bildfläche. =================================================================== */ #olten #raeume > .t-wrap{max-width:1320px} #olten #raeume .t-galerie{grid-template-columns:repeat(2,1fr);gap:clamp(18px,2vw,28px)} @media (max-width:820px){ #olten #raeume .t-galerie{grid-template-columns:1fr} } /* Die Beschriftung wächst mit dem Bild mit. */ #olten #raeume .t-gal figcaption{font-size:1.06rem;padding:9px 16px} /* =================================================================== KEIN BESCHNITT — gilt für die ganze Website Das Grundsystem zwingt Bildrahmen in feste Seitenverhältnisse (.t-doc .t-ph auf 1/1, .t-h-photo .t-ph auf 1.62, die Galerie auf 3/2) und füllt sie mit object-fit:cover. Aus einer Querformat- aufnahme wird dabei ein Quadrat, dem links und rechts ein Drittel fehlt. Hier wird jede erzwungene Geometrie aufgehoben: Der Rahmen richtet sich nach dem Bild, nicht umgekehrt. =================================================================== */ #olten .t-ph, #olten .t-ph-sq, #olten .t-doc .t-ph, #olten .t-doc .t-ph-sq, #olten .t-h-photo .t-ph, #olten .o-lkachel .t-ph, #olten .o-anfahrt-bild .t-ph, #olten .o-mpa-k .t-ph, #olten .t-gal, #olten .t-gal .t-gal-b, #olten #raeume .t-gal .t-gal-b{aspect-ratio:auto;height:auto} #olten .t-ph img, #olten .t-gal img, #olten #raeume .t-gal img, #olten .o-lkachel img, #olten .o-mpa-k img, #olten .o-anfahrt-bild img, #olten .t-doc-media img, #olten .t-h-photo img, #olten .t-prax-logo img{ width:100%;height:auto;aspect-ratio:auto;object-fit:contain;display:block} /* Runde MPA-Porträts fielen weg: ein Kreis über einem Querformat schneidet zwangsläufig. Stattdessen dieselbe Rundung wie überall. */ #olten .o-mpa-k .t-ph{border-radius:var(--r-lg)} /* Die Bildspalte in den Leistungszeilen und bei den Personen darf jetzt in der Höhe variieren; oben ausrichten hält die Zeile ruhig. */ #olten .t-doc{align-items:start} /* =================================================================== HÖHENSYSTEM — ein Schatten für die ganze Website Das Grundsystem stapelt bis zu vier Schattenebenen mit positivem Radius und legt einen deckenden 1-px-Ring darüber. Das Ergebnis ist eine harte, dunkle Kante — auf hellem Grund besonders sichtbar. Hier stattdessen: wenige Ebenen, sehr weit gestreut, niedrige Deckung, negativer Spread. Der Schatten sitzt dadurch unter dem Element statt daneben. Das Anheben geht von 4 auf 2 Pixel zurück. Die Spezifität ist bewusst hoch genug, um .glas.t-rv.t-in:hover aus dem Grundsystem zu schlagen. =================================================================== */ #olten{ --e-ruhe: 0 1px 2px rgba(0,42,62,.045), 0 10px 24px -12px rgba(0,42,62,.16); --e-hover: 0 2px 5px rgba(0,42,62,.05), 0 20px 44px -20px rgba(0,42,62,.20), 0 44px 88px -44px rgba(0,42,62,.16); --e-glanz:inset 0 1px 0 rgba(255,255,255,.9); --e-ring:inset 0 0 0 1px rgba(255,255,255,.55); --e-ring-hover:inset 0 0 0 1px rgba(0,158,227,.18); } /* Ruhezustand */ #olten .glas, #olten .glas.t-rv, #olten .glas.t-rv.t-in, #olten .t-prax-c, #olten .o-lkachel, #olten .t-gal{ box-shadow:var(--e-glanz),var(--e-ring),var(--e-ruhe)} /* Überfahren */ #olten .glas:hover, #olten .glas.t-in:hover, #olten .glas.t-rv.t-in:hover, #olten .t-prax-c.t-rv.t-in:hover, #olten .o-lkachel.t-rv.t-in:hover, #olten .t-gal.t-rv.t-in:hover, #olten .t-prax-c:hover, #olten .o-lkachel:hover, #olten .t-gal:hover{ transform:translateY(-2px); box-shadow:var(--e-glanz),var(--e-ring-hover),var(--e-hover)} /* Drücken: fast auf Ruhehöhe zurück, kurz und knapp */ #olten a.glas:active,#olten button.glas:active, #olten .t-prax-c:active,#olten .o-lkachel:active{ transform:translateY(0) scale(.994); box-shadow:var(--e-glanz),var(--e-ring),var(--e-ruhe); transition-duration:.09s} /* Blaues Glas trägt denselben Aufbau, nur mit dunkleren Werten. */ #olten .glas.glas-blau, #olten .glas.glas-blau.t-rv.t-in{ box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(0,20,32,.18), 0 1px 2px rgba(0,20,32,.06), 0 12px 28px -14px rgba(0,20,32,.30)} #olten .glas.glas-blau:hover, #olten .glas.glas-blau.t-rv.t-in:hover{ box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(127,210,243,.30), 0 2px 5px rgba(0,20,32,.08), 0 22px 48px -22px rgba(0,20,32,.36), 0 46px 92px -46px rgba(0,20,32,.28)} /* Knöpfe: dieselbe Sprache, eine Stufe flacher. */ #olten .t-btn-solid{ box-shadow:0 1px 2px rgba(0,42,62,.10), 0 8px 18px -10px rgba(0,64,94,.34)} #olten .t-btn-solid:hover{ box-shadow:0 2px 4px rgba(0,42,62,.12), 0 14px 30px -14px rgba(0,64,94,.40)} #olten header#hdr .t-btn-solid{ box-shadow:0 1px 2px rgba(0,42,62,.12), 0 8px 18px -10px rgba(0,64,94,.38)} /* Porträtrahmen in den Personenzeilen hoben sich beim Überfahren stärker als die Karten daneben. Jetzt dieselbe Stufe. */ #olten .t-doc .t-ph{box-shadow:var(--e-ruhe)} #olten .t-doc:hover .t-ph{transform:translateY(-2px);box-shadow:var(--e-hover)} /* Auf Geräten ohne Zeigegerät entfällt der Überfahrzustand ganz. */ @media (hover:none){ #olten .glas:hover,#olten .glas.t-rv.t-in:hover, #olten .t-prax-c:hover,#olten .o-lkachel:hover,#olten .t-gal:hover, #olten .t-doc:hover .t-ph{transform:none; box-shadow:var(--e-glanz),var(--e-ring),var(--e-ruhe)} } /* =================================================================== PORTRÄTS GRÖSSER Die Praxisassistenz stand in einem auf 900 px begrenzten Raster, also rund 200 px je Bild. Jetzt volle Wrapper-Breite. Bei den Ärztinnen und Ärzten war die Bildspalte mit .82fr die schmalere von beiden — sie wird zur breiteren. =================================================================== */ /* Die Praxisassistenz bekommt eine eigene, breitere Bahn: der Abschnitt darf über den 1180er Wrapper hinausgehen. Bei vier Spalten wächst jedes Porträt damit von rund 280 auf 336 Pixel — deutlich mehr als vorher, aber weiterhin kleiner als die 542 Pixel der Ärztinnen und Ärzte. */ #olten #mpa > .t-wrap{max-width:1460px} #olten .o-mpa{max-width:none;gap:clamp(18px,1.6vw,22px)} @media (min-width:701px){#olten .o-mpa{grid-template-columns:repeat(4,1fr)}} @media (min-width:761px){ /* Genau halbe/halbe. Der Abstand geht von bis zu 80 auf 48 Pixel zurück — was dort wegfällt, bekommt das Bild dazu. */ #olten .t-doc,#olten .t-doc.t-flip{ grid-template-columns:1fr 1fr;gap:clamp(28px,3.4vw,48px)} } /* Das Bild füllt seine Spalte vollständig aus. */ #olten .t-doc-media,#olten .t-doc-media .t-ph{width:100%;max-width:none} #olten .t-doc-media img{width:100%;height:auto} /* =================================================================== HERO — vier Fassungen zum Vergleich Nur Anordnung und Grösse; der Verlauf des Grundsystems bleibt. =================================================================== */ #olten .o-hero-text{max-width:none} #olten .o-hero-text.t-center{margin:0 auto;max-width:22ch} #olten .o-hero-text.t-center .t-sub{margin-left:auto;margin-right:auto;max-width:62ch} #olten .o-hero-text.t-center .t-hero-cta{justify-content:center} /* 1 — zentriert, Foto als breites Band */ #olten .o-hero1{padding:clamp(48px,5vw,84px) 0 0} #olten .o-hero1 .o-hero-kacheln{margin-top:clamp(30px,3.4vw,44px)} #olten .o-hero1 .o-hero-band{margin-top:clamp(34px,3.8vw,52px); border-radius:var(--r-xl) var(--r-xl) 0 0;overflow:hidden; box-shadow:0 -2px 0 rgba(255,255,255,.14), 0 40px 90px -40px rgba(0,20,32,.6)} #olten .o-hero1 .o-hero-band .t-ph{border-radius:var(--r-xl) var(--r-xl) 0 0} /* 2 — zweispaltig, Spalten gleich breit */ /* Das Foto darf nicht beschnitten werden, seine Höhe hängt also allein an der Breite. Zwei Hebel: das Hero-Band geht über den 1180er Wrapper hinaus, und das Verhältnis kippt zugunsten des Bildes. Die Textspalte bleibt dabei praktisch gleich breit — sie verliert nur sieben Pixel, das Bild gewinnt rund 260. */ #olten .o-hero2 .t-heroA{ max-width:1440px; grid-template-columns:.80fr 1.20fr; gap:clamp(32px,3.8vw,56px); align-items:center} #olten .o-hero2 .t-h-copy{max-width:36ch} #olten .o-hero2 .o-hero-kacheln{max-width:1440px;margin-top:clamp(24px,2.6vw,36px)} /* Auf sehr breiten Schirmen darf das Band noch etwas weiter aufgehen. */ @media (min-width:1560px){ #olten .o-hero2 .t-heroA,#olten .o-hero2 .o-hero-kacheln{max-width:1560px} } @media (max-width:1000px){ #olten .o-hero2 .t-heroA{grid-template-columns:1fr} #olten .o-hero2 .t-h-copy{max-width:none} } /* 3 — Text links, Foto randlos bis zum rechten Bildschirmrand */ #olten .o-hero3{overflow:hidden} #olten .o-hero3-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center;gap:clamp(28px,4vw,60px);position:relative;z-index:2} #olten .o-hero3-text{padding:clamp(44px,4.6vw,78px) 0 clamp(44px,4.6vw,78px) clamp(24px,calc((100vw - var(--wrap))/2 + 24px),calc((100vw - var(--wrap))/2 + 24px))} #olten .o-hero3-bild{border-radius:var(--r-xl) 0 0 var(--r-xl);overflow:hidden; box-shadow:0 40px 90px -40px rgba(0,20,32,.6)} #olten .o-hero3-bild img{width:100%;height:auto;display:block} #olten .o-hero3 .o-hero-kacheln{margin-top:clamp(26px,3vw,40px)} @media (max-width:900px){ #olten .o-hero3-raster{grid-template-columns:1fr} #olten .o-hero3-text{padding:clamp(36px,5vw,60px) 24px} #olten .o-hero3-bild{border-radius:0} } /* 4 — Foto als Hintergrund mit Verlaufsschleier */ #olten .o-hero4{position:relative;isolation:isolate;min-height:clamp(520px,62vh,720px); display:flex;align-items:center} #olten .o-hero4-bild{position:absolute;inset:0;z-index:-2;overflow:hidden} #olten .o-hero4-bild img{width:100%;height:100%;object-fit:cover;object-position:center 30%} #olten .o-hero4-schleier{position:absolute;inset:0;z-index:-1; background:linear-gradient(100deg,rgba(0,52,78,.94) 0%,rgba(0,64,94,.86) 38%,rgba(0,64,94,.42) 72%,rgba(0,64,94,.30) 100%)} #olten .o-hero4-inhalt{padding:clamp(44px,5vw,78px) 24px} #olten .o-hero4 .o-hero-text{max-width:38ch} #olten .o-hero4 .o-hero-kacheln{margin-top:clamp(28px,3.2vw,44px);max-width:900px} @media (max-width:900px){ #olten .o-hero4-schleier{background:linear-gradient(180deg,rgba(0,52,78,.92),rgba(0,64,94,.86))} } /* Merkzeile der Vergleichsfassungen — eigenes Element, nicht #olten::before */ .o-merker{position:fixed;top:0;left:0;right:0;z-index:200;background:#0C2632;color:#fff; font:650 .76rem/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif; letter-spacing:.09em;text-transform:uppercase;padding:11px 14px;text-align:center} body.hat-merker{padding-top:36px} body.hat-merker #hdr{top:36px} /* =================================================================== TYPOGRAFIE VEREINHEITLICHT Über die Runden waren 35 verschiedene Schriftgrössen und sieben Schnitte entstanden. Ab hier gibt es fünf Stufen und drei Schnitte, und jede Komponente greift auf eine davon zu. Nichts setzt mehr eigene Werte. Etikett 14 px nur Versalien-Beschriftungen Klein 16 px Chips, Bildunterschriften, Randangaben Mittel 17 px Rollen, Adressen, Fusszeile, kleine Knöpfe Fliess 19 px der gesamte Lesetext Gross 20 px Titel in Listen und Kacheln 450 Fliesstext 650 Beschriftungen, Knöpfe, Rollen 700 Überschriften, Namen, Versalien =================================================================== */ #olten{ --t-etikett:.875rem; --t-klein:1rem; --t-mittel:1.0625rem; --t-gross:1.25rem; --w-text:450; --w-label:650; --w-titel:700; } /* --- Stufe Etikett: nur Versalien --------------------------------- */ #olten .t-kicker, #olten .o-fuss h3, #olten .t-prax-kt, #olten .o-kein-foto, #olten .o-kein-bild{ font-size:var(--t-etikett);font-weight:var(--w-titel); letter-spacing:.12em;text-transform:uppercase;line-height:1.3} /* --- Stufe Klein --------------------------------------------------- */ #olten .o-sprachen span, #olten .t-gal figcaption, #olten #raeume .t-gal figcaption, #olten .o-mpa-k figcaption span, #olten .o-fuss-ende, #olten .v-fuss .o-fuss-ende a, #olten .t-fplatz code{ font-size:var(--t-klein);font-weight:var(--w-label);line-height:1.4} #olten .o-fuss-ende,#olten .v-fuss .o-fuss-ende a{font-weight:var(--w-text)} /* --- Stufe Mittel -------------------------------------------------- */ #olten .t-role, #olten .t-prax-adr, #olten .t-prax-web, #olten .o-mehr, #olten .o-kachel span, #olten .t-hero .o-kachel span, #olten .o-fuss p, #olten .v-fuss .o-fuss a, #olten .t-btn-sm, #olten #hdr nav a, #olten .v-kontakt .v-name{ font-size:var(--t-mittel);line-height:1.5} #olten .t-role,#olten .o-mehr,#olten .v-kontakt .v-name{font-weight:var(--w-label)} #olten .t-prax-adr,#olten .t-prax-web,#olten .o-kachel span, #olten .t-hero .o-kachel span,#olten .o-fuss p, #olten .v-fuss .o-fuss a{font-weight:var(--w-text)} #olten #hdr nav a{font-weight:var(--w-label)} #olten #hdr nav a[aria-current="page"]{font-weight:var(--w-titel)} /* --- Stufe Fliesstext ---------------------------------------------- */ #olten p,#olten li,#olten dd,#olten address, #olten .t-legal-body,#olten .t-legal-body p,#olten .t-legal-body li, #olten .o-schritte p,#olten .t-tile p,#olten .v-kontakt p{ font-size:1em;font-weight:var(--w-text);line-height:1.66} /* --- Stufe Gross: Titel in Listen und Kacheln ---------------------- */ #olten .o-schritte h2,#olten .o-schritte h3, #olten .o-lkachel h3, #olten .t-tile h3, #olten .o-kachel b,#olten .t-hero .o-kachel b, #olten .o-mpa-k figcaption b, #olten .o-dl dt{ font-size:var(--t-gross);font-weight:var(--w-titel); line-height:1.26;letter-spacing:-.012em;margin-top:0} /* In den Kontaktkacheln steht der Titel über einer Zeile Werte — dort eine Stufe kleiner, sonst kippt das Verhältnis. */ #olten .o-kachel b,#olten .t-hero .o-kachel b{font-size:var(--t-mittel)} /* --- Einleitungssätze ---------------------------------------------- */ #olten .t-lede,#olten .t-hero .t-sub{ font-size:clamp(1.14rem,1.02rem + .46vw,1.32rem); font-weight:var(--w-text);line-height:1.56;letter-spacing:0} /* --- Knöpfe -------------------------------------------------------- */ #olten .t-btn{font-size:var(--t-mittel);font-weight:var(--w-label)} #olten .t-mnav nav a{font-size:clamp(1.3rem,1rem + 1.6vw,1.7rem);font-weight:var(--w-titel)} /* --- Überschriften: drei Stufen, ein Schnitt ----------------------- */ #olten h1,#olten h2,#olten h3,#olten h4{font-weight:var(--w-titel)} #olten h1{font-size:clamp(1.72rem,1.05rem + 2.7vw,3.4rem);letter-spacing:-.018em;line-height:1.12} #olten h2{font-size:clamp(1.44rem,1rem + 1.9vw,2.5rem);letter-spacing:-.016em;line-height:1.16} #olten h3,#olten .o-titelzeile h2{ font-size:clamp(1.2rem,1rem + .8vw,1.55rem);letter-spacing:-.012em;line-height:1.24} @media (max-width:520px){ #olten h1{font-size:1.62rem} #olten h2{font-size:1.36rem} } /* Kontaktliste: derselbe Baustein wie auf der Team-Seite, nur trägt die zweite Zeile einen Verweis statt Fliesstext. */ #olten .o-kontaktliste li{padding:20px 0} #olten .o-kontaktliste h2,#olten .o-kontaktliste h3{ margin:0 0 2px;font-size:var(--t-gross);letter-spacing:-.012em;line-height:1.26} #olten .o-kontaktliste p{margin:0} #olten .o-kontaktliste a{color:var(--cyan-txt);font-weight:var(--w-label); text-decoration:none;text-underline-offset:3px} #olten .o-kontaktliste a:hover{text-decoration:underline} /* Ohne Zwischenüberschrift rückt die Karte direkt unter den Seitenkopf. */ #olten #wege{padding-top:0} /* =================================================================== KONTAKTLISTE — drei Fassungen a ganze Zeile klickbar, Pfeil rechts b Wert antippen kopiert ihn, Bestätigung am Symbol c Zeile klappt eine Aktionsleiste aus =================================================================== */ #olten .o-kontaktliste li{padding:0;border-top:1px solid var(--line)} #olten .o-kontaktliste li:first-child{border-top:0} #olten .o-kz{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center; width:100%;padding:18px 16px;border-radius:var(--r-md);text-align:left; text-decoration:none;color:inherit;background:none;border:0; transition:background-color .22s var(--ease)} #olten .o-kz h2{margin:0 0 2px} #olten .o-kz p{margin:0} #olten .o-kz .t-ibox{margin-bottom:0} #olten a.o-kz:hover,#olten button.o-kz:hover{background:rgba(0,158,227,.07);text-decoration:none} #olten a.o-kz:active,#olten button.o-kz:active{background:rgba(0,158,227,.12)} #olten .o-kz-still{cursor:default} /* a — Pfeil rechts, wandert beim Überfahren */ #olten .o-kz-pfeil{display:grid;place-items:center;color:var(--cyan-txt); transition:transform .28s var(--ease)} #olten .o-kz-pfeil .t-ic{width:20px;height:20px} #olten a.o-kz:hover .o-kz-pfeil{transform:translateX(4px)} body.k-a #olten .o-kontaktliste a p{color:var(--body)} /* b — Kopierknopf mit Bestätigung */ #olten .o-kopier{position:relative;display:grid;place-items:center;width:44px;height:44px; border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--cyan-txt); cursor:pointer;transition:border-color .22s var(--ease),background-color .22s var(--ease)} #olten .o-kopier:hover{border-color:var(--cyan);background:rgba(0,158,227,.06)} #olten .o-kopier .t-ic{width:20px;height:20px;transition:opacity .18s var(--ease)} #olten .o-kopier-ok{position:absolute;inset:0;display:grid;place-items:center; opacity:0;color:var(--a-green);transition:opacity .18s var(--ease)} #olten .o-kopier.o-fertig .t-ic:first-child{opacity:0} #olten .o-kopier.o-fertig .o-kopier-ok{opacity:1} #olten .o-kontaktliste .t-btn.o-kopier{width:auto;height:auto;border-radius:var(--r-pill)} #olten .o-kontaktliste .t-btn.o-kopier.o-fertig{border-color:var(--a-green);color:var(--a-green)} /* c — ausklappende Aktionsleiste */ #olten .o-kz-chevron{display:grid;place-items:center;color:var(--cyan-txt); transition:transform .3s var(--ease)} #olten .o-kz-chevron .t-ic{width:20px;height:20px} #olten .o-kz-schalter[aria-expanded="true"] .o-kz-chevron{transform:rotate(180deg)} #olten .o-kz-aktionen{display:flex;flex-wrap:wrap;gap:10px;padding:0 16px 18px 88px} #olten .o-kz-aktionen[hidden]{display:none} @media (max-width:560px){#olten .o-kz-aktionen{padding-left:16px} #olten .o-kz{grid-template-columns:auto 1fr;gap:14px;padding:16px 12px} #olten .o-kz-pfeil,#olten .o-kz-chevron{grid-column:2;justify-self:end}} /* =================================================================== HERO-FASSUNG 5 — Foto füllt die rechte Hälfte randlos Kein gerahmtes Bild in einer Spalte, sondern eine durchgehende Bildfläche bis zur Oberkante und zum rechten Bildschirmrand. Die Kontaktkacheln sitzen als schmale Leiste am unteren Heroende und greifen damit die Kante auf. =================================================================== */ #olten .o-hero5{padding:0;overflow:hidden} #olten .o-hero5-raster{display:grid;grid-template-columns:1fr 1fr; align-items:stretch;position:relative;z-index:2} #olten .o-hero5-text{display:flex;flex-direction:column;justify-content:center; padding:clamp(48px,5vw,88px) clamp(28px,3vw,52px) clamp(48px,5vw,88px) max(24px,calc((100vw - var(--wrap))/2 + 24px))} #olten .o-hero5-bild{position:relative;min-height:clamp(360px,46vh,560px)} #olten .o-hero5-bild img{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:center 32%} #olten .o-hero5-kacheln{padding-bottom:clamp(20px,2.4vw,34px); margin-top:calc(-1 * clamp(20px,2.4vw,34px));position:relative;z-index:3} @media (max-width:900px){ #olten .o-hero5-raster{grid-template-columns:1fr} #olten .o-hero5-text{padding:clamp(38px,6vw,60px) 24px} #olten .o-hero5-bild{min-height:0;aspect-ratio:3/2} #olten .o-hero5-bild img{position:static;height:auto} #olten .o-hero5-kacheln{margin-top:0;padding-top:clamp(22px,3vw,32px)} } /* =================================================================== HERO-FASSUNG 6 — kein Foto im blauen Kopf Der Hero trägt nur Überschrift, Untertitel, Knopf und die vier Kacheln und bleibt dadurch kurz. Das Gruppenfoto folgt direkt darunter als Band über die volle Breite — es hat dort mehr Fläche als in jeder Spaltenlösung, und der Inhalt beginnt früher. =================================================================== */ #olten .o-hero6{padding:clamp(52px,5.4vw,92px) 0 clamp(40px,4.4vw,68px)} #olten .o-hero6-inhalt{position:relative;z-index:2} #olten .o-hero6 .o-hero-text.t-center{max-width:24ch} #olten .o-hero6 .o-hero-kacheln{margin-top:clamp(30px,3.4vw,46px)} #olten .o-fotoband{position:relative;z-index:2;margin:0;overflow:hidden; box-shadow:0 30px 70px -40px rgba(0,20,32,.5)} #olten .o-fotoband .t-ph{border-radius:0} #olten .o-fotoband img{width:100%;height:auto;display:block; max-height:clamp(320px,54vh,620px);object-fit:cover;object-position:center 30%} /* =================================================================== KNOPF-HIERARCHIE Genau ein gefüllter Knopf auf der Seite: «Termin buchen» in der Kopfzeile. Alles, was nur weiterführt — «Das gesamte Team ansehen», «Route planen», «Zum Formular» — trägt die Umrissfassung. Ein zweiter gefüllter Knopf mitten im Inhalt liest sich sonst wie ein zweiter Hauptweg. =================================================================== */ #olten .t-btn-outline{ background:rgba(255,255,255,.72);color:var(--cyan-txt); border:1px solid var(--line); box-shadow:0 1px 2px rgba(0,42,62,.04)} #olten .t-btn-outline:hover{ background:#fff;border-color:var(--cyan);color:var(--petrol); box-shadow:0 2px 4px rgba(0,42,62,.06), 0 10px 22px -12px rgba(0,64,94,.24)} #olten .t-btn-outline .t-ic{color:var(--cyan-txt)} #olten .t-btn-outline:hover .t-ic{color:var(--cyan)} /* Auf dunklem Grund bleibt die Umrissfassung hell umrandet. */ #olten .t-band-dark .t-btn-outline, #olten .t-hero .t-btn-outline, #olten .v-kontakt .t-btn-outline{ background:rgba(255,255,255,.10);color:#fff;border-color:rgba(255,255,255,.55); box-shadow:none} #olten .t-band-dark .t-btn-outline:hover, #olten .t-hero .t-btn-outline:hover, #olten .v-kontakt .t-btn-outline:hover{ background:rgba(255,255,255,.20);border-color:#fff;color:#fff} #olten .t-band-dark .t-btn-outline .t-ic, #olten .t-hero .t-btn-outline .t-ic, #olten .v-kontakt .t-btn-outline .t-ic{color:#7FD2F3} /* =================================================================== GERÄTEDURCHGANG — zwei Korrekturen aus der Nachrechnung =================================================================== */ /* 1) Praxisassistenz: der Umschaltpunkt lag bei 700 px. Auf einem iPad mini im Hochformat (744 px) standen dadurch vier Porträts nebeneinander — 160 px je Bild, zu wenig für ein Gesicht. Vier Spalten erst ab 900 px, darunter zwei. */ @media (max-width:899px){ #olten .o-mpa{grid-template-columns:repeat(2,1fr)} } @media (min-width:900px){ #olten .o-mpa{grid-template-columns:repeat(4,1fr)} } /* 2) Hero: die Umstellung auf eine Spalte lag bei 1000 px. Ein iPad im Querformat (1024 px) blieb damit zweispaltig, die Textspalte fiel auf 375 px — und die Überschrift wächst dort schon auf 44 px. «Hausärztinnen» hätte die Zeile gesprengt. Ab jetzt stapelt der Hero bis 1100 px. */ @media (max-width:1100px){ #olten .o-hero2 .t-heroA{grid-template-columns:1fr} #olten .o-hero2 .t-h-copy{max-width:none} } @media (min-width:1101px){ #olten .o-hero2 .t-heroA{grid-template-columns:.80fr 1.20fr} } /* =================================================================== DESKTOP BREITER Der Wrapper lag bei 1180 px — auf einem 15-Zoll-Gerät blieben links und rechts je 130 px leer, und die Seite wirkte eingeschnürt. Ab jetzt 1440 px, auf sehr breiten Schirmen 1560. Nicht mitgewachsen ist der Lesetext. Bei 1440 px Spaltenbreite stünden rund 170 Zeichen in einer Zeile; ab etwa 75 verliert das Auge beim Zeilenwechsel den Anschluss. Textkarten bleiben deshalb auf gut 940 px und sitzen mittig im breiten Raster — die Fläche wächst, die Zeile nicht. =================================================================== */ #olten{--wrap:1440px; --lesebreite:940px} @media (min-width:1700px){#olten{--wrap:1560px}} /* Textkarten und Abschnittsköpfe: mittig, auf Lesebreite begrenzt. */ #olten .t-sec-head{max-width:min(var(--lesebreite),860px);margin-left:auto;margin-right:auto} #olten #willkommen .t-sec-head{max-width:min(var(--lesebreite),920px)} #olten .o-lesekarte, #olten #einleitung > .t-wrap, #olten #ankunft > .t-wrap, #olten #hinweise > .t-wrap, #olten #registrierung > .t-wrap, #olten #kontaktformular > .t-wrap, #olten #wege > .t-wrap{max-width:var(--lesebreite)} /* Fliesstext in den Leistungszeilen: die Spalte ist jetzt rund 690 px breit, der Absatz darf davon höchstens 62 Zeichen nutzen. */ #olten .t-doc > div > div > p, #olten .t-doc > div > p{max-width:62ch} /* Schluss-Karte darf mitwachsen, bleibt aber unter der Lesegrenze. */ #olten .v-kontakt{max-width:780px} /* Galerie und Praxisassistenz laufen jetzt im normalen Raster mit — die früheren Sonderbreiten sind damit hinfällig. */ #olten #raeume > .t-wrap{max-width:var(--wrap)} #olten #mpa > .t-wrap{max-width:var(--wrap)} /* Der Hero brauchte eine eigene, breitere Bahn, solange der Wrapper schmaler war. Jetzt ist beides gleich. */ #olten .o-hero2 .t-heroA,#olten .o-hero2 .o-hero-kacheln{max-width:var(--wrap)} @media (min-width:1560px){ #olten .o-hero2 .t-heroA,#olten .o-hero2 .o-hero-kacheln{max-width:var(--wrap)} } /* Kopfzeile: mehr Luft zwischen den Menüpunkten, wenn der Platz da ist. */ @media (min-width:1200px){#olten #hdr nav{gap:34px}} /* Zeilenlänge hart begrenzt. Die Karte darf 940 px breit sein, der Absatz darin nicht — sonst stehen 90 Zeichen in einer Zeile. Ab etwa 75 verliert das Auge beim Zeilenwechsel den Anschluss, und genau dort haben wir vorhin für ältere Leserinnen und Leser nachgebessert. 68 Zeichen sind der obere Rand des Behaglichen. */ #olten .o-schritte p, #olten .o-kontaktliste p, #olten .glas > p, #olten .t-tile p, #olten .o-fliess p{max-width:68ch} #olten .t-lede{max-width:62ch} #olten .t-sec-head .t-lede{margin-left:auto;margin-right:auto} /* Die Praxisassistenz behält ihre eigene, etwas breitere Bahn — sonst hätte sie durch den neuen Wrapper vier Pixel verloren. */ #olten #mpa > .t-wrap{max-width:min(1520px, calc(100vw - 48px))} /* =================================================================== SEITENKOPF WIEDER BLAU Jede Seite beginnt jetzt gleich: ein blaues Band unter der Kopfzeile. Der weisse Seitenkopf hatte keinen sichtbaren Anfang — Überschrift und Untertitel schwebten in der Fläche. =================================================================== */ #olten .o-seitenkopf{padding:clamp(52px,3.4rem + 2.6vw,96px) 0 clamp(46px,3rem + 2vw,80px)} #olten .o-seitenkopf h1{margin-bottom:18px} #olten .o-seitenkopf .t-sec-head::after{background:rgba(255,255,255,.34)} /* =================================================================== GALERIE: drei Spalten, kein blauer Streifen unter den Bildern Der Streifen war der Grund der Figur, die nach dem Wegfall der festen Seitenverhältnisse höher blieb als das Bild darin. =================================================================== */ #olten #raeume .t-galerie{grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.6vw,22px)} #olten #raeume .t-gal{background:none;padding:0;font-size:0;line-height:0;overflow:hidden} #olten #raeume .t-gal-b{display:block;padding:0;margin:0;line-height:0;font-size:0;width:100%} #olten #raeume .t-gal img{display:block;width:100%;height:auto;margin:0} #olten #raeume .t-gal figcaption{font-size:var(--t-klein);line-height:1.3} @media (max-width:980px){#olten #raeume .t-galerie{grid-template-columns:repeat(2,1fr)}} @media (max-width:620px){#olten #raeume .t-galerie{grid-template-columns:1fr}} /* =================================================================== ANFAHRT: Karte über die volle Breite, darunter drei Spalten =================================================================== */ #olten .o-karte{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--e-ruhe)} #olten .o-karte iframe{width:100%;height:clamp(320px,42vh,460px);border:0;display:block} #olten .o-anfahrt{display:grid;grid-template-columns:1fr 1.15fr 1fr; gap:clamp(24px,2.8vw,44px);align-items:start;margin-top:clamp(28px,3vw,44px)} #olten .o-anfahrt-spalte h3{margin:0 0 10px} #olten .o-anfahrt-spalte p{margin:0 0 12px;max-width:34ch} #olten .o-anfahrt-spalte .t-ibox{margin-bottom:14px} #olten .o-anfahrt-bild{margin:0} #olten .o-anfahrt-bild img{width:100%;height:auto;border-radius:var(--r-lg);display:block} #olten .o-anfahrt-bild figcaption{margin-top:12px;font-size:var(--t-mittel); font-weight:var(--w-label);color:var(--ink);text-align:center} #olten .o-offen{color:var(--a-rose);font-weight:var(--w-label)} @media (max-width:900px){ #olten .o-anfahrt{grid-template-columns:1fr;gap:28px} #olten .o-anfahrt-bild{order:-1} } /* =================================================================== ÜBERSCHRIFTEN AUF DUNKLEM GRUND Das Grundsystem setzt auf .t-band-dark nur h2 bis h4 auf Weiss — h1 fehlt in der Aufzählung. Auf der Startseite fiel das nicht auf, weil .t-hero h1 eine eigene Regel hat; auf den Unterseiten stand die H1 dadurch schwarz auf Blau. =================================================================== */ #olten .t-band-dark h1, #olten .t-band-dark h2, #olten .t-band-dark h3, #olten .t-band-dark h4, #olten .t-band-dark .t-kicker, #olten .t-band-dark address{color:#FFFFFF} #olten .t-band-dark .t-kicker{color:#7FD2F3} /* =================================================================== BLAUER SEITENANFANG — eine Sektion, ein Verlauf Erst waren es zwei dunkle Bänder untereinander. Jeder .t-band-dark trägt seinen eigenen Verlauf von #00486A nach #00344E, zwei davon ergeben in der Mitte eine sichtbare Stufe. Jetzt liegen Überschrift und Karte in derselben Sektion. =================================================================== */ #olten .o-seitenkopf{padding:clamp(52px,3.4rem + 2.6vw,96px) 0 clamp(52px,3.4rem + 2.4vw,92px)} #olten .o-seitenkopf .t-sec-head{margin-bottom:0} #olten .o-kopfkarte{position:relative;z-index:2;max-width:var(--lesebreite); margin:clamp(34px,3.6vw,52px) auto 0} /* Weisse Karten auf blauem Grund: Text zurück auf Schwarz. Ohne das erbt er die Weiss-Regel des dunklen Bandes und verschwindet. */ #olten .t-band-dark .glas h1, #olten .t-band-dark .glas h2, #olten .t-band-dark .glas h3, #olten .t-band-dark .glas h4, #olten .t-band-dark .glas b, #olten .t-band-dark .glas strong{color:var(--ink)} #olten .t-band-dark .glas p, #olten .t-band-dark .glas li, #olten .t-band-dark .glas dd, #olten .t-band-dark .glas address, #olten .t-band-dark .glas span:not(.t-ic){color:var(--body)} #olten .t-band-dark .glas a{color:var(--cyan-txt)} #olten .t-band-dark .glas .t-ibox{background:color-mix(in srgb,var(--ak,#0091D6) 12%,#fff)} #olten .t-band-dark .t-fplatz b{color:var(--petrol)} #olten .t-band-dark .t-fplatz{color:var(--body)} /* =================================================================== KONTAKTSEITE — drei Fassungen a drei Handlungen im Kopf, Angaben als Leiste, Karte hoch b zwei Spalten: Angaben links, Formular rechts c Angaben als Chipzeile, Karte gross mit überlappender Adresskarte =================================================================== */ /* --- a: drei grosse Handlungen ------------------------------------- */ #olten .o-aktionen{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,24px)} #olten .o-aktion{padding:clamp(24px,2.4vw,34px);text-align:center;text-decoration:none; display:flex;flex-direction:column;align-items:center;gap:4px} #olten .o-aktion:hover{text-decoration:none} #olten .o-aktion .t-ibox{margin-bottom:12px} #olten .o-aktion h2{font-size:var(--t-gross);margin:0 0 4px} #olten .o-aktion p{margin:0;color:var(--body)} @media (max-width:760px){#olten .o-aktionen{grid-template-columns:1fr}} /* --- a: Angaben als schmale Leiste ---------------------------------- */ #olten .o-angaben{display:grid;grid-template-columns:repeat(4,1fr);gap:0; border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff} #olten .o-angabe{display:flex;align-items:center;gap:12px;padding:18px 20px; border-left:1px solid var(--line);text-decoration:none;color:inherit; transition:background-color .22s var(--ease)} #olten .o-angabe:first-child{border-left:0} #olten a.o-angabe:hover{background:rgba(0,158,227,.06);text-decoration:none} #olten .o-angabe .t-ic{color:var(--cyan-txt);flex:0 0 auto} #olten .o-angabe b{display:block;font-size:var(--t-etikett);font-weight:var(--w-titel); letter-spacing:.1em;text-transform:uppercase;color:var(--cyan-txt);margin-bottom:2px} #olten .o-angabe span{font-size:var(--t-mittel);line-height:1.35} @media (max-width:900px){#olten .o-angaben{grid-template-columns:repeat(2,1fr)} #olten .o-angabe:nth-child(3){border-left:0} #olten .o-angabe:nth-child(n+3){border-top:1px solid var(--line)}} @media (max-width:520px){#olten .o-angaben{grid-template-columns:1fr} #olten .o-angabe{border-left:0;border-top:1px solid var(--line)} #olten .o-angabe:first-child{border-top:0}} /* --- b: zwei Spalten ------------------------------------------------ */ #olten .o-kontakt2{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,3vw,48px);align-items:start} #olten .o-kompakt li{padding:14px 0} #olten .o-kompakt .t-ibox{width:40px;height:40px;border-radius:12px} #olten .o-kompakt .t-ibox .t-ic{width:20px;height:20px} #olten .o-anfahrt2{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(20px,2.2vw,30px);align-items:stretch} #olten .o-anfahrt2 .o-karte{height:100%} #olten .o-anfahrt2 .o-karte iframe{height:100%} @media (max-width:900px){#olten .o-kontakt2,#olten .o-anfahrt2{grid-template-columns:1fr}} /* --- c: Chipzeile und grosse Karte ---------------------------------- */ #olten .o-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} #olten .o-chip{display:flex;align-items:center;gap:12px;padding:16px 18px; border-radius:var(--r-md);text-decoration:none} #olten .o-chip:hover{text-decoration:none} #olten .o-chip .t-ic{color:var(--cyan-txt);flex:0 0 auto} #olten .o-chip b{display:block;font-size:var(--t-etikett);font-weight:var(--w-titel); letter-spacing:.1em;text-transform:uppercase;color:var(--cyan-txt)} #olten .o-chip span{font-size:var(--t-mittel);line-height:1.35;color:var(--body)} @media (max-width:900px){#olten .o-chips{grid-template-columns:repeat(2,1fr)}} @media (max-width:520px){#olten .o-chips{grid-template-columns:1fr}} #olten .o-kartenblock{position:relative} #olten .o-kartenkarte{position:absolute;left:clamp(16px,2vw,32px);bottom:clamp(16px,2vw,32px); max-width:min(360px,72%);padding:22px 24px;z-index:3} #olten .o-kartenkarte h3{margin:0 0 6px} #olten .o-kartenkarte p{margin:0 0 14px} @media (max-width:700px){ #olten .o-kartenkarte{position:static;max-width:none;margin-top:16px} } /* --- Wege: Auto, zu Fuss, Bus --------------------------------------- */ #olten .o-wege{margin-top:clamp(24px,2.6vw,36px)} #olten .o-wege-reihe{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,34px)} #olten .o-wege-stapel{display:grid;gap:22px;margin-top:0} #olten .o-weg h2,#olten .o-weg h3{margin:0 0 6px; font-size:var(--t-gross);line-height:1.26;letter-spacing:-.012em} #olten .o-weg p{margin:0;max-width:36ch} #olten .o-weg .t-ibox{margin-bottom:12px;width:44px;height:44px;border-radius:13px} #olten .o-weg .t-ibox .t-ic{width:22px;height:22px} @media (max-width:760px){#olten .o-wege-reihe{grid-template-columns:1fr;gap:24px}} /* --- Kartenhöhen ---------------------------------------------------- */ #olten .o-karte{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--e-ruhe)} #olten .o-karte iframe{width:100%;border:0;display:block} #olten .o-karte-mittel iframe{height:clamp(320px,40vh,440px)} #olten .o-karte-hoch iframe{height:clamp(360px,48vh,520px)} #olten .o-karte-gross iframe{height:clamp(400px,58vh,620px)} /* Im blauen Seitenkopf stehen Aktionen und Chips auf Glas — Text schwarz. */ #olten .t-band-dark .o-aktion h2,#olten .t-band-dark .o-chip b{color:var(--ink)} #olten .t-band-dark .o-aktion p,#olten .t-band-dark .o-chip span{color:var(--body)} #olten .t-band-dark .o-chip b{color:var(--cyan-txt)} /* Das gelieferte Logo ist mit 3,84 : 1 flacher als meine frühere Montage (4,7 : 1). Bei gleicher Höhe wirkt die Wortmarke dadurch grösser — die Höhe geht deshalb leicht zurück. */ #olten .t-logo img{height:44px} #olten header.t-scrolled .t-logo img{height:36px} #olten .v-fuss .o-fuss-marke img{height:46px} #olten .t-mnav-fuss img{height:40px} @media (max-width:1000px){#olten .t-logo img{height:36px} #olten header.t-scrolled .t-logo img{height:31px}} @media (max-width:560px){#olten .t-logo img{height:30px} #olten header.t-scrolled .t-logo img{height:27px}} /* =================================================================== VERTIKALER RHYTHMUS Über die Runden waren fünf verschiedene Bandhöhen entstanden, dazu einzelne Sondersetzungen im Markup. Ab hier gibt es genau ein Mass. Jedes Band trägt oben und unten denselben Abstand; zwei Bänder nebeneinander ergeben damit den doppelten Wert als Trennung, was der Abfolge ihren Takt gibt. =================================================================== */ #olten{--band-y:clamp(58px, 3rem + 2.8vw, 104px)} #olten .t-band{padding:var(--band-y) 0} /* Der Seitenkopf trägt oben etwas mehr, weil darüber die Kopfzeile klebt — sonst sitzt die Überschrift optisch zu hoch. */ #olten .o-seitenkopf{padding:calc(var(--band-y) * 1.15) 0 var(--band-y)} /* Ein Band, das inhaltlich zum vorherigen gehört, hat oben keinen eigenen Abstand — sonst entsteht dort die doppelte Lücke. */ #olten .o-anschluss{padding-top:0} /* Kartenpolster: ein Mass statt vier. */ #olten .o-karte-innen{padding:clamp(24px,2.8vw,40px)} /* Abstand zwischen Abschnittskopf und Inhalt, überall gleich. */ #olten .t-sec-head{margin-bottom:clamp(32px,3.2vw,48px)} #olten .o-seitenkopf .t-sec-head{margin-bottom:0} #olten .o-kopfkarte{margin-top:clamp(32px,3.2vw,48px)} /* =================================================================== LOGO GRÖSSER, MENÜZEILE GLEICH HOCH Die Leiste ist 92 px hoch (74 beim Scrollen), das Logo nutzte davon 44. Es wächst auf 64 px — knapp 70 Prozent der Leistenhöhe, oben und unten bleiben je 14 px Luft. Die Leiste selbst ändert sich nicht. Breite bei 64 px Höhe: 245 px. Das Menü beginnt erst bei rund der halben Wrapper-Breite, es entsteht also keine Enge. =================================================================== */ #olten .t-logo img{height:64px} #olten header.t-scrolled .t-logo img{height:52px} @media (max-width:1000px){ #olten .t-logo img{height:48px} #olten header.t-scrolled .t-logo img{height:42px} } @media (max-width:560px){ #olten .t-logo img{height:40px} #olten header.t-scrolled .t-logo img{height:36px} } /* Die Leistenhöhe wird ausdrücklich festgehalten, damit ein grösseres Logo sie nicht auseinanderdrückt. */ #olten .t-hd{min-height:0} #olten .t-logo{align-self:center} /* =================================================================== LESETEXT IN DEN LEISTUNGSZEILEN GRÖSSER Dort steht der längste zusammenhängende Text der Website, direkt neben einem 672 px breiten Bild. Bei 19 px wirkte er dagegen klein. 21 px, Zeilenlänge weiterhin auf 62 Zeichen begrenzt. =================================================================== */ #olten .t-doc > div p{font-size:1.1em;line-height:1.62;max-width:62ch} #olten .t-legal-body p,#olten .t-legal-body li{font-size:1.06em} /* =================================================================== KOPFZEILE BEIM SCROLLEN — weicher und mit mehr Schwung Das Logo wurde über die Höhe animiert. Höhe ist keine Eigenschaft, die der Browser auf der Grafikkarte rechnet — jede Zwischenstufe erzwingt ein neues Layout, und genau das ruckelt. Jetzt bleibt die Höhe fest, die Verkleinerung läuft über transform:scale. Die Kurve schwingt am Ende leicht über, das gibt die Dynamik. =================================================================== */ #olten .t-logo img{ transform-origin:left center; transition:transform .52s cubic-bezier(.34,1.32,.44,1); will-change:transform} #olten header.t-scrolled .t-logo img{height:64px;transform:scale(.8125)} #olten header#hdr{ transition:background .5s cubic-bezier(.32,.72,0,1), box-shadow .5s cubic-bezier(.32,.72,0,1), backdrop-filter .5s cubic-bezier(.32,.72,0,1)} #olten .t-hd{transition:height .5s cubic-bezier(.34,1.24,.44,1)} /* Die Menüpunkte und der Knopf rücken beim Verdichten leicht mit. */ #olten #hdr nav,#olten .t-hd-cta{transition:transform .52s cubic-bezier(.34,1.32,.44,1)} #olten header.t-scrolled #hdr nav,#olten header.t-scrolled .t-hd-cta{transform:translateY(-1px)} @media (max-width:1000px){ #olten header.t-scrolled .t-logo img{height:48px;transform:scale(.875)} } @media (max-width:560px){ #olten header.t-scrolled .t-logo img{height:40px;transform:scale(.9)} } @media (prefers-reduced-motion:reduce){ #olten .t-logo img,#olten .t-hd,#olten header#hdr, #olten #hdr nav,#olten .t-hd-cta{transition:none} } /* =================================================================== SEITENKOPF-ÜBERSCHRIFT AUF EINER ZEILE «Werden Sie in zwei Minuten Patient:in bei uns» sind 44 Zeichen. Der Abschnittskopf war auf 860 px begrenzt — das ist die Lesebreite für Fliesstext und für eine Überschrift zu eng. Überschriften brauchen diese Grenze nicht: sie stehen einzeilig und werden nicht Zeile für Zeile gelesen. Der Kopf darf deshalb bis 1280 px, der Untertitel bleibt bei 62 Zeichen. =================================================================== */ #olten .o-seitenkopf .t-sec-head{max-width:min(1280px,100%)} /* Die Schriftgrösse bleibt bei der vollen Stufe — gekürzt wurde die Überschrift, nicht die Type. 32 Zeichen bei 54 px ergeben 905 px und passen damit in die 1280 px des Kopfes. */ #olten .o-seitenkopf h1{text-wrap:balance} #olten .o-seitenkopf .t-lede{max-width:62ch} @media (max-width:900px){ #olten .o-seitenkopf h1{text-wrap:pretty} } /* Kontaktangaben im blauen Kopf: sieben Einträge untereinander wären eine sehr hohe Karte. Ab 760 px stehen sie in zwei Spalten, die Trennlinien laufen dann je Spalte. */ @media (min-width:760px){ #olten .o-zweispaltig{display:grid;grid-template-columns:1fr 1fr; column-gap:clamp(28px,3vw,48px);row-gap:0} #olten .o-zweispaltig li{border-top:1px solid var(--line)} #olten .o-zweispaltig li:nth-child(1), #olten .o-zweispaltig li:nth-child(2){border-top:0;padding-top:0} } /* Das Schloss-Symbol trägt die Bedeutung, nicht die Farbe — die verschlüsselte Adresse steht bewusst neben der offenen. */ #olten .o-kontaktliste a{overflow-wrap:anywhere} /* Die Kontaktkarte im blauen Kopf trägt keine Fliesstexte, sondern kurze Werte in zwei Spalten. Sie darf deshalb breiter sein als die Lesebreite — sonst bricht «Frohburgstrasse 15, 4600 Olten» um. */ #olten #kopf .o-kopfkarte{max-width:1100px} #olten .o-kontaktliste p{overflow-wrap:normal} @media (min-width:760px){ #olten .o-zweispaltig li{padding-right:12px} } /* =================================================================== ABSTÄNDE: EIN MASS VON INHALT BIS ABSCHNITTSGRENZE Der Wert war zu gross und wirkte zudem ungleich. Beides hatte dieselbe Ursache: Jedes Band trug oben und unten den vollen Abstand. Wo zwei helle Bänder aufeinandertreffen, addierte sich das zu 177 px reiner Fläche ohne Farbwechsel — dort wirkte es riesig. Wo ein helles auf ein blaues Band trifft, liegt in der Mitte eine Kante, und derselbe Wert wirkt richtig. Jetzt: 70 px von jedem Inhalt bis zur Abschnittsgrenze. Zwischen zwei gleichfarbigen Bändern entfällt die Verdopplung, weil das zweite oben keinen eigenen Abstand mehr setzt. =================================================================== */ #olten{--band-y:clamp(46px, 2.2rem + 2.2vw, 76px)} #olten .t-band{padding:var(--band-y) 0} #olten .t-band-light + .t-band-light{padding-top:0} #olten .o-seitenkopf{padding:calc(var(--band-y) * 1.25) 0 var(--band-y)} /* Der Abschnittskopf gehört zum Inhalt und zählt nicht zum Abstand. */ #olten .t-sec-head{margin-bottom:clamp(28px,2.6vw,40px)} #olten .o-kopfkarte{margin-top:clamp(28px,2.6vw,40px)} #olten .o-mehrzeile{margin-top:clamp(26px,2.4vw,38px)} /* Die Symbole standen ursprünglich oben bündig zur Textspalte. Ein Versuch, sie auf die Mitte der Titelzeile zu ziehen, wurde wieder verworfen — er sah schlechter aus als der bündige Anschlag. */ #olten .o-schritte li{align-items:start} #olten .o-schritte > li > .t-ibox{margin-top:0} #olten .o-kompakt > li > .t-ibox{margin-top:0} #olten .o-kz > .t-ibox{align-self:center;margin-top:0} /* Die Terminbuchung ist die siebte Zeile und hätte allein in einer Spalte gestanden. Sie läuft deshalb über beide. */ @media (min-width:760px){ #olten .o-zweispaltig li.o-breit{grid-column:1 / -1} } /* Die Paarung links/rechts nur dort, wo zwei Spalten stehen. */ @media (min-width:760px){ #olten .o-zweispaltig li:nth-child(1), #olten .o-zweispaltig li:nth-child(2){border-top:0;padding-top:0} } /* =================================================================== KONTAKTKARTE: LUFT UND EINE ZENTRIERTE SCHLUSSZEILE Die Symbole standen fast auf der Trennlinie der zweiten Spalte, und die Zeilen lagen eng. Beides bekommt mehr Raum. Die Terminbuchung läuft über beide Spalten und steht mittig — prominent durch Lage und Achse, nicht durch eine Fläche. =================================================================== */ @media (min-width:760px){ #olten .o-zweispaltig{column-gap:clamp(44px,4.4vw,76px)} #olten .o-zweispaltig > li{padding-right:clamp(12px,1.4vw,24px)} #olten .o-zweispaltig > li.o-breit{grid-column:1 / -1;padding-right:0; margin-top:clamp(10px,1.2vw,18px)} #olten .o-zweispaltig > li.o-breit > .o-zeile-link{ grid-template-columns:auto auto;justify-content:center; text-align:left;gap:18px} } #olten .o-kompakt > li{padding:clamp(18px,1.9vw,26px) 0} #olten .o-kompakt > li:first-child, #olten .o-kompakt > li:nth-child(2){padding-top:0} #olten .o-breit .t-ibox{margin-bottom:2px} #olten .o-breit h2{margin-bottom:2px} /* Die Karte selbst atmet etwas mehr. */ #olten #kopf .o-karte-innen{padding:clamp(28px,3vw,44px)} /* =================================================================== HERO — vier Fassungen Gemeinsam: zweispaltiges Grundraster, Foto ohne Beschnitt, weisser Hauptknopf, Umriss-Knopf daneben. Unterschiedlich ist allein, was mit den Standortangaben passiert — sie waren der Grund für die Lücke unter dem Hero. =================================================================== */ /* Gemeinsames --------------------------------------------------------- */ #olten .t-hero .t-hero-cta{display:flex;flex-wrap:wrap;gap:14px} #olten .t-hero .t-h-copy{max-width:36ch} /* A — ohne Kacheln, drei Angaben als eine Textzeile -------------------- */ #olten .o-heroA .t-heroA{grid-template-columns:.80fr 1.20fr; gap:clamp(32px,3.8vw,56px);align-items:center} #olten .o-fakten{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px; margin:clamp(22px,2.4vw,32px) 0 0;color:#7FD2F3; font-size:var(--t-mittel);font-weight:var(--w-label)} #olten .o-fakten a{color:#7FD2F3;text-decoration:none;text-underline-offset:3px} #olten .o-fakten a:hover{text-decoration:underline;color:#fff} #olten .o-fakten span{opacity:.5} @media (max-width:1100px){#olten .o-heroA .t-heroA{grid-template-columns:1fr} #olten .o-heroA .t-h-copy{max-width:none}} /* B — Kacheln als 2×2-Block in der Textspalte -------------------------- */ #olten .o-heroB .t-heroA{grid-template-columns:.92fr 1.08fr; gap:clamp(32px,3.8vw,56px);align-items:center} #olten .o-heroB .t-h-copy{max-width:none} #olten .o-kachelblock{display:grid;grid-template-columns:1fr 1fr;gap:12px; margin-top:clamp(24px,2.6vw,34px)} @media (max-width:1100px){#olten .o-heroB .t-heroA{grid-template-columns:1fr}} @media (max-width:520px){#olten .o-kachelblock{grid-template-columns:1fr}} /* C — Foto randlos nach rechts, Angaben als Glasleiste ----------------- */ #olten .o-heroC{padding:0;overflow:hidden} #olten .o-heroC-raster{display:grid;grid-template-columns:1fr 1fr; align-items:center;position:relative;z-index:2} #olten .o-heroC-text{display:flex;flex-direction:column;justify-content:center; max-width:36ch; padding:clamp(48px,5vw,88px) clamp(28px,3vw,52px) clamp(40px,4vw,64px) max(24px,calc((100vw - var(--wrap))/2 + 24px))} #olten .o-heroC-bild{position:relative;min-height:clamp(380px,48vh,580px)} #olten .o-heroC-bild img{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:center 32%} #olten .o-heroC .t-wrap{position:relative;z-index:3; padding-bottom:clamp(28px,3vw,44px);margin-top:calc(-1 * clamp(28px,3vw,44px))} @media (max-width:1000px){ #olten .o-heroC-raster{grid-template-columns:1fr} #olten .o-heroC-text{max-width:none;padding:clamp(40px,6vw,64px) 24px 28px} #olten .o-heroC-bild{min-height:0;aspect-ratio:3/2} #olten .o-heroC-bild img{position:static;height:auto} #olten .o-heroC .t-wrap{margin-top:0;padding-top:clamp(24px,3vw,34px)} } /* D — kurzer Kopf, Foto als Band, Angaben überlappen ------------------- */ #olten .o-heroD{padding:clamp(52px,5vw,92px) 0 clamp(64px,6vw,110px);text-align:center} #olten .o-heroD-text{max-width:26ch;margin:0 auto;position:relative;z-index:2} #olten .o-heroD-text .t-sub{margin-left:auto;margin-right:auto;max-width:56ch} #olten .o-heroD-text .t-hero-cta{justify-content:center} #olten .o-heroD-band{position:relative;margin-top:calc(-1 * clamp(40px,4vw,72px))} #olten .o-heroD-band .t-ph{border-radius:0} #olten .o-heroD-band img{width:100%;height:auto;display:block; max-height:clamp(300px,48vh,560px);object-fit:cover;object-position:center 30%} #olten .o-heroD-band .t-wrap{position:relative;z-index:3; margin-top:calc(-1 * clamp(36px,3.6vw,56px))} /* Die Glasleiste mit den drei Angaben, in C und D gleich --------------- */ #olten .o-faktenleiste{display:grid;grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,30px);padding:clamp(18px,2vw,26px) clamp(20px,2.4vw,32px)} #olten .o-faktenteil{display:flex;align-items:center;gap:13px} #olten .o-faktenteil .t-ic{color:var(--cyan-txt);flex:0 0 auto} #olten .o-faktenteil b{display:block;font-size:var(--t-etikett);font-weight:var(--w-titel); letter-spacing:.1em;text-transform:uppercase;color:var(--cyan-txt);margin-bottom:2px} #olten .o-faktenteil span{font-size:var(--t-mittel);line-height:1.35;color:var(--body)} @media (max-width:760px){#olten .o-faktenleiste{grid-template-columns:1fr;gap:14px}} /* =================================================================== KONTAKTZEILEN ALS SCHALTFLÄCHEN Symbol, Bezeichnung und Wert liegen in einem Link, damit auch ein Klick auf das Symbol wählt, schreibt oder die Karte öffnet. Der Link erbt das Raster der Zeile, sonst bräche die Anordnung. =================================================================== */ #olten .o-zeile-link{display:grid;grid-template-columns:auto 1fr;gap:22px; align-items:start;text-decoration:none;color:inherit; border-radius:16px;margin:-10px -12px;padding:10px 12px; transition:background .28s var(--ease)} #olten .o-zeile-link h2{color:var(--ink)} #olten .o-zeile-link p{color:var(--body);text-decoration:none; transition:color .28s var(--ease)} #olten .o-zeile-link:hover{background:rgba(0,158,227,.07)} #olten .o-zeile-link:hover p{color:var(--cyan-txt);text-decoration:none} #olten .o-zeile-link:focus-visible{outline:2px solid var(--cyan-txt);outline-offset:2px} #olten .o-zeile-link .t-ibox{transition:transform .28s var(--ease)} #olten .o-zeile-link:hover .t-ibox{transform:translateY(-1px) scale(1.04)} @media (max-width:560px){#olten .o-zeile-link{grid-template-columns:1fr;gap:12px}} /* =================================================================== FUSSBEREICH IM BLAU DES KOPFBEREICHS Der Fuss hatte einen eigenen, dunkleren Verlauf (#00405E → #002E45) und wirkte dadurch schwerer als der blaue Kopf. Jetzt trägt er exakt denselben Verlauf wie .t-band-dark und .t-hero, samt der beiden weichen Lichtkreise. Kopf und Fuss sind dasselbe Blau. =================================================================== */ #olten footer.v-fuss{ background:linear-gradient(155deg,#00486A 0%,#00405E 46%,#00344E 100%); color:#D6E8F2;position:relative;overflow:hidden} #olten footer.v-fuss::before{ content:"";position:absolute;width:760px;height:760px;border-radius:50%; background:radial-gradient(circle,rgba(0,160,220,.26),transparent 66%); top:-380px;right:-200px;pointer-events:none} #olten footer.v-fuss::after{ content:"";position:absolute;width:600px;height:600px;border-radius:50%; background:radial-gradient(circle,rgba(127,214,248,.14),transparent 68%); bottom:-300px;left:-190px;pointer-events:none} #olten footer.v-fuss > .t-wrap{position:relative;z-index:1} /* =================================================================== MENÜZEILE: EINE SPUR DURCHLÄSSIGER Die Weissdeckung sinkt um je acht Prozentpunkte, Unschärfe und Sättigung steigen leicht. Dadurch scheint der Inhalt darunter deutlicher durch, ohne dass die Menüwörter an Kontrast verlieren — die Schrift bleibt unverändert schwarz auf hellem Grund. =================================================================== */ #olten header#hdr{ background:linear-gradient(180deg,rgba(255,255,255,.50),rgba(255,255,255,.36)); -webkit-backdrop-filter:blur(30px) saturate(200%); backdrop-filter:blur(30px) saturate(200%)} #olten header#hdr.t-scrolled{ background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.60)); -webkit-backdrop-filter:blur(38px) saturate(210%); backdrop-filter:blur(38px) saturate(210%)} /* Ohne Unschärfe-Unterstützung bleibt es deckend, sonst wird die Menüzeile über Fotos unlesbar. */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ #olten header#hdr{background:rgba(248,251,253,.96)} #olten header#hdr.t-scrolled{background:rgba(248,251,253,.98)} } /* Keine Unterstreichung in der Kontaktkarte — der Hinweis auf die Klickbarkeit kommt allein aus der Fläche und der Farbe beim Überfahren. */ #olten .o-kontaktliste a, #olten .o-kontaktliste a:hover, #olten .o-zeile-link, #olten .o-zeile-link:hover, #olten .o-zeile-link p, #olten .o-zeile-link:hover p{text-decoration:none} /* =================================================================== NACH DEM ENTFERNEN DER ÖFFNUNGSZEITEN Vier statt fünf Fussspalten, zwei statt drei Feldern in der Glasleiste, drei statt vier Kacheln in Hero-Fassung B. Ohne diese Anpassung bliebe überall eine leere Spalte stehen. =================================================================== */ #olten .o-fuss{grid-template-columns:1.5fr 1fr 1.4fr 1fr} @media (max-width:1100px){#olten .o-fuss{grid-template-columns:1fr 1fr 1fr} #olten .o-fuss-marke{grid-column:1 / -1}} @media (max-width:620px){#olten .o-fuss{grid-template-columns:1fr 1fr}} #olten .o-faktenleiste{grid-template-columns:repeat(2,1fr)} @media (max-width:760px){#olten .o-faktenleiste{grid-template-columns:1fr}} #olten .o-kachelblock{grid-template-columns:repeat(3,1fr)} @media (max-width:620px){#olten .o-kachelblock{grid-template-columns:1fr}} /* Adresse als linksbündige Kopfzeile über beide Spalten. */ @media (min-width:760px){ #olten .o-zweispaltig > li.o-breit-links{grid-column:1 / -1;padding-right:0} } /* =================================================================== KONTAKTKARTE: ZEILEN RICHTIG AUSRICHTEN Zwei Fehler werden hier behoben. Erstens hatten Regeln mit :nth-child(1) und :nth-child(2) der zweiten und dritten Zelle unterschiedliche obere Abstände gegeben, sobald eine Zeile über beide Spalten läuft — links fehlte die Trennlinie, rechts war sie da, und die Paare standen versetzt. Jetzt entscheidet die im Generator berechnete Klasse .o-erste-reihe. Zweitens hat die allgemeine .o-zeile-link-Regel weiter unten die Spaltenaufteilung der zentrierten Terminbuchung überschrieben und sie damit wieder nach links gezogen. Deshalb steht die Zentrierung jetzt am Ende der Datei. =================================================================== */ #olten .o-zweispaltig > li{border-top:1px solid var(--line); padding-top:clamp(18px,1.9vw,26px)} #olten .o-zweispaltig > li:nth-child(1), #olten .o-zweispaltig > li:nth-child(2){border-top:1px solid var(--line); padding-top:clamp(18px,1.9vw,26px)} #olten .o-zweispaltig > li.o-erste-reihe{border-top:0;padding-top:0} @media (min-width:760px){ #olten .o-zweispaltig > li.o-breit > .o-zeile-link{ display:grid;grid-template-columns:auto auto;justify-content:center; text-align:left;gap:18px} } @media (max-width:759px){ #olten .o-zweispaltig > li{border-top:1px solid var(--line); padding-top:clamp(18px,1.9vw,26px)} #olten .o-zweispaltig > li:first-child{border-top:0;padding-top:0} } /* Die Glasleiste im Hero der Startseite wurde wieder entfernt: sie wiederholte Adresse und Telefon, die auf derselben Seite noch viermal vorkommen. Die Fassungen C und D behalten ihre Leiste. */ /* Die Felder der Glasleiste sind Links — ohne Unterstreichung, wie in der Kontaktkarte. Der Hinweis kommt aus Fläche und Farbe. */ #olten a.o-faktenteil{text-decoration:none;color:inherit; border-radius:14px;margin:-8px -10px;padding:8px 10px; transition:background .28s var(--ease)} #olten a.o-faktenteil:hover{background:rgba(0,158,227,.07)} #olten a.o-faktenteil:hover span{color:var(--cyan-txt)} #olten a.o-faktenteil:focus-visible{outline:2px solid var(--cyan-txt);outline-offset:2px} #olten a.o-faktenteil .t-ic{transition:transform .28s var(--ease)} #olten a.o-faktenteil:hover .t-ic{transform:translateY(-1px) scale(1.06)} /* =================================================================== HERO: TEXTSPALTE AUF DIE HÖHE DES FOTOS Die Textspalte füllt jetzt exakt dieselbe Zeilenhöhe wie das Foto. Damit beginnt die Überschrift auf der Oberkante des Bildes und der Knopf endet auf dessen Unterkante. Dazwischen verteilt space-between die drei Blöcke — Überschrift, die drei Aussagen, Knopf — gleichmässig über die volle Höhe. Das Foto steht oben im eigenen Kasten: sollte der Text einmal höher ausfallen als das Bild, bleibt wenigstens die Oberkante bündig, die der Auftraggeber als wichtigste Linie bezeichnet hat. Die Parallaxe des Fotos bleibt hier abgeschaltet, sonst wandert die Oberkante beim Scrollen um bis zu 14 Pixel nach oben. =================================================================== */ @media (min-width:1101px){ #olten .o-heroA .t-heroA{align-items:stretch} #olten .o-heroA .t-h-copy{justify-content:space-between; gap:clamp(24px,2.4vw,38px)} #olten .o-heroA .t-h-copy > *{margin-top:0;margin-bottom:0} #olten .o-heroA .t-h-copy .t-hero-cta{margin-top:0;margin-bottom:0; align-self:flex-start} #olten .o-heroA .t-h-visual{justify-content:flex-start} #olten .o-heroA .t-h-photo{transform:none;margin:0} } /* =================================================================== ÜBERSCHRIFTEN EINE SPUR KLEINER Rund sechs Prozent runter, an beiden Enden der Spanne gleich viel, damit das Verhältnis zum Fliesstext erhalten bleibt. Die Regel gilt für alle H1 der Website, nicht nur für den Hero — sonst hätte die Startseite eine andere Überschriftgrösse als die Unterseiten. =================================================================== */ #olten h1{font-size:clamp(1.62rem, .99rem + 2.54vw, 3.2rem)} @media (max-width:560px){#olten h1{font-size:1.53rem}} /* =================================================================== DIE DREI AUSSAGEN IM HERO Drei Zeilen, jede mit eigenem Symbol. Das Symbol steht im Textfluss statt in einer eigenen Spalte — bricht eine Zeile um, beginnt die Folgezeile deshalb wieder ganz links und nicht eingerückt. =================================================================== */ #olten .o-heropunkte{list-style:none;margin:0;padding:0; display:flex;flex-direction:column;gap:clamp(14px,1.5vw,20px)} #olten .o-heropunkte li{margin:0;display:block} #olten .o-heropunkte .t-ic{display:inline-block;vertical-align:-.18em; width:1.15em;height:1.15em;flex:none;color:#7FD2F3;margin-right:.5em} @media (max-width:560px){#olten .o-heropunkte{gap:12px}} /* Überschriften noch eine Spur kleiner. */ #olten h1{font-size:clamp(1.54rem, .94rem + 2.4vw, 3.02rem)} @media (max-width:560px){#olten h1{font-size:1.46rem}} /* =================================================================== FÜNF MATERIALFASSUNGEN DES HAUPTKNOPFS Alle sitzen auf demselben blauen Verlauf wie im Hero. Gemeinsam ist der Aufbau: eine Fläche, eine helle Innenkante als Lichtreflex und ein Tiefenschatten. Unterschiedlich ist, wie viel Blau hindurchfällt — und damit der Kontrast der Beschriftung. =================================================================== */ /* 1 — Weiss, heutiger Stand. Deckend, kein Glas. */ #olten .o-k1{background:#FFFFFF;color:var(--petrol); box-shadow:0 16px 38px rgba(0,14,24,.26)} #olten .o-k1:hover{background:#EAF4FA; box-shadow:0 20px 46px rgba(0,14,24,.32)} /* 2 — Klarglas. Das Blau wandert hindurch, Schrift weiss. */ #olten .o-k2{ background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.11)); -webkit-backdrop-filter:blur(22px) saturate(180%); backdrop-filter:blur(22px) saturate(180%); color:#FFFFFF; box-shadow:inset 0 1px 0 rgba(255,255,255,.55), inset 0 0 0 1px rgba(255,255,255,.26), 0 18px 40px rgba(0,14,24,.30)} #olten .o-k2:hover{ background:linear-gradient(180deg,rgba(255,255,255,.32),rgba(255,255,255,.18)); box-shadow:inset 0 1px 0 rgba(255,255,255,.7), inset 0 0 0 1px rgba(255,255,255,.38), 0 22px 48px rgba(0,14,24,.36)} /* 3 — Milchglas. Wirkt weiss, lässt aber Licht durch. */ #olten .o-k3{ background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.72)); -webkit-backdrop-filter:blur(26px) saturate(190%); backdrop-filter:blur(26px) saturate(190%); color:var(--petrol); box-shadow:inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(255,255,255,.5), 0 18px 42px rgba(0,14,24,.28)} #olten .o-k3:hover{ background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(255,255,255,.86)); box-shadow:inset 0 1px 0 #FFFFFF, inset 0 0 0 1px rgba(255,255,255,.7), 0 22px 50px rgba(0,14,24,.34)} /* 4 — Glas mit Lichtkante. Helle Oberkante, cyanfarbener Saum unten: das Material bekommt dadurch eine sichtbare Dicke. */ #olten .o-k4{ background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.12)); -webkit-backdrop-filter:blur(24px) saturate(185%); backdrop-filter:blur(24px) saturate(185%); color:#FFFFFF; box-shadow:inset 0 1.5px 0 rgba(255,255,255,.88), inset 0 -1.5px 0 rgba(127,214,248,.42), inset 0 0 0 1px rgba(255,255,255,.22), 0 20px 46px rgba(0,14,24,.34)} #olten .o-k4:hover{ background:linear-gradient(180deg,rgba(255,255,255,.36),rgba(255,255,255,.18)); box-shadow:inset 0 1.5px 0 #FFFFFF, inset 0 -1.5px 0 rgba(127,214,248,.62), inset 0 0 0 1px rgba(255,255,255,.34), 0 24px 52px rgba(0,14,24,.4)} /* 5 — Glas mit Cyan-Schimmer. Lichtschein aus der oberen linken Ecke, beim Überfahren legt sich ein Hof um den Knopf. */ #olten .o-k5{ background: radial-gradient(120% 170% at 18% 0%, rgba(127,214,248,.36), transparent 62%), linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,.11)); -webkit-backdrop-filter:blur(24px) saturate(195%); backdrop-filter:blur(24px) saturate(195%); color:#FFFFFF; box-shadow:inset 0 1px 0 rgba(255,255,255,.62), inset 0 0 0 1px rgba(255,255,255,.24), 0 20px 48px rgba(0,14,24,.34)} #olten .o-k5:hover{ background: radial-gradient(120% 170% at 18% 0%, rgba(127,214,248,.52), transparent 62%), linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.18)); box-shadow:inset 0 1px 0 rgba(255,255,255,.8), inset 0 0 0 1px rgba(255,255,255,.36), 0 22px 52px rgba(0,14,24,.4), 0 0 34px rgba(0,158,227,.38)} /* Wo keine Unschärfe zur Verfügung steht, würden die durchscheinenden Fassungen zu blass. Sie werden dort deckend. */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ #olten .o-k2,#olten .o-k4,#olten .o-k5{background:rgba(255,255,255,.24)} #olten .o-k3{background:rgba(255,255,255,.94)} } /* --- Bühne der Vergleichsseite ------------------------------------- */ #olten .o-kv-buehne{padding:clamp(52px,5vw,88px) 0 clamp(64px,6vw,104px)} #olten .o-kv-buehne .t-sec-head{margin-bottom:clamp(34px,3.6vw,54px)} #olten .o-kv-zeile{display:grid;grid-template-columns:1fr auto; gap:clamp(24px,3vw,56px);align-items:center; padding:clamp(26px,2.8vw,40px) 0; border-top:1px solid rgba(255,255,255,.20)} #olten .o-kv-zeile:first-of-type{border-top:0;padding-top:0} #olten .o-kv-text h2{margin:0 0 8px;font-size:1.18rem;color:#FFFFFF} #olten .o-kv-text p{margin:0;color:#D6E8F2;max-width:62ch} #olten .o-kv-probe{display:flex;justify-content:flex-end} @media (max-width:760px){ #olten .o-kv-zeile{grid-template-columns:1fr;gap:18px} #olten .o-kv-probe{justify-content:flex-start} } /* =================================================================== HINWEIS UNTER DEN BEIDEN KNÖPFEN Gibt der Karte zugleich die fehlende untere Hälfte: vorher endete sie unmittelbar unter den Knöpfen und wirkte dadurch oberlastig. Weiss auf dem blauen Grund, eine Stufe kleiner als der Lauftext, auf Lesebreite begrenzt und mittig wie der Rest der Karte. =================================================================== */ #olten .v-schlusshinweis{ margin:clamp(22px,2.4vw,32px) auto 0;max-width:52ch; color:#FFFFFF;font-size:var(--t-mittel);font-weight:var(--w-text); line-height:1.55;text-wrap:balance} @media (max-width:560px){#olten .v-schlusshinweis{max-width:none}} /* Die beiden Glasfassungen der Knöpfe wurden zurückgenommen: der Hauptknopf ist wieder deckendes Weiss, der Knopf in der Menüzeile wieder gefülltes Petrol. Die Vergleichsseite knopf-varianten.html bleibt bestehen, falls das Thema wieder aufkommt. */ /* =================================================================== MOBIL UND IPAD PORTRAIT — DURCHGANG 1 UND 2 Gemessen mit einem echten Browser bei 375, 390, 430, 768, 834 und 1024 Pixel Breite. Die folgenden Blöcke beheben, was dabei aufgefallen ist. Der Desktop bleibt unangetastet: alles hier ist auf höchstens 1100 Pixel begrenzt, ausser der Überschriftgrösse, die eine durchgehende Kurve braucht. =================================================================== */ /* 1 — Hero: die drei Blöcke standen unterschiedlich weit auseinander (55, 62 und 83 Pixel), weil jedes Element noch einen eigenen Aussenabstand mitbrachte, der sich zum Zeilenabstand addierte. Jetzt trägt nur der Zeilenabstand. Ausserdem stand die Punkteliste auf dem iPad eingerückt, weil der Hero seine Kinder mittig ausrichtete und die Liste auf 520 Pixel begrenzt war — Überschrift, Liste, Foto und Knopf beginnen jetzt auf derselben Linie. */ @media (max-width:1100px){ #olten .o-heroA .t-heroA{align-items:stretch; row-gap:clamp(26px,3.2vw,34px)} #olten .o-heroA .t-h-copy{gap:clamp(26px,3.2vw,34px)} #olten .o-heroA h1, #olten .o-heroA .o-heropunkte, #olten .o-heroA .t-h-visual, #olten .o-heroA .t-h-photo, #olten .o-heroA .t-hero-cta{margin-top:0;margin-bottom:0} #olten .o-heroA .o-heropunkte{max-width:none} #olten .o-heroA .t-hero-cta{align-self:flex-start} } /* 2 — Die Überschrift wurde zwischen 900 und 1024 Pixel kleiner statt grösser: dort löste eine feste Grösse von 2,6 rem die fliessende Kurve ab. Eine einzige Kurve für alle Breiten. */ #olten h1{font-size:clamp(1.54rem, .94rem + 2.4vw, 3.02rem)} /* 3 — Fuss: zwei Spalten waren auf dem Telefon zu schmal. Die Adresse brach nach «Frohburgstrasse» um, die E-Mail-Adresse lief bis an den Bildschirmrand. Unter 560 Pixel eine Spalte, und lange Adressen dürfen umbrechen. */ @media (max-width:560px){#olten .o-fuss{grid-template-columns:1fr}} @media (max-width:1100px){ /* break-word statt anywhere: so bricht die E-Mail-Adresse am Bindestrich statt mitten im Wort, und nur wenn es nicht anders geht, wird innerhalb eines Wortes getrennt. */ #olten .v-fuss .o-fuss a{overflow-wrap:break-word;word-break:normal;hyphens:none} } /* 4 — Antippbare Flächen: die Fusslinks waren 26 Pixel hoch, die Sprungmarken in Impressum und Datenschutz 34. Beides zu wenig für einen Finger; Apple und Google nennen 44 als Untergrenze. */ @media (max-width:1024px){ #olten .v-fuss .o-fuss a{display:block;padding:9px 0;margin:0} #olten .v-fuss .o-fuss-ende a{display:inline-block;padding:10px 0} #olten .t-toc ol a{display:block;padding:11px 0} } /* 5 — Kleinste Schriftgrössen angehoben. Untergrenze für Fliesstext und Rollen 17 Pixel, für Etiketten in Grossbuchstaben 15. Gilt nur auf Telefon und Tablet. */ @media (max-width:1100px){ #olten .t-role{font-size:1.0625rem} #olten .o-kein-foto{font-size:1rem} #olten .t-prax-kt{font-size:.9375rem} #olten .o-fuss h3{font-size:.9375rem} #olten .v-oder{font-size:1.0625rem} #olten figcaption{font-size:1.0625rem} #olten .o-sprachen span{font-size:1.0625rem} #olten .v-fuss .o-fuss a,#olten .o-fuss p{font-size:1.0625rem} #olten .o-fuss-ende,#olten .v-fuss .o-fuss-ende a{font-size:1rem} } /* 6 — Zwei Nachträge aus der Messung. Erstens: die Überschriftgrösse wurde zwischen 700 und 1000 Pixel von einer festen Regel mit höherem Gewicht bestimmt (#olten .t-hero h1), die meine durchgehende Kurve überstimmte. Deshalb hier dieselbe Kurve noch einmal auf derselben Ebene. Zweitens: der gestapelte Hero galt nur bis 1000 Pixel, die einspaltige Anordnung aber bis 1100. In diesem Zwischenband stand das Foto deshalb unter dem Knopf statt zwischen Liste und Knopf — genau die Breite eines iPad Pro im Hochformat. Das Band bekommt jetzt dieselbe Reihenfolge wie das Telefon. */ #olten .t-hero h1{font-size:clamp(1.54rem, .94rem + 2.4vw, 3.02rem)} @media (min-width:1001px) and (max-width:1100px){ #olten .t-h-copy,#olten .t-h-visual{display:contents} #olten .o-heroA .t-heroA{display:flex;flex-direction:column; align-items:stretch;row-gap:clamp(26px,3.2vw,34px)} #olten .o-heroA h1{order:1} #olten .o-heroA .o-heropunkte{order:2} #olten .o-heroA .t-h-photo{order:3} #olten .o-heroA .t-hero-cta{order:4;align-self:flex-start} } /* 7 — Auf dem iPad war die Kontaktspalte im Fuss 187 Pixel breit; die E-Mail-Adresse passte bis zum Bindestrich nicht hinein und wurde deshalb mitten im Wort getrennt. Die drei Spalten bekommen jetzt ungleiche Anteile: die Kontaktspalte so viel, dass die Adresse am Bindestrich umbrechen kann. */ @media (min-width:561px) and (max-width:1100px){ #olten .o-fuss{grid-template-columns:1fr 1.3fr .78fr} } /* =================================================================== WPFORMS IM AUSSEHEN DER WEBSITE Die Feldstruktur und die Logik der Formulare bleiben unangetastet — das hier ist reine Gestaltung. Grundlage sind dieselben Tokens wie überall: Schriftgrössen, Radien, Linien und Farben. Untergrenze für Eingabefelder und Schaltflächen sind 48 Pixel Höhe. Wer mit dem Finger tippt, trifft sonst daneben, und ein Teil der Leserschaft ist über sechzig. =================================================================== */ #olten .wpforms-container{margin:0;max-width:none} #olten .wpforms-container *, #olten .wpforms-form *{font-family:inherit} /* --- Feld und Beschriftung ------------------------------------------ */ #olten .wpforms-form .wpforms-field{padding:0 0 clamp(18px,2vw,26px)} #olten .wpforms-form .wpforms-field-label{ display:block;margin:0 0 8px; font-size:var(--t-mittel);font-weight:var(--w-label); line-height:1.35;color:var(--ink)} #olten .wpforms-form .wpforms-field-sublabel, #olten .wpforms-form .wpforms-field-description{ margin:7px 0 0;font-size:var(--t-klein);font-weight:var(--w-text); line-height:1.5;color:var(--body);opacity:.82} #olten .wpforms-form .wpforms-required-label{color:var(--cyan-txt); font-weight:var(--w-label);margin-left:.15em} /* --- Eingabefelder --------------------------------------------------- */ #olten .wpforms-form input[type=text], #olten .wpforms-form input[type=email], #olten .wpforms-form input[type=tel], #olten .wpforms-form input[type=url], #olten .wpforms-form input[type=number], #olten .wpforms-form input[type=password], #olten .wpforms-form input[type=date], #olten .wpforms-form select, #olten .wpforms-form textarea{ width:100%;box-sizing:border-box; min-height:48px;padding:12px 15px; font-size:var(--t-mittel);font-weight:var(--w-text);line-height:1.45; color:var(--ink);background:#FFFFFF; border:1px solid var(--line);border-radius:var(--r-sm,12px); box-shadow:inset 0 1px 2px rgba(12,38,50,.04); transition:border-color .22s var(--ease),box-shadow .22s var(--ease)} #olten .wpforms-form textarea{min-height:132px;resize:vertical} #olten .wpforms-form select{ appearance:none;-webkit-appearance:none;padding-right:44px; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300506F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 14px center;background-size:19px} #olten .wpforms-form input::placeholder, #olten .wpforms-form textarea::placeholder{color:var(--body);opacity:.5} #olten .wpforms-form input:focus, #olten .wpforms-form select:focus, #olten .wpforms-form textarea:focus{ outline:none;border-color:var(--cyan); box-shadow:0 0 0 3px rgba(0,158,227,.18)} /* --- Auswahl und Ankreuzfelder --------------------------------------- WPForms gibt das Kästchen je nach Fassung entweder als Geschwister des Labels aus oder darin. Im ersten Fall stand es ausserhalb der getönten Fläche, weil die am Label hing. Deshalb ist jetzt die ganze Zeile der Kasten: Kästchen und Text liegen darin, auf einer Linie, und beide reagieren auf das Überfahren. Das trägt beide Varianten. */ #olten .wpforms-form ul.wpforms-field-required, #olten .wpforms-form .wpforms-field-radio ul, #olten .wpforms-form .wpforms-field-checkbox ul{ list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px} #olten .wpforms-form .wpforms-field-radio li, #olten .wpforms-form .wpforms-field-checkbox li{ display:flex;align-items:flex-start;gap:13px; min-height:48px;padding:11px 13px;margin:0; border-radius:14px;cursor:pointer; transition:background .22s var(--ease)} #olten .wpforms-form .wpforms-field-radio li:hover, #olten .wpforms-form .wpforms-field-checkbox li:hover{ background:rgba(0,158,227,.07)} /* Das Label füllt den Rest der Zeile. Liegt das Kästchen darin, wird das Label selbst zur Zeile — dann greift dieselbe Anordnung. */ #olten .wpforms-form .wpforms-field-radio li label, #olten .wpforms-form .wpforms-field-checkbox li label{ display:flex;align-items:flex-start;gap:13px; flex:1 1 auto;min-width:0;margin:0;padding:0;background:none; font-size:var(--t-mittel);font-weight:var(--w-text);line-height:1.5; color:var(--ink);cursor:pointer} /* appearance ausdrücklich zurück auf „auto": Eine allgemeine Regel weiter oben setzt sie für alle Eingabefelder auf „none", damit Textfelder überall gleich aussehen. Bei Auswahl- und Ankreuzfeldern zeichnet der Browser dann aber gar nichts mehr — sie wären unsichtbar. accent-color färbt den angekreuzten Zustand. */ #olten .wpforms-form input[type=radio], #olten .wpforms-form input[type=checkbox]{ appearance:auto;-webkit-appearance:auto;-moz-appearance:auto; flex:0 0 auto;width:22px;height:22px; margin:2px 0 0; /* auf die erste Textzeile */ accent-color:var(--cyan);cursor:pointer} /* --- Absendeknopf ---------------------------------------------------- Genau dieselben Masse wie die Knöpfe der Website: Radius 18, Polster 16 auf 32, Schriftgrösse 17 bei Gewicht 650, Zeilenhöhe 1,66. Nur so steht er neben einem „Termin buchen" wie aus einem Guss. Farbe und Schatten wie .t-btn-solid. */ #olten .wpforms-form .wpforms-submit-container{padding-top:6px} #olten .wpforms-form button[type=submit], #olten .wpforms-form .wpforms-submit, #olten .wpforms-form input[type=submit]{ display:inline-flex;align-items:center;justify-content:center;gap:10px; min-height:44px;padding:16px 32px; font-family:inherit;font-size:var(--t-mittel);font-weight:var(--w-label); line-height:1.66;letter-spacing:-.014em;text-decoration:none; color:#FFFFFF;background:var(--petrol-mid); border:1px solid transparent;border-radius:18px; cursor:pointer; box-shadow:0 1px 2px rgba(0,42,62,.10), 0 10px 22px -12px rgba(0,64,94,.38); transition:background .22s var(--ease),box-shadow .22s var(--ease), transform .22s var(--ease)} #olten .wpforms-form button[type=submit]:hover, #olten .wpforms-form .wpforms-submit:hover, #olten .wpforms-form input[type=submit]:hover{ color:#FFFFFF;background:var(--petrol); box-shadow:0 2px 4px rgba(0,42,62,.12), 0 14px 30px -14px rgba(0,64,94,.40); transform:translateY(-1px)} #olten .wpforms-form button[type=submit]:focus-visible, #olten .wpforms-form input[type=submit]:focus-visible{ outline:2px solid var(--cyan-txt);outline-offset:3px} /* --- Fehler und Bestätigung ------------------------------------------ */ #olten .wpforms-form label.wpforms-error, #olten .wpforms-form em.wpforms-error{ display:block;margin:8px 0 0; font-size:var(--t-klein);font-weight:var(--w-label);color:#B3261E} #olten .wpforms-form input.wpforms-error, #olten .wpforms-form select.wpforms-error, #olten .wpforms-form textarea.wpforms-error{ border-color:#B3261E;box-shadow:0 0 0 3px rgba(179,38,30,.14)} #olten .wpforms-confirmation-container-full, #olten div[submit-success]>.wpforms-confirmation-container-full{ margin:0;padding:clamp(20px,2.4vw,30px); background:rgba(0,158,227,.07); border:1px solid rgba(0,158,227,.24);border-radius:var(--r-md); font-size:var(--t-mittel);line-height:1.6;color:var(--ink)} #olten .wpforms-confirmation-container-full p:last-child{margin-bottom:0} /* Auf schmalen Geräten füllt der Absendeknopf die Breite — er ist dann nicht zu verfehlen. */ @media (max-width:560px){ #olten .wpforms-form button[type=submit], #olten .wpforms-form .wpforms-submit{width:100%} } /* =================================================================== SCHMALE GERÄTE: EINE SPALTE UND MITTIGE AUSRICHTUNG Bis 640 Pixel — das deckt alle Telefone ab, das kleinste iPad im Hochformat beginnt erst bei 768 und bleibt unberührt. =================================================================== */ @media (max-width:640px){ /* 1 — Das Praxisteam untereinander statt zu zweit nebeneinander. Zwei Spalten liessen auf dem Telefon nur rund 160 Pixel je Foto; einspaltig sind es über 340, und die Gesichter sind erkennbar. */ #olten .o-mpa{grid-template-columns:1fr;max-width:420px; gap:clamp(22px,5vw,32px)} /* 2 — Die Glaskarten in den blauen Seitenköpfen mittig: Symbol oben, Bezeichnung und Wert darunter, alles auf einer Achse. Auf einer Spalte wirkt linksbündig mit Symbol daneben unruhig, weil die Symbole unterschiedlich breite Wörter anführen. */ #olten .o-seitenkopf .o-kontaktliste > li, #olten .o-seitenkopf .o-zeile-link{ justify-items:center;text-align:center} #olten .o-seitenkopf .o-zeile-link{margin-left:0;margin-right:0; padding-left:0;padding-right:0} #olten .o-seitenkopf .o-kontaktliste .t-ibox{margin:0 auto} #olten .o-seitenkopf .o-danke-karte{text-align:center} /* 3 — Der Hero ebenso: Überschrift, die drei Aussagen und der Knopf auf einer Mittelachse. Die Symbole stehen im Textfluss, wandern also mit. */ /* Überschrift und Knopf mittig — beides kurz, beides je ein Objekt. Die drei Aussagen dagegen linksbündig: sie brechen auf zwei bis drei Zeilen um, und bei zentriertem Umbruch muss das Auge auf jeder Zeile den Anfang neu suchen. Der Block als Ganzes steht mittig, seine Zeilen beginnen an derselben Kante. */ #olten .o-heroA .t-h-copy, #olten .o-heroA h1{text-align:center} #olten .o-heroA .o-heropunkte{text-align:left; width:max-content;max-width:100%;margin-left:auto;margin-right:auto} #olten .o-heroA .o-heropunkte li{text-align:left} #olten .o-heroA .t-heroA{align-items:center} #olten .o-heroA .t-hero-cta{justify-content:center;align-self:center} #olten .o-heroA .t-h-photo{width:100%} } /* =================================================================== KARTE AUF SCHMALEN GERÄTEN Im zweispaltigen Aufbau bekommt die Karte ihre Höhe von der Nachbarspalte, deshalb height:100%. Sobald der Abschnitt einspaltig wird, hat sie keinen Bezug mehr und fällt auf die Standardhöhe eines iframe zurück — 150 Pixel, ein Streifen. Hier bekommt sie wieder ein eigenes Mass. =================================================================== */ @media (max-width:1100px){ #olten .o-anfahrt2 .o-karte, #olten .o-anfahrt2 .o-karte iframe{height:auto} #olten .o-anfahrt2 .o-karte iframe{height:clamp(300px,46vh,420px)} } /* =================================================================== SCHRIFTSTAFFELUNG AUF SCHMALEN GERÄTEN Vorher war der Beschreibungstext eines Arztes mit 20,9 Pixel grösser als sein Name mit 20,8 und fast so gross wie der Sektionstitel mit 21,8 — drei Ebenen, praktisch nicht zu unterscheiden. Jetzt eine klare Treppe, und alle Sektionstitel tragen dieselbe Grösse: Seitentitel 26 px Sektionstitel 24 px auf allen Seiten gleich Einleitung 18 px Name, Titel 20 px Fliesstext 17 px Rolle, Etikett 16 px =================================================================== */ @media (max-width:640px){ #olten h1{font-size:1.62rem;line-height:1.14} #olten .t-sec-head h2{font-size:1.5rem;line-height:1.22; letter-spacing:-.015em} #olten .t-sec-head .t-lede{font-size:1.125rem;line-height:1.55} /* Zeilentitel in den Karten liegen eine Stufe darunter und dürfen nicht mit den Sektionstiteln verwechselt werden. */ #olten .o-schritte h2{font-size:1.125rem;line-height:1.3} #olten .t-doc h3, #olten .o-mpa-k figcaption b{font-size:1.25rem;line-height:1.3} #olten .t-doc .t-role, #olten .o-mpa-k figcaption span{font-size:1rem;line-height:1.4} #olten .t-doc p, #olten .t-doc > div p{font-size:1.0625rem;line-height:1.6} /* Sektionsköpfe mittig, wie die Karten und der Hero. */ #olten .t-sec-head{text-align:center} #olten .t-sec-head .t-lede{margin-left:auto;margin-right:auto} #olten .t-sec-head::after{margin-left:auto;margin-right:auto} } /* =================================================================== ALLE SEITENTITEL AUF DIESELBE KURVE Die Startseite lief über .t-hero h1, die Unterseiten über .o-seitenkopf h1 und die Rechtstexte über .t-legal h1 — drei verschiedene Kurven. Auf dem Telefon ergab das 24,6 Pixel auf der Startseite und 32 auf allen anderen. Jetzt eine Kurve für alle. =================================================================== */ #olten .t-hero h1, #olten .o-seitenkopf h1, #olten .t-legal h1{font-size:clamp(1.54rem, .94rem + 2.4vw, 3.02rem)} /* Auf dem Telefon liegt der Seitentitel eine deutliche Stufe über den Sektionstiteln: 28 gegen 24 Pixel. */ @media (max-width:640px){ #olten h1, #olten .t-hero h1, #olten .o-seitenkopf h1, #olten .t-legal h1{font-size:1.75rem;line-height:1.16} } /* =================================================================== LOGO AUF DEM TELEFON In Ruhe eine Spur grösser als bisher (46 statt 40 Pixel), beim Scrollen dafür deutlich kleiner (34 statt 36) — der Unterschied war mit 10 Prozent kaum wahrnehmbar, jetzt sind es 26. Verkleinert wird über transform, nicht über die Höhe: eine Höhenänderung stösst bei jedem Scrollschritt ein neues Layout an und ruckelt. Die Kopfzeile behält ihre Höhe, das Logo schrumpft darin an der linken Kante. =================================================================== */ @media (max-width:640px){ #olten .t-logo img{height:46px;transform-origin:left center; transform:scale(1); transition:transform .52s cubic-bezier(.34,1.32,.44,1); will-change:transform} #olten header.t-scrolled .t-logo img{height:46px;transform:scale(.74)} } /* Letzte Etiketten unter 15 Pixel angehoben — dieselben Elemente, die auf dem Telefon schon grösser sind. Damit gibt es auf keiner Breite mehr Text unter 15 Pixel. */ #olten .o-kein-foto{font-size:.9375rem} #olten .t-prax-kt{font-size:.9375rem} #olten .o-fuss h3{font-size:.9375rem} /* =================================================================== MEHRTEILIGE FELDER (Vorname / Nachname und ähnliche) WPForms legt solche Felder als Flex-Zeile mit space-between an, gibt den beiden Hälften aber keine Breite. Sobald das Eingabefeld darin auf width:100% steht, entsteht ein Zirkelschluss: der Kasten richtet sich nach dem Feld, das Feld nach dem Kasten. Der Browser fällt dann auf die Standardbreite eines Eingabefelds zurück — rund 220 Pixel — und space-between verteilt den Rest als Lücken. Genau das war der Versatz beim Namensfeld. Hier bekommen die Teile eine Breite, und die Zeile beginnt wieder links wie alle anderen Felder. =================================================================== */ #olten .wpforms-form .wpforms-field-row{ display:flex;flex-wrap:wrap;justify-content:flex-start; gap:clamp(12px,1.4vw,18px);width:100%} #olten .wpforms-form .wpforms-field-row-block{ flex:1 1 0;min-width:0;margin:0;padding:0} /* flex-basis 0 statt calc(50% − Abstand): Bei der Prozentrechnung blieben rund 13 Pixel Rest, und der landete vor dem ersten Feld — „Vorname" stand dadurch eingerückt gegenüber den Feldern darüber und darunter. Mit Basis 0 teilen die Teile den verfügbaren Platz restlos unter sich auf, die Zeile beginnt exakt an derselben Kante wie alle anderen Felder. Die Zahl vor dem Schrägstrich gibt das Verhältnis an: 1 zu 1, 1 zu 2, 1 zu 3. */ #olten .wpforms-form .wpforms-field-row-block.wpforms-one-half{flex:1 1 0} #olten .wpforms-form .wpforms-field-row-block.wpforms-one-third{flex:1 1 0} #olten .wpforms-form .wpforms-field-row-block.wpforms-two-thirds{flex:2 1 0} #olten .wpforms-form .wpforms-field-row-block.wpforms-one-fourth{flex:1 1 0} #olten .wpforms-form .wpforms-field-row-block.wpforms-three-fourths{flex:3 1 0} #olten .wpforms-form .wpforms-field-row-block input, #olten .wpforms-form .wpforms-field-row-block select{width:100%} #olten .wpforms-form .wpforms-field-row-block .wpforms-field-sublabel{ margin-top:7px} @media (max-width:560px){ #olten .wpforms-form .wpforms-field-row-block.wpforms-one-half, #olten .wpforms-form .wpforms-field-row-block.wpforms-one-third, #olten .wpforms-form .wpforms-field-row-block.wpforms-two-thirds{ flex:1 1 100%} } /* =================================================================== ABSENDEBEREICH: MEHR LUFT, MITTIG Der Knopf behält die Masse der Website-Knöpfe. Verändert wird nur der Raum darum: mehr Abstand zum Prüffeld darüber und zur unteren Kartenkante. Prüffeld und Knopf stehen auf derselben Mittelachse, auf allen Bildschirmbreiten. =================================================================== */ #olten .wpforms-form .wpforms-recaptcha-container, #olten .wpforms-form .wpforms-field-captcha, #olten .wpforms-form div[class*="recaptcha"]{ display:flex;justify-content:center; margin:clamp(20px,2.4vw,32px) 0 0;padding:0} #olten .wpforms-form .wpforms-submit-container{ display:flex;justify-content:center; margin:clamp(22px,2.6vw,34px) 0 clamp(6px,1vw,12px);padding:0} /* =================================================================== TRENNLINIE ZWISCHEN ADRESSE UND TERMINBUCHUNG AUF SCHMALEN GERÄTEN In zwei Spalten stehen beide in der obersten Reihe und dürfen keine Linie über sich haben. Sobald die Karte einspaltig wird, stehen sie untereinander — dann fehlte zwischen ihnen die Linie, während alle anderen Zeilen eine hatten. Hier bekommt nur noch die allererste Zeile keine. =================================================================== */ @media (max-width:759px){ #olten .o-zweispaltig > li.o-erste-reihe:not(:first-child){ border-top:1px solid var(--line); padding-top:clamp(18px,1.9vw,26px)} } /* =================================================================== SYMBOL UND TITEL AUF EINER ZEILE (schmale Geräte) Unter 560 Pixel stellte die Basis diese Listen einspaltig: Symbol oben, Titel darunter, Text darunter — drei Zeilen für das, was eine sein sollte. Jetzt stehen Symbol und Titel nebeneinander, der Beschreibungstext läuft darunter über die volle Breite und beginnt an derselben Kante wie das Symbol. So bleibt die Zeilenlänge gross und der Eintrag beginnt sichtbar mit seinem Symbol. Die Kontaktkarte ist ausgenommen: dort liegt der ganze Eintrag in einem Link und steht bewusst mittig. =================================================================== */ @media (max-width:560px){ #olten .o-schritte:not(.o-kontaktliste) > li{ display:grid;grid-template-columns:auto 1fr; column-gap:14px;row-gap:0;align-items:center} #olten .o-schritte:not(.o-kontaktliste) > li > .t-ibox{ grid-column:1;grid-row:1;margin:0} /* :not(.t-ibox) ist wesentlich — der Symbolkasten ist ebenfalls ein div und würde sonst mitkollabieren. */ #olten .o-schritte:not(.o-kontaktliste) > li > div:not(.t-ibox){display:contents} #olten .o-schritte:not(.o-kontaktliste) > li > div:not(.t-ibox) > h2, #olten .o-schritte:not(.o-kontaktliste) > li > div:not(.t-ibox) > h3{ grid-column:2;grid-row:1;margin:0;align-self:center} #olten .o-schritte:not(.o-kontaktliste) > li > div:not(.t-ibox) > p{ grid-column:1 / -1;grid-row:2;margin:10px 0 0} } /* =================================================================== ANFAHRT: SYMBOL UND TITEL AUF EINER ZEILE Wie in den übrigen Karten. Das Symbol stand darüber, der Titel darunter, der Text wieder darunter — drei Zeilen für einen Eintrag. Jetzt teilen sich Symbol und Titel eine Zeile, der Text läuft darunter über die volle Breite und beginnt an derselben Kante wie das Symbol. Gilt auf allen Bildschirmbreiten. =================================================================== */ #olten .o-weg{display:grid;grid-template-columns:auto 1fr; column-gap:14px;row-gap:0;align-items:center} #olten .o-weg > .t-ibox{grid-column:1;grid-row:1;margin:0} #olten .o-weg > h2, #olten .o-weg > h3{grid-column:2;grid-row:1;margin:0;align-self:center} #olten .o-weg > p{grid-column:1 / -1;grid-row:2;margin:10px 0 0;max-width:none} /* Der Knopf „Route planen" klebte am letzten Satz. Etwas Luft dazwischen. */ #olten .o-wege + .t-btn, #olten .o-karte-innen .o-wege + .t-btn{margin-top:clamp(18px,2vw,26px)} #olten .o-weg:last-child > p{margin-bottom:0} /* =================================================================== SCHLUSSZEILE DES FUSSES AUF TELEFON UND TABLET Copyright und die beiden Rechtslinks standen über space-between an den äusseren Enden. Sobald die Zeile umbrach, landeten die Links irgendwo in der Mitte — jedenfalls nicht auf der Kante der Spalten darüber. Jetzt stehen beide untereinander und beginnen an derselben Linie wie „Adresse", „Kontakt" und „Seiten". Auf dem Desktop bleibt es bei Copyright links, Links rechts. =================================================================== */ @media (max-width:699px){ #olten .o-fuss-ende{flex-direction:column;align-items:flex-start; justify-content:flex-start;gap:12px} #olten .v-fuss .o-fuss-ende a{margin-left:0;margin-right:22px} #olten .v-fuss .o-fuss-ende a:last-child{margin-right:0} } /* Nachtrag: Die Grenze lag bei 1100 Pixel — damit standen Copyright und die beiden Rechtslinks noch auf dem iPad im Hochformat untereinander, obwohl sie zusammen nur 542 von 612 Pixeln brauchen. Ab 700 Pixel stehen sie deshalb wieder auf einer Zeile, links das Copyright, rechts die Links — genau wie auf dem Desktop. Darunter reicht die Breite tatsaechlich nicht, dort bleibt es untereinander. */ @media (min-width:700px){ #olten .o-fuss-ende{flex-direction:row;align-items:baseline; justify-content:space-between;flex-wrap:wrap;gap:10px 26px} #olten .v-fuss .o-fuss-ende a{margin-left:22px;margin-right:0} #olten .v-fuss .o-fuss-ende a:first-child{margin-left:0} } /* =================================================================== ÄRZTEKARTEN AUF DEM TABLET IM HOCHFORMAT Zwischen 761 und 1000 Pixel stand die Karte zweispaltig: Foto links, Text rechts, beide je rund 292 Pixel. Das sind etwa 28 Zeichen pro Zeile — jeder Satz zerfiel in vier bis fünf Fetzen, und rechts neben den Sprachfeldern blieb die halbe Fläche leer. Zwei Bänder statt einem: 761–1000 eine Ärztin pro Reihe, Foto oben, Text darunter über die volle Breite. Rund 59 Zeichen pro Zeile statt 28. 1001–1100 zwei nebeneinander, ebenfalls Foto oben. Rund 45 bis 49 Zeichen, und der Abschnitt wird nur halb so lang. Ab 1101 bleibt es beim bisherigen Aufbau mit Foto links. =================================================================== */ @media (min-width:761px) and (max-width:1100px){ #olten .t-doc, #olten .t-doc.t-flip{grid-template-columns:1fr;gap:clamp(18px,2.2vw,26px)} #olten .t-doc .t-doc-media{order:0} #olten .t-doc .t-ph{aspect-ratio:3/2} } /* Erst ab 1001 Pixel wird der Satzspiegel breiter als 612 Pixel — vorher ergäben zwei Spalten wieder nur 28 Zeichen. */ @media (min-width:1001px) and (max-width:1100px){ #olten .t-docs{display:grid;grid-template-columns:1fr 1fr; gap:clamp(34px,4vw,54px) clamp(28px,3.2vw,42px);align-items:start} /* Die Trennlinien zwischen den Einträgen ergeben nebeneinander keinen Sinn mehr. */ #olten .t-docs > .t-doc{border-top:0;padding-top:0} } /* =================================================================== TABLET IM HOCHFORMAT — ZWEI WEITERE STELLEN 1 · Anfahrt. Karte und Wegbeschreibung standen bis 1100 Pixel nebeneinander. Die rechte Spalte war dabei rund 310 Pixel breit — etwa 27 Zeichen pro Zeile, also drei Wörter. Gleichzeitig blieb unter der Karte eine grosse leere Fläche, weil die Spalten unterschiedlich hoch sind. Jetzt untereinander: Karte über die volle Breite, die drei Wege darunter. 2 · Die anderen Praxen. Drei Karten in einem Flex-Kasten mit Umbruch: auf dem iPad passten nur zwei nebeneinander, die dritte rutschte allein in eine zweite Reihe. Ab 681 Pixel stehen sie in einem Raster aus drei gleichen Spalten — auf einem iPad Pro 11 im Hochformat also in einer Zeile. =================================================================== */ @media (max-width:1100px){ #olten .o-anfahrt2{grid-template-columns:1fr; gap:clamp(22px,2.6vw,32px)} } @media (min-width:681px) and (max-width:1100px){ #olten .t-prax{display:grid;grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.2vw,26px);align-items:stretch;justify-content:stretch} #olten .t-prax > .t-prax-c{width:auto;max-width:none;flex:none} } /* Nach dem Untereinanderlegen lief der Wegtext auf dem iPad Pro über die volle Breite — über hundert Zeichen pro Zeile, zu lang zum Lesen. Ab 1001 Pixel stehen die drei Wege deshalb nebeneinander, und generell ist die Zeile auf 62 Zeichen begrenzt. */ #olten .o-weg > p{max-width:62ch} @media (min-width:1001px) and (max-width:1100px){ #olten .o-anfahrt2 .o-wege{display:grid;grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,30px);align-items:start} #olten .o-anfahrt2 .o-wege .o-weg{padding:0;border-top:0} #olten .o-anfahrt2 .o-weg > p{max-width:none} } /* =================================================================== VORTEILSKARTEN AUF DEM TABLET Der Satzspiegel ist zwischen 761 und 1000 Pixel nur 612 breit. Drei Karten darin ergaben 189 Pixel je Karte — elf Zeichen pro Zeile, also zwei Wörter. Zwei Karten waren mit neunzehn Zeichen kaum besser. In diesem Band steht deshalb eine Karte pro Reihe; sie bekommt damit rund 44 Zeichen. Ab 1001 Pixel wird der Satzspiegel breiter: dort zwei Karten nebeneinander mit rund 34 Zeichen. Ab 1101 bleibt es bei drei. =================================================================== */ @media (min-width:761px) and (max-width:1000px){ #olten .o-flexraster{display:grid;grid-template-columns:1fr; gap:clamp(16px,2vw,22px)} #olten .o-flexraster > *{width:auto;max-width:none;flex:none} } @media (min-width:1001px) and (max-width:1100px){ #olten .o-flexraster{display:grid;grid-template-columns:1fr 1fr; gap:clamp(18px,2.2vw,26px)} #olten .o-flexraster > *{width:auto;max-width:none;flex:none} } /* Auf sehr schmalen Telefonen frisst das Kartenpolster von 26 Pixel je Seite spürbar Zeilenbreite. Dort etwas knapper. */ @media (max-width:400px){ #olten .o-flexraster > *{padding:26px 20px} } /* =================================================================== MENÜKNOPF OPTISCH AUF DIE INHALTSKANTE Der Knopf ist 48 bis 52 Pixel breit, sein Symbol 26 — es sitzt also zentriert und endet 11 bis 13 Pixel vor dem Rand des Knopfes. Der Knopfkasten selbst steht zwar bündig mit den Karten darunter, das sichtbare Symbol aber nicht. Links liegt das Logo unmittelbar auf der Kante, rechts entsteht dadurch eine Schieflage. Der negative Aussenabstand schiebt den Knopf um genau diesen Betrag hinaus, sodass das Symbol auf der Kante steht. Die antippbare Fläche bleibt vollständig erhalten — sie ragt lediglich in den Seitenrand hinein, wo ohnehin nichts liegt. =================================================================== */ #olten .t-burger{margin-right:-11px} /* Knopf 48 px, Symbol 26 */ @media (min-width:401px){ #olten .t-burger{margin-right:-13px} /* Knopf 52 px, Symbol 26 */ } /* =================================================================== DANKESSEITE Vier Zeilen brauchen kein blaues Kopfband und keine Karte. Der Block sitzt mittig zwischen Menüzeile und Fusszeile, mit genug Höhe, dass er nicht am oberen Rand klebt. Der Haken ist das einzige Bildzeichen. =================================================================== */ #olten .o-danke{display:flex;align-items:center;justify-content:center; min-height:clamp(420px,58vh,620px); padding:clamp(48px,6vw,88px) 0} #olten .o-danke-innen{display:flex;flex-direction:column;align-items:center; text-align:center;gap:clamp(16px,2vw,22px);max-width:46rem} #olten .o-danke-haken{display:flex;align-items:center;justify-content:center; width:clamp(56px,6vw,68px);height:clamp(56px,6vw,68px); border-radius:50%; background:color-mix(in srgb, var(--cyan) 12%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cyan) 26%, transparent); color:var(--cyan-txt);margin-bottom:clamp(4px,1vw,10px)} #olten .o-danke-haken .t-ic{width:clamp(26px,2.8vw,32px);height:clamp(26px,2.8vw,32px); stroke-width:2.1} #olten .o-danke h1{margin:0} #olten .o-danke-satz{margin:0;max-width:30rem; font-size:var(--t-gross);line-height:1.55;color:var(--body)} /* Die Knopfzeile darf breiter sein als der Fliesstext darüber, sonst bricht sie zwischen „oder" und dem zweiten Knopf um — und der steht dann allein und versetzt darunter. Bis 700 Pixel stehen die drei Teile ohnehin untereinander, darüber nebeneinander in einer Zeile. */ #olten .o-danke-tun{display:flex;align-items:center;justify-content:center; flex-wrap:nowrap;gap:clamp(14px,1.8vw,22px); margin-top:clamp(18px,2.6vw,30px);width:100%} #olten .o-danke-tun .t-btn{flex:0 0 auto;white-space:nowrap} #olten .o-danke-oder{flex:0 0 auto; font-size:var(--t-mittel);font-weight:var(--w-text); color:var(--body);opacity:.7} @media (max-width:700px){ #olten .o-danke-tun{flex-direction:column;gap:12px} #olten .o-danke-tun .t-btn{width:100%;max-width:22rem} } /* Die Seite füllt mindestens den Bildschirm, damit unter der Fusszeile kein weisser Streifen stehen bleibt: Der Rahmen wird zur Spalte, der Hauptteil nimmt den übrigen Platz. */ #olten{display:flex;flex-direction:column;min-height:100vh} #olten > main{flex:1 0 auto} #olten > footer{flex:0 0 auto} /* =================================================================== ANFAHRT NEU: KARTE OBEN, HAUS UND WEGE DARUNTER Die Karte nimmt die ganze Zeile — daneben steht nichts mehr, und die leere Fläche auf dem Tablet verschwindet. Darunter zwei Spalten: links das Gebäude, rechts die Glaskarte mit Auto, Bahn und Bus. Unter 900 Pixel liegen sie untereinander. =================================================================== */ #olten .o-karte-breit{width:100%;margin-bottom:clamp(22px,2.6vw,34px)} #olten .o-karte-breit .o-karte{width:100%} #olten .o-karte-breit .o-karte iframe{width:100%; height:clamp(300px,44vh,460px)} #olten .o-anfahrt3{display:grid;grid-template-columns:1fr 1fr; gap:clamp(22px,2.8vw,40px);align-items:start} #olten .o-anfahrt-haus{margin:0} #olten .o-anfahrt-haus .t-ph{border-radius:var(--r-lg);overflow:hidden; aspect-ratio:3/2} #olten .o-anfahrt-haus img{width:100%;height:100%;object-fit:cover;display:block} #olten .o-anfahrt-haus figcaption{margin-top:10px;text-align:center; font-size:var(--t-klein);font-weight:var(--w-label);color:var(--cyan-txt)} /* Erst ab 1001 Pixel wird der Satzspiegel breiter als 612; vorher ergäben zwei Spalten nur rund 21 Zeichen pro Zeile. */ @media (max-width:1000px){ #olten .o-anfahrt3{grid-template-columns:1fr} #olten .o-anfahrt-haus .t-ph{aspect-ratio:16/9} } /* =================================================================== FUSSZEILE: ADRESSE UND KONTAKT SIND EINE SPALTE Bisher standen sie getrennt nebeneinander. Wer eine Praxis sucht, sucht beides zusammen — und die Trennung kostete die Kontaktspalte so viel Breite, dass die Mailadresse auf dem Tablet in drei Zeilen zerfiel. Jetzt eine Spalte: Strasse, Ort mit Stockwerk, Telefon, SMS, Mail. Der frei gewordene Platz geht an eben diese Spalte. =================================================================== */ #olten .o-fuss{grid-template-columns:1.3fr 1.55fr .95fr} @media (max-width:1100px){ #olten .o-fuss{grid-template-columns:1.6fr .95fr} #olten .o-fuss-marke{grid-column:1 / -1} } @media (max-width:560px){#olten .o-fuss{grid-template-columns:1fr}} /* Die Adresse ist der erste Eintrag der Spalte und traegt zwei Zeilen. Danach folgt etwas mehr Luft als zwischen den Nummern, damit die Gruppe als Block gelesen wird. */ #olten .v-fuss .o-fuss > div > a:first-of-type{margin-bottom:15px} /* =================================================================== LOGO IM KOPF AUF DEM TABLET Auf dem Desktop ist es 64 Pixel hoch, auf dem Telefon 46. Dazwischen stand es bei 48 — also praktisch auf Telefongroesse, obwohl die Kopfzeile dort 72 Pixel hoch ist und deutlich mehr Platz bietet. Jetzt 58 Pixel, die Kopfzeile waechst auf 88 mit. Das Verhaeltnis von Logo zu Bandhoehe entspricht damit dem Desktop. =================================================================== */ @media (min-width:641px) and (max-width:1000px){ #olten .t-logo img{height:58px} #olten header.t-scrolled .t-logo img{height:58px;transform:scale(.8)} #olten .t-hd{min-height:88px} } /* =================================================================== TABLET IM HOCHFORMAT: INHALTSSPALTE BREITER Die Inhaltsspalte war zwischen 700 und 1000 Pixel auf 660 gedeckelt. Auf einem iPad Pro 11 im Hochformat (834) blieben dadurch links und rechts je 111 Pixel leer — die Seite wirkte in die Mitte gequetscht, waehrend das weisse Kopfband und das blaue Fussband ueber die volle Breite laufen. Der Deckel stammt aus einer Zeit, in der auf dem Tablet fast alles einspaltig stand; inzwischen stehen Aerztekarten, Leistungen und Kontaktkacheln dort zweispaltig. Neu 780 Pixel. Auf 834 bleiben damit 27 Pixel Rand je Seite über dem normalen Innenabstand, auf 768 und darunter greift ohnehin die Bildschirmbreite. Kopf, Baender und Fuss teilen dieselbe Huelle und bleiben deshalb weiterhin exakt buendig. =================================================================== */ @media (min-width:700px) and (max-width:1000px){ #olten .t-wrap{max-width:830px} /* Knoepfe, die auf dem Tablet auf volle Breite gezogen wurden, waeren jetzt ueber 700 Pixel lang. Ein Knopf dieser Laenge liest sich nicht mehr als Knopf. Deshalb eine Obergrenze; er bleibt in seiner Spalte zentriert. */ #olten .t-hero-cta .t-btn, #olten .t-contact-actions .t-btn, #olten .v-cta .t-btn{max-width:520px;margin-left:auto;margin-right:auto} } /* =================================================================== MITTELACHSE AUF TELEFON UND TABLET Bisher stand unter einem mittig gesetzten Foto ein linksbuendiger Textblock. Bei kurzen Zeilen — «Praktische Aerztin», zwei Zeilen Beschreibung, drei Sprachfelder — sass dieser Block sichtbar an der linken Kante, waehrend Foto und Karte darum herum zentriert waren. Genau das wirkt schief. Ab hier steht auf einspaltigen Breiten alles auf einer Achse. Sobald die Karte wieder zweispaltig wird (ab 1101 Pixel, Foto links), bleibt der Text linksbuendig — dort stimmt die Kante. =================================================================== */ @media (max-width:1100px){ #olten .t-docs:not(.o-leistungszeilen) .t-doc > div:not(.t-doc-media){text-align:center} #olten .t-docs:not(.o-leistungszeilen) .t-doc .o-sprachen{justify-content:center} } /* Nachtrag: Die Regel stand zuerst auf .t-doc allein. Dieselbe Klasse traegt aber auch die Leistungszeilen — dort stehen drei bis vier Zeilen Fliesstext, und zentriert muss das Auge auf jeder Zeile den Anfang neu suchen. Zentriert wird deshalb nur, was in .t-docs steht: die Aerzte- und MPA-Karten mit ihren kurzen Angaben. */ /* Die drei Aussagen im Hero ebenfalls auf die Mittelachse. Bisher stand der Block als Ganzes mittig, seine Zeilen aber linksbuendig — im Zusammenspiel mit der zentrierten Ueberschrift und dem zentrierten Knopf las sich das als Fehler, nicht als Absicht. Das Symbol steht weiterhin im Textfluss und wandert mit. */ @media (max-width:1000px){ #olten .o-heroA .o-heropunkte{text-align:center; width:auto;max-width:100%;margin-left:auto;margin-right:auto} #olten .o-heroA .o-heropunkte li{text-align:center} } /* Nachtrag aus der Messung, unabhaengig von den Aenderungen oben: Die Kopfkarte der Unterseiten ist auf 1100 Pixel gedeckelt und folgt damit nicht der Inhaltsspalte. Zwischen 900 und 1000 Pixel ergab das bis zu 89 Zeichen pro Zeile — deutlich ueber den 75, ab denen das Auge die naechste Zeile schwerer findet. Der Absatz bekommt deshalb eine eigene Lesebreite. */ @media (max-width:1100px){ /* Kein Zentrieren: In einer Liste steht der Text neben seinem Symbol, die linke Kante muss stehen bleiben. Die Zeile endet einfach frueher. */ #olten .o-kopfkarte .o-schritte p{max-width:64ch} #olten .o-kopfkarte > p{max-width:64ch;margin-left:auto;margin-right:auto} } /* Folge daraus: Auf dem Tablet standen die Knoepfe bereits mittig und die drei Aussagen jetzt ebenfalls — nur die Ueberschrift blieb linksbuendig. Von drei Elementen auf einer Achse scherte damit genau eines aus, und ausgerechnet das groesste. Sie zieht deshalb nach; auf dem Telefon war sie ohnehin schon mittig. */ @media (min-width:641px) and (max-width:1000px){ #olten .o-heroA h1, #olten .o-heroA .t-h-copy{text-align:center} #olten .o-heroA .t-heroA{align-items:center} #olten .o-heroA .t-hero-cta{justify-content:center;align-self:center} } /* =================================================================== E-MAIL-ADRESSEN BRECHEN NIE «info@hausarztzentrum-» / «olten.ch» ist nicht nur unschoen: Der Umbruch faellt auf einen Bindestrich, und wer die Adresse abtippt, kann den Bindestrich fuer einen Zeilenumbruch halten — oder den Umbruch fuer einen Bindestrich. Beides ergibt eine falsche Adresse. Deshalb zweierlei. Erstens bricht die Adresse grundsaetzlich nicht mehr um. Zweitens bekommt sie den noetigen Platz: Zwischen 561 und 1000 Pixel steht die Kontaktkarte zweispaltig, dort waren nur 259 Pixel je Spalte da, gebraucht werden 269. Die beiden Mailzeilen laufen deshalb ueber die volle Breite — sie sind die einzigen Eintraege, deren Wert nicht kuerzbar ist. =================================================================== */ #olten .o-zeile-link p{white-space:nowrap} @media (min-width:561px) and (max-width:1000px){ #olten .o-kontaktliste > li:nth-child(n+5){grid-column:1 / -1} } /* Auf schmalen Telefonen (ab 480 abwaerts) reicht auch die volle Zeilenbreite nicht für 19 Pixel. Dort 15 Pixel — die Adresse bleibt damit auf einer Zeile und ueber der Lesbarkeitsgrenze. */ @media (max-width:480px){ #olten .o-kontaktliste a[href^="mailto:"] p{font-size:.9375rem} } /* =================================================================== IMPRESSUM AUF DER LINIE VON «SEITEN» Die Schlusszeile war ein eigener Flexkasten mit space-between: das Copyright links am Satzspiegel, die beiden Rechtslinks rechts am Satzspiegel. Rechts aussen steht darueber aber keine Spaltenkante, sondern der Zeilenfall der Seitenliste — die Linien liefen also aneinander vorbei. Auf dem Desktop uebernimmt die Schlusszeile deshalb dasselbe Raster wie die Spalten darueber. Das Copyright sitzt in Spalte eins, die Rechtslinks in Spalte drei — also exakt unter «SEITEN». =================================================================== */ @media (min-width:1101px){ #olten .o-fuss-ende{display:grid; grid-template-columns:1.3fr 1.55fr .95fr; column-gap:clamp(22px,3vw,44px);align-items:baseline} #olten .o-fuss-ende > span:first-child{grid-column:1} #olten .o-fuss-ende > span:last-child{grid-column:3;justify-self:start} #olten .v-fuss .o-fuss-ende a{margin-left:0;margin-right:26px} #olten .v-fuss .o-fuss-ende a:last-child{margin-right:0} } /* In der Fusszeile steht die Adresse hinter dem Wort «E-Mail:». Passt beides zusammen nicht in eine Zeile, muss der Umbruch nach dem Doppelpunkt fallen und niemals in die Adresse hinein. Deshalb ist die Adresse dort ein eigenes, nicht umbrechendes Element. */ #olten .v-fuss .o-adr{white-space:nowrap;display:inline-block} /* =================================================================== SEITENRAND WAECHST MIT DER BILDSCHIRMBREITE Der Rand war ueberall dieselbe feste Zahl — 24 Pixel — bis der Satzspiegel bei 1560 gedeckelt wird und der Rand schlagartig auf 204 springt. Als Anteil der Breite gelesen ergab das: iPhone 390 24 px = 6,2 % iPad hoch 834 26 px = 3,1 % iPad quer 1194 24 px = 2,0 % ← duennste Stelle der Kurve Laptop 1440 24 px = 1,7 % Desktop 1920 204 px = 10,6 % Genau zwischen 1100 und 1500 ist der Rand am knappsten, und dort liegt das iPad im Querformat. Das Hero-Foto sah dort aus, als beruehre es den Bildschirmrand. Neu ein Anteil statt einer Zahl: 3,4 Prozent, nach unten bei 24 Pixel begrenzt, damit das Telefon unveraendert bleibt, und nach oben bei 56, damit auf grossen Schirmen nichts kippt. env(safe-area-inset) bleibt die Untergrenze — auf einem Geraet mit abgerundeten Ecken darf nichts unter die Rundung geraten. =================================================================== */ #olten .t-wrap{ padding-left:max(clamp(24px,3.4vw,56px), env(safe-area-inset-left)); padding-right:max(clamp(24px,3.4vw,56px), env(safe-area-inset-right)); } /* Anmerkung zur Anfahrt: Auf breiten Schirmen enden Gebaeudefoto und Wegekarte nicht auf derselben Linie — das Foto haelt sein Seitenverhaeltnis, die Karte bezieht ihre Hoehe aus dem Text. Ein Angleichen waere nur ueber eine Flaeche hinter dem Foto oder ueber einen Zuschnitt zu haben. Beides wurde geprueft und verworfen: die Flaeche wirkte schwer, zugeschnitten wird grundsaetzlich nicht. Die ungleichen Hoehen bleiben also bewusst stehen. */ /* =================================================================== SEHR SCHMALE TELEFONE (320 PIXEL) Auf der Fehlerseite lief das Band 15 Pixel ueber den Bildschirm hinaus. Ursache: Knopfbeschriftungen stehen auf einer Zeile (white-space:nowrap). Damit ist die Mindestbreite eines Knopfes seine volle Textbreite — hier 287 Pixel. Das Band ist ein Raster, und ein Rasterfeld darf per Voreinstellung nicht unter die Mindestbreite seines Inhalts schrumpfen. Also wuchs die Huelle mit, statt umzubrechen. Unter 360 Pixel darf die Beschriftung deshalb umbrechen. Das betrifft nur Geraete wie das iPhone SE der ersten Generation und die geteilte Ansicht; ab 360 bleibt alles wie bisher einzeilig. =================================================================== */ @media (max-width:359px){ #olten .t-btn{white-space:normal;text-align:center;line-height:1.3} } /* =================================================================== MOBILMENUE IM HAUSBLAU Das aufgeklappte Menue trug als einzige Flaeche der Seite ein eigenes Blau (#0A3A55 → #08293C) — grauer und eine Spur gruener als das Hausblau. Kopfband und Fuss teilen sich denselben Verlauf; das Menue fiel nur deshalb nicht auf, weil man es nie neben den beiden sieht. Jetzt traegt es exakt denselben Verlauf samt der beiden weichen Lichtkreise — ohne sie waere die Flaeche flacher und wirkte trotz gleicher Farbe fremd. Zur Lesbarkeit: An der hellsten Stelle steht Weiss bei 9,8 : 1, bisher 12 : 1. Gefordert sind 4,5 : 1. =================================================================== */ #olten .t-mnav{ background:linear-gradient(155deg,#00486A 0%,#00405E 46%,#00344E 100%); overflow:hidden} #olten .t-mnav::before{content:"";position:absolute; width:760px;height:760px;border-radius:50%; background:radial-gradient(circle,rgba(0,160,220,.26),transparent 66%); top:-380px;right:-200px;pointer-events:none;z-index:0} #olten .t-mnav::after{content:"";position:absolute; width:600px;height:600px;border-radius:50%; background:radial-gradient(circle,rgba(127,214,248,.14),transparent 68%); bottom:-300px;left:-190px;pointer-events:none;z-index:0} /* Ohne diese Zeile laegen Menuepunkte und Knopf hinter den Lichtkreisen. Der Menuekopf ist ausgenommen: Er ist absolut gesetzt (oben rechts), und ein pauschales position:relative haette ihn in den Fluss zurueckgeholt — das X waere dann mittig unter der Kopfzeile gelandet statt in der Ecke. Er bekommt nur den z-Index. */ #olten .t-mnav > *:not(.t-mnav-kopf){position:relative;z-index:1} #olten .t-mnav-kopf{z-index:2} /* Das Logo am Fuss des Menues stand auf 40 Pixel und wirkte in der leeren Flaeche darunter verloren. 56 Pixel — dieselbe Groesse wie in der Fusszeile der Seite. */ #olten .t-mnav-fuss img{height:56px} /* =================================================================== HERO AUF TELEFON UND TABLET HOCHFORMAT: FOTO VOR DIE AUSSAGEN Bisher stand zwischen Ueberschrift und Foto ein Block aus drei Textzeilen. Das Foto — das staerkste Element der Seite — kam damit erst nach rund 150 Pixel Text und auf dem Telefon teils erst nach dem ersten Wischen. Die drei Aussagen ruecken deshalb hinter das Foto, direkt ueber den Knopf: Erst das Bild, dann die Gruende, dann die Handlung. Gilt bis 1100 Pixel, also fuer Telefon und Tablet im Hochformat. Ab 1101 steht der Hero wieder zweispaltig, dort aendert sich nichts. =================================================================== */ @media (max-width:1100px){ #olten .o-heroA h1{order:1} #olten .o-heroA .t-h-photo{order:2} #olten .o-heroA .o-heropunkte{order:3} #olten .o-heroA .t-hero-cta{order:4} } /* =================================================================== DAS X SITZT GENAU DORT, WO DER BURGER WAR Zwei Abweichungen waren uebrig. Erstens der waagrechte Versatz: Der Burger traegt margin-right:-11px (bzw. -13), damit seine Strichmitte und nicht sein Kastenrand auf der Satzspiegelkante steht. Das X hatte diesen Ausgleich nicht und sass 11 Pixel weiter innen. Zweitens die Hoehe: Der Menuekopf war fest auf 72 Pixel gesetzt. Die Kopfzeile ist zwischen 641 und 1000 Pixel inzwischen 88 hoch — das X sass dort 8 Pixel zu hoch. Der Menuekopf uebernimmt jetzt dieselben Hoehen. Ergebnis: Beim Aufklappen springt nichts, das X erscheint exakt auf dem Burger. =================================================================== */ #olten .t-mnav-zu{margin-right:-11px} @media (min-width:641px) and (max-width:1000px){ #olten .t-mnav-zu{margin-right:-13px} #olten .t-mnav-kopf{height:88px} } @media (min-width:401px) and (max-width:640px){ #olten .t-mnav-zu{margin-right:-13px} } /* =================================================================== EINE GROESSE FUER FLIESSTEXT AUF TELEFON UND TABLET HOCHFORMAT Nebeneinander standen bisher drei Groessen fuer dieselbe Sorte Text: Kartentext, Anfahrt, Schlusskarte 19 px Lede unter einer Abschnittsueberschrift 18 px Leistungs- und Aerztetext 17 px (Telefon) 21 px (Tablet hoch) Die 17 und die 21 stammen aus einer relativen Angabe (1.1em), die sich am Elternwert orientierte und deshalb je nach Breite in die eine oder die andere Richtung auswich. Auf dem Tablet war der Leistungstext dadurch groesser als der Text in der blauen Karte direkt darueber, auf dem Telefon kleiner — bei gleicher Aufgabe. Ab hier gilt bis 1100 Pixel ein einziger Wert: 19 Pixel, Zeilenhoehe 1,66. Ab 1101 bleibt die bisherige Abstufung, dort ist der Leistungstext bewusst grosszuegiger, weil er neben einem 672 Pixel breiten Bild steht. =================================================================== */ @media (max-width:1100px){ #olten .t-doc > div p, #olten .t-lede, #olten .t-sec-head .t-lede{font-size:1.1875rem;line-height:1.66} } /* =================================================================== EINE SCHRIFTLEITER FUER TELEFON UND TABLET HOCHFORMAT Die Aufnahme ueber alle Seiten zeigte fuer dieselbe Aufgabe mehrere Groessen nebeneinander: Kartentitel 20 / 19,2 / 18 px (Telefon) 22,7 / 20,9 / 20 (Tablet hoch) Kleintext 17 / 16 / 15 (Rolle, Bildunterschrift, Kanton, Schlusszeile, MPA) Fliesstext 19, an einer Stelle 20 Das entstand ueber viele Einzelentscheide hinweg und faellt beim Scrollen als Unruhe auf, ohne dass man den Grund benennen kann. Ab hier gilt eine Leiter mit sechs Stufen: Seitentitel 28 px / 35 (Tablet) Abschnittstitel 24 / 32 Kartentitel 20 / 22 Fliesstext 19 / 19 Kleintext 17 / 17 Etikett (Vers.) 15 / 15 nur die Spaltentitel im Fuss Kleintext heisst: alles, was einen Wert begleitet statt ihn zu tragen. Die Untergrenze liegt bei 17 Pixel — darunter wird es fuer ein Publikum ueber sechzig muehsam. Ausnahme bleiben die Mailadressen unter 480 Pixel: Sie muessen auf eine Zeile passen. =================================================================== */ @media (max-width:1100px){ /* --- Kartentitel ------------------------------------------------ */ #olten .t-tile h3, #olten .o-lkachel h3, #olten .t-doc > div h3, #olten .o-weg h2, #olten .v-kontakt h3, #olten .o-titelzeile h2, #olten .o-zeile-link h2, #olten .o-schritte li h2, #olten .o-schritte li h3{font-size:1.25rem;line-height:1.32} /* --- Fliesstext -------------------------------------------------- */ #olten .o-danke-satz{font-size:1.1875rem;line-height:1.66} /* --- Kleintext: eine Groesse, 17 Pixel --------------------------- */ #olten .t-role, #olten figcaption, #olten .o-mpa-k figcaption span, #olten .t-gal figcaption, #olten .t-prax-kt, #olten .o-fuss-ende, #olten .v-fuss .o-fuss-ende a, #olten .o-zeile-link p{font-size:1.0625rem;line-height:1.5} /* --- Etikett bleibt Etikett -------------------------------------- */ #olten .o-fuss h3{font-size:.9375rem} } /* Auf dem Tablet im Hochformat steht der Kartentitel eine Stufe hoeher — die Karten sind dort breiter und tragen mehr Text. */ @media (min-width:641px) and (max-width:1100px){ #olten .t-tile h3, #olten .o-lkachel h3, #olten .t-doc > div h3, #olten .o-weg h2, #olten .v-kontakt h3, #olten .o-titelzeile h2, #olten .o-zeile-link h2, #olten .o-schritte li h2, #olten .o-schritte li h3{font-size:1.375rem} } /* Nachtrag zur Schriftleiter: Drei Regeln standen mit hoeherer Gewichtung spaeter im Blatt und zogen die Leiter wieder auseinander — die Rolle in der Aerztekarte (.t-doc .t-role, 0,96 rem), die Bildunterschrift in der Raumgalerie (#raeume .t-gal figcaption) und die Zeile unter dem MPA-Namen. Sie werden hier auf dieselbe Stufe gebracht. */ @media (max-width:1100px){ #olten .t-doc .t-role, #olten #raeume .t-gal figcaption, #olten .o-mpa-k figcaption span{font-size:1.0625rem;line-height:1.5} } /* =================================================================== HERO: SYMBOL UEBER DEM TEXT STATT DANEBEN Mit den zentrierten Aussagen begann jedes Symbol an einer anderen Stelle — die drei Zeilen sind unterschiedlich lang, und das Symbol wanderte als Teil der Zeile mit. Steht es ueber dem Text, hat jede Aussage ihre eigene Mittelachse, und alle drei Achsen fallen mit der Ueberschrift und dem Knopf zusammen. Das kostet Hoehe: auf dem Telefon 81 Pixel, auf dem Tablet im Hochformat 115. Der Knopf ruckt dadurch von y=729 auf y=810 (Telefon) — er lag ohnehin unter der ersten Bildschirmhoehe. =================================================================== */ @media (max-width:1100px){ #olten .o-heropunkte{gap:clamp(18px,2.6vw,26px)} #olten .o-heropunkte li{display:flex;flex-direction:column; align-items:center;gap:7px} #olten .o-heropunkte .t-ic{display:block;vertical-align:baseline; width:26px;height:26px;margin:0;opacity:.92} } /* Zwischen 1101 und 1200 Pixel war die dritte Spalte zu schmal fuer «Impressum Datenschutzerklaerung» — die Rechtslinks liefen 12 Pixel ueber den Rand. In diesem schmalen Band bekommen beide Raster dieselbe, grosszuegigere Aufteilung: So bleiben die Kanten von «SEITEN» und «Impressum» buendig, und nichts laeuft hinaus. */ @media (min-width:1101px) and (max-width:1200px){ #olten .o-fuss, #olten .o-fuss-ende{grid-template-columns:1.1fr 1.3fr 1.2fr} } /* =================================================================== «ROUTE PLANEN» UNTER DEM ABSCHNITT, NICHT IN DER KARTE Der Knopf sass in der Wegekarte und gehoerte dort optisch zur Wegeliste. Er meint aber den ganzen Abschnitt — Karte, Foto und Wege zusammen. Jetzt steht er mittig darunter. Nebeneffekt, den er mit sich bringt: Die Wegekarte wird um die Knopfhoehe kuerzer und liegt damit naeher an der Hoehe des Gebaeudefotos daneben. =================================================================== */ #olten .o-anfahrt-tun{display:flex;justify-content:center; margin-top:clamp(24px,2.6vw,34px)} #olten .o-anfahrt-tun .t-btn{min-width:min(100%,280px)} /* =================================================================== MOTTO STATT DREI AUFZAEHLUNGSPUNKTE Im Hero standen drei Aussagen mit Symbolen. Sie stehen ohnehin an mehreren Stellen der Website — im Schlussblock, auf der Neupatientenseite, in den Yoast-Angaben. Im Hero kosteten sie auf dem Telefon 286 Pixel und schoben das Foto nach unten. An ihre Stelle tritt ein Satz. Er steht eine Stufe ueber dem Fliesstext, aber deutlich unter der Ueberschrift: Er soll gelesen werden, nicht mit dem Titel konkurrieren. =================================================================== */ #olten .o-heromotto{ font-size:clamp(1.25rem, 1.06rem + .62vw, 1.5rem); line-height:1.46;font-weight:500;letter-spacing:-.008em; max-width:34ch;margin:0 auto;text-align:center; color:rgba(255,255,255,.94)} @media (min-width:1101px){ #olten .o-heroA .o-heromotto{margin-left:0;margin-right:0;text-align:left} } /* =================================================================== REIHENFOLGE UND HERVORHEBUNG IM HERO Die Ordnungsregeln zeigten noch auf die geloeschte Aufzaehlung (.o-heropunkte). Ohne Treffer fiel das Motto auf order:0 zurueck und stand damit ueber der Ueberschrift. Hier dieselbe Ordnung fuer das Motto: Titel, Foto, Motto, Knopf. =================================================================== */ @media (max-width:1100px){ #olten .o-heroA h1{order:1} #olten .o-heroA .t-h-photo{order:2} #olten .o-heroA .o-heromotto{order:3} #olten .o-heroA .t-hero-cta{order:4} } @media (min-width:1001px) and (max-width:1100px){ #olten .o-heroA .o-heromotto{order:3} } /* «Sie» traegt den Satz — es bekommt eine Linie, die sich beim Einblenden von links nach rechts zeichnet. Kein Farbwechsel und kein fetterer Schnitt: Auf blauem Grund wuerde beides unruhig wirken. Die Linie sitzt tief genug, dass sie die Unterlaengen nicht schneidet. */ /* Die Linie liegt jetzt unter einer ganzen Wendung, nicht unter einem einzelnen Wort. Damit kann sie ueber einen Zeilenumbruch laufen — ein absolut gesetzter Balken koennte das nicht, er wuerde quer ueber beide Zeilen gezogen. Deshalb ein Verlauf als Hintergrund: Er folgt dem Textfluss, und box-decoration-break:clone gibt jedem Zeilenstueck eine eigene Linie. Gezeichnet wird ueber background-size, das laeuft auf der Grafikkarte. */ #olten .o-heromotto .o-betont{ background-image:linear-gradient(var(--cyan-lt,#7FD2F3),var(--cyan-lt,#7FD2F3)); background-repeat:no-repeat; background-position:0 calc(100% + .06em); background-size:0 3px; -webkit-box-decoration-break:clone;box-decoration-break:clone; /* Eine Sekunde Pause, dann zeichnet sie sich in 0,9 Sekunden. Die Verzoegerung ist Absicht: Der Leser hat den Satz dann schon angefangen, und die Linie faehrt unter der Wendung durch, waehrend er sie liest. Ginge sie sofort mit, waere sie nur Dekoration. */ transition:background-size .9s cubic-bezier(.25,.85,.35,1) 1s} #olten .o-heromotto.t-in .o-betont{background-size:100% 3px} /* Wer Bewegung abbestellt hat, sieht die Linie sofort und vollstaendig. */ @media (prefers-reduced-motion:reduce){ #olten .o-heromotto .o-betont{background-size:100% 3px;transition:none} } /* =================================================================== ANFAHRT: DIE WEGEKARTE WAECHST AUF DIE FOTOHOEHE Statt das Foto zu strecken — was einen Zuschnitt oder eine Flaeche dahinter bedeutet haette, beides verworfen — waechst die Karte. Sie ist eine Flaeche mit drei Eintraegen; wird der Abstand zwischen ihnen groesser, fuellt sie die Zeilenhoehe von selbst aus. Die drei Wege bekommen dabei genau die Luft, die vorher fehlte. Ist die Karte laenger als das Foto — je nach Bildschirmbreite kommt das vor —, bleibt der Abstand beim Grundwert von 22 Pixel stehen. =================================================================== */ @media (min-width:1001px){ #olten .o-anfahrt3{align-items:stretch} #olten .o-anfahrt3 .o-anfahrt-haus{align-self:start} #olten .o-anfahrt3 .o-karte-innen{display:flex;flex-direction:column} #olten .o-anfahrt3 .o-wege-stapel{flex:1 1 auto;display:flex; flex-direction:column;justify-content:space-between;gap:22px} } /* Dazu das Spaltenverhaeltnis: Bekommt das Foto etwas mehr Breite, wird es hoeher und trifft die Karte frueher. Fuenf Aufteilungen gemessen; 1,3 zu 1 war die beste — ab 1366 Pixel treffen sich die Unterkanten exakt, darunter bleibt ein Rest. */ @media (min-width:1001px){ #olten .o-anfahrt3{grid-template-columns:1.3fr 1fr} } /* Zwischen 1001 und 1150 Pixel blieben Foto und Karte am weitesten auseinander (bis 174 Pixel): Das Foto ist dort noch schmal, die Karte durch den Umbruch ihrer Texte aber schon hoch. In diesem Band stehen sie deshalb untereinander — wie unter 1000 Pixel. Dann gibt es keine zweite Spalte, an der sich etwas ausrichten muesste. */ @media (min-width:1001px) and (max-width:1399px){ #olten .o-anfahrt3{grid-template-columns:1fr} #olten .o-anfahrt-haus .t-ph{aspect-ratio:16/9} } /* Zusammengefasst zur Anfahrt: Nebeneinander stehen Foto und Karte erst ab 1400 Pixel — dort ist das Foto breit genug, dass seine Hoehe die der Karte erreicht, und die Karte fuellt den Rest ueber groessere Abstaende zwischen den drei Wegen. Gemessen von 1400 bis 2560 Pixel: Unterkanten ueberall exakt gleich, Foto unbeschnitten. Darunter stehen sie untereinander; dort gibt es keine zweite Spalte, an der etwas ausgerichtet werden muesste. */ /* =================================================================== EINBLENDEN: KUERZER UND KUERZERER WEG Jedes Element wanderte 26 Pixel weit ueber 0,8 Sekunden nach oben. Auf der Startseite betrifft das 51 Elemente. Wer normal scrollt, sieht die Bewegung deshalb mitten im Blickfeld ablaufen — es liest sich, als lade die Seite waehrend des Scrollens nach. Drei Aenderungen zusammen: Der Weg schrumpft auf 12 Pixel, die Dauer auf 0,44 Sekunden, und der Ausloeser sitzt in der JavaScript-Datei jetzt 18 Prozent Bildschirmhoehe vor dem Erscheinen. Die Bewegung ist damit vorbei, bevor das Element im Blick ist — sie wirkt nur noch als weiches Auftauchen. Die gestaffelten Verzoegerungen (data-d) fallen mit, sonst wuerde das dritte Element eines Blocks nach der Verkuerzung immer noch sichtbar hinterherhinken. =================================================================== */ #olten.t-js .t-rv{ transform:translateY(12px); transition:opacity .44s var(--ease),transform .44s var(--ease)} #olten.t-js .t-rv[data-d="1"]{transition-delay:.05s} #olten.t-js .t-rv[data-d="2"]{transition-delay:.10s} #olten.t-js .t-rv[data-d="3"]{transition-delay:.15s} /* =================================================================== SCHUTZ GEGEN «LAZY RENDER» VON CACHE-PLUGINS WP Rocket setzt auf Abschnitte unterhalb des ersten Bildschirms das Attribut data-wpr-lazyrender und dazu die Regel [data-wpr-lazyrender]{content-visibility:auto}. Der Browser laesst den Inhalt dieser Abschnitte dann ungerechnet, bis sie sich dem Blickfeld naehern. Das waere vertretbar, wenn eine Hoehenschaetzung dabeistuende. Gemessen auf der Live-Seite stand dort aber contain-intrinsic-size: auto none — also gar keine. Die Folge: Abschnitte melden 46 bis 92 Pixel Hoehe, sind in Wirklichkeit 910 bis 2779 Pixel hoch. Die Seite startet rund 9450 Pixel zu kurz und waechst beim Scrollen in sechs Spruengen. Der Scrollbalken springt jedes Mal mit. Unsere Abschnitte haben feste, berechenbare Hoehen und brauchen diese Optimierung nicht. Die Regel wird deshalb hier zurueckgesetzt — dann bleibt die Seitenlaenge vom ersten Bild an richtig, unabhaengig davon, welche Schalter im Plugin stehen. =================================================================== */ #olten [data-wpr-lazyrender], #olten[data-wpr-lazyrender], body [data-wpr-lazyrender]{content-visibility:visible !important} /* =================================================================== ZUSATZ — Hausarztpraxis Wohlen Steht bewusst am Dateiende, damit diese Regeln die weiter oben stehenden ueberschreiben, ohne dort etwas zu aendern. =================================================================== */ /* Raumgalerie mit genau fuenf Bildern: drei oben, zwei unten und mittig darunter. Sechs Spalten, jedes Bild ueber zwei — das vierte beginnt in Spalte zwei. Die doppelte Bedingung (viertes UND zweitletztes Kind) sorgt dafuer, dass die Regel nur bei genau fuenf Bildern greift; kommt eines dazu oder faellt eines weg, gilt wieder das gewoehnliche Raster. */ @media (min-width:981px){ #olten #raeume .t-galerie{grid-template-columns:repeat(6,1fr)} #olten #raeume .t-gal{grid-column:span 2} #olten #raeume .t-gal:nth-child(4):nth-last-child(2){grid-column:2 / span 2} } /* Dasselbe fuer Tablet im Hochformat. Zwischen 621 und 980 Pixel zeigt die Galerie zwei Bilder je Reihe; das fuenfte bliebe allein links stehen. Vier Spalten, jedes Bild ueber zwei, das fuenfte beginnt in Spalte zwei — damit steht es mittig unter den vieren. Die doppelte Bedingung bindet die Regel an genau fuenf Bilder. */ @media (min-width:621px) and (max-width:980px){ #olten #raeume .t-galerie{grid-template-columns:repeat(4,1fr)} #olten #raeume .t-gal{grid-column:span 2} #olten #raeume .t-gal:nth-child(5):nth-last-child(1){grid-column:2 / span 2} } /* MPA-Raster mit sechs Personen: zwei Reihen zu dritt. Sechs Spalten, jede Karte ueber zwei — das ergibt drei je Reihe. Aendert sich die Anzahl, gehoert dieser Block angepasst: bei sieben Personen die Fassung mit repeat(8,1fr) und der :nth-child(5)-Regel, bei acht wieder repeat(8,1fr) ohne Sonderregel. */ @media (min-width:900px){ #olten .o-mpa{grid-template-columns:repeat(6,1fr)} #olten .o-mpa-k{grid-column:span 2} } @media (min-width:641px) and (max-width:899px){ #olten .o-mpa{grid-template-columns:repeat(4,1fr)} #olten .o-mpa-k{grid-column:span 2} } /* =================================================================== 1.0.4 — drei Anpassungen aus Lenzburg 1.4.11 bis 1.4.14 =================================================================== */ /* 1 · Rangfolge der Ueberschriften auf schmalen Geraeten. Bis 640 Pixel standen Abschnittstitel auf 24 und alle Karten- und Personentitel auf 20 Pixel, beide in Stärke 700 — das liest das Auge nicht als zwei Ebenen. Nach oben ist kein Platz, die h1 steht dort auf 25,9. Also treten die Karten zurueck. Leiter danach: 25,9 → 24 → 20 → 18/650 → 17. .o-titelzeile h2 bleibt auf 20 — das sind die Ueberschriften der einzelnen Leistungen, eine Ebene ueber einem Kartentitel. .o-schritte stand schon auf 18. */ @media (max-width:640px){ #olten .t-doc h3, #olten .o-mpa-k figcaption b, #olten .t-tile h3, #olten .o-lkachel h3, #olten .v-kontakt h3, #olten .o-weg h2, #olten .o-zeile-link h2{font-size:1.125rem;font-weight:650;line-height:1.32} } /* 2 · Personennamen auf breiten Bildschirmen. Ab 1280 Pixeln standen Abschnittstitel und Name auf 40 zu 30,4 Pixel, Faktor 1,32. Auf dem Tablet betraegt derselbe Abstand 1,47 und wirkt richtig. Gesenkt wird nur die Obergrenze: 27,2 statt 30,4 Pixel. Unterhalb von rund 1088 Pixeln greift weiter der vw-Anteil, dort aendert sich nichts. Nur .t-doc h3 — in der Grundregel weiter oben steht der Selektor zusammen mit .t-sec-head h3 und .v-aussage h3, die bleiben. */ #olten .t-doc h3{font-size:clamp(1.3rem,2.5vw,1.7rem)} /* 3 · Ankersprung. Der feste scroll-padding-top von 110 Pixeln passte nicht zu einem Kopf, der auf dem Telefon 72 misst. Die Hoehe kommt jetzt aus --kopf-h, das olten.js beim Laden und bei jeder Groessenaenderung setzt. Bleibt das Skript aus, greift der Rueckfallwert 72. */ html{scroll-padding-top:calc(var(--kopf-h, 72px) + 18px)}