PageSourceSearch

https://gophiel.de/

html gophiel.de collected 2026-10-09 23:31:01 UTC 48,637 bytes, 1,788 lines download raw bytes

1<!DOCTYPE html>
2<html lang="de">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0">
6<title>Gophiel – Vom Struggeln ins Strahlen</title>
7<link rel="stylesheet" href="/assets/fonts/local-fonts.css">
8<style>
9  :root {
10    --gold: #C9922A;
11    --gold-light: #E8B94F;
12    --gold-pale: #F5E6C8;
13    --teal: #5B9A8B;
14    --teal-light: #7BB4A7;
15    --teal-pale: #E8F4F0;
16    --cream: #FDFAF4;
17    --dark: #1A1410;
18    --brown: #3D2B1A;
19    --text: #2C2016;
20    --text-light: #7A6650;
21    --white: #FFFFFF;
22  }
23
24  * { margin: 0; padding: 0; box-sizing: border-box; }
25  html { scroll-behavior: smooth; }
26
27  body {
28    font-family: 'Jost', sans-serif;
29    background: var(--cream);
30    color: var(--text);
31    overflow-x: hidden;
32  }
33
34  /* ── NAV ── */
35  nav {
36    position: fixed;
37    top: 0; left: 0; right: 0;
38    z-index: 100;
39    display: flex;
40    justify-content: space-between;
41    align-items: center;
42    padding: 1.2rem 3rem;
43    background: rgba(253,250,244,0.92);
44    backdrop-filter: blur(12px);
45    border-bottom: 1px solid rgba(201,146,42,0.15);
46    transition: all 0.3s ease;
47  }
48
49  nav.scrolled {
50    padding: 0.8rem 3rem;
51    box-shadow: 0 2px 20px rgba(0,0,0,0.06);
52  }
53
54  .logo {
55    display: flex;
56    align-items: center;
57    gap: 0.6rem;
58    font-family: 'Cormorant Garamond', serif;
59    font-size: 1.8rem;
60    font-weight: 600;
61    color: var(--gold);
62    letter-spacing: 0.1em;
63    text-decoration: none;
64  }
65
66  .logo img {
67    height: 38px;
68    width: auto;
69  }
70
71  .nav-links {
72    display: flex;
73    gap: 2.5rem;
74    list-style: none;
75    align-items: center;
76  }
77
78  .nav-links a {
79    text-decoration: none;
80    color: var(--text-light);
81    font-size: 0.85rem;
82    font-weight: 500;
83    letter-spacing: 0.08em;
84    text-transform: uppercase;
85    transition: color 0.3s;
86  }
87
88  .nav-links a:hover { color: var(--gold); }
89
90  .nav-cta {
91    background: var(--gold);
92    color: var(--white) !important;
93    padding: 0.6rem 1.4rem;
94    border-radius: 2px;
95    transition: background 0.3s !important;
96  }
97
98  .nav-cta:hover { background: var(--brown) !important; }
99
100  /* Mobile menu */
101  .menu-toggle {
102    display: none;
103    background: none;
104    border: none;
105    cursor: pointer;
106    padding: 0.5rem;
107  }
108
109  .menu-toggle span {
110    display: block;
111    width: 24px;
112    height: 2px;
113    background: var(--gold);
114    margin: 5px 0;
115    transition: all 0.3s;
116  }
117
118  .menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
119  .menu-toggle.active span:nth-child(2) { opacity: 0; }
120  .menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
121
122  /* ── HERO ── */
123  .hero {
124    min-height: 100vh;
125    display: flex;
126    flex-direction: column;
127    align-items: center;
128    justify-content: center;
129    text-align: center;
130    padding: 10rem 2rem 6rem;
131    position: relative;
132    overflow: hidden;
133    background: url('images/funktionieren-strahlen.jpg') center center / cover no-repeat;
134  }
135
136  .hero::before {
137    content: '';
138    position: absolute;
139    inset: 0;
140    background: linear-gradient(180deg, rgba(253,250,244,0.82) 0%, rgba(253,250,244,0.7) 40%, rgba(253,250,244,0.88) 100%);
141    pointer-events: none;
142  }
143
144  .hero-label {
145    font-size: 0.75rem;
146    font-weight: 500;
147    letter-spacing: 0.25em;
148    text-transform: uppercase;
149    color: var(--gold);
150    margin-bottom: 2rem;
151    opacity: 0;
152    animation: fadeUp 0.8s 0.2s forwards;
153    position: relative;
154    z-index: 1;
155  }
156
157  .hero h1 {
158    font-family: 'Cormorant Garamond', serif;
159    font-size: clamp(2.6rem, 5vw, 4.2rem);
160    font-weight: 300;
161    line-height: 1.25;
162    color: var(--dark);
163    margin-bottom: 1rem;
164    max-width: 700px;
165    opacity: 0;
166    animation: fadeUp 0.8s 0.3s forwards;
167    position: relative;
168    z-index: 1;
169  }
170
171  .hero h1 em {
172    font-style: italic;
173    color: var(--gold);
174  }
175
176  .hero-subtitle {
177    font-family: 'Cormorant Garamond', serif;
178    font-size: clamp(1.2rem, 2vw, 1.6rem);
179    font-weight: 300;
180    font-style: italic;
181    color: var(--gold);
182    margin-bottom: 2.5rem;
183    opacity: 0;
184    animation: fadeUp 0.8s 0.4s forwards;
185    position: relative;
186    z-index: 1;
187  }
188
189  .hero-text {
190    font-size: 1.15rem;
191    line-height: 1.9;
192    color: var(--text-light);
193    max-width: 520px;
194    margin-bottom: 3.5rem;
195    opacity: 0;
196    animation: fadeUp 0.8s 0.5s forwards;
197    position: relative;
198    z-index: 1;
199  }
200
201  .hero-cta {
202    opacity: 0;
203    animation: fadeUp 0.8s 0.7s forwards;
204    position: relative;
205    z-index: 1;
206  }
207
208  /* ── BUTTONS ── */
209  .btn-primary {
210    background: var(--gold);
211    color: var(--white);
212    padding: 1rem 2.2rem;
213    border: none;
214    border-radius: 2px;
215    font-family: 'Jost', sans-serif;
216    font-size: 0.85rem;
217    font-weight: 500;
218    letter-spacing: 0.1em;
219    text-transform: uppercase;
220    cursor: pointer;
221    text-decoration: none;
222    transition: all 0.3s;
223    display: inline-block;
224  }
225
226  .btn-primary:hover {
227    background: var(--brown);
228    transform: translateY(-2px);
229    box-shadow: 0 8px 24px rgba(201,146,42,0.3);
230  }
231
232  .btn-secondary {
233    background: transparent;
234    color: var(--gold);
235    padding: 1rem 2.2rem;
236    border: 1px solid var(--gold);
237    border-radius: 2px;
238    font-family: 'Jost', sans-serif;
239    font-size: 0.85rem;
240    font-weight: 500;
241    letter-spacing: 0.1em;
242    text-transform: uppercase;
243    cursor: pointer;
244    text-decoration: none;
245    transition: all 0.3s;
246    display: inline-block;
247  }
248
249  .btn-secondary:hover {
250    background: var(--gold-pale);
251    transform: translateY(-2px);
252  }
253
254  .btn-text {
255    color: var(--gold);
256    font-size: 0.85rem;
257    font-weight: 500;
258    letter-spacing: 0.1em;
259    text-transform: uppercase;
260    text-decoration: none;
261    padding: 1rem 1.5rem;
262    transition: all 0.3s;
263    display: inline-flex;
264    align-items: center;
265    gap: 0.5rem;
266  }
267
268  .btn-text:hover { color: var(--brown); }
269  .btn-text::after { content: ' \2192'; transition: transform 0.3s; }
270  .btn-text:hover::after { transform: translateX(4px); }
271
272  /* ── SECTION HELPERS ── */
273  .section-label {
274    font-size: 0.75rem;
275    font-weight: 500;
276    letter-spacing: 0.2em;
277    text-transform: uppercase;
278    color: var(--gold);
279    margin-bottom: 1.5rem;
280  }
281
282  .section-label-center { text-align: center; }
283
284  .section-divider {
285    width: 40px;
286    height: 1px;
287    background: var(--gold);
288    margin: 0 auto 2rem;
289  }
290
291  /* ── PAIN SECTION ── */
292  .pain-section {
293    padding: 8rem 2rem;
294    background: var(--white);
295    position: relative;
296  }
297
298  .pain-section::before {
299    content: '';
300    position: absolute;
301    top: 0; left: 0; right: 0;
302    height: 1px;
303    background: linear-gradient(90deg, transparent, var(--gold-pale), transparent);
304  }
305
306  .pain-inner {
307    max-width: 700px;
308    margin: 0 auto;
309    text-align: center;
310  }
311
312  .pain-inner h2 {
313    font-family: 'Cormorant Garamond', serif;
314    font-size: clamp(1.8rem, 3vw, 2.6rem);
315    font-weight: 300;
316    line-height: 1.4;
317    color: var(--dark);
318    margin-bottom: 2rem;
319  }
320
321  .pain-inner h2 em { font-style: italic; color: var(--gold); }
322
323  .pain-intro {
324    font-size: 1.1rem;
325    line-height: 1.9;
326    color: var(--text-light);
327    margin-bottom: 3rem;
328  }
329
330  .list-items {
331    display: flex;
332    flex-direction: column;
333    gap: 0;
334    max-width: 480px;
335    margin: 0 auto 3rem;
336    text-align: left;
337  }
338
339  .list-item {
340    padding: 0.9rem 0;
341    border-bottom: 1px solid rgba(201,146,42,0.08);
342    font-family: 'Cormorant Garamond', serif;
343    font-size: 1.15rem;
344    font-weight: 400;
345    line-height: 1.5;
346    color: var(--text);
347    padding-left: 1.2rem;
348    position: relative;
349    transition: color 0.3s;
350  }
351
352  .list-item:last-child { border-bottom: none; }
353
354  .list-item::before {
355    content: '';
356    position: absolute;
357    left: 0;
358    top: 50%;
359    width: 5px;
360    height: 5px;
361    border-radius: 50%;
362    background: var(--gold);
363    transform: translateY(-50%);
364    opacity: 0.5;
365  }
366
367  .list-item:hover { color: var(--gold); }
368
369  .pain-whisper {
370    font-family: 'Cormorant Garamond', serif;
371    font-size: 1.4rem;
372    font-style: italic;
373    color: var(--gold);
374    line-height: 1.6;
375  }
376
377  /* ── TRUTH SECTION ── */
378  .truth-section {
379    padding: 8rem 2rem;
380    background: var(--cream);
381    position: relative;
382  }
383
384  .truth-inner {
385    max-width: 1000px;
386    margin: 0 auto;
387    display: grid;
388    grid-template-columns: 2fr 3fr;
389    gap: 4rem;
390    align-items: center;
391  }
392
393  .truth-image {
394    border-radius: 4px;
395    overflow: hidden;
396  }
397
398  .truth-image img {
399    width: 100%;
400    height: auto;
401    display: block;
402    border-radius: 4px;
403  }
404
405  .truth-content {
406    text-align: left;
407  }
408
409  .truth-content h2 {
410    font-family: 'Cormorant Garamond', serif;
411    font-size: clamp(1.8rem, 3vw, 2.4rem);
412    font-weight: 300;
413    line-height: 1.4;
414    color: var(--dark);
415    margin-bottom: 2rem;
416  }
417
418  .truth-content h2 em { font-style: italic; color: var(--gold); }
419
420  .truth-text {
421    font-size: 1.1rem;
422    line-height: 2;
423    color: var(--text-light);
424    margin-bottom: 2rem;
425  }
426
427  .truth-highlight {
428    font-family: 'Cormorant Garamond', serif;
429    font-size: 1.3rem;
430    font-weight: 400;
431    color: var(--teal);
432    padding: 2rem;
433    border-left: 3px solid var(--teal);
434    text-align: left;
435    margin: 2.5rem 0;
436    background: var(--teal-pale);
437    border-radius: 0 4px 4px 0;
438    line-height: 1.7;
439  }
440
441  /* ── METHOD / 3 STEPS ── */
442  .method-section {
443    padding: 8rem 2rem;
444    background: var(--dark);
445    color: var(--white);
446    position: relative;
447    overflow: hidden;
448  }
449
450  .method-section::before {
451    content: '';
452    position: absolute;
453    top: -2px; left: 0; right: 0;
454    height: 3px;
455    background: linear-gradient(90deg, var(--gold), var(--teal), var(--gold));
456  }
457
458  .method-section::after {
459    content: '';
460    position: absolute;
461    inset: 0;
462    background: radial-gradient(ellipse at 30% 50%, rgba(91,154,139,0.08) 0%, transparent 60%),
463                radial-gradient(ellipse at 70% 50%, rgba(201,146,42,0.06) 0%, transparent 50%);
464    pointer-events: none;
465  }
466
467  .method-header {
468    text-align: center;
469    margin-bottom: 5rem;
470    position: relative;
471    z-index: 1;
472  }
473
474  .method-header .section-label { color: var(--gold-light); }
475
476  .method-header h2 {
477    font-family: 'Cormorant Garamond', serif;
478    font-size: clamp(2rem, 3.5vw, 3rem);
479    font-weight: 300;
480    line-height: 1.3;
481  }
482
483  .method-header h2 em { font-style: italic; color: var(--gold-light); }
484
485  .method-header p {
486    font-size: 1.1rem;
487    color: rgba(255,255,255,0.7);
488    margin-top: 1.5rem;
489    max-width: 500px;
490    margin-left: auto;
491    margin-right: auto;
492    line-height: 1.8;
493  }
494
495  .method-grid {
496    display: grid;
497    grid-template-columns: repeat(3, 1fr);
498    gap: 2.5rem;
499    max-width: 1000px;
500    margin: 0 auto;
501    position: relative;
502    z-index: 1;
503  }
504
505  .method-step {
506    padding: 3rem 2.5rem;
507    border: 1px solid rgba(201,146,42,0.15);
508    border-radius: 4px;
509    position: relative;
510    background: rgba(255,255,255,0.02);
511    transition: all 0.4s;
512    text-align: center;
513  }
514
515  .method-step:hover {
516    border-color: rgba(201,146,42,0.4);
517    background: rgba(255,255,255,0.05);
518    transform: translateY(-6px);
519  }
520
521  .step-icon {
522    font-family: 'Cormorant Garamond', serif;
523    font-size: 3.5rem;
524    font-weight: 300;
525    color: var(--gold);
526    opacity: 0.5;
527    line-height: 1;
528    margin-bottom: 1.5rem;
529    display: block;
530  }
531
532  .method-step h3 {
533    font-family: 'Cormorant Garamond', serif;
534    font-size: 1.5rem;
535    font-weight: 400;
536    color: var(--gold-light);
537    margin-bottom: 1rem;
538  }
539
540  .method-step p {
541    font-size: 1rem;
542    line-height: 1.8;
543    color: rgba(255,255,255,0.75);
544  }
545
546  /* ── RESULTS ── */
547  .results-section {
548    padding: 8rem 2rem;
549    background: var(--white);
550    text-align: center;
551    position: relative;
552  }
553
554  .results-section::before {
555    content: '';
556    position: absolute;
557    inset: 0;
558    background: radial-gradient(ellipse at 50% 50%, rgba(91,154,139,0.04) 0%, transparent 60%);
559    pointer-events: none;
560  }
561
562  .results-inner {
563    max-width: 1000px;
564    margin: 0 auto;
565    position: relative;
566    z-index: 1;
567    display: grid;
568    grid-template-columns: 2fr 3fr;
569    gap: 4rem;
570    align-items: center;
571  }
572
573  .results-content h2 {
574    font-family: 'Cormorant Garamond', serif;
575    font-size: clamp(1.8rem, 3vw, 2.4rem);
576    font-weight: 300;
577    line-height: 1.4;
578    color: var(--dark);
579    margin-bottom: 2.5rem;
580  }
581
582  .results-content h2 em { font-style: italic; color: var(--gold); }
583
584  .results-image {
585    border-radius: 4px;
586    overflow: hidden;
587  }
588
589  .results-image img {
590    width: 100%;
591    height: auto;
592    display: block;
593    border-radius: 4px;
594  }
595
596  .results-grid {
597    display: flex;
598    flex-direction: column;
599    gap: 0;
600    text-align: left;
601  }
602
603  /* ── OFFERS ── */
604  .offers-section {
605    padding: 8rem 2rem;
606    background: var(--cream);
607    position: relative;
608  }
609
610  .offers-header {
611    text-align: center;
612    margin-bottom: 5rem;
613  }
614
615  .offers-header h2 {
616    font-family: 'Cormorant Garamond', serif;
617    font-size: clamp(2rem, 3.5vw, 3rem);
618    font-weight: 300;
619    color: var(--dark);
620    line-height: 1.3;
621    margin-bottom: 1rem;
622  }
623
624  .offers-header h2 em { font-style: italic; color: var(--gold); }
625
626  .offers-header p {
627    font-size: 1.1rem;
628    color: var(--text-light);
629    line-height: 1.8;
630  }
631
632  .offers-grid {
633    display: grid;
634    grid-template-columns: repeat(3, 1fr);
635    gap: 2.5rem;
636    max-width: 1100px;
637    margin: 0 auto;
638  }
639
640  .offer-card {
641    background: var(--white);
642    padding: 3rem 2.5rem;
643    border-radius: 6px;
644    border: 1px solid rgba(201,146,42,0.12);
645    transition: all 0.4s;
646    display: flex;
647    flex-direction: column;
648    position: relative;
649    overflow: hidden;
650  }
651
652  .offer-card:hover {
653    transform: translateY(-6px);
654    box-shadow: 0 16px 40px rgba(0,0,0,0.08);
655    border-color: var(--gold-pale);
656  }
657
658  .offer-card.featured {
659    border-color: var(--gold);
660    background: linear-gradient(180deg, rgba(201,146,42,0.03) 0%, var(--white) 40%);
661  }
662
663  .offer-card.featured::before {
664    content: 'Empfohlen';
665    position: absolute;
666    top: 1rem;
667    right: -2rem;
668    background: var(--gold);
669    color: var(--white);
670    font-size: 0.7rem;
671    font-weight: 500;
672    letter-spacing: 0.1em;
673    text-transform: uppercase;
674    padding: 0.3rem 2.5rem;
675    transform: rotate(45deg);
676  }
677
678  .offer-label {
679    font-size: 0.72rem;
680    font-weight: 500;
681    letter-spacing: 0.2em;
682    text-transform: uppercase;
683    color: var(--gold);
684    margin-bottom: 1rem;
685  }
686
687  .offer-card h3 {
688    font-family: 'Cormorant Garamond', serif;
689    font-size: 1.6rem;
690    font-weight: 400;
691    color: var(--dark);
692    margin-bottom: 1.5rem;
693    line-height: 1.3;
694  }
695
696  .offer-card p {
697    font-size: 1rem;
698    line-height: 1.8;
699    color: var(--text-light);
700    margin-bottom: 2rem;
701    flex-grow: 1;
702  }
703
704  .offer-card .btn-secondary {
705    align-self: flex-start;
706    font-size: 0.8rem;
707    padding: 0.8rem 1.8rem;
708  }
709
710  .offer-card.featured .btn-secondary {
711    background: var(--gold);
712    color: var(--white);
713    border-color: var(--gold);
714  }
715
716  .offer-card.featured .btn-secondary:hover {
717    background: var(--brown);
718    border-color: var(--brown);
719  }
720
721  /* ── TESTIMONIALS ── */
722  .testimonials-section {
723    padding: 8rem 2rem;
724    background: var(--dark);
725    color: var(--white);
726    position: relative;
727    overflow: hidden;
728  }
729
730  .testimonials-section::before {
731    content: '';
732    position: absolute;
733    inset: 0;
734    background: radial-gradient(circle at 20% 80%, rgba(201,146,42,0.1) 0%, transparent 50%),
735                radial-gradient(circle at 80% 20%, rgba(91,154,139,0.06) 0%, transparent 40%);
736  }
737
738  .testimonials-header {
739    text-align: center;
740    margin-bottom: 4rem;
741    position: relative;
742    z-index: 1;
743  }
744
745  .testimonials-header .section-label { color: var(--gold-light); }
746
747  .testimonials-header h2 {
748    font-family: 'Cormorant Garamond', serif;
749    font-size: clamp(2rem, 3vw, 2.8rem);
750    font-weight: 300;
751    line-height: 1.3;
752  }
753
754  .testimonials-header h2 em { font-style: italic; color: var(--gold-light); }
755
756  .testimonials-grid {
757    display: grid;
758    grid-template-columns: 1fr;
759    gap: 2.5rem;
760    max-width: 750px;
761    margin: 0 auto;
762    position: relative;
763    z-index: 1;
764  }
765
766  .testimonial-card {
767    padding: 2.5rem 3rem;
768    border: 1px solid rgba(201,146,42,0.15);
769    border-radius: 4px;
770    background: rgba(255,255,255,0.03);
771    transition: all 0.3s;
772  }
773
774  .testimonial-card:hover {
775    border-color: rgba(201,146,42,0.4);
776    background: rgba(255,255,255,0.06);
777  }
778
779  .quote-mark {
780    font-family: 'Cormorant Garamond', serif;
781    font-size: 4rem;
782    color: var(--gold);
783    opacity: 0.3;
784    line-height: 0.8;
785    margin-bottom: 1rem;
786    display: block;
787  }
788
789  .testimonial-card p {
790    font-size: 1.05rem;
791    line-height: 1.9;
792    color: rgba(255,255,255,0.75);
793    font-style: italic;
794  }
795
796  .testimonial-author-name {
797    margin-top: 1.2rem;
798    font-size: 0.85rem;
799    font-weight: 500;
800    color: var(--gold-light);
801    letter-spacing: 0.05em;
802  }
803
804  /* ── ABOUT ── */
805  .about-section {
806    padding: 8rem 2rem;
807    background: var(--white);
808    position: relative;
809  }
810
811  .about-inner {
812    max-width: 900px;
813    margin: 0 auto;
814    display: grid;
815    grid-template-columns: 1fr 1.2fr;
816    gap: 5rem;
817    align-items: center;
818  }
819
820  .about-image {
821    position: relative;
822  }
823
824  .about-img-placeholder {
825    width: 100%;
826    border-radius: 4px;
827    overflow: hidden;
828  }
829
830  .about-img-placeholder img {
831    width: 100%;
832    height: auto;
833    display: block;
834    border-radius: 4px;
835  }
836
837  .about-content h2 {
838    font-family: 'Cormorant Garamond', serif;
839    font-size: clamp(2rem, 3vw, 2.8rem);
840    font-weight: 300;
841    line-height: 1.3;
842    color: var(--dark);
843    margin-bottom: 2.5rem;
844  }
845
846  .about-content h2 em { font-style: italic; color: var(--gold); }
847
848  .about-content p {
849    font-size: 1.05rem;
850    line-height: 1.9;
851    color: var(--text-light);
852    margin-bottom: 1.5rem;
853  }
854
855  .about-content p strong {
856    color: var(--text);
857    font-weight: 500;
858  }
859
860  .about-highlight {
861    font-family: 'Cormorant Garamond', serif;
862    font-size: 1.2rem;
863    font-style: italic;
864    color: var(--gold);
865    padding: 1.5rem 0;
866    border-top: 1px solid rgba(201,146,42,0.15);
867    border-bottom: 1px solid rgba(201,146,42,0.15);
868    margin: 2rem 0;
869    line-height: 1.7;
870  }
871
872  /* ── FREEBIE ── */
873  .freebie-section {
874    padding: 8rem 2rem;
875    background: var(--cream);
876    text-align: center;
877    position: relative;
878    overflow: hidden;
879  }
880
881  .freebie-section::before {
882    content: '';
883    position: absolute;
884    inset: 0;
885    background: radial-gradient(ellipse at 50% 50%, rgba(201,146,42,0.06) 0%, transparent 60%);
886    pointer-events: none;
887  }
888
889  .freebie-inner {
890    max-width: 600px;
891    margin: 0 auto;
892    position: relative;
893    z-index: 1;
894  }
895
896  .freebie-inner h2 {
897    font-family: 'Cormorant Garamond', serif;
898    font-size: clamp(2rem, 3.5vw, 2.8rem);
899    font-weight: 300;
900    color: var(--dark);
901    line-height: 1.3;
902    margin-bottom: 0.5rem;
903  }
904
905  .freebie-inner h2 em { font-style: italic; color: var(--gold); }
906
907  .freebie-subtitle {
908    font-family: 'Cormorant Garamond', serif;
909    font-size: 1.2rem;
910    font-style: italic;
911    color: var(--text-light);
912    margin-bottom: 3rem;
913  }
914
915  .freebie-benefits {
916    display: grid;
917    grid-template-columns: repeat(3, 1fr);
918    gap: 2rem;
919    margin-bottom: 3rem;
920    text-align: center;
921  }
922
923  .freebie-benefit {
924    padding: 1.5rem 1rem;
925  }
926
927  .freebie-benefit .benefit-icon {
928    font-family: 'Cormorant Garamond', serif;
929    font-size: 2rem;
930    color: var(--gold);
931    margin-bottom: 0.8rem;
932    display: block;
933  }
934
935  .freebie-benefit p {
936    font-size: 1rem;
937    color: var(--text);
938    line-height: 1.6;
939  }
940
941  .freebie-form {
942    display: flex;
943    gap: 0.75rem;
944    max-width: 450px;
945    margin: 0 auto 1.5rem;
946  }
947
948  .freebie-form input {
949    flex: 1;
950    padding: 1rem 1.5rem;
951    border: 1px solid rgba(201,146,42,0.25);
952    border-radius: 2px;
953    font-family: 'Jost', sans-serif;
954    font-size: 1rem;
955    background: var(--white);
956    color: var(--text);
957    transition: border-color 0.3s;
958  }
959
960  .freebie-form input:focus {
961    outline: none;
962    border-color: var(--gold);
963  }
964
965  .freebie-form input::placeholder { color: var(--text-light); }
966
967  .freebie-note {
968    font-size: 0.78rem;
969    color: var(--text-light);
970    line-height: 1.6;
971  }
972
973  /* ── FAQ ── */
974  .faq-section {
975    padding: 8rem 2rem;
976    background: var(--white);
977  }
978
979  .faq-inner {
980    max-width: 700px;
981    margin: 0 auto;
982  }
983
984  .faq-header {
985    text-align: center;
986    margin-bottom: 4rem;
987  }
988
989  .faq-header h2 {
990    font-family: 'Cormorant Garamond', serif;
991    font-size: clamp(2rem, 3vw, 2.6rem);
992    font-weight: 300;
993    color: var(--dark);
994    line-height: 1.3;
995  }
996
997  .faq-item {
998    border-bottom: 1px solid rgba(201,146,42,0.12);
999    padding: 1.8rem 0;
1000    cursor: pointer;
1001    transition: all 0.3s;
1002  }
1003
1004  .faq-item:first-of-type {
1005    border-top: 1px solid rgba(201,146,42,0.12);
1006  }
1007
1008  .faq-question {
1009    display: flex;
1010    justify-content: space-between;
1011    align-items: center;
1012    gap: 1rem;
1013  }
1014
1015  .faq-question h3 {
1016    font-family: 'Cormorant Garamond', serif;
1017    font-size: 1.2rem;
1018    font-weight: 400;
1019    color: var(--dark);
1020    line-height: 1.4;
1021  }
1022
1023  .faq-toggle {
1024    width: 24px;
1025    height: 24px;
1026    flex-shrink: 0;
1027    position: relative;
1028    transition: transform 0.3s;
1029  }
1030
1031  .faq-toggle::before,
1032  .faq-toggle::after {
1033    content: '';
1034    position: absolute;
1035    background: var(--gold);
1036    transition: all 0.3s;
1037  }
1038
1039  .faq-toggle::before {
1040    top: 50%;
1041    left: 4px;
1042    right: 4px;
1043    height: 1px;
1044    transform: translateY(-50%);
1045  }
1046
1047  .faq-toggle::after {
1048    left: 50%;
1049    top: 4px;
1050    bottom: 4px;
1051    width: 1px;
1052    transform: translateX(-50%);
1053  }
1054
1055  .faq-item.active .faq-toggle::after { transform: translateX(-50%) scaleY(0); }
1056
1057  .faq-answer {
1058    max-height: 0;
1059    overflow: hidden;
1060    transition: max-height 0.4s ease, padding 0.3s ease;
1061  }
1062
1063  .faq-item.active .faq-answer {
1064    max-height: 200px;
1065    padding-top: 1.2rem;
1066  }
1067
1068  .faq-answer p {
1069    font-size: 1rem;
1070    line-height: 1.8;
1071    color: var(--text-light);
1072  }
1073
1074  /* ── CTA FINAL ── */
1075  .cta-section {
1076    padding: 8rem 2rem;
1077    background: var(--cream);
1078    text-align: center;
1079    position: relative;
1080    overflow: hidden;
1081  }
1082
1083  .cta-section::before {
1084    content: '';
1085    position: absolute;
1086    inset: 0;
1087    background: radial-gradient(ellipse at 50% 50%, rgba(201,146,42,0.06) 0%, transparent 60%);
1088    pointer-events: none;
1089  }
1090
1091  .cta-section h2 {
1092    font-family: 'Cormorant Garamond', serif;
1093    font-size: clamp(2rem, 3.5vw, 3rem);
1094    font-weight: 300;
1095    color: var(--dark);
1096    line-height: 1.3;
1097    margin-bottom: 1.5rem;
1098    position: relative;
1099    z-index: 1;
1100  }
1101
1102  .cta-section h2 em { font-style: italic; color: var(--gold); }
1103
1104  .cta-section p {
1105    font-size: 1.1rem;
1106    line-height: 1.9;
1107    color: var(--text-light);
1108    max-width: 500px;
1109    margin: 0 auto 3rem;
1110    position: relative;
1111    z-index: 1;
1112  }
1113
1114  .cta-buttons {
1115    display: flex;
1116    gap: 1rem;
1117    justify-content: center;
1118    flex-wrap: wrap;
1119    position: relative;
1120    z-index: 1;
1121  }
1122
1123  /* ── FOOTER ── */
1124  footer {
1125    background: var(--dark);
1126    color: rgba(255,255,255,0.7);
1127    padding: 3rem 6rem;
1128    display: grid;
1129    grid-template-columns: 2fr 1fr 1fr;
1130    gap: 3rem;
1131    border-top: 1px solid rgba(201,146,42,0.2);
1132  }
1133
1134  .footer-brand .logo { display: block; margin-bottom: 1rem; }
1135
1136  .footer-brand p {
1137    font-size: 0.82rem;
1138    line-height: 1.7;
1139    max-width: 280px;
1140    color: rgba(255,255,255,0.6);
1141  }
1142
1143  .footer-col h4 {
1144    font-size: 0.75rem;
1145    font-weight: 500;
1146    letter-spacing: 0.15em;
1147    text-transform: uppercase;
1148    color: var(--gold-light);
1149    margin-bottom: 1.2rem;
1150  }
1151
1152  .footer-col ul { list-style: none; }
1153
1154  .footer-col ul li { margin-bottom: 0.6rem; }
1155
1156  .footer-col ul li a {
1157    font-size: 0.82rem;
1158    color: rgba(255,255,255,0.65);
1159    text-decoration: none;
1160    transition: color 0.3s;
1161  }
1162
1163  .footer-col ul li a:hover { color: var(--gold-light); }
1164
1165  .footer-bottom {
1166    grid-column: 1 / -1;
1167    padding-top: 2rem;
1168    border-top: 1px solid rgba(255,255,255,0.08);
1169    display: flex;
1170    justify-content: space-between;
1171    align-items: center;
1172  }
1173
1174  .footer-bottom p { font-size: 0.75rem; }
1175
1176  .footer-legal {
1177    display: flex;
1178    gap: 2rem;
1179  }
1180
1181  .footer-legal a {
1182    font-size: 0.75rem;
1183    color: rgba(255,255,255,0.6);
1184    text-decoration: none;
1185    transition: color 0.3s;
1186  }
1187
1188  .footer-legal a:hover { color: var(--gold-light); }
1189
1190  /* Widerrufsbutton (§ 356a BGB) — in der Legal-Zeile, aber als Pill hervorgehoben */
1191  .footer-legal .widerruf-btn {
1192    border: 1px solid var(--gold);
1193    border-radius: 999px;
1194    padding: 0.35rem 0.9rem;
1195    color: var(--gold-light);
1196    font-weight: 600;
1197    transition: background 0.3s, color 0.3s;
1198  }
1199  .footer-legal .widerruf-btn:hover {
1200    background: var(--gold-light);
1201    color: #1a1a1a;
1202  }
1203
1204  .disclaimer {
1205    font-size: 0.72rem;
1206    color: rgba(255,255,255,0.45);
1207    padding: 1rem 6rem;
1208    background: var(--dark);
1209    text-align: center;
1210    border-top: 1px solid rgba(255,255,255,0.05);
1211    line-height: 1.6;
1212  }
1213
1214  /* ── ANIMATIONS ── */
1215  @keyframes fadeUp {
1216    from { opacity: 0; transform: translateY(24px); }
1217    to { opacity: 1; transform: translateY(0); }
1218  }
1219
1220  .reveal {
1221    opacity: 0;
1222    transform: translateY(30px);
1223    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
1224  }
1225
1226  .reveal.visible {
1227    opacity: 1;
1228    transform: translateY(0);
1229  }
1230
1231  /* ── RESPONSIVE ── */
1232  @media (max-width: 900px) {
1233    nav { padding: 1rem 1.5rem; }
1234    .nav-links {
1235      display: none;
1236      position: absolute;
1237      top: 100%;
1238      left: 0;
1239      right: 0;
1240      background: rgba(253,250,244,0.98);
1241      backdrop-filter: blur(12px);
1242      flex-direction: column;
1243      gap: 0;
1244      padding: 1rem 0;
1245      border-bottom: 1px solid rgba(201,146,42,0.15);
1246    }
1247
1248    .nav-links.open { display: flex; }
1249
1250    .nav-links li { text-align: center; }
1251
1252    .nav-links a {
1253      display: block;
1254      padding: 1rem 1.5rem;
1255    }
1256
1257    .nav-cta { margin: 0.5rem 1.5rem; text-align: center; display: block; }
1258
1259    .menu-toggle { display: block; }
1260
1261    .hero { padding: 8rem 1.5rem 4rem; min-height: 90vh; }
1262
1263    .pain-section,
1264    .truth-inner { grid-template-columns: 1fr; gap: 2.5rem; }
1265    .truth-image { order: -1; }
1266    .results-inner { grid-template-columns: 1fr; gap: 2.5rem; }
1267    .truth-section,
1268    .method-section,
1269    .results-section,
1270    .offers-section,
1271    .testimonials-section,
1272    .about-section,
1273    .freebie-section,
1274    .faq-section,
1275    .cta-section { padding: 5rem 1.5rem; }
1276
1277    .method-grid { grid-template-columns: 1fr; max-width: 400px; }
1278    .results-grid { grid-template-columns: 1fr; }
1279    .offers-grid { grid-template-columns: 1fr; max-width: 450px; margin: 0 auto; }
1280    .testimonials-grid { grid-template-columns: 1fr; max-width: 500px; margin: 0 auto; }
1281    .freebie-benefits { grid-template-columns: 1fr; gap: 1rem; }
1282
1283    .about-inner {
1284      grid-template-columns: 1fr;
1285      gap: 3rem;
1286    }
1287
1288    .about-image { order: -1; max-width: 300px; margin: 0 auto; }
1289
1290    .freebie-form { flex-direction: column; }
1291
1292    footer { grid-template-columns: 1fr; padding: 3rem 1.5rem; }
1293    .disclaimer { padding: 1rem 1.5rem; }
1294  }
1295</style>
1296<script defer src="https://mailflow.gophiel.de/a/script.js"></script>
1296
1297</head>
1298<body>
1299
1300<!-- NAV -->
1301<nav>
1302  <a href="#" class="logo"><img src="images/logo-gophiel.png" alt="Gophiel Logo">GOPHIEL</a>
1303  <button class="menu-toggle" aria-label="Men&uuml;">
1304    <span></span><span></span><span></span>
1305  </button>
1306  <ul class="nav-links">
1307    <li><a href="#methode">Dein Weg</a></li>
1308    <li><a href="#angebote">Angebote</a></li>
1309    <li><a href="#ueber">About me</a></li>
1310    <li><a href="events.html">Events</a></li>
1311    <li><a href="#community" class="nav-cta">Kostenlose Meditation</a></li>
1312  </ul>
1313</nav>
1314
1315<!-- HERO -->
1316<section class="hero">
1317  <div class="hero-label">Seelenbegleitung</div>
1318  <h1>Vom Struggeln<br>ins <em>Strahlen.</em></h1>
1319  <div class="hero-subtitle">Du bist bereits vollkommen. Du hast es nur vergessen.</div>
1320  <p class="hero-text">
1321    Wenn du dich erinnerst, wer du wirklich bist,<br>
1322    darf wegfallen, was nie zu dir geh&ouml;rte &ndash;<br>
1323    und Klarheit, Leichtigkeit und Frieden kehren zu dir zur&uuml;ck.
1324  </p>
1325  <div class="hero-cta">
1326    <a href="#community" class="btn-primary">Kostenlose Leichtigkeits-Meditation starten</a>
1327  </div>
1328</section>
1329
1330<!-- PAIN -->
1331<section class="pain-section">
1332  <div class="pain-inner">
1333    <div class="reveal">
1334      <h2>Vielleicht kennst du<br>dieses <em>Gef&uuml;hl&hellip;</em></h2>
1335      <p class="pain-intro">
1336        Du hast schon so viel an dir gearbeitet.<br>
1337        B&uuml;cher gelesen. Seminare besucht. Dinge verstanden.<br><br>
1338        Und trotzdem&hellip;
1339      </p>
1340    </div>
1341
1342    <div class="list-items reveal">
1343      <div class="list-item">Du f&uuml;hlst dich innerlich oft leer</div>
1344      <div class="list-item">Du drehst dich im Kreis</div>
1345      <div class="list-item">Du hast das Gef&uuml;hl, nicht wirklich voranzukommen</div>
1346      <div class="list-item">Du funktionierst mehr, als dass du wirklich lebst</div>
1347      <div class="list-item">Dein Leben ist oft anstrengend, st&auml;ndig ist irgendwas</div>
1348    </div>
1349
1350    <p class="pain-whisper reveal">&bdquo;Da ist mehr f&uuml;r mich.&ldquo;</p>
1351  </div>
1352</section>
1353
1354<!-- TRUTH -->
1355<section class="truth-section">
1356  <div class="truth-inner">
1357    <div class="truth-image reveal">
1358      <img src="images/inneres-leuchten-mauer.jpg" alt="Inneres Leuchten">
1359    </div>
1360    <div class="truth-content reveal">
1361      <h2>Es liegt nicht daran, dass<br><em>mit dir etwas nicht stimmt.</em></h2>
1362      <p class="truth-text">
1363        Die meisten Wege suchen nach dem, was an dir falsch ist &ndash;<br>
1364        und versuchen, es zu reparieren.<br><br>
1365        Doch du bist nicht kaputt. Du bist nur zu weit von dir entfernt.
1366      </p>
1367      <div class="truth-highlight">
1368        Echte Ver&auml;nderung beginnt nicht beim Reparieren &ndash;<br>
1369        sondern beim Erinnern.
1370      </div>
1371    </div>
1372  </div>
1373</section>
1374
1375<!-- METHOD -->
1376<section class="method-section" id="methode">
1377  <div class="method-header reveal">
1378    <div class="section-label">Der Weg des Goldenen Lichts</div>
1379    <h2>Dein Weg<br>zur&uuml;ck zu <em>dir.</em></h2>
1380    <p>Meine Arbeit will dich nicht verbessern.<br>Sie erinnert dich an das, was in dir l&auml;ngst vollkommen ist.</p>
1381  </div>
1382
1383  <div class="method-grid">
1384    <div class="method-step reveal">
1385      <h3>Erinnern</h3>
1386      <p>Du kommst wieder in Kontakt mit deinem wahren Wesen &ndash; mit dem Licht in dir, das nie verloren war.</p>
1387    </div>
1388    <div class="method-step reveal">
1389      <h3>Loslassen</h3>
1390      <p>Aus dieser Verbindung heraus darf gehen, was nicht zu dir geh&ouml;rt &ndash; alte Muster, Rollen, gespeicherte Energien. Ohne Kampf.</p>
1391    </div>
1392    <div class="method-step reveal">
1393      <h3>Leben</h3>
1394      <p>Deine Wahrheit wird Alltag. Du folgst deiner inneren F&uuml;hrung und gehst deinen Seelenweg.</p>
1395    </div>
1396  </div>
1397</section>
1398
1399<!-- RESULTS -->
1400<section class="results-section">
1401  <div class="results-inner">
1402    <div class="results-content reveal">
1403      <h2>Was sich f&uuml;r dich <em>ver&auml;ndert</em></h2>
1404      <div class="results-grid">
1405        <div class="list-item">Du sp&uuml;rst wieder Klarheit in dir</div>
1406        <div class="list-item">Entscheidungen fallen dir leichter</div>
1407        <div class="list-item">Der innere Druck beginnt sich zu l&ouml;sen</div>
1408        <div class="list-item">Du f&uuml;hlst dich verbunden statt verloren</div>
1409        <div class="list-item">Du vertraust dir selbst wieder</div>
1410        <div class="list-item">Dein Leben wird stimmiger &ndash; Schritt f&uuml;r Schritt</div>
1411        <div class="list-item">Du hast wieder mehr Lebensfreude</div>
1412        <div class="list-item">Die Beziehung zu deinem Umfeld wird liebevoller und harmonischer</div>
1413        <div class="list-item">Du sp&uuml;rst inneren Frieden</div>
1414        <div class="list-item">Du f&uuml;hlst dich wieder richtig &ndash; so, wie du bist</div>
1415      </div>
1416    </div>
1417    <div class="results-image reveal">
1418      <img src="images/Fotolia_68138852_M.jpg" alt="Veränderung">
1419    </div>
1420  </div>
1421</section>
1422
1423<!-- OFFERS -->
1424<section class="offers-section" id="angebote">
1425  <div class="offers-header reveal">
1426    <div class="section-label section-label-center">Angebote</div>
1427    <h2>Finde deinen <em>n&auml;chsten Schritt</em></h2>
1428    <p>Jeder Mensch steht an einem anderen Punkt.<br>Deshalb gibt es verschiedene Wege.</p>
1429  </div>
1430
1431  <div class="offers-grid">
1432    <div class="offer-card reveal">
1433      <div class="offer-label">Einstieg</div>
1434      <h3>Leichtigkeits-Meditation</h3>
1435      <p>
1436        Ein Raum, um innezuhalten. Um dich neu auszurichten.
1437        Und um zu sp&uuml;ren, wer du jenseits allen Funktionierens bist.<br><br>
1438        Ideal, wenn du sanft beginnen m&ouml;chtest.
1439      </p>
1440      <a href="#community" class="btn-secondary">Kostenlos starten</a>
1441    </div>
1442
1443    <div class="offer-card featured reveal">
1444      <div class="offer-label">Transformation</div>
1445      <h3>PURE</h3>
1446      <p>
1447        <em>Die R&uuml;ckkehr zu deinem wahren Selbst.</em><br><br>
1448        Drei Monate tiefe Begleitung. Nicht, um jemand Neues zu werden &ndash;
1449        sondern um freizulegen, was l&auml;ngst in dir ist.<br><br>
1450        F&uuml;r Menschen, die nicht l&auml;nger nur funktionieren wollen.
1451      </p>
1452      <a href="pure.html" class="btn-secondary">PURE entdecken</a>
1453    </div>
1454
1455    <div class="offer-card reveal">
1456      <div class="offer-label">Tiefe</div>
1457      <h3>1:1 Healing</h3>
1458      <p>
1459        Ein Raum nur f&uuml;r dich. Individuell. Tiefgehend. Transformierend.<br><br>
1460        F&uuml;r deine n&auml;chste Entwicklungsstufe.
1461      </p>
1462      <a href="https://www.cal.eu/gophiel" target="_blank" class="btn-secondary">Termin buchen</a>
1463    </div>
1464  </div>
1465
1466  <div class="reveal" style="text-align:center; margin-top:3.5rem;">
1467    <a href="angebote.html" class="btn-text" style="text-transform:none; letter-spacing:0.03em;">Alle Angebote &amp; Kurse ansehen</a>
1468  </div>
1469</section>
1470
1471<!-- TESTIMONIALS -->
1472<section class="testimonials-section">
1473  <div class="testimonials-header reveal">
1474    <div class="section-label">Stimmen aus der Erfahrung</div>
1475    <h2>Was Menschen sagen, die<br><em>den Weg gegangen sind.</em></h2>
1476  </div>
1477
1478  <div class="testimonials-grid">
1479    <div class="testimonial-card reveal">
1480      <span class="quote-mark">&bdquo;</span>
1481      <p>Lieber Sebastian, das war unbeschreiblich sch&ouml;n &ndash; heilend, befreiend und hat mir einfach auch viel Spa&szlig; gemacht. Du f&uuml;hrst mit einer Lockerheit durch das Webinar, das ist schon klasse. Dabei bleibst du immer voll konzentriert beim Teilnehmer. Ich bin heute reich beschenkt worden und w&uuml;nsche jedem, der zu dir kommt, &auml;hnlich wundervolle Erlebnisse. Das Gef&uuml;hl endlich nach Hause gekommen zu sein, war sehr ber&uuml;hrend f&uuml;r mich. Vielen, vielen Dank und bis zum n&auml;chsten Mal&hellip;</p>
1482      <div class="testimonial-author-name">Monika T.</div>
1483    </div>
1484    <div class="testimonial-card reveal">
1485      <span class="quote-mark">&bdquo;</span>
1486      <p>Ich war in meinem Leben immer irgendwie auf der Suche nach etwas. Nun bin ich zur Ruhe gekommen und habe das Gef&uuml;hl angekommen zu sein. Ich f&uuml;hle mich geborgen und besch&uuml;tzt und das Gef&uuml;hl des Alleinsein ist vorbei. Meine Intuition hat sich verst&auml;rkt&hellip; es ist ein unbeschreibliches Gef&uuml;hl der Freude. Im Ganzen ist mein Leben sehr positiv geworden.</p>
1487      <div class="testimonial-author-name">Ingrid</div>
1488    </div>
1489    <div class="testimonial-card reveal">
1490      <span class="quote-mark">&bdquo;</span>
1491      <p>Durch Deine Arbeit sind bei mir viele psychische und auch k&ouml;rperliche Heilungsprozesse aktiviert worden. Vor einem Monat hatte ich noch schwere chronische Depressionen und starke stressbedingte Neurodermitis-Sch&uuml;be. Bis vor kurzem konnte mir dabei keiner wirklich helfen. Ich muss sagen, mein Neurodermitis-Juckreiz ist zu 99 Prozent verschwunden durch das t&auml;gliche Arbeiten mit Deinen Aufzeichnungen. Auch f&uuml;hle ich mich jetzt viel aktiver und kr&auml;ftiger in meinem Alltag.</p>
1492    </div>
1493    <div class="testimonial-card reveal">
1494      <span class="quote-mark">&bdquo;</span>
1495      <p>Sehr tief, tief ber&uuml;hrend. Ein Karfreitagswunder f&uuml;r uns &ndash; so f&uuml;hlte es sich an. Das lasse ich erst mal noch weiter wirken und freue mich sehr dar&uuml;ber. Vielen herzlichen Dank lieber Sebastian. Es war genial.</p>
1496      <div class="testimonial-author-name">Angela H.</div>
1497    </div>
1498  </div>
1499</section>
1500
1501
1502<!-- ABOUT -->
1503<section class="about-section" id="ueber">
1504  <div class="about-inner">
1505    <div class="about-image reveal">
1506      <div class="about-img-placeholder"><img src="images/sv-pecky-quad.jpg" alt="Sebastian"></div>
1507    </div>
1508
1509    <div class="about-content reveal">
1510      <div class="section-label">Ich kenne diesen Weg</div>
1511      <h2>Warum ich tue,<br>was ich <em>tue.</em></h2>
1512      <p>
1513        Ich wei&szlig;, wie es sich anf&uuml;hlt, zu suchen. Zu funktionieren.
1514        Und trotzdem nicht wirklich anzukommen.
1515      </p>
1516      <p>
1517        Der Wendepunkt kam, als ich aufgeh&ouml;rt habe, nur im Au&szlig;
1517en zu suchen &ndash;
1518        und begonnen habe, nach innen zu h&ouml;ren.
1519      </p>
1520      <div class="about-highlight">
1521        Ich wei&szlig;, was sich ver&auml;ndert, wenn du dich wieder
1522        mit deinem inneren Kern verbindest. Genau daf&uuml;r bin ich hier.
1523      </div>
1524      <p>
1525        Ich glaube nicht, dass Menschen repariert werden m&uuml;ssen.
1526        Wir haben nur vergessen, wer wir wirklich sind.
1527      </p>
1528      <p>
1529        Heute begleite ich Menschen zur&uuml;ck zu sich selbst &ndash;
1530        zur&uuml;ck in ihre Klarheit, zur&uuml;ck in ihre eigene Wahrheit.
1531      </p>
1532      <a href="#community" class="btn-text">Deinen ersten Schritt machen</a>
1533    </div>
1534  </div>
1535</section>
1536
1537<!-- FREEBIE / MEDITATION -->
1538<section class="freebie-section" id="meditation">
1539  <div class="freebie-inner">
1540    <div class="reveal">
1541      <div class="section-label section-label-center">Kostenlos</div>
1542      <h2>Deine <em>Leichtigkeits-Meditation</em></h2>
1543      <p class="freebie-subtitle">Gef&uuml;hrte Meditation, um anzukommen und dich wieder leicht zu f&uuml;hlen</p>
1544    </div>
1545
1546    <div class="freebie-benefits reveal">
1547      <div class="freebie-benefit">
1548        <span class="benefit-icon">&loz;</span>
1549        <p>Tiefe Entspannung</p>
1550      </div>
1551      <div class="freebie-benefit">
1552        <span class="benefit-icon">&loz;</span>
1553        <p>Loslassen, was dich schwer macht</p>
1554      </div>
1555      <div class="freebie-benefit">
1556        <span class="benefit-icon">&loz;</span>
1557        <p>Sp&uuml;ren, wie leicht du eigentlich bist</p>
1558      </div>
1559    </div>
1560
1561    <div class="reveal">
1562      <a href="#community" class="btn-primary">Jetzt kostenlos starten</a>
1563    </div>
1564    <p class="freebie-note reveal" style="margin-top:1.5rem;">Kein Spam. Jederzeit abmeldbar. Sicher &amp; unverbindlich.</p>
1565  </div>
1566</section>
1567
1568<!-- NEWSLETTER / COMMUNITY -->
1569<section class="method-section" id="community">
1570  <div class="method-header reveal" style="margin-bottom:0">
1571    <div class="section-label" style="color:var(--gold-light)">Community</div>
1572    <h2>Werde Teil dieses <em>Raumes</em></h2>
1573    <p style="margin-bottom: 2.5rem;">
1574      Impulse. Erinnerungen. Tiefe.<br>
1575      Erhalte regelm&auml;&szlig;ig neue Perspektiven, kleine Impulse f&uuml;r deinen Alltag
1576      und Einblicke in meine Arbeit.
1577    </p>
1578    <div style="max-width:450px;margin:0 auto;">
1579      <iframe src="https://mailflow.gophiel.de/f/1" style="width:100%;border:none;border-radius:8px;overflow:hidden;min-height:220px;" scrolling="no"></iframe>
1580    </div>
1581    <p class="freebie-note" style="color:rgba(255,255,255,0.55);margin-top:1rem;">Kein Spam. Jederzeit abmeldbar.</p>
1582  </div>
1583</section>
1584
1585<!-- FAQ -->
1586<section class="faq-section" id="faq">
1587  <div class="faq-inner">
1588    <div class="faq-header reveal">
1589      <h2>H&auml;ufige Fragen</h2>
1590    </div>
1591
1592    <div class="faq-item reveal">
1593      <div class="faq-question">
1594        <h3>Funktioniert das auch, wenn ich schon viel gemacht habe?</h3>
1595        <div class="faq-toggle"></div>
1596      </div>
1597      <div class="faq-answer">
1598        <p>Ja &ndash; gerade dann kann sich oft am meisten l&ouml;sen. Weil du bereits bereit bist, tiefer zu gehen.</p>
1599      </div>
1600    </div>
1601
1602    <div class="faq-item reveal">
1603      <div class="faq-question">
1604        <h3>Muss ich erst meine Blockaden loswerden?</h3>
1605        <div class="faq-toggle"></div>
1606      </div>
1607      <div class="faq-answer">
1608        <p>Nein. Du musst nichts wegmachen, bevor du ankommen darfst. Wenn du dich an dein wahres Wesen erinnerst, verlieren alte Muster oft ganz von selbst ihren Halt.</p>
1609      </div>
1610    </div>
1611
1612    <div class="faq-item reveal">
1613      <div class="faq-question">
1614        <h3>Muss ich spirituell sein?</h3>
1615        <div class="faq-toggle"></div>
1616      </div>
1617      <div class="faq-answer">
1618        <p>Nein. Offenheit reicht. Es geht nicht um Glaubenss&auml;tze, sondern um deine innere Wahrheit.</p>
1619      </div>
1620    </div>
1621
1622    <div class="faq-item reveal">
1623      <div class="faq-question">
1624        <h3>Was, wenn ich nichts sp&uuml;re?</h3>
1625        <div class="faq-toggle"></div>
1626      </div>
1627      <div class="faq-answer">
1628        <p>Dann schauen wir gemeinsam tiefer. Jeder Mensch hat seinen eigenen Zugang &ndash; und den finden wir.</p>
1629      </div>
1630    </div>
1631
1632    <div class="faq-item reveal">
1633      <div class="faq-question">
1634        <h3>Ist das Coaching oder Heilung?</h3>
1635        <div class="faq-toggle"></div>
1636      </div>
1637      <div class="faq-answer">
1638        <p>Keines von beidem. Ich repariere nichts an dir &ndash; denn in deinem Innersten ist nichts kaputt. Heilung geschieht, wenn du dich an deine innerste Wahrheit erinnerst und die alten Illusionen dar&uuml;ber, wer du bist, sanft von dir abfallen d&uuml;rfen.</p>
1639      </div>
1640    </div>
1641
1642    <div class="faq-item reveal">
1643      <div class="faq-question">
1644        <h3>Wie schnell wirkt das?</h3>
1645        <div class="faq-toggle"></div>
1646      </div>
1647      <div class="faq-answer">
1648        <p>So tief, wie du bereit bist, es zuzulassen. Manche sp&uuml;ren sofort Ver&auml;nderung, bei anderen entfaltet sich der Prozess &uuml;ber Wochen.</p>
1649      </div>
1650    </div>
1651
1652    <div class="faq-item reveal">
1653      <div class="faq-question">
1654        <h3>Was unterscheidet dich von anderen?</h3>
1655        <div class="faq-toggle"></div>
1656      </div>
1657      <div class="faq-answer">
1658        <p>Ich arbeite nicht an deinen Defiziten, sondern mit deiner Vollkommenheit. Keine Methode von der Stange &ndash; sondern Seelenarbeit, die dich daran erinnert, wer du wirklich bist.</p>
1659      </div>
1660    </div>
1661  </div>
1662</section>
1663
1664<!-- CTA FINAL -->
1665<section class="cta-section">
1666  <h2 class="reveal">Dein Weg beginnt<br><em>in dir.</em></h2>
1667  <p class="reveal">
1668    Starte mit der kostenlosen Leichtigkeits-Meditation<br>
1669    und erlebe selbst, was sich ver&auml;ndert.
1670  </p>
1671  <div class="cta-buttons reveal">
1672    <a href="#community" class="btn-primary">Jetzt kostenlos starten</a>
1673    <a href="mailto:[email protected]" class="btn-secondary">Pers&ouml;nlich sprechen</a>
1674  </div>
1675</section>
1676
1677<!-- PROVENEXPERT -->
1678<section style="padding:3rem 2rem 4rem;background:var(--white);text-align:center;">
1679  <div id="pewl"></div>
1680  
1680<script type="text/javascript" src="https://www.provenexpert.com/widget/landing_sebastian-vahl.js?feedback=1&avatar=1&competence=1&language=de-de&style=black" async></script>
1680
1681  <link rel="stylesheet" type="text/css" href="https://www.provenexpert.com/css/widget_landing.css" media="screen,print">
1682</section>
1683
1684<!-- FOOTER -->
1685<footer>
1686  <div class="footer-brand">
1687    <a href="#" class="logo"><img src="images/logo-gophiel.png" alt="Gophiel Logo">GOPHIEL</a>
1688    <p>Seelenbegleitung &ndash; f&uuml;r Menschen, die bereit sind, ihren wahren Weg zu gehen.</p>
1689  </div>
1690
1691  <div class="footer-col">
1692    <h4>Navigation</h4>
1693    <ul>
1694      <li><a href="#methode">Dein Weg</a></li>
1695      <li><a href="#angebote">Angebote</a></li>
1696      <li><a href="angebote.html">Alle Angebote</a></li>
1697      <li><a href="#ueber">&Uuml;ber mich</a></li>
1698      <li><a href="#community">Meditation</a></li>
1699      <li><a href="events.html">Events</a></li>
1700    </ul>
1701  </div>
1702
1703  <div class="footer-col">
1704    <h4>Kontakt</h4>
1705    <ul>
1706      <li><a href="mailto:[email protected]">E-Mail schreiben</a></li>
1707    </ul>
1708  </div>
1709
1710  <div class="footer-bottom">
1711    <!-- ============================================================
1712     Gophiel · Gemeinsamer Rechts-Footer (ZENTRAL gepflegt)
1713     Einbinden per nginx SSI mit der include-virtual-Direktive auf
1714     diese Datei (/partials/footer-legal.html). Hier KEINE rohe
1715     SSI-Direktive in Kommentare schreiben — nginx parst sie sonst
1716     und die Datei bindet sich selbst rekursiv ein.
1717     Aenderungen hier wirken sofort auf ALLEN Seiten (pages/ ist
1718     volume-gemountet). Farben erbt der Footer (color:inherit),
1719     nur der Widerruf-Button hat feste Goldtoene.
1720     ============================================================ -->
1721<style>
1722  .gp-footer-legal{margin-top:.75rem;font-size:.8rem;line-height:1.9;text-align:center}
1723  .gp-footer-legal a{color:inherit;text-decoration:none;opacity:.85}
1724  .gp-footer-legal a:hover{opacity:1;text-decoration:underline}
1725  .gp-footer-legal .gp-sep{opacity:.4;margin:0 .45rem}
1726  .gp-footer-legal .gp-widerruf{display:inline-block;vertical-align:middle;margin:0 .35rem 0 0;padding:.3rem .85rem;border:1px solid #C9922A;border-radius:999px;color:#E8B94F;font-weight:600;font-size:.75rem;text-decoration:none;opacity:1}
1727  .gp-footer-legal .gp-widerruf:hover{text-decoration:none;opacity:1;background:rgba(201,146,42,.12)}
1728  .gp-footer-legal .gp-copy{display:block;margin-top:.55rem;opacity:.7}
1729</style>
1730<div class="gp-footer-legal">
1731  <a class="gp-widerruf" href="https://mailflow.gophiel.de/widerruf">&#8617;&nbsp; Vertrag widerrufen</a>
1732  <a href="https://pages.gophiel.de/impressum">Impressum</a>
1733  <span class="gp-sep">&middot;</span>
1734  <a href="https://pages.gophiel.de/datenschutz">Datenschutz</a>
1735  <span class="gp-copy">&copy; 2026 Gophiel &middot; Sebastian Vahl &middot; M&uuml;nchen</span>
1736</div>
1737
1738  </div>
1739</footer>
1740
1741<div class="disclaimer">
1742  Rechtlicher Hinweis: Meine Arbeit dient der Aktivierung und St&auml;rkung der Selbstheilungskr&auml;fte.
1743  Sie ersetzt nicht den Besuch eines Arztes, Heilpraktikers oder Psychotherapeuten. Ich gebe keine Heilversprechen.
1744</div>
1745
1746<script>
1747  // Scroll reveal
1748  const observer = new IntersectionObserver((entries) => {
1749    entries.forEach(entry => {
1750      if (entry.isIntersecting) entry.target.classList.add('visible');
1751    });
1752  }, { threshold: 0.15 });
1753
1754  document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
1755
1756  // Nav scroll effect
1757  window.addEventListener('scroll', () => {
1758    document.querySelector('nav').classList.toggle('scrolled', window.scrollY > 50);
1759  });
1760
1761  // Mobile menu
1762  const toggle = document.querySelector('.menu-toggle');
1763  const navLinks = document.querySelector('.nav-links');
1764  toggle.addEventListener('click', () => {
1765    toggle.classList.toggle('active');
1766    navLinks.classList.toggle('open');
1767  });
1768
1769  // Close mobile menu on link click
1770  navLinks.querySelectorAll('a').forEach(link => {
1771    link.addEventListener('click', () => {
1772      toggle.classList.remove('active');
1773      navLinks.classList.remove('open');
1774    });
1775  });
1776
1777  // FAQ accordion
1778  document.querySelectorAll('.faq-item').forEach(item => {
1779    item.querySelector('.faq-question').addEventListener('click', () => {
1780      const wasActive = item.classList.contains('active');
1781      document.querySelectorAll('.faq-item').forEach(i => i.classList.remove('active'));
1782      if (!wasActive) item.classList.add('active');
1783    });
1784  });
1785</script>
1785
1786
1787</body>
1788</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.