/* ========================================================================== Atelier - das neue Gewand -------------------------------------------------------------------------- Wie Politur aendert auch dieser Abschnitt kein Markup und keine Logik, nur das Aussehen. Er steht bewusst ganz unten, damit er ueber allem Vorherigen liegt, und rechnet jede Farbe aus den Tokens - so tragen alle alle Designs das neue Gewand, ohne dass eines einzeln angefasst wird. Die Idee: ein Studio, kein Formular. Papier mit Korn statt glatter Flaeche, ein Hauch Licht in den Ecken, Berge im Nebel ganz hinten - und Knoepfe, die man eindeutig lesen kann: gefuellt heisst "das ist der Schritt", getoent heisst "geht auch", nur ein Rand heisst "zur Seite". ========================================================================== */ :root{ /* Licht, keine Farbe: der helle Streifen an der Oberkante von Karten und Knoepfen. Auf dunklen Designs waere er als Weiss zu grell, dort steht er darum leiser. */ --glanz:rgba(255,255,255,.55); --glanz-knopf:rgba(255,255,255,.22); /* Wie stark das Motiv im Hintergrund durchscheint. */ --motiv-staerke:.32; } :root[data-theme="zentivo"], :root[data-theme="nacht"], :root[data-theme="anthrazit"], :root[data-theme="terra"], :root[data-theme="glas"]{ --glanz:rgba(255,255,255,.06); --glanz-knopf:rgba(255,255,255,.28); --motiv-staerke:.2; } /* Drei weiche Lichtflecken aus dem eigenen Akzent und darueber ein feines Korn wie bei Papier. Das Korn ist ein neutrales Grau mit wenig Deckkraft - es stellt Struktur dar, keine Farbe, und darf darum fest stehen. Der Fleck liegt fest am Schirm, damit er beim Scrollen nicht mitlaeuft. */ body::before{ content:'';position:fixed;inset:0;z-index:-1;pointer-events:none; background: radial-gradient(60% 40% at 100% 0%, var(--accent-soft), transparent 70%), radial-gradient(55% 38% at 0% 42%, var(--rose-soft), transparent 72%), radial-gradient(70% 42% at 90% 100%, var(--accent-soft), transparent 70%); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .2 0 0 0 0 .2 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)' opacity='.2'/%3E%3C/svg%3E"), radial-gradient(60% 40% at 100% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), radial-gradient(55% 38% at 0% 44%, color-mix(in srgb, var(--rose) 14%, transparent), transparent 72%), radial-gradient(70% 42% at 88% 100%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%); } /* Das Motiv: Bergketten im Nebel, Lage hinter Lage, jede weiter hinten blasser - dazu eine blasse Sonne und oben rechts ein paar dezente Wolken, weich gezeichnet (vorher ein Zweig; so hat Evi es gewollt). Die Form kommt aus der Maske (die Deckkraft jeder Lage steht in der Zeichnung selbst), die Farbe aus dem Akzent. So malt sich die Landschaft in jedem Design in dessen eigenem Ton. Die Berge richten sich nach der Breite, nicht nach der Hoehe - sonst schneidet ein hohes Handy nur einen flachen Streifen heraus und aus den Bergen werden Baender. */ body::after{ content:'';position:fixed;inset:0;z-index:-1;pointer-events:none; background:var(--accent);opacity:var(--motiv-staerke); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 600' preserveAspectRatio='xMidYMax slice'%3E%3Cdefs%3E%3ClinearGradient id='n0' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop stop-color='%23000' offset='0.22083333333333333' stop-opacity='0.28'/%3E%3Cstop stop-color='%23000' offset='0.5333333333333333' stop-opacity='0.034'/%3E%3Cstop stop-color='%23000' offset='1' stop-opacity='0.070'/%3E%3C/linearGradient%3E%3ClinearGradient id='n1' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop stop-color='%23000' offset='0.31583333333333335' stop-opacity='0.42'/%3E%3Cstop stop-color='%23000' offset='0.65' stop-opacity='0.050'/%3E%3Cstop stop-color='%23000' offset='1' stop-opacity='0.105'/%3E%3C/linearGradient%3E%3ClinearGradient id='n2' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop stop-color='%23000' offset='0.46' stop-opacity='0.58'/%3E%3Cstop stop-color='%23000' offset='0.7833333333333333' stop-opacity='0.070'/%3E%3Cstop stop-color='%23000' offset='1' stop-opacity='0.145'/%3E%3C/linearGradient%3E%3ClinearGradient id='n3' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop stop-color='%23000' offset='0.6316666666666667' stop-opacity='0.78'/%3E%3Cstop stop-color='%23000' offset='0.9333333333333333' stop-opacity='0.094'/%3E%3Cstop stop-color='%23000' offset='1' stop-opacity='0.195'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='700' cy='150' r='58' fill='%23000' fill-opacity='.16'/%3E%3Cpath d='M-40,600 L-40,166.0 C-25,166.0 -25,149.8 -10,149.8 C5,149.8 5,133.1 20,133.1 C35,133.1 35,123.3 50,123.3 C65,123.3 65,120.6 80,120.6 C95,120.6 95,120.0 110,120.0 C125,120.0 125,122.5 140,122.5 C155,122.5 155,128.6 170,128.6 C185,128.6 185,134.7 200,134.7 C215,134.7 215,141.3 230,141.3 C245,141.3 245,150.2 260,150.2 C275,150.2 275,159.8 290,159.8 C305,159.8 305,170.6 320,170.6 C335,170.6 335,178.4 350,178.4 C365,178.4 365,186.0 380,186.0 C395,186.0 395,190.6 410,190.6 C425,190.6 425,190.3 440,190.3 C455,190.3 455,185.2 470,185.2 C485,185.2 485,182.7 500,182.7 C515,182.7 515,178.8 530,178.8 C545,178.8 545,179.7 560,179.7 C575,179.7 575,182.9 590,182.9 C605,182.9 605,188.3 620,188.3 C635,188.3 635,200.2 650,200.2 C665,200.2 665,214.3 680,214.3 C695,214.3 695,227.9 710,227.9 C725,227.9 725,243.2 740,243.2 C755,243.2 755,260.0 770,260.0 C785,260.0 785,279.4 800,279.4 C815,279.4 815,298.9 830,298.9 C845,298.9 845,316.8 860,316.8 C875,316.8 875,334.2 890,334.2 C905,334.2 905,349.2 920,349.2 C935,349.2 935,355.4 950,355.4 C965,355.4 965,356.1 980,356.1 C995,356.1 995,352.1 1010,352.1 C1025,352.1 1025,343.8 1040,343.8 C1055,343.8 1055,332.6 1070,332.6 C1085,332.6 1085,323.3 1100,323.3 C1115,323.3 1115,311.5 1130,311.5 C1145,311.5 1145,302.4 1160,302.4 C1175,302.4 1175,293.9 1190,293.9 C1205,293.9 1205,283.0 1220,283.0 L1240,600 Z' fill='url(%23n0)'/%3E%3Cpath d='M-40,600 L-40,285.9 C-25,285.9 -25,298.9 -10,298.9 C5,298.9 5,308.6 20,308.6 C35,308.6 35,315.9 50,315.9 C65,315.9 65,321.2 80,321.2 C95,321.2 95,328.4 110,328.4 C125,328.4 125,328.2 140,328.2 C155,328.2 155,329.3 170,329.3 C185,329.3 185,326.8 200,326.8 C215,326.8 215,324.9 230,324.9 C245,324.9 245,325.4 260,325.4 C275,325.4 275,329.2 290,329.2 C305,329.2 305,340.1 320,340.1 C335,340.1 335,358.6 350,358.6 C365,358.6 365,378.2 380,378.2 C395,378.2 395,396.9 410,396.9 C425,396.9 425,411.2 440,411.2 C455,411.2 455,419.4 470,419.4 C485,419.4 485,423.2 500,423.2 C515,423.2 515,421.0 530,421.0 C545,421.0 545,411.3 560,411.3 C575,411.3 575,398.2 590,398.2 C605,398.2 605,373.8 620,373.8 C635,373.8 635,346.4 650,346.4 C665,346.4 665,314.2 680,314.2 C695,314.2 695,284.6 710,284.6 C725,284.6 725,260.3 740,260.3 C755,260.3 755,243.7 770,243.7 C785,243.7 785,234.3 800,234.3 C815,234.3 815,229.5 830,229.5 C845,229.5 845,223.8 860,223.8 C875,223.8 875,221.5 890,221.5 C905,221.5 905,217.0 920,217.0 C935,217.0 935,215.7 950,215.7 C965,215.7 965,212.2 980,212.2 C995,212.2 995,207.7 1010,207.7 C1025,207.7 1025,200.2 1040,200.2 C1055,200.2 1055,189.8 1070,189.8 C1085,189.8 1085,176.0 1100,176.0 C1115,176.0 1115,160.5 1130,160.5 C1145,160.5 1145,155.2 1160,155.2 C1175,155.2 1175,153.1 1190,153.1 C1205,153.1 1205,163.1 1220,163.1 L1240,600 Z' fill='url(%23n1)'/%3E%3Cpath d='M-40,600 L-40,299.5 C-25,299.5 -25,301.9 -10,301.9 C5,301.9 5,307.5 20,307.5 C35,307.5 35,307.5 50,307.5 C65,307.5 65,311.3 80,311.3 C95,311.3 95,313.4 110,313.4 C125,313.4 125,321.2 140,321.2 C155,321.2 155,333.5 170,333.5 C185,333.5 185,349.9 200,349.9 C215,349.9 215,375.2 230,375.2 C245,375.2 245,400.1 260,400.1 C275,400.1 275,423.9 290,423.9 C305,423.9 305,443.5 320,443.5 C335,443.5 335,457.4 350,457.4 C365,457.4 365,465.0 380,465.0 C395,465.0 395,467.0 410,467.0 C425,467.0 425,466.3 440,466.3 C455,466.3 455,464.3 470,464.3 C485,464.3 485,457.9 500,457.9 C515,457.9 515,448.5 530,448.5 C545,448.5 545,438.2 560,438.2 C575,438.2 575,423.4 590,423.4 C605,423.4 605,412.8 620,412.8 C635,412.8 635,404.2 650,404.2 C665,404.2 665,403.0 680,403.0 C695,403.0 695,405.9 710,405.9 C725,405.9 725,416.4 740,416.4 C755,416.4 755,424.0 770,424.0 C785,424.0 785,432.7 800,432.7 C815,432.7 815,439.6 830,439.6 C845,439.6 845,439.2 860,439.2 C875,439.2 875,439.9 890,439.9 C905,439.9 905,435.7 920,435.7 C935,435.7 935,433.7 950,433.7 C965,433.7 965,424.7 980,424.7 C995,424.7 995,413.5 1010,413.5 C1025,413.5 1025,394.6 1040,394.6 C1055,394.6 1055,379.3 1070,379.3 C1085,379.3 1085,359.7 1100,359.7 C1115,359.7 1115,349.1 1130,349.1 C1145,349.1 1145,341.5 1160,341.5 C1175,341.5 1175,343.1 1190,343.1 C1205,343.1 1205,349.4 1220,349.4 L1240,600 Z' fill='url(%23n2)'/%3E%3Cpath d='M-40,600 L-40,590.4 C-25,590.4 -25,595.4 -10,595.4 C5,595.4 5,595.7 20,595.7 C35,595.7 35,584.0 50,584.0 C65,584.0 65,565.4 80,565.4 C95,565.4 95,537.4 110,537.4 C125,537.4 125,507.9 140,507.9 C155,507.9 155,480.9 170,480.9 C185,480.9 185,458.4 200,458.4 C215,458.4 215,442.5 230,442.5 C245,442.5 245,433.2 260,433.2 C275,433.2 275,424.6 290,424.6 C305,424.6 305,425.8 320,425.8 C335,425.8 335,431.5 350,431.5 C365,431.5 365,436.1 380,436.1 C395,436.1 395,443.0 410,443.0 C425,443.0 425,441.9 440,441.9 C455,441.9 455,436.5 470,436.5 C485,436.5 485,429.9 500,429.9 C515,429.9 515,426.2 530,426.2 C545,426.2 545,427.6 560,427.6 C575,427.6 575,434.6 590,434.6 C605,434.6 605,447.2 620,447.2 C635,447.2 635,462.4 650,462.4 C665,462.4 665,479.8 680,479.8 C695,479.8 695,501.4 710,501.4 C725,501.4 725,524.0 740,524.0 C755,524.0 755,542.1 770,542.1 C785,542.1 785,548.0 800,548.0 C815,548.0 815,543.1 830,543.1 C845,543.1 845,531.3 860,531.3 C875,531.3 875,515.2 890,515.2 C905,515.2 905,497.0 920,497.0 C935,497.0 935,481.5 950,481.5 C965,481.5 965,464.6 980,464.6 C995,464.6 995,449.3 1010,449.3 C1025,449.3 1025,438.3 1040,438.3 C1055,438.3 1055,433.7 1070,433.7 C1085,433.7 1085,430.9 1100,430.9 C1115,430.9 1115,426.9 1130,426.9 C1145,426.9 1145,419.8 1160,419.8 C1175,419.8 1175,405.4 1190,405.4 C1205,405.4 1205,383.8 1220,383.8 L1240,600 Z' fill='url(%23n3)'/%3E%3C/svg%3E") no-repeat center bottom / max(100%, 900px) auto, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cfilter id='w' x='-20%25' y='-40%25' width='140%25' height='180%25'%3E%3CfeGaussianBlur stdDeviation='3.2'/%3E%3C/filter%3E%3Cg fill='%23000' filter='url(%23w)'%3E%3Cg opacity='0.3'%3E%3Ccircle cx='170' cy='98' r='14'/%3E%3Ccircle cx='200' cy='86' r='22'/%3E%3Ccircle cx='236' cy='78' r='28'/%3E%3Ccircle cx='274' cy='82' r='24'/%3E%3Ccircle cx='308' cy='92' r='16'/%3E%3Ccircle cx='336' cy='100' r='10'/%3E%3Crect x='150' y='92' width='200' height='18' rx='9'/%3E%3C/g%3E%3Cg opacity='0.2'%3E%3Ccircle cx='46' cy='48' r='9'/%3E%3Ccircle cx='64' cy='40' r='14'/%3E%3Ccircle cx='88' cy='38' r='16'/%3E%3Ccircle cx='110' cy='44' r='11'/%3E%3Crect x='34' y='44' width='90' height='12' rx='6'/%3E%3C/g%3E%3Cg opacity='0.16'%3E%3Ccircle cx='318' cy='30' r='7'/%3E%3Ccircle cx='334' cy='24' r='11'/%3E%3Ccircle cx='352' cy='28' r='8'/%3E%3Crect x='306' y='28' width='58' height='9' rx='4.5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat right -60px top -24px / 350px 350px; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 600' preserveAspectRatio='xMidYMax slice'%3E%3Cdefs%3E%3ClinearGradient id='n0' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop stop-color='%23000' offset='0.22083333333333333' stop-opacity='0.28'/%3E%3Cstop stop-color='%23000' offset='0.5333333333333333' stop-opacity='0.034'/%3E%3Cstop stop-color='%23000' offset='1' stop-opacity='0.070'/%3E%3C/linearGradient%3E%3ClinearGradient id='n1' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop stop-color='%23000' offset='0.31583333333333335' stop-opacity='0.42'/%3E%3Cstop stop-color='%23000' offset='0.65' stop-opacity='0.050'/%3E%3Cstop stop-color='%23000' offset='1' stop-opacity='0.105'/%3E%3C/linearGradient%3E%3ClinearGradient id='n2' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop stop-color='%23000' offset='0.46' stop-opacity='0.58'/%3E%3Cstop stop-color='%23000' offset='0.7833333333333333' stop-opacity='0.070'/%3E%3Cstop stop-color='%23000' offset='1' stop-opacity='0.145'/%3E%3C/linearGradient%3E%3ClinearGradient id='n3' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop stop-color='%23000' offset='0.6316666666666667' stop-opacity='0.78'/%3E%3Cstop stop-color='%23000' offset='0.9333333333333333' stop-opacity='0.094'/%3E%3Cstop stop-color='%23000' offset='1' stop-opacity='0.195'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='700' cy='150' r='58' fill='%23000' fill-opacity='.16'/%3E%3Cpath d='M-40,600 L-40,166.0 C-25,166.0 -25,149.8 -10,149.8 C5,149.8 5,133.1 20,133.1 C35,133.1 35,123.3 50,123.3 C65,123.3 65,120.6 80,120.6 C95,120.6 95,120.0 110,120.0 C125,120.0 125,122.5 140,122.5 C155,122.5 155,128.6 170,128.6 C185,128.6 185,134.7 200,134.7 C215,134.7 215,141.3 230,141.3 C245,141.3 245,150.2 260,150.2 C275,150.2 275,159.8 290,159.8 C305,159.8 305,170.6 320,170.6 C335,170.6 335,178.4 350,178.4 C365,178.4 365,186.0 380,186.0 C395,186.0 395,190.6 410,190.6 C425,190.6 425,190.3 440,190.3 C455,190.3 455,185.2 470,185.2 C485,185.2 485,182.7 500,182.7 C515,182.7 515,178.8 530,178.8 C545,178.8 545,179.7 560,179.7 C575,179.7 575,182.9 590,182.9 C605,182.9 605,188.3 620,188.3 C635,188.3 635,200.2 650,200.2 C665,200.2 665,214.3 680,214.3 C695,214.3 695,227.9 710,227.9 C725,227.9 725,243.2 740,243.2 C755,243.2 755,260.0 770,260.0 C785,260.0 785,279.4 800,279.4 C815,279.4 815,298.9 830,298.9 C845,298.9 845,316.8 860,316.8 C875,316.8 875,334.2 890,334.2 C905,334.2 905,349.2 920,349.2 C935,349.2 935,355.4 950,355.4 C965,355.4 965,356.1 980,356.1 C995,356.1 995,352.1 1010,352.1 C1025,352.1 1025,343.8 1040,343.8 C1055,343.8 1055,332.6 1070,332.6 C1085,332.6 1085,323.3 1100,323.3 C1115,323.3 1115,311.5 1130,311.5 C1145,311.5 1145,302.4 1160,302.4 C1175,302.4 1175,293.9 1190,293.9 C1205,293.9 1205,283.0 1220,283.0 L1240,600 Z' fill='url(%23n0)'/%3E%3Cpath d='M-40,600 L-40,285.9 C-25,285.9 -25,298.9 -10,298.9 C5,298.9 5,308.6 20,308.6 C35,308.6 35,315.9 50,315.9 C65,315.9 65,321.2 80,321.2 C95,321.2 95,328.4 110,328.4 C125,328.4 125,328.2 140,328.2 C155,328.2 155,329.3 170,329.3 C185,329.3 185,326.8 200,326.8 C215,326.8 215,324.9 230,324.9 C245,324.9 245,325.4 260,325.4 C275,325.4 275,329.2 290,329.2 C305,329.2 305,340.1 320,340.1 C335,340.1 335,358.6 350,358.6 C365,358.6 365,378.2 380,378.2 C395,378.2 395,396.9 410,396.9 C425,396.9 425,411.2 440,411.2 C455,411.2 455,419.4 470,419.4 C485,419.4 485,423.2 500,423.2 C515,423.2 515,421.0 530,421.0 C545,421.0 545,411.3 560,411.3 C575,411.3 575,398.2 590,398.2 C605,398.2 605,373.8 620,373.8 C635,373.8 635,346.4 650,346.4 C665,346.4 665,314.2 680,314.2 C695,314.2 695,284.6 710,284.6 C725,284.6 725,260.3 740,260.3 C755,260.3 755,243.7 770,243.7 C785,243.7 785,234.3 800,234.3 C815,234.3 815,229.5 830,229.5 C845,229.5 845,223.8 860,223.8 C875,223.8 875,221.5 890,221.5 C905,221.5 905,217.0 920,217.0 C935,217.0 935,215.7 950,215.7 C965,215.7 965,212.2 980,212.2 C995,212.2 995,207.7 1010,207.7 C1025,207.7 1025,200.2 1040,200.2 C1055,200.2 1055,189.8 1070,189.8 C1085,189.8 1085,176.0 1100,176.0 C1115,176.0 1115,160.5 1130,160.5 C1145,160.5 1145,155.2 1160,155.2 C1175,155.2 1175,153.1 1190,153.1 C1205,153.1 1205,163.1 1220,163.1 L1240,600 Z' fill='url(%23n1)'/%3E%3Cpath d='M-40,600 L-40,299.5 C-25,299.5 -25,301.9 -10,301.9 C5,301.9 5,307.5 20,307.5 C35,307.5 35,307.5 50,307.5 C65,307.5 65,311.3 80,311.3 C95,311.3 95,313.4 110,313.4 C125,313.4 125,321.2 140,321.2 C155,321.2 155,333.5 170,333.5 C185,333.5 185,349.9 200,349.9 C215,349.9 215,375.2 230,375.2 C245,375.2 245,400.1 260,400.1 C275,400.1 275,423.9 290,423.9 C305,423.9 305,443.5 320,443.5 C335,443.5 335,457.4 350,457.4 C365,457.4 365,465.0 380,465.0 C395,465.0 395,467.0 410,467.0 C425,467.0 425,466.3 440,466.3 C455,466.3 455,464.3 470,464.3 C485,464.3 485,457.9 500,457.9 C515,457.9 515,448.5 530,448.5 C545,448.5 545,438.2 560,438.2 C575,438.2 575,423.4 590,423.4 C605,423.4 605,412.8 620,412.8 C635,412.8 635,404.2 650,404.2 C665,404.2 665,403.0 680,403.0 C695,403.0 695,405.9 710,405.9 C725,405.9 725,416.4 740,416.4 C755,416.4 755,424.0 770,424.0 C785,424.0 785,432.7 800,432.7 C815,432.7 815,439.6 830,439.6 C845,439.6 845,439.2 860,439.2 C875,439.2 875,439.9 890,439.9 C905,439.9 905,435.7 920,435.7 C935,435.7 935,433.7 950,433.7 C965,433.7 965,424.7 980,424.7 C995,424.7 995,413.5 1010,413.5 C1025,413.5 1025,394.6 1040,394.6 C1055,394.6 1055,379.3 1070,379.3 C1085,379.3 1085,359.7 1100,359.7 C1115,359.7 1115,349.1 1130,349.1 C1145,349.1 1145,341.5 1160,341.5 C1175,341.5 1175,343.1 1190,343.1 C1205,343.1 1205,349.4 1220,349.4 L1240,600 Z' fill='url(%23n2)'/%3E%3Cpath d='M-40,600 L-40,590.4 C-25,590.4 -25,595.4 -10,595.4 C5,595.4 5,595.7 20,595.7 C35,595.7 35,584.0 50,584.0 C65,584.0 65,565.4 80,565.4 C95,565.4 95,537.4 110,537.4 C125,537.4 125,507.9 140,507.9 C155,507.9 155,480.9 170,480.9 C185,480.9 185,458.4 200,458.4 C215,458.4 215,442.5 230,442.5 C245,442.5 245,433.2 260,433.2 C275,433.2 275,424.6 290,424.6 C305,424.6 305,425.8 320,425.8 C335,425.8 335,431.5 350,431.5 C365,431.5 365,436.1 380,436.1 C395,436.1 395,443.0 410,443.0 C425,443.0 425,441.9 440,441.9 C455,441.9 455,436.5 470,436.5 C485,436.5 485,429.9 500,429.9 C515,429.9 515,426.2 530,426.2 C545,426.2 545,427.6 560,427.6 C575,427.6 575,434.6 590,434.6 C605,434.6 605,447.2 620,447.2 C635,447.2 635,462.4 650,462.4 C665,462.4 665,479.8 680,479.8 C695,479.8 695,501.4 710,501.4 C725,501.4 725,524.0 740,524.0 C755,524.0 755,542.1 770,542.1 C785,542.1 785,548.0 800,548.0 C815,548.0 815,543.1 830,543.1 C845,543.1 845,531.3 860,531.3 C875,531.3 875,515.2 890,515.2 C905,515.2 905,497.0 920,497.0 C935,497.0 935,481.5 950,481.5 C965,481.5 965,464.6 980,464.6 C995,464.6 995,449.3 1010,449.3 C1025,449.3 1025,438.3 1040,438.3 C1055,438.3 1055,433.7 1070,433.7 C1085,433.7 1085,430.9 1100,430.9 C1115,430.9 1115,426.9 1130,426.9 C1145,426.9 1145,419.8 1160,419.8 C1175,419.8 1175,405.4 1190,405.4 C1205,405.4 1205,383.8 1220,383.8 L1240,600 Z' fill='url(%23n3)'/%3E%3C/svg%3E") no-repeat center bottom / max(100%, 900px) auto, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cfilter id='w' x='-20%25' y='-40%25' width='140%25' height='180%25'%3E%3CfeGaussianBlur stdDeviation='3.2'/%3E%3C/filter%3E%3Cg fill='%23000' filter='url(%23w)'%3E%3Cg opacity='0.3'%3E%3Ccircle cx='170' cy='98' r='14'/%3E%3Ccircle cx='200' cy='86' r='22'/%3E%3Ccircle cx='236' cy='78' r='28'/%3E%3Ccircle cx='274' cy='82' r='24'/%3E%3Ccircle cx='308' cy='92' r='16'/%3E%3Ccircle cx='336' cy='100' r='10'/%3E%3Crect x='150' y='92' width='200' height='18' rx='9'/%3E%3C/g%3E%3Cg opacity='0.2'%3E%3Ccircle cx='46' cy='48' r='9'/%3E%3Ccircle cx='64' cy='40' r='14'/%3E%3Ccircle cx='88' cy='38' r='16'/%3E%3Ccircle cx='110' cy='44' r='11'/%3E%3Crect x='34' y='44' width='90' height='12' rx='6'/%3E%3C/g%3E%3Cg opacity='0.16'%3E%3Ccircle cx='318' cy='30' r='7'/%3E%3Ccircle cx='334' cy='24' r='11'/%3E%3Ccircle cx='352' cy='28' r='8'/%3E%3Crect x='306' y='28' width='58' height='9' rx='4.5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat right -60px top -24px / 350px 350px; } @media (min-width:760px){ body::after{ -webkit-mask-position:center bottom, right 2vw top -10px; mask-position:center bottom, right 2vw top -10px; -webkit-mask-size:max(100%, 900px) auto, 460px 460px; mask-size:max(100%, 900px) auto, 460px 460px; } } /* Der Kopf traegt keinen eigenen Grund mehr - sonst laege ueber dem Licht ein flacher Balken. */ header.brand{background:transparent;} /* Der dicke Streifen links ist weg. Er hat jede Karte gleich laut gemacht und die App nach Baukasten aussehen lassen. Jetzt traegt eine Karte einen feinen Rand, einen hellen Streifen oben (das Licht faellt von oben) und laesst den Grund eine Spur durchscheinen. Die Farbe eines Abschnitts (offen, erledigt, abgesagt) bleibt am ganzen Rand erhalten. */ .card, .cat, .tagblatt, .bak-mahnung{ border-left-width:1px; background:var(--surface); background:color-mix(in srgb, var(--surface) 90%, transparent); box-shadow:inset 0 1px 0 var(--glanz), var(--shadow); } .cat, .bak-mahnung{border-left-color:var(--line);} .cat.tone-wait{border-color:var(--wait);} .cat.tone-ok{border-color:var(--ok);} .cat.tone-off{border-color:var(--off);} .cat, .bak-mahnung{border-radius:var(--radius);} .set-liste .cat{background:none;box-shadow:none;border-radius:0;border-left:none;} .tagblatt{padding:16px 15px 6px;} /* Das Zeichen der Erinnerung sitzt in einer getoenten Scheibe - so hat die Zeile einen Anker, ohne dass ein Streifen sie rahmen muss. */ .bak-mahnung .bm-zeichen{ width:36px;height:36px;border-radius:50%; align-items:center;justify-content:center; background:var(--accent-soft); } .empty{ background:color-mix(in srgb, var(--surface-2) 70%, transparent); border-style:dashed; } /* Der gelbe Kasten fuer noch offene Termine: der harte Rand war lauter als sein Inhalt. Die Farbe bleibt, der Rand tritt zurueck. */ .offen-block{ border-color:color-mix(in srgb, var(--wait) 32%, transparent); box-shadow:inset 0 1px 0 var(--glanz); } /* Drei Stufen, eindeutig zu lesen: .btn gefuellt im Akzent - der Schritt, um den es geht .btn.subtle getoent, ohne Rand - geht auch .btn.ghost nur ein feiner Rand - zur Seite, zurueck, abbrechen Der gefuellte Knopf traegt Licht oben und einen Schatten im eigenen Ton statt in Grau, dadurch liegt er auf der Seite, statt auf ihr zu kleben. */ .btn{ border:1px solid transparent; background:linear-gradient(to bottom, var(--glanz-knopf), rgba(255,255,255,0) 60%), var(--accent); color:var(--on-accent); font-weight:650;letter-spacing:.005em; box-shadow: inset 0 1px 0 var(--glanz-knopf), 0 1px 2px color-mix(in srgb, var(--accent) 30%, transparent), 0 8px 18px -8px color-mix(in srgb, var(--accent) 70%, transparent); } .btn.subtle{ background:var(--accent-soft); background:color-mix(in srgb, var(--accent) 12%, var(--surface)); color:var(--accent-deep);border-color:transparent;box-shadow:none; } .btn.ghost{ background:transparent;color:var(--ink); border-color:var(--line); border-color:color-mix(in srgb, var(--ink) 18%, transparent); box-shadow:none; } .btn.danger{ background:transparent;color:var(--warn); border-color:color-mix(in srgb, var(--warn) 45%, transparent); box-shadow:none; } .btn.small{padding:8px 14px;font-size:12.5px;} .btn[disabled]{box-shadow:none;filter:saturate(.5);} /* Runde Pfeilknoepfe, Uhrzeit-Knoepfe im Kopf: leicht wie Glas, damit sie neben der Ueberschrift nicht schwerer wiegen als sie. */.cal-pfeil, .ks-kreis{ background:color-mix(in srgb, var(--surface) 72%, transparent); border-color:color-mix(in srgb, var(--ink) 12%, transparent); box-shadow:inset 0 1px 0 var(--glanz); backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); } .kopf-set.active .ks-kreis{background:var(--accent-soft);border-color:var(--accent);} .ks-wort{font-size:9px;font-weight:600;letter-spacing:.02em;} .cal-heute{ background:color-mix(in srgb, var(--accent) 12%, var(--surface)); border-color:transparent; } /* Der gewaehlte Filter steht in der Schriftfarbe gefuellt - wie ein Reiter in einem Karteikasten. Das hebt ihn klar von den anderen ab, die nur ihren feinen Rand tragen, und passt in jedem Design: Schrift und Grund sind dort immer das staerkste Paar. */ .cf-chip, .chip{ background:color-mix(in srgb, var(--surface) 70%, transparent); border-color:color-mix(in srgb, var(--ink) 13%, transparent); box-shadow:none; } .cf-chip{padding:7px 11px;font-size:11.5px;} .cf-chip.on, .chip.on{ background:var(--ink);border-color:var(--ink);color:var(--ground); } /* Die Zahl steht in einer eigenen kleinen Pille, die sich vom Filter abhebt - vorher lag sie im selben Ton und war kaum zu sehen. */ .cf-chip .cnt{ display:inline-flex;align-items:center;justify-content:center; min-width:20px;height:18px;padding:0 6px;border-radius:999px; font-size:10.5px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums; background:var(--accent-soft); background:color-mix(in srgb, var(--accent) 16%, var(--surface)); color:var(--accent-deep); } .cf-chip.warn .cnt{background:var(--warn-soft);color:var(--danger);} .cf-chip.on .cnt{ background:color-mix(in srgb, var(--ground) 22%, transparent);color:var(--ground); } /* ---- Felder ---- */ .field input, .field select, .field textarea, .search-wrap input{ background:color-mix(in srgb, var(--surface) 88%, transparent); border-color:color-mix(in srgb, var(--ink) 13%, transparent); } .field input:focus, .field select:focus, .field textarea:focus, .search-wrap input:focus{ background:var(--surface); } /* Die Suche ist eine Pille - so sieht man ihr an, dass sie nichts speichert, sondern nur findet. */ .search-wrap input{border-radius:999px;} .field label{letter-spacing:.01em;} /* Das Wochenband: sieben Kacheln, die ganze Woche auf einen Blick. */ .wo-band{ display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px; margin:0 0 16px; } .wb-tag{ display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0; padding:8px 0 7px;border-radius:16px;cursor:pointer; font-family:var(--font-body);color:var(--ink); background:var(--surface); background:color-mix(in srgb, var(--surface) 78%, transparent); border:1.5px solid var(--line); border-color:color-mix(in srgb, var(--ink) 11%, transparent); transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease), transform var(--dur-schnell) var(--ease-feder); } .wb-tag:active{transform:scale(.93);transition-duration:.06s;} .wb-dow{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);} .wb-zahl{ font-family:var(--font-display);font-size:18px;font-weight:700;line-height:1; font-variant-numeric:tabular-nums; } .wb-punkte{display:flex;align-items:center;justify-content:center;gap:2.5px;height:7px;} .wb-punkte i{width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none;} .wb-punkte i.frei{background:var(--ok);} .wb-punkte .zz{font-size:9px;line-height:1;} .wb-tag.voll{border-color:color-mix(in srgb, var(--accent) 45%, transparent);} .wb-tag.vorbei{opacity:.55;} .wb-tag.zu-fest{background:var(--off-soft);border-color:color-mix(in srgb, var(--off) 45%, transparent);} .wb-tag.zu-urlaub{background:var(--ok-soft);border-color:color-mix(in srgb, var(--ok) 45%, transparent);} .wb-tag.heute{ background:var(--accent);border-color:var(--accent);color:var(--on-accent); box-shadow:0 8px 18px -8px color-mix(in srgb, var(--accent) 80%, transparent); } .wb-tag.heute .wb-dow{color:var(--on-accent);opacity:.85;} .wb-tag.heute .wb-punkte i{background:var(--on-accent);} /* Der gewaehlte Tag: ein Ring in Tinte, mit etwas Luft. So bleibt er auch erkennbar, wenn er selbst heute ist und schon gefuellt dasteht. */ .wb-tag.gewaehlt{outline:2px solid var(--ink);outline-offset:1px;border-color:var(--ink);} .wb-tag.heute.gewaehlt{border-color:var(--accent);} /* Unteraufgaben: der Zaehler ist zugleich der Knopf zum Aufklappen. */ .af-block{display:flex;flex-direction:column;gap:6px;} .af-zahl{ flex:none;display:inline-flex;align-items:center;gap:3px; padding:4px 8px;border-radius:999px; font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink-soft); background:var(--surface-2);border:1px solid var(--line); } .af-zahl svg{width:11px;height:11px;} .af-zahl.knopf{cursor:pointer;font-family:var(--font-body);-webkit-tap-highlight-color:transparent;touch-action:manipulation;} .af-zahl.knopf.on{color:var(--accent-deep);border-color:var(--accent);} .af-zahl.voll{color:var(--ok);border-color:var(--ok);} @media (max-width:360px){ .af-zahl span{display:none;} } .af-schritte{display:flex;flex-direction:column;gap:5px;margin:0 0 4px 22px;padding-left:12px;border-left:2px solid var(--line);} .af-schritt{display:flex;align-items:center;gap:8px;min-width:0;} .st-btn.klein{width:26px;height:26px;flex:none;} .st-btn.klein svg{width:13px;height:13px;} .af-schritt-txt{flex:1;min-width:0;font-size:13px;line-height:1.3;overflow-wrap:anywhere;} .af-schritt.fertig .af-schritt-txt{text-decoration:line-through;color:var(--ink-soft);} /* Die Unteraufgaben sind nummeriert - so hat Evi es gewollt ("1. Bananen kaufen"). Die Nummer steht nur in der Anzeige, nicht im Text; so bleibt sie richtig, wenn eine Unteraufgabe wegfaellt. Feste Breite, damit die Texte ab 10 buendig bleiben. */ .af-nr{flex:none;min-width:1.4em;margin-right:-5px;font-size:13px;font-weight:700; font-variant-numeric:tabular-nums;color:var(--ink-soft);text-align:right;} .af-neu.klein .af-nr{align-self:center;margin-right:0;} /* Das Kreuz zum Entfernen - eines fuer alle Listen (Unteraufgaben, Leistungen). */ .af-schritt-weg, .weg-kreuz{ flex:none;display:grid;place-items:center;width:26px;height:26px;padding:0;border:none;border-radius:50%; background:none;color:var(--ink-soft);cursor:pointer; } .af-schritt-weg svg, .weg-kreuz svg{width:12px;height:12px;} .af-neu.klein input{padding:7px 10px;font-size:13px;} .af-neu.klein .btn{width:34px;height:34px;} /* Notizen mit Punkten: in der Karte ein Zaehler, im Dialog die Liste. */ .nz-haken{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:var(--ink-soft);} .nz-haken svg{width:11px;height:11px;} .nz-haken.voll{color:var(--ok);} .nz-ansicht{display:flex;flex-direction:column;gap:6px;max-height:55vh;overflow-y:auto;} .nz-absatz{margin:4px 2px;font-size:13.5px;line-height:1.5;color:var(--ink);white-space:pre-wrap;} .nz-punkt{ display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:12px;cursor:pointer; text-align:left;font-family:var(--font-body);font-size:14px;color:var(--ink); background:var(--surface);border:1px solid var(--line); -webkit-tap-highlight-color:transparent;touch-action:manipulation; } .nz-kreis{ flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%; border:1.5px solid var(--line);color:transparent; transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease); } .nz-kreis svg{width:13px;height:13px;} .nz-punkt.on .nz-kreis{background:var(--ok-soft);border-color:var(--ok);color:var(--ok);} .nz-punkt.on .nz-punkt-txt{text-decoration:line-through;color:var(--ink-soft);} .nz-punkt-txt{flex:1;min-width:0;overflow-wrap:anywhere;} /* Das Notizbuch: jede Notiz eine kleine Karte, Titel fett, darunter zwei Zeilen Vorschau und wann sie zuletzt geaendert wurde. */ .nz-liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;} @media (max-width:340px){ .nz-liste{grid-template-columns:1fr;} } .nz-karte{ display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0; padding:11px 12px;border-radius:16px;cursor:pointer;text-align:left; font-family:var(--font-body);color:var(--ink); background:var(--surface);border:1px solid var(--line); -webkit-tap-highlight-color:transparent;touch-action:manipulation; transition:transform var(--dur-schnell) var(--ease-feder); } .nz-karte:active{transform:scale(.97);transition-duration:.06s;} .nz-titel{max-width:100%;font-size:13.5px;font-weight:700;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .nz-rest{ max-width:100%;font-size:12px;line-height:1.4;color:var(--ink-soft);overflow:hidden; display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2; } .nz-wann{margin-top:auto;font-size:10.5px;font-weight:600;color:var(--ink-soft);} .af-liste{display:flex;flex-direction:column;gap:6px;margin:0 0 10px;} .af-zeile{ display:flex;align-items:center;gap:9px;min-width:0; padding:6px 6px 6px 8px;border-radius:14px; background:var(--surface); border:1px solid var(--line); } .af-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;} .af-was{font-size:13.5px;font-weight:600;line-height:1.3;color:var(--ink);overflow-wrap:anywhere;} .af-wann{font-size:11px;font-weight:600;color:var(--ink-soft);} .af-wann.faellig{color:var(--alert);} .af-zeile.fertig .af-was{text-decoration:line-through;text-decoration-thickness:1.5px;color:var(--ink-soft);} .af-zeile.fertig{opacity:.7;} .af-zeile .st-btn{flex:none;} .af-neu{display:flex;gap:8px;align-items:center;min-width:0;} .af-neu input{ flex:1 1 auto;min-width:0;font-family:var(--font-body);font-size:14px;color:var(--ink); background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:9px 11px; } .af-neu input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);} .af-neu input[type=date]{flex:0 0 132px;-webkit-appearance:none;appearance:none;min-height:40px;} .af-neu .btn{flex:none;width:40px;height:40px;padding:0;} .af-leer{margin:0 0 4px;font-size:12.5px;line-height:1.5;color:var(--ink-soft);} .af-weg{margin-top:2px;} /* Der Kopf ueber den erledigten Aufgaben: eine ruhige Zeile zum Aufklappen. */ .af-erledigt-kopf{ display:flex;align-items:center;gap:7px;width:100%;margin:4px 0 6px;padding:8px 4px; background:none;border:none;border-top:1px solid var(--line);cursor:pointer; font-family:var(--font-body);font-size:12.5px;font-weight:700;color:var(--ink-soft);text-align:left; } .aek-z{display:flex;color:var(--ok);} .aek-z svg{width:14px;height:14px;} .aek-t{flex:1;min-width:0;} .aek-chev{display:flex;transition:transform var(--dur) var(--ease);} .aek-chev svg{width:15px;height:15px;} .aek-chev.auf{transform:rotate(180deg);} /* Die beiden Chips unter dem Band: "Termine" (der Tag) und "Aufgaben". Im Chip steht kein Tag mehr - so hat Evi es gewollt, Heute und das Datum stehen ja gleich darunter in der Karte. */ .wo-wahl{margin:-4px 0 12px;} @media (max-width:360px){ .wo-band{gap:4px;} .wb-tag{border-radius:13px;} .wb-zahl{font-size:16px;} } /* Die Tage als Karten. Nichts ist gestrichelt - so hat Evi es gewollt. Ob ein Tag etwas traegt, sagt die Hoehe: ein Tag mit Terminen liegt erhaben ueber der Seite, ein freier Tag liegt flach und schmal. */ /* Nach dem Sprung aus dem Band leuchtet der Rahmen einmal auf. */ @keyframes woBlitz{ 0% {box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent);} 35% {box-shadow:0 0 0 7px color-mix(in srgb, var(--accent) 25%, transparent);} 100%{box-shadow:0 0 0 12px transparent;} } /* Der Inhalt liegt in einem getoenten Fach, jeder Eintrag darin ist eine eigene helle Kachel. So hebt sich jeder Kasten klar ab, ohne Striche. */.wk-appt, .wk-appt + .wk-appt{ padding:6px 6px 6px 8px;border-radius:13px; background:var(--surface); border:1px solid var(--line); border-color:color-mix(in srgb, var(--ink) 9%, transparent); box-shadow:0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent); } /* Der Zustand steckt im Rand und in einem Hauch Farbe - dieselben drei Farben wie ueberall. Abgesagt tritt zurueck, statt gestrichelt zu sein. */ .wk-appt.is-open{ border-color:color-mix(in srgb, var(--wait) 50%, transparent); background:color-mix(in srgb, var(--wait-soft) 45%, var(--surface)); } .wk-appt.is-done{ border-color:color-mix(in srgb, var(--ok) 45%, transparent); background:color-mix(in srgb, var(--ok-soft) 40%, var(--surface)); } .wk-appt.is-cancelled{ border-color:color-mix(in srgb, var(--off) 35%, transparent); background:color-mix(in srgb, var(--off-soft) 45%, var(--surface)); box-shadow:none; } .wk-appt .avatar{width:36px;height:36px;} /* Die eigenen Zeitfenster direkt unter der Zeitleiste - dort, wo vorher "Frei" stand. */ /* Auf schmalen Handys nehmen die Rahmen Platz vom Namen weg. Dort ruecken Karte, Termin und Knoepfe enger zusammen - der Name hat Vorrang vor Luft. */ @media (max-width:400px){.wk-appt, .wk-appt + .wk-appt{padding:5px 3px 5px 6px;border-radius:12px;gap:3px;} .wk-appt .avatar{width:28px;height:28px;} .wk-zeile{gap:7px;} .wk-acts .st-btn{padding:4px;} } /* Der gewaehlte Tag ist ein weiches Feld statt eines Rahmens. An einem geschlossenen Tag bleibt dessen Farbe - dann zeigt nur ein feiner Ring, dass er gewaehlt ist. */ .cal-tag.sel{ border-color:transparent; box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 55%, transparent); } .cal-tag.sel:not(.zu){background:color-mix(in srgb, var(--accent) 11%, transparent);box-shadow:none;} /* Die beiden Knoepfe, die einen einzelnen Tag zumachen: ihre Farbe bleibt, der Rand wird leiser - sonst stehen sie lauter da als "+ Termin". */ .tz-knopf.fest{border-color:color-mix(in srgb, var(--off) 35%, transparent);} .tz-knopf.urlaub{border-color:color-mix(in srgb, var(--ok) 35%, transparent);} .cal-tag.heute .ct-zahl{ box-shadow:0 5px 12px -5px color-mix(in srgb, var(--accent) 85%, transparent); }